/* ==========================================================================
   جوّك — خدمات المنازل والاستراحات
   Public site (home / service detail / booking / confirmation / join).

   Values are transcribed verbatim from the "Jawwak v2" design handoff, which
   authored everything as inline styles. Each rule below is one prototype
   element; do not "tidy" the numbers — the handoff is high-fidelity and the
   type scale, radii and animation timings are final.

   Do NOT put brand-kit edits here — brand/jawwak.css stays untouched.
   ========================================================================== */

:root{
  --jw-bg:#0F1520;
  --jw-surface:#171E2C;
  --jw-surface-2:#1E2637;
  --jw-text:#E6EAF0;
  --jw-text-strong:#F0F3F7;
  --jw-text-muted:#97A1B0;
  --jw-text-dim:#7E899A;          /* AA floor on --jw-bg — never darken */
  --jw-link:#B9C2CE;
  --jw-accent:#63C2B6;
  --jw-accent-hover:#85D6CB;
  --jw-accent-tint:rgba(99,194,182,.14);
  --jw-sand:#F0C98A;
  --jw-sand-ink:#241A0C;
  --jw-light-bg:#EDF1F5;
  --jw-light-surface:#FBFCFD;
  --jw-light-ink:#101520;
  --jw-light-muted:#5C6675;
  --jw-light-body:#38424F;
  --jw-light-dot:#2E8C82;
  --jw-line:rgba(230,234,240,.10);
  --jw-line-12:rgba(230,234,240,.12);
  --jw-line-13:rgba(230,234,240,.13);
  --jw-line-14:rgba(230,234,240,.14);
  --jw-line-16:rgba(230,234,240,.16);
  --jw-line-22:rgba(230,234,240,.22);
  --jw-ui:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --jw-display:'Aref Ruqaa',serif;
  --jw-ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--jw-bg);
  color:var(--jw-text);
  font-family:var(--jw-ui);
  font-size:16px;
  line-height:1.85;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--jw-accent);text-decoration:none}
a:hover{color:var(--jw-accent-hover)}
::selection{background:var(--jw-accent);color:var(--jw-bg)}
input[type=range]{accent-color:var(--jw-accent)}
img{max-width:100%}

/* Arabic is never tracked out (handoff: letter-spacing 0 on all Arabic). */
h1,h2,h3,p,span,a,button,input,select,textarea{letter-spacing:0}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes jwRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes jwIn{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}
@keyframes jwFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes jwPulse{0%{box-shadow:0 0 0 0 rgba(99,194,182,.5)}70%{box-shadow:0 0 0 10px rgba(99,194,182,0)}100%{box-shadow:0 0 0 0 rgba(99,194,182,0)}}
@keyframes jwBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes jwZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes jwPara{from{translate:0 -3%}to{translate:0 3%}}
@keyframes jwSweep{0%{translate:70% 0;opacity:0}14%{opacity:.85}48%{translate:-280% 0;opacity:0}100%{translate:-280% 0;opacity:0}}
/* Added with the icon set: line icons draw themselves in, and the running total
   gives a small nod when it changes so the number doesn't just silently swap. */
@keyframes jwDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes jwBump{0%{transform:none}38%{transform:translateY(-3px) scale(1.045)}100%{transform:none}}

/* Scroll-reveal. Native scroll-driven animations where supported, an
   IntersectionObserver + transition fallback (class `is-in`) everywhere else.
   The fallback only hides content once JS has confirmed it can reveal it
   again (`.jw-js`), so a no-JS visitor still sees the whole page. */
@supports (animation-timeline:view()){
  .jw-reveal{animation:jwIn linear both;animation-timeline:view();animation-range:entry 6% cover 26%}
  .jw-reveal--strip{animation-range:entry 4% cover 20%}
  .jw-reveal--step{animation-range:entry 5% cover 24%}
  .jw-reveal--head{animation-range:entry 8% cover 30%}
}
@supports not (animation-timeline:view()){
  .jw-js .jw-reveal{opacity:0;translate:0 22px;transition:opacity .7s var(--jw-ease),translate .7s var(--jw-ease)}
  .jw-js .jw-reveal.is-in{opacity:1;translate:none}
}

/* --------------------------------------------------------------------------
   Line icons
   The handoff ships no icon set, so these are drawn to its own restraint: a
   24px grid, 1.5px stroke, currentColor, no fills. Every drawn path carries
   pathLength="1" so the draw-in works regardless of the path's real length.
   -------------------------------------------------------------------------- */
