/* ==========================================================================
   جوّك — هوية «الدعوة» · الإصدار الرابع (JAWWAK v4)
   Public site: الرئيسية (/) · صفحة الحجز (/book/) · انضم كمزود (/join/)

   Palette + type straight from the v4 delivery (08-Developer/brand-tokens.css):
   باذنجاني #462B43 · ليلكي #B9AAC4 · خوخي #E7C5AC · عاجي #FAF8F2, set in
   IBM Plex Sans Arabic with Inter carrying the Latin. (The brand book's
   typography page says Noto Sans Arabic; Plex is a deliberate owner
   decision, 2026-09-21, for a more formal register. Nothing else moved.)

   The Diriyah build this replaces was dark-first; v4 is light-first, so every
   surface/ink pair below is inverted. The ink and accent channels are exposed
   as bare RGB triples so the plum bands at the foot of this file can flip the
   whole cascade in one place instead of restating every rule.

   The LAYOUT is untouched — the handoff's type scale, radii, alphas and
   animation timings are still FINAL. Do not "tidy" the numbers.

   Do NOT put brand-kit edits here — brand/jawwak.css carries the kit, and
   brand/home.css still dresses the pages this file does not cover
   (/service/*, /دليل/*, /terms/, /privacy/, /booking/confirmed/).
   ========================================================================== */

:root{
  /* Brand constants — never re-mix these four. */
  --jd-plum:#462B43;
  --jd-lilac:#B9AAC4;
  --jd-peach:#E7C5AC;
  --jd-ivory-c:#FAF8F2;

  /* Ink + accent channels. Bare triples so rgba() can dial an alpha, and so a
     plum band can re-point them once and take every nested rule with it. */
  --jd-ink-rgb:38,30,37;      /* #261E25 */
  --jd-acc-rgb:70,43,67;      /* #462B43 */
  --jd-veil-rgb:70,43,67;     /* scrims laid over photography */

  --jd-bg:#FAF8F2;          /* page background */
  --jd-panel:#FFFFFF;       /* cards, sections */
  --jd-deep:#462B43;        /* plum bands, footer */
  --jd-raised:#F6EFE9;      /* highlighted / selected panels */
  --jd-field:#FFFFFF;       /* inputs, segments, slots, pay tiles */
  --jd-gold:#462B43;        /* primary accent, CTAs, selection borders */
  --jd-gold-light:#5E3A5A;  /* hover, prices, labels */
  --jd-ivory:#462B43;       /* headings */
  --jd-sand:#261E25;        /* body text (usually at .65–.92 alpha) */

  /* .65 is the AA floor for the ink channel on --jd-bg — never go lighter. */
  --jd-line:rgba(var(--jd-ink-rgb),.14);
  --jd-line-08:rgba(var(--jd-ink-rgb),.08);
  --jd-line-10:rgba(var(--jd-ink-rgb),.1);
  --jd-line-12:rgba(var(--jd-ink-rgb),.12);
  --jd-line-16:rgba(var(--jd-ink-rgb),.16);
  --jd-line-20:rgba(var(--jd-ink-rgb),.2);
  --jd-gold-line:rgba(var(--jd-acc-rgb),.34);
  --jd-err:#A8442F;
  --jd-err-text:#A8442F;
  --jd-err-bg:rgba(168,68,47,.1);
  /* One family carries both roles: Inter is listed first and has no Arabic
     glyphs, so Latin renders in Inter and Arabic falls through to Noto. */
  /* Signature artwork. Re-pointed to the reverse cuts inside a plum band. */
  --jd-logo-lockup:url("/brand/logo/horizontal-color.svg");
  --jd-logo-symbol:url("/brand/logo/symbol-color.svg");
  --jd-logo-word:url("/brand/logo/wordmark-color.svg");

  --jd-display:Inter,"IBM Plex Sans Arabic",system-ui,sans-serif;   /* headings, numerals, prices */
  --jd-ui:Inter,"IBM Plex Sans Arabic",system-ui,sans-serif;        /* body / UI */
}

*{box-sizing:border-box}

/* The modals, the promo strip and the discount row are toggled with the `hidden`
   attribute. Several of them carry a `display` of their own, which would otherwise
   beat the UA's `[hidden]{display:none}` and leave them permanently on screen. */
[hidden]{display:none !important}

html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--jd-bg)}

body{
  font-family:var(--jd-ui);
  color:var(--jd-sand);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--jd-sand);text-decoration:none}
a:hover{color:var(--jd-gold-light)}
::selection{background:var(--jd-gold);color:var(--jd-bg)}
img{max-width:100%}
input,textarea,button,select{font-family:var(--jd-ui)}
input::placeholder,textarea::placeholder{color:rgba(var(--jd-ink-rgb),.65)}

.jd-page{
  direction:rtl;
  background:var(--jd-bg);
  color:var(--jd-sand);
  min-height:100vh;
  overflow-x:clip;
}

