/* Nomad Habitat — UI System v2.0. This file is the kit's own
   css/nh-ui.css, unmodified, followed by the additions this site
   needs. Keep that order: a v3 drop replaces everything above the
   "Additions" banner and nothing below it. */
/* ==========================================================================
   Nomad Habitat — UI System v2.0 (icons · buttons · action tiles · Najdi layer)
   RTL-first. Set <html dir="rtl" lang="ar">. Requires the brand fonts:
   IBM Plex Sans Arabic (300/400/500/600) + Cormorant Garamond (500).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=Cormorant+Garamond:wght@500&display=swap');

:root{
  /* brand */
  --nh-night:#11272B; --nh-night-deep:#0A191C; --nh-oasis:#1E3D3E; --nh-oasis-soft:#2F5856;
  --nh-sage:#8C9F98; --nh-sand:#ECE8DD; --nh-linen:#F6F3EC; --nh-dune:#C8AD82; --nh-clay:#8E5034;
  --nh-clay-hover:#7A4329; --nh-clay-press:#693A24;
  /* semantic (light) */
  --nh-surface:var(--nh-sand); --nh-surface-raised:var(--nh-linen); --nh-surface-sunken:#E2DCCE;
  --nh-ink:var(--nh-night); --nh-ink-muted:#55625F; --nh-line:#D6CEBE; --nh-line-strong:#55625F;
  --nh-focus:var(--nh-night);
  /* type */
  --nh-font:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif;
  --nh-font-latin:"Cormorant Garamond",Georgia,serif;
  /* metrics */
  --nh-radius:2px; --nh-ease:cubic-bezier(.2,.7,.2,1); --nh-dur:160ms;
  --nh-icon-stroke:1.5;
  /* v2 — Najdi earth (surfaces & art only; never buttons/links) */
  --nh-tin:#B08560; --nh-tin-shadow:#8A6444; --nh-hajar:#D8CBB2; --nh-jis:#F2ECE0; --nh-athl:#5B4332;
}
[data-theme="dark"]{
  --nh-surface:var(--nh-night); --nh-surface-raised:var(--nh-oasis); --nh-surface-sunken:var(--nh-night-deep);
  --nh-ink:var(--nh-sand); --nh-ink-muted:#A9B5B0; --nh-line:var(--nh-oasis-soft); --nh-line-strong:#A9B5B0;
  --nh-focus:var(--nh-dune);
}


