/* ============================================================
   Dubai Transfers — THE HEADER, ITS TOOLS, THE MENU SHEET AND THE
   LANGUAGE AND CURRENCY POPOVERS (2026-09-25, revision 2).

   The group's one header layout, from the owner's direction for every
   site: "make all language, currency, light dark mode toggle, saved
   listings, and cart and other menu tools look really good and laid out,
   also make dubai transfers menu less squished" — and then, having seen
   it live: "great work on those menu bars, just can we add a home button
   and separate language from currency selector".

     1024px and up   [logo]  [Home  sections … More]   [search] [globe English]
                     [British Pound Sterling] [theme] [bag n] [Price my transfer]
     below 1024px    [logo] …                                  [bag n] [menu]

   Icon buttons are 40px circles (44px to a finger), 20px outline icons at
   a 1.5px stroke, no border at rest, the surface-2 fill on hover. 8px
   between icons and between the two pills, 16px before the language pill,
   after the currency pill and before the primary button. Each pill opens
   its own popover. This site has no saved listings, so there is no heart;
   the bag is the booking.

   When a language's words do not fit, js/i18n.js fitNav() shortens the
   currency pill to its code, then the language pill to its code, then
   moves section links into "More" (and gives a name back if the room they
   leave holds it), and only then drops the search icon. Nothing is
   narrowed or squeezed, and Home and the primary button stay.

   Loaded after every other stylesheet, so it wins ties on source order.
   ============================================================ */

/* ---------- the bar ---------- */
header.nav { background: rgba(var(--bg-rgb), .9); border-bottom: 1px solid var(--border); }
.nav-in { justify-content: flex-start; gap: 2rem; }
.nav-in > .logo { flex: none; color: var(--text); }
.logo-mark { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 0.5rem; flex: none; margin-inline-start: auto; }
.nav-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  height: 3.25rem; padding: 0 1.1rem; margin: 0;
  border: 1px solid var(--border-control); border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-family: var(--font-b); font-size: 0.875rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
.nav-wa:hover { opacity: .88; }
.nav-wa .ico { display: block; flex: none; }
@media (max-width: 1023px) { .nav-wa span { display: none; } .nav-wa { width: 3.25rem; padding: 0; } }
@media (min-width: 1024px) {
  /* From 1024px to 1279px the bar spans the hero's column (--wide,
     1320px) rather than the prose column, for the room its tools need. */
  header.nav .nav-in { max-width: var(--wide); }
  .nav-in > .logo > span:not(.logo-mark) { overflow: visible; text-overflow: clip; }
}
@media (min-width: 1360px) {
  /* From 1360px the bar spans the window with 40px gutters, as on
     experiencedubai.ae and nwp.ae (the lead, 2026-09-25, revision 2): with
     Home and two pills, the hero's column left no room for a currency's
     name. 24px either side of the section links, so at 1440 in English
     "United Arab Emirates Dirham" and every link fit together. Not from
     1280: there the gutters would leave less room than the centred bar. */
  header.nav .nav-in { max-width: none; padding-inline: 2.5rem; gap: 1.5rem; }
}