.jd-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes jd-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes jd-kb{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes jd-marquee{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes jd-spin{to{transform:rotate(360deg)}}
@keyframes jd-eq{0%,100%{height:4px}50%{height:14px}}
@keyframes jd-progress{from{width:0}to{width:100%}}
@keyframes jd-heart{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:.9}100%{transform:translateY(-110px) scale(1.2);opacity:0}}
@keyframes jd-pulse{0%,100%{box-shadow:0 14px 34px rgba(var(--jd-acc-rgb),.28)}50%{box-shadow:0 14px 44px rgba(var(--jd-acc-rgb),.6)}}
@keyframes jd-fade{from{opacity:0}to{opacity:1}}
@keyframes jd-pop{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes jd-draw{to{stroke-dashoffset:0}}
@keyframes jd-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */
.jd-wrap{max-width:1200px;margin:0 auto;padding-inline:28px;box-sizing:content-box}
.jd-section{padding-block:clamp(72px,9vw,120px)}
.jd-section--tight{padding-block:clamp(72px,9vw,120px) 24px}
.jd-section--top{padding-block:clamp(72px,9vw,120px) 0}
.jd-section--bottom{padding-block:0 clamp(72px,9vw,120px)}

/* Signature fold strip — the envelope flap from the symbol, repeated. Same
   element and height as the crenellation it replaces, but a wider base, so it
   reads as a folded paper edge rather than a mud-city parapet. Colour per
   placement via --jd-tooth. */
.jd-teeth{
  height:14px;
  background:conic-gradient(from -63deg at 50% 100%,transparent 0 27deg,var(--jd-tooth,var(--jd-panel)) 27deg 153deg,transparent 153deg 360deg);
  background-size:40px 14px;
  background-repeat:repeat-x;
}
.jd-teeth--sm{height:8px;background-size:23px 8px}
.jd-teeth--md{height:10px;background-size:29px 10px}

.jd-eyebrow{
  display:flex;align-items:center;gap:12px;
  color:var(--jd-gold-light);font-size:13px;font-weight:600;letter-spacing:2px;
}
.jd-eyebrow--center{display:inline-flex}
.jd-eyebrow::before,.jd-eyebrow--center::after{content:"";width:34px;height:1px;background:var(--jd-gold);flex-shrink:0}
.jd-eyebrow--plain::before{content:none}

.jd-diamond{width:6px;height:6px;background:var(--jd-gold);transform:rotate(45deg);display:inline-block;flex-shrink:0}

/* The signature is artwork, never type: «جوّك» is a drawn glyph and JAWWAK a
   custom serif, so both come off the delivered SVG (02-Logos/SVG) and neither
   is rebuilt from Noto or Inter. The markup keeps its two spans — the mark is
   folded into the lockup and the word stays as the accessible name. Sized to
   the 200px suggested minimum for the horizontal signature; below 760px the
   header drops to the symbol, which has a 24px minimum instead. */
.jd-logo{
  display:block;height:63px;aspect-ratio:850 / 270;
  background:var(--jd-logo-lockup) center/contain no-repeat;
}
.jd-logo__mark{display:none}
.jd-logo__word{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.jd-logo--sm,.jd-logo--xs{height:58px}

/* Buttons ------------------------------------------------------------------ */
.jd-btn{
  display:inline-block;border:none;cursor:pointer;border-radius:3px;
  font-family:var(--jd-ui);text-align:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.jd-btn--gold{background:var(--jd-gold);color:var(--jd-bg);font-weight:700;font-size:15.5px;padding:15px 38px;letter-spacing:.3px}
.jd-btn--gold:hover{background:var(--jd-gold-light);color:var(--jd-bg)}
.jd-btn--outline{
  background:transparent;border:1px solid rgba(var(--jd-ink-rgb),.4);color:var(--jd-ivory);
  font-weight:500;font-size:15.5px;padding:15px 32px;
}
.jd-btn--outline:hover{border-color:var(--jd-ivory);color:var(--jd-ivory)}
.jd-btn--gold-outline{
  background:transparent;border:1px solid rgba(var(--jd-acc-rgb),.75);color:var(--jd-gold-light);
  font-weight:600;font-size:14px;padding:11px 26px;letter-spacing:.3px;
}
.jd-btn--gold-outline:hover{background:var(--jd-gold);color:var(--jd-bg);border-color:var(--jd-gold)}
.jd-btn--lg{font-size:16px;padding:16px 44px}
.jd-btn--sm{font-size:14.5px;padding:13px 30px;letter-spacing:normal}
.jd-btn--sm.jd-btn--outline{padding:13px 26px}
.jd-pulse{box-shadow:0 14px 34px rgba(var(--jd-acc-rgb),.28);animation:jd-pulse 3.2s ease-in-out infinite}

/* --------------------------------------------------------------------------
   Header (landing) + inner-page header
   -------------------------------------------------------------------------- */
.jd-head{position:relative;z-index:5}
.jd-head__inner{display:flex;align-items:center;gap:30px;padding-block:22px}
.jd-nav{display:flex;flex-wrap:wrap;gap:28px;font-size:14px;font-weight:500;margin-inline-start:16px}
.jd-nav a{color:rgba(var(--jd-ink-rgb),.9)}
.jd-nav a:hover{color:var(--jd-gold-light)}
.jd-head__cta{margin-inline-start:auto}

.jd-subhead{border-bottom:1px solid var(--jd-line-10);background:var(--jd-bg)}
.jd-subhead__inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-block:20px}
.jd-subhead__slash{color:rgba(var(--jd-ink-rgb),.65)}
.jd-subhead__where{font-size:14px;font-weight:600;color:var(--jd-gold-light)}
.jd-subhead__back{
  margin-inline-start:auto;font-size:13.5px;font-weight:500;color:rgba(var(--jd-ink-rgb),.85);
  display:inline-flex;align-items:center;gap:8px;
}
.jd-subhead__back:hover{color:var(--jd-gold-light)}
.jd-subhead__back span{font-size:15px}
.jd-subhead__links{margin-inline-start:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.jd-subhead__links a{font-size:13.5px;font-weight:500;color:rgba(var(--jd-ink-rgb),.85)}
.jd-subhead__links a:hover{color:var(--jd-gold-light)}
.jd-subhead__links .jd-btn{font-size:13.5px;padding:10px 22px;letter-spacing:normal}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.jd-hero{
  position:relative;min-height:clamp(640px,96vh,880px);
  display:flex;flex-direction:column;overflow:hidden;
}
.jd-hero__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(720px 460px at 82% 8%,rgba(185,170,196,.42),transparent 70%),
    radial-gradient(600px 420px at 6% 92%,rgba(231,197,172,.5),transparent 72%);
}
.jd-hero__grid{
  position:relative;z-index:4;max-width:1200px;width:100%;margin:auto;box-sizing:border-box;
  padding:clamp(36px,5vw,72px) 28px clamp(76px,9vw,110px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(36px,5vw,72px);align-items:center;
}
.jd-hero__copy{animation:jd-rise .8s ease both;max-width:640px}
.jd-hero__copy .jd-eyebrow{margin-bottom:20px}
.jd-h1{
  font-family:var(--jd-display);font-weight:700;font-size:clamp(40px,4.6vw,62px);
  line-height:1.22;margin:0 0 18px;color:var(--jd-ivory);text-wrap:balance;
}
.jd-hero__lede{
  font-size:clamp(16px,1.5vw,18px);line-height:1.95;font-weight:400;
  color:rgba(var(--jd-ink-rgb),.92);margin:0 0 34px;max-width:50ch;text-wrap:pretty;
}
.jd-hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:26px}
.jd-hero__avail{font-size:13px;font-weight:400;color:rgba(var(--jd-ink-rgb),.65);display:flex;align-items:center;gap:10px}

.jd-hero__art{
  position:relative;justify-self:center;width:min(100%,460px);
  margin-bottom:26px;animation:jd-rise .8s .15s ease both;
}
.jd-frame{background:var(--jd-panel);border:1px solid var(--jd-gold-line);border-radius:4px;padding:10px}
.jd-frame .jd-teeth--sm{--jd-tooth:rgba(var(--jd-acc-rgb),.55);margin-bottom:10px}
.jd-frame__img{aspect-ratio:4 / 4.4;overflow:hidden;border-radius:2px}
.jd-frame__img img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;display:block;
  animation:jd-kb 38s ease-in-out infinite alternate;transform-origin:50% 45%;
}
.jd-frame__cap{
  display:flex;align-items:center;gap:8px;padding:12px 4px 4px;
  font-size:12.5px;color:rgba(var(--jd-ink-rgb),.75);font-weight:400;
}
.jd-frame__cap span{color:var(--jd-gold-light)}
.jd-hero__inset{
  position:absolute;bottom:-24px;inset-inline-end:-16px;width:42%;
  background:var(--jd-panel);border:1px solid var(--jd-gold-line);border-radius:4px;padding:7px;
  box-shadow:0 24px 50px rgba(var(--jd-veil-rgb),.113);
}
.jd-hero__inset span{display:block;aspect-ratio:1 / 1;overflow:hidden;border-radius:2px}
.jd-hero__inset img{width:100%;height:100%;object-fit:cover;display:block}
.jd-hero__tag{
  position:absolute;top:-20px;inset-inline-start:-14px;background:var(--jd-gold);color:var(--jd-bg);
  transform:rotate(-5deg);padding:12px 18px;border-radius:3px;text-align:center;
  box-shadow:0 14px 30px rgba(var(--jd-veil-rgb),.087);
}
.jd-hero__tag b{display:block;font-size:11px;font-weight:700}
.jd-hero__tag strong{display:block;font-family:var(--jd-display);font-weight:700;font-size:22px;line-height:1.3;margin-top:3px}
.jd-hero__teeth{position:absolute;bottom:-1px;left:0;right:0;z-index:6;--jd-tooth:var(--jd-panel)}

/* --------------------------------------------------------------------------
   Marquee band
   -------------------------------------------------------------------------- */
.jd-marquee{
  background:var(--jd-deep);overflow:hidden;padding:13px 0;
  border-top:1px solid rgba(var(--jd-acc-rgb),.22);border-bottom:1px solid rgba(var(--jd-acc-rgb),.22);
}
.jd-marquee__track{display:flex;width:max-content;animation:jd-marquee 38s linear infinite}
.jd-marquee__row{
  display:flex;align-items:center;gap:38px;padding-inline-end:38px;white-space:nowrap;
  font-family:var(--jd-display);font-size:15px;font-weight:600;letter-spacing:1px;
  color:rgba(var(--jd-ink-rgb),.7);
}
.jd-marquee__row i{color:var(--jd-gold);font-size:10px;font-style:normal}

/* --------------------------------------------------------------------------
   Quote + stats
   -------------------------------------------------------------------------- */
.jd-quote{background:var(--jd-panel);border-bottom:1px solid var(--jd-line-10)}
.jd-quote__inner{max-width:900px;margin:0 auto;padding:clamp(60px,8vw,96px) 28px clamp(48px,6vw,72px);text-align:center;box-sizing:content-box}
.jd-quote__dots{color:var(--jd-gold);font-size:15px;margin-bottom:20px;letter-spacing:6px}
.jd-quote__text{
  font-family:var(--jd-display);font-weight:500;font-size:clamp(23px,2.8vw,32px);
  line-height:1.8;margin:0;color:var(--jd-ivory);text-wrap:balance;
}
.jd-stats{
  max-width:1100px;margin:0 auto;padding:0 28px clamp(52px,6vw,76px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px 64px;text-align:center;;
  box-sizing:content-box;
}
.jd-stat{min-width:140px}
.jd-stat__n{font-family:var(--jd-display);font-weight:700;font-size:40px;color:var(--jd-gold-light);line-height:1.3}
.jd-stat__l{font-size:12.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:500;letter-spacing:1px}

/* --------------------------------------------------------------------------
   Section headers (split + centred)
   -------------------------------------------------------------------------- */
.jd-shead{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.jd-shead .jd-eyebrow{margin-bottom:14px}
.jd-shead__note{margin:0;color:rgba(var(--jd-ink-rgb),.65);font-size:14.5px;font-weight:300;max-width:40ch;line-height:1.9}
.jd-h2{
  font-family:var(--jd-display);font-weight:700;font-size:clamp(34px,4.4vw,54px);
  margin:0;line-height:1.3;color:var(--jd-ivory);
}
.jd-chead{text-align:center;margin-bottom:56px}
.jd-chead .jd-eyebrow{margin-bottom:14px}

/* --------------------------------------------------------------------------
   الأجواء — vibe cards
   -------------------------------------------------------------------------- */
.jd-vibes{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:18px}
.jd-vibe{
  background:var(--jd-panel);border:1px solid var(--jd-line);border-radius:4px;padding:10px;
  display:block;color:var(--jd-sand);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
a.jd-vibe:hover{transform:translateY(-6px);border-color:rgba(var(--jd-acc-rgb),.7);box-shadow:0 26px 50px rgba(var(--jd-veil-rgb),.1);color:var(--jd-sand)}
.jd-vibe--event{border-color:var(--jd-gold-line)}
.jd-vibe__img{aspect-ratio:4 / 4.7;overflow:hidden;border-radius:2px;position:relative}
.jd-vibe__img img{width:100%;height:100%;object-fit:cover;display:block}
.jd-vibe__img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(var(--jd-ink-rgb),.18)}
/* Sits on a photo, so it carries its own plum/peach pair rather than the
   page's ink — the image underneath is not a surface we control. */
.jd-badge{
  position:absolute;top:10px;inset-inline-start:10px;z-index:1;
  background:rgba(var(--jd-veil-rgb),.88);color:var(--jd-peach);
  font-size:10.5px;font-weight:700;letter-spacing:1.5px;padding:5px 12px;border-radius:2px;
  border:1px solid rgba(231,197,172,.45);pointer-events:none;
}
.jd-vibe__body{padding:18px 12px 14px}
.jd-h3{font-family:var(--jd-display);font-weight:700;font-size:23px;margin:0 0 6px;line-height:1.3;color:var(--jd-ivory)}
.jd-vibe__desc{margin:0 0 16px;font-size:13px;line-height:1.85;color:rgba(var(--jd-ink-rgb),.65);font-weight:300}
.jd-vibe__foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--jd-line-12);padding-top:13px}
.jd-price{display:inline-flex;align-items:baseline;gap:5px}
.jd-price b{font-family:var(--jd-display);font-weight:700;font-size:21px;color:var(--jd-gold-light)}
.jd-price span{font-size:11px;font-weight:500;color:rgba(var(--jd-ink-rgb),.65)}
.jd-vibe__go{color:var(--jd-gold);font-size:13px;font-weight:600}
a.jd-vibe__go:hover{color:var(--jd-gold-light)}
.jd-note{text-align:center;margin:32px 0 0;font-size:13px;color:rgba(var(--jd-ink-rgb),.65);font-weight:300}
.jd-note a{color:var(--jd-gold-light);font-weight:600}

/* --------------------------------------------------------------------------
   الديرة × المدينة
   -------------------------------------------------------------------------- */
.jd-mix{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:stretch;
  background:var(--jd-panel);border:1px solid var(--jd-line);border-radius:6px;overflow:hidden;
}
.jd-mix__art{position:relative;min-height:340px}
.jd-mix__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jd-mix__art::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(var(--jd-veil-rgb),.5),transparent 45%)}
.jd-mix__copy{padding:clamp(30px,4.5vw,60px)}
.jd-mix__copy .jd-eyebrow{margin-bottom:14px}
.jd-mix__copy h2{font-family:var(--jd-display);font-weight:700;font-size:clamp(30px,3.6vw,46px);margin:0 0 14px;line-height:1.3;color:var(--jd-ivory)}
.jd-mix__copy p{margin:0 0 26px;font-size:14.5px;line-height:2;color:rgba(var(--jd-ink-rgb),.75);font-weight:300;max-width:48ch}
.jd-chips{display:flex;flex-wrap:wrap;gap:10px}
.jd-chip{
  border:1px solid rgba(var(--jd-acc-rgb),.45);color:var(--jd-gold-light);
  padding:7px 16px;border-radius:2px;font-size:12.5px;font-weight:600;
}

