/* بوابة منبج الرقمية — manbij-ds.css
   مولَّد من نظام التصميم (tokens.json + components/bundle.css). للموبايل أولاً. */

@font-face { font-family: "itf Qomra Arabic"; src: url("../fonts/itfQomraArabic-Regular.7962ca5f3beb.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "itf Qomra Arabic"; src: url("../fonts/itfQomraArabic-Bold.4782a0c77023.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --forest-900: #042623;
  --forest-800: #054239;
  --forest-700: #15544B;
  --forest-600: #1B685D;
  --forest-500: #238477;
  --forest-400: #428177;
  --forest-300: #94C7BF;
  --forest-100: #E6EFEF;
  --forest-50: #F2F7F7;
  --gold-900: #6E5A30;
  --gold-800: #8C733E;
  --gold-700: #988561;
  --gold-500: #BDA674;
  --gold-300: #DACBB0;
  --gold-200: #EDEBE0;
  --gold-100: #F3EFE6;
  --gold-50: #FAF5EB;
  --red-800: #4A151E;
  --red-700: #761629;
  --red-600: #9E1C35;
  --red-300: #D8B2B7;
  --red-100: #FBF2F4;
  --neutral-950: #111B19;
  --neutral-900: #161616;
  --neutral-700: #3D3A3B;
  --neutral-500: #6B6869;
  --neutral-400: #9E9C9D;
  --neutral-300: #D8D4C8;
  --neutral-100: #F3EFE6;
  --neutral-50: #F8F7F3;
  --white: #FFFFFF;
  --whatsapp: #25D366;
  --whatsapp-ink: #0B3D2E;
  --bg-page: var(--neutral-50);
  --bg-surface: var(--white);
  --bg-subtle: var(--neutral-100);
  --bg-input: #FAF9F6;
  --bg-footer: var(--neutral-950);
  --text-heading: var(--forest-900);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-on-dark: var(--gold-200);
  --color-primary: var(--forest-500);
  --color-primary-hover: var(--forest-600);
  --color-primary-active: var(--forest-700);
  --on-primary: var(--white);
  --color-link: var(--forest-600);
  --color-accent: var(--gold-500);
  --color-danger: var(--red-700);
  --color-danger-hover: var(--red-600);
  --focus-ring: var(--forest-500);
  --border-color: var(--neutral-300);
  --border-subtle: var(--gold-200);
  --border-hover: var(--gold-300);
  --border-input: var(--gold-700);
  --success: var(--forest-800);
  --success-soft: var(--forest-100);
  --success-border: var(--forest-300);
  --warning: var(--gold-900);
  --warning-soft: var(--gold-50);
  --warning-border: var(--gold-300);
  --danger-soft: var(--red-100);
  --danger-border: var(--red-300);
  --info: var(--forest-700);
  --info-soft: var(--forest-50);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-section-lg: 84px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --shadow-xs: 0 1px 2px rgba(4, 38, 35, 0.05);
  --shadow-md: 0 12px 32px -12px rgba(4, 38, 35, 0.14);
  --shadow-lg: 0 20px 44px -18px rgba(4, 38, 35, 0.22);
  --shadow-btn-primary: 0 8px 18px -8px rgba(35, 132, 119, 0.6);
  --shadow-drawer: -16px 0 40px rgba(4, 38, 35, 0.18);
  --btn-h-sm: 40px;
  --btn-h-md: 44px;
  --btn-h-lg: 48px;
  --btn-h-xl: 56px;
  --input-h: 48px;
  --header-h: 64px;
  --logo-h-header: 38px;
  --logo-h-drawer: 42px;
  --logo-h-footer: 48px;
  --container-max: 1200px;
  --container-narrow: 760px;
  --drawer-w: 340px;
  --z-header: 100;
  --z-backdrop: 190;
  --z-drawer: 200;
  --font-sans: "itf Qomra Arabic", Tahoma, "Segoe UI", sans-serif;
}
.t-display { font-family: var(--font-sans); font-size: 32px; line-height: 1.3; font-weight: 700; }
.t-h1 { font-family: var(--font-sans); font-size: 26px; line-height: 1.4; font-weight: 700; }
.t-h2 { font-family: var(--font-sans); font-size: 24px; line-height: 1.4; font-weight: 700; }
.t-h3 { font-family: var(--font-sans); font-size: 18px; line-height: 1.5; font-weight: 700; }
.t-h4 { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 700; }
.t-tagline { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 700; }
.t-lead { font-family: var(--font-sans); font-size: 15px; line-height: 1.8; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.8; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; font-weight: 700; }
.t-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; font-weight: 400; }
.t-caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; font-weight: 400; }
.t-micro { font-family: var(--font-sans); font-size: 11.5px; line-height: 1.5; font-weight: 700; }
.t-number { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   بوابة منبج الرقمية — مكونات نظام التصميم
   تقرأ قيمها من tokens.css. مكتوبة للموبايل أولاً: القاعدة للشاشات
   الصغيرة، ثم @media (min-width: 640px) و (min-width: 992px).
   ═══════════════════════════════════════════════════════════════════ */

/* ── الأساس ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.8; color: var(--text-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; }
/* جماليات خط قمرة: الحروف المرسلة (ss01) مع الربط والتقنين — مفعّلة في كل الموقع */
html, body { font-feature-settings: "ss01" 1, "kern" 1, "liga" 1, "rlig" 1, "calt" 1; font-kerning: normal; }
button, input, select, textarea, optgroup { font-family: inherit; font-feature-settings: inherit; }
/* الأرقام والهواتف والرموز تبقى بأشكالها العادية */
.t-number, .input--code, .ref-code, .field__counter, .contact-card__value { font-feature-settings: "kern" 1; }
img, svg { max-width: 100%; }
a { color: var(--color-link); }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[dir="rtl"] .t-number, .t-number, input[type="tel"], input[type="email"], .input--code, .ref-code, .contact-card__value { direction: ltr; unicode-bidi: isolate; }
.t-number { display: inline-block; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.w-full { width: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } html { scroll-behavior: auto; } }

/* ── الطباعة: ألوان الأنماط وأحجام الديسكتوب (الأحجام الأساسية من tokens.css) ── */
.t-display { color: var(--gold-800); }
.t-h1, .t-h2, .t-h3, .t-h4 { color: var(--text-heading); }
.t-tagline { color: var(--color-danger); }
.t-lead, .t-sm { color: var(--text-secondary); }
.t-body { color: var(--text-primary); }
.t-caption, .t-micro { color: var(--text-muted); }
@media (min-width: 640px) {
  .t-display { font-size: 46px; } .t-h1 { font-size: 32px; } .t-h2 { font-size: 30px; }
  .t-tagline { font-size: 19px; } .t-lead { font-size: 16px; }
}
@media (min-width: 992px) {
  .t-display { font-size: 62px; line-height: 1.2; } .t-h1 { font-size: 40px; line-height: 1.35; } .t-h2 { font-size: 36px; line-height: 1.35; }
  .t-h3 { font-size: 21px; } .t-tagline { font-size: 22px; } .t-lead { font-size: 17px; }
}

/* ── التخطيط ── */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--space-4)); }
.section { padding-block: var(--space-12); background: var(--bg-page); border-top: 1px solid var(--border-color); }
.section--white { background: var(--bg-surface); }
.section--flush { border-top: 0; }
.section-header { max-width: 720px; margin-bottom: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.page-start { padding-top: calc(var(--header-h) + var(--space-8)); }
.page-hero { padding-top: calc(var(--header-h) + var(--space-10)); padding-bottom: var(--space-8); text-align: center; }
.page-hero .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.bg-ambient { background: radial-gradient(120% 70% at 50% 0%, var(--gold-50) 0%, var(--bg-page) 70%); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 640px) {
  .container { padding-inline: var(--space-6); }
  .container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--space-6)); }
  .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .section { padding-block: var(--space-section-lg); }
  .section-header { margin-bottom: var(--space-10); }
  .page-hero { padding-top: calc(72px + 72px); padding-bottom: var(--space-12); }
  .page-start { padding-top: calc(72px + var(--space-10)); }
  .grid { gap: var(--space-6); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Eyebrow / Tag ── */
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; padding: 4px 12px; border: 1px solid var(--gold-300); border-radius: var(--radius-pill); background: var(--bg-surface); color: var(--gold-900); font-size: 12.5px; line-height: 1.6; font-weight: 700; }
.page-hero .eyebrow { align-self: center; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px var(--gold-100); }
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--bg-subtle); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 12px; font-weight: 700; line-height: 1.6; }

