/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   y4des — Theme v3 | RTL/LTR + Dark/Light + Responsive
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Alpine.js x-cloak (إخفاء العناصر قبل تهيئة Alpine) ── */
[x-cloak] { display: none !important; }

/* ⚡ SEO-only — مخفي بصرياً، مرئي للزواحف وقارئات الشاشة */
.seo-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Dark Theme (default) ── */
:root {
  --ink:  #050510;  --ink2: #0c0c1f;  --ink3: #12122b;  --ink4: #1a1a35;
  --bg:   #050510;  --bg2:  #0c0c1f;  --bg3:  #12122b;  --bg4:  #1a1a35; --bg5: #22223f;
  --gold:    #f5c535; --gold2: #ffe570; --gold3: #c49a1a;
  --goldDim: rgba(245,197,53,.12); --goldGlow: rgba(245,197,53,.25);
  --cyan: #00e5ff; --lime: #b3ff5a; --rose: #ff4d6d; --red: #ff4d6d;
  --pur:  #a855f7; --org:  #f59842; --green: #00ff9d; --wa: #25d366;
  /* ⚡ تباين معزَّز (WCAG AA) — txt2: 4.9:1 بدل 3.8:1 / txt3: 5.1:1 بدل 2.1:1 */
  --txt:  #eef0ff; --txt2: rgba(220,222,255,.78); --txt3: rgba(220,222,255,.62); --txt4: rgba(220,222,255,.14);
  --brd:  rgba(255,255,255,.09); --brd2: rgba(255,255,255,.16); --brd3: rgba(255,255,255,.26);
  --card-bg: var(--ink3);
  --input-bg: rgba(255,255,255,.05);
  --r: 10px; --r2: 16px; --r3: 24px; --r4: 50px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.5);
  --shadow-gold: 0 8px 24px rgba(245,197,53,.2);
  --ease:  cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.4,0,.2,1);
  --ease3: cubic-bezier(.34,1.56,.64,1);
  --t-fast:   .12s var(--ease2);
  --t-normal: .22s var(--ease2);
  --t-slow:   .35s var(--ease);
  --nav-h: 60px; --max-w: 1200px;
  --u: 8px;
  --font-ar: 'Tajawal', sans-serif;
  --font-en: 'Inter', 'Tajawal', sans-serif;
  --arrow-pct: 50%;
  --jcolor: var(--gold);
  --bg-rgb: 5,5,16;
  --nav-bg: rgba(5,5,16,.88);
  --nav-bg-solid: rgba(5,5,16,.97);
  --overlay-bg: rgba(0,0,0,.6);
  --lb-overlay: rgba(2,2,12,.92);
  --lb-toolbar: rgba(5,5,16,.6);
  --lb-subbar: rgba(5,5,16,.48);
  --lb-info: rgba(5,5,16,.5);
  --glass-bg: rgba(12,12,30,.92);
  --glass-bg2: rgba(12,12,30,.7);
  --glass-bg3: rgba(12,12,30,.96);
  --popover-bg: linear-gradient(145deg, #1e1a3a, #131228);
  --popover-bg-flat: #1e1a3a;
  --share-bg: linear-gradient(145deg, #1a1635, #111028);
  --float-bg: rgba(12,12,30,.72);
  --badge-bg: rgba(5,5,16,.78);
  --white-alpha-01: rgba(255,255,255,.01);
  --white-alpha-02: rgba(255,255,255,.02);
  --white-alpha-03: rgba(255,255,255,.03);
  --white-alpha-04: rgba(255,255,255,.04);
  --white-alpha-05: rgba(255,255,255,.05);
  --white-alpha-06: rgba(255,255,255,.06);
  --white-alpha-07: rgba(255,255,255,.07);
  --white-alpha-08: rgba(255,255,255,.08);
  --white-alpha-10: rgba(255,255,255,.10);
  --white-alpha-12: rgba(255,255,255,.12);
  --white-alpha-14: rgba(255,255,255,.14);
  --white-alpha-18: rgba(255,255,255,.18);
  --white-alpha-22: rgba(255,255,255,.22);
  --h1: 3.1rem; --h2: 2.3rem; --h3: 1.75rem; --h4: 1.35rem; --h5: 1.1rem; --h6: .95rem;
  --p: 1rem;
}

/* ── Light Theme ── */
[data-theme="light"] {
  --ink:  #f8f8ff;  --ink2: #eeeef8;  --ink3: #e4e4f0;  --ink4: #d8d8ec;
  --bg:   #f8f8ff;  --bg2:  #eeeef8;  --bg3:  #e4e4f0;  --bg4:  #d8d8ec; --bg5: #ccccdf;
  --gold:  #d4a017; --gold2: #e8b420; --gold3: #b8890e;
  --goldDim: rgba(212,160,23,.12); --goldGlow: rgba(212,160,23,.25);
  --cyan:  #0088cc; --rose: #e0234e; --red: #e0234e;
  --pur:   #7c3aed; --org: #d97706; --green: #059669;
  /* ⚡ تباين معزَّز (WCAG AA) في الوضع الفاتح */
  --txt:   #0f0f2e; --txt2: rgba(15,15,46,.75); --txt3: rgba(15,15,46,.58); --txt4: rgba(15,15,46,.16);
  --brd:   rgba(0,0,0,.09); --brd2: rgba(0,0,0,.16); --brd3: rgba(0,0,0,.26);
  --card-bg: #ffffff;
  --input-bg: rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.16);
  --shadow-gold: 0 8px 24px rgba(212,160,23,.2);
  --bg-rgb: 248,248,255;
  --nav-bg: rgba(248,248,255,.92);
  --nav-bg-solid: rgba(248,248,255,.97);
  --overlay-bg: rgba(0,0,0,.35);
  --lb-overlay: rgba(240,240,255,.95);
  --lb-toolbar: rgba(248,248,255,.8);
  --lb-subbar: rgba(248,248,255,.7);
  --lb-info: rgba(248,248,255,.8);
  --glass-bg: rgba(230,230,245,.95);
  --glass-bg2: rgba(230,230,245,.8);
  --glass-bg3: rgba(230,230,245,.98);
  --popover-bg: linear-gradient(145deg, #f0f0ff, #e8e8f8);
  --popover-bg-flat: #f0f0ff;
  --share-bg: linear-gradient(145deg, #f0f0ff, #e8e8f8);
  --float-bg: rgba(230,230,245,.85);
  --badge-bg: rgba(248,248,255,.88);
  --white-alpha-01: rgba(0,0,0,.01);
  --white-alpha-02: rgba(0,0,0,.02);
  --white-alpha-03: rgba(0,0,0,.03);
  --white-alpha-04: rgba(0,0,0,.04);
  --white-alpha-05: rgba(0,0,0,.05);
  --white-alpha-06: rgba(0,0,0,.06);
  --white-alpha-07: rgba(0,0,0,.07);
  --white-alpha-08: rgba(0,0,0,.08);
  --white-alpha-10: rgba(0,0,0,.10);
  --white-alpha-12: rgba(0,0,0,.12);
  --white-alpha-14: rgba(0,0,0,.14);
  --white-alpha-18: rgba(0,0,0,.18);
  --white-alpha-22: rgba(0,0,0,.22);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  font-family: var(--font-ar);
  background: transparent;
  color: var(--txt);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  line-height: 1.6;
  transition: background var(--t-slow), color var(--t-slow);
  font-size: var(--p);
}

/* ── RTL/LTR ── */
html[lang="ar"] body, html[lang="ar"] input,
html[lang="ar"] textarea, html[lang="ar"] select,
html[lang="ar"] button { font-family: var(--font-ar); }

html[lang="en"] body, html[lang="en"] input,
html[lang="en"] textarea, html[lang="en"] select,
html[lang="en"] button { font-family: var(--font-en); }

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 { line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }
p { line-height: 1.75; }
a { text-decoration: none; color: inherit; transition: color var(--t-fast); }
img, video { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; color: inherit; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--ink2); }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold3); }