/* --------------------------------------------------------------------------
   تكتوك جوّك
   -------------------------------------------------------------------------- */
.jd-tt__follow{
  display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(var(--jd-acc-rgb),.6);
  color:var(--jd-gold-light);font-weight:600;font-size:14px;padding:12px 24px;border-radius:3px;
}
.jd-tt__follow:hover{background:var(--jd-gold);color:var(--jd-bg)}
.jd-tt__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px}
.jd-tok{
  position:relative;display:block;aspect-ratio:9 / 16;border-radius:6px;overflow:hidden;
  border:1px solid var(--jd-line-16);background:var(--jd-deep);color:var(--jd-ivory);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.jd-tok:hover{transform:translateY(-6px);border-color:rgba(var(--jd-acc-rgb),.7);box-shadow:0 26px 50px rgba(var(--jd-veil-rgb),.113);color:var(--jd-ivory)}
.jd-tok__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:jd-kb 26s ease-in-out infinite alternate}
.jd-tok__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--jd-veil-rgb),.5) 0%,transparent 26%,transparent 50%,rgba(var(--jd-veil-rgb),.92) 100%)}
/* وسم «صورة توضيحية» — يميّز الصورة التوضيحية عن توثيق تنفيذ حقيقي.
   محايد اللون عمداً: ليس تمييزاً ذهبياً يغري بقراءته كشارة جودة. */
.jd-tok__kind{
  position:absolute;top:12px;inset-inline-end:12px;background:rgba(var(--jd-veil-rgb),.86);
  border:1px solid var(--jd-line-20);color:rgba(var(--jd-ink-rgb),.7);
  font-size:10px;font-weight:600;letter-spacing:.4px;padding:5px 10px;border-radius:2px;
}
.jd-tok__tag{
  position:absolute;top:12px;inset-inline-start:12px;background:rgba(var(--jd-veil-rgb),.82);
  border:1px solid var(--jd-gold-line);color:var(--jd-gold-light);
  font-size:10.5px;font-weight:700;letter-spacing:1px;padding:5px 11px;border-radius:2px;
}
.jd-tok__views{
  position:absolute;top:12px;inset-inline-end:12px;background:rgba(var(--jd-veil-rgb),.82);
  color:rgba(var(--jd-ink-rgb),.92);font-size:11px;font-weight:600;padding:5px 10px;border-radius:2px;
}
.jd-tok__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(var(--jd-veil-rgb),.5);
  border:1px solid rgba(var(--jd-ink-rgb),.55);display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);
}
.jd-tok__play i{
  width:0;height:0;display:inline-block;margin-left:5px;font-style:normal;
  border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid var(--jd-ivory);
}
.jd-tok__heart{position:absolute;bottom:150px;opacity:0;pointer-events:none;animation:jd-heart 4.4s ease-in infinite}
.jd-tok__heart--1{inset-inline-end:17px;color:var(--jd-gold-light);font-size:13px;animation-delay:1.1s}
.jd-tok__heart--2{inset-inline-end:29px;color:var(--jd-gold);font-size:11px;animation-delay:2.5s}
.jd-tok__heart--3{inset-inline-end:23px;color:var(--jd-ivory);font-size:9px;animation-delay:3.6s}
.jd-tok__cap{position:absolute;bottom:12px;inset-inline-start:12px;inset-inline-end:12px;display:grid;gap:5px}
.jd-tok__at{font-size:12px;font-weight:700;color:var(--jd-ivory);text-align:end}
.jd-tok__text{font-size:12px;line-height:1.7;color:rgba(var(--jd-ink-rgb),.92);font-weight:400}
.jd-tok__sound{display:flex;align-items:center;gap:7px;margin-top:2px}
.jd-tok__disc{
  width:15px;height:15px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--jd-peach),var(--jd-plum),var(--jd-peach));border:1px solid rgba(var(--jd-ink-rgb),.4);
  animation:jd-spin 3.5s linear infinite;
}
.jd-tok__sound span{font-size:10px;color:rgba(var(--jd-ink-rgb),.75);font-weight:500}
.jd-tok__eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;margin-inline-start:auto}
.jd-tok__eq i{width:3px;background:var(--jd-gold-light);animation:jd-eq 1s ease-in-out infinite}
.jd-tok__eq i:nth-child(2){animation-delay:.18s}
.jd-tok__eq i:nth-child(3){animation-delay:.32s}
.jd-tok__bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(var(--jd-ink-rgb),.15)}
.jd-tok__bar i{display:block;height:100%;width:0;background:var(--jd-gold);animation:jd-progress var(--jd-dur,9s) linear infinite}

/* --------------------------------------------------------------------------
   كيف نشتغل / كيف تنضم — joined step columns
   -------------------------------------------------------------------------- */
.jd-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:0;
  border:1px solid var(--jd-line);border-radius:4px;overflow:hidden;
}
.jd-step{padding:38px 30px;border-inline-end:1px solid var(--jd-line);background:var(--jd-panel)}
.jd-step:last-child{border-inline-end:none;background:var(--jd-raised)}
.jd-step__n{font-family:var(--jd-display);font-weight:700;font-size:52px;color:var(--jd-gold);line-height:1;margin-bottom:16px}
.jd-step:last-child .jd-step__n{color:var(--jd-gold-light)}
.jd-step h3{font-family:var(--jd-display);font-weight:700;font-size:24px;margin:0 0 8px;color:var(--jd-ivory)}
.jd-step p{margin:0;font-size:13.5px;line-height:2;color:rgba(var(--jd-ink-rgb),.65);font-weight:300}
.jd-step:last-child p{color:rgba(var(--jd-ink-rgb),.75)}

/* --------------------------------------------------------------------------
   انضم كمزود (landing band)
   -------------------------------------------------------------------------- */
.jd-prov{
  background:var(--jd-raised);border:1px solid rgba(var(--jd-acc-rgb),.4);border-radius:6px;
  padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,4vw,56px);align-items:center;position:relative;overflow:hidden;
}
.jd-prov__teeth{position:absolute;top:0;left:0;right:0;--jd-tooth:rgba(var(--jd-acc-rgb),.35)}
.jd-prov__copy .jd-eyebrow{margin-bottom:14px}
.jd-prov__copy h2{font-family:var(--jd-display);font-weight:700;font-size:clamp(28px,3.4vw,44px);margin:0 0 14px;line-height:1.3;color:var(--jd-ivory)}
.jd-prov__copy p{margin:0 0 24px;font-size:14.5px;line-height:2;color:rgba(var(--jd-ink-rgb),.75);font-weight:300;max-width:50ch}
.jd-bullets{display:grid;gap:12px}
.jd-bullets div{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(var(--jd-ink-rgb),.85);font-weight:400}
.jd-bullets .jd-diamond{width:7px;height:7px}
.jd-prov__box{text-align:center;border:1px dashed rgba(var(--jd-acc-rgb),.55);border-radius:4px;padding:clamp(26px,3vw,42px)}
.jd-prov__box b{display:block;font-family:var(--jd-display);font-weight:700;font-size:23px;color:var(--jd-ivory);margin-bottom:6px}
.jd-prov__box p{margin:0 0 22px;font-size:13px;color:rgba(var(--jd-ink-rgb),.65);font-weight:300}