.jw-ico{width:22px;height:22px;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jw-ico--sm{width:17px;height:17px;stroke-width:1.7}
.jw-ico--lg{width:28px;height:28px}
.jw-ico--accent{color:var(--jw-accent)}

@supports (animation-timeline:view()){
  .jw-ico--draw>*{stroke-dasharray:1;stroke-dashoffset:1;animation:jwDraw linear both;animation-timeline:view();animation-range:entry 10% cover 34%}
}
@supports not (animation-timeline:view()){
  .jw-js .jw-ico--draw>*{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--jw-ease)}
  .jw-js .is-in .jw-ico--draw>*,.jw-js .jw-ico--draw.is-in>*{stroke-dashoffset:0}
}

/* --------------------------------------------------------------------------
   Interaction feedback
   -------------------------------------------------------------------------- */
.jw-btn,.jw-btn--light,.jw-btn--pkg{transition:background .2s,border-color .2s,transform .12s}
.jw-btn:active,.jw-btn--light:active,.jw-btn--pkg:active{transform:translateY(1px)}
.jw-seg__opt:active,.jw-chip:active{transform:scale(.96)}
.jw-seg__opt,.jw-chip{transition:background .2s,color .2s,border-color .2s,transform .12s}
/* The card image breathes on hover, inside the card's existing clip. */
.jw-card__media{overflow:hidden}
.jw-card__media img{transition:transform .55s var(--jw-ease)}
.jw-card:hover .jw-card__media img{transform:scale(1.045)}
/* Applied for one beat by home.js whenever the estimate changes. */
.jw-bump{animation:jwBump .42s var(--jw-ease)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .jw-js .jw-reveal{opacity:1 !important;translate:none !important;transition:none !important}
  .jw-ico--draw>*{stroke-dashoffset:0 !important;transition:none !important}
  .jw-card:hover .jw-card__media img{transform:none}
  .jw-btn:active,.jw-btn--light:active,.jw-btn--pkg:active,.jw-seg__opt:active,.jw-chip:active{transform:none}
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.jw-page{max-width:100%;overflow-x:clip;background:var(--jw-bg)}
.jw-wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(18px,4vw,56px)}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.jw-nav{position:sticky;top:0;z-index:60;background:rgba(15,21,32,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--jw-line)}
.jw-nav__inner{max-width:1240px;margin:0 auto;padding:14px clamp(18px,4vw,56px);display:flex;align-items:center;gap:clamp(14px,3vw,38px)}
.jw-brand{display:flex;align-items:baseline;gap:10px;margin-inline-end:auto}
.jw-brand__word{font-family:var(--jw-display);font-weight:700;font-size:30px;line-height:1;color:var(--jw-text)}
.jw-brand__desc{font-size:12px;color:var(--jw-text-dim)}
.jw-nav__link{font-size:15px;color:var(--jw-link);white-space:nowrap;background:transparent;border:0;cursor:pointer;font-family:var(--jw-ui);padding:0}
.jw-nav__link:hover{color:var(--jw-accent-hover)}
/* Scroll-progress strip. transform-origin is right/center because the page is RTL. */
.jw-progress{display:block;height:2px;background:var(--jw-accent);transform-origin:right center;transform:scaleX(var(--jw-scroll,0))}
@supports (animation-timeline:scroll()){
  .jw-progress{transform:none;animation:jwBar linear both;animation-timeline:scroll(root)}
}

/* Below ~760px the nav links would wrap into a second row and push the CTA
   off-screen; collapse to brand + CTA and let the footer carry the links. */
