/* =========================================================
   main.css — Global design system & components (v10/10)
   ========================================================= */

/* =========================================================
   0) CSS Reset & Baseline
   - يعتمد خصائص منطقية ويضبط baseline موحّد لكل العناصر
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
:root{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html:focus-within{ scroll-behavior:smooth; }
body{ margin:0; }
img,svg,video,canvas,audio,iframe,embed,object{ display:block; max-inline-size:100%; }
img{ block-size:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
:where(button,[type="button"],[type="reset"],[type="submit"]){ appearance:none; background:none; border:0; }
[hidden]{ display:none!important; }
.visually-hidden{
  position:absolute!important; inline-size:1px!important; block-size:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; white-space:nowrap!important; border:0!important;
  clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important;
}

/* Selection highlight (improved readability) */
::selection{
  background: color-mix(in oklab, var(--primary) 25%, transparent);
  color: var(--text);
}

/* =========================================================
   1) Fonts (Arabic + English)
   - فصل صارم بين خطوط العناوين وخطوط النص الأساسي
   - منع الـ faux styles مع font-synthesis
   ========================================================= */

/* AR — Upright (Regular) */
@font-face{
  font-family:"Droid Arabic Naskh";
  src:url("../fonts/DroidArabicNaskh.05ba1fbaf5de.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Noto Naskh Arabic";
  src:url("../fonts/NotoNaskhArabic.6d5ea642419b.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Amiri";
  src:url("../fonts/Amiri.6521f34a8093.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}

/* AR — Bold (حقيقي) */
@font-face{
  font-family:"Droid Arabic Naskh";
  src:url("../fonts/DroidArabicNaskh-Bold.2c3243438c23.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Noto Naskh Arabic";
  src:url("../fonts/NotoNaskhArabic-Bold.2c3243438c23.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Amiri";
  src:url("../fonts/Amiri-Bold.2c3243438c23.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}

/* EN (variable fonts: upright + italic) */
@font-face{
  font-family:"Inter";
  src:url("../fonts/InterVariable.b48d9b9b1945.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2150-218F;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("../fonts/SourceSans3VF-Upright.ca0690453ec4.woff2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2150-218F;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/InterVariable-Italic.628f63451f7b.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2150-218F;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("../fonts/SourceSans3VF-Italic.628f63451f7b.woff2") format("woff2");
  font-weight:200 900; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2150-218F;
}

/* =========================================================
   1.1) Legacy font fallback — optional (very old browsers)
   - يُفعّل تلقائيًا فقط عندما لا تُدعم الـ Variable Fonts
   ========================================================= */
@supports not (font-variation-settings: normal){
  @font-face{
    font-family:"Inter Legacy";
    /* استبدال الملفات الناقصة بملف variable الموجود لتجنب خطأ WhiteNoise */
    src:url("../fonts/InterVariable.b48d9b9b1945.woff2") format("woff2");
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"Inter Legacy";
    /* استبدال الملفات الناقصة بملف variable الموجود لتجنب خطأ WhiteNoise */
    src:url("../fonts/InterVariable.b48d9b9b1945.woff2") format("woff2");
    font-weight:700; font-style:normal; font-display:swap;
  }
  :root{
    --font-en-body:"Inter Legacy","Source Sans 3","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --font-en-headings:"Inter Legacy","SF Pro Display","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  }
}


/* =========================================================
   2) Design Tokens: Color / Radius / Shadow / Layout / Fonts
   ========================================================= */
:root{
  /* ===== Brand base ===== */
  --ashraf-coffee:#4C3B35; --ashraf-taupe:#AB9994; --ashraf-walnut:#6A4846;
  --ashraf-sky:#7BA9BA; --ashraf-porc:#DCD9DB; --ashraf-slate:#506572; --ashraf-mist:#C5D2DC;

  /* Brand map */
  --brand-cream:#F7F3EF;
  --brand-teal:var(--ashraf-sky);                 /* Primary */
  --brand-blue-gray:var(--ashraf-slate);
  --brand-ink:var(--ashraf-coffee);
  --brand-crimson:#A33B3A; --brand-maroon:#6E1F20; --brand-gold:#C9A34E;
  --brand-pink:#E9D6CF; --brand-shadow:#EDEBE9;
  --purple:#7c3aed;

  /* Primary palette */
  --primary:var(--brand-teal);
  /* Tints (lighter) */
  --primary-tint-1:color-mix(in oklab, var(--primary) 85%, white);
  --primary-tint-2:color-mix(in oklab, var(--primary) 70%, white);
  --primary-tint-3:color-mix(in oklab, var(--primary) 55%, white);
  --primary-tint-4:color-mix(in oklab, var(--primary) 40%, white);
  --primary-tint-5:color-mix(in oklab, var(--primary) 25%, white);
  /* Shades (darker) */
  --primary-shade-1:color-mix(in oklab, var(--primary) 85%, black);
  --primary-shade-2:color-mix(in oklab, var(--primary) 70%, black);
  --primary-shade-3:color-mix(in oklab, var(--primary) 55%, black);
  --primary-shade-4:color-mix(in oklab, var(--primary) 40%, black);
  --primary-shade-5:color-mix(in oklab, var(--primary) 25%, black);

  /* Scale aliases */
  --primary-50:var(--primary-tint-5);
  --primary-100:var(--primary-tint-4);
  --primary-200:var(--primary-tint-3);
  --primary-300:var(--primary-tint-2);
  --primary-400:var(--primary-tint-1);
  --primary-500:var(--primary);
  --primary-600:var(--primary-shade-1);
  --primary-700:var(--primary-shade-2);
  --primary-800:var(--primary-shade-3);
  --primary-900:var(--primary-shade-4);
  --primary-950:var(--primary-shade-5);

  /* Harmony */
  --primary-analog-1:#7BBAAC;
  --primary-analog-2:#7B89BA;
  --primary-complement:#BA8C7B;

  /* Radius / Shadows / Layout */
  --radius-sm:.5rem; --radius:.75rem; --radius-lg:1rem;
  --shadow-sm:0 .25rem .75rem rgba(0,0,0,.06);
  --shadow-md:0 .5rem 1.25rem rgba(0,0,0,.08);
  --page-x:clamp(8px, 2vw, 16px);
  --bs-gutter-x:1.5rem;
  --nav-z:1030;

  /* Navigation tokens */
  --nav-item-h:40px;
  --nav-item-px:14px;
  --nav-gap:.35rem;

  /* Brand/logo-to-menu gap */
  --brand-gap:1.25rem;

  /* Logo */
  --logo-min:72px; --logo-max:89px;
  --logo-size:clamp(var(--logo-min), 6vw, var(--logo-max));
  --logo-bump:0px; --logo-radius:10px;

  /* Typography stacks (overridden by lang) */
  /* محدث: إضافة fallback لاتيني في ستاك العربي لو ظهر نص EN بدون lang="en" */
  --font-ar-body:"Noto Naskh Arabic","Droid Arabic Naskh","Amiri","Inter","Source Sans 3",system-ui,serif;
  --font-ar-headings:"Amiri","Noto Naskh Arabic","Droid Arabic Naskh","Inter","Source Sans 3",system-ui,serif;
  --font-en-body:"Source Sans 3","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-en-headings:"Inter","SF Pro Display","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* Defaults (will be overridden by html[lang]) */
  --font-body:var(--font-ar-body);
  --font-headings:var(--font-ar-headings);

  /* Light theme */
  --page-bg:var(--brand-cream);
  --card-bg:#fff; --card-elev:#fff; --text:var(--brand-ink);
  --muted:color-mix(in oklab, var(--brand-ink) 55%, white);
  --border:color-mix(in oklab, var(--ashraf-mist) 65%, white);
  --divider:color-mix(in oklab, var(--ashraf-porc) 65%, white);
  --link:var(--primary-800); --link-hover:var(--primary-900);
  --nav-bg:rgba(255,255,255,.9); --footer-bg:#fff;
  --focus-ring:color-mix(in oklab, var(--primary) 55%, transparent);

  /* Subtle badges (tokens only؛ لا نُعيد تعريف Bootstrap helpers) */
  --badge-danger-subtle:#ffe5e5;
  --badge-primary-subtle:#e6eeff;
  --badge-success-subtle:#e5fff2;
  --badge-warning-subtle:#fff6e0;
  --badge-purple-subtle:#efe8ff;

  /* Topbar */
  --topbar-fg:#fff; --topbar-fg-muted:rgba(255,255,255,.65);
  --topbar-border:color-mix(in oklab, #fff 10%, #000 10%);
  --topbar-bg:linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 25%, #2c3e50) 0%,
    color-mix(in oklab, var(--brand-blue-gray) 35%, #34495e) 100%);

  /* Navbar (solid) */
  --nav-bg-solid:#fff; --nav-border-color:var(--border); --nav-shadow-sm:0 2px 10px rgba(0,0,0,.06);

  /* Breadcrumb */
  --breadcrumb-bg:var(--topbar-bg);
  --breadcrumb-fg:var(--topbar-fg);
  --breadcrumb-fg-muted:var(--topbar-fg-muted);
  --breadcrumb-border:var(--topbar-border);

  /* Icons */
  --icon-size:1em;

  /* Safe area inset (for JS reads; env() can’t be read via getComputedStyle) */
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Lang stacks (يضبط متغيرات الخط حسب اللغة في جذر المستند) */
html[lang^="en"]{
  --font-body:var(--font-en-body);
  --font-headings:var(--font-en-headings);
}
html[lang^="ar"]{
  --font-body:var(--font-ar-body);
  --font-headings:var(--font-ar-headings);
}

/* =========================================================
   3) Theme Mode — explicit classes only (NO system auto)
   - لا نعتمد على prefers-color-scheme
   - الثيم يتحدد فقط عبر html.theme-dark / html.theme-light
   - color-scheme لضبط عناصر المتصفح الأصلية
   ========================================================= */

:root{
  color-scheme: light; /* default when no class is set */
}

html.theme-dark{
  color-scheme: dark;
}

html.theme-light{
  color-scheme: light;
}

/* مفيش أي تعيين لمتغيرات الألوان هنا.
   كل الـ tokens موجودة في القسم (4) تحت .theme-dark / .theme-light */


/* =========================================================
   4) Explicit Theme Classes on <html>
   ========================================================= */
html.theme-dark{
  --page-bg:#0f1417; --card-bg:#151a1e; --card-elev:#1b2024;
  --text:#ffffff; --muted:rgba(255,255,255,.72);
  --border:#2a3338; --divider:#273036;
  --link:color-mix(in oklab, var(--primary) 78%, white);
  --link-hover:color-mix(in oklab, var(--primary) 70%, black);
  --nav-bg:rgba(21,26,30,.9); --footer-bg:#151a1e;
  --focus-ring:color-mix(in oklab, var(--primary) 70%, transparent);
  --badge-danger-subtle:#3a2323; --badge-primary-subtle:#253042; --badge-success-subtle:#1d3428; --badge-warning-subtle:#3c3120; --badge-purple-subtle:#2e2840;
  --topbar-fg:#ffffff; --topbar-fg-muted:rgba(255,255,255,.75);
  --topbar-border:#2a3338;
  --topbar-bg:linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 18%, #1f2937) 0%,
    color-mix(in oklab, var(--brand-blue-gray) 26%, #111827) 100%);
  --nav-bg-solid:#151a1e; --nav-border-color:#2a3338; --nav-shadow-sm:0 2px 12px rgba(0,0,0,.25);
}
html.theme-light{
  --page-bg:var(--brand-cream); --card-bg:#fff; --card-elev:#fff; --text:var(--brand-ink);
  --muted:color-mix(in oklab, var(--brand-ink) 55%, white);
  --border:color-mix(in oklab, var(--ashraf-mist) 65%, white);
  --divider:color-mix(in oklab, var(--ashraf-porc) 65%, white);
  --link:var(--primary-800); --link-hover:var(--primary-900);
  --nav-bg:rgba(255,255,255,.9); --footer-bg:#fff;
  --badge-danger-subtle:#ffe5e5; --badge-primary-subtle:#e6eeff; --badge-success-subtle:#e5fff2; --badge-warning-subtle:#fff6e0; --badge-purple-subtle:#efe8ff;
  --topbar-fg:#fff; --topbar-fg-muted:rgba(255,255,255,.65);
  --topbar-border:color-mix(in oklab, #fff 10%, #000 10%);
  --topbar-bg:linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 25%, #2c3e50) 0%,
    color-mix(in oklab, var(--brand-blue-gray) 35%, #34495e) 100%);
  --nav-bg-solid:#fff; --nav-border-color:var(--border); --nav-shadow-sm:0 2px 10px rgba(0,0,0,.06);
}

/* =========================================================
   5) Fallbacks (no color-mix/oklab)
   ========================================================= */
@supports not (color: color-mix(in oklab, black 10%, white)){
  :root{
    --muted:#6b7280; --border:#d6dbe0; --divider:#e7ecef;
    --link:var(--primary-800); --link-hover:var(--primary-900);
    --focus-ring:rgba(123,169,186,.45);
    --topbar-bg:#2f3b49; --topbar-border:#d0d5da;

    --primary:#7BA9BA;
    --primary-tint-1:#8AB3C1; --primary-tint-2:#99BDC7; --primary-tint-3:#A9C7CE; --primary-tint-4:#B8D1D5; --primary-tint-5:#C7DBDC;
    --primary-shade-1:#6EA0B0; --primary-shade-2:#608E9C; --primary-shade-3:#527C88; --primary-shade-4:#446A73; --primary-shade-5:#36585F;
    --primary-50:var(--primary-tint-5); --primary-100:var(--primary-tint-4); --primary-200:var(--primary-tint-3);
    --primary-300:var(--primary-tint-2); --primary-400:var(--primary-tint-1); --primary-500:var(--primary);
    --primary-600:var(--primary-shade-1); --primary-700:var(--primary-shade-2); --primary-800:var(--primary-shade-3);
    --primary-900:var(--primary-shade-4); --primary-950:var(--primary-shade-5);

    --primary-analog-1:#7BBAAC; --primary-analog-2:#7B89BA; --primary-complement:#BA8C7B;
  }

  html.theme-dark{
    --page-bg:#0f1417; --card-bg:#151a1e; --card-elev:#1b2024;
    --text:#ffffff; --muted:rgba(255,255,255,.72);
    --border:#2a3338; --divider:#273036; --link:#a7d0db; --link-hover:#8dc0ce;
    --nav-bg:rgba(21,26,30,.9); --footer-bg:#151a1e;
    --topbar-bg:#1f2937; --topbar-border:#2a3338;
  }

  /* NEW: Light-mode explicit fallbacks when color-mix/oklab is unsupported */
  html.theme-light{
    --muted:#6b7280; --border:#d6dbe0; --divider:#e7ecef;
    --link:var(--primary-800); --link-hover:var(--primary-900);
    --nav-bg:rgba(255,255,255,.9); --footer-bg:#fff;
    --topbar-fg:#fff; --topbar-fg-muted:rgba(255,255,255,.65);
    --topbar-bg:#2f3b49; --topbar-border:#d0d5da;
    --nav-bg-solid:#fff;
  }

  /* Legacy section backgrounds */
  html.theme-light .section-soft{ background:#f6f8fa; }
  html.theme-light .section-accent{ background:#f6f0e6; }
  html.theme-dark  .section-soft{ background:#22282d; }
  html.theme-dark  .section-accent{ background:#1b2327; }

  @media (prefers-color-scheme: dark){
    html:not(.theme-light):not(.theme-dark) .section-soft{ background:#22282d; }
    html:not(.theme-light):not(.theme-dark) .section-accent{ background:#1b2327; }
  }
  @media (prefers-color-scheme: light){
    html:not(.theme-light):not(.theme-dark) .section-soft{ background:#f6f8fa; }
    html:not(.theme-light):not(.theme-dark) .section-accent{ background:#f6f0e6; }
  }

  /* Scoped helpers (آمنة) */
  .search-page .text-bg-secondary{ background-color:#e9eef2!important; color:var(--text)!important; }
  html.theme-light .navbar .nav-link:hover, html.theme-light .navbar .nav-link:focus{ background:#eff3f6; }
  html.theme-dark .navbar .nav-link:hover, html.theme-dark .navbar .nav-link:focus{ background:#1e252a; }
  html.theme-light .dropdown-item:hover, html.theme-light .dropdown-item:focus{ background:#eaf3f6; }
  html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus{ background:#1d2429; }
  html.theme-light .dropdown-item.active, html.theme-light .dropdown-item:active{ background:#e2edf1; }
  html.theme-dark .dropdown-item.active, html.theme-dark .dropdown-item:active{ background:#20272c; }
  html.theme-light .list-group-item-action:hover, html.theme-light .list-group-item-action:focus{ background:#f3f6f8; }
  html.theme-dark .list-group-item-action:hover, html.theme-dark .list-group-item-action:focus{ background:#1d2327; }

  /* Extra fallbacks for interactive components (to match color-mix behavior) */
  .search-page .result-item{
    background:#f7f9fb; /* light blend fallback */
    border-color:#d6dbe0;
  }
  @media (hover:hover){
    .search-page .result-item:hover{
      background:#ffffff;
      border-color:#c9d6df;
      box-shadow:0 .5rem 1rem rgba(0,0,0,.06);
    }
  }
  @media (hover:hover){
    .theme-icon-btn:hover, .theme-icon-btn:focus{
      background:#eff3f6; /* light */
      border-color:#cfd9df;
    }
    html.theme-dark .theme-icon-btn:hover, html.theme-dark .theme-icon-btn:focus{
      background:#1e252a; /* dark */
      border-color:#344149;
    }
  }

  /* Fallback: lang-switch hover/active without color-mix */
  @media (hover:hover){
    .lang-switch:hover, .lang-switch:focus{
      background:#eff3f6; /* light */
      border-color:#cfd9df;
      color:var(--link);
    }
    html.theme-dark .lang-switch:hover, html.theme-dark .lang-switch:focus{
      background:#1e252a; /* dark */
      border-color:#344149;
      color:var(--link);
    }
  }

  /* ::selection fallback (no color-mix/oklab) */
  ::selection{ background:#cfe5ec; color:var(--text); }

  /* Breadcrumb fallbacks (hover/active colors without color-mix) */
  .breadcrumb--blend .breadcrumb-item.active{ color:#e9edf3; }
  @media (hover:hover){
    .crumb-link:hover,.crumb-link:focus{
      color:#eef5ff;
      text-decoration:underline; text-underline-offset:.18em; outline:none; opacity:1;
    }
  }
}


/* =========================================================
   6) Accessibility Preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* High-contrast (Windows forced colors) */
@media (forced-colors: active){
  :root{
    --focus-ring: Highlight;
    --border: GrayText;
  }
  a{ text-decoration: underline; }
  .btn, .lang-switch, .footer-link{ border:1px solid ButtonText!important; }
  :focus-visible{ outline:2px solid Highlight!important; }
}

/* Higher contrast preference (optional enhancement) */
@media (prefers-contrast: more){
  :root{
    --border:#9aa6b2;
    --focus-ring:#2563eb;
  }
  .btn, .dropdown-item, .nav-link{ border-width:2px; }
}


/* =========================================================
   6.1) A11y Focus Fallback — browsers without :focus-visible
   ========================================================= */
@supports not selector(:focus-visible){
  a:focus, button:focus, .btn:focus, .nav-link:focus, .dropdown-item:focus,
  .theme-icon-btn:focus, .lang-switch:focus, .footer-link:focus, .social-icon:focus,
  input:focus, select:focus, textarea:focus{
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
  }
}

/* =========================================================
   7) Base / Typography (Body vs Headings)
   ========================================================= */
html,body{
  font-family:var(--font-body);
  color:var(--text); background:var(--page-bg); line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-kerning:normal; font-variant-ligatures:common-ligatures contextual;
  font-synthesis:none;
  font-synthesis-weight:none;
  font-synthesis-style:none;
  font-optical-sizing:auto;
}

/* اجعل عناصر داخلية تتبع لغة المحتوى لالتقاط الخط الصحيح */
:lang(en){ font-family:var(--font-en-body); letter-spacing:.005em; }
:lang(ar){ font-family:var(--font-ar-body); letter-spacing:0; }

/* الروابط تتبع خط الـ body (لا تُجبر على خط العناوين) */
a{ text-decoration:none; transition:color .2s ease, text-decoration .2s ease; color:var(--link); }

/* Containers & responsive width */
body{ overflow-x:hidden; }
.container,.container-xxl{ padding-inline:var(--page-x)!important; }
@media (min-width:1400px){ .container,.container-lg,.container-xl,.container-xxl{ max-width:1480px; } }
@media (min-width:1700px){ .container,.container-lg,.container-xl,.container-xxl{ max-width:1640px; } }
.row{ --bs-gutter-x:1.5rem; }
img{ max-inline-size:100%; block-size:auto; }

@media (hover:hover){ a:hover,a:focus{ text-decoration:none; color:var(--link-hover); } }
a:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* Placeholders */
input::placeholder,textarea::placeholder{ color:var(--muted); opacity:1; }
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ color:var(--muted); opacity:1; }
input:-ms-input-placeholder,textarea:-ms-input-placeholder{ color:var(--muted); }

/* Accent color for native controls */
input[type="checkbox"],input[type="radio"],input[type="range"]{ accent-color:var(--primary); }

/* =========================================================
   7.1) Typographic Scale — weights + responsive sizes
   ========================================================= */

/* 1) أوزان وسطور أساسية */
:root{
  --w-body: 400;
  --w-headings: 700;
  --w-headings-strong: 700;
  --track-h1: 0;
  --track-h2: 0;
  --track-h3: 0;
  --lh-body: 1.7;
  --lh-headings: 1.25;
}

/* EN: Inter يدعم 800 */
html[lang^="en"]{
  --w-body: 400;
  --w-headings: 700;
  --w-headings-strong: 800;
  --track-h1: -0.010em;
  --track-h2: -0.006em;
  --track-h3: -0.004em;
}

/* AR: Amiri/Noto Naskh غالبًا 400/700 فقط */
html[lang^="ar"]{
  --w-body: 400;
  --w-headings: 700;
  --w-headings-strong: 700;
  --track-h1: 0;
  --track-h2: 0;
  --track-h3: 0;
}

/* 2) تطبيق وزن النص على الجسم */
html, body{
  font-weight: var(--w-body);
  line-height: var(--lh-body);
}

/* 3) سلّم أحجام مرن بـ clamp() */
:root{
  --fs-h1: clamp(2rem, 1.1rem + 3vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1rem + 2.2vw, 2.5rem);
  --fs-h3: clamp(1.5rem, 0.95rem + 1.5vw, 2rem);
  --fs-h4: clamp(1.25rem, 0.85rem + 1vw, 1.625rem);
  --fs-h5: clamp(1.125rem, 0.8rem + 0.6vw, 1.375rem);
  --fs-h6: clamp(1rem, 0.75rem + 0.3vw, 1.125rem);
  --fs-body: clamp(1rem, 0.94rem + 0.25vw, 1.0625rem);
}

/* 4) العناوين: وزن/حجم/سطر/تتبّع + هوامش */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  font-family: var(--font-headings);
  line-height: var(--lh-headings);
  letter-spacing: 0;
  margin: 0 0 .5em;
}
h1,.h1,.display-1{ font-size:var(--fs-h1); font-weight:var(--w-headings-strong); letter-spacing:var(--track-h1); }
h2,.h2,.display-2{ font-size:var(--fs-h2); font-weight:var(--w-headings-strong); letter-spacing:var(--track-h2); }
h3,.h3,.display-3{ font-size:var(--fs-h3); font-weight:var(--w-headings); letter-spacing:var(--track-h3); }
h4,.h4,.display-4{ font-size:var(--fs-h4); font-weight:var(--w-headings); }
h5,.h5,.display-5{ font-size:var(--fs-h5); font-weight:var(--w-headings); }
h6,.h6,.display-6{ font-size:var(--fs-h6); font-weight:var(--w-headings); }

/* تخصيص العناوين حسب لغة النص */
:lang(en) h1,:lang(en) h2,:lang(en) h3,:lang(en) h4,:lang(en) h5,:lang(en) h6{ font-family:var(--font-en-headings); }
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4,:lang(ar) h5,:lang(ar) h6{ font-family:var(--font-ar-headings); }

/* نص أساسي قابل للتكيف */
body, p, li, input, textarea, select, button{ font-size:var(--fs-body); }

/* بطاقات وعناوين ثانوية */
.card-title{ font-family:var(--font-headings); font-weight:var(--w-headings); letter-spacing:0; }

/* Variants */
html.typescale-heavy{
  --fs-h1: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem);
  --fs-h2: clamp(1.9rem, 1.05rem + 2.6vw, 2.75rem);
  --fs-h3: clamp(1.6rem, 0.98rem + 1.8vw, 2.2rem);
}
html.typescale-light{
  --fs-h1: clamp(1.85rem, 0.95rem + 2.4vw, 3rem);
  --fs-h2: clamp(1.6rem, 0.9rem + 1.8vw, 2.2rem);
  --fs-h3: clamp(1.35rem, 0.85rem + 1.2vw, 1.8rem);
}

/* =========================================================
   8) Cards / Sections
   ========================================================= */
.shadow-sm-cream{ box-shadow:var(--shadow-sm); }
.card{ border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--card-bg); }
.card .card-header{ border-bottom:0; font-weight:600; background:var(--card-elev); color:var(--text); }

.section-soft{ background:color-mix(in oklab, var(--card-bg) 80%, var(--divider)); }
.section-accent{
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 10%, var(--card-bg)),
    color-mix(in oklab, var(--brand-gold) 10%, var(--card-bg)));
  border:1px solid var(--border);
}

/* =========================================================
   9) Namespaced Color Helpers (prefix: ash-)
   ========================================================= */
.ash-text-primary-50{color:var(--primary-50)!important;}
.ash-text-primary-100{color:var(--primary-100)!important;}
.ash-text-primary-200{color:var(--primary-200)!important;}
.ash-text-primary-300{color:var(--primary-300)!important;}
.ash-text-primary-400{color:var(--primary-400)!important;}
.ash-text-primary{color:var(--primary-500)!important;}
.ash-text-primary-600{color:var(--primary-600)!important;}
.ash-text-primary-700{color:var(--primary-700)!important;}
.ash-text-primary-800{color:var(--primary-800)!important;}
.ash-text-primary-900{color:var(--primary-900)!important;}

.ash-bg-primary-50{background:var(--primary-50)!important;}
.ash-bg-primary-100{background:var(--primary-100)!important;}
.ash-bg-primary-200{background:var(--primary-200)!important;}
.ash-bg-primary-300{background:var(--primary-300)!important;}
.ash-bg-primary-400{background:var(--primary-400)!important;}
.ash-bg-primary{background:var(--primary-500)!important; color:#0b1419;}
.ash-bg-primary-600{background:var(--primary-600)!important; color:#fff;}
.ash-bg-primary-700{background:var(--primary-700)!important; color:#fff;}
.ash-bg-primary-800{background:var(--primary-800)!important; color:#fff;}
.ash-bg-primary-900{background:var(--primary-900)!important; color:#fff;}

.ash-bg-analog-1{ background:var(--primary-analog-1)!important; color:#0b1419; }
.ash-bg-analog-2{ background:var(--primary-analog-2)!important; color:#0b1419; }
.ash-bg-complement{ background:var(--primary-complement)!important; color:#1a2024; }

.ash-brand-bg{ background:var(--primary)!important; color:#0b1419; }
.ash-brand-ink{ color:var(--text)!important; }
.ash-brand-gold{ color:var(--brand-gold)!important; }
.ash-text-slate{ color:var(--muted)!important; }
.ash-text-secondary{ color:var(--muted)!important; }
.ash-text-muted{ color:var(--muted)!important; }

/* =========================================================
   10) Forms
   ========================================================= */
.form-label{ color:var(--text)!important; font-weight:600; }
.form-control,.form-select{ background:var(--card-bg); color:var(--text); border-color:var(--border); }
.form-control:focus,.form-select:focus{
  border-color:color-mix(in oklab, var(--primary) 45%, var(--border));
  box-shadow:0 0 0 .2rem color-mix(in oklab, var(--primary) 25%, transparent);
}
.input-group-text{ background:color-mix(in oklab, var(--card-bg) 92%, var(--divider)); color:var(--text); border-color:var(--border); }
.form-text{ color:var(--muted)!important; }
.form-check-label{ color:var(--text); }
.form-check-input{ background-color:var(--card-bg); border-color:var(--border); }
.form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); }
html.theme-dark .form-control:disabled,
html.theme-dark .form-control[readonly],
html.theme-dark .form-select:disabled{ color:rgba(255,255,255,.65); background:#1a1f23; border-color:#2a3338; }

/* =========================================================
   11) Icons — baseline-safe & perfectly centered inline
   ========================================================= */
.bi, i.bi, .icon{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:var(--icon-size); block-size:var(--icon-size);
  line-height:1; vertical-align:middle; font-style:normal; color:currentColor;
}
a .bi, button .bi, .btn .bi, .nav-link .bi, .dropdown-item .bi{ display:inline-flex; align-items:center; justify-content:center; }
.icon-inline, .icon-inline .bi, .icon-inline i.bi, i.bi.icon-inline{ display:inline-flex; align-items:center; justify-content:center; line-height:1; vertical-align:middle; }
.btn .bi + span, .btn i + span, .nav-link .bi + span, .dropdown-item .bi + span, .icon-inline + span, span + .icon-inline{ margin-inline-start:.4rem; }
.icon-xxs{ --icon-size:.75em; } .icon-xs{ --icon-size:.875em; } .icon-sm{ --icon-size:1em; } .icon-md{ --icon-size:1.125em; } .icon-lg{ --icon-size:1.25em; } .icon-xl{ --icon-size:1.5em; }

/* =========================================================
   12) Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; border-radius:var(--radius-sm);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  border:1px solid transparent; color:var(--text);
}
@media (hover:hover){ .btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); } }
.btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
html.theme-dark .btn{ color:#ffffff; }
html.theme-dark .btn-outline-primary{ color:color-mix(in oklab, var(--primary) 90%, white); border-color:color-mix(in oklab, var(--primary) 70%, white); }
html.theme-dark .btn-outline-primary:hover{ background:var(--primary); color:#0b1419; border-color:var(--primary); }
.btn-primary{ background:var(--primary); border-color:var(--primary); color:#0b1419; }
@media (hover:hover){ .btn-primary:hover{ filter:brightness(.95); } }
.btn-outline-primary{ color:var(--primary); border-color:var(--primary); background:transparent; }
@media (hover:hover){ .btn-outline-primary:hover{ background:var(--primary); color:#0b1419; } }
.btn-slate{ color:#fff; background:var(--brand-blue-gray); border-color:var(--brand-blue-gray); }
@media (hover:hover){ .btn-slate:hover{ filter:brightness(.95); } }
.btn-taupe{ color:#fff; background:var(--ashraf-taupe); border-color:var(--ashraf-taupe); }
@media (hover:hover){ .btn-taupe:hover{ filter:brightness(.96); } }
html.theme-dark .btn:disabled, html.theme-dark .btn.disabled{ color:rgba(255,255,255,.55)!important; background:#20262a!important; border-color:#2a3338!important; opacity:1; }
.cta-row{ display:flex; justify-content:center; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* =========================================================
   13) Navbar — Sticky, Solid, Dropdown (mobile-safe)
   (مُحدّث) Overlay موبايل كامل الشاشة بلا قص، مع كثافة تكيّفية
   ========================================================= */
header.sticky-top .navbar{ position:static; }

/* اجعل الهيدر نفسه فوق أي Overlay */
.navbar{
  position:relative;
  z-index: var(--nav-z, 1100);
  top:0;
  background:var(--nav-bg-solid);
  border-bottom:1px solid var(--nav-border-color);
  box-shadow:var(--nav-shadow-sm);
  color:var(--text);
  backdrop-filter:none;

  /* توحيد ألوان Bootstrap ضمن الـNavbar (خاصة في Dark) */
  --bs-navbar-color: var(--text);
  --bs-navbar-hover-color: var(--link);
  --bs-navbar-active-color: var(--link);
  --bs-navbar-brand-color: var(--text);
  --bs-navbar-brand-hover-color: var(--link);
}
.navbar .navbar-brand,
.navbar .nav-link{ color:var(--text); }

/* Links */
.navbar .nav-link{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  font-weight:600; border-radius:.5rem; color:var(--text);
  line-height:1; transition:color .2s ease, background-color .2s ease;
}
.navbar .nav-link .bi{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; vertical-align:middle; font-size:1em;
}
/* امنع مضاعفة المسافة (gap + margin) */
.navbar .icon-inline + span,
.navbar .bi + span,
.navbar span + .icon-inline{ margin-inline-start:0!important; }

/* Hover للأجهزة الداعمة */
@media (hover:hover){
  .navbar .nav-link:hover{
    color:var(--link);
    background:color-mix(in oklab, var(--card-bg) 85%, var(--divider));
  }
}
/* Focus */
.navbar .nav-link:focus-visible{
  color:var(--link);
  background:color-mix(in oklab, var(--card-bg) 85%, var(--divider));
}
/* Active/Show (يوحّد سلوك Dropdown toggle) */
.navbar .nav-link.active,
.navbar .nav-link.show{
  color:var(--link);
  background:color-mix(in oklab, var(--card-bg) 85%, var(--divider));
}
@media (prefers-reduced-motion:reduce){ .navbar .nav-link{ transition:none; } }
@media (hover:none) and (pointer:coarse){
  .navbar .nav-link:active,
  .navbar .nav-link.show{
    background:color-mix(in oklab, var(--primary) 12%, var(--card-bg));
    color:var(--link);
  }
}

/* تعطيل nudge الخاص بالـcapsize */
@supports (height:1cap){
  .navbar .nav-link{ padding-block:0; }
}
@supports not (height:1cap){
  .navbar .nav-link>.label{ transform:none!important; }
}

/* Toggler */
.navbar .navbar-toggler{
  border:0; background:transparent; box-shadow:none; padding:0;
  inline-size:44px; block-size:44px; display:grid; place-items:center;
  border-radius:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  position:relative;
}
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active{ outline:none; box-shadow:none; background:transparent; }
.navbar .navbar-toggler:focus-visible .navbar-toggler-icon{
  outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:4px;
}
.navbar .navbar-toggler-icon{
  inline-size:24px; block-size:16px; background:none!important; position:relative; display:inline-block;
}
.navbar .navbar-toggler-icon::before{
  content:""; position:absolute; inset-inline:0; inset-block-start:50%;
  block-size:2px; background:var(--text); border-radius:1px;
  transform:translateY(-1px); box-shadow:0 -6px 0 var(--text), 0 6px 0 var(--text);
}

/* Dropdown (global) */
.dropdown-menu{
  background:var(--card-bg); color:var(--text);
  border:1px solid var(--border); box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
}
.dropdown-divider{ border-top:1px solid var(--border); }
.dropdown-header,.dropdown-item-text{ color:var(--muted); }
.dropdown-item{
  display:flex; align-items:center; gap:.45rem;
  color:var(--text); line-height:1.2;
  transition:background-color .15s ease, color .15s ease;
}
.dropdown-item .bi{ display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.navbar .dropdown-menu .dropdown-item .icon-inline + span,
.navbar .dropdown-menu .dropdown-item .bi + span{ margin-inline-start:0!important; }

@media (hover:hover){
  .dropdown-item:hover{ background:color-mix(in oklab, var(--primary) 10%, var(--card-bg)); color:var(--text); }
}
.dropdown-item:focus-visible{
  background:color-mix(in oklab, var(--primary) 10%, var(--card-bg)); color:var(--text);
}
.dropdown-item.active,.dropdown-item:active{
  background:color-mix(in oklab, var(--primary) 14%, var(--card-bg)); color:var(--text);
}

/* Dropdown inside collapsed navbar (mobile) */
@media (max-width:991.98px){
  .navbar .nav-item{ display:flex; flex-direction:column; align-items:flex-start; }
  .navbar .dropdown-toggle{ display:inline-flex; width:auto; justify-content:center; align-items:center; }
  .navbar .dropdown-menu{
    position:static; float:none; inset:auto!important; transform:none!important;
    box-shadow:none; width:auto; min-inline-size:10rem; margin:.15rem 0 0; padding:.3rem; border-radius:.5rem;
  }
  .navbar .dropdown-menu[data-bs-popper]{ inset:auto; margin:.15rem 0 0; }
  .navbar .dropdown-item{ padding:.4rem .65rem; }
}

/* Spacing (desktop) */
.navbar .navbar-nav{ gap:var(--nav-gap); }
@media (min-width:992px){ .navbar .navbar-nav{ gap:.5rem; } }

/* Desktop brand gap */
@media (min-width:992px){
  .navbar .container, .navbar .container-fluid{ gap:var(--brand-gap); }
}

/* Theme toggle */
.theme-icon-btn{
  inline-size:var(--nav-item-h); block-size:var(--nav-item-h);
  display:inline-grid; place-items:center; padding:0; border:1px solid var(--border);
  background:color-mix(in oklab, var(--card-bg) 85%, var(--divider));
  box-shadow:none; border-radius:.5rem; color:var(--text);
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.theme-icon-btn .bi{ font-size:1.05rem; line-height:1; }
@media (hover:hover){
  .theme-icon-btn:hover,.theme-icon-btn:focus{
    background:color-mix(in oklab, var(--card-bg) 70%, var(--divider));
    border-color:color-mix(in oklab, var(--border) 70%, var(--primary) 30%); transform:translateY(-1px);
  }
}
.theme-icon-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.theme-icon-btn:active{ transform:translateY(0) scale(.98); }
html.theme-dark .theme-icon-btn{ color:#fff; background:color-mix(in oklab, var(--card-bg) 78%, var(--divider)); border-color:var(--border); }

/* Alignment hardening (desktop) */
@media (min-width:992px){
  .navbar, .navbar .container, .navbar .container-fluid, .navbar .navbar-collapse{ display:flex; align-items:center; }
}

/* العناصر الأساسية: توحيد spacing بدون كنس Utilities */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .btn,
.navbar .dropdown-toggle,
.navbar .lang-switch,
.navbar .theme-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:var(--nav-item-h);
  padding-block:0 !important;
  padding-inline:var(--nav-item-px) !important;
  line-height:1; border-radius:.5rem;
}
.navbar .dropdown-toggle::after{ vertical-align:middle; transform:none; margin-inline-start:.35rem; }

/* =========================
   Mobile: FULL overlay menu
   ========================= */
@media (max-width: 991.98px){
  /* لمس مريح + فجوات تكيّفية */
  .navbar{
    --nav-item-h:44px;                  /* لا تمس حد اللمس */
    --nav-item-px:14px;
    --nav-gap: clamp(.28rem, 0.9vh, .6rem);
  }

  /* نحول الـcollapse إلى Overlay ثابت يبدأ أسفل الهيدر الحقيقي
     (تُمرَّر القيمة الدقيقة عبر JS في --nav-overlay-top) */
  .navbar .navbar-collapse{
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--nav-overlay-top, 56px);
    z-index: calc(var(--nav-z, 1100) - 1); /* أقل من الهيدر */
    background: var(--nav-bg-solid);
    border-top: 1px solid var(--nav-border-color);

    /* الأساس: 100vh كـ fallback قديم */
    min-block-size: calc(100vh - var(--nav-overlay-top, 56px) - env(safe-area-inset-bottom, 0px));
    max-block-size: calc(100vh - var(--nav-overlay-top, 56px) - env(safe-area-inset-bottom, 0px));

    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-block: .6rem max(.75rem, env(safe-area-inset-bottom, 0px));

    /* بدّل من إظهار/إخفاء بدل ترانزيشن ارتفاع Bootstrap */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease;
  }
  /* الأفضلية للأحدث: dvh يمنع أي فراغ سفلي */
  @supports (height: 1dvh){
    .navbar .navbar-collapse{
      min-block-size: calc(100dvh - var(--nav-overlay-top, 56px) - env(safe-area-inset-bottom, 0px));
      max-block-size: calc(100dvh - var(--nav-overlay-top, 56px) - env(safe-area-inset-bottom, 0px));
    }
  }
  /* لا نستخدم svh حتى لا نقصر الارتفاع عند اختفاء أشرطة المتصفح */

  /* حالة الفتح */
  .navbar .navbar-collapse.show{
    opacity: 1; visibility: visible; pointer-events: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--nav-gap);
  }
  .navbar .navbar-collapse.show .navbar-nav,
  .navbar .navbar-collapse.show > .d-flex,
  .navbar .navbar-collapse.show > .d-flex > .navbar-nav{
    flex-direction: column; align-items: stretch; inline-size: 100%; gap: var(--nav-gap);
  }

  /* إلغاء انتقال ارتفاع Bootstrap أثناء overlay */
  .navbar .navbar-collapse.collapsing{
    height: auto !important;
    transition: none !important;
  }

  /* الروابط والأزرار بعرض كامل */
  .navbar .nav-link, .navbar .btn{ justify-content:flex-start; inline-size:100%; }

  /* ضبط النص/الأيقونة قليلاً على الشاشات القصيرة */
  .navbar .nav-link .label{ font-size: clamp(.96rem, 2.8vw, 1.0625rem); }
  @media (max-height: 700px){ .navbar{ --nav-gap:.40rem; } }
  @media (max-height: 600px){
    .navbar{ --nav-gap:.32rem; }
    .navbar .nav-link .label{ font-size:.96rem; }
    .navbar .nav-link .bi{ font-size:.95em; }
  }
  @media (max-height: 520px){ .navbar{ --nav-gap:.26rem; } }

  /* عناصر التحكم */
  .navbar .nav-control{
    display:flex; align-items:center; inline-size:100%;
    padding-inline:var(--nav-item-px); min-block-size:var(--nav-item-h);
  }
  .navbar .nav-control>*{ margin:0; }
  .navbar .lang-switch, .navbar .theme-icon-btn{ align-self:auto; margin:0!important; }
}

/* قفل تمرير الصفحة + إخفاء عناصر عائمة أثناء الفتح */
@supports selector(body:has(.navbar .navbar-collapse.show)){
  body:has(.navbar .navbar-collapse.show){ overflow:hidden; }
  body:has(.navbar .navbar-collapse.show) .cb-root,
  body:has(.navbar .navbar-collapse.show) .back-to-top-fab{ display:none !important; }
}
/* Fallback بدون :has() */
body.nav-open{ overflow:hidden; }
body.nav-open .cb-root,
body.nav-open .back-to-top-fab{ display:none !important; }

/* Spacing helpers (آمنة) */
.navbar .navbar-collapse > .navbar-nav:first-child{ margin-inline-end:auto; }
/* لا يوجد كنس عام لUtilities داخل .navbar */

/* =========================================================
   14) Logo
   ========================================================= */
.brand-logo{
  inline-size:calc(var(--logo-size) + var(--logo-bump)); block-size:calc(var(--logo-size) + var(--logo-bump));
  aspect-ratio:1/1; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--logo-radius); background:transparent; border:0; box-shadow:none; overflow:hidden;
}
.brand-logo-img{ inline-size:100%; block-size:100%; object-fit:contain; object-position:center; display:block; border-radius:inherit; }
.brand-logo-fallback{
  inline-size:100%; block-size:100%; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text); font-weight:800; font-size:calc((var(--logo-size) + var(--logo-bump)) * .46);
  border-radius:inherit; user-select:none;
}
.brand-logo--sm{ --logo-min:38px; --logo-max:52px; }
.brand-logo--md{ --logo-min:42px; --logo-max:64px; }
.brand-logo--lg{ --logo-min:48px; --logo-max:76px; }
.brand-logo--responsive-bump{ --logo-bump:20px; }
@media (max-width:575.98px){ .brand-logo--responsive-bump{ --logo-bump:18px; } }
@media (min-width:576px) and (max-width:991.98px){ .brand-logo--responsive-bump{ --logo-bump:20px; } }
@media (min-width:992px) and (max-width:1199.98px){ .brand-logo--responsive-bump{ --logo-bump:24px; } }
@media (min-width:1200px){ .brand-logo--responsive-bump{ --logo-bump:28px; } }

/* Theme-specific logo images */
.brand-logo-img--dark{ display:none; } .brand-logo-img--light{ display:block; }
html.theme-dark .brand-logo-img--light{ display:none; } html.theme-dark .brand-logo-img--dark{ display:block; }
html.theme-light .brand-logo-img--light{ display:block; } html.theme-light .brand-logo-img--dark{ display:none; }
@media (prefers-color-scheme: dark){
  html:not(.theme-light):not(.theme-dark) .brand-logo-img--light{ display:none; }
  html:not(.theme-light):not(.theme-dark) .brand-logo-img--dark{ display:block; }
}
@media (prefers-color-scheme: light){
  html:not(.theme-light):not(.theme-dark) .brand-logo-img--light{ display:block; }
  html:not(.theme-light):not(.theme-dark) .brand-logo-img--dark{ display:none; }
}

/* =========================================================
   15) Footer
   ========================================================= */
footer{
  border-block-start:1px solid var(--border);
  background:var(--footer-bg);
  font-size:.9rem;
  color:var(--text);
}
footer a{ color:var(--brand-blue-gray); }

/* Hover فقط على الأجهزة التي تدعم hover */
@media (hover:hover){
  footer a:hover{ color:var(--link); }
}
/* تحسين وصول: لون الروابط عند التركيز عبر لوحة المفاتيح */
footer a:focus-visible{ color:var(--link); }

.footer-global{
  background:var(--footer-bg);
  border-block-start:1px solid var(--border);
  font-size:.98rem;
  box-shadow:0 -2px 16px rgba(0,0,0,.04);
  color:var(--text);
}

.footer-divider{
  border:none;
  block-size:1px;
  background:var(--divider);
  opacity:.9;
  margin:0 0 1.25rem 0;
}

.footer-nav .nav{ gap:.7rem; }

/* Footer links — match navbar hover behavior (all themes) */
.footer-link{
  color:var(--brand-blue-gray,#6A8BA0);
  background:color-mix(in oklab, var(--card-bg) 85%, var(--divider));
  padding:.4rem .85rem;
  border-radius:6px;
  border:1px solid var(--border);
  font-weight:500; font-size:.95em;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.45rem;
  transition:background .22s cubic-bezier(.68,-0.55,.27,1.55), color .22s, border-color .22s, transform .22s;
}
@media (hover:hover){
  .footer-link:hover,
  .footer-link:focus{
    background:color-mix(in oklab, var(--card-bg) 85%, var(--divider));
    border-color:color-mix(in oklab, var(--border) 70%, var(--primary) 30%);
    color:var(--link);
    text-decoration:none;
    transform:translateY(-1px);
  }
}
/* تحسين وصول: تغيير اللون عند focus-visible حتى على الأجهزة بدون hover */
.footer-link:focus-visible{
  color:var(--link);
}

/* Touch feedback */
@media (hover:none) and (pointer:coarse){
  .footer-link:active{
    transform:translateY(0);
    background:color-mix(in oklab, var(--primary) 12%, var(--card-bg));
  }
}
.footer-link i{
  font-size:.92em; opacity:.9; vertical-align:middle;
  transition:opacity .2s;
}

/* Dark theme base */
html.theme-dark .footer-link{
  color:rgba(255,255,255,.92);
  background:color-mix(in oklab, var(--card-bg) 76%, var(--divider));
  border-color:var(--border);
}
html.theme-dark footer a{ color:rgba(255,255,255,.85); }

@media (hover:hover){
  html.theme-dark .footer-link:hover,
  html.theme-dark .footer-link:focus{
    color:var(--link);
    background:color-mix(in oklab, var(--card-bg) 85%, var(--divider));
    border-color:color-mix(in oklab, var(--border) 70%, var(--primary) 30%);
  }
}
/* تحسين وصول: نفس الأثر عند focus-visible في الثيم الداكن */
html.theme-dark .footer-link:focus-visible{
  color:var(--link);
}

/* Fallback لما color-mix مش مدعوم — زي navbar */
@supports not (color: color-mix(in oklab, black 10%, white)){
  html.theme-dark .footer-link:hover,
  html.theme-dark .footer-link:focus{
    background:#1e252a;
    color:var(--link);
  }
  html.theme-light .footer-link:hover,
  html.theme-light .footer-link:focus{
    background:#eff3f6;
    color:var(--link);
  }
}

/* Social icons */
.footer-social-icons{ gap:.4rem; }
.footer-social{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:32px; block-size:32px; border-radius:8px;
  background:color-mix(in oklab, var(--card-bg) 80%, var(--divider));
  color:var(--brand-blue-gray,#6A8BA0);
  border:1px solid var(--border);
  font-size:1.14em;
  transition:all .3s cubic-bezier(.68,-0.55,.27,1.55);
  position:relative; overflow:hidden; text-decoration:none;
}
@media (hover:hover){
  .footer-social:hover{
    color:#fff!important;
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 6px 16px rgba(0,0,0,.10);
    text-decoration:none;
  }
}
.footer-social.facebook:hover{ background:#1877f2; }
.footer-social.instagram:hover{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.footer-social.twitter:hover{ background:#1DA1F2; }
.footer-social.youtube:hover{ background:#FF0000; }
.footer-social.telegram:hover{ background:#0088CC; }
.footer-social:active{ transform:scale(.96); }
.footer-social i{ font-size:1em; z-index:2; position:relative; }
.footer-social:focus{ outline:2px solid var(--primary); outline-offset:2px; }
html.theme-dark .footer-social{
  color:rgba(255,255,255,.9);
  background:color-mix(in oklab, var(--card-bg) 70%, var(--divider));
  border-color:var(--border);
}

/* Bottom strip */
.footer-bottom{
  gap:.75rem; padding-block-start:1rem;
  border-block-start:1px solid var(--border);
  min-block-size:56px; position:relative;
}
.footer-actions{ inline-size:auto; }
.footer-tail{ inline-size:44px; block-size:1px; opacity:0; }
.footer-center{
  margin-inline:auto; font-weight:600; color:var(--muted);
  letter-spacing:.01em; text-align:center; white-space:nowrap;
}
@media (max-width:420px){
  .footer-center{ white-space:normal; line-height:1.5; }
}

/* Responsive tweaks */
@media (max-width:576px){
  .footer-global{ font-size:.91rem; }
  .footer-link{ font-size:.89em; padding:.33rem .6rem; }
  .footer-social-icons{ gap:.3rem; }
  .footer-social{ inline-size:28px; block-size:28px; font-size:1em; border-radius:6px; }
  .footer-bottom{ gap:.65rem; min-block-size:60px; }
}
@media (max-width:400px){
  .footer-link span{ display:none; }
  .footer-link i{ font-size:1.2em; }
  .footer-social{ inline-size:24px; block-size:24px; font-size:.86em; }
}
@media (prefers-reduced-motion: reduce){
  .footer-social, .footer-link{ transition:none; }
}


/* =========================================================
   16) Topbar (Rewritten, standards-based)
   ========================================================= */
.topbar{
  background:var(--topbar-bg);
  min-block-size:40px;
  font-size:.875rem;
  color:var(--topbar-fg);
  border-block-end:1px solid var(--topbar-border);
}

/* كتلة التاريخ (سطر واحد، مسافات محسوبة عبر gap فقط) */
.date-info{
  display:inline-flex;
  align-items:baseline;
  gap:clamp(.25rem,.8vw,.45rem); /* المسافة بين العناصر بما فيها الفاصل */
  white-space:nowrap;
  color:var(--topbar-fg);
}

/* عناصر التاريخ */
.greg-date,
.hijri-date{
  display:inline-flex;
  align-items:baseline;
  line-height:1;
  color:var(--topbar-fg);
  white-space:nowrap;
  unicode-bidi:isolate;     /* يحافظ على ترتيب النص/الأرقام AR/EN */
  font-size:.875rem;
}

/* النص داخل التاريخ كسلسلة واحدة */
.date-bdi{
  unicode-bidi:isolate;
  white-space:nowrap;
}

/* فاصل بصري ثابت | (بدون margin — المسافة من gap فقط) */
.date-separator{
  display:inline-block;
  inline-size:1px;
  block-size:1em;           /* مطابق لارتفاع النص */
  background:currentColor;
  opacity:.5;
  margin-inline:0;          /* مهم: إلغاء المارجن لمنع مضاعفة المسافات */
  align-self:center;
}

/* أيقونات السوشيال في التوب بار */
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  inline-size:32px;
  block-size:32px;
  color:var(--topbar-fg);
  text-decoration:none!important;
  border-radius:8px;
  position:relative;
  transition:all .3s ease;
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.social-icon i{ font-size:1rem; font-weight:500; line-height:1; }

@media (hover:hover){
  .social-icon:hover{
    transform:translateY(-3px);
    color:#fff!important;
    border-color:currentColor;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
  }
}
.social-icon.facebook:hover{ color:#1877f2!important; background:rgba(24,119,242,.1); box-shadow:0 6px 20px rgba(24,119,242,.3); }
.social-icon.instagram:hover{ color:#E4405F!important; background:rgba(228,64,95,.1); box-shadow:0 6px 20px rgba(228,64,95,.3); }
.social-icon.twitter:hover{ color:#1DA1F2!important; background:rgba(29,161,242,.1); box-shadow:0 6px 20px rgba(29,161,242,.3); }
.social-icon.youtube:hover{ color:#FF0000!important; background:rgba(255,0,0,.1); box-shadow:0 6px 20px rgba(255,0,0,.3); }
.social-icon.telegram:hover{ color:#0088CC!important; background:rgba(0,136,204,.1); box-shadow:0 6px 20px rgba(0,136,204,.3); }
.social-icon:active{ transform:translateY(-1px) scale(.95); }
.social-icon:focus{ outline:2px solid rgba(255,255,255,.4); outline-offset:2px; }

/* Mobile: تصغير الحجم وتمركز التاريخ وتقليل المسافة */
@media (max-width:767.98px){
  .topbar{ padding:.5rem 0!important; font-size:.75rem; }
  .date-info{ justify-content:center; gap:.3rem; }
  .greg-date,.hijri-date{ font-size:.8rem; }
}

/* شاشات ضيقة جدًا */
@media (max-width:350px){
  .greg-date,.hijri-date{ font-size:.74rem; }
}


/* =========================================================
   17) Search Page (scoped helpers)
   ========================================================= */
.search-page .hero-title-text{
  background:linear-gradient(135deg,#1e293b,#475569);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.search-page .hero-subtitle-text{ color:#64748b; }
.search-page .hero-search-form .search-form-main{ gap:.5rem; flex-wrap:nowrap; }
.search-page .hero-search-form .search-form-wrap{ gap:.5rem; }
@media (max-width:576px){ .search-page .hero-search-form select.form-select{ inline-size:auto; align-self:center; } }
.search-page .result-item{
  position:relative; display:flex; gap:.9rem; align-items:flex-start;
  background:color-mix(in oklab, var(--card-bg) 90%, var(--divider));
  border:1px solid var(--border); border-radius:1rem; padding:1rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; color:var(--text);
}
.search-page .result-item .stretched-link{ z-index:1; }
.search-page .result-item .result-leading-icon{ font-size:1.1rem; line-height:1; color:var(--muted); display:flex; align-items:center; justify-content:center; }
.search-page .result-item .result-title{ line-height:1.35; }
.search-page .result-item .result-excerpt{ margin-block-start:.15rem; color:var(--muted); }
.search-page .result-item .result-chevron{ align-self:center; font-size:1.25rem; opacity:.65; transition:transform .15s ease, opacity .15s ease; color:var(--muted); }
@media (hover:hover){
  .search-page .result-item:hover{
    background:var(--card-bg);
    border-color:color-mix(in oklab, var(--border) 70%, var(--primary) 30%);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.06);
  }
}
.search-page .result-item:focus-within{
  outline:2px solid color-mix(in oklab, var(--primary) 20%, transparent);
  outline-offset:2px; box-shadow:0 .5rem 1rem rgba(13,110,253,.08); background:var(--card-bg);
}
[dir="ltr"] .search-page .result-item:hover .result-chevron{ transform:translateX(2px); opacity:.9; }
[dir="rtl"] .search-page .result-item:hover .result-chevron{ transform:translateX(-2px); opacity:.9; }
.search-page .text-truncate-2{
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Helpers مخصّصة للمشهد (Namespaced) */
.search-page .u-text-bg-success{ background-color:var(--badge-success-subtle)!important; }
.search-page .u-text-bg-secondary{ background-color:color-mix(in oklab, var(--muted) 35%, var(--card-bg))!important; color:var(--text)!important; }
.search-page .ash-bg-danger-subtle{ background-color:var(--badge-danger-subtle)!important; }
.search-page .ash-bg-primary-subtle{ background-color:var(--badge-primary-subtle)!important; }
.search-page .ash-bg-success-subtle{ background-color:var(--badge-success-subtle)!important; }
.search-page .ash-bg-warning-subtle{ background-color:var(--badge-warning-subtle)!important; }
.search-page .ash-bg-purple-subtle{ background-color:var(--badge-purple-subtle)!important; }
.search-page .ash-text-purple{ color:var(--purple)!important; }

.search-page .search-results-section .card-header{ border-block-end:1px solid var(--border); }
.search-page .total-results{ font-weight:600; }
[dir="rtl"] .search-page .result-item:hover{ transform:translateX(-1px); }
[dir="ltr"] .search-page .result-item:hover{ transform:translateX(1px); }
@media (max-width:576px){ .search-page .result-item{ padding:.9rem; } }

/* =========================================================
   18) Language Switcher — perfectly centered icon + label
   (Fixed spacing/height: uses gap only, no hover translate, no OC nudges)
   ========================================================= */
.lang-switch{
  background:color-mix(in oklab, var(--card-bg) 85%, var(--divider));
  color:var(--text);
  border:1px solid var(--border);
  border-radius:2rem;
  padding:.35rem .75rem;

  display:inline-flex; align-items:center; justify-content:center;
  gap:.35rem;                    /* ← مصدر المسافة الوحيد */
  font-weight:600;
  line-height:1;
  --icon-size:1em;
}

/* عناصر النص/الأيقونة داخليًا */
.lang-switch > span{ display:inline-flex; align-items:center; line-height:1; }
.lang-switch .bi, .lang-switch i, .lang-switch svg{
  display:inline-flex!important; align-items:center; justify-content:center;
  inline-size:var(--icon-size); block-size:var(--icon-size);
  font-size:1em; line-height:1; vertical-align:middle;
}
.lang-switch i{ opacity:.9; }

/* امنع أي margin إضافي بعد الأيقونة (لو فيه قواعد عامة بتحطها) */
.lang-switch i + .label,
.lang-switch .bi + .label,
.lang-switch svg + .label{ margin-inline-start:0 !important; }

/* عطّل padding-block الذكي بتاع OC + أي "nudge" على .label */
@supports (height: 1cap){
  .lang-switch{ padding-block:0; }
}
@supports not (height: 1cap){
  .lang-switch > .label{ transform:none !important; }
}

/* Hover فقط على الأجهزة الداعمة — بدون translateY */
@media (hover:hover){
  .lang-switch:hover, .lang-switch:focus{
    color:var(--link);
    background:color-mix(in oklab, var(--card-bg) 70%, var(--divider));
    border-color:color-mix(in oklab, var(--border) 70%, var(--primary) 30%);
    box-shadow:var(--shadow-md);
    transform:none; /* ← منع “النطّة” */
  }
}

.lang-switch:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

[dir="rtl"] .lang-switch{ flex-direction:row-reverse; }

html.theme-dark .lang-switch{
  background:color-mix(in oklab, var(--card-bg) 78%, var(--divider));
  border-color:var(--border);
}
@media (hover:hover){
  html.theme-dark .lang-switch:hover, html.theme-dark .lang-switch:focus{
    color:var(--link);
    background:color-mix(in oklab, var(--card-bg) 66%, var(--divider));
    border-color:color-mix(in oklab, var(--border) 60%, var(--primary) 40%);
    transform:none; /* ← برضه بدون حركة */
  }
}

/* =========================================================
   19) Breadcrumb
   ========================================================= */
.breadcrumb-bar{
  background:var(--breadcrumb-bg); color:var(--breadcrumb-fg);
  padding:.6rem .9rem; border-radius:0; border:1px solid var(--breadcrumb-border);
  box-shadow:0 .45rem 1.25rem rgba(0,0,0,.08), inset 0 .25rem .75rem rgba(255,255,255,.06);
}
.breadcrumb--blend{ --bs-breadcrumb-divider:"›"; background:transparent; margin:0; }
.breadcrumb--blend .breadcrumb-item + .breadcrumb-item::before{ content:var(--bs-breadcrumb-divider); color:var(--breadcrumb-fg-muted); opacity:.9; padding-inline:.5rem; }
.crumb-link{ color:var(--breadcrumb-fg); text-decoration:none; transition:color .18s ease, text-underline-offset .18s ease, opacity .18s ease; opacity:.95; display:inline-flex; align-items:center; gap:.35rem; }
@media (hover:hover){
  .crumb-link:hover,.crumb-link:focus{
    color:color-mix(in oklab, var(--breadcrumb-fg) 92%, #e6f0ff);
    text-decoration:underline; text-underline-offset:.18em; outline:none; opacity:1;
  }
}
.breadcrumb--blend .breadcrumb-item.active{ color:color-mix(in oklab, var(--breadcrumb-fg) 90%, #e9edf3); font-weight:700; text-shadow:0 1px 0 rgba(0,0,0,.18); }
.crumb-text{ display:inline-block; max-inline-size:clamp(120px, 26vw, 360px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.breadcrumb--blend .breadcrumb-item{ display:inline-flex; align-items:baseline; }
@media (max-width:575.98px){
  .breadcrumb-bar{ border-radius:0; padding:.5rem .65rem; }
  .crumb-text{ max-inline-size:clamp(92px, 48vw, 200px); }
}
@media (prefers-reduced-motion: reduce){ .crumb-link{ transition:none!important; } }

/* =========================================================
   20) Messages — Alerts (scoped to .alerts-wrapper only)
   ========================================================= */
.alerts-wrapper .alert{
  /* اضبط متغيرات Bootstrap للـalert داخل السكوب */
  --bs-alert-bg: var(--card-bg);
  --bs-alert-color: var(--text);
  --bs-alert-border-color: var(--border);

  /* الشكل العام */
  border-radius: var(--radius);
  border: 1px solid var(--bs-alert-border-color);
  background: var(--bs-alert-bg);
  color: var(--bs-alert-color);

  /* محاذاة وتوسيط مثالي */
  display: flex;
  align-items: center;
  gap: .6rem;
  line-height: 1.45;

  /* لتموضع زر الإغلاق عموديًا */
  position: relative;
  padding-block: .625rem;
}

/* مساحة جانبية لزر الإغلاق في التنبيهات القابلة للإغلاق */
.alerts-wrapper .alert.alert-dismissible{
  padding-inline-end: 2.5rem; /* logical (يدعم RTL/LTR) */
}

/* زر الإغلاق — توسيط عمودي + تباين مناسب بالـDark */
.alerts-wrapper .alert > .btn-close{
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: .75rem;
  transform: translateY(-50%);
  margin: 0;
  padding: .5rem;
  /* لا تستعمل filter:none هنا عشان ما نكسر التباين */
  opacity: .75;
}
.alerts-wrapper .alert > .btn-close:hover,
.alerts-wrapper .alert > .btn-close:focus{ opacity: 1; }

/* Dark themes: اقلب لون SVG للون فاتح */
html.theme-dark .alerts-wrapper .alert > .btn-close,
[data-bs-theme="dark"] .alerts-wrapper .alert > .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .9;
}

/* إتاحة */
.alerts-wrapper .alert > .btn-close:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* أيقونة الرسالة (الغلاف) */
.alerts-wrapper .alert > span[aria-hidden="true"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0; /* لو في mt-1 من قوالب قديمة */
}

/* حجم/سنترة الأيقونة نفسها */
.alerts-wrapper .alert > span[aria-hidden="true"] .bi{
  line-height: 1;
  font-size: 1.15em;
  inline-size: 1.15em;
  block-size: 1.15em;
  vertical-align: middle;
  transform: translateY(.02em); /* ضبط بصري خفيف */
}

/* تلميح لوني لنوع التنبيه (الأيقونة فقط) */
.alerts-wrapper .alert.alert-danger   > span[aria-hidden="true"] .bi{ color:#ef4444; }
.alerts-wrapper .alert.alert-warning  > span[aria-hidden="true"] .bi{ color:#f59e0b; }
.alerts-wrapper .alert.alert-success  > span[aria-hidden="true"] .bi{ color:#22c55e; }
.alerts-wrapper .alert.alert-info     > span[aria-hidden="true"] .bi{ color:#0ea5e9; }

/* نص الرسالة: ورّث اللون الموحّد (بيخلّي "This field is required." واضح في الـDark) */
.alerts-wrapper .alert .flex-grow-1{
  min-width: 0;            /* حتى تعمل text-overflow داخل فليكس */
  word-break: break-word;
  color: inherit;          /* يورّث var(--bs-alert-color) = var(--text) */
}

/* الروابط داخل الرسالة */
.alerts-wrapper .alert a,
.alerts-wrapper .alert .alert-link{
  color: var(--link);
  text-decoration: underline;
}

/* زر "Dismiss all" */
.alerts-wrapper .dismiss-all{
  border-color: var(--border);
}

/* تحسينات شاشة صغيرة */
@media (max-width: 576px){
  .alerts-wrapper .alert{ gap: .5rem; }
  .alerts-wrapper .alert > .btn-close{ inset-inline-end: .5rem; }
}


/* =========================================================
   21) Back-to-top FAB
   ========================================================= */
.back-to-top-fab{
  position:fixed; inset-inline-end:20px; inset-block-end:20px; inline-size:44px; block-size:44px;
  display:grid; place-items:center; z-index:1040; box-shadow:0 10px 20px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.back-to-top-fab.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top-fab i{ font-size:1.35rem; line-height:1; }
@media (prefers-reduced-motion: reduce){ .back-to-top-fab{ transition:none; } }
@media (min-width:992px){ .navbar-expand-lg .navbar-toggler{ display:none!important; } }

/* =========================================================
   22) Namespaced Utilities (prefix: u-)
   ========================================================= */
.u-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-min-w-0{ min-inline-size:0!important; }
.u-max-w-380{ max-inline-size:380px!important; }
.u-max-w-420{ max-inline-size:420px!important; }
.u-max-w-220{ max-inline-size:220px!important; } /* QR InstaPay */
.u-h-28{ block-size:28px!important; }
.u-opacity-95{ opacity:.95!important; }
.u-center-flex{ display:flex; align-items:center; justify-content:center; }
.u-center-grid{ display:grid; place-items:center; }
/* inline-centered shapes (لا نلمس Helpers افتراضية بدون قصد) */
.u-shape-center, .pill, .chip, .tag, .badge{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; line-height:1;
}


/* =========================================================
   23) Optical Vertical Center — GLOBAL (single-line labels)
   - يحل مشكلة عدم تساوي تمركز النص والأيقونة بصريًا
   ========================================================= */

/* Baseline language nudges (fallback) */
:root{ --oc-nudge-en:.065em; --oc-nudge-ar:.045em; }
html[lang^="en"]{ --oc-nudge:var(--oc-nudge-en); }
html[lang^="ar"]{ --oc-nudge:var(--oc-nudge-ar); }

/* Apply to all single-line, icon+label components */
.oc,
.btn,.badge,.pill,.chip,.tag,
.lang-switch,.nav-link,.dropdown-item,.list-group-item-action{
  display:inline-flex; align-items:center; line-height:1;
}

/* Mark the textual box explicitly to keep icons untouched */
.oc > .label,
.btn > span,.badge > span,.pill > span,.chip > span,.tag > span,
.lang-switch > span,.nav-link > span,.dropdown-item > span{
  display:inline-flex; align-items:center; line-height:1;
}

/* Icons: 1em square, perfectly centered */
.oc .bi,.btn .bi,.badge .bi,.pill .bi,.chip .bi,.tag .bi,
.lang-switch .bi,.nav-link .bi,.dropdown-item .bi{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:1em; block-size:1em; line-height:1; font-size:1em; vertical-align:middle;
}

/* Modern, precise optical centering (cap/lh supported) */
@supports (height: 1cap){
  .oc,
  .btn,.badge,.pill,.chip,.tag,
  .lang-switch,.nav-link,.dropdown-item,.list-group-item-action{
    padding-block: calc((1lh - 1cap) / 2);
  }
}

/* Fallback for legacy engines: language-aware nudge */
@supports not (height: 1cap){
  .oc > .label,
  .btn > span,.badge > span,.pill > span,.chip > span,.tag > span,
  .lang-switch > span,.nav-link > span,.dropdown-item > span{
    transform: translateY(var(--oc-nudge));
  }
}

/* Fine-tuning modifiers if needed */
.oc--tight{ --oc-nudge-en:.055em; --oc-nudge-ar:.035em; }
.oc--loose{ --oc-nudge-en:.075em; --oc-nudge-ar:.055em; }

/* =========================================================
   24 Skip Link (A11y) — يظهر فقط عند التركيز
   ========================================================= */
.skip-link{
  position:fixed;
  inset-block-start:var(--safe-top, 0.5rem);
  inset-inline-start:0.5rem;
  z-index:2000;

  padding:.5rem .75rem;
  border-radius:.5rem;

  background:var(--card-bg);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);

  transform:translateY(-120%);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  text-decoration:none;
  line-height:1.2;
  font-weight:600;
}
.skip-link:focus,
.skip-link:focus-visible{
  transform:translateY(0);
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
@media (hover:none) and (pointer:coarse){
  .skip-link:active{ transform:translateY(0); }
}
@media (forced-colors: active){
  .skip-link{
    border-color:ButtonText;
    outline-color:Highlight;
  }
}

/* =========================================================
   25) Print styles (optional)
   ========================================================= */
@media print{
  :root{
    color-scheme: light;
    --page-bg:#ffffff;
    --card-bg:#ffffff;
    --card-elev:#ffffff;
    --text:#000000;
    --border:#999999;
    --divider:#dddddd;
    --link:#0000ee;
    --link-hover:#0000ee;
    --focus-ring:#000000;
  }

  html,body{
    background:#fff !important;
    color:#000 !important;
    box-shadow:none !important;
  }

  /* إخفاء عناصر الملاحة والـFAB وما لا يلزم في الطباعة */
  header[role="banner"],
  .navbar,
  .topbar,
  footer[role="contentinfo"],
  .back-to-top-fab,
  .alerts-wrapper,
  .dropdown-menu,
  .nav-control,
  .btn,
  .no-print{
    display:none !important;
  }

  /* توسيع مساحة المحتوى */
  .container,
  .container-xxl{
    max-width:100% !important;
    padding:0 !important;
  }

  /* روابط أوضح في الطباعة */
  a{ color:#000; text-decoration:underline; }
  a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-weight:normal;
  }

  /* حدود خفيفة ومنع القص داخل البطاقات */
  .card{
    border-color:#bbb;
    box-shadow:none !important;
  }
  .card, .table, .section-soft, .section-accent{
    break-inside:avoid;
    page-break-inside:avoid;
  }
}

/* =========================================================
   26) Aspect-ratio fallback for .brand-logo (optional)
   ========================================================= */
@supports not (aspect-ratio: 1 / 1){
  .brand-logo{
    position:relative; /* نحتاجه للتموضع المطلق للداخل */
    inline-size:calc(var(--logo-size) + var(--logo-bump));
    block-size:auto; /* خليه يتحدد بالـ ::before */
  }
  .brand-logo::before{
    content:"";
    display:block;
    padding-top:100%; /* يحافظ على 1:1 */
  }
  .brand-logo > .brand-logo-img,
  .brand-logo > .brand-logo-fallback{
    position:absolute;
    inset:0;
  }
}

/* =========================================================
   27) Articles Color Harmony (titles/excerpts/meta)
   - يطابق نفس نهج _list_cards.html
   ========================================================= */

/* العناوين: خلي كل الروابط/العناوين الأساسية تاخد var(--text) */
.article-title-link,
#articles-index .title-link,
#articles-category .title-link,
#articles-search h5 > a,
#tag-page h2 > a,
.item-card h2 > a,
.c-article .title-link,
.ms-title-link,
#article-detail h1,
#articles-cats-title,
#tags-page-title,
#articles-cat-title {
  color: var(--text) !important;
}

/* الوصف/المقتطفات: نفس لون الـ excerpt في _list_cards (muted) */
.article-excerpt,
#articles-index .excerpt,
#articles-category .excerpt,
#articles-category .cat-desc,
#articles-search .excerpt,
#tag-page .excerpt,
#article-detail .content-body {
  color: var(--muted) !important;
}

/* الميتا + روابطها */
.article-meta,
.article-meta *,
#articles-index .meta,
#articles-category .meta,
#articles-search .meta,
#tag-page .meta,
#article-detail .meta,
.c-article .meta,
.ms-item .small.text-secondary {
  color: var(--muted) !important;
}

.article-meta-link,
.meta-link {
  color: var(--muted) !important;
  text-decoration: none;
}
.article-meta-link:hover,
.meta-link:hover {
  color: var(--primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* توحيد شكل الوسوم لو ظهرت كـ chip بدل badge */
.tag-chip {
  background: color-mix(in oklab, var(--primary) 10%, var(--card-bg)) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600;
}
@media (hover:hover) {
  .tag-chip:hover {
    background: var(--primary) !important;
    color: #fff !important;
  }
}

/* =========================================================
   28) Arabic Hindi Numerals & Alignment — Global (RTL Only)
   - يُظهر الأرقام بشكل "هندي" عند اللغة العربية
   - يحافظ على المحاذاة والتناسق البصري
   - (محدّث) بدون قواعد موبايل معمّمة؛ تم قصرها على التوب بار + يوتيليتي اختيارية
   ========================================================= */

/* 28.1) Num typography & alignment (global Arabic scope) */
html[lang^="ar"]{
  --num-variant: tabular-nums;     /* ثبات عرض الأرقام */
  --num-ff: var(--font-ar-body);   /* خط عربي داعم للأرقام */
}

/* تطبيق الخصائص على الجسم */
html[lang^="ar"] body{
  font-variant-numeric: var(--num-variant);
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1, "calt" 1, "locl" 1;
}

/* عناصر يكثر فيها ظهور الأرقام */
html[lang^="ar"] :where(time, .date, .hijri-date, .greg-date, .price, .total, .stat, .count, .num, [class*="num"], [data-num]){
  font-family: var(--num-ff);
  font-variant-numeric: var(--num-variant);
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1, "calt" 1, "locl" 1;
  text-align: start;            /* يمين مع RTL، يسار مع LTR */
  unicode-bidi: isolate;        /* يمنع انقلاب الترتيب */
  white-space: nowrap;          /* يمنع كسر السلاسل الرقمية */
}

/* 28.2) Inputs/Forms — ثبات محاذاة واتجاه مؤشر الكتابة */
html[lang^="ar"] :where(
  input[type="text"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select
){
  font-family: var(--num-ff);
  font-variant-numeric: var(--num-variant);
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1, "calt" 1, "locl" 1;
  text-align: start;   /* يمين مع RTL */
  direction: rtl;      /* اتجاه الكتابة والمؤشر */
  unicode-bidi: plaintext;
}

/* حقول تحتاج يسار دائم (IBAN/رموز...) */
html[lang^="ar"] .u-num-ltr{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}

/* 28.3) Tables/Cells — توحيد محاذاة الأعمدة الرقمية */
html[lang^="ar"] :where(th, td).num,
html[lang^="ar"] :where(th[data-type="number"], td[data-type="number"]),
html[lang^="ar"] table :where(.price, .total, .stat){
  text-align: start;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}

/* 28.4) Ordered Lists — أرقام هندي في الـmarkers + fallback */
html[lang^="ar"] ol{ list-style-type: arabic-indic; }
html[lang^="ar"] ol::marker{
  font-family: var(--num-ff);
  font-variant-numeric: var(--num-variant);
}
@supports not (list-style-type: arabic-indic){
  @counter-style arabic-indic-fallback{
    system: numeric;
    symbols: '\0660' '\0661' '\0662' '\0663' '\0664' '\0665' '\0666' '\0667' '\0668' '\0669';
    suffix: '. ';
  }
  html[lang^="ar"] ol{ list-style: arabic-indic-fallback inside; }
}

/* 28.5) CSS Counters عامة */
html[lang^="ar"] .counter-ar{ counter-reset: ar-step; }
html[lang^="ar"] .counter-ar > *::before{
  counter-increment: ar-step;
  content: counter(ar-step, arabic-indic) " ";
  font-family: var(--num-ff);
  font-variant-numeric: var(--num-variant);
  margin-inline-end: .4rem;
}

/* 28.6) عناصر التاريخ في التوب بار */
html[lang^="ar"] .date-info,
html[lang^="ar"] .greg-date,
html[lang^="ar"] .hijri-date{
  unicode-bidi: isolate;
  text-align: start;
  white-space: nowrap;
  font-variant-numeric: var(--num-variant);
  font-feature-settings: "tnum" 1, "lnum" 1, "locl" 1;
}

/* 28.7) Utilities */
html[lang^="ar"] .u-num{
  font-family: var(--num-ff) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1, "locl" 1 !important;
}
html[lang^="ar"] .u-num-nowrap{ white-space: nowrap !important; }
html[lang^="ar"] .u-num-center{ text-align: center !important; }
html[lang^="ar"] .u-num-end{ text-align: end !important; }     /* يمين في RTL */
html[lang^="ar"] .u-num-start{ text-align: start !important; } /* يسار في RTL */

/* 28.7-bis) Force Latin digits — استثناءات صريحة (لا تحويل ولا ميزات أرقام) */
html[lang^="ar"] .u-latin-digits,
html[lang^="ar"] [data-latin-digits],
html[lang^="ar"] [data-keep-ascii]{
  font-family: var(--font-en-body) !important;
  font-variant-numeric: normal !important;
  font-feature-settings: "locl" 0, "tnum" 0, "lnum" 0, "kern" 1, "calt" 1 !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  white-space: nowrap !important;
}

/* 28.8) حماية داخل النصوص المختلطة */
html[lang^="ar"] .bdi,
html[lang^="ar"] [dir="auto"]{ unicode-bidi: isolate; }

/* ---- Mobile tweak (scoped) ----
   بدلاً من تعميم center/LTR على كل الأرقام في الموبايل،
   نقصره على التاريخ داخل التوب بار + نوفر يوتيليتي اختيارية. */
@media (max-width: 480px){
  /* توسيط التاريخ في التوب بار فقط */
  html[lang^="ar"] .topbar .date-info :where(.hijri-date, .greg-date){
    text-align: center !important;
    unicode-bidi: isolate;
    white-space: nowrap !important;
  }

  /* يوتيليتي اختيارية: استخدمها يدويًا حيث تحتاج التوسيط */
  html[lang^="ar"] .u-num-center-mobile{
    text-align: center !important;
    unicode-bidi: isolate;
    white-space: nowrap !important;
  }
}