/* --------------------------------------------------------------------------
   حساباتنا — social accounts
   -------------------------------------------------------------------------- */
.jd-social{background:var(--jd-raised);border-top:1px solid var(--jd-line-08);border-bottom:1px solid var(--jd-line-08)}
.jd-social__inner{max-width:1200px;margin:0 auto;padding:clamp(64px,8vw,100px) 28px;box-sizing:content-box}
.jd-social__head{text-align:center;margin-bottom:46px}
.jd-social__head .jd-eyebrow{margin-bottom:14px}
.jd-social__head h2{font-family:var(--jd-display);font-weight:700;font-size:clamp(30px,4vw,48px);margin:0 0 12px;line-height:1.3;color:var(--jd-ivory)}
.jd-social__head p{margin:0 auto;max-width:52ch;font-size:14.5px;line-height:2;color:rgba(var(--jd-ink-rgb),.65);font-weight:300}
.jd-social__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.jd-acc{
  background:var(--jd-panel);border:1px solid var(--jd-line);border-radius:4px;
  padding:28px 18px 24px;text-align:center;display:block;color:var(--jd-sand);
  transition:transform .25s ease,border-color .25s ease;
}
.jd-acc:hover{transform:translateY(-6px);border-color:rgba(var(--jd-acc-rgb),.7);color:var(--jd-sand)}
.jd-acc__ico{
  width:56px;height:56px;border:1px solid rgba(var(--jd-acc-rgb),.55);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--jd-gold-light);margin-bottom:14px;
}
.jd-acc__name{font-family:var(--jd-display);font-weight:700;font-size:21px;color:var(--jd-ivory)}
.jd-acc__at{font-size:12.5px;font-weight:600;color:var(--jd-gold-light);margin:4px 0 6px}
.jd-acc__meta{font-size:11.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:400}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.jd-cta{background:var(--jd-panel);border-top:1px solid var(--jd-line-10);position:relative;overflow:hidden}
.jd-cta__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(520px 300px at 18% 100%,rgba(231,197,172,.45),transparent 70%),
    radial-gradient(520px 300px at 82% 0%,rgba(185,170,196,.34),transparent 70%);
}
.jd-cta__inner{position:relative;max-width:860px;margin:0 auto;padding:clamp(80px,10vw,130px) 28px;text-align:center;box-sizing:content-box}
.jd-cta__teeth{height:10px;width:120px;margin:0 auto 26px;--jd-tooth:var(--jd-gold);background-size:20px 10px}
.jd-cta__inner h2{font-family:var(--jd-display);font-weight:700;font-size:clamp(38px,5.4vw,66px);margin:0 0 16px;line-height:1.3;color:var(--jd-ivory)}
.jd-cta__lede{margin:0 auto 38px;font-size:16px;line-height:2;color:rgba(var(--jd-ink-rgb),.8);max-width:44ch;font-weight:300}
.jd-cta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.jd-cta__row .jd-btn--outline{font-size:16px;padding:16px 36px}
.jd-cta__pay{margin-top:30px;font-size:12.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:400}

/* --------------------------------------------------------------------------
   Footer (landing) + slim footer (inner pages)
   -------------------------------------------------------------------------- */
.jd-foot{background:var(--jd-deep);padding:36px 28px}
.jd-foot__inner{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px 32px;flex-wrap:wrap;
  font-size:13px;color:rgba(var(--jd-ink-rgb),.65);
}
.jd-foot__tag{font-weight:300}
.jd-foot__links{margin-inline-start:auto;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.jd-foot__links a{color:rgba(var(--jd-ink-rgb),.65)}
.jd-foot__links a:hover{color:var(--jd-gold-light)}
.jd-foot__social{display:flex;gap:12px;align-items:center}
.jd-foot__social a{
  width:34px;height:34px;border:1px solid rgba(var(--jd-ink-rgb),.25);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--jd-ink-rgb),.75);
}
.jd-foot__social a:hover{border-color:var(--jd-gold);color:var(--jd-gold-light)}
.jd-foot__legal{
  width:100%;border-top:1px solid var(--jd-line-12);padding-top:16px;
  font-size:12px;color:rgba(var(--jd-ink-rgb),.65);font-weight:300;
}

.jd-slimfoot{background:var(--jd-deep);border-top:1px solid var(--jd-line-08);padding:26px 28px}
.jd-slimfoot__inner{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(var(--jd-ink-rgb),.65);
}
.jd-slimfoot__word{
  display:inline-block;width:64px;height:28px;
  background:var(--jd-logo-word) center/contain no-repeat;
  text-indent:-999em;overflow:hidden;white-space:nowrap;
}
.jd-slimfoot__c{font-weight:300}
.jd-slimfoot__links{margin-inline-start:auto;display:flex;gap:20px;flex-wrap:wrap}
.jd-slimfoot__links a{color:rgba(var(--jd-ink-rgb),.65)}
.jd-slimfoot__links a:hover{color:var(--jd-gold-light)}

/* Floating WhatsApp FAB — LTR-left on purpose (handoff). */
.jd-fab{
  position:fixed;bottom:22px;left:22px;z-index:60;width:54px;height:54px;border-radius:50%;
  background:var(--jd-gold);color:var(--jd-bg);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px rgba(var(--jd-veil-rgb),.113);animation:jd-pulse 3.2s ease-in-out infinite;
}
.jd-fab:hover{background:var(--jd-gold-light);color:var(--jd-bg)}

/* ==========================================================================
   صفحة الحجز — /book/
   ========================================================================== */
.jd-promo{background:var(--jd-gold);color:var(--jd-bg);text-align:center;padding:9px 20px;font-size:13px;font-weight:700;letter-spacing:.3px}

.jd-book{max-width:1200px;margin:0 auto;padding:clamp(34px,5vw,56px) 28px clamp(70px,8vw,100px);box-sizing:border-box}
.jd-book__intro{animation:jd-rise .7s ease both;margin-bottom:38px}
.jd-book__intro .jd-eyebrow{margin-bottom:12px}
.jd-book__intro h1{font-family:var(--jd-display);font-weight:700;font-size:clamp(34px,4.6vw,56px);line-height:1.3;margin:0 0 10px;color:var(--jd-ivory)}
.jd-book__intro p{margin:0;font-size:15px;font-weight:300;line-height:2;color:rgba(var(--jd-ink-rgb),.75);max-width:60ch}
.jd-prog{margin-top:22px;max-width:420px}
.jd-prog__row{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:rgba(var(--jd-ink-rgb),.65);margin-bottom:8px}
.jd-prog__row b{color:var(--jd-gold-light);font-weight:600}
.jd-prog__track{height:4px;background:var(--jd-line);border-radius:2px;overflow:hidden}
.jd-prog__fill{height:100%;background:linear-gradient(90deg,var(--jd-plum),var(--jd-lilac));border-radius:2px;transition:width .5s ease;width:25%}