/* ── الحركة ── */
.anim-fade-up, [data-fm] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.anim-fade-up.is-visible, [data-fm].is-visible { opacity: 1; transform: none; }
.no-js .anim-fade-up, .no-js [data-fm] { opacity: 1; transform: none; }

/* ═════════ الأزرار ═════════ */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--btn-h-md); padding: 0 20px; border: 1.5px solid transparent; border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-secondary); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn__arrow { transition: transform .2s; }
.btn:hover:not(:disabled):not(.btn--link) { transform: translateY(-2px); }
.btn:hover .btn__arrow { transform: translate(-2px, -2px); }
.btn:active:not(:disabled) { transform: none; }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn--primary { background: var(--color-primary); color: var(--on-primary); }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); box-shadow: var(--shadow-btn-primary); }
.btn--primary:active:not(:disabled) { background: var(--color-primary-active); }
.btn--secondary { background: var(--bg-surface); color: var(--gold-900); border-color: var(--color-accent); }
.btn--secondary:hover:not(:disabled) { background: var(--gold-50); }
.btn--subtle { background: var(--bg-subtle); color: var(--text-heading); border-color: var(--border-color); }
.btn--subtle:hover:not(:disabled) { border-color: var(--border-hover); background: var(--bg-surface); }
.btn--outline { background: transparent; color: var(--color-primary-active); border-color: var(--color-primary); }
.btn--outline:hover:not(:disabled) { background: var(--forest-50); }
.btn--dark { background: var(--forest-900); color: var(--white); }
.btn--dark:hover:not(:disabled) { background: var(--forest-800); }
.btn--danger { background: var(--color-danger); color: var(--white); }
.btn--danger:hover:not(:disabled) { background: var(--color-danger-hover); }
.btn--danger:active:not(:disabled) { background: var(--red-800); }
.btn--danger-outline { background: transparent; color: var(--color-danger); border-color: var(--red-300); }
.btn--danger-outline:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--color-danger); }
.btn--whatsapp { background: var(--whatsapp); color: var(--whatsapp-ink); }
.btn--whatsapp:hover:not(:disabled) { filter: brightness(.95); }
.btn--ghost { background: transparent; color: var(--text-heading); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-subtle); }
.btn--link { min-height: 0; padding: 0; background: none; border: 0; color: var(--color-link); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.btn--link:hover { color: var(--forest-800); }
.btn--sm { min-height: var(--btn-h-sm); padding: 0 14px; font-size: 14px; }
.btn--sm svg { width: 14px; height: 14px; }
.btn--md { min-height: var(--btn-h-md); }
.btn--lg { min-height: var(--btn-h-lg); padding: 0 26px; font-size: 16px; }
.btn--lg svg { width: 17px; height: 17px; }
.btn--xl { min-height: var(--btn-h-xl); padding: 0 28px; font-size: 17px; }
.btn--xl svg { width: 18px; height: 18px; }
.btn--pill { border-radius: var(--radius-pill); }
.btn--flat { border-radius: var(--radius-md); }
.btn--flat:hover:not(:disabled) { transform: none; }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--btn-h-md); padding: 0; }
.btn--icon.btn--sm { width: var(--btn-h-sm); }
.btn--round { border-radius: 50%; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--bg-subtle); color: var(--text-muted); border: 1.5px dashed var(--neutral-400); box-shadow: none; cursor: not-allowed; transform: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-color: var(--on-primary) var(--on-primary) transparent transparent; animation: ds-spin .7s linear infinite; }
.btn--secondary.is-loading::after, .btn--subtle.is-loading::after, .btn--outline.is-loading::after { border-color: var(--color-primary) var(--color-primary) transparent transparent; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* على الموبايل تتمدد أزرار المجموعة لعرض كامل */
.btn-group--stack-mobile > .btn { flex: 1 1 100%; }
@media (min-width: 640px) { .btn-group--stack-mobile > .btn { flex: 0 1 auto; } }

/* ═════════ الحقول ═════════ */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.field:last-child { margin-bottom: 0; }
.field__label { font-size: 14.5px; line-height: 1.6; font-weight: 700; color: var(--text-heading); }
.field__required { color: var(--color-danger); }
.field__optional { margin-inline-start: 6px; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.field__hint, .field__counter { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.field__counter { align-self: flex-end; direction: ltr; }
.field__error { display: none; align-items: center; gap: 6px; font-size: 13px; line-height: 1.6; font-weight: 700; color: var(--color-danger); }
.field__error svg { width: 15px; height: 15px; flex: none; }
.has-error .field__error { display: flex; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }

.input, .select, .textarea { width: 100%; min-height: var(--input-h); padding: 10px 16px; border: 1.5px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-primary); font-family: inherit; font-size: 16px; line-height: 1.6; transition: border-color .2s, background-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--forest-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; background: var(--bg-surface); border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--forest-100); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--bg-subtle); border-style: dashed; border-color: var(--neutral-400); color: var(--text-muted); cursor: not-allowed; }
.has-error .input, .has-error .select, .has-error .textarea, .input-error { border-color: var(--color-danger); background: var(--danger-soft); }
.has-error .input:focus, .has-error .textarea:focus { box-shadow: 0 0 0 4px var(--red-100); }
.textarea { min-height: 128px; padding-block: 12px; resize: vertical; }
.select { padding-inline-end: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042623' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: left 16px center; }
.input--code { font-weight: 700; letter-spacing: .12em; text-align: center; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; inset-inline-start: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.input-icon .input { padding-inline-start: 46px; }
.input-group { display: flex; flex-direction: column; gap: var(--space-2); }
.input-group .btn { min-height: var(--input-h); }
@media (min-width: 640px) { .input-group { flex-direction: row; } .input-group .input { flex: 1; } }

/* اختيارات */
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (min-width: 640px) { .choice-grid { grid-template-columns: repeat(4, 1fr); } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__label { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--btn-h-md); padding: 8px 12px; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-secondary); font-size: 14.5px; font-weight: 700; transition: border-color .2s, background-color .2s, color .2s; }
.choice__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); flex: none; }
.choice:hover .choice__label { border-color: var(--border-hover); }
.choice input:checked + .choice__label { border-color: var(--color-primary); background: var(--forest-50); color: var(--text-heading); box-shadow: inset 0 0 0 1px var(--color-primary); }
.choice input:focus-visible + .choice__label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 32px; font-size: 15px; line-height: 1.7; color: var(--text-primary); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 4px 0 0; flex: none; accent-color: var(--color-primary); cursor: pointer; }
.check--boxed { padding: 14px 16px; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-subtle); }
.check--boxed:has(input:checked) { border-color: var(--color-primary); background: var(--forest-50); }
.switch { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 15px; font-weight: 700; color: var(--text-heading); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; width: 46px; height: 26px; border-radius: var(--radius-pill); background: var(--neutral-400); transition: background-color .2s; flex: none; }
.switch__track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-xs); transition: inset-inline-start .2s; }
.switch input:checked + .switch__track { background: var(--color-primary); }
.switch input:checked + .switch__track::after { inset-inline-start: 23px; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-6) var(--space-4); border: 1.5px dashed var(--border-input); border-radius: var(--radius-lg); background: var(--bg-input); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--color-primary); background: var(--forest-50); }
.dropzone:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dropzone__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--forest-100); color: var(--color-primary-active); }
.dropzone__icon svg { width: 24px; height: 24px; }
.dropzone__title { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.dropzone__hint { font-size: 13px; color: var(--text-muted); }
.dropzone.has-file { border-style: solid; border-color: var(--color-primary); background: var(--forest-50); }
.dropzone.has-file .dropzone__icon { background: var(--color-primary); color: var(--white); }
.dropzone.has-file .dropzone__title { overflow-wrap: anywhere; }
.divider-text { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-4); font-size: 13px; font-weight: 700; color: var(--text-muted); }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

