/* ============================================================
   عيادة الدكتور علي مهاوي العيداني — نظام التصميم
   Dr. Ali Mhawi Al-Eidani Eye Clinic — Design System
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Brand — from اللوجو.png */
  --navy-950:#040912;
  --navy-900:#060d1c;
  --navy-850:#08111f;
  --navy-800:#0b1220;
  --navy-700:#0f1a30;
  --navy-600:#15233f;
  --navy-500:#1c2f52;
  --navy-400:#27406c;

  --blue-deep:#0e2a54;
  --blue-mid:#1746b0;
  --blue:#3aa0ed;
  --sky:#5bb8f5;
  --sky-soft:#8ed2fb;
  --sky-ghost:#cfe9fd;

  --gold:#d9b26a;
  --gold-soft:#f0dcae;
  --green:#2fbf88;
  --amber:#f0a63c;
  --red:#f2626b;

  /* Semantic (dark = default) */
  --bg:var(--navy-900);
  --bg-2:var(--navy-850);
  --surface:rgba(21,35,63,.55);
  --surface-solid:#101c33;
  --surface-2:rgba(28,47,82,.45);
  --border:rgba(91,184,245,.16);
  --border-strong:rgba(91,184,245,.32);
  --ink:#eaf2ff;
  --ink-2:#c3d5ef;
  --muted:#8ea6c8;
  --muted-2:#66809f;
  --accent:var(--sky);
  --accent-ink:#04131f;
  /* نصوص باللون المميّز — تُشتقّ من ألوانك وتُغمَّق في الوضع الفاتح للوضوح */
  --accent-text:var(--sky);
  --gold-text:var(--gold);
  --shadow-sm:0 2px 8px rgba(2,8,20,.35);
  --shadow:0 12px 40px rgba(2,8,20,.45);
  --shadow-lg:0 30px 80px rgba(2,8,20,.6);
  --glow:0 0 0 1px rgba(91,184,245,.18), 0 18px 60px -12px rgba(58,160,237,.35);

  /* Typography */
  --font-head:'Cairo','Tajawal','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-body:'Tajawal','Cairo','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --fs-hero:clamp(2rem,1.15rem + 4.2vw,4.4rem);
  --fs-h1:clamp(1.75rem,1.1rem + 2.9vw,3.1rem);
  --fs-h2:clamp(1.45rem,1rem + 2vw,2.4rem);
  --fs-h3:clamp(1.12rem,.95rem + .8vw,1.5rem);
  --fs-body:clamp(.98rem,.93rem + .22vw,1.08rem);
  --fs-sm:clamp(.84rem,.8rem + .16vw,.94rem);
  --fs-xs:.78rem;

  /* Space & shape */
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --gutter:clamp(16px,4vw,28px);
  --section-y:clamp(56px,9vw,120px);
  --maxw:1240px;
  --nav-h:68px;

  /* Motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.18s var(--e-out);
  --t:.35s var(--e-out);
  --t-slow:.7s var(--e-out);

  /* Hero photo blending (tunable from the admin panel) */
  --hero-fade-bottom:34%;
  --hero-fade-side:14%;
  --hero-tint:.34;
  --hero-scale:1;
  --hero-pos-x:50%;
  --hero-pos-y:42%;

  color-scheme:dark;
}

/* ---------- Light theme ---------- */
/* الوضع الداكن يحتفظ بتدرّج الذهب الأصلي */
:root:not([data-theme="light"]) .ach__n{background:linear-gradient(160deg,var(--gold-soft),var(--gold));-webkit-background-clip:text;background-clip:text}

[data-theme="light"]{
  --bg:#f4f8fd;
  --bg-2:#ffffff;
  --surface:rgba(255,255,255,.78);
  --surface-solid:#ffffff;
  --surface-2:rgba(233,243,254,.7);
  --border:rgba(14,42,84,.12);
  --border-strong:rgba(23,70,176,.26);
  --ink:#0b1c38;
  --ink-2:#26405f;
  --muted:#4c6486;
  --muted-2:#576e8e;
  --accent:var(--blue-mid);
  --accent-ink:#ffffff;
  --accent-text:color-mix(in srgb,var(--sky) 42%,#06284d);
  --green:#178055;
  --amber:#96600d;
  --red:#c62f3a;
  --gold-text:color-mix(in srgb,var(--gold) 50%,#3a2600);
  --shadow-sm:0 2px 8px rgba(14,42,84,.08);
  --shadow:0 14px 44px rgba(14,42,84,.12);
  --shadow-lg:0 34px 90px rgba(14,42,84,.18);
  --glow:0 0 0 1px rgba(23,70,176,.12), 0 18px 60px -14px rgba(23,70,176,.28);
  --hero-tint:.12;
  color-scheme:light;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.75;
  font-weight:400;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;min-height:100dvh;
  transition:background .5s var(--e-out),color .5s var(--e-out);
}
img,picture,video,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:800;line-height:1.42;margin:0;letter-spacing:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:6px}
::selection{background:var(--blue);color:#fff}

/* Arabic must never get letter-spacing — it breaks the cursive joins */
[lang="ar"],[dir="rtl"]{letter-spacing:0 !important}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--navy-500);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--navy-400);background-clip:content-box}

/* ---------- 3. Layout helpers ---------- */
.wrap{width:min(100% - (var(--gutter)*2),var(--maxw));margin-inline:auto}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(40px,6vw,80px)}
.center{text-align:center}
.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}
.hidden{display:none !important}