.jd-book__cols{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
.jd-book__form{flex:1 1 560px;min-width:0;display:grid;gap:42px}
.jd-fstep{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.jd-fstep__n{font-family:var(--jd-display);font-weight:700;font-size:34px;color:var(--jd-gold);line-height:1}
.jd-fstep h2{font-family:var(--jd-display);font-weight:700;font-size:24px;margin:0;color:var(--jd-ivory)}
.jd-fstep h2 small{font-family:var(--jd-ui);font-size:13px;font-weight:400;color:rgba(var(--jd-ink-rgb),.65)}

/* ٠١ — vibe picker */
.jd-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.jd-pick__opt{
  text-align:start;cursor:pointer;padding:8px;border-radius:4px;color:var(--jd-sand);
  border:1px solid var(--jd-line-16);background:var(--jd-panel);position:relative;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.jd-pick__opt:hover{transform:translateY(-3px);border-color:rgba(var(--jd-acc-rgb),.8)}
.jd-pick__opt[aria-pressed="true"]{border-color:var(--jd-gold);background:var(--jd-raised)}
.jd-pick__img{display:block;aspect-ratio:4 / 3;overflow:hidden;border-radius:2px}
.jd-pick__img img{width:100%;height:100%;object-fit:cover;display:block}
.jd-pick__tick{
  position:absolute;top:14px;inset-inline-start:14px;width:24px;height:24px;
  background:var(--jd-gold);color:var(--jd-bg);display:none;
  align-items:center;justify-content:center;font-size:13px;font-weight:800;border-radius:2px;
}
.jd-pick__opt[aria-pressed="true"] .jd-pick__tick{display:inline-flex}
.jd-pick__body{display:block;padding:12px 6px 6px}
.jd-pick__name{display:block;font-family:var(--jd-display);font-weight:700;font-size:17.5px;color:var(--jd-ivory);line-height:1.4}
.jd-pick__price{display:flex;align-items:baseline;gap:4px;margin-top:3px}
.jd-pick__price b{font-family:var(--jd-display);font-weight:600;font-size:15px;color:var(--jd-gold-light)}
.jd-pick__price span{font-size:10.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:500}

/* ٠٢ — when & where */
.jd-when{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.jd-flabel{font-size:13px;font-weight:700;color:rgba(var(--jd-ink-rgb),.9);margin-bottom:9px}
.jd-flabel span{font-weight:400;color:rgba(var(--jd-ink-rgb),.65)}
.jd-seg{display:flex;gap:8px;flex-wrap:wrap}
.jd-seg__opt{
  cursor:pointer;padding:11px 20px;border-radius:3px;font-size:13.5px;font-weight:600;
  border:1px solid var(--jd-line-20);background:var(--jd-field);color:var(--jd-sand);transition:all .2s ease;
}
.jd-seg__opt:hover{border-color:var(--jd-gold)}
.jd-seg__opt[aria-pressed="true"]{border-color:var(--jd-gold);background:var(--jd-gold);color:var(--jd-bg)}

.jd-input{
  width:100%;box-sizing:border-box;background:var(--jd-field);border:1px solid var(--jd-line-20);
  color:var(--jd-ivory);padding:13px 15px;border-radius:3px;font-size:14px;outline:none;min-width:0;
}
.jd-input:focus{border-color:var(--jd-gold)}
.jd-input--date{padding:12px 14px;color-scheme:light}
.jd-input--ltr{direction:ltr;text-align:end}
.jd-input--bad{border-color:var(--jd-err)}
.jd-input--ok{border-color:var(--jd-gold)}
textarea.jd-input{resize:vertical;line-height:1.9}

.jd-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.jd-slot{
  cursor:pointer;padding:12px 10px;border-radius:3px;text-align:center;position:relative;
  border:1px solid var(--jd-line-20);background:var(--jd-field);color:var(--jd-sand);transition:all .2s ease;
}
.jd-slot:hover{border-color:var(--jd-gold)}
.jd-slot[aria-pressed="true"]{border-color:var(--jd-gold);background:var(--jd-raised)}
.jd-slot__t{display:block;font-family:var(--jd-display);font-weight:700;font-size:17px;color:var(--jd-ivory)}
.jd-slot[aria-pressed="true"] .jd-slot__t{color:var(--jd-gold-light)}
.jd-slot__l{display:block;font-size:11px;color:rgba(var(--jd-ink-rgb),.65);font-weight:500;margin-top:2px}
.jd-slot__hot{
  position:absolute;top:-8px;inset-inline-end:8px;background:var(--jd-gold);color:var(--jd-bg);
  font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:2px;
}
.jd-slot__full{
  position:absolute;top:-8px;inset-inline-start:8px;background:var(--jd-panel);color:var(--jd-err-text);
  border:1px solid rgba(168,68,47,.5);font-size:9.5px;font-weight:700;padding:1px 8px;border-radius:2px;
}
.jd-slot[disabled]{cursor:not-allowed;opacity:.45}
.jd-slot[disabled]:hover{border-color:var(--jd-line-20)}

.jd-guests{
  margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid var(--jd-line);border-radius:3px;background:var(--jd-panel);padding:14px 18px;
}
.jd-guests__lbl b{display:block;font-size:13.5px;font-weight:700;color:var(--jd-ivory)}
.jd-guests__lbl span{display:block;font-size:11.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:400}
.jd-guests__ctl{display:flex;align-items:center;gap:16px}
.jd-guests__btn{
  cursor:pointer;width:38px;height:38px;border-radius:3px;border:1px solid rgba(var(--jd-acc-rgb),.55);
  background:transparent;color:var(--jd-gold-light);font-size:20px;font-weight:700;line-height:1;
  transition:background .2s ease,color .2s ease;
}
.jd-guests__btn:hover{background:var(--jd-gold);color:var(--jd-bg)}
.jd-guests__n{font-family:var(--jd-display);font-weight:700;font-size:26px;color:var(--jd-ivory);min-width:44px;text-align:center}

/* ٠٣ — addons */
.jd-addons{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.jd-addon{
  cursor:pointer;text-align:start;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:3px;
  border:1px solid var(--jd-line-16);background:var(--jd-panel);color:var(--jd-sand);transition:all .2s ease;
}
.jd-addon:hover{border-color:rgba(var(--jd-acc-rgb),.8)}
.jd-addon[aria-pressed="true"]{border-color:var(--jd-gold);background:var(--jd-raised)}
.jd-addon__box{
  width:20px;height:20px;border-radius:2px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;border:1px solid rgba(var(--jd-acc-rgb),.6);color:var(--jd-bg);background:transparent;
}
.jd-addon[aria-pressed="true"] .jd-addon__box{background:var(--jd-gold)}
.jd-addon__t{flex:1;min-width:0}
.jd-addon__t b{display:block;font-size:14px;font-weight:700;color:var(--jd-ivory)}
.jd-addon__t span{display:block;font-size:11.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:400;margin-top:1px}
.jd-addon__p{font-family:var(--jd-display);font-weight:600;font-size:15px;color:var(--jd-gold-light);flex-shrink:0}


/* تفاصيل الباقة المختارة — «وش بيوصلني؟» قبل ما يدفع.
   نفس لغة البطاقات: حدّ رفيع، خلفية اللوحة، وذهبي للعناوين فقط. */
.jd-pkg{
  margin-top:18px;border:1px solid var(--jd-line-16);border-radius:3px;
  background:var(--jd-panel);padding:18px 20px;
}
.jd-pkg__tag{margin:0 0 16px;font-size:13.5px;line-height:1.85;color:rgba(var(--jd-ink-rgb),.72)}
.jd-pkg__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px}
.jd-pkg__h{
  font-family:var(--jd-display);font-weight:700;font-size:14px;margin:0 0 9px;color:var(--jd-gold-light);
}
.jd-pkg__list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.jd-pkg__list li{
  position:relative;padding-inline-start:20px;font-size:13px;line-height:1.75;color:rgba(var(--jd-ink-rgb),.82);
}
.jd-pkg__list li::before{
  position:absolute;inset-inline-start:0;top:0;font-size:11px;line-height:1.9;
}
.jd-pkg__list--in li::before{content:"✓";color:var(--jd-gold)}
/* المستثنيات بلون أهدأ وعلامة مختلفة، حتى تُقرأ بلمحة ولا تختلط بالمشمول. */
.jd-pkg__list--out li{color:rgba(var(--jd-ink-rgb),.65)}
.jd-pkg__list--out li::before{content:"—";color:rgba(var(--jd-ink-rgb),.65)}
.jd-pkg__facts{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--jd-line-10);
  display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:12.5px;line-height:1.7;
}
.jd-pkg__facts dt{font-weight:700;color:rgba(var(--jd-ink-rgb),.86)}
.jd-pkg__facts dd{margin:0;color:rgba(var(--jd-ink-rgb),.66)}
.jd-pkg__cancel{
  margin:16px 0 0;padding:11px 14px;border:1px dashed rgba(var(--jd-acc-rgb),.4);border-radius:3px;
  font-size:12.5px;line-height:1.8;color:rgba(var(--jd-ink-rgb),.72);
}
.jd-pkg__who{margin:12px 0 0;font-size:12px;line-height:1.8;color:rgba(var(--jd-ink-rgb),.65)}

/* إضافة مشمولة في الباقة: مؤكَّدة بصرياً، لكنها غير قابلة للضغط ولا تعرض سعراً. */
.jd-addon--included{cursor:default;border-color:rgba(var(--jd-acc-rgb),.5);background:var(--jd-raised)}
.jd-addon--included:hover{border-color:rgba(var(--jd-acc-rgb),.5)}
.jd-addon__inc{
  font-family:var(--jd-display);font-size:11.5px;font-weight:700;color:var(--jd-bg);
  background:var(--jd-gold);border-radius:2px;padding:3px 9px;flex-shrink:0;
}


/* شرح احتساب المستحقات في /join/ — عمود حساب + ملاحظات. */
.jd-calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;align-items:start}
.jd-calc__rows{border:1px solid var(--jd-line-16);border-radius:3px;background:var(--jd-panel);padding:8px 18px}
.jd-calc__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--jd-line-08);font-size:13.5px;color:rgba(var(--jd-ink-rgb),.78);
}
.jd-calc__row:last-child{border-bottom:0}
.jd-calc__row b{font-family:var(--jd-display);font-weight:700;font-size:16px;color:var(--jd-ivory);white-space:nowrap}
.jd-calc__row--total b{color:var(--jd-gold-light);font-size:19px}
.jd-calc__row--muted{color:rgba(var(--jd-ink-rgb),.65)}
.jd-calc__row--muted b{font-size:13.5px;color:var(--jd-gold-light)}
.jd-calc__notes{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.jd-calc__notes li{
  position:relative;padding-inline-start:20px;font-size:13px;line-height:1.85;color:rgba(var(--jd-ink-rgb),.7);
}
.jd-calc__notes li::before{content:"◆";position:absolute;inset-inline-start:0;font-size:8px;color:var(--jd-gold);line-height:2.6}
.jd-calc__notes b{color:var(--jd-ivory);font-weight:700}


/* --------------------------------------------------------------------------
   /custom/ — الطلب المخصص
   يعيد استخدام jd-book / jd-fstep / jd-seg / jd-guests، ويضيف ما لا يوجد
   في صفحة الحجز: شرائح قابلة للضغط، تنبيه «هذا ليس حجزاً»، وصفّ الإرسال.
   -------------------------------------------------------------------------- */
/* عمود واحد: لا يوجد ملخّص فاتورة هنا، لأنه لا يوجد سعر بعد. */
.jd-book__cols--single .jd-book__form{flex:1 1 100%;max-width:760px}

/* الشريحة هنا زر حقيقي (بخلاف .jd-chip الزخرفية في الصفحة الرئيسية). */
button.jd-chip{
  cursor:pointer;background:var(--jd-panel);color:rgba(var(--jd-ink-rgb),.8);
  border:1px solid var(--jd-line-16);transition:all .18s ease;
}
button.jd-chip:hover{border-color:rgba(var(--jd-acc-rgb),.7);color:var(--jd-gold-light)}
button.jd-chip[aria-pressed="true"]{
  border-color:var(--jd-gold);background:var(--jd-raised);color:var(--jd-gold-light);
}

/* «هذا ليس حجزاً مؤكداً» — أبرز عنصر في الصفحة بعد العنوان، عن قصد. */
.jd-callout{
  margin-top:20px;border:1px solid var(--jd-gold-line);border-inline-start-width:3px;
  border-radius:3px;background:rgba(var(--jd-acc-rgb),.07);padding:14px 16px;
  font-size:13px;line-height:1.95;color:rgba(var(--jd-ink-rgb),.82);
}
.jd-callout b{display:block;color:var(--jd-gold-light);font-weight:700;margin-bottom:3px}

.jd-book__alt{margin:16px 0 0;font-size:12.5px;color:rgba(var(--jd-ink-rgb),.65)}
.jd-book__alt a{color:var(--jd-gold-light);border-bottom:1px solid var(--jd-gold-line)}

.jd-fnote{margin:12px 0 0;font-size:12px;line-height:1.85;color:rgba(var(--jd-ink-rgb),.65)}
.jd-submitrow{display:grid;gap:4px;justify-items:start}
.jd-btn--wide{width:100%;justify-content:center;text-align:center}
.jd-input--area{margin-top:14px;width:100%}


/* --------------------------------------------------------------------------
   التركيز بلوحة المفاتيح
   قبل هذا لم يكن لأي زر أو رابط مؤشّر تركيز مرئي (الافتراضي مُلغى ضمناً بأنماط
   الأزرار)، فكان التنقّل بالـ Tab أعمى. :focus-visible وحدها حتى لا تظهر الحلقة
   لمستخدم الفأرة.
   -------------------------------------------------------------------------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--jd-gold-light);
  outline-offset:3px;
  border-radius:2px;
}
/* البطاقات الكبيرة: الحلقة تلتصق بحوافها بدل أن تطفو بعيداً. */
:where(.jd-vibe,.jd-tok,.jd-pick__opt,.jd-addon,.jd-slot,.jd-seg__opt):focus-visible{outline-offset:2px}
/* حقل الإدخال له حدّ ذهبي عند التركيز أصلاً؛ أضف الحلقة فوقه للوضوح. */
.jd-input:focus-visible{outline:2px solid var(--jd-gold-light);outline-offset:1px}

/* سطر «مشمول» في الفاتورة: حاضر ومقروء، لكن بوزن أقل من السطور المحاسَب عليها. */
.jd-sum__row--inc b{color:var(--jd-gold-light);font-weight:600;font-size:12.5px}
.jd-sum__row--inc span{color:rgba(var(--jd-ink-rgb),.65)}

/* مدينة «قريباً»: معروضة حتى يعرف الزائر أنها قادمة، لكنها ليست خياراً.
   خافتة بلا حدّ ذهبي، ومؤشّر الفأرة يقول إنها غير قابلة للاختيار. */
.jd-seg__opt--soon{
  opacity:.5;cursor:not-allowed;display:inline-flex;align-items:center;gap:7px;
}
.jd-seg__opt--soon:hover{border-color:inherit;color:inherit}
.jd-seg__soon{
  font-size:9.5px;font-weight:700;letter-spacing:.3px;padding:2px 6px;border-radius:2px;
  background:rgba(var(--jd-ink-rgb),.14);color:rgba(var(--jd-ink-rgb),.75);
}

/* ٠٤ — contact */
.jd-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.jd-fhint{font-size:11px;margin-top:6px;font-weight:500;min-height:14px;color:rgba(var(--jd-ink-rgb),.65)}
.jd-fhint--ok{color:var(--jd-gold-light)}
.jd-fhint--bad{color:var(--jd-err-text)}

/* Summary aside */
.jd-sum{flex:1 1 320px;max-width:460px;position:sticky;top:22px}
.jd-sum__card{
  background:var(--jd-panel);border:1px solid var(--jd-gold-line);border-radius:4px;padding:10px;
  animation:jd-rise .7s .15s ease both;
}
.jd-sum__card .jd-teeth--sm{--jd-tooth:rgba(var(--jd-acc-rgb),.55);margin-bottom:10px}
.jd-sum__hero{aspect-ratio:16 / 8;overflow:hidden;border-radius:2px;position:relative}
.jd-sum__hero img{width:100%;height:100%;object-fit:cover;display:block}
.jd-sum__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(var(--jd-veil-rgb),.85))}
.jd-sum__heroname{
  position:absolute;bottom:12px;inset-inline-start:14px;z-index:1;
  font-family:var(--jd-display);font-weight:700;font-size:22px;color:var(--jd-ivory-c);
}
.jd-sum__body{padding:16px 10px 8px;display:grid;gap:10px;font-size:13px}
.jd-sum__row{display:flex;justify-content:space-between;gap:12px}
.jd-sum__row span{color:rgba(var(--jd-ink-rgb),.65);font-weight:400}
.jd-sum__row b{font-weight:700;color:var(--jd-ivory)}
.jd-sum__bill{border-top:1px solid var(--jd-line-12);padding-top:12px;display:grid;gap:9px}
.jd-sum__bill .jd-sum__row span{color:rgba(var(--jd-ink-rgb),.75)}
.jd-sum__bill .jd-sum__row b{font-weight:600;color:var(--jd-sand)}
.jd-sum__bill .jd-sum__row--incl b{font-weight:700;color:var(--jd-gold-light)}
.jd-sum__pay{border-top:1px solid var(--jd-line-12);padding-top:13px}
.jd-sum__pay > b{display:block;font-size:13px;font-weight:700;color:var(--jd-ivory);margin-bottom:10px}
.jd-pays{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jd-pay{
  position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:11px 4px 9px;border-radius:3px;border:1px solid var(--jd-line-20);background:var(--jd-field);
  transition:all .2s ease;min-width:0;
}
.jd-pay:hover{border-color:var(--jd-gold)}
.jd-pay[aria-pressed="true"]{border-color:var(--jd-gold);background:var(--jd-raised)}
.jd-pay__mark{height:18px;display:inline-flex;align-items:center;gap:3px;color:var(--jd-ivory);direction:ltr}
.jd-pay__mark--baseline{align-items:baseline}
.jd-pay__mark b{font-family:var(--jd-display);font-weight:600;font-size:12.5px}
.jd-pay__mark i{font-family:var(--jd-display);font-weight:700;font-style:italic;font-size:10px;letter-spacing:.4px}
.jd-pay__mark em{font-family:var(--jd-display);font-weight:600;font-style:normal;font-size:12px}
.jd-pay__word{font-family:var(--jd-display);font-weight:700;font-size:14px;letter-spacing:-.2px}
.jd-pay__word--plain{letter-spacing:0}
.jd-pay__word u{color:var(--jd-gold);text-decoration:none}
.jd-pay__lbl{font-size:10px;font-weight:600;color:rgba(var(--jd-ink-rgb),.65)}
.jd-pay[aria-disabled="true"]{opacity:.55}
.jd-pay[aria-disabled="true"]:hover{border-color:var(--jd-line-20)}
/* A method we cannot charge yet is labelled, not silently greyed out. */
.jd-pay__soon{
  position:absolute;top:3px;inset-inline-start:4px;
  font-size:8.5px;font-weight:700;line-height:1.6;padding:0 5px;border-radius:2px;
  color:var(--jd-gold-light);background:rgba(var(--jd-acc-rgb),.16);border:1px solid rgba(var(--jd-acc-rgb),.4);
}
.jd-paysoon{
  margin-top:10px;font-size:11.5px;line-height:1.8;font-weight:400;
  color:rgba(var(--jd-ink-rgb),.65);border:1px dashed rgba(var(--jd-acc-rgb),.4);border-radius:3px;padding:8px 11px;
}

.jd-tot{border-top:1px solid rgba(var(--jd-acc-rgb),.4);padding-top:13px;display:grid;gap:7px}
.jd-tot__row{display:flex;justify-content:space-between;align-items:baseline}
.jd-tot__row--sm span{font-size:12.5px;font-weight:500;color:rgba(var(--jd-ink-rgb),.75)}
.jd-tot__row--sm b{font-weight:700;color:var(--jd-ivory);font-size:15px}
.jd-tot__now{font-size:13.5px;font-weight:700;color:var(--jd-ivory)}
.jd-tot__now span{color:var(--jd-gold-light)}
.jd-tot__amt{display:inline-flex;align-items:baseline;gap:6px}
.jd-tot__amt b{font-family:var(--jd-display);font-weight:700;font-size:30px;color:var(--jd-gold-light);line-height:1.2}
.jd-tot__amt span{font-size:12px;font-weight:600;color:rgba(var(--jd-ink-rgb),.65)}
.jd-tot__rest{display:flex;justify-content:space-between}
.jd-tot__rest span{font-size:11.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:400}
.jd-tot__rest b{font-size:11.5px;color:rgba(var(--jd-ink-rgb),.7);font-weight:600}

.jd-err{
  background:var(--jd-err-bg);border:1px solid rgba(168,68,47,.5);color:var(--jd-err-text);
  font-size:12.5px;font-weight:500;padding:10px 13px;border-radius:3px;line-height:1.8;
}
.jd-submit{
  cursor:pointer;width:100%;background:var(--jd-gold);color:var(--jd-bg);font-weight:700;font-size:16px;
  padding:16px;border:none;border-radius:3px;letter-spacing:.3px;margin-top:4px;
  animation:jd-pulse 3.2s ease-in-out infinite;
}
.jd-submit:hover{background:var(--jd-gold-light)}
.jd-submit[disabled]{opacity:.7;cursor:progress}
.jd-sum__micro{text-align:center;font-size:11.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:400;padding-bottom:6px}
.jd-sum__tip{
  margin-top:14px;border:1px dashed rgba(var(--jd-acc-rgb),.45);border-radius:3px;padding:13px 16px;
  font-size:12.5px;line-height:1.9;color:rgba(var(--jd-ink-rgb),.65);font-weight:400;
}

/* Confirmation modal */
.jd-modal{
  position:fixed;inset:0;z-index:90;background:rgba(var(--jd-veil-rgb),.86);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:jd-fade .3s ease both;
}
.jd-modal__card{
  background:var(--jd-panel);border:1px solid rgba(var(--jd-acc-rgb),.6);border-radius:6px;max-width:460px;width:100%;
  padding:40px 34px;text-align:center;position:relative;overflow:hidden;
  animation:jd-pop .5s cubic-bezier(.2,.9,.3,1.2) both;
}
.jd-modal__teeth{position:absolute;top:0;left:0;right:0;--jd-tooth:rgba(var(--jd-acc-rgb),.5)}
/* The tick is inline SVG, so its stroke lives here rather than as a hardcoded
   attribute the palette cannot reach. */
.jd-check{margin-bottom:18px}
.jd-check circle{stroke:var(--jd-gold-line);animation:jd-draw .9s .15s ease-out forwards}
.jd-check path{stroke:var(--jd-gold);animation:jd-draw .5s .8s ease-out forwards}
.jd-modal__card h2{font-family:var(--jd-display);font-weight:700;font-size:30px;margin:0 0 10px;color:var(--jd-ivory)}
.jd-modal__line{margin:0 0 8px;font-size:14.5px;font-weight:500;color:var(--jd-gold-light)}
.jd-modal__p{margin:0 0 26px;font-size:13.5px;line-height:2;color:rgba(var(--jd-ink-rgb),.7);font-weight:300}
.jd-modal__row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* HyperPay COPYandPAY widget, dressed to match the card it replaces. */
.jd-widget{padding:4px 6px 10px}
.jd-widget__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.jd-widget__head b{font-family:var(--jd-display);font-weight:700;font-size:18px;color:var(--jd-ivory)}
.jd-widget__head span{font-size:12px;color:rgba(var(--jd-ink-rgb),.65)}
.jd-widget .wpwl-form{background:var(--jd-field);border:1px solid var(--jd-line-16);border-radius:3px;box-shadow:none}
.jd-widget .wpwl-button-pay{background:var(--jd-gold);border-color:var(--jd-gold);color:var(--jd-bg);font-weight:700}

/* ==========================================================================
   انضم كمزود — /join/
   ========================================================================== */
.jd-phero{position:relative;overflow:hidden}
.jd-phero__glow{
  position:absolute;inset:0;
  background:
    radial-gradient(700px 420px at 85% 0%,rgba(185,170,196,.42),transparent 70%),
    radial-gradient(560px 380px at 5% 100%,rgba(231,197,172,.48),transparent 72%);
}
.jd-phero__grid{
  position:relative;max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,90px) 28px;box-sizing:content-box;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(36px,5vw,70px);align-items:center;
}
.jd-phero__copy{animation:jd-rise .8s ease both;max-width:620px}
.jd-phero__copy .jd-eyebrow{margin-bottom:18px}
.jd-phero__copy h1{
  font-family:var(--jd-display);font-weight:700;font-size:clamp(40px,5.6vw,74px);line-height:1.25;
  margin:0 0 16px;color:var(--jd-ivory);text-wrap:balance;
}
.jd-phero__copy p{
  font-size:clamp(15px,1.4vw,17px);line-height:2;font-weight:300;color:rgba(var(--jd-ink-rgb),.9);
  margin:0 0 30px;max-width:52ch;text-wrap:pretty;
}
.jd-phero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:24px}
.jd-phero__note{font-size:13px;color:rgba(var(--jd-ink-rgb),.65);display:flex;align-items:center;gap:10px}
.jd-phero__teeth{position:absolute;bottom:-1px;left:0;right:0;--jd-tooth:var(--jd-deep)}
.jd-phero__art{justify-self:center;width:min(100%,430px);animation:jd-rise .8s .15s ease both}