@media (max-width:760px){
  .jw-nav__inner{gap:14px}
  .jw-nav__link{display:none}
  .jw-brand__desc{display:none}
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.jw-btn{border-radius:999px;cursor:pointer;font-family:var(--jw-ui);border:0;display:inline-block;text-align:center;text-decoration:none}

.jw-btn--primary{color:var(--jw-bg);background:var(--jw-accent);font-weight:500;transition:background .2s}
.jw-btn--primary:hover{background:var(--jw-accent-hover);color:var(--jw-bg)}

.jw-btn--ghost{color:var(--jw-text);background:transparent;border:1px solid var(--jw-line-22);transition:border-color .2s}
.jw-btn--ghost:hover{border-color:rgba(99,194,182,.6);color:var(--jw-text)}

/* Hero's outline button is the one variant that also tints on hover. */
.jw-btn--ghost-hero{transition:border-color .2s,background .2s}
.jw-btn--ghost-hero:hover{background:rgba(99,194,182,.08)}

.jw-btn--nav{font-size:15px;padding:10px 22px;white-space:nowrap}
.jw-btn--lg{font-size:16px;padding:14px 30px}
.jw-btn--md{font-size:15.5px;padding:13px 26px}
.jw-btn--sm{font-size:15.5px;padding:12px 24px}
.jw-btn--ghost.jw-btn--lg{font-size:16px;font-weight:400;padding:13px 28px}
.jw-btn--block{display:block;width:100%}

/* Packages sit on the light section and need the inverse outline treatment. */
.jw-btn--light{display:block;text-align:center;font-size:15.5px;color:var(--jw-light-ink);border:1px solid rgba(16,21,32,.20);background:transparent;padding:12px 20px;border-radius:999px;transition:background .2s}
.jw-btn--light:hover{background:rgba(16,21,32,.06);color:var(--jw-light-ink)}
.jw-btn--pkg{display:block;text-align:center;font-size:15.5px;font-weight:500;color:var(--jw-bg);background:var(--jw-accent);padding:13px 20px;border-radius:999px;transition:background .2s}
.jw-btn--pkg:hover{background:var(--jw-accent-hover);color:var(--jw-bg)}

.jw-back{background:transparent;border:0;color:var(--jw-text-muted);font:400 14.5px var(--jw-ui);cursor:pointer;padding:0;margin-bottom:22px;display:inline-block}
.jw-back:hover{color:var(--jw-accent-hover)}

.jw-btn:disabled{opacity:.55;cursor:progress}

/* --------------------------------------------------------------------------
   Segmented controls (city / venue) and chips (date / time)
   -------------------------------------------------------------------------- */
.jw-seg{display:inline-flex;gap:6px;padding:5px;border:1px solid var(--jw-line-13);border-radius:999px;background:rgba(230,234,240,.04)}
.jw-seg__opt{font:400 15px var(--jw-ui);padding:9px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s;background:transparent;color:var(--jw-link)}
.jw-seg__opt.is-active{background:var(--jw-accent);color:var(--jw-bg)}

.jw-chip{font:400 14.5px var(--jw-ui);padding:9px 18px;border-radius:999px;border:1px solid var(--jw-line-16);background:transparent;color:var(--jw-link);cursor:pointer;transition:border-color .2s,background .2s}
.jw-chip:hover{border-color:var(--jw-accent)}
.jw-chip.is-active{font-weight:500;border-color:var(--jw-accent);background:var(--jw-accent-tint);color:var(--jw-text)}
.jw-chips{display:flex;gap:10px;flex-wrap:wrap}

/* The handoff asks for a 44px minimum tap target. The design's own padding lands
   at 43px, so nudge it up wherever the page is likely being touched — a coarse
   pointer, or simply a narrow screen (pointer detection is not reliable on
   hybrid devices). Desktop rendering is untouched. */
@media (pointer:coarse),(max-width:700px){
  .jw-seg__opt,.jw-chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */
.jw-label{display:block;font-size:13.5px;color:var(--jw-text-muted);margin-bottom:8px}
.jw-field{width:100%;box-sizing:border-box;background:var(--jw-bg);border:1px solid var(--jw-line-16);border-radius:12px;padding:13px 15px;color:var(--jw-text);font:400 15px/1.6 var(--jw-ui);outline:none}
.jw-field:focus{border-color:var(--jw-accent)}
textarea.jw-field{resize:vertical}
select.jw-field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7E899A 50%),linear-gradient(135deg,#7E899A 50%,transparent 50%);background-position:left 18px top 22px,left 13px top 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.jw-field--bad{border-color:#E4776B}
.jw-error{display:block;font-size:13px;color:#E4776B;margin-top:7px}
.jw-range{width:100%;margin:0 0 22px}

/* --------------------------------------------------------------------------
   Shared bits: eyebrow, panels, section headers
   -------------------------------------------------------------------------- */
.jw-eyebrow{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--jw-text-muted)}
.jw-dot{width:5px;height:5px;border-radius:50%;background:var(--jw-accent);display:block;flex:none}
.jw-dot--pulse{animation:jwPulse 2.8s ease-out 1.4s infinite}
.jw-dot--light{background:var(--jw-light-dot)}

.jw-h2{font-weight:200;font-size:clamp(30px,4.4vw,46px);line-height:1.35;margin:12px 0 0;color:var(--jw-text-strong)}
.jw-panel{background:var(--jw-surface);border:1px solid var(--jw-line-12);border-radius:20px;padding:26px}

.jw-sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:38px}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.jw-hero{max-width:1240px;margin:0 auto;padding:clamp(40px,6vw,84px) clamp(18px,4vw,56px) clamp(48px,6vw,90px);display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(34px,5vw,72px);align-items:center}
.jw-hero__copy{animation:jwRise .8s var(--jw-ease) both}
.jw-hero__eyebrow{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--jw-text-muted);margin-bottom:26px}
.jw-hero__h1{font-weight:200;font-size:clamp(42px,6.6vw,82px);line-height:1.3;margin:0;color:var(--jw-text-strong)}
.jw-hero__h1 .jw-script{font-family:var(--jw-display);font-weight:700;color:var(--jw-accent)}
.jw-hero__lede{font-size:18.5px;line-height:1.9;color:#B3A491;max-width:48ch;margin:28px 0 0}
.jw-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0 0}
.jw-hero__city{margin-top:40px}
.jw-hero__citylabel{display:block;font-size:13px;color:var(--jw-text-dim);margin-bottom:11px}
.jw-hero__cityline{font-size:14px;color:var(--jw-text-dim);margin:14px 0 0}