/* ---------- 4. Ambient background ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.aurora span:nth-child(1){width:52vw;height:52vw;background:radial-gradient(circle,var(--blue-mid),transparent 66%);top:-16vw;inset-inline-end:-12vw;animation:drift1 26s var(--e-io) infinite alternate}
.aurora span:nth-child(2){width:44vw;height:44vw;background:radial-gradient(circle,var(--blue),transparent 66%);bottom:-14vw;inset-inline-start:-12vw;opacity:.32;animation:drift2 32s var(--e-io) infinite alternate}
.aurora span:nth-child(3){width:34vw;height:34vw;background:radial-gradient(circle,var(--sky),transparent 68%);top:44%;inset-inline-start:38%;opacity:.16;animation:drift3 38s var(--e-io) infinite alternate}
[data-theme="light"] .aurora span{opacity:.22}
[data-theme="light"] .aurora span:nth-child(2){opacity:.16}
[data-theme="light"] .aurora span:nth-child(3){opacity:.1}
@keyframes drift1{to{transform:translate3d(-7vw,6vw,0) scale(1.14)}}
@keyframes drift2{to{transform:translate3d(6vw,-5vw,0) scale(1.2)}}
@keyframes drift3{to{transform:translate3d(-5vw,-7vw,0) scale(.86)}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:2}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--blue);--btn-fg:#04131f;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:48px;padding:.72em 1.5em;border-radius:var(--r-pill);
  font-family:var(--font-head);font-weight:800;font-size:var(--fs-sm);
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid transparent;position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap;
}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--sky),var(--blue-mid));opacity:0;transition:opacity var(--t)}
.btn:hover::after,.btn:focus-visible::after{opacity:1}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(58,160,237,.6);color:#fff}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:1.15em;height:1.15em;flex:none}

.btn--primary{background:linear-gradient(135deg,var(--sky),var(--blue));color:#04131f;box-shadow:0 10px 30px -12px rgba(58,160,237,.7)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn--ghost::after{background:var(--surface-2)}
.btn--ghost:hover{color:var(--ink);border-color:var(--sky)}
.btn--wa{background:linear-gradient(135deg,#3ddc84,#1faf62);color:#04231a;box-shadow:0 10px 30px -12px rgba(37,211,102,.6)}
.btn--wa::after{background:linear-gradient(135deg,#4ff09a,#25a35a)}
.btn--wa:hover{color:#04231a}
.btn--gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#2a1e05}
.btn--gold::after{background:linear-gradient(135deg,#fff0cf,var(--gold))}
.btn--gold:hover{color:#2a1e05}
.btn--sm{min-height:40px;padding:.5em 1.1em;font-size:var(--fs-xs)}
.btn--lg{min-height:56px;padding:.85em 2em;font-size:1rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- 6. Section heading ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-xs);
  color:var(--accent-text);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.42em 1.05em;margin-bottom:1.1em;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 12px var(--sky)}
.s-head{max-width:62ch;margin-inline:auto;margin-bottom:clamp(30px,4.5vw,58px)}
.s-head h2{font-size:var(--fs-h2);line-height:1.42;padding-block-end:.12em;margin-bottom:.45em;
  background:linear-gradient(180deg,var(--ink),var(--ink-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.s-head p{color:var(--muted);font-size:var(--fs-body)}
.s-head--start{margin-inline:0;text-align:start}

/* ---------- 7. Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,30px);position:relative;overflow:hidden;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transition:transform var(--t),border-color var(--t),box-shadow var(--t),background var(--t);
}
.card::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-strong),transparent);opacity:.9
}
.card--hover:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--glow)}
@media (hover:none){.card--hover:hover{transform:none}}

/* ---------- 8. Navbar ---------- */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  min-height:var(--nav-h);display:flex;align-items:center;
  transition:background var(--t),box-shadow var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
  padding-block-start:env(safe-area-inset-top);
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--border);box-shadow:0 8px 30px -18px rgba(0,0,0,.8);
}
.nav__in{display:flex;align-items:center;gap:clamp(10px,2vw,22px);width:min(100% - (var(--gutter)*2),var(--maxw));margin-inline:auto;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.65em;flex:0 1 auto;min-width:0;overflow:hidden;min-height:44px}
.brand img{width:36px;height:36px;flex:none;filter:drop-shadow(0 3px 10px rgba(58,160,237,.4))}
.brand__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__txt b{font-family:var(--font-head);font-weight:800;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand__txt span{font-size:.67rem;color:var(--muted);white-space:nowrap}
.nav__links{display:none;align-items:center;gap:.15rem;margin-inline:auto}
.nav__links a{
  padding:.55em .8em;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;
  color:var(--ink-2);position:relative;transition:color var(--t-fast),background var(--t-fast);white-space:nowrap
}
.nav__links a:hover{color:var(--ink);background:var(--surface-2)}
.nav__links a.is-active{color:var(--accent-text)}
.nav__links a.is-active::after{content:"";position:absolute;inset-block-end:.28em;inset-inline-start:50%;transform:translateX(50%);width:16px;height:2px;border-radius:2px;background:var(--sky)}
[dir="ltr"] .nav__links a.is-active::after{transform:translateX(-50%)}
.nav__actions{display:flex;align-items:center;gap:.4rem;margin-inline-start:auto;flex:none}
.icon-btn{
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);
  transition:color var(--t-fast),border-color var(--t-fast),transform var(--t-fast),background var(--t-fast);
  -webkit-tap-highlight-color:transparent
}
.icon-btn:hover{color:var(--accent-text);border-color:var(--border-strong);transform:translateY(-1px)}
.icon-btn svg{width:19px;height:19px}
.lang-btn{width:auto;padding-inline:.85em;font-family:var(--font-head);font-weight:800;font-size:.78rem}
.nav .btn{display:none}
@media (min-width:1060px){
  .nav__links{display:flex}
  .nav .btn{display:inline-flex}
  .nav__burger{display:none}
}

/* Mobile drawer */
.nav__burger{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-2)}
.nav__burger i{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform var(--t),background var(--t)}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;inset-inline-start:0;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t),top var(--t)}
.nav__burger i::before{top:-6px}.nav__burger i::after{top:6px}
body.menu-open .nav__burger i{background:transparent}
body.menu-open .nav__burger i::before{top:0;transform:rotate(45deg)}
body.menu-open .nav__burger i::after{top:0;transform:rotate(-45deg)}
.drawer{
  position:fixed;inset:0;z-index:99;visibility:hidden;opacity:0;
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 30px) var(--gutter) calc(30px + env(safe-area-inset-bottom));
  transition:opacity var(--t),visibility var(--t);overflow-y:auto;-webkit-overflow-scrolling:touch
}
body.menu-open .drawer{visibility:visible;opacity:1}
.drawer a{
  display:flex;align-items:center;justify-content:space-between;gap:1em;
  font-family:var(--font-head);font-weight:800;font-size:clamp(1.05rem,4.4vw,1.45rem);
  padding:.58em .3em;border-bottom:1px solid var(--border);color:var(--ink-2);
  transform:translateY(14px);opacity:0;transition:color var(--t-fast),transform .45s var(--e-out),opacity .45s var(--e-out)
}
body.menu-open .drawer a{transform:none;opacity:1}
.drawer a:nth-child(1){transition-delay:.05s}.drawer a:nth-child(2){transition-delay:.09s}
.drawer a:nth-child(3){transition-delay:.13s}.drawer a:nth-child(4){transition-delay:.17s}
.drawer a:nth-child(5){transition-delay:.21s}.drawer a:nth-child(6){transition-delay:.25s}
.drawer a:nth-child(7){transition-delay:.29s}.drawer a:nth-child(8){transition-delay:.33s}
.drawer a:nth-child(9){transition-delay:.37s}.drawer a:nth-child(10){transition-delay:.41s}
.drawer a:active,.drawer a:hover{color:var(--accent-text)}
.drawer a span{font-size:.72rem;color:var(--muted-2);font-family:var(--font-body);font-weight:500}
.drawer__cta{margin-top:1.4em;display:grid;gap:.6em}
@media (min-width:1060px){.drawer{display:none}.nav__burger{display:none}}