.jd-dash{padding:6px 10px 10px}
.jd-dash .jd-teeth--sm{--jd-tooth:rgba(var(--jd-acc-rgb),.55);margin-bottom:12px}
.jd-dash__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.jd-dash__head b{font-family:var(--jd-display);font-weight:700;font-size:18px;color:var(--jd-ivory)}
.jd-dash__live{
  background:rgba(var(--jd-acc-rgb),.15);border:1px solid var(--jd-gold-line);color:var(--jd-gold-light);
  font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:2px;
}
.jd-dash__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.jd-dash__tiles--2{grid-template-columns:repeat(2,1fr)}
.jd-dash__tile{background:var(--jd-bg);border:1px solid var(--jd-line-12);border-radius:3px;padding:12px 10px;text-align:center}
.jd-dash__tile b{display:block;font-family:var(--jd-display);font-weight:700;font-size:22px;color:var(--jd-gold-light)}
.jd-dash__tile span{display:block;font-size:10.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:500}
.jd-dash__chart{background:var(--jd-bg);border:1px solid var(--jd-line-12);border-radius:3px;padding:14px 14px 10px}
.jd-dash__chart > b{display:block;font-size:11px;font-weight:600;color:rgba(var(--jd-ink-rgb),.65);margin-bottom:10px}
.jd-dash__bars{display:flex;align-items:stretch;gap:7px;height:74px}
.jd-dash__bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;height:100%}
/* The bar's height is a percentage of the track, so the track needs a definite
   height of its own — a percentage against the column itself resolves to 0. */