/* ---------- the section links, and "More" ---------- */
.nav-links { display: none; }
@media (min-width: 1024px) {
  .nav-links { display: flex; align-items: center; gap: 2px; flex: none; }
  .nav-links > a, .nav-more-btn {
    display: inline-flex; align-items: center; gap: 0.25rem; height: 3.25rem; padding: 0 1.1rem;
    border: 0; border-radius: 999px; background: none; cursor: pointer;
    font-family: var(--font-b); font-size: 0.875rem; font-weight: 500; line-height: 1.2; letter-spacing: 0;
    color: var(--muted); white-space: nowrap; text-decoration: none;
    transition: color .2s ease, background-color .2s ease;
  }
  .nav-links > a:hover, .nav-more-btn:hover, .nav-more-btn[aria-expanded="true"] {
    color: var(--text); background: var(--surface-2);
  }
  /* Home while the hero is on screen: the text colour and the accent's
     underline, the page's one mark for "you are here" */
  .nav-links > a[aria-current="page"] {
    color: var(--text);
    text-decoration: underline; text-decoration-color: var(--accent);
    text-decoration-thickness: 1.5px; text-underline-offset: 6px;
  }
}
.nav-more { position: relative; }
.nav-more-btn .ico { transition: transform .2s ease; }
.nav-more-btn[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav-more-list {
  position: absolute; z-index: 60; top: calc(100% + 0.625rem); inset-inline-start: 0; min-width: 13.75rem;
  display: grid; gap: 2px; padding: 0.5rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
}
.nav-more-list a {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.875rem; border-radius: 10px;
  font-size: 0.875rem; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.nav-more-list a:hover { background: var(--surface-2); }
.nav-more-list a:focus-visible { outline-offset: -2px; }

/* ---------- icon buttons ---------- */
.icon-btn {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0; margin: 0;
  border: 0; border-radius: 999px; background: none; color: var(--text);
  cursor: pointer; transition: background-color .2s ease;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .ico { display: block; }
@media (pointer: coarse) { .icon-btn { width: 2.75rem; height: 2.75rem; } }

/* the theme button shows where a press goes: a moon on the white page, a
   sun on the black one */
.theme-btn > span { display: grid; place-items: center; }
.theme-btn .ico-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ico-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ico-sun { display: grid; }

/* the booking: a bag, and a count only when there is something in it */
.cart-btn .cart-count {
  position: absolute; top: 0; inset-inline-end: 0; pointer-events: none;
  display: grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-b); font-size: 0.6875rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  /* a ring of the bar's own ground, so the badge reads as ON the bag */
  box-shadow: 0 0 0 2px var(--bg);
}
.cart-btn[data-empty="true"] .cart-count { display: none; }

/* ---------- the two pills: the language, then the currency ---------- */
.pill-btn {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem;
  height: 2.5rem; margin: 0; padding: 0 1rem;
  border: 1px solid var(--border-control); border-radius: 999px; background: none; color: var(--text);
  font-family: var(--font-b); font-size: 0.8438rem; font-weight: 500; line-height: 1.2; letter-spacing: 0;
  white-space: nowrap; cursor: pointer; transition: background-color .2s ease, border-color .2s ease;
}
.pill-btn:hover, .pill-btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-strong); }
.pill-btn .ico { flex: none; }
/* the row's 8px gap plus these margins: 16px before the language pill,
   8px between the two, 16px after the currency pill */
