/* mojtaz.com — page compositions + utilities */

/* ---------- Utilities ---------- */
.m-0{ margin:0!important; } .mt-2{ margin-block-start:var(--s-2)!important; } .mt-3{ margin-block-start:var(--s-3)!important; }
.mt-4{ margin-block-start:var(--s-4)!important; } .mt-5{ margin-block-start:var(--s-5)!important; } .mt-6{ margin-block-start:var(--s-6)!important; }
.mb-3{ margin-block-end:var(--s-3)!important; } .mb-5{ margin-block-end:var(--s-5)!important; }
.loading{ color:var(--muted); padding-block:var(--s-6); }
.sep{ border:0; border-block-start:1px solid var(--line); margin-block:var(--s-5); }
.grid-2--fields{ gap:0 var(--s-4); align-items:start; }
@media (max-width:520px){ .grid-2--fields{ grid-template-columns:1fr; } }
.grid-cards{ display:grid; gap:var(--s-3); }
@media (min-width:768px){ .grid-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- Home: hero (full-bleed photo under a navy gradient, transparent header on top) ---------- */
.hero{ position:relative; isolation:isolate; color:#fff; min-height:min(100svh, 980px); display:flex; align-items:flex-end; overflow:hidden; background:var(--navy-2); }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:18% 40%; z-index:-2; }
.hero__shade{ position:absolute; inset:0; z-index:-1; background:var(--hero-grad); }
.hero__body{ width:100%; padding-block:calc(var(--header-h) * var(--z) + 40px) calc(118px * var(--z)); }
.hero__panel{ max-width:640px; }
.hero h1{ color:#fff; font-size:var(--fs-display); line-height:1.25; margin:var(--s-4) 0 var(--s-4); }
.hero__lead{ color:#E4E9FA; font-size:var(--fs-lg); line-height:1.9; margin:0; }
.hero .price{ color:#fff; }
.hero .price__label,.hero .price__note{ color:#D6DDF5; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-block-start:var(--s-6); }
.hero__ctas .btn{ min-width:190px; }
@media (max-width:559px){
  .hero{ min-height:auto; }
  .hero__img{ object-position:22% 50%; }
  .hero__body{ padding-block:calc(var(--header-h) + 150px) 104px; }
  .hero__panel{ display:flex; flex-direction:column; }
  .hero h1{ margin-block:var(--s-3) var(--s-2); }
  .hero .price{ margin-block:var(--s-2) var(--s-4); }
  .hero__lead{ order:5; margin-block-start:var(--s-5); font-size:var(--fs-base); }
  .hero__ctas{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); margin-block-start:var(--s-5); }
  .hero__ctas .btn{ min-width:0; padding-inline:var(--s-3); white-space:nowrap; font-size:15px; gap:6px; }
  .hero__ctas .btn svg{ width:18px; height:18px; flex:none; }
}
@media (min-width:1024px){ .hero__panel{ max-width:min(640px, 48%); } }

/* ---------- Impact strip ---------- */
.impact .sec-head{ margin-block-end:var(--s-6); }
.impact__row{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4); }
.impact__row li{ display:flex; align-items:center; gap:var(--s-3); justify-content:center; }
.impact__row strong{ font-size:var(--fs-h2); color:var(--navy-2); font-weight:var(--fw-bold); }
.impact__row span:last-child{ color:var(--muted); }
.chip{ flex:none; inline-size:44px; block-size:44px; border-radius:50%; display:grid; place-items:center; background:var(--paper-3); color:var(--navy-2); }
.chip svg{ width:22px; height:22px; }
@media (max-width:767px){ .impact__row li{ justify-content:flex-start; padding-inline-start:var(--s-6); } }
@media (min-width:768px){ .impact__row{ grid-template-columns:repeat(3,minmax(0,1fr)); } .impact__row li + li{ border-inline-start:1px solid var(--line); } }

/* ---------- Navy band (steps comparison + photos) ---------- */
.navy-band{ background:var(--navy-2); background:linear-gradient(180deg, var(--navy-2) 0%, #172766 100%); }
.steps-app{ display:grid; justify-items:center; }
.steps-grid{ width:100%; }
.steps-card{ border:0; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.navy-band .card,.navy-band .visit-photo{ color:var(--ink); }
.steps-card__head{ margin-block-end:var(--s-4); }
.steps-card__head h3{ color:var(--navy-2); }
.steps-chart{ display:none; }
.hsteps{ list-style:none; margin:0; padding:0; }
.hstep{ position:relative; padding-block-end:var(--s-3); }
.hstep::before{ content:""; position:absolute; inset-inline-start:23px; top:50px; bottom:2px; border-inline-start:2px dotted var(--line-strong); }
.hstep:last-child::before{ display:none; }
.hstep.is-filled::before{ border-inline-start:2px solid var(--sky); }
.hstep__btn{ display:flex; align-items:center; gap:var(--s-3); width:100%; min-height:48px; padding:0; border:0; background:none; text-align:start; cursor:pointer; color:var(--ink); font:inherit; }
.hstep__m{ flex:none; inline-size:48px; block-size:48px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--line-strong); background:var(--paper);
  font-weight:600; color:var(--muted); position:relative; z-index:1; }
.hsteps--nazar .hstep__m{ border-color:var(--sky); color:var(--brand); }
.hstep__t{ font-weight:var(--fw-medium); }
.hstep__btn:hover .hstep__t{ color:var(--brand); }
.hstep.is-filled .hstep__m{ background:var(--sky-tint); }
.hsteps--current .hstep.is-filled .hstep__m{ background:var(--paper-3); }
.hstep.is-sel .hstep__m{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 0 0 5px var(--sky-tint); }
.hsteps--current .hstep.is-sel .hstep__m{ background:var(--navy-2); border-color:var(--navy-2); }
.hstep.is-sel .hstep__t{ font-weight:var(--fw-bold); color:var(--navy-2); }
.hstep__d{ margin:var(--s-2) 0 var(--s-2); margin-inline-start:60px; padding:var(--s-3) var(--s-4); background:var(--paper-2); border-radius:var(--r-2); }
.steps-detail{ display:none; }
@media (min-width:1024px){
  .hsteps-scroll{ overflow-x:auto; padding-block:var(--s-2) var(--s-3); }
  .hsteps{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
  .hsteps--n10{ min-width:940px; }
  .hstep{ padding:0; }
  .hstep::before{ inset-inline-start:calc(50% + 28px); inset-inline-end:calc(-50% + 28px); width:auto; top:23px; bottom:auto; border-inline-start:0; border-top:2px dotted var(--line-strong); }
  .hstep.is-filled::before{ border-inline-start:0; border-top:2px solid var(--sky); }
  .hstep__btn{ flex-direction:column; text-align:center; gap:var(--s-2); padding-inline:var(--s-1); }
  .hstep__t{ font-size:var(--fs-sm); line-height:1.45; }
  .hstep__d{ display:none; }
  .steps-detail{ display:block; margin-block-start:var(--s-5); padding:var(--s-4) var(--s-5); background:var(--sky-tint); border-radius:var(--r-2); }
  .steps-detail strong{ display:block; font-size:var(--fs-lg); color:var(--navy-2); margin-block-end:var(--s-1); }
}

/* ---------- Visit photos (eye exam / blood test) ---------- */
.visit-photos{ display:grid; gap:var(--s-4); margin-block-start:var(--s-6); width:100%; }
.visit-photos--top{ margin-block:0 var(--s-6); }
@media (min-width:640px){ .visit-photos{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.visit-photo{ margin:0; background:var(--paper); border-radius:var(--r-3); overflow:hidden; box-shadow:var(--sh-1); }
.visit-photo img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 30%; }
.visit-photo figcaption{ display:grid; gap:2px; padding:var(--s-4) var(--s-5); }
.visit-photo figcaption strong{ font-size:var(--fs-lg); color:var(--navy-2); }
.visit-photo figcaption span{ color:var(--muted); font-size:var(--fs-sm); }

/* ---------- Journey "خطوة بخطوة" ---------- */
.jsteps{ list-style:none; margin:0 auto; padding:0; max-width:460px; display:grid; }
.jstep{ display:grid; justify-items:center; text-align:center; }
.jstep__icon{ position:relative; inline-size:64px; block-size:64px; border-radius:50%; display:grid; place-items:center; background:var(--paper); color:var(--brand);
  border:3px solid var(--sky); box-shadow:0 0 0 7px var(--sky-tint); z-index:1; }
.jstep__icon svg{ width:28px; height:28px; }
.jstep::after{ content:""; display:block; inline-size:2px; block-size:40px; border-inline-start:2px dotted var(--sky); margin-block:2px; }
.jstep:last-child::after{ display:none; }
.jstep__card{ position:relative; width:100%; margin-block-start:var(--s-4); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--sh-1); padding:var(--s-5); }
.jstep__card::before{ content:""; position:absolute; top:-24px; inset-inline-start:50%; inline-size:2px; block-size:22px; border-inline-start:2px dotted var(--sky); }
.jstep__n{ display:inline-grid; place-items:center; inline-size:28px; block-size:28px; border-radius:50%; background:var(--navy-2); color:#fff; font-size:var(--fs-sm); font-weight:600; margin-block-end:var(--s-2); }
.jstep__card h3{ color:var(--navy-2); margin:0 0 var(--s-2); font-size:var(--fs-h3); }
.jstep__card p{ margin:0; color:var(--ink-2); }
@media (min-width:1024px){
  .jsteps{ max-width:none; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s-4); position:relative; }
  .jsteps::before{ content:""; position:absolute; top:32px; inset-inline:10%; border-top:2px dotted var(--sky); }
  .jstep::after{ display:none; }
  .jstep__card{ height:100%; }
}

/* ---------- Comparison table ---------- */
.compare-card{ padding:0; overflow:hidden; }
.compare{ width:100%; border-collapse:collapse; }
.compare th,.compare td{ padding:var(--s-4) var(--s-5); text-align:start; border-block-end:1px solid var(--line); }
.compare tr:last-child th,.compare tr:last-child td{ border-block-end:0; }
.compare thead th{ background:var(--navy-2); color:#fff; font-weight:var(--fw-semi); }
.compare thead th.is-platform{ background:var(--brand); }
.compare tbody th{ font-weight:var(--fw-semi); color:var(--navy-2); }
.compare td.is-platform{ background:var(--sky-tint); font-weight:var(--fw-semi); color:var(--navy-2); }
.mark{ display:inline-flex; inline-size:30px; block-size:30px; border-radius:50%; align-items:center; justify-content:center; vertical-align:middle; }
.mark svg{ width:18px; height:18px; }
.mark--no{ color:var(--danger); background:var(--danger-tint); }
.mark--yes{ color:#fff; background:var(--route); }
@media (max-width:640px){
  .compare thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .compare tr{ display:grid; grid-template-columns:1fr 1fr; border-block-end:1px solid var(--line); }
  .compare tbody th{ grid-column:1/-1; border:0; padding-block-end:var(--s-1); }
  .compare td{ border:0; padding-block-start:var(--s-1); display:flex; flex-direction:column; gap:var(--s-1); }
  .compare td::before{ content:attr(data-label); font-size:var(--fs-xs); color:var(--muted); font-weight:var(--fw-medium); }
}

/* ---------- Reviews ---------- */
.reviews{ display:grid; gap:var(--s-4); max-width:1000px; margin-inline:auto; }
@media (min-width:768px){ .reviews{ grid-template-columns:1fr 1fr; } }
.review{ margin:0; }
.review__stars{ color:#F2A900; letter-spacing:3px; font-size:var(--fs-lg); }
.review blockquote{ margin:var(--s-3) 0; font-size:var(--fs-lg); color:var(--ink); }
.review figcaption{ font-weight:var(--fw-semi); color:var(--navy-2); }

/* ---------- Regulations (last home section) ---------- */
.regs__grid{ display:grid; gap:var(--s-3); max-width:1000px; margin-inline:auto; }
@media (min-width:900px){ .regs__grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.reg-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-3); }
.reg-card[open]{ background:var(--paper); box-shadow:var(--sh-1); }
.reg-card summary{ display:flex; align-items:center; gap:var(--s-3); min-height:64px; padding:var(--s-3) var(--s-5); cursor:pointer; list-style:none; font-weight:var(--fw-semi); color:var(--navy-2); }
.reg-card summary::-webkit-details-marker{ display:none; }
.reg-card__icon{ flex:none; inline-size:40px; block-size:40px; border-radius:50%; display:grid; place-items:center; background:var(--sky-tint); color:var(--brand); }
.reg-card__icon svg{ width:20px; height:20px; }
.reg-card__t{ flex:1; }
.reg-card__body{ padding:0 var(--s-5) var(--s-5); }
.reg-card__body p:last-child{ margin:0; }
.regs__more{ display:flex; justify-content:center; margin-block:var(--s-6) var(--s-5); }
.disclaimer{ max-width:1000px; margin-inline:auto; text-align:center; }

/* ---------- Forms ---------- */
.form{ padding-block-end:var(--s-5); }
.action-bar{ position:sticky; bottom:0; z-index:5; background:var(--paper); padding:var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); border-block-start:1px solid var(--line); margin-block-start:var(--s-4); }
@media (min-width:768px){ .action-bar{ position:static; border:0; padding:0; } }
.consent{ align-items:flex-start; }
.consent .tile__label{ font-weight:var(--fw-regular); line-height:1.7; }
.consent a{ position:relative; z-index:2; }
.tiles--slots .tile{ min-height:52px; }
.centers{ margin-block-end:var(--s-5); }
.centers .btn{ margin-block-end:var(--s-4); }
.map-frame{ border-radius:var(--r-2); overflow:hidden; aspect-ratio:4/3; background:var(--paper-2); border:1px solid var(--line); }
@media (min-width:768px){ .map-frame{ aspect-ratio:16/9; } }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }
.summary-line{ font-size:var(--fs-lg); font-weight:var(--fw-semi); margin:0; padding-block-end:var(--s-3); border-block-end:1px solid var(--line); }

/* ---------- Checkout / track ---------- */
.checkout-grid,.track-grid{ display:grid; gap:var(--s-5); align-items:start; }
@media (min-width:1024px){
  .p-checkout .container--narrow{ max-width:1040px; }
  .checkout-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .checkout-grid > :first-child{ position:sticky; top:calc(var(--header-h) + 24px); }
  .track-grid{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
  .track-side{ position:sticky; top:calc(var(--header-h) + 24px); }
}
.track-now{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); margin-block-end:var(--s-5); }
.idcard .idcard__body dl{ font-size:var(--fs-sm); }

/* ---------- Checklist ---------- */
.mini-route{ list-style:none; margin:var(--s-5) 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:relative; }
.mini-route__s{ position:relative; display:grid; justify-items:center; align-content:start; gap:var(--s-1); text-align:center; font-size:var(--fs-xs); line-height:1.4; padding-inline:2px; }
.mini-route__s::before{ content:""; position:absolute; top:19px; inset-inline-start:50%; inset-inline-end:-50%; border-top:2px dotted var(--line-strong); z-index:0; }
.mini-route__s.is-done::before{ border-top:2px solid var(--sky); }
.mini-route__s:last-child::before{ display:none; }

.mini-route__m{ position:relative; z-index:1; inline-size:38px; block-size:38px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--line-strong); background:var(--paper); font-weight:600; color:var(--muted); }
.mini-route__s.is-done .mini-route__m{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }
.mini-route__s.is-current .mini-route__m{ border-color:var(--sky); color:var(--brand); box-shadow:0 0 0 5px var(--sky-tint); }
.mini-route__l{ font-weight:var(--fw-medium); color:var(--ink); }
.mini-route__now{ color:var(--brand); font-weight:var(--fw-bold); }
.mini-route__t{ color:var(--ink-2); font-size:11px; }
.action-box{ background:var(--paper-2); padding:var(--s-3) var(--s-4); border-radius:var(--r-2); margin-block-start:var(--s-3); }
.action-box strong{ display:block; margin-block-end:var(--s-1); }
.action-box--current{ background:var(--sky-tint); }
.stack > .check-steps{ list-style:none; padding:0; margin:var(--s-5) 0 0; display:grid; gap:var(--s-3); }
.step-card__t{ display:flex; align-items:center; gap:var(--s-3); }
.step-card__m{ flex:none; inline-size:38px; block-size:38px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--line-strong); color:var(--muted); font-size:var(--fs-sm); font-weight:600; }
.check-step.is-done .step-card__m{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }
.check-step.is-current .step-card__m{ border-color:var(--sky); color:var(--brand); box-shadow:0 0 0 5px var(--sky-tint); }
.step-card--current{ border-color:var(--sky); box-shadow:0 0 0 3px var(--sky-tint), var(--sh-1); }
.fees--flush td{ padding-inline:0; }

/* ---------- How / Absher road cards ---------- */
.road--cards{ margin-block-end:var(--s-5); }
.road--cards .road__step{ grid-template-columns:48px minmax(0,1fr); padding-block-end:var(--s-4); }
.road--cards .card h2{ color:var(--navy-2); }
.road--cards .card p:last-child{ margin:0; }
.road--static .road__title{ font-weight:var(--fw-regular); margin-block-start:6px; }

/* ---------- Dashboard ---------- */
.session-bar{ gap:var(--s-3); }
.cells{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-2); }
.cell{ background:var(--paper-2); border-radius:var(--r-2); padding:var(--s-3) var(--s-4); display:grid; gap:2px; min-width:0; }
.cell__l{ font-size:var(--fs-sm); color:var(--muted); }
.cell__v{ font-weight:var(--fw-semi); color:var(--navy-2); overflow-wrap:anywhere; }
.order-row{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--s-3); align-items:center; }
.order-row__code{ color:var(--brand); }

/* ---------- Provider ---------- */
.visit__link{ display:grid; gap:var(--s-1); color:inherit; text-decoration:none; }
.visit__link:hover strong{ color:var(--brand); }
.visit__meta{ font-size:var(--fs-sm); }
.visit__actions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-2); margin-block-start:var(--s-3); }
.visit__actions .btn{ padding-inline:var(--s-2); }
.visit__actions svg{ width:18px; height:18px; }
@media (max-width:480px){ .p-provider .grid-2, .visit__actions{ grid-template-columns:1fr; } }
.audit{ list-style:none; margin:0; padding:0; }
.audit li{ display:grid; grid-template-columns:1fr auto; gap:0 var(--s-3); padding-block:var(--s-3); border-block-end:1px solid var(--line); }
.audit li:last-child{ border:0; }
.audit time{ font-size:var(--fs-sm); color:var(--ink-2); }
.audit .muted{ grid-column:1/-1; font-size:var(--fs-sm); }

/* ---------- Admin ---------- */
.city-bars{ display:grid; gap:var(--s-3); }
.city-bar{ display:grid; grid-template-columns:6rem 1fr 2rem; gap:var(--s-3); align-items:center; }
.city-bar .num{ text-align:end; font-weight:var(--fw-semi); }
.kanban{ display:grid; grid-auto-flow:column; grid-auto-columns:14rem; gap:var(--s-3); overflow-x:auto; padding-block-end:var(--s-3); }
.kanban__col{ background:var(--paper-3); border-radius:var(--r-3); padding:var(--s-3); display:grid; gap:var(--s-2); align-content:start; min-height:12rem; }
.kanban__h{ display:flex; justify-content:space-between; gap:var(--s-2); font-size:var(--fs-sm); margin:0 0 var(--s-1); }
.kanban__card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-2); padding:var(--s-2) var(--s-3); display:grid; gap:2px; }
.cal{ display:grid; gap:var(--s-3); }
@media (min-width:768px){ .cal{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .cal{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pmap{ position:relative; height:20rem; border-radius:var(--r-3); overflow:hidden;
  background-color:var(--navy-2); background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size:32px 32px; }
.pmap__dot,.pmap__prov{ display:inline-block; inline-size:14px; block-size:14px; border:2px solid #fff; vertical-align:middle; }
.pmap .pmap__dot,.pmap .pmap__prov{ position:absolute; transform:translate(-50%,-50%); }
.pmap__dot{ border-radius:50%; box-shadow:0 0 0 1px var(--ink-2); }
.pmap__dot--done{ background:var(--route); } .pmap__dot--assigned{ background:var(--brand); } .pmap__dot--waiting{ background:#E0A100; }
.pmap__prov{ background:#fff; box-shadow:0 0 0 1px var(--navy-2); transform:rotate(45deg); }
.pmap .pmap__prov{ transform:translate(-50%,-50%) rotate(45deg); }
.pmap__legend{ list-style:none; padding:0; margin:var(--s-4) 0 0; display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); font-size:var(--fs-sm); }
.pmap__legend li{ display:flex; align-items:center; gap:var(--s-2); }

/* ---------- Legal ---------- */
.legal__intro{ margin-block-end:var(--s-5); }
.legal__intro p:first-child{ font-size:var(--fs-lg); }
.legal__date{ margin:0; }
.legal__sections{ display:grid; gap:var(--s-3); margin-block-end:var(--s-5); }
.disclosure{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--sh-1); }
.disclosure summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:60px; padding:var(--s-2) var(--s-5); cursor:pointer; font-weight:var(--fw-semi); color:var(--navy-2); list-style:none; }
.disclosure summary::-webkit-details-marker{ display:none; }
.disclosure__n{ color:var(--sky-press); }
.chev{ flex:none; inline-size:11px; block-size:11px; border-right:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(45deg); margin-block-start:-5px; transition:transform var(--t-base); }
.disclosure[open] .chev{ transform:rotate(-135deg); margin-block-start:5px; }
.disclosure__body{ padding:0 var(--s-5) var(--s-5); border-block-start:1px solid var(--line); padding-block-start:var(--s-4); }
.disclosure__body p:last-child{ margin-block-end:0; }
.disclosure__body p + .bullets{ margin-block-start:var(--s-3); }

/* ---------- 404 ---------- */


.reg-card[open] .chev{ transform:rotate(-135deg); margin-block-start:5px; }
.order-row__code{ color:var(--brand); font-weight:var(--fw-semi); }
.idcard .idcard__body dl{ font-size:var(--fs-base); }

/* ---------- Email-code login ---------- */
.login-box{ max-width:560px; margin-inline:auto; }
.code-input{ font-size:1.6rem; letter-spacing:.5em; text-align:center!important; font-weight:600; }
.login-alt{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-2); margin-block-start:var(--s-3); }
.login-msg:not(:empty){ margin-block-start:var(--s-4); }
.api-error .request-id{ display:block; margin-block-start:var(--s-1); }

/* ---------- Staff header ---------- */
.site-header--staff .site-header__in{ gap:var(--s-3); }
.staff-who{ margin-inline-start:auto; color:#fff; display:flex; flex-direction:column; align-items:flex-end; line-height:1.35; font-size:var(--fs-sm); min-width:0; }
.staff-who > span{ display:flex; flex-direction:column; align-items:flex-end; }
.staff-who strong{ font-weight:var(--fw-semi); }
#staff-logout{ white-space:nowrap; flex:none; }
.staff-who__name{ color:#D6DDF5; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:420px){ .staff-who__name{ display:none; } .staff-who{ font-size:var(--fs-xs); } #staff-logout{ padding-inline:var(--s-3); } }

/* ---------- Ops consoles (admin / supervisor / efadah) ---------- */
.filters-form .filters-grid{ display:grid; gap:0 var(--s-4); grid-template-columns:1fr; }
@media (min-width:640px){ .filters-form .filters-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .filters-form .filters-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.filters{ align-items:flex-end; }
.filters .field{ min-width:220px; }
.ops-grid{ display:grid; gap:var(--s-5); align-items:start; }
@media (min-width:1100px){ .ops-grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); } .ops-detail{ position:sticky; top:var(--s-5); } }
.ops-action{ margin-block-start:var(--s-5); padding-block-start:var(--s-5); border-block-start:1px solid var(--line); }
.ops-action h3{ color:var(--navy-2); font-size:var(--fs-base); }
.admin-row,.queue-row{ display:grid; gap:var(--s-1); width:100%; text-align:start; font:inherit; color:inherit; cursor:pointer; background:var(--paper); }
.admin-row__name{ font-weight:var(--fw-semi); color:var(--navy-2); }
.queue-row{ grid-template-columns:auto 1fr auto auto; align-items:center; gap:var(--s-3); }
@media (max-width:640px){ .queue-row{ grid-template-columns:1fr auto; } }
.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.data-table th,.data-table td{ padding:var(--s-3); text-align:start; border-block-end:1px solid var(--line); white-space:nowrap; }
.data-table th{ background:var(--paper-2); color:var(--navy-2); font-weight:var(--fw-semi); }
.area-builder{ border:1px solid var(--line); border-radius:var(--r-2); padding:var(--s-4); margin:var(--s-4) 0 0; }
.area-builder legend{ padding-inline:var(--s-2); font-weight:var(--fw-semi); color:var(--navy-2); }
.area-list{ list-style:none; padding:0; margin:var(--s-3) 0 0; display:grid; gap:var(--s-2); }
.area-list li{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); padding:var(--s-2) var(--s-3); background:var(--paper-2); border-radius:var(--r-1); }
.pr-list{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s-2); }
.pr-list li{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); align-items:center; padding:var(--s-3) var(--s-4); background:var(--paper-2); border-radius:var(--r-2); }
@media (min-width:1100px){ .ops-grid .filters-form .filters-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- Service facts strip (no unprovable numbers) ---------- */
.facts{ grid-template-columns:1fr; }
@media (min-width:640px){ .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .facts{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.facts li{ justify-content:flex-start; padding-inline:var(--s-3); }
.facts .fact{ color:var(--navy-2)!important; font-weight:var(--fw-semi); line-height:1.5; }
@media (max-width:767px){ .facts li{ padding-inline-start:var(--s-3); } }
.hero__status{ margin:var(--s-4) 0 0; padding:var(--s-3) var(--s-4); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); border-radius:var(--r-2); color:#fff; }
.price__covers{ flex-basis:100%; font-size:var(--fs-sm); color:#D6DDF5; }
.footer-operator{ text-align:center; color:var(--navy-2); font-weight:var(--fw-medium); font-size:var(--fs-sm); margin:0 auto var(--s-4); }
.footer-demo{ color:var(--warn); font-weight:var(--fw-medium); }
.booking-soon{ max-width:720px; margin-inline:auto; }

/* ---------- Demo banner (fixed at the top, not dismissible) ---------- */
.demo-banner{ position:sticky; top:0; z-index:70; background:#FFF6E5; color:#3d2a00; border-block-end:2px solid #E0A100; }
.demo-banner__in{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4); padding-block:var(--s-2); }
.demo-banner__text{ margin:0; flex:1 1 420px; font-size:var(--fs-xs); line-height:1.6; }
.demo-banner__note{ display:block; font-weight:var(--fw-semi); }
.demo-banner__actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.demo-banner .btn-ghost-light{ color:var(--navy-2); border-color:var(--navy-2); background:#fff; }
.is-demo .site-header{ top:var(--demo-h, 0px); }
.is-demo .fab-wa{ display:none; }
@media (max-width:640px){ .demo-banner__text{ flex-basis:100%; } .demo-banner .btn{ min-height:44px; padding-inline:var(--s-3); } }
.demo-code{ font-size:var(--fs-lg); }
@media print{
  .is-demo::after{ content:"نموذج تجريبي — غير صالح للاستخدام الرسمي"; position:fixed; inset:40% 0 auto; text-align:center; font-size:48px; font-weight:700; color:rgba(179,38,30,.18); transform:rotate(-20deg); pointer-events:none; }
  .demo-banner,.tour-card,.site-header,.site-footer{ display:none!important; }
}

/* ---------- Demo landing ---------- */
.demo-values{ list-style:none; padding:0; margin:var(--s-5) 0 0; display:grid; gap:var(--s-3); }
@media (min-width:900px){ .demo-values{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.demo-values li{ display:grid; gap:var(--s-1); padding:var(--s-4); background:var(--sky-tint); border-radius:var(--r-2); }
.demo-values strong{ color:var(--navy-2); }
.role-grid{ display:grid; gap:var(--s-4); }
@media (min-width:640px){ .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .role-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.role-card{ display:grid; align-content:start; gap:var(--s-2); }
.role-card h3{ color:var(--navy-2); margin:0; }
.role-card__email{ color:var(--muted); margin:0; text-align:start; }

/* ---------- Guided tour ---------- */
.tour-card{ position:fixed; inset-inline:var(--s-4); bottom:calc(var(--s-4) + env(safe-area-inset-bottom)); z-index:80; max-width:560px; margin-inline:auto;
  background:var(--navy-2); color:#fff; border-radius:var(--r-3); box-shadow:var(--sh-3); padding:var(--s-4) var(--s-5); }
.tour-card__step{ margin:0; color:var(--sky); font-weight:var(--fw-semi); font-size:var(--fs-sm); }
.tour-card__title{ color:#fff; font-size:var(--fs-h3); margin:var(--s-1) 0 var(--s-2); }
.tour-card__body{ margin:0 0 var(--s-3); color:#E4E9FA; font-size:var(--fs-sm); line-height:1.7; }
.tour-card__actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.tour-card .btn-ghost{ color:#fff; }
.has-tour{ padding-bottom:240px; }
.tour-target{ outline:3px solid var(--sky)!important; outline-offset:4px; box-shadow:0 0 0 8px rgba(87,168,255,.25)!important; }

/* ---------- Report preview (illustrative, not an official document) ---------- */
.dlg--report{ width:min(720px, calc(100vw - 24px)); }
.report{ position:relative; padding:var(--s-6) var(--s-5) var(--s-5); overflow:hidden; }
.report__watermark{ position:absolute; inset:35% -10% auto; text-align:center; font-size:clamp(22px, 5vw, 40px); font-weight:700; color:rgba(179,38,30,.14); transform:rotate(-18deg); pointer-events:none; }
.report__tag{ margin:0 0 var(--s-2); color:var(--danger); font-weight:var(--fw-semi); }
.report h2{ color:var(--navy-2); }

/* ---------- Launch scope: options shown but not yet available («قريبًا») — plain text, no badge ---------- */
.tile__soon{ display:block; margin-block-start:2px; font-size:var(--fs-sm, .875rem); font-weight:var(--fw-medium); color:var(--ink-2); }
.tile--soon{ background:var(--paper-2); }

/* ---------- Service window table (booking) ---------- */
.service-hours{ width:100%; border-collapse:collapse; margin-block:var(--s-3) var(--s-2); }
.service-hours th, .service-hours td{ text-align:start; padding:var(--s-3) var(--s-4); border:1px solid var(--line); }
.service-hours th{ width:38%; background:var(--paper-2); font-weight:var(--fw-semi); color:var(--ink); }
.service-hours td{ color:var(--ink); }

/* ---------- Launch discount: list price struck through (plain text, no badge) ---------- */
.price__was{ font-size:var(--fs-h3); font-weight:var(--fw-medium); color:#D6DDF5; text-decoration-thickness:2px; }
.price-strip__was{ font-size:var(--fs-lg); color:var(--ink); text-decoration-thickness:2px; }
.fees .row-discount td{ color:var(--ink); }
.fees .row-vat td{ color:var(--ink); font-size:var(--fs-sm); }

/* ---------- /centres: approved centres (list + Leaflet map) ---------- */
.p-centres .shell{ padding-block:var(--s-6) var(--s-8); }
.centres-note{ margin-block-end:var(--s-4); }
.centres-tools{ display:grid; grid-template-columns:minmax(0,2fr) repeat(3, minmax(0,1fr)); gap:var(--s-4); align-items:end; }
.centres-tools .field{ margin:0; }
.centres-count{ margin:var(--s-4) 0 var(--s-3); font-weight:var(--fw-semi); color:var(--ink); }
.centres-tabs{ display:none; border-bottom:1px solid var(--line); margin-block-end:var(--s-3); }
.centres-tabs button{ min-height:44px; padding:0 var(--s-5); background:none; border:0; border-bottom:3px solid transparent; font:inherit; font-weight:var(--fw-semi); color:var(--ink); cursor:pointer; }
.centres-tabs button[aria-selected="true"]{ border-bottom-color:var(--brand); color:var(--navy-2); }
.centres-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:var(--s-5); align-items:start; }
.centres-list-wrap{ max-height:72vh; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-3); background:var(--paper); }
.centres-list{ list-style:none; margin:0; padding:0; }
.centre{ padding:var(--s-4); border-bottom:1px solid var(--line); }
.centre:last-child{ border-bottom:0; }
.centre__name{ margin:0 0 var(--s-1); font-size:var(--fs-base); font-weight:var(--fw-semi); color:var(--ink); line-height:1.5; }
.centre__meta{ margin:0 0 var(--s-3); font-size:var(--fs-sm); color:var(--ink); }
.centre__actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.centre__actions .btn{ min-height:44px; }
.centre--empty{ color:var(--ink); }
.centres-map-wrap{ position:sticky; top:var(--s-4); }
.centres-map{ height:72vh; min-height:420px; border-radius:var(--r-3); border:1px solid var(--line); overflow:hidden; background:var(--paper-2); }
.centres-source{ margin-block-start:var(--s-4); color:var(--ink); }
.centre-pop{ direction:rtl; text-align:right; font-family:inherit; display:grid; gap:4px; min-width:180px; }
.centre-pop__approx{ margin:0; color:#8A4B00; font-weight:var(--fw-semi); }
.centres-map .leaflet-container{ font-family:inherit; }
@media (max-width: 899px){
  .centres-tools{ grid-template-columns:minmax(0,1fr); }
  .centres-tabs{ display:flex; }
  .centres-split{ grid-template-columns:minmax(0,1fr); }
  .centres-split[data-view="list"] .centres-map-wrap{ display:none; }
  .centres-split[data-view="map"] .centres-list-wrap{ display:none; }
  .centres-list-wrap{ max-height:none; }
  .centres-map-wrap{ position:static; }
  .centres-map{ height:70vh; min-height:360px; }
}
.ops-links{ margin:var(--s-3) 0 var(--s-4); }
.ops-links a{ display:inline-flex; align-items:center; min-height:44px; font-weight:var(--fw-semi); }

/* ---------- Header: third action «المراكز المعتمدة» (short labels on phones; never a hamburger) ---------- */
.header-actions .lbl-short{ display:none; }
.btn-centres{ gap:6px; }
.btn-centres .btn__icon{ width:18px; height:18px; }
@media (max-width:599px){
  .site-header__in{ gap:var(--s-2); }
  .header-actions{ gap:6px; }
  .header-actions .btn{ padding-inline:9px; white-space:nowrap; font-size:var(--fs-xs); }
  /* three buttons (SHOW_TRACK) → short «المراكز»; with two buttons the full name fits */
  .header-actions:has(.btn-track) .btn-centres .lbl-full{ display:none; }
  .header-actions:has(.btn-track) .btn-centres .lbl-short{ display:inline; }
  .btn-centres .btn__icon{ display:none; }
  .site-header .logo img{ height:30px; }
}
@media (max-width:374px){
  .header-actions{ gap:4px; }
  .header-actions .btn{ padding-inline:8px; }
  .btn-track .lbl-full{ display:none; }
  .btn-track .lbl-short{ display:inline; }
  .btn-centres .lbl-full{ display:none; }
  .btn-centres .lbl-short{ display:inline; }
  .site-header .logo{ padding:4px 6px; }
  .site-header .logo img{ height:26px; }
}

/* /centres — «استخدم موقعي» (client-side geolocation) */
.centres-locate{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4); margin-block-start:var(--s-4); }
.centres-locate .btn{ min-height:44px; gap:8px; }
.centres-locate .btn__icon{ width:20px; height:20px; }
.centres-locate__note{ margin:0; color:var(--ink); }
.centres-locate__msg{ flex-basis:100%; margin:0; }
.centre__nearest{ margin:0 0 var(--s-1); font-size:var(--fs-sm); font-weight:var(--fw-bold); color:#1A73E8; }
.centre__dist{ margin:0 0 var(--s-3); font-weight:var(--fw-semi); color:var(--ink); }
.centre-pop__dist{ margin:0; font-weight:var(--fw-semi); }
.map-locate{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px; background:#fff; color:#13254B; border:2px solid rgba(0,0,0,.2); border-radius:8px; font:inherit; font-weight:600; cursor:pointer; direction:rtl; }
.map-locate:hover{ background:#F4F5F9; }
.map-locate .btn__icon{ width:18px; height:18px; }
.leaflet-tooltip.user-here{ font-family:inherit; font-weight:700; color:#1A73E8; direction:rtl; }
@media (max-width: 599px){ .centres-tools{ grid-template-columns:minmax(0,1fr); } }
@media (min-width: 600px) and (max-width: 899px){ .centres-tools{ grid-template-columns:repeat(3, minmax(0,1fr)); } .centres-tools .field:first-child{ grid-column:1 / -1; } }

/* ---------- /request: notify-me waitlist ---------- */
.p-request .shell{ padding-block:var(--s-6) var(--s-8); }
.waitlist__lead{ font-weight:var(--fw-semi); color:var(--ink); }
.waitlist__sub{ color:var(--ink); }
.waitlist .btn{ min-height:48px; }
.waitlist__success{ font-weight:var(--fw-semi); }

/* /request — confirmation after joining the waitlist (Turki's design 29/10/2026) */
.waitlist__done{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s-4); outline:none; }
.waitlist__done-icon{ display:inline-flex; align-items:center; justify-content:center; width:120px; height:120px; border-radius:50%; background:#E6F4EC; }
.waitlist__done-title{ margin:var(--s-2) 0 0; font-size:clamp(1.6rem, 5vw, 2.1rem); font-weight:800; color:var(--navy, #13254B); line-height:1.35; }
.waitlist__done-title .accent{ color:var(--brand, #1E5BFF); }
.waitlist__done-sub{ margin:0; font-size:clamp(1.2rem, 3.6vw, 1.45rem); font-weight:800; color:#0F8A4F; }
.waitlist__done-text{ margin:0; font-size:1.0625rem; line-height:1.9; color:var(--ink); max-width:34em; }
.waitlist__stay{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s-2); align-self:stretch; margin-block-start:var(--s-2);
  padding:var(--s-5) var(--s-4); background:#E9F6EF; border:1px solid #CFEBDB; border-radius:20px; }
.waitlist__bell{ display:inline-flex; color:#0F8A4F; }
.waitlist__stay-title{ margin:0; font-size:1.2rem; font-weight:800; color:#0F8A4F; }
.waitlist__stay-text{ margin:0; font-size:1rem; line-height:1.7; color:var(--ink); }

/* Home: «المراكز المعتمدة» panel embedded on the landing page (same module as /centres) */
.home-centres .centres-embed .centres-list-wrap{ max-height:60vh; }
.home-centres .centres-embed .centres-map{ height:60vh; min-height:360px; }
.home-centres__more{ margin:var(--s-5) 0 0; text-align:center; }
@media (max-width:899px){ .home-centres .centres-embed .centres-list-wrap{ max-height:70vh; overflow-y:auto; } }

/* «المراكز المعتمدة» links scroll smoothly to the home panel, clear of the sticky header */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
#centres-home{ scroll-margin-top:calc(var(--header-h) + 12px); }