.jd-dash__track{flex:1;width:100%;display:flex;align-items:flex-end}
.jd-dash__bar i{
  width:100%;height:var(--jd-h,50%);border-radius:2px 2px 0 0;background:rgba(var(--jd-acc-rgb),.45);transform-origin:bottom;
  animation:jd-grow .8s var(--jd-delay,0s) cubic-bezier(.2,.8,.3,1) both;
}
.jd-dash__bar--hi i{background:var(--jd-gold)}
.jd-dash__bar span{font-size:9.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:500}
.jd-dash__foot{display:flex;align-items:center;gap:9px;padding:12px 2px 2px;font-size:12px;color:rgba(var(--jd-ink-rgb),.7)}
.jd-dash__foot i{color:var(--jd-gold-light);font-style:normal}
/* The dashboard is a picture of a screen; say so rather than let its example
   figures read as a real provider's week. */
.jd-dash__note{padding:0 2px 4px;font-size:10.5px;font-weight:500;color:rgba(var(--jd-ink-rgb),.65)}

.jd-pstats{background:var(--jd-deep);border-bottom:1px solid var(--jd-line-08)}
.jd-pstats__inner{
  max-width:1100px;margin:0 auto;padding:clamp(44px,6vw,70px) 28px;box-sizing:content-box;
  display:flex;flex-wrap:wrap;justify-content:center;gap:24px 70px;text-align:center;
}
.jd-pstats .jd-stat{min-width:150px}
.jd-pstats .jd-stat__n{font-size:38px}

.jd-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.jd-cat{
  background:var(--jd-panel);border:1px solid var(--jd-line);border-radius:4px;padding:22px 20px;
  transition:transform .25s ease,border-color .25s ease;
}
.jd-cat:hover{transform:translateY(-5px);border-color:rgba(var(--jd-acc-rgb),.7)}
.jd-cat__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.jd-cat__top .jd-diamond{width:10px;height:10px}
.jd-cat__hot{
  background:rgba(var(--jd-acc-rgb),.15);border:1px solid var(--jd-gold-line);color:var(--jd-gold-light);
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:2px;
}
.jd-cat__n{font-family:var(--jd-display);font-weight:700;font-size:20px;color:var(--jd-ivory);margin-bottom:5px}
.jd-cat__d{font-size:12.5px;line-height:1.9;color:rgba(var(--jd-ink-rgb),.65);font-weight:300}