/* ---------- 9. HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-block-start:calc(var(--nav-h) + 16px);padding-block-end:clamp(28px,6vw,64px);
  overflow:hidden;isolation:isolate
}
.hero__bgline{
  position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(120% 90% at 78% 0%,rgba(23,70,176,.42),transparent 60%),
    radial-gradient(90% 70% at 12% 100%,rgba(58,160,237,.22),transparent 62%);
}
[data-theme="light"] .hero__bgline{background:radial-gradient(120% 90% at 78% 0%,rgba(23,70,176,.14),transparent 60%),radial-gradient(90% 70% at 12% 100%,rgba(58,160,237,.12),transparent 62%)}
.hero__in{
  width:min(100% - (var(--gutter)*2),var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:1fr;gap:clamp(18px,4vw,40px);align-items:end;position:relative
}

/* --- The doctor photo: large + gradient-merged into the page --- */
.hero__photo{
  position:absolute;inset-block:0;inset-inline-end:0;z-index:-2;
  width:min(560px,92%);height:100%;pointer-events:none;overflow:hidden;
}
.hero__photo picture{display:block;width:100%;height:100%}
.hero__photo img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--hero-pos-x) var(--hero-pos-y);
  transform:scale(var(--hero-scale));transform-origin:bottom center;
  /* The merge: fade bottom + both side edges + top into the background */
  -webkit-mask-image:
    linear-gradient(to top,transparent 0%,rgba(0,0,0,.35) calc(var(--hero-fade-bottom) * .48),#000 var(--hero-fade-bottom)),
    linear-gradient(to left,transparent 0%,#000 var(--hero-fade-side)),
    linear-gradient(to right,transparent 0%,#000 var(--hero-fade-side)),
    linear-gradient(to bottom,transparent 0%,#000 9%);
  mask-image:
    linear-gradient(to top,transparent 0%,rgba(0,0,0,.35) calc(var(--hero-fade-bottom) * .48),#000 var(--hero-fade-bottom)),
    linear-gradient(to left,transparent 0%,#000 var(--hero-fade-side)),
    linear-gradient(to right,transparent 0%,#000 var(--hero-fade-side)),
    linear-gradient(to bottom,transparent 0%,#000 9%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  animation:heroIn 1.5s var(--e-out) both .1s;
}
@keyframes heroIn{
  from{opacity:0;transform:scale(calc(var(--hero-scale) * 1.07)) translateY(22px)}
  to{opacity:1;transform:scale(var(--hero-scale)) translateY(0)}
}
/* Colour-grade the photo so it belongs to the palette */
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(23,70,176,.55),rgba(11,18,32,0) 46%,rgba(6,13,28,.9) 92%);
  opacity:var(--hero-tint);mix-blend-mode:soft-light;
}
[data-theme="light"] .hero__photo::after{background:linear-gradient(200deg,rgba(23,70,176,.4),transparent 50%,rgba(244,248,253,.9) 92%);mix-blend-mode:normal}
.hero__veil{
  --fade-dir:right;
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 2%,color-mix(in srgb,var(--bg) 55%,transparent) 26%,transparent 62%);
}

.hero__copy{max-width:min(660px,100%);position:relative}
.hero__badge{
  display:inline-flex;align-items:center;gap:.55em;font-size:var(--fs-xs);font-weight:700;
  font-family:var(--font-head);color:var(--sky-ghost);
  background:linear-gradient(135deg,rgba(58,160,237,.22),rgba(23,70,176,.14));
  border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:.45em 1.05em;margin-bottom:1.1em;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)
}
[data-theme="light"] .hero__badge{color:var(--blue-deep)}
.hero__badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(47,191,136,.65);animation:pulse 2.2s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(47,191,136,0)}100%{box-shadow:0 0 0 0 rgba(47,191,136,0)}}
.hero h1{
  font-size:var(--fs-hero);line-height:1.38;margin-bottom:.22em;
  padding-block-end:.14em;                 /* مساحة للحروف النازلة: ي و ن ج */
  background:linear-gradient(150deg,#fff 8%,var(--sky-ghost) 52%,var(--sky) 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-wrap:balance;
}
[data-theme="light"] .hero h1{background:linear-gradient(150deg,var(--blue-deep) 10%,var(--blue-mid) 60%,var(--blue) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__role{font-family:var(--font-head);font-weight:700;font-size:var(--fs-h3);color:var(--accent-text);margin-bottom:.5em}
.hero__lede{color:var(--ink-2);font-size:clamp(.96rem,.9rem + .35vw,1.14rem);max-width:52ch;margin-bottom:1.5em;text-wrap:pretty}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:clamp(24px,4vw,40px)}
.hero__cta .btn{flex:1 1 auto;min-width:min(210px,100%)}
@media (min-width:560px){.hero__cta .btn{flex:0 1 auto}}

/* Stats strip */
.hero__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hero__stats div{background:var(--surface);padding:clamp(12px,2.2vw,18px) clamp(8px,2vw,18px);text-align:center;transition:background var(--t)}
.hero__stats div:hover{background:var(--surface-2)}
.hero__stats b{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(1.3rem,1rem + 1.5vw,2.05rem);color:var(--accent-text);line-height:1.15;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.hero__stats span{font-size:.73rem;color:var(--muted);display:block;margin-top:.2em;line-height:1.4}


@media (min-width:900px){
  .hero{align-items:center}
  .hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
  .hero__photo{width:min(50vw,640px);inset-inline-end:calc(var(--gutter) * -.4)}
  .hero__veil{background:linear-gradient(to var(--fade-dir),transparent 22%,color-mix(in srgb,var(--bg) 62%,transparent) 58%,var(--bg) 86%),linear-gradient(to top,var(--bg) 0%,transparent 30%)}
}
@media (max-width:899px){
  .hero__photo{width:100%;height:min(86%,calc(100vw * 1.35));inset-block-start:0;inset-block-end:auto;opacity:.94}
  .hero__copy{padding-block-start:min(38vh,300px)}
  .hero__cta .btn--lg{min-height:50px;padding-block:.7em}
  .hero__stats div{padding-block:10px}
  .hero__stats b{font-size:1.45rem}
  .hero__veil{background:linear-gradient(to top,var(--bg) 22%,color-mix(in srgb,var(--bg) 72%,transparent) 44%,transparent 78%)}
}
.scroll-hint{
  position:absolute;inset-block-end:12px;inset-inline-start:50%;transform:translateX(50%);
  display:none;flex-direction:column;align-items:center;gap:.4em;color:var(--muted-2);font-size:.66rem
}
[dir="ltr"] .hero__veil{--fade-dir:left}
[dir="ltr"] .scroll-hint{transform:translateX(-50%)}
.scroll-hint i{width:22px;height:36px;border:1.5px solid var(--border-strong);border-radius:12px;position:relative}
.scroll-hint i::after{content:"";position:absolute;inset-block-start:6px;inset-inline-start:50%;margin-inline-start:-2px;width:4px;height:6px;border-radius:2px;background:var(--sky);animation:wheel 1.7s var(--e-io) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(13px)}}
@media (min-width:900px) and (min-height:720px){.scroll-hint{display:flex}}

/* ---------- 10. Trust marquee ---------- */
.trust{border-block:1px solid var(--border);background:var(--surface);overflow:hidden;padding-block:clamp(12px,2vw,18px)}
.trust__track{display:flex;gap:clamp(28px,5vw,64px);width:max-content;animation:marquee 34s linear infinite}
.trust:hover .trust__track{animation-play-state:paused}
.trust__track span{display:inline-flex;align-items:center;gap:.5em;color:var(--muted);font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.trust__track span svg{width:17px;height:17px;color:var(--accent-text);flex:none}
@keyframes marquee{to{transform:translateX(50%)}}
[dir="ltr"] .trust__track{animation-name:marqueeL}
@keyframes marqueeL{to{transform:translateX(-50%)}}

/* ---------- 11. About / bio ---------- */
.about{display:grid;gap:clamp(26px,4vw,54px);align-items:start}
@media (min-width:960px){.about{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.about__portrait{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
/* الصورة صارت مقصوصة مسبقاً بإطار صحيح — لا تحتاج إزاحة */
.about__portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;transition:transform 1.1s var(--e-out)}
.about__portrait:hover img{transform:scale(1.05)}
.about__portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,13,28,.88),transparent 48%);pointer-events:none}
.about__plate{position:absolute;inset-block-end:0;inset-inline:0;padding:clamp(16px,2.6vw,26px);z-index:2}
.about__plate b{display:block;font-family:var(--font-head);font-weight:800;font-size:var(--fs-h3);color:#fff}
.about__plate span{color:var(--sky-soft);font-size:var(--fs-sm)}
.about__body p+p{margin-top:1em}
.about__body p{color:var(--ink-2)}

.timeline{margin-top:clamp(22px,3vw,34px);position:relative;padding-inline-start:1.6rem}
.timeline::before{content:"";position:absolute;inset-block:.6rem;inset-inline-start:5px;width:2px;background:linear-gradient(to bottom,var(--sky),var(--blue-mid),transparent)}
.timeline li{position:relative;padding-block:.5rem 1.1rem}
.timeline li::before{content:"";position:absolute;inset-inline-start:-1.6rem;inset-block-start:1.15rem;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--sky);box-shadow:0 0 0 4px color-mix(in srgb,var(--sky) 18%,transparent)}
.timeline b{display:block;font-family:var(--font-head);font-size:1rem;color:var(--ink)}
.timeline time{font-size:var(--fs-xs);color:var(--accent-text);font-weight:700;font-variant-numeric:tabular-nums}
.timeline p{color:var(--muted);font-size:var(--fs-sm);margin-top:.15em}

/* ---------- 12. Services / procedures ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,22px)}
@media (min-width:600px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{
  display:flex;flex-direction:column;gap:.85em;text-align:start;cursor:pointer;
  border-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px);
  background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);-webkit-tap-highlight-color:transparent
}
.svc::after{content:"";position:absolute;inset-inline-end:-40%;inset-block-start:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--blue),transparent 66%);opacity:0;transition:opacity var(--t);pointer-events:none}
.svc:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--glow)}
.svc:hover::after{opacity:.16}
.svc__ico{
  width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(91,184,245,.22),rgba(23,70,176,.16));
  border:1px solid var(--border-strong);color:var(--accent-text)
}
.svc__ico svg{width:26px;height:26px}
.svc h3{font-size:var(--fs-h3)}
.svc p{color:var(--muted);font-size:var(--fs-sm);flex:1}
.svc__tags{display:flex;flex-wrap:wrap;gap:.4em}
.tag{font-size:.7rem;font-weight:700;padding:.32em .8em;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2)}
.svc__more{display:inline-flex;align-items:center;gap:.4em;color:var(--accent-text);font-weight:800;font-size:var(--fs-xs);font-family:var(--font-head)}
.svc__more svg{width:15px;height:15px;transition:transform var(--t-fast)}
.svc:hover .svc__more svg{transform:translateX(-4px)}
[dir="ltr"] .svc__more svg{transform:scaleX(-1)}
[dir="ltr"] .svc:hover .svc__more svg{transform:scaleX(-1) translateX(-4px)}

/* ---------- 13. Achievements & certificates ---------- */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:clamp(14px,2vw,20px)}
.ach{text-align:center;padding:clamp(20px,3vw,30px) clamp(14px,2vw,22px)}
.ach__n{font-family:var(--font-head);font-weight:800;font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);line-height:1.2;padding-block-end:.06em;direction:ltr;unicode-bidi:isolate;
  background:linear-gradient(160deg,var(--gold-text),var(--gold-text));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.ach h3{font-size:1rem;margin-block:.5em .3em}
.ach p{color:var(--muted);font-size:var(--fs-sm)}

.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:clamp(14px,2vw,20px)}
.cert{
  position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);
  background:var(--surface);cursor:zoom-in;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  -webkit-tap-highlight-color:transparent;text-align:start;display:block;width:100%
}
.cert:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 20px 50px -20px rgba(217,178,106,.4)}
.cert img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-2)}
.cert__ph{width:100%;aspect-ratio:4/3;display:grid;place-items:center;color:var(--muted-2);background:linear-gradient(135deg,var(--surface-2),transparent)}
.cert__ph svg{width:42px;height:42px;opacity:.5}
.cert__cap{padding:.85em 1em;border-top:1px solid var(--border)}
.cert__cap b{display:block;font-family:var(--font-head);font-size:.92rem}
.cert__cap span{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- 14. Medical reports / articles ---------- */
.rep-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,22px)}
@media (min-width:700px){.rep-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.rep-grid{grid-template-columns:repeat(3,1fr)}}
.rep{display:flex;flex-direction:column;gap:.7em;cursor:pointer;text-align:start;-webkit-tap-highlight-color:transparent;width:100%}
.rep__meta{display:flex;align-items:center;gap:.6em;font-size:var(--fs-xs);color:var(--muted-2);flex-wrap:wrap}
.rep__cat{color:var(--accent-text);font-weight:800;font-family:var(--font-head)}
.rep h3{font-size:1.08rem;line-height:1.45}
.rep p{color:var(--muted);font-size:var(--fs-sm);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rep__read{margin-top:auto;color:var(--accent-text);font-weight:800;font-size:var(--fs-xs);font-family:var(--font-head);display:inline-flex;align-items:center;gap:.4em}

/* ---------- 15. Booking ---------- */
.book{display:grid;gap:clamp(22px,3.5vw,44px)}
@media (min-width:980px){.book{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.book__aside{position:relative;border-radius:var(--r-xl);padding:clamp(24px,3.4vw,36px);overflow:hidden;
  background:linear-gradient(160deg,rgba(23,70,176,.34),rgba(11,18,32,.5));border:1px solid var(--border-strong)}
[data-theme="light"] .book__aside{background:linear-gradient(160deg,rgba(23,70,176,.1),rgba(255,255,255,.7))}
.book__aside h3{font-size:var(--fs-h3);margin-bottom:.6em}
.book__list li{display:flex;gap:.75em;padding-block:.65em;border-bottom:1px dashed var(--border);align-items:flex-start}
.book__list li:last-child{border-bottom:0}
.book__list svg{width:19px;height:19px;color:var(--accent-text);flex:none;margin-top:.28em}
.book__list b{display:block;font-family:var(--font-head);font-size:.94rem}
.book__list span{color:var(--muted);font-size:var(--fs-sm)}

.form{display:grid;gap:clamp(13px,1.8vw,17px)}
.form__row{display:grid;gap:inherit}
@media (min-width:560px){.form__row--2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.42em;min-width:0}
.field label{font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);color:var(--ink-2)}
.field label .req{color:var(--red)}
.field .hint{font-size:var(--fs-xs);color:var(--muted-2)}
.input,.select,.textarea{
  width:100%;min-height:50px;padding:.72em 1.05em;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink);
  font-size:16px; /* prevents iOS zoom-on-focus */
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
  -webkit-appearance:none;appearance:none;font-family:var(--font-body)
}
.textarea{min-height:118px;resize:vertical;line-height:1.7}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--sky);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--sky) 15%,transparent)}
.input:disabled,.select:disabled{opacity:.5}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ea6c8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:17px;background-position:left 1em center;padding-inline-start:2.6em}
[dir="ltr"] .select{background-position:right 1em center;padding-inline-start:1.05em;padding-inline-end:2.6em}
.field.is-bad .input,.field.is-bad .select,.field.is-bad .textarea{border-color:var(--red);box-shadow:0 0 0 4px rgba(242,98,107,.14)}
.field .err{font-size:var(--fs-xs);color:var(--red);display:none}
.field.is-bad .err{display:block}
.dir-ltr-input{direction:ltr;text-align:start}
[dir="rtl"] .dir-ltr-input{text-align:right}