/* ═════════ البطاقات ═════════ */
.card { position: relative; display: flex; flex-direction: column; padding: var(--space-5); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.card--muted { background: var(--bg-subtle); box-shadow: none; }
.card--interactive { transition: transform .25s, box-shadow .25s, border-color .25s; }
.card--interactive:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: var(--shadow-lg); }
.card--form { border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .card { padding: var(--space-6); } }
@media (min-width: 992px) { .card { padding: 28px; } .card--form { padding: var(--space-8); } }
.card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.card__header--between { justify-content: space-between; }
.card__title-group { display: flex; flex-direction: column; gap: 2px; }
.card__title { display: flex; align-items: center; gap: var(--space-2); font-size: 18px; line-height: 1.5; font-weight: 700; color: var(--text-heading); }
.card__subtitle { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.card__desc { margin-top: var(--space-2); font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.card__features { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.card__features li { position: relative; padding-inline-start: 18px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.card__features li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
@media (min-width: 992px) { .card__title { font-size: 21px; } }

.icon-box { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: var(--radius-md); background: var(--forest-100); color: var(--color-primary-active); }
.icon-box svg { width: 24px; height: 24px; }
.icon-box--sm { width: 40px; height: 40px; border-radius: 12px; }
.icon-box--sm svg { width: 20px; height: 20px; }
.icon-box--lg { width: 72px; height: 72px; border-radius: var(--radius-lg); }
.icon-box--lg svg { width: 34px; height: 34px; }
.icon-box--green { background: var(--color-primary); color: var(--on-primary); }
.icon-box--gold { background: var(--gold-100); color: var(--gold-800); }
.icon-box--danger { background: var(--danger-soft); color: var(--color-danger); }

.service-card { justify-content: space-between; gap: var(--space-5); }
.service-card__body { display: flex; flex-direction: column; }
.service-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); }

.contact-card { flex-direction: column; gap: var(--space-4); }
.contact-card__info { display: flex; align-items: center; gap: var(--space-3); }
.contact-card__name { font-size: 15.5px; line-height: 1.5; font-weight: 700; color: var(--text-heading); }
.contact-card__value { font-size: 15px; font-weight: 700; color: var(--text-secondary); text-align: right; }
.contact-card__actions { display: flex; gap: var(--space-2); }
.contact-card__actions .btn { flex: 1; }
@media (min-width: 640px) { .contact-card { flex-direction: row; align-items: center; justify-content: space-between; } .contact-card__actions .btn { flex: 0 0 auto; } }

.stat-card { gap: 4px; padding: var(--space-4); }
.stat-card__label { font-size: 13px; color: var(--text-muted); }
.stat-card__value { font-size: 28px; line-height: 1.3; font-weight: 700; color: var(--text-heading); }
.stat-card__trend { font-size: 12.5px; font-weight: 700; color: var(--success); }

.result-card { align-items: center; text-align: center; gap: var(--space-3); }
.result-card__title { font-size: 21px; line-height: 1.5; font-weight: 700; color: var(--text-heading); }
.result-card__text { font-size: 15px; color: var(--text-secondary); }
.ref-code { margin-block: var(--space-2); padding: 10px 20px; border: 1.5px dashed var(--color-accent); border-radius: var(--radius-md); background: var(--gold-50); color: var(--text-heading); font-size: 22px; font-weight: 700; letter-spacing: .08em; }

.data-list { display: flex; flex-direction: column; }
.data-list__row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: 12px; border-bottom: 1px solid var(--border-subtle); font-size: 14.5px; }
.data-list__row:last-child { border-bottom: 0; }
.data-list__key { color: var(--text-muted); }
.data-list__value { font-weight: 700; color: var(--text-heading); text-align: left; }

/* ═════════ الشارات والتنبيهات ═════════ */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; line-height: 1.6; font-weight: 700; white-space: nowrap; background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid transparent; }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--gold { background: var(--gold-100); color: var(--gold-900); }
.badge--danger { background: var(--danger-soft); color: var(--color-danger); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--neutral { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border-color); }
.badge--dark { background: var(--forest-900); color: var(--gold-200); }