.jd-reqs{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:center;font-size:12.5px;color:rgba(var(--jd-ink-rgb),.65);font-weight:400}
.jd-reqs span{display:inline-flex;align-items:center;gap:8px}
.jd-reqs .jd-diamond{width:5px;height:5px}

.jd-apply{background:var(--jd-raised);border-top:1px solid var(--jd-line-08)}
.jd-apply__inner{max-width:860px;margin:0 auto;padding:clamp(64px,8vw,104px) 28px;box-sizing:content-box}
.jd-apply__head{text-align:center;margin-bottom:40px}
.jd-apply__head .jd-eyebrow{margin-bottom:14px}
.jd-apply__head h2{font-family:var(--jd-display);font-weight:700;font-size:clamp(30px,4vw,46px);margin:0 0 10px;line-height:1.3;color:var(--jd-ivory)}
.jd-apply__card{
  background:var(--jd-panel);border:1px solid rgba(var(--jd-acc-rgb),.4);border-radius:4px;
  padding:clamp(24px,4vw,40px);display:grid;gap:22px;
}
.jd-apply__card .jd-seg__opt{padding:10px 18px;font-size:13px}
.jd-apply__card .jd-seg__opt--city{padding:10px 22px}
.jd-apply__send{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.jd-apply__send .jd-btn--gold{padding:15px 42px}
.jd-apply__send span{font-size:12px;color:rgba(var(--jd-ink-rgb),.65);font-weight:400}
.jd-done{
  background:var(--jd-panel);border:1px solid rgba(var(--jd-acc-rgb),.6);border-radius:6px;
  padding:clamp(36px,5vw,56px);text-align:center;position:relative;overflow:hidden;
  animation:jd-pop .5s cubic-bezier(.2,.9,.3,1.2) both;
}
.jd-done h2{font-family:var(--jd-display);font-weight:700;font-size:30px;margin:0 0 10px;color:var(--jd-ivory)}
.jd-done__ticket{margin:0 0 6px;font-size:14.5px;font-weight:500;color:var(--jd-gold-light)}
.jd-done__p{margin:0 auto 28px;font-size:13.5px;line-height:2;color:rgba(var(--jd-ink-rgb),.7);font-weight:300;max-width:46ch}

/* --------------------------------------------------------------------------
   Reduced motion
   Reveal is applied by JS (diriyah-core.js) as inline styles, exactly like the
   handoff, so a no-JS / no-IntersectionObserver visitor sees the full page.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .jd-hero__copy,.jd-hero__art,.jd-book__intro,.jd-sum__card,.jd-phero__copy,.jd-phero__art{animation:none}
  .jd-check circle,.jd-check path{stroke-dashoffset:0}
  .jd-dash__bar i{transform:none}
}


/* ==========================================================================
   Plum bands
   The page is ivory; these five are the brand's dark counterweight. Each one
   re-points the ink and accent channels instead of restating its contents, so
   every nested rule — headings, hairlines, prices, the logo — flips with it.
   Only bands that hold no light card of their own belong here: الحسابات and
   انضم keep an ivory ground precisely because they carry white cards.
   ========================================================================== */
.jd-marquee,
.jd-pstats,
.jd-foot,
.jd-slimfoot,
.jd-tok{
  /* The band sets `color` as well as the channels: re-pointing --jd-sand alone
     does not change a colour already computed on <body>, so anything inside
     that does not set its own would inherit the page's ink onto plum. */
  color:var(--jd-sand);
  --jd-ink-rgb:250,248,242;     /* عاجي */
  --jd-acc-rgb:231,197,172;     /* خوخي */
  --jd-veil-rgb:38,30,37;
  --jd-bg:#462B43;
  --jd-panel:#573452;
  --jd-raised:#5F485C;
  --jd-field:#573452;
  --jd-deep:#3B2638;
  --jd-gold:#E7C5AC;
  --jd-gold-light:#F0DCCB;
  --jd-ivory:#FAF8F2;
  --jd-sand:#FAF8F2;
  --jd-gold-line:rgba(231,197,172,.4);
  --jd-logo-lockup:url("/brand/logo/horizontal-reverse.svg");
  --jd-logo-symbol:url("/brand/logo/symbol-reverse.svg");
  --jd-logo-word:url("/brand/logo/wordmark-reverse.svg");
}

/* ==========================================================================
   الجوال — mobile refinements
   The handoff only specifies the desktop composition; its grids collapse on
   their own, but four things need a decision at phone width: the header (a
   four-link nav in a flex row becomes a 230px-tall column), the display type,
   the joined step columns (their divider is an inline-end border), and the
   sticky summary. Everything below only changes layout — no colour, no type
   scale that the handoff pins for desktop.
   ========================================================================== */
@media (max-width: 760px){
  /* Landing header: logo + CTA share the first row, the nav scrolls under it. */
  .jd-head__inner{flex-wrap:wrap;gap:12px 16px;padding-block:16px}
  .jd-head__cta{order:2;margin-inline-start:auto}
  .jd-nav{
    order:3;width:100%;margin-inline-start:0;gap:20px;flex-wrap:nowrap;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px;
  }
  .jd-nav::-webkit-scrollbar{display:none}
  .jd-nav a{white-space:nowrap}
  /* Too narrow for the 200px horizontal signature: the symbol takes over,
     which is what it is for (brand book 03 / 07). */
  .jd-logo{height:42px;aspect-ratio:370 / 394;background-image:var(--jd-logo-symbol)}
  .jd-logo--sm,.jd-logo--xs{height:38px}

  /* Inner-page header: breadcrumb on one row, actions under it. */
  .jd-subhead__inner{gap:10px 14px;padding-block:14px}
  .jd-subhead__back,.jd-subhead__links{margin-inline-start:0;width:100%}
  .jd-subhead__links{justify-content:space-between}

  /* Hero: content height, not 96vh of it. */
  .jd-hero{min-height:0}
  .jd-hero__grid{padding:24px 28px 64px;gap:34px}
  .jd-h1{font-size:clamp(32px,8vw,42px);line-height:1.28}
  .jd-hero__lede{font-size:15px;line-height:1.95;margin-bottom:26px}
  .jd-hero__cta{gap:10px}
  .jd-hero__art{width:min(100%,360px);margin-bottom:34px}
  .jd-hero__tag{padding:10px 14px}
  .jd-hero__tag strong{font-size:19px}

  /* Two cards per row reads like a phone app; one full-width card does not. */
  .jd-vibes{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .jd-vibe__body{padding:14px 8px 10px}
  .jd-h3{font-size:19px}
  .jd-vibe__desc{font-size:12.5px;margin-bottom:12px}
  .jd-price b{font-size:18px}
  .jd-social__grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .jd-cats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .jd-mix__art{min-height:240px}

  /* The joined columns stack, so the divider has to move to the bottom edge. */
  .jd-step{padding:30px 24px;border-inline-end:none;border-bottom:1px solid var(--jd-line)}
  .jd-step:last-child{border-bottom:none}
  .jd-step__n{font-size:44px;margin-bottom:12px}
  .jd-step h3{font-size:21px}

  .jd-shead{margin-bottom:34px;gap:16px}
  .jd-chead{margin-bottom:38px}
  .jd-prov{padding:28px 22px}
  .jd-cta__inner{padding:70px 28px}

  /* Booking: the summary stops being a sidebar, so it stops being sticky. */
  .jd-book__cols{gap:32px}
  .jd-book__form{gap:34px}
  .jd-sum{position:static;max-width:none;flex-basis:100%}
  .jd-fstep__n{font-size:28px}
  .jd-fstep h2{font-size:21px}
  .jd-pick{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .jd-pick__name{font-size:15.5px}
  .jd-slots{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .jd-addons{grid-template-columns:1fr}
  .jd-prog{max-width:none}
  .jd-modal{padding:16px;align-items:flex-start;overflow-y:auto}
  .jd-modal__card{padding:32px 22px;margin-block:auto}
  .jd-modal__card h2{font-size:25px}

  /* Provider */
  .jd-phero__grid{padding:30px 28px 60px;gap:34px}
  .jd-phero__copy h1{font-size:clamp(34px,9vw,48px);line-height:1.3}
  .jd-apply__card{padding:22px 18px;gap:18px}
  .jd-apply__send{gap:12px}
  .jd-apply__send .jd-btn--gold{width:100%}

  /* The floating WhatsApp button must not cover the footer links. */
  .jd-foot{padding-bottom:88px}
  .jd-fab{bottom:16px;left:16px;width:50px;height:50px}
}

@media (max-width: 420px){
  .jd-wrap{padding-inline:20px}
  .jd-hero__grid,.jd-phero__grid{padding-inline:20px}
  .jd-book{padding-inline:20px}
  .jd-quote__inner,.jd-social__inner,.jd-cta__inner,.jd-apply__inner,.jd-pstats__inner,.jd-stats{padding-inline:20px}
  .jd-btn--gold,.jd-btn--outline{padding-inline:26px}
  .jd-pays{gap:6px}
  .jd-pay__lbl{font-size:9.5px}
}