.lang-btn { margin-inline-start: 0.5rem; padding-inline: 0.75rem 1rem; }
.cur-btn { max-width: 13.75rem; margin-inline-end: 0.5rem; }
.pill-full { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-short { display: none; font-weight: 600; letter-spacing: .02em; }
/* the fitted row (js/i18n.js fitNav): the currency's code first, then the
   language's, then the search icon goes */
body.nav-cur-code .cur-btn .pill-full, body.nav-lang-code .lang-btn .pill-full { display: none; }
body.nav-cur-code .cur-btn .pill-short, body.nav-lang-code .lang-btn .pill-short { display: inline; }
body.nav-tight #palBtn { display: none; }
@media (pointer: coarse) { .pill-btn { height: 2.75rem; } }

/* ---------- the account: a person, and the points beside it once signed in ---------- */
.acct-btn { width: auto; min-width: 2.5rem; padding: 0 0.625rem; gap: 0.375rem; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.acct-btn[hidden] { display: none; }
.acct-btn .acct-pts { font-family: var(--font-b); font-size: 0.8125rem; font-weight: 600; line-height: 1; }
.acct-btn .acct-pts[hidden] { display: none; }
/* signed in: the person's initial in a filled circle, in place of the outline person, with the balance beside it */
.acct-btn .acct-av { width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-grid; place-items: center;
                     font-family: var(--font-b); font-size: 0.8125rem; font-weight: 650; line-height: 1; }
.acct-btn .acct-av[hidden] { display: none; }
.acct-btn[data-av] .ico { display: none; }
.acct-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .acct-btn { min-width: 2.75rem; } }

/* ---------- the primary button ---------- */
.nav-cta {
  flex: none; min-height: 2.5rem; height: 2.5rem; padding: 0 1.25rem; margin-inline-start: 0.5rem;
  font-size: 0.875rem; font-weight: 600;
}

/* ---------- phones and tablets: the logo, the bag and the menu ---------- */
.menu-btn { display: none; }
@media (max-width: 1023.98px) {
  #palBtn, .pill-btn, .theme-btn, .nav-cta, .acct-btn { display: none !important; }
  .nav-right { gap: 0.25rem; }
  .menu-btn { display: inline-grid; }
}

/* ---------- the menu sheet ---------- */
.msheet {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--text);
}
.msheet-in {
  display: flex; flex-direction: column; min-height: 100%; max-width: 37.5rem; margin: 0 auto;
  padding: env(safe-area-inset-top) max(1.5rem, env(safe-area-inset-right))
           calc(1.5rem + env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
}
.msheet-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 5rem; }
.msheet-top .nav-wa { margin-inline-start: auto; }
.msheet-top .logo-mark svg { display: block; }
.msheet-x { margin-inline-end: -0.625rem; }
.msheet-nav { display: grid; margin-top: 0.5rem; border-top: 1px solid var(--border); }
.msheet-row {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 4.35rem; margin: 0; padding: 0;
  border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text);
  font-family: var(--font-b); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; letter-spacing: 0;
  text-align: start; text-decoration: none; cursor: pointer;
}
.msheet-row > .ico { flex: none; margin-inline-start: auto; color: var(--muted); }
.msheet-row:focus-visible { outline-offset: -2px; }
.msheet-row[aria-current="page"] { font-weight: 600; }
[dir="rtl"] .msheet-pref > .ico { transform: scaleX(-1); }
.msheet-group { margin-top: 2rem; }
.msheet-h {
  margin: 0; padding: 0 0 0.75rem; border-bottom: 1px solid var(--border);
  font-size: 0.75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.msheet-k { flex: none; }
.msheet-v {
  flex: 1; min-width: 0; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-weight: 400;
}
.msheet-pref > .ico { margin-inline-start: 0; }
.msheet-appear { cursor: default; justify-content: space-between; }
.msheet-appear .seg2 { margin-inline-start: auto; }
.msheet-contact { margin: auto 0 0; padding-top: 2rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
.msheet-contact a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .msheet:not([hidden]) .msheet-in { animation: msheet-in .3s cubic-bezier(.22, 1, .36, 1); }
  @keyframes msheet-in { from { opacity: 0; transform: translateY(10px); } }
}

/* ---------- a two-way switch: Light | Dark ---------- */
.seg2 {
  display: inline-flex; align-items: center; gap: 2px; height: 2.75rem; padding: 0.1875rem;
  border: 1px solid var(--border-control); border-radius: 999px;
}
.seg2-b {
  position: relative; min-width: 4.75rem; height: 2.25rem; padding: 0 1rem;
  border: 0; border-radius: 999px; background: none; color: var(--text);
  font-family: var(--font-b); font-size: 0.875rem; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
/* the whole 44px row is the target, not just the 36px pill drawn in it */
.seg2-b::after { content: ""; position: absolute; inset: -0.25rem 0; }
.seg2-b:not([aria-pressed="true"]):hover { background: var(--surface-2); }
.seg2-b[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---------- the two popovers ----------
   Each pill opens its own: a small one for the twelve languages, and the
   searchable currency list. A transparent layer over the page takes the
   click that closes it; the popover itself sits under its pill, start
   edges together (js/currency.js place(), mirrored right to left). */
.pref-menu { position: fixed; inset: 0; z-index: 200; }
.pref-in {
  position: fixed; top: calc(var(--nav-inset) + 0.5rem); inset-inline-end: 1rem;
  display: flex; flex-direction: column; overflow: hidden;
  max-height: min(37.5rem, calc(100vh - var(--nav-inset) - 1.5rem));
  padding: 0.5rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
}
.pref-lang .pref-in { width: 15.5rem; }
.pref-cur .pref-in { width: min(25rem, calc(100vw - 2rem)); padding: 0.75rem; }
/* on a laptop the title is a quiet label over the list and Escape or a
   click outside closes; the close button is for the full-height sheet */
.pref-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pref-top b {
  display: block; margin: 0.25rem 0.625rem 0.5rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.pref-x { display: none; }
.pref-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pref-lang .pref-body { overflow-y: auto; overscroll-behavior: contain; }
.pref-langs { display: grid; gap: 2px; }
.lang-item, .cur-item {
  display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 2.5rem; padding: 0.375rem 0.625rem;
  border: 0; border-radius: 10px; background: none; color: var(--text);
  font-family: var(--font-b); font-size: 0.875rem; font-weight: 500; line-height: 1.3; letter-spacing: 0;
  text-align: start; cursor: pointer;
}
.lang-item:hover, .cur-item:hover, .cur-item.act { background: var(--surface-2); }
.lang-name, .cur-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cur-code { flex: none; font-size: 0.7188rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.tick { flex: none; visibility: hidden; }
.lang-item[aria-selected="true"] .tick, .cur-item.on .tick { visibility: visible; }
.lang-item[aria-selected="true"], .cur-item.on { font-weight: 600; }
.cur-note { margin: 0.75rem 0.625rem 0; font-size: 0.7813rem; line-height: 1.55; color: var(--muted); }
.pref-cur .cur-q { width: 100%; min-height: 2.75rem; margin: 0; font-size: 0.9375rem; border-radius: 10px; }
.cur-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 0.375rem; }
.cur-group {
  margin: 0.75rem 0.625rem 0.25rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.cur-empty { margin: 0.5rem 0.625rem; font-size: 0.875rem; color: var(--muted); }
.cur-foot { margin: 0.625rem 0 0; padding: 0.625rem 0.625rem 0; border-top: 1px solid var(--border); font-size: 0.7813rem; color: var(--muted); }
.pref-menu :where(button, input):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
[dir="rtl"] .cur-code { direction: ltr; unicode-bidi: isolate; }
@media (prefers-reduced-motion: no-preference) {
  .pref-menu:not([hidden]) .pref-in { animation: pref-in .22s ease-out; }
  @keyframes pref-in { from { opacity: 0; transform: translateY(8px); } }
}
@media (forced-colors: active) {
  .lang-item[aria-selected="true"], .cur-item.on { outline: 2px solid Highlight; }
  .seg2-b[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* phones and tablets: each is a full-height sheet with its title and a
   close button, opened from the menu's Language or Currency row */
@media (max-width: 1023.98px) {
  .pref-menu { background: var(--bg); }
  .pref-lang .pref-in, .pref-cur .pref-in {
    inset: 0; top: 0 !important; left: 0 !important; right: 0 !important; width: 100%; height: 100%; max-height: none;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    border: 0; border-radius: 0; box-shadow: none;
  }
  .pref-top { min-height: 4rem; padding-inline: max(1.5rem, env(safe-area-inset-left)) max(0.875rem, env(safe-area-inset-right)); }
  .pref-top b {
    margin: 0; font-family: var(--font-d); font-size: 1.375rem; font-weight: 650; line-height: 1.2;
    letter-spacing: -0.015em; text-transform: none; color: var(--text);
  }
  .pref-x { display: inline-grid; }
  .pref-body { padding: 0.5rem max(1.5rem, env(safe-area-inset-right)) 1rem max(1.5rem, env(safe-area-inset-left)); }
  .pref-langs { gap: 0; border-top: 1px solid var(--border); }
  .lang-item, .cur-item {
    min-height: 3.5rem; padding: 0 0.25rem; border-radius: 0; border-bottom: 1px solid var(--border);
    font-size: 1rem;
  }
  .cur-group { margin: 1.25rem 0.25rem 0.5rem; }
  .pref-cur .cur-q { min-height: 3rem; font-size: 1rem; }
}

/* The footer's language switch: the header picker's button, quietly. */
.ft-lang { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ft-lang[hidden] { display: none; }
.ft-lang:hover { color: var(--text, inherit); }