.jw-hero__media{position:relative;animation:jwRise .9s .12s var(--jw-ease) both}
.jw-hero__frame{position:relative;aspect-ratio:4/5;min-height:420px;border:1px solid var(--jw-line-14);border-radius:22px;overflow:hidden;background:var(--jw-surface-2)}
.jw-hero__img{width:100%;height:100%;object-fit:cover;display:block;animation:jwZoom 20s ease-in-out infinite alternate}
@supports (animation-timeline:view()){
  .jw-hero__img{animation:jwZoom 20s ease-in-out infinite alternate,jwPara linear both;animation-timeline:auto,view()}
}
.jw-hero__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(15,21,32,.78),rgba(15,21,32,.10) 46%,rgba(15,21,32,0) 72%)}
.jw-hero__sweep{position:absolute;top:-40%;bottom:-40%;right:0;width:34%;pointer-events:none;rotate:10deg;filter:blur(8px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);animation:jwSweep 11s ease-in-out 3s infinite}
.jw-hero__stat{position:absolute;inset-inline-start:-14px;bottom:26px;background:rgba(15,21,32,.92);backdrop-filter:blur(10px);border:1px solid var(--jw-line-14);border-radius:16px;padding:16px 20px;display:flex;gap:22px;align-items:center;box-shadow:0 18px 40px rgba(0,0,0,.45);animation:jwFloat 7s ease-in-out 1.6s infinite}
.jw-hero__statnum{display:block;font-size:22px;font-weight:500;color:var(--jw-text-strong);line-height:1.3}
.jw-hero__statnum--accent{color:var(--jw-accent)}
.jw-hero__statlbl{display:block;font-size:12.5px;color:var(--jw-text-dim)}
.jw-hero__statrule{width:1px;height:34px;background:var(--jw-line-14);display:block}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.jw-trust{border-block:1px solid var(--jw-line)}
.jw-trust__grid{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.jw-trust__cell{padding:26px 0;border-inline-start:1px solid var(--jw-line);padding-inline-start:26px}
.jw-trust__cell:last-child{border-inline-start:0}
.jw-trust__cell .jw-ico{margin-bottom:11px}
.jw-trust__t{display:block;font-size:15px;color:var(--jw-text);font-weight:500}
.jw-trust__s{display:block;font-size:13.5px;color:var(--jw-text-dim)}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.jw-services{max-width:1240px;margin:0 auto;padding:clamp(58px,8vw,104px) clamp(18px,4vw,56px)}
.jw-services__sub{font-size:16.5px;color:var(--jw-text-muted);margin:10px 0 0;max-width:44ch}
.jw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:22px}

.jw-card{position:relative;cursor:pointer;background:var(--jw-surface);border:1px solid var(--jw-line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .25s;color:inherit}
.jw-card:hover{border-color:rgba(99,194,182,.45);transform:translateY(-3px);color:inherit}
/* The whole card is clickable, but the only interactive element is the real <a>
   in the title: it stretches over the card instead of the card carrying a
   role="link" (invalid on <article>) plus its own tabindex, which produced two
   tab stops per card and announced a bogus link to screen readers. */
.jw-card__title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.jw-card:focus-visible,
.jw-card:has(a:focus-visible){outline:2px solid var(--jw-accent);outline-offset:3px}
.jw-card__title a:focus-visible{outline:none}
.jw-card__media{aspect-ratio:4/3;background:var(--jw-surface-2)}
.jw-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.jw-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.jw-card__cat{font-size:12.5px;color:var(--jw-accent)}
.jw-card__title{font-size:21px;font-weight:500;line-height:1.5;margin:6px 0 8px;color:var(--jw-text-strong)}
/* The title is a real <a> so the twelve detail pages are crawlable, but the
   design paints it as heading text — it must not pick up the teal link colour. */
.jw-card__title a{color:inherit}
.jw-card:hover .jw-card__title a{color:inherit}
.jw-card__desc{font-size:15px;line-height:1.8;color:var(--jw-text-muted);margin:0 0 18px}
.jw-card__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--jw-line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.jw-card__meta{font-size:13.5px;color:var(--jw-text-dim)}
.jw-card__price{font-size:16px;color:var(--jw-text)}
.jw-card__price small{font-size:13px;color:var(--jw-text-dim)}

/* --------------------------------------------------------------------------
   Packages (the one light section)
   -------------------------------------------------------------------------- */
.jw-packages{background:var(--jw-light-bg);color:var(--jw-light-ink)}
.jw-packages__inner{max-width:1240px;margin:0 auto;padding:clamp(58px,8vw,104px) clamp(18px,4vw,56px)}
.jw-packages__head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:40px}
.jw-packages__eyebrow{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--jw-light-muted)}
.jw-packages__h2{font-weight:200;font-size:clamp(30px,4.4vw,46px);line-height:1.35;margin:12px 0 0;color:var(--jw-light-ink)}
.jw-packages__note{font-size:16.5px;color:var(--jw-light-muted);max-width:40ch;margin:0}
.jw-packages__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;align-items:start}