/* dark theme: primary-style fills invert so they stay visible */
[data-theme="dark"] .nh-btn--primary,[data-theme="dark"] .nh-chip[aria-pressed="true"],[data-theme="dark"] .nh-seg button[aria-selected="true"]{background:var(--nh-sand);color:var(--nh-night);border-color:var(--nh-sand)}
[data-theme="dark"] .nh-btn--primary:hover{background:var(--nh-linen)}
[data-theme="dark"] .nh-btn--primary.is-loading{--nh-spin:var(--nh-night)}
[data-theme="dark"] .nh-btn:disabled{background:var(--nh-oasis);color:#6F817D}

/* ---------- Icons ---------- */
.nh-icon{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle;
  fill:none;stroke:currentColor;stroke-width:var(--nh-icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.nh-icon--16{width:16px;height:16px;--nh-icon-stroke:1.75}
.nh-icon--20{width:20px;height:20px}
.nh-icon--32{width:32px;height:32px;--nh-icon-stroke:1.25}
.nh-icon--48{width:48px;height:48px;--nh-icon-stroke:1}
.nh-icon--solid{fill:currentColor;stroke:none}
[dir="rtl"] .nh-icon--mirror{transform:scaleX(-1)} /* only for icons that mean "direction" when used in LTR pages */

/* ---------- Buttons ---------- */
.nh-btn{--h:48px;--px:22px;--fs:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--h);padding:0 var(--px);border:1.5px solid transparent;border-radius:var(--nh-radius);
  font:500 var(--fs)/1 var(--nh-font);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--nh-dur) var(--nh-ease),color var(--nh-dur) var(--nh-ease),border-color var(--nh-dur) var(--nh-ease),transform var(--nh-dur) var(--nh-ease);
  -webkit-tap-highlight-color:transparent;user-select:none;position:relative}
.nh-btn .nh-icon{width:20px;height:20px}
.nh-btn:focus-visible{outline:2px solid var(--nh-focus);outline-offset:2px}
.nh-btn:active{transform:translateY(1px)}
/* sizes */
.nh-btn--sm{--h:40px;--px:16px;--fs:14px;gap:8px}
.nh-btn--sm .nh-icon{width:18px;height:18px}
.nh-btn--lg{--h:56px;--px:28px;--fs:18px}
.nh-btn--lg .nh-icon{width:22px;height:22px}
.nh-btn--block{display:flex;width:100%}
@media (max-width:640px){ .nh-btn--sm{--h:44px} .nh-btn--block-mobile{display:flex;width:100%} }
/* variants */
.nh-btn--primary{background:var(--nh-night);color:var(--nh-sand)}
.nh-btn--primary:hover{background:var(--nh-oasis)}
.nh-btn--primary:active{background:var(--nh-night-deep)}
.nh-btn--accent{background:var(--nh-clay);color:var(--nh-linen)}
.nh-btn--accent:hover{background:var(--nh-clay-hover)}
.nh-btn--accent:active{background:var(--nh-clay-press)}
.nh-btn--secondary{background:transparent;color:var(--nh-ink);border-color:var(--nh-ink)}
.nh-btn--secondary:hover{background:var(--nh-surface-sunken)}
.nh-btn--ghost{background:transparent;color:var(--nh-ink)}
.nh-btn--ghost:hover{background:var(--nh-surface-sunken)}
.nh-btn--link{background:none;color:var(--nh-ink);padding:0;min-height:32px;border:0;border-bottom:1.5px solid currentColor;border-radius:0}
.nh-btn--link:hover{color:var(--nh-clay)}
/* on dark surfaces */
.nh-btn--inverse{background:var(--nh-sand);color:var(--nh-night)}
.nh-btn--inverse:hover{background:var(--nh-linen)}
.nh-btn--secondary-inverse{background:transparent;color:var(--nh-sand);border-color:var(--nh-sand)}
.nh-btn--secondary-inverse:hover{background:rgba(236,232,221,.1)}
.nh-btn--dune{background:var(--nh-dune);color:var(--nh-night)}
.nh-btn--dune:hover{background:#D4BD98}
/* states */
.nh-btn:disabled,.nh-btn[aria-disabled="true"]{background:#E2DCCE;color:#8A918E;border-color:transparent;cursor:not-allowed;transform:none}
.nh-btn.is-loading{color:transparent!important;pointer-events:none}
.nh-btn.is-loading::after{content:"";position:absolute;width:12px;height:12px;inset:0;margin:auto;background:var(--nh-spin,currentColor);
  transform:rotate(30deg);animation:nh-spin 900ms var(--nh-ease) infinite}
.nh-btn--primary.is-loading{--nh-spin:var(--nh-sand)} .nh-btn--accent.is-loading{--nh-spin:var(--nh-linen)}
.nh-btn--secondary.is-loading,.nh-btn--ghost.is-loading{--nh-spin:var(--nh-ink)}
@keyframes nh-spin{to{transform:rotate(390deg)}}
@media (prefers-reduced-motion:reduce){.nh-btn,.nh-tile{transition:none}.nh-btn.is-loading::after{animation-duration:2.4s}}
/* icon-only */
.nh-btn--icon{width:var(--h);padding:0}
.nh-btn--icon .nh-icon{width:22px;height:22px}
/* trailing arrow nudges toward reading direction on hover */
.nh-btn .nh-icon--trail{transition:transform var(--nh-dur) var(--nh-ease)}
.nh-btn:hover .nh-icon--trail{transform:translateX(-3px)}
[dir="ltr"] .nh-btn:hover .nh-icon--trail{transform:translateX(3px)}

/* ---------- Favorite toggle ---------- */
.nh-fav{--h:44px}
.nh-fav[aria-pressed="true"]{color:var(--nh-clay)}
.nh-fav .nh-icon--solid{display:none}
.nh-fav[aria-pressed="true"] .nh-icon--solid{display:inline-block}
.nh-fav[aria-pressed="true"] .nh-icon--outline{display:none}

/* ---------- Arch FAB (call / chat) — signature shape ---------- */
.nh-fab{position:fixed;inset-inline-start:auto;inset-inline-end:20px;bottom:20px;z-index:50;
  width:60px;height:68px;border:0;border-radius:30px 30px 4px 4px;background:var(--nh-clay);color:var(--nh-linen);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(17,39,43,.18)}
.nh-fab:hover{background:var(--nh-clay-hover)}
.nh-fab:focus-visible{outline:2px solid var(--nh-focus);outline-offset:3px}
.nh-fab .nh-icon{width:26px;height:26px}
.nh-fab--static{position:static}

/* ---------- Action tiles (home page: بيع / شراء / أضف / اطلب) ---------- */
.nh-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.nh-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.nh-tile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:36px 22px 28px;
  background:var(--nh-surface-raised);color:var(--nh-ink);text-decoration:none;border:1.5px solid var(--nh-line);
  border-radius:999px 999px var(--nh-radius) var(--nh-radius);transition:background-color var(--nh-dur) var(--nh-ease),border-color var(--nh-dur) var(--nh-ease),transform var(--nh-dur) var(--nh-ease)}
.nh-tile__icon{width:52px;height:52px;display:grid;place-items:center;background:var(--nh-night);color:var(--nh-sand);border-radius:26px 26px 2px 2px;margin-inline:auto}
.nh-tile__icon .nh-icon{width:26px;height:26px}
.nh-tile__title{font:500 19px/1.4 var(--nh-font);margin-inline:auto;margin-top:6px}
.nh-tile__text{font:400 14px/1.7 var(--nh-font);color:var(--nh-ink-muted);text-align:center;margin-inline:auto}
.nh-tile:hover{border-color:var(--nh-ink);transform:translateY(-2px)}
.nh-tile:focus-visible{outline:2px solid var(--nh-focus);outline-offset:3px}
.nh-tile--accent .nh-tile__icon{background:var(--nh-clay);color:var(--nh-linen)}
@media (max-width:640px){.nh-tile{padding:28px 12px 20px}.nh-tile__text{display:none}.nh-tile__title{font-size:16px}}

/* ---------- Segmented control (بيع | إيجار | شراء) ---------- */
.nh-seg{display:inline-flex;padding:4px;background:var(--nh-surface-sunken);border-radius:var(--nh-radius);gap:4px}
.nh-seg button{all:unset;box-sizing:border-box;min-height:40px;padding:0 18px;font:500 15px/40px var(--nh-font);color:var(--nh-ink-muted);cursor:pointer;border-radius:var(--nh-radius);display:inline-flex;gap:8px;align-items:center}
.nh-seg button[aria-selected="true"]{background:var(--nh-night);color:var(--nh-sand)}
.nh-seg button:focus-visible{outline:2px solid var(--nh-focus);outline-offset:1px}
.nh-seg .nh-icon{width:18px;height:18px}

/* ---------- Chips (filters) ---------- */
.nh-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1.5px solid var(--nh-line);border-radius:var(--nh-radius);
  background:transparent;color:var(--nh-ink);font:400 14px/1 var(--nh-font);cursor:pointer}
.nh-chip .nh-icon{width:16px;height:16px;--nh-icon-stroke:1.75}
.nh-chip[aria-pressed="true"]{background:var(--nh-night);border-color:var(--nh-night);color:var(--nh-sand)}
.nh-chip:focus-visible{outline:2px solid var(--nh-focus);outline-offset:2px}

/* ---------- Search bar ---------- */
.nh-search{display:flex;align-items:stretch;background:var(--nh-surface-raised);border:1.5px solid var(--nh-line-strong);border-radius:var(--nh-radius);min-height:56px}
.nh-search:focus-within{outline:2px solid var(--nh-focus);outline-offset:2px}
.nh-search__field{flex:1;display:flex;align-items:center;gap:10px;padding:0 16px;color:var(--nh-ink-muted)}
.nh-search input{all:unset;flex:1;font:400 16px/1.5 var(--nh-font);color:var(--nh-ink)}
.nh-search input::placeholder{color:var(--nh-ink-muted)}
.nh-search .nh-btn{border-radius:0;margin:-1.5px;margin-inline-start:0}

/* ---------- Spec badge (icon + value) ---------- */
.nh-spec{display:inline-flex;align-items:center;gap:6px;font:400 14px/1 var(--nh-font);color:var(--nh-ink-muted)}
.nh-spec .nh-icon{width:18px;height:18px}


/* ==========================================================================
   v2 — Najdi / Salmani layer (use sparingly: ONE Najdi element per view)
   ========================================================================== */
/* Crown CTA: three stepped merlons above the button — hero & key pages only */
.nh-btn--najdi{--nh-crown:currentColor;margin-top:7px}
.nh-btn--najdi::before{content:"";position:absolute;bottom:100%;inset-inline:0;margin-inline:auto;width:30px;height:6px;
  background:var(--nh-crown);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 6'%3E%3Cpath d='M0 6V4h1V2h1V0h2v2h1v2h1v2ZM12 6V4h1V2h1V0h2v2h1v2h1v2ZM24 6V4h1V2h1V0h2v2h1v2h1v2Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 6'%3E%3Cpath d='M0 6V4h1V2h1V0h2v2h1v2h1v2ZM12 6V4h1V2h1V0h2v2h1v2h1v2ZM24 6V4h1V2h1V0h2v2h1v2h1v2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background-color var(--nh-dur) var(--nh-ease)}
.nh-btn--najdi.nh-btn--accent{--nh-crown:var(--nh-clay)} .nh-btn--najdi.nh-btn--accent:hover{--nh-crown:var(--nh-clay-hover)}
.nh-btn--najdi.nh-btn--primary{--nh-crown:var(--nh-night)} .nh-btn--najdi.nh-btn--primary:hover{--nh-crown:var(--nh-oasis)}
.nh-btn--najdi.nh-btn--secondary{--nh-crown:var(--nh-ink)}
.nh-btn--najdi.nh-btn--inverse{--nh-crown:var(--nh-sand)} .nh-btn--najdi.nh-btn--dune{--nh-crown:var(--nh-dune)}
.nh-btn--najdi:disabled{--nh-crown:#E2DCCE}

/* Shurfa divider: merlons rising from the NEXT section into the current one.
   <div class="nh-shurfa" style="--nh-shurfa:var(--nh-sand)"></div> placed at the top of the next section */
.nh-shurfa{--nh-shurfa:var(--nh-sand);--nh-shurfa-size:56px;height:calc(var(--nh-shurfa-size)*.5);background:var(--nh-shurfa);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 20V14H8V10H11V6H14V2H22V6H25V10H28V14H40V20Z'/%3E%3C/svg%3E") 0 100%/var(--nh-shurfa-size) 100% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 20V14H8V10H11V6H14V2H22V6H25V10H28V14H40V20Z'/%3E%3C/svg%3E") 0 100%/var(--nh-shurfa-size) 100% repeat-x;display:block}
@media (max-width:640px){.nh-shurfa{--nh-shurfa-size:40px}}

/* Furja texture: sparse triangular vents — background only, behind short text */
.nh-bg-furja{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='rgba%2847%2C88%2C86%2C.55%29'%3E%3Cpath d='M24 18l4 7h-8zM19.5 26.5l4 7h-8zM28.5 26.5l4 7h-8zM72 66l4 7h-8zM67.5 74.5l4 7h-8zM76.5 74.5l4 7h-8z'/%3E%3C/g%3E%3C/svg%3E");background-size:96px 96px}
.nh-bg-furja--light{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='rgba%2817%2C39%2C43%2C.10%29'%3E%3Cpath d='M24 18l4 7h-8zM19.5 26.5l4 7h-8zM28.5 26.5l4 7h-8zM72 66l4 7h-8zM67.5 74.5l4 7h-8zM76.5 74.5l4 7h-8z'/%3E%3C/g%3E%3C/svg%3E")}
.nh-bg-furja--earth{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='rgba%28138%2C100%2C68%2C.35%29'%3E%3Cpath d='M24 18l4 7h-8zM19.5 26.5l4 7h-8zM28.5 26.5l4 7h-8zM72 66l4 7h-8zM67.5 74.5l4 7h-8zM76.5 74.5l4 7h-8z'/%3E%3C/g%3E%3C/svg%3E")}
@media (prefers-reduced-transparency:reduce){.nh-bg-furja,.nh-bg-furja--light,.nh-bg-furja--earth{background-image:none}}

/* Earth surfaces (sections/cards) — text stays night or sand */
.nh-surface--jis{background:var(--nh-jis);color:var(--nh-night)}
.nh-surface--hajar{background:var(--nh-hajar);color:var(--nh-night)}
.nh-surface--tin{background:var(--nh-tin);color:var(--nh-night)}
.nh-surface--athl{background:var(--nh-athl);color:var(--nh-sand)}

/* The home page runs three tiles, not the kit's four. */
.nh-tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ==========================================================================
   Additions for nomadhabitat.sa — same rules, pieces the site needs
   ========================================================================== */

/* ── The Arabic face ───────────────────────────────────────────────────────
   thmanyah, served from this site's own origin for its own pages.

   The licence permits the typeface in websites and applications, and
   forbids redistributing it, hosting it for download, or making the files
   independently available. So: the files are converted to woff2 and
   nothing else — no subsetting, no renaming, no derivative; the family and
   style names below are the foundry's own. woff2 rather than the original
   .otf on purpose, since a woff2 is awkward to install and discourages
   anyone lifting an installable copy. They are referenced only from the
   Arabic build, so an English or Chinese page never fetches them: a face
   is downloaded when a rule paints text with it, not when it is declared.

   The family ships Regular and Medium and no bold. Rather than let the
   browser smear a synthetic bold over the Medium, the Medium face is
   declared across 500–700, so a heading asking for 600 gets the real cut. */
@font-face{
  font-family:'thmanyah serif text';
  src:url('/assets/fonts/thmanyahseriftext-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'thmanyah serif text';
  src:url('/assets/fonts/thmanyahseriftext-Medium.woff2') format('woff2');
  font-weight:500 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'thmanyah serif display';
  src:url('/assets/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'thmanyah serif display';
  src:url('/assets/fonts/thmanyahserifdisplay-Medium.woff2') format('woff2');
  font-weight:500 700; font-style:normal; font-display:swap;
}

/* The stand-in, while the real face is on its way.

   Swapping one face for another moves every line that was set in the old
   one — measured here at CLS 0.33 on the search page, which is a page
   visibly rearranging itself under the reader. The cure is to make the
   stand-in occupy the same space: stretch it until a line of Arabic sets
   to the same width, and give it thmanyah's own vertical metrics.

   89.6% is the measured ratio of advance widths over three sample lines.
   The ascent and descent are thmanyah's (100% and 25% of the em) divided
   by that ratio, because the overrides resolve against the unscaled size. */
@font-face{
  font-family:'thmanyah fallback';
  src:local('Noto Naskh Arabic'), local('Times New Roman'), local('Geeza Pro'), local('Al Bayan');
  size-adjust:89.6%;
  ascent-override:111.6%;
  descent-override:27.9%;
  line-gap-override:0%;
}

/* The kit draws its own chrome — buttons, segmented controls, tiles — from
   --nh-font, which is a token of its own and not one of the page's. Left
   alone, every button on the Arabic site stayed in the old sans while the
   text around it changed, which is the one place a mixed setting shows.
   Pointed at the text cut already downloaded, so it costs nothing. The
   Latin token is untouched: figures and the Latin wordmark stay as they
   were, in every language. */
html[dir="rtl"]{
  --nh-font:'thmanyah serif text','thmanyah fallback',serif;
}

/* The combo's popup inherits its text colour from wherever it is opened.
   Over the hero — which sets cream text on a dark photograph — every row
   came out cream on a cream sheet: measured rgb(246,243,236) on
   rgb(246,243,236), a list of 170 districts that was there and could not
   be read. The sheet draws its own ink, like any other sheet. */
.nhc__pop{color:var(--nh-ink,#11272b)}

/* Rating stars: the kit ships one star outline; a filled star is the same
   glyph with the fill turned on, so the rating never drifts from the set. */
.nh-stars{display:inline-flex;gap:3px;color:var(--nh-dune)}
.nh-stars .nh-icon{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:1}

/* The sprite carries no "up" chevron: it is the down one, turned. */
.nh-icon--up{transform:rotate(180deg)}
.nh-icon--down{transform:rotate(0)}

/* Icon inside a circular/arch plate (stats, why-list, info blocks, services) */
.nh-plate{display:grid;place-items:center;flex:none;
  width:46px;height:52px;border-radius:23px 23px 2px 2px;
  background:var(--nh-night);color:var(--nh-sand)}
.nh-plate .nh-icon{width:22px;height:22px}
.nh-plate--quiet{background:transparent;color:var(--nh-ink);border:1.5px solid var(--nh-line)}
.nh-plate--dune{background:var(--nh-dune);color:var(--nh-night)}
.nh-plate--clay{background:var(--nh-clay);color:var(--nh-linen)}
.nh-plate--on-dark{background:rgba(246,243,236,.10);color:var(--nh-dune)}

/* Touch targets: nothing interactive drops under 44px on a phone, which is
   the floor the kit sets and the one the phone sweep checks. */
@media (max-width:820px){
  .nh-btn{--h:48px}
  .nh-btn--icon{width:48px}
  .nh-chip{min-height:44px;padding:0 16px}
  .nh-seg button{min-height:44px;line-height:44px}
}

/* Chinese runs shorter than Arabic and much shorter than English. Locking the
   button box to its metrics — not its text — keeps every control the same size
   in the three languages, so the page does not reflow when the language flips. */
:lang(zh) .nh-btn,:lang(zh) .nh-chip,:lang(zh) .nh-seg button{letter-spacing:.02em}
:lang(zh) .nh-tile__title{font-size:18px}

/* An arrow marked --mirror is flipped for Arabic by `transform`. The hover nudge
   has to use the independent `translate` property, or the two fight over the
   same declaration and the arrow stops pointing where it should. */
.nh-btn .nh-icon--trail{transition:translate var(--nh-dur) var(--nh-ease)}
.nh-btn:hover .nh-icon--trail{transform:none;translate:-3px 0}
[dir="ltr"] .nh-btn:hover .nh-icon--trail{transform:none;translate:3px 0}
[dir="rtl"] .nh-btn:hover .nh-icon--trail.nh-icon--mirror{transform:scaleX(-1);translate:-3px 0}

/* ---------- Money: the riyal symbol and the payment breakdown ---------- */
/* The symbol sits a touch smaller than the digits beside it and never
   inherits their weight, so a bold price does not distort the mark. */
.nh-sar{font-weight:400;font-size:0.86em;line-height:1;display:inline-block;vertical-align:baseline}
.nh-sar--word{font-size:0.72em;letter-spacing:0.02em;opacity:.78}
/* SAMA's mark, at its published proportions — height set against the
   digits beside it, width derived from the artwork's own aspect. */
.nh-sar--mark{--sar-h:0.98em;height:var(--sar-h);width:calc(var(--sar-h) * 0.89474);vertical-align:-0.16em}
.nh-per{font-size:0.7em;opacity:.7;font-weight:400}
.nh-money{width:100%;border-collapse:collapse;font:400 15px/1.5 var(--nh-font);margin-block-start:10px}
.nh-money th,.nh-money td{padding:9px 0;text-align:start;font-weight:400;color:var(--nh-ink-muted);border-bottom:1px solid var(--nh-line)}
.nh-money td{text-align:end;color:var(--nh-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.nh-money .nh-rate{font-size:0.82em;opacity:.7}
.nh-money__total th,.nh-money__total td{border-bottom:0;border-top:1.5px solid var(--nh-ink);padding-top:12px;font-weight:600;color:var(--nh-ink);font-size:1.06em}
.nh-money__how{font:400 13px/1.7 var(--nh-font);color:var(--nh-ink-muted);margin-block-start:8px}

/* ---------- Combo: a select you can type into (see nh-combo.js) ----------
   A native select holding 170 districts is a scroll, not a choice. The
   select stays in the page as the value holder — hidden, not removed — so
   nothing depends on the script having loaded. */
.nhc{position:relative}
.nhc__native{position:absolute;width:1px;height:1px;padding:0;margin:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nhc__button{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-height:42px;font:inherit;text-align:start;cursor:pointer;
  color:var(--ink);background:var(--cream-deep);
  border:1px solid var(--line-on-cream);border-radius:6px;padding:9px 12px}
/* A dropdown arrow points down in every language, so these are physical
   borders on purpose — the logical ones would swing it sideways in RTL. */
.nhc__button::after{content:"";flex:none;width:9px;height:9px;margin-inline-start:4px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55}
.nhc__button:hover{border-color:var(--brass)}
.nhc__button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.nhc__button.is-blank{color:var(--ink-soft)}
.nhc.is-open .nhc__button{border-color:var(--brass)}

.nhc__pop{position:absolute;z-index:60;inset-inline-start:0;top:calc(100% + 6px);
  min-width:100%;width:max-content;max-width:min(420px,92vw);
  background:var(--paper);border:1px solid var(--line-on-cream);border-radius:8px;
  box-shadow:0 14px 40px rgba(10,25,28,.16);overflow:hidden;
  display:flex;flex-direction:column;max-height:min(58vh,380px)}
/* display:flex above beats the browser's own rule for [hidden], so the
   closed state has to be said out loud or the list never shuts. */
.nhc__pop[hidden]{display:none}
.nhc__search{flex:none;font:inherit;color:var(--ink);background:var(--paper);
  border:none;border-bottom:1px solid var(--line-on-cream);padding:12px 14px;outline:none}
.nhc__search::placeholder{color:var(--ink-soft);opacity:.8}
.nhc__list{overflow-y:auto;overscroll-behavior:contain;padding:4px 0}
.nhc__group{position:sticky;top:0;z-index:1;background:var(--paper);
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);padding:8px 14px 5px}
.nhc__opt{padding:9px 14px;cursor:pointer;font-size:.95rem;line-height:1.35;
  overflow-wrap:anywhere}
.nhc__opt.is-at{background:var(--cream-deep)}
.nhc__opt[data-on="1"]{font-weight:700;color:var(--green-950)}
.nhc__opt[data-on="1"]::after{content:"✓";margin-inline-start:7px;color:var(--brass)}
.nhc__empty{padding:18px 14px;color:var(--ink-soft);font-size:.92rem;text-align:center}

/* On a phone the popup is a sheet: a 380px menu pinned to a field near the
   bottom of the screen opens off-screen. */
@media (max-width:560px){
  .nhc.is-open .nhc__pop{position:fixed;inset:auto 0 0 0;top:auto;
    max-height:72vh;border-radius:14px 14px 0 0;border-bottom:none}
  .nhc__search{padding:14px;font-size:16px}  /* 16px stops iOS zooming in */
  .nhc__opt{padding:12px 14px}
}