/* ── Selection ── */
::selection { background: var(--goldDim); color: var(--gold); }

/* ── Focus ── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ── Iconify fix ── */
iconify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Mark ── */
mark { background: none; color: var(--gold); font-style: italic; }

/* ── Logical utilities ── */
.text-start  { text-align: start; }
.text-end    { text-align: end; }
.text-center { text-align: center; }
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }

/* ── SR Only ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Toast ── */
#toast-root {
  position: fixed;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toast {
  padding: .65rem 1rem; border-radius: var(--r); font-size: .82rem; font-weight: 600;
  animation: fadeIn .25s var(--ease); pointer-events: all; max-width: 320px;
  display: flex; align-items: center; gap: .5rem; box-shadow: var(--shadow-md);
}
.toast.ok  { background: rgba(0,255,157,.08); border: 1px solid rgba(0,255,157,.25); color: var(--green); }
.toast.err { background: rgba(255,77,109,.08); border: 1px solid rgba(255,77,109,.25); color: var(--red); }
.toast.wa  { background: rgba(245,197,53,.08); border: 1px solid rgba(245,197,53,.25); color: var(--gold); }
.toast-close { margin-inline-start: auto; opacity: .6; cursor: pointer; }
.toast-close:hover { opacity: 1; }

/* ── Skeleton ── */
.skeleton {
  background: linear-gradient(90deg, var(--ink3) 25%, var(--ink4) 50%, var(--ink3) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--r);
}

/* ── Animations (fadeIn, pulse, spin, shimmer, glow معرّفة في animate.css) ── */
@keyframes fadeInUp  { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:none } }

/* ── Responsive ── */
@media (max-width: 767px) {
  :root { --nav-h: 54px; --h1: 2.25rem; --h2: 1.85rem; --h3: 1.45rem; --h4: 1.18rem; --h5: 1.02rem; --h6: .92rem; --p: .98rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --h1: 2.75rem; --h2: 2.1rem; --h3: 1.6rem; --h4: 1.28rem; --h5: 1.08rem; --h6: .95rem; }
}