.jw-pkg{background:var(--jw-light-surface);border:1px solid rgba(16,21,32,.10);border-radius:20px;padding:30px 28px}
.jw-pkg--hero{background:var(--jw-light-ink);border-color:var(--jw-light-ink);box-shadow:0 24px 50px rgba(16,21,32,.20)}
.jw-pkg__badge{display:inline-block;font-size:12px;color:var(--jw-sand-ink);background:var(--jw-sand);padding:4px 12px;border-radius:999px;margin-bottom:14px}
.jw-pkg__guests{display:block;font-size:13px;color:var(--jw-light-muted)}
.jw-pkg--hero .jw-pkg__guests{color:var(--jw-text-muted)}
.jw-pkg__title{font-size:26px;font-weight:400;line-height:1.4;margin:8px 0 6px;color:var(--jw-light-ink)}
.jw-pkg--hero .jw-pkg__title{color:var(--jw-text-strong)}
.jw-pkg__price{font-size:28px;font-weight:300;margin:0 0 22px;color:var(--jw-light-ink)}
.jw-pkg__price small{font-size:14px;color:var(--jw-light-muted)}
.jw-pkg--hero .jw-pkg__price{color:var(--jw-text-strong)}
.jw-pkg--hero .jw-pkg__price small{color:var(--jw-text-muted)}
.jw-pkg__list{display:grid;gap:12px;font-size:15px;color:var(--jw-light-body);border-top:1px solid rgba(16,21,32,.10);padding-top:20px}
.jw-pkg--hero .jw-pkg__list{color:#C3CCD8;border-top-color:var(--jw-line-14)}
/* On the light cards the check takes the light-section teal; the dark middle
   card keeps the main accent. */
.jw-pkg__list .jw-inc .jw-ico{color:var(--jw-light-dot)}
.jw-pkg--hero .jw-pkg__list .jw-inc .jw-ico{color:var(--jw-accent)}
.jw-pkg__cta{margin-top:26px}

/* --------------------------------------------------------------------------
   Estimator
   -------------------------------------------------------------------------- */
.jw-est{border-bottom:1px solid var(--jw-line)}
.jw-est__inner{max-width:1240px;margin:0 auto;padding:clamp(52px,7vw,88px) clamp(18px,4vw,56px);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,5vw,64px);align-items:center}
.jw-est__h2{font-weight:200;font-size:clamp(28px,3.8vw,40px);line-height:1.4;margin:12px 0 0;color:var(--jw-text-strong)}
.jw-est__note{font-size:16.5px;color:var(--jw-text-muted);margin:12px 0 0;max-width:42ch}
.jw-est__card{background:var(--jw-surface);border:1px solid var(--jw-line-12);border-radius:22px;padding:30px 30px 26px}
.jw-rowspread{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.jw-rowspread__lbl{font-size:14.5px;color:var(--jw-text-muted)}
.jw-rowspread__val{font-size:18px;color:var(--jw-text-strong)}
.jw-est__total{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-top:1px solid var(--jw-line-12);padding-top:20px}
.jw-est__totallbl{font-size:14.5px;color:var(--jw-text-muted)}
.jw-est__totalval{font-size:32px;font-weight:300;color:var(--jw-accent);line-height:1.2}
.jw-est__totalval small{font-size:14px;color:var(--jw-text-dim)}
.jw-est__cta{margin-top:22px}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.jw-how{max-width:1240px;margin:0 auto;padding:clamp(58px,8vw,100px) clamp(18px,4vw,56px)}
.jw-how__h2{font-weight:200;font-size:clamp(30px,4.4vw,46px);line-height:1.35;margin:12px 0 44px;color:var(--jw-text-strong)}
.jw-how__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:26px}
.jw-step{border-top:1px solid var(--jw-line-16);padding-top:22px}
.jw-step__n{display:block;font-size:34px;font-weight:200;color:var(--jw-accent);line-height:1;margin-bottom:16px}
.jw-step__t{font-size:19px;font-weight:500;line-height:1.5;margin:0 0 8px;color:var(--jw-text-strong)}
.jw-step__b{font-size:15px;line-height:1.8;color:var(--jw-text-muted);margin:0}