/* time-slot chips */
.chips{display:flex;flex-wrap:wrap;gap:.5em}
.chip{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em;
  padding:.42em 1em;border-radius:14px;border:1px solid var(--border);
  background:var(--surface-2);font-size:var(--fs-sm);font-weight:700;font-family:var(--font-head);
  color:var(--ink-2);transition:all var(--t-fast);min-height:52px;min-width:88px;
  -webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums;line-height:1.25
}
.chip small{font-size:.66rem;font-weight:600;color:var(--muted-2);font-family:var(--font-body)}
.chip:hover{border-color:var(--border-strong);color:var(--ink);transform:translateY(-2px)}
.chip.is-on{background:linear-gradient(135deg,var(--sky),var(--blue));color:#04131f;border-color:transparent;box-shadow:0 8px 22px -10px rgba(58,160,237,.7)}
.chip.is-on small{color:rgba(4,19,31,.7)}
.chip.is-full{opacity:.45;background:transparent;border-style:dashed}
.chip.is-full small{color:var(--red)}
.chip[disabled]{pointer-events:none}
.chip[disabled] span{text-decoration:line-through;text-decoration-thickness:1px}

/* ---------- 16. Reviews ---------- */
.rev-top{display:flex;flex-wrap:wrap;gap:clamp(14px,2.5vw,26px);align-items:center;justify-content:center;margin-bottom:clamp(24px,3vw,38px)}
.rev-score{display:flex;align-items:center;gap:1em;padding:1em 1.4em;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.rev-score b{font-family:var(--font-head);font-weight:800;font-size:clamp(2rem,1.4rem + 2.2vw,3rem);line-height:1;color:var(--gold-text);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.rev-score span{font-size:var(--fs-sm);color:var(--muted);display:block}
.stars{display:inline-flex;gap:.12em;color:var(--gold-text)}
.stars svg{width:17px;height:17px}
.stars .off{color:var(--muted-2);opacity:.45}

.rev-rail{display:flex;gap:clamp(13px,2vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-block-end:14px;scrollbar-width:thin;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.rev-rail::-webkit-scrollbar{height:6px}
.rev{flex:0 0 min(340px,86vw);scroll-snap-align:center;display:flex;flex-direction:column;gap:.8em}
.rev__q{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.85;flex:1}
.rev__who{display:flex;align-items:center;gap:.7em;padding-top:.6em;border-top:1px solid var(--border)}
.rev__av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:1rem;
  background:linear-gradient(135deg,var(--sky),var(--blue-mid));color:#04131f}
.rev__who b{display:block;font-size:.92rem;font-family:var(--font-head)}
.rev__who span{font-size:var(--fs-xs);color:var(--muted-2)}
.rev__verified{margin-inline-start:auto;color:var(--green);display:inline-flex;align-items:center;gap:.3em;font-size:.68rem;font-weight:700;flex:none}
.rev__verified svg{width:14px;height:14px}

.star-pick{display:inline-flex;flex-direction:row-reverse;gap:.2em}
.star-pick input{position:absolute;opacity:0;width:0;height:0}
.star-pick label{cursor:pointer;color:var(--muted-2);opacity:.45;transition:all var(--t-fast);padding:.15em}
.star-pick label svg{width:30px;height:30px;pointer-events:none}
.star-pick input:checked ~ label,.star-pick label:hover,.star-pick label:hover ~ label{color:var(--gold-text);opacity:1;transform:scale(1.06)}

/* ---------- 17. FAQ ---------- */
.faq{max-width:860px;margin-inline:auto;display:grid;gap:.7rem}
.qa{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color var(--t),background var(--t)}
.qa.is-open{border-color:var(--border-strong)}
.qa__q{width:100%;display:flex;align-items:center;gap:1em;text-align:start;padding:clamp(15px,2.2vw,20px);font-family:var(--font-head);font-weight:700;font-size:clamp(.94rem,.9rem + .3vw,1.06rem);-webkit-tap-highlight-color:transparent;min-height:56px}
.qa__q i{margin-inline-start:auto;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--accent-text);transition:transform var(--t),background var(--t),color var(--t);position:relative}
.qa__q i::before{content:"";width:11px;height:1.8px;background:currentColor;border-radius:2px;position:absolute}
.qa__q i::after{content:"";width:1.8px;height:11px;background:currentColor;border-radius:2px;position:absolute;transition:transform var(--t),opacity var(--t)}
.qa.is-open .qa__q i{background:var(--sky);color:var(--accent-ink);transform:rotate(180deg)}
.qa.is-open .qa__q i::after{transform:scaleY(0);opacity:0}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--e-out)}
.qa.is-open .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}
.qa__a p{padding:0 clamp(15px,2.2vw,20px) clamp(16px,2.2vw,22px);color:var(--muted);font-size:var(--fs-sm)}

/* ---------- 18. Contact & footer ---------- */
.ct-grid{display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.ct{display:flex;gap:1em;align-items:flex-start;text-align:start}
.ct__ico{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(91,184,245,.2),rgba(23,70,176,.14));border:1px solid var(--border-strong);color:var(--accent-text)}
.ct__ico svg{width:22px;height:22px}
.ct b{display:block;font-family:var(--font-head);font-size:.98rem;margin-bottom:.15em}
.ct span{color:var(--muted);font-size:var(--fs-sm);word-break:break-word}
.ct a{color:var(--muted);font-size:var(--fs-sm);word-break:break-word;transition:color var(--t-fast);display:inline-flex;align-items:center;min-height:40px;padding-block:.2em}
.ct a.dir-ltr{font-size:1rem;font-weight:700;color:var(--ink-2)}
.ct a:hover{color:var(--accent-text)}
.dir-ltr{direction:ltr;display:inline-block;font-variant-numeric:tabular-nums;unicode-bidi:isolate}

.hours{display:grid;gap:.1rem}
.hours li{display:flex;justify-content:space-between;gap:1em;padding:.62em .2em;border-bottom:1px dashed var(--border);font-size:var(--fs-sm)}
.hours li:last-child{border-bottom:0}
.hours li.is-today{color:var(--accent-text);font-weight:800}
.hours li b{font-weight:700}
.hours li span{color:var(--muted);direction:ltr;font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.hours li.is-off span{color:var(--red)}

.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface-2);position:relative}
.map iframe{width:100%;height:100%;min-height:330px;border:0;display:block}
.map__ph{min-height:330px;display:grid;place-items:center;gap:.6em;color:var(--muted);text-align:center;padding:2em}
.map__ph svg{width:46px;height:46px;color:var(--accent-text);opacity:.6;margin-inline:auto}