.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px 16px; border: 1px solid; border-radius: var(--radius-lg); font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.alert > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert__title { display: block; font-size: 15px; font-weight: 700; }
.alert--success { background: var(--success-soft); border-color: var(--success-border); }
.alert--success > svg, .alert--success .alert__title { color: var(--success); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning-border); }
.alert--warning > svg, .alert--warning .alert__title { color: var(--warning); }
.alert--danger { background: var(--danger-soft); border-color: var(--danger-border); }
.alert--danger > svg, .alert--danger .alert__title { color: var(--color-danger); }
.alert--info { background: var(--info-soft); border-color: var(--forest-100); }
.alert--info > svg, .alert--info .alert__title { color: var(--info); }

/* ═════════ الناف بار ═════════ */
.site-header { position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header); background: rgba(248, 247, 243, .88); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s, background-color .25s; }
.site-header.scrolled { background: rgba(248, 247, 243, .96); border-bottom-color: var(--border-color); box-shadow: var(--shadow-md); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--header-h); }
.official-brand-logo { display: inline-flex; align-items: center; flex: none; }
.official-brand-logo img { display: block; height: var(--logo-h-header); width: auto; }
.desktop-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-cta { display: none; }
.mobile-menu-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-heading); cursor: pointer; }
.mobile-menu-btn:hover { border-color: var(--border-hover); }
@media (min-width: 992px) {
  .nav-inner { height: 72px; }
  .official-brand-logo img { height: 48px; }
  .desktop-nav { display: flex; align-items: center; gap: var(--space-8); }
  .desktop-nav a { position: relative; padding: 8px 2px; color: var(--text-secondary); font-size: 15.5px; font-weight: 700; text-decoration: none; transition: color .2s; }
  .desktop-nav a:hover { color: var(--color-primary-hover); }
  .desktop-nav a.active { color: var(--text-heading); }
  .desktop-nav a.active::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2.5px; border-radius: 2px; background: var(--color-accent); }
  .desktop-nav a.hotline-link { color: var(--color-danger); }
  .header-cta { display: inline-flex; }
  .mobile-menu-btn { display: none; }
}
.mobile-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: rgba(4, 38, 35, .45); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.mobile-panel { position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--z-drawer); display: flex; flex-direction: column; gap: var(--space-6); width: min(84vw, var(--drawer-w)); padding: var(--space-6) var(--space-5); background: var(--bg-surface); border-radius: var(--radius-xl) 0 0 var(--radius-xl); box-shadow: var(--shadow-drawer); transform: translateX(105%); visibility: hidden; transition: transform .3s ease, visibility .3s; overflow-y: auto; }
body.menu-open { overflow: hidden; }
body.menu-open .mobile-backdrop { opacity: 1; visibility: visible; }
body.menu-open .mobile-panel { transform: none; visibility: visible; }
.mobile-panel-header { display: flex; align-items: center; justify-content: space-between; }
.mobile-panel-header .official-brand-logo img { height: var(--logo-h-drawer); }
.panel-close-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-color); border-radius: 50%; background: var(--bg-subtle); color: var(--text-heading); font: inherit; font-size: 14px; cursor: pointer; }
.mobile-links { display: flex; flex-direction: column; gap: 4px; }
.panel-nav-link { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-md); border-inline-start: 3px solid transparent; color: var(--text-heading); font-size: 16px; font-weight: 700; text-decoration: none; }
.panel-nav-link span { color: var(--color-accent); }
.panel-nav-link:hover { background: var(--bg-subtle); }
.panel-nav-link.active { background: rgba(189, 166, 116, .14); border-inline-start-color: var(--color-accent); }
.panel-nav-link.hotline-link { color: var(--color-danger); }

/* ═════════ الفوتر ═════════ */
.site-footer { padding-top: var(--space-12); background: var(--bg-footer); color: var(--text-on-dark); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); padding-bottom: var(--space-8); }
.footer-brand img { display: block; height: var(--logo-h-footer); width: auto; margin-bottom: var(--space-4); }
.footer-desc { max-width: 380px; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .7); }
.footer-col-title { margin-bottom: var(--space-4); font-size: 16px; font-weight: 700; color: var(--color-accent); }
.footer-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links-list a { color: rgba(255, 255, 255, .75); font-size: 14.5px; text-decoration: none; transition: color .2s; }
.footer-links-list a:hover { color: var(--white); }
.footer-links-list a:focus-visible { outline-color: var(--color-accent); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-block: var(--space-5); border-top: 1px solid rgba(255, 255, 255, .1); text-align: center; font-size: 13px; color: rgba(255, 255, 255, .55); }
@media (min-width: 992px) {
  .site-footer { padding-top: 72px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-10); padding-bottom: var(--space-12); }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: start; }
}
.footer-links-list .t-number { font: inherit; }