/* --------------------------------------------------------------------------
   Provider band
   -------------------------------------------------------------------------- */
.jw-provider{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,56px) clamp(58px,8vw,100px)}
.jw-provider__card{background:var(--jw-surface);border:1px solid var(--jw-line-12);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.jw-provider__copy{padding:clamp(32px,4vw,52px)}
.jw-provider__h2{font-weight:200;font-size:clamp(27px,3.6vw,38px);line-height:1.4;margin:12px 0 0;color:var(--jw-text-strong)}
.jw-provider__p{font-size:16.5px;line-height:1.9;color:var(--jw-text-muted);margin:16px 0 0;max-width:44ch}
.jw-provider__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.jw-provider__media{min-height:280px;background:var(--jw-surface-2)}
.jw-provider__media img{width:100%;height:100%;object-fit:cover;display:block}

/* --------------------------------------------------------------------------
   Service detail
   -------------------------------------------------------------------------- */
.jw-screen{max-width:1240px;margin:0 auto;padding:clamp(34px,5vw,64px) clamp(18px,4vw,56px)}
.jw-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(26px,4vw,52px);align-items:start}
.jw-detail__hero{aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:1px solid var(--jw-line-12);background:var(--jw-surface-2)}
.jw-detail__hero img{width:100%;height:100%;object-fit:cover;display:block}
.jw-detail__thumbs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px}
.jw-detail__thumb{aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--jw-line);background:var(--jw-surface-2)}
.jw-detail__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.jw-detail__cat{font-size:12.5px;color:var(--jw-accent)}
.jw-detail__h1{font-weight:200;font-size:clamp(32px,4.6vw,48px);line-height:1.32;margin:8px 0 0;color:var(--jw-text-strong)}
.jw-detail__meta{display:flex;gap:20px;flex-wrap:wrap;font-size:14.5px;color:var(--jw-text-muted);margin:14px 0 0}
.jw-detail__desc{font-size:17px;line-height:1.9;color:var(--jw-link);margin:20px 0 0}
.jw-detail__includes{display:grid;gap:12px;margin:26px 0 0;padding:22px 0;border-block:1px solid var(--jw-line-12);font-size:15.5px;color:#D3DAE4}
/* Inclusion rows: a check leads the line, aligned to the first text line. */
.jw-inc{display:flex;align-items:flex-start;gap:10px}
.jw-inc .jw-ico{margin-top:4px}
.jw-detail__buy{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:24px}
.jw-detail__price{font-size:34px;font-weight:300;color:var(--jw-text-strong);line-height:1.2}
.jw-detail__price small{font-size:15px;color:var(--jw-text-muted)}
.jw-detail__actions{display:flex;gap:12px;flex-wrap:wrap}
.jw-detail__foot{font-size:13.5px;color:var(--jw-text-dim);margin:18px 0 0}

/* --------------------------------------------------------------------------
   Booking
   -------------------------------------------------------------------------- */
.jw-book__h1{font-weight:200;font-size:clamp(30px,4.2vw,44px);line-height:1.35;margin:0 0 30px;color:var(--jw-text-strong)}
.jw-book{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(24px,3vw,40px);align-items:start}
.jw-book__form{display:grid;gap:24px}
.jw-book__card{background:var(--jw-surface);border:1px solid var(--jw-line-12);border-radius:20px;padding:26px}
.jw-book__card--first{padding:26px 26px 28px}
.jw-book__seg{margin-bottom:22px}
.jw-book__chips{margin-bottom:22px}
/* Native picker behind «تاريخ آخر»; the chips resolve to real dates either way. */
.jw-book__date{display:block;margin-top:12px}
.jw-book__date input[type=date]{color-scheme:dark}
.jw-book__datehint{font-size:12.5px;color:var(--jw-accent);margin:10px 0 22px;min-height:1.2em}

.jw-summary{background:var(--jw-surface);border:1px solid var(--jw-line-12);border-radius:20px;padding:28px;position:sticky;top:96px}
.jw-summary__h2{font-size:20px;font-weight:500;margin:0 0 20px;color:var(--jw-text-strong)}
.jw-summary__lines{display:grid;gap:14px;font-size:15px;color:var(--jw-link);padding-bottom:18px;border-bottom:1px solid var(--jw-line-12)}
.jw-summary__line{display:flex;justify-content:space-between;gap:12px}
.jw-summary__line b{color:var(--jw-text);font-weight:400}
.jw-summary__line--muted{color:var(--jw-text-muted)}
.jw-summary__total{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding:20px 0 4px}
.jw-summary__totallbl{font-size:14.5px;color:var(--jw-text-muted)}
.jw-summary__totalval{font-size:30px;font-weight:300;color:var(--jw-accent);line-height:1.2}
.jw-summary__totalval small{font-size:14px;color:var(--jw-text-dim)}
.jw-summary__cta{margin-top:18px}
.jw-summary__foot{font-size:13px;line-height:1.75;color:var(--jw-text-dim);margin:16px 0 0}

/* The summary is only useful pinned beside a tall form — once the grid stacks
   it sits below the form, where sticky would trap it against the viewport. */
@media (max-width:700px){
  .jw-summary{position:static}
}

/* --------------------------------------------------------------------------
   Map picker (Leaflet + OpenStreetMap raster tiles)
   OSM tiles are a bright, light-themed image. Rather than pay for a dark tile
   set, they're inverted and re-hued to sit in the navy card — a filter on the
   tile layer only, so the marker, controls and the required OSM attribution
   keep their real colours.
   -------------------------------------------------------------------------- */
.jw-map{margin-top:18px}
.jw-map__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.jw-map__label{margin-bottom:8px}
.jw-map__opt{color:var(--jw-text-dim)}
.jw-map__locate{display:inline-flex;align-items:center;gap:7px;font:400 13px var(--jw-ui);color:var(--jw-accent);background:transparent;border:0;cursor:pointer;padding:0 0 8px}
.jw-map__locate:hover{color:var(--jw-accent-hover)}
.jw-map__locate[disabled]{opacity:.5;cursor:progress}
.jw-map__canvas{height:240px;border-radius:12px;overflow:hidden;border:1px solid var(--jw-line-16);background:var(--jw-surface-2)}
.jw-map__canvas:focus-within{border-color:var(--jw-accent)}
.jw-map__hint{font-size:12.5px;line-height:1.7;color:var(--jw-text-dim);margin:9px 0 0}
.jw-map__hint--set{color:var(--jw-accent)}

.jw-map .leaflet-container{background:var(--jw-surface-2);font-family:var(--jw-ui)}
.jw-map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.75)}
.jw-map .leaflet-control-zoom a{background:var(--jw-surface);color:var(--jw-text);border-color:var(--jw-line-16)}
.jw-map .leaflet-control-zoom a:hover{background:var(--jw-bg);color:var(--jw-accent)}
/* OSM requires visible attribution — keep it legible, never hide it. */
.jw-map .leaflet-control-attribution{background:rgba(15,21,32,.82);color:var(--jw-text-dim);font-size:10.5px}
.jw-map .leaflet-control-attribution a{color:var(--jw-link)}
/* Brand pin, so no default Leaflet marker images are needed at all. */
.jw-pin{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--jw-accent);border:2px solid var(--jw-bg);box-shadow:0 6px 14px rgba(0,0,0,.45)}

