/* ==========================================================================
   العرّاب — طبقة الهوية البصرية والخطوط الأصلية
   العناوين: Zain PC Variable (Zain-VF) · النصوص: Cairo
   الألوان: #f75327 (لهب) · #28292a (فحمي) · #2781f7 (أزرق)
   ========================================================================== */

/* 1. الخط الأساسي والوحيد للعناوين — Zain-PC-VF (Variable Font) */
@font-face {
    font-family: 'Zain-VF';
    src: url('../fonts/Zain-PC-VF.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Zain';
    src: url('../fonts/Zain-PC-VF.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ربط العناوين وكافة عناصر العرض بخط Zain-VF */
.font-display,
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.watermark,
.watermark-dark,
.logo-mark,
.font-swash,
.font-zain-light {
    font-family: 'Zain-VF', 'Zain', sans-serif !important;
}

:root {
    --brand-ink: #1c1d1e;
    --brand-navy: #28292a;
    --brand-navy-card: #343637;
    --brand-flame: #f75327;
    --brand-flame-light: #ff7a52;
    --brand-flame-dark: #b83713;
    --brand-azure: #2781f7;
    --brand-azure-light: #5aa0ff;
    --brand-azure-dark: #165ab5;
    --brand-azure-soft: rgba(39, 129, 247, 0.12);
    --brand-parchment: #f5f6f7;
    --brand-parchment-border: #e7eaee;
    --text-muted-accessible: #a3a8b0;
}

/* تحسين تباين حقول الإدخال والنصوص النائبة (WCAG 2.2 AA) */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--text-muted-accessible) !important;
    opacity: 1 !important;
}

/* الحفاظ على هوية وتناسق الأقسام الفاتحة (Parchment & Light Sections) */
.bg-parchment,
[class*="bg-parchment"] {
    background-color: var(--brand-parchment) !important;
    color: var(--brand-ink) !important;
}

.bg-parchment h1,
.bg-parchment h2,
.bg-parchment h3,
.bg-parchment h4,
[class*="bg-parchment"] h1,
[class*="bg-parchment"] h2,
[class*="bg-parchment"] h3,
[class*="bg-parchment"] h4 {
    color: var(--brand-flame-dark) !important;
}

.bg-parchment p,
[class*="bg-parchment"] p {
    color: #44474a !important;
}

.bg-parchment a,
[class*="bg-parchment"] a {
    color: var(--brand-azure-dark) !important;
}

/* شريط علوي خافت يدمج البرتقالي بالأزرق كحد فاصل */
#mainnav::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(to left, var(--brand-flame) 0%, var(--brand-flame) 58%, var(--brand-azure) 100%);
    pointer-events: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-azure) !important;
    box-shadow: 0 0 0 4px rgba(39, 129, 247, 0.10) !important;
    outline: none;
}

.input-error,
.input-error:focus {
    border-color: #ef4444 !important;
    box-shadow: none !important;
}

.faq-icon.bg-gold {
    background-color: var(--brand-flame) !important;
    color: var(--brand-ink) !important;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand-azure) !important;
    outline-offset: 3px;
}

.dot-pattern {
    background-image:
        radial-gradient(circle at 50% 0%, rgba(247, 83, 39, 0.18) 1px, transparent 1px),
        radial-gradient(circle at 0% 50%, rgba(39, 129, 247, 0.10) 1px, transparent 1px);
    background-size: 40px 40px, 80px 80px;
}
.dot-pattern-dark {
    background-image:
        radial-gradient(circle at 50% 0%, rgba(247, 83, 39, 0.12) 1px, transparent 1px),
        radial-gradient(circle at 0% 50%, rgba(39, 129, 247, 0.08) 1px, transparent 1px);
    background-size: 30px 30px, 60px 60px;
}