.footer{border-top:1px solid var(--border);background:var(--bg-2);padding-block:clamp(38px,5vw,64px) clamp(20px,3vw,28px);margin-top:clamp(30px,5vw,60px);padding-bottom:calc(clamp(20px,3vw,28px) + env(safe-area-inset-bottom))}
.footer__top{display:grid;gap:clamp(24px,3.5vw,40px);grid-template-columns:1fr}
@media (min-width:820px){.footer__top{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.footer h4{font-family:var(--font-head);font-size:.98rem;margin-bottom:1em;color:var(--ink)}
.footer__links li{margin-bottom:.1em}
.footer__links a{color:var(--muted);font-size:var(--fs-sm);transition:color var(--t-fast),padding var(--t-fast);display:inline-flex;align-items:center;min-height:40px}
.footer__links a:hover{color:var(--accent-text);padding-inline-start:5px}
.footer__brand{display:flex;align-items:center;gap:.7em;margin-bottom:1em}
.footer__brand img{width:46px;height:46px}
.footer__brand b{font-family:var(--font-head);font-size:1.02rem;display:block}
.footer__brand span{font-size:var(--fs-xs);color:var(--muted)}
.footer__note{color:var(--muted);font-size:var(--fs-sm);max-width:42ch}
.socials{display:flex;gap:.5em;margin-top:1.1em;flex-wrap:wrap}
.socials a{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);transition:all var(--t-fast)}
.socials a:hover{color:var(--accent-text);border-color:var(--sky);transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.footer__bot{margin-top:clamp(26px,4vw,42px);padding-top:1.3em;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:.7em 1.4em;align-items:center;justify-content:space-between;font-size:var(--fs-xs);color:var(--muted-2)}
.footer__bot a{color:var(--muted-2);display:inline-flex;align-items:center;gap:.35em;min-height:40px}
.footer__bot a:hover{color:var(--accent-text)}

/* ---------- 19. Floating actions ---------- */
.fabs{position:fixed;z-index:90;inset-block-end:calc(16px + env(safe-area-inset-bottom));inset-inline-start:16px;display:flex;flex-direction:column;gap:.6rem}
.fab{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  box-shadow:var(--shadow);color:#fff;position:relative;
  transition:transform var(--t),box-shadow var(--t),opacity var(--t);-webkit-tap-highlight-color:transparent
}
.fab:hover{transform:translateY(-4px) scale(1.05)}
.fab:active{transform:scale(.95)}
.fab svg{width:27px;height:27px;position:relative;z-index:2}
.fab--wa{background:linear-gradient(135deg,#2fd36f,#128c4a)}
.fab--chat{background:linear-gradient(135deg,var(--sky),var(--blue-mid))}
.fab--top{width:46px;height:46px;background:var(--surface-solid);border:1px solid var(--border-strong);color:var(--ink-2);opacity:0;pointer-events:none;transform:translateY(12px)}
.fab--top.is-on{opacity:1;pointer-events:auto;transform:none}
.fab__ping{position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:.6;animation:ping 2.4s var(--e-io) infinite;z-index:1}
@keyframes ping{to{transform:scale(1.5);opacity:0}}

/* ---------- 20. Chat widget ---------- */
.chat{
  position:fixed;z-index:95;
  inset-block-end:calc(84px + env(safe-area-inset-bottom));inset-inline-start:16px;
  width:min(390px,calc(100vw - 32px));height:min(560px,calc(100dvh - 170px));
  background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:bottom left;
  transition:opacity var(--t),transform var(--t),visibility var(--t)
}
[dir="ltr"] .chat{transform-origin:bottom right}
.chat.is-open{opacity:1;visibility:visible;transform:none}
@media (max-width:520px){
  .chat{inset:auto 0 0 0;width:100%;height:min(86dvh,700px);border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(100%)}
  .chat.is-open{transform:none}
}
.chat__hd{display:flex;align-items:center;gap:.7em;padding:.85em 1em;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,rgba(23,70,176,.3),transparent);flex:none}
.chat__av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--sky),var(--blue-mid));padding:6px}
.chat__av img{width:100%;height:100%;object-fit:contain}
.chat__hd b{display:block;font-family:var(--font-head);font-size:.94rem;line-height:1.3}
.chat__hd small{color:var(--green);font-size:.7rem;display:flex;align-items:center;gap:.35em}
.chat__hd small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.chat__x{margin-inline-start:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:all var(--t-fast);flex:none}
.chat__x:hover{background:var(--surface-2);color:var(--ink)}
.chat__x svg{width:18px;height:18px}
.chat__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1em;display:flex;flex-direction:column;gap:.75em;scroll-behavior:smooth}
.msg{max-width:86%;padding:.7em 1em;border-radius:var(--r);font-size:.9rem;line-height:1.72;animation:msgIn .32s var(--e-out) both;word-wrap:break-word;overflow-wrap:anywhere}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}}
.msg--bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-start-start-radius:6px}
.msg--me{align-self:flex-end;background:linear-gradient(135deg,var(--sky),var(--blue));color:#04131f;border-end-end-radius:6px;font-weight:600}
.msg b{font-weight:800}
.msg ul{margin:.4em 0;padding-inline-start:1.1em;list-style:disc}
.msg li{margin-bottom:.2em}
.msg a{color:var(--accent-text);text-decoration:underline}
.msg--me a{color:#04131f}
.typing{align-self:flex-start;display:flex;gap:.28em;padding:.9em 1.1em;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);border-start-start-radius:6px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.35s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat__sug{display:flex;gap:.45em;padding:.55em 1em;overflow-x:auto;-webkit-overflow-scrolling:touch;flex:none;border-top:1px solid var(--border);scrollbar-width:none}
.chat__sug::-webkit-scrollbar{display:none}
.chat__sug button{white-space:nowrap;padding:.45em .95em;border-radius:var(--r-pill);border:1px solid var(--border-strong);
  background:var(--surface-2);font-size:.76rem;font-weight:700;color:var(--ink-2);transition:all var(--t-fast);flex:none;min-height:40px}
.chat__sug button:hover{background:var(--sky);color:var(--accent-ink);border-color:transparent}
.chat__ft{display:flex;gap:.5em;padding:.7em 1em calc(.7em + env(safe-area-inset-bottom));border-top:1px solid var(--border);flex:none;align-items:flex-end}
.chat__ft textarea{flex:1;min-height:44px;max-height:110px;padding:.6em .9em;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--border);resize:none;font-size:16px;line-height:1.5;overflow-y:auto;font-family:var(--font-body)}
.chat__ft textarea:focus{outline:0;border-color:var(--sky)}
.chat__send{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sky),var(--blue));color:#04131f;transition:transform var(--t-fast),opacity var(--t-fast)}
.chat__send:hover{transform:scale(1.07)}
.chat__send svg{width:19px;height:19px}
[dir="rtl"] .chat__send svg{transform:scaleX(-1)}

/* ---------- 21. Modal / lightbox ---------- */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:var(--gutter);
  background:rgba(3,8,18,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t);overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal.is-open{opacity:1;visibility:visible}
.modal__box{
  width:min(760px,100%);max-height:calc(100dvh - (var(--gutter)*2));overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);transform:translateY(20px) scale(.97);transition:transform var(--t);
  padding:clamp(22px,3.4vw,38px);position:relative;margin:auto
}
.modal.is-open .modal__box{transform:none}
.modal__box--wide{width:min(1050px,100%)}
.modal__box--bare{padding:0;background:transparent;border:0;box-shadow:none;width:min(1100px,100%)}
.modal__x{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);z-index:3;transition:all var(--t-fast)}
.modal__x:hover{color:var(--ink);background:var(--surface);transform:rotate(90deg)}
.modal__x svg{width:18px;height:18px}
.modal__box img.full{width:100%;border-radius:var(--r);box-shadow:var(--shadow-lg)}
.modal h3{font-size:var(--fs-h3);margin-bottom:.5em;padding-inline-end:2.5em}
.prose{color:var(--ink-2);font-size:var(--fs-body)}
.prose p{margin-bottom:1em}
.prose h4{font-family:var(--font-head);font-size:1.06rem;margin:1.4em 0 .5em;color:var(--accent-text)}
.prose ul{list-style:disc;padding-inline-start:1.3em;margin-bottom:1em}
.prose li{margin-bottom:.4em}
.prose strong{color:var(--ink);font-weight:700}

/* ---------- 22. Toast ---------- */
.toasts{position:fixed;z-index:200;inset-block-start:calc(var(--nav-h) + 12px + env(safe-area-inset-top));inset-inline:var(--gutter);
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none}
.toast{
  pointer-events:auto;max-width:min(460px,100%);display:flex;align-items:flex-start;gap:.7em;
  padding:.85em 1.15em;border-radius:var(--r);background:var(--surface-solid);
  border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);
  animation:toastIn .4s var(--e-out) both
}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.96)}}
.toast.out{animation:toastOut .3s var(--e-io) both}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.96)}}
.toast svg{width:19px;height:19px;flex:none;margin-top:.15em}
.toast--ok{border-color:var(--green)}.toast--ok svg{color:var(--green)}
.toast--err{border-color:var(--red)}.toast--err svg{color:var(--red)}
.toast--info svg{color:var(--sky)}

/* ---------- 23. Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}.reveal[data-d="6"]{transition-delay:.48s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}

/* ---------- 24. Empty state ---------- */
.empty{text-align:center;padding:clamp(30px,5vw,60px) var(--gutter);color:var(--muted)}
.empty svg{width:52px;height:52px;margin-inline:auto;margin-bottom:.8em;opacity:.4;color:var(--accent-text)}
.empty b{display:block;font-family:var(--font-head);font-size:1.05rem;color:var(--ink-2);margin-bottom:.3em}

/* ---------- 25. Print ---------- */
@media print{
  .nav,.drawer,.fabs,.chat,.aurora,.grain,.scroll-hint,.trust,.modal,.toasts{display:none !important}
  body{background:#fff;color:#000}
  .section{padding-block:16px;page-break-inside:avoid}
}

/* ---------- 26. شاشات ضيّقة جداً ---------- */
@media (max-width:430px){
  .brand__txt span{display:none}
  .brand__txt b{font-size:.86rem}
  .nav__actions{gap:.28rem}
  .icon-btn{width:40px;height:40px}
}
@media (max-width:360px){
  .brand img{width:32px;height:32px}
  .brand__txt b{font-size:.8rem}
}

/* ---------- 27. سلوجين العيادة ---------- */
.slogan{
  font-family:var(--font-head);font-weight:700;font-size:1.02rem;line-height:1.75;
  margin:.2em 0 .8em;padding-inline-start:.85em;padding-block-end:.12em;position:relative;
  background:linear-gradient(120deg,var(--accent-text),var(--ink-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.slogan::before{content:"";position:absolute;inset-inline-start:0;inset-block:.15em;width:3px;border-radius:3px;
  background:linear-gradient(to bottom,var(--sky),transparent)}

/* ============================================================
   28. حقل الآراء العائمة
   ============================================================ */
.rev-field{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  height:clamp(340px,52vh,540px);
  border:1px solid var(--border);
  background:
    radial-gradient(90% 70% at 20% 0%,rgba(23,70,176,.16),transparent 60%),
    radial-gradient(70% 60% at 85% 100%,rgba(58,160,237,.12),transparent 62%),
    var(--surface);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  isolation:isolate;touch-action:manipulation;
}
.rev-field::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(to bottom,var(--bg) -20%,transparent 18%,transparent 82%,var(--bg) 120%);
  opacity:.55
}
.rev-field__hint{
  position:absolute;inset-block-end:12px;inset-inline:0;z-index:4;text-align:center;
  font-size:.74rem;color:var(--muted-2);pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:.4em;
  transition:opacity var(--t)
}
.rev-field__hint svg{width:14px;height:14px}
.rev-field.is-open .rev-field__hint{opacity:0}

/* فقاعة رأي عائمة */
.rev-bub{
  position:absolute;z-index:2;width:min(300px,74%);inset-inline:auto;
  padding:.95em 1.15em;border-radius:var(--r);cursor:pointer;text-align:start;
  background:color-mix(in srgb,var(--surface-solid) 88%,transparent);
  border:1px solid var(--border-strong);
  box-shadow:0 14px 40px -16px rgba(2,8,20,.6);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transform:translate3d(0,14px,0) scale(.94);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),box-shadow var(--t),border-color var(--t);
  -webkit-tap-highlight-color:transparent;will-change:transform,opacity
}
.rev-bub.in{opacity:1;transform:translate3d(var(--dx,0),var(--dy,0),0) scale(1)}
.rev-bub.out{opacity:0;transform:translate3d(calc(var(--dx,0px) * 1.7),calc(var(--dy,0px) * 1.7 - 16px),0) scale(.96)}
.rev-bub:hover{border-color:var(--sky);box-shadow:0 20px 50px -18px rgba(58,160,237,.5);z-index:5}
.rev-bub__t{display:flex;align-items:center;gap:.5em;margin-bottom:.45em}
.rev-bub__av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:800;font-size:.82rem;
  background:linear-gradient(135deg,var(--sky),var(--blue-mid));color:#04131f}
.rev-bub__n{font-family:var(--font-head);font-weight:800;font-size:.85rem;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-bub .stars svg{width:12px;height:12px}
.rev-bub__q{font-size:.83rem;line-height:1.7;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rev-bub__more{font-size:.68rem;color:var(--accent-text);font-weight:700;margin-top:.35em;display:inline-flex;align-items:center;gap:.25em}
.rev-bub__more svg{width:12px;height:12px}

/* البطاقة الكاملة عند الضغط */
.rev-open{
  position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:clamp(14px,3vw,26px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t)
}
.rev-field.is-open .rev-open{opacity:1;visibility:visible}
.rev-open__card{
  width:min(520px,100%);max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:var(--r-lg);
  padding:clamp(18px,3vw,28px);box-shadow:var(--shadow-lg);
  transform:translateY(16px) scale(.97);transition:transform .4s var(--e-out)
}
.rev-field.is-open .rev-open__card{transform:none}
.rev-open__hd{display:flex;align-items:center;gap:.7em;margin-bottom:.9em}
.rev-open__q{font-size:.95rem;line-height:2;color:var(--ink);margin-bottom:1.2em}
.rev-open__meta{font-size:.76rem;color:var(--muted-2);margin-bottom:1.2em;display:flex;flex-wrap:wrap;gap:.4em 1em}
.rev-open__acts{display:flex;gap:.5em;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .rev-bub{transition:opacity .2s linear}
  .rev-bub.in,.rev-bub.out{transform:none}
}

/* ============================================================
   29. إبراز خيار التواصل المباشر فوق واتساب
   ============================================================ */
.fabs{align-items:flex-start}
.fab-row{display:flex;align-items:center;gap:.55em}

.fab__label{
  font-family:var(--font-head);font-weight:800;font-size:.82rem;white-space:nowrap;
  padding:.55em 1.05em;border-radius:var(--r-pill);color:var(--ink);
  background:color-mix(in srgb,var(--surface-solid) 92%,transparent);
  border:1px solid var(--border-strong);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transform:translateX(10px) scale(.94);transform-origin:center;
  transition:opacity var(--t),transform var(--t);pointer-events:none
}
[dir="ltr"] .fab__label{transform:translateX(-10px) scale(.94)}
.fab-row:hover .fab__label,.fab__label.show{opacity:1;transform:none}
.fab__label--sm{font-size:.76rem;font-weight:700;padding:.42em .85em;color:var(--muted)}

/* زر التواصل: أكبر وأبرز — وواتساب ثانوي */
.fab--chat{
  width:66px;height:66px;
  background:linear-gradient(135deg,var(--sky),var(--blue-mid));
  box-shadow:0 14px 38px -10px color-mix(in srgb,var(--sky) 70%,transparent),0 0 0 1px rgba(255,255,255,.14) inset;
}
.fab--chat svg{width:31px;height:31px}
.fab--chat::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,var(--sky),var(--blue-mid),var(--sky));
  opacity:.55;filter:blur(7px);animation:haloSpin 5s linear infinite
}
@keyframes haloSpin{to{transform:rotate(360deg)}}
.fab--wa{width:50px;height:50px;opacity:.92}
.fab--wa svg{width:24px;height:24px}
.fab--wa:hover{opacity:1}

/* فقاعة دعوة تظهر مرة واحدة */
.fab-tease{
  position:absolute;inset-inline-start:calc(100% + .6em);inset-block-start:50%;
  transform:translateY(-50%) translateX(8px);
  background:linear-gradient(135deg,var(--sky),var(--blue));color:#04131f;
  font-family:var(--font-head);font-weight:800;font-size:.84rem;white-space:nowrap;
  padding:.6em 1.1em;border-radius:var(--r-pill);box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .5s var(--e-out),transform .5s var(--e-out)
}
.fab-tease.show{opacity:1;transform:translateY(-50%)}
.fab-tease::after{
  content:"";position:absolute;inset-inline-end:100%;inset-block-start:50%;margin-block-start:-6px;
  border:6px solid transparent;border-inline-end-color:var(--sky)
}
@media (max-width:520px){.fab-tease{font-size:.78rem;padding:.5em .9em}}

/* بطاقة «اسأل العيادة» في قسم التواصل */
.ask-card{
  position:relative;overflow:hidden;text-align:start;width:100%;
  border-radius:var(--r-xl);padding:clamp(22px,3.2vw,34px);
  background:linear-gradient(135deg,color-mix(in srgb,var(--sky) 22%,transparent),color-mix(in srgb,var(--blue-mid) 26%,transparent));
  border:1px solid var(--border-strong);cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  -webkit-tap-highlight-color:transparent
}
.ask-card:hover{transform:translateY(-4px);border-color:var(--sky);box-shadow:0 24px 60px -22px color-mix(in srgb,var(--sky) 65%,transparent)}
.ask-card::after{
  content:"";position:absolute;inset-inline-end:-60px;inset-block-start:-60px;
  width:220px;height:220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--sky) 40%,transparent),transparent 68%)
}
.ask-card__in{display:flex;align-items:center;gap:clamp(14px,2.2vw,22px);position:relative;z-index:1;flex-wrap:wrap}
.ask-card__ico{
  width:62px;height:62px;flex:none;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sky),var(--blue-mid));color:#04131f;
  box-shadow:0 10px 26px -8px color-mix(in srgb,var(--sky) 70%,transparent)
}
.ask-card__ico svg{width:30px;height:30px}
.ask-card__txt{flex:1;min-width:min(220px,100%)}
.ask-card__txt b{display:block;font-family:var(--font-head);font-weight:800;font-size:var(--fs-h3);margin-bottom:.2em}
.ask-card__txt span{color:var(--ink-2);font-size:var(--fs-sm)}
.ask-card .btn{flex:none}
@media (max-width:560px){.ask-card .btn{width:100%}}

/* ============================================================
   30. تقويم الحجز المخصّص
   ============================================================ */
.cal{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(14px,2.2vw,20px);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  user-select:none;-webkit-user-select:none
}
.cal__hd{display:flex;align-items:center;gap:.6em;margin-bottom:1em}
.cal__title{flex:1;text-align:center;font-family:var(--font-head);font-weight:800;font-size:1.02rem;line-height:1.3}
.cal__title small{display:block;font-size:.7rem;color:var(--muted);font-weight:500;font-family:var(--font-body)}
.cal__nav{
  width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);
  transition:all var(--t-fast);-webkit-tap-highlight-color:transparent
}
.cal__nav:hover:not([disabled]){border-color:var(--sky);color:var(--accent-text);transform:translateY(-1px)}
.cal__nav[disabled]{opacity:.28;pointer-events:none}
.cal__nav svg{width:17px;height:17px}

.cal__wd{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal__wd span{
  text-align:center;font-size:.68rem;font-weight:800;color:var(--muted-2);
  font-family:var(--font-head);padding-block:.35em
}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}

.cal__d{
  position:relative;aspect-ratio:1;min-height:42px;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:1px solid transparent;background:transparent;
  font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink-2);
  transition:all var(--t-fast);-webkit-tap-highlight-color:transparent;
  font-variant-numeric:tabular-nums
}
.cal__d i{
  width:15px;height:3px;border-radius:2px;background:currentColor;opacity:.55;
  transition:all var(--t-fast)
}
.cal__d--pad{pointer-events:none}
.cal__d--out{color:var(--muted-2);opacity:.3;pointer-events:none}
.cal__d--closed{color:var(--muted-2);opacity:.42;pointer-events:none}
.cal__d--closed i{background:var(--red);opacity:.5;width:9px}
.cal__d--full{color:var(--muted-2);opacity:.55;pointer-events:none}
.cal__d--full i{background:var(--red);opacity:.7}
.cal__d--ok{
  color:var(--ink);background:var(--surface-2);border-color:var(--border);cursor:pointer
}
.cal__d--ok i{background:var(--green)}
.cal__d--ok.busy i{background:var(--amber);width:9px}
.cal__d--ok:hover{border-color:var(--sky);transform:translateY(-2px);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--sky) 60%,transparent)}
.cal__d--today::after{
  content:"";position:absolute;inset:-1px;border-radius:12px;
  border:1.5px dashed var(--border-strong);pointer-events:none
}
.cal__d.on{
  background:linear-gradient(135deg,var(--sky),var(--blue));color:#04131f;border-color:transparent;
  box-shadow:0 10px 26px -10px color-mix(in srgb,var(--sky) 75%,transparent);transform:translateY(-2px)
}
.cal__d.on i{background:#04131f;opacity:.55}
.cal__d.on::after{border-color:transparent}

.cal__legend{
  display:flex;flex-wrap:wrap;gap:.5em 1.1em;margin-top:1em;padding-top:.9em;
  border-top:1px solid var(--border);font-size:.72rem;color:var(--muted)
}
.cal__legend span{display:inline-flex;align-items:center;gap:.4em}
.cal__legend b{width:14px;height:3px;border-radius:2px;display:inline-block}

/* ============================================================
   31. اختيار الوقت والمقاعد
   ============================================================ */
.sess{margin-bottom:1.1em}
.sess:last-child{margin-bottom:0}
.sess__hd{
  display:flex;align-items:center;gap:.5em;margin-bottom:.6em;
  font-family:var(--font-head);font-weight:800;font-size:.82rem;color:var(--accent-text)
}
.sess__hd svg{width:15px;height:15px;flex:none}
.sess__hd::after{content:"";flex:1;height:1px;background:var(--border)}
.sess__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(124px,100%),1fr));gap:.5em}

.slot{
  position:relative;overflow:hidden;text-align:start;
  display:flex;flex-direction:column;gap:.35em;
  padding:.7em .8em;border-radius:14px;min-height:64px;
  border:1px solid var(--border);background:var(--surface-2);
  transition:all var(--t-fast);-webkit-tap-highlight-color:transparent
}
.slot__t{
  font-family:var(--font-head);font-weight:800;font-size:.94rem;color:var(--ink);
  direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums
}
.slot__m{display:flex;align-items:center;gap:.3em;font-size:.68rem;color:var(--muted)}
.slot__pips{display:inline-flex;gap:2px;align-items:center}
.slot__pips b{width:6px;height:6px;border-radius:50%;background:var(--green);display:block;transition:background var(--t-fast)}
.slot__pips b.used{background:var(--muted-2);opacity:.4}
.slot__bar{height:4px;border-radius:3px;background:var(--surface);overflow:hidden;border:1px solid var(--border)}
.slot__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--sky));transition:width var(--t)}
.slot__bar i.busy{background:linear-gradient(90deg,var(--amber),var(--red))}

.slot:not([disabled]):hover{
  border-color:var(--sky);transform:translateY(-3px);
  box-shadow:0 12px 28px -14px color-mix(in srgb,var(--sky) 70%,transparent)
}
.slot.on{
  background:linear-gradient(135deg,var(--sky),var(--blue));border-color:transparent;
  box-shadow:0 12px 30px -12px color-mix(in srgb,var(--sky) 80%,transparent);transform:translateY(-3px)
}
.slot.on .slot__t{color:#04131f}
.slot.on .slot__m{color:rgba(4,19,31,.72)}
.slot.on .slot__pips b{background:#04131f}
.slot.on .slot__pips b.used{background:rgba(4,19,31,.3)}
.slot.on .slot__bar{background:rgba(4,19,31,.18);border-color:transparent}
.slot.on .slot__bar i{background:#04131f}
.slot[disabled]{opacity:.4;pointer-events:none;background:transparent;border-style:dashed}
.slot[disabled] .slot__t{text-decoration:line-through;text-decoration-thickness:1px;color:var(--muted)}

/* لافتة موعد العودة */
.revisit{
  display:flex;align-items:flex-start;gap:.6em;margin-top:.9em;padding:.8em 1em;
  border-radius:var(--r);font-size:.82rem;line-height:1.7;
  background:color-mix(in srgb,var(--green) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 45%,transparent);color:var(--ink-2);
  animation:msgIn .35s var(--e-out) both
}
.revisit svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:.18em}
.revisit b{color:var(--ink)}

.slot-empty{
  display:flex;align-items:center;gap:.5em;padding:1em;border-radius:var(--r);
  border:1px dashed var(--border-strong);background:var(--surface-2);
  color:var(--muted);font-size:.85rem
}
.slot-empty svg{width:17px;height:17px;flex:none}
.slot-empty--warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,transparent)}
.slot-empty--err{color:var(--red);border-color:color-mix(in srgb,var(--red) 50%,transparent)}

/* ============================================================
   32. تنبيه الحضور في الموعد
   ============================================================ */
.notice{
  display:flex;gap:.75em;align-items:flex-start;text-align:start;
  padding:.95em 1.1em;border-radius:var(--r);margin-top:1em;
  background:color-mix(in srgb,var(--amber) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 55%,transparent);
  font-size:.84rem;line-height:1.8;color:var(--ink-2)
}
.notice__i{
  flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--amber) 26%,transparent);color:var(--amber)
}
.notice__i svg{width:17px;height:17px}
.notice b{color:var(--ink);font-weight:800}
.notice__t{
  display:block;font-family:var(--font-head);font-weight:800;font-size:.9rem;
  color:var(--amber);margin-bottom:.25em
}
.notice ul{margin:.45em 0 0;padding-inline-start:1.15em;display:grid;gap:.3em}
.notice li::marker{color:var(--amber)}
.notice--calm{
  background:color-mix(in srgb,var(--sky) 11%,transparent);
  border-color:color-mix(in srgb,var(--sky) 45%,transparent)
}
.notice--calm .notice__i{background:color-mix(in srgb,var(--sky) 24%,transparent);color:var(--accent-text)}
.notice--calm .notice__t{color:var(--accent-text)}
.notice--calm li::marker{color:var(--sky)}

/* ============================================================
   33. تصحيحات الوضع النهاري
   تدرّج عنوان الواجهة يبدأ بالأبيض (مصمّم لخلفية داكنة) فيذوب
   على الخلفية الفاتحة — نستبدله بتدرّج كحلي يُقرأ بوضوح.
   ============================================================ */
[data-theme="light"] .hero h1{
  /* background-image لا background — الاختصار يُصفّر background-clip فيتحوّل
     التدرّج إلى مستطيل مصمت فوق النص بدل أن يُقصّ على حروفه */
  background-image:linear-gradient(150deg,#08203f 4%,var(--blue-mid) 58%,var(--blue) 98%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
[data-theme="light"] .hero__badge{
  background:rgba(255,255,255,.88);border-color:var(--border-strong)
}
[data-theme="light"] .hero__stats{
  background:var(--border-strong)
}

/* ملاحظة صغيرة أسفل جواب الذكاء الاصطناعي */
.msg__note{
  display:block;margin-top:.55em;padding-top:.5em;
  border-top:1px dashed var(--border-strong);
  font-size:.72rem;color:var(--muted);line-height:1.5
}

/* صندوق المحادثة أثناء انتظار الجواب */
#chatInput:disabled{opacity:.6;cursor:progress}
.chat__send:disabled{opacity:.4;pointer-events:none}

/* سهم «للأعلى»: الأيقونة سهم يمين، فندوّرها لتؤشّر صعوداً.
   التدوير على الـ svg لا على الزر، حتى يبقى transform الزر
   حراً لحركة الظهور والاختفاء. */
.fab--top svg{transform:rotate(-90deg)}

/* أيقونة رابط «اقرأ المقال» و«اقرأ كاملاً» */
.rep__read svg,.rev-bub__more svg{width:1.05em;height:1.05em;flex:none}

/* ============================================================
   34. قراءة أوضح على الهاتف
   أحرف أيام التقويم ونصوص الروابط الصغيرة كانت 10.9px —
   مقبولة على الشاشة الكبيرة، صغيرة على الهاتف.
   ============================================================ */
@media (max-width:560px){
  .cal__wd span{font-size:.78rem}
  .rev-bub__more{font-size:.78rem}
  .cal__d{font-size:.98rem;min-height:46px}
  .cal__legend{font-size:.76rem}
}