/* --------------------------------------------------------------------------
   Payment (HyperPay COPYandPAY — the widget renders the licensed brand buttons)
   -------------------------------------------------------------------------- */
.jw-pay{margin-top:18px;padding-top:18px;border-top:1px solid var(--jw-line-12)}
.jw-pay__secure{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.6;color:var(--jw-text-dim)}
.jw-pay__secure .jw-ico{flex:none}
.jw-pay__widget{margin-top:16px;animation:jwRise .5s var(--jw-ease) both}
.jw-pay__widget:empty{display:none}
.jw-pay__error{display:block;font-size:13px;color:#E4776B;margin-top:12px}
.jw-pay__note{font-size:13px;line-height:1.75;color:var(--jw-text-dim);margin:14px 0 0}

/* The gateway widget injects its own markup; nudge it toward the dark card so it
   doesn't land as a white slab. Anything it renders inside an iframe (Apple Pay,
   3-D Secure) is out of our reach by design — that's the gateway's chrome. */
.jw-pay__widget .wpwl-form{background:transparent;border:0;box-shadow:none;margin:0}
.jw-pay__widget .wpwl-label{color:var(--jw-text-muted);font-family:var(--jw-ui)}
.jw-pay__widget .wpwl-control{background:var(--jw-bg);border:1px solid var(--jw-line-16);border-radius:12px;color:var(--jw-text)}
.jw-pay__widget .wpwl-control:focus{border-color:var(--jw-accent);box-shadow:none}
.jw-pay__widget .wpwl-button-pay{background:var(--jw-accent);border:0;color:var(--jw-bg);border-radius:999px;font-family:var(--jw-ui);font-weight:500;padding:13px 26px}
.jw-pay__widget .wpwl-button-pay:hover{background:var(--jw-accent-hover)}
.jw-pay__widget .wpwl-brand-card{filter:none}

/* --------------------------------------------------------------------------
   Confirmation
   -------------------------------------------------------------------------- */
.jw-done{max-width:1240px;margin:0 auto;padding:clamp(34px,5vw,64px) clamp(18px,4vw,56px);min-height:56vh;display:grid;place-items:center;text-align:center}
.jw-done__inner{max-width:56ch}
.jw-done__check{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(99,194,182,.16);border:1px solid var(--jw-accent);color:var(--jw-accent);font-size:28px;line-height:1}
.jw-done__h1{font-weight:200;font-size:clamp(30px,4.4vw,46px);line-height:1.35;margin:24px 0 0;color:var(--jw-text-strong)}
.jw-done__p{font-size:17.5px;line-height:1.9;color:var(--jw-link);margin:14px 0 0}
.jw-done__ref{color:var(--jw-accent)}
.jw-done__card{background:var(--jw-surface);border:1px solid var(--jw-line-12);border-radius:20px;padding:24px 26px;margin:30px 0 0;text-align:start;display:grid;gap:14px;font-size:15px;color:var(--jw-link)}
.jw-done__pay{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;margin:18px 0 0;padding:9px 18px;border-radius:999px;border:1px solid var(--jw-accent);background:var(--jw-accent-tint);color:var(--jw-text)}
.jw-done__pay--bad{border-color:#E4776B;background:rgba(228,119,107,.12);color:#F3C9C3}
.jw-done__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* --------------------------------------------------------------------------
   Join as provider
   -------------------------------------------------------------------------- */
.jw-join{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(26px,4vw,52px);align-items:start}
.jw-join__h1{font-weight:200;font-size:clamp(30px,4.4vw,46px);line-height:1.35;margin:12px 0 0;color:var(--jw-text-strong)}
.jw-join__p{font-size:17px;line-height:1.9;color:var(--jw-link);margin:16px 0 0;max-width:46ch}
.jw-join__benefits{display:grid;gap:16px;margin:30px 0 0;font-size:15.5px;color:#D3DAE4}
.jw-join__benefit{display:flex;gap:12px}
.jw-join__n{color:var(--jw-accent)}
.jw-join__media{margin-top:32px;border-radius:20px;overflow:hidden;border:1px solid var(--jw-line-12);aspect-ratio:16/9}
.jw-join__media img{width:100%;height:100%;object-fit:cover;display:block}
.jw-join__card{background:var(--jw-surface);border:1px solid var(--jw-line-12);border-radius:20px;padding:28px}
.jw-join__fields{display:grid;gap:18px}
.jw-join__foot{font-size:13px;line-height:1.75;color:var(--jw-text-dim);margin:0}
/* The handoff prints this footnote as flat text; the terms and privacy mentions
   are linked here for real, kept in the footnote's own colour so the design
   still reads the same. */
.jw-join__foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.jw-join__foot a:hover{color:var(--jw-accent-hover)}
.jw-join__done{display:none;text-align:center;padding:8px 0}
.jw-join__done .jw-done__check{margin-bottom:16px}
.jw-join__done h2{font-weight:200;font-size:28px;line-height:1.35;margin:0 0 10px;color:var(--jw-text-strong)}
.jw-join__done p{font-size:15.5px;line-height:1.85;color:var(--jw-link);margin:0}
.jw-join.is-sent .jw-join__fields{display:none}
.jw-join.is-sent .jw-join__done{display:block}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.jw-footer{border-top:1px solid var(--jw-line)}
.jw-footer__grid{max-width:1240px;margin:0 auto;padding:clamp(44px,6vw,72px) clamp(18px,4vw,56px) 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:36px}
.jw-footer__brandcol{min-width:220px}
.jw-footer__word{display:block;font-family:var(--jw-display);font-weight:700;font-size:30px;color:var(--jw-text);line-height:1.4}
.jw-footer__blurb{font-size:15px;line-height:1.85;color:var(--jw-text-dim);margin:8px 0 0;max-width:34ch}
.jw-footer__store{font-size:14px;color:var(--jw-text-dim);margin:16px 0 0}
.jw-footer__h{display:block;font-size:13px;color:var(--jw-text-dim);margin-bottom:14px}
.jw-footer__list{display:grid;gap:10px;font-size:15px;color:var(--jw-link)}
.jw-footer__list a{color:var(--jw-link)}
.jw-footer__list a:hover{color:var(--jw-accent-hover)}
.jw-footer__bar{max-width:1240px;margin:0 auto;padding:18px clamp(18px,4vw,56px) 40px;border-top:1px solid rgba(230,234,240,.08);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--jw-text-dim)}
.jw-footer__legal{display:flex;gap:20px}
.jw-footer__legal a{color:var(--jw-text-muted)}

/* Screen-reader-only helper for the labels the visual design leaves implicit. */
.jw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}