/* ============================================================================
   Digitour — base.css
   Design system: tokens, reset, typography, layout, buttons, header, footer.
   Mobile-first: every base rule targets small screens; @media (min-width: …)
   only ever adds. There is not a single max-width media query in this file.
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* Brand greens */
  --g900: #0a2e20;
  --g800: #0b3a29;
  --g700: #0f5138;
  --g600: #146b4b;
  --g500: #1b855d;
  --g100: #dcebe2;
  --g50:  #eef5f0;

  /* Text on dark surfaces. Every step clears 4.5:1 on both --g900 and --g700,
     so secondary text can be quieter without becoming unreadable. Low-alpha
     whites were the single biggest source of contrast failures. */
  --on-dark:   #dcebe2;   /* primary   — 11.5:1 on g900, 7.6:1 on g700 */
  --on-dark-2: #b9d0c3;   /* secondary —  8.7:1 on g900, 5.7:1 on g700 */
  --on-dark-3: #94ad9f;   /* meta, on g900 surfaces only — 5.9:1 */

  /* Accent */
  --gold:      #c9a227;
  --gold-dark: #a8871c;
  --gold-soft: #f0e3b6;

  /* Neutrals */
  --ink:   #14201a;
  --muted: #566159;
  --line:  #d8d3c8;
  --line-soft: #e8e4da;
  --sand:  #f1ede4;
  --ivory: #faf8f4;
  --white: #ffffff;

  /* Status */
  --danger: #b3261e;
  --danger-bg: #fdecea;
  --success: #146b4b;
  --warning: #8a6d00;

  /* Type */
  --serif: "Noto Serif", "Noto Serif Armenian", Georgia, "Times New Roman", serif;
  --sans:  "Noto Sans", "Noto Sans Armenian", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(10, 46, 32, .06);
  --sh-2: 0 1px 2px rgba(10, 46, 32, .06), 0 8px 24px rgba(10, 46, 32, .07);
  --sh-3: 0 8px 40px rgba(10, 46, 32, .14);
  --sh-4: 0 16px 64px rgba(10, 46, 32, .26);

  /* Radii */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;

  /* Layout */
  --container: 1280px;
  --gutter: 20px;
  --field-gap: 18px;
  --header-h: 60px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .14s;
  --dur-2: .24s;
  --dur-3: .42s;

  /* Stacking */
  --z-header: 100;
  --z-nav: 110;
  --z-pop: 300;
  --z-sheet: 500;
  --z-toast: 700;
}

@media (min-width: 640px)  { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --header-h: 84px; } }

/* ── 2. Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.24; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; }
dl, dd { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(10, 46, 32, .18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(10, 46, 32, .32); }

::selection { background: var(--gold-soft); color: var(--ink); }

/* Icons are inline by default so they never stack when the parent is not a
   flex container; flex/grid parents still lay them out normally. */
.i { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
/* .i's explicit display above otherwise beats the browser's own
   [hidden]{display:none} rule (author styles always win ties with UA
   styles, whatever the specificity) -- so a hidden .i icon (e.g. the
   burger's inactive menu/close SVG, toggled via el.hidden in site.js)
   would stay visibly rendered without this. */
.i[hidden] { display: none; }

/* Star rows are always horizontal, wherever they appear. */
.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--gold); vertical-align: -0.1em; }
.stars .i { vertical-align: baseline; }

:focus-visible {
  outline: 2px solid var(--g600);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible, [data-dark] :focus-visible { outline-color: var(--gold); }

/* ── 3. Typography scale (fluid) ─────────────────────────────────────────── */
.t-display { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 6.2vw, 3.5rem); line-height: 1.1;  letter-spacing: -.018em; }
.t-h1      { font-family: var(--serif); font-weight: 600; font-size: clamp(1.75rem, 5.2vw, 2.75rem); line-height: 1.18; letter-spacing: -.015em; }
.t-h2      { font-family: var(--serif); font-weight: 600; font-size: clamp(1.375rem, 3.6vw, 2rem);   line-height: 1.26; letter-spacing: -.01em; }
.t-h3      { font-family: var(--serif); font-weight: 600; font-size: clamp(1.125rem, 2.4vw, 1.375rem); line-height: 1.32; }
.t-h4      { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; line-height: 1.36; }
.t-lead    { font-size: clamp(.9375rem, 2.4vw, 1.125rem); line-height: 1.68; color: var(--muted); }
.t-body    { font-size: .9375rem; line-height: 1.74; color: var(--muted); }
.t-small   { font-size: .8125rem; line-height: 1.6;  color: var(--muted); }
.t-tiny    { font-size: .75rem;   line-height: 1.5;  color: var(--muted); }

/* AMD (֏) equivalent shown next to a USD price — resources/views/partials/amd-price.blade.php */
.price-amd { display: inline-block; font-size: .8125rem; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.on-dark .price-amd, .pricebox .price-amd { color: var(--on-dark-2); }

.eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--g600);
  margin: 0 0 10px;
}
.eyebrow--light { color: var(--g100); }
.eyebrow--gold  { color: var(--gold); }

.on-dark, .on-dark p, .on-dark li { color: var(--on-dark); }
/* Badges carry their own background, so they must keep their own text colour
   rather than inherit the light-on-dark one. */
.on-dark .badge--gold, .on-dark .badge--soft { color: var(--ink); }
.on-dark .badge--green, .on-dark .badge--save, .on-dark .badge--dark { color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

/* ── 4. Layout ───────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }

.section { padding-block: 56px; }
.section--tight { padding-block: 40px; }
.section--loose { padding-block: 64px; }
@media (min-width: 768px) {
  .section        { padding-block: 80px; }
  .section--tight { padding-block: 56px; }
  .section--loose { padding-block: 96px; }
}

.section--sand  { background: var(--sand);  border-block: 1px solid var(--line); }
.section--ivory { background: var(--ivory); }
.section--white { background: var(--white); }
.section--dark  { background: var(--g900); color: var(--g100); }
.section--green { background: var(--g700); color: var(--g100); }

.stack > * + * { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.flow > * + * { margin-top: 12px; }

.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.spread  { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }

/* Responsive grids: 1 col → 2 → 3/4 */
.cols-2, .cols-3, .cols-4 { display: grid; gap: 16px; }
@media (min-width: 600px) {
  .cols-2, .cols-3, .cols-4 { gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

.section-head { margin-bottom: 28px; }
.section-head p { margin-top: 10px; max-width: 56ch; }
@media (min-width: 768px) { .section-head { margin-bottom: 40px; } }

/* ── 5. Utilities ────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--gold); color: var(--ink); font-weight: 600; font-size: .875rem;
  padding: 12px 18px; border-radius: var(--r-sm); transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: 12px; }

.hide-mobile { display: none; }
@media (min-width: 1024px) { .hide-mobile { display: revert; } .hide-desktop { display: none !important; } }

.no-scroll { overflow: hidden; }
.text-gold { color: var(--gold); }
.text-ink  { color: var(--ink); }
.nowrap    { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }

/* Media frame: fixed ratio, cover, graceful failure */
.frame {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--g700), var(--g500) 55%, var(--g600));
  border-radius: var(--r-md);
}
.frame > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), opacity var(--dur-3) ease;
}
.frame > img[data-failed] { opacity: 0; }
.frame--4x5  { aspect-ratio: 4 / 5; }
.frame--4x3  { aspect-ratio: 4 / 3; }
.frame--16x9 { aspect-ratio: 16 / 9; }
.frame--16x10{ aspect-ratio: 16 / 10; }
.frame--1x1  { aspect-ratio: 1 / 1; }

.scrim { position: absolute; inset: 0; }
.scrim--bottom { background: linear-gradient(to top, rgba(10,46,32,.92) 0%, rgba(10,46,32,.35) 45%, rgba(10,46,32,.05) 75%); }
.scrim--full   { background: linear-gradient(to bottom, rgba(10,46,32,.22) 0%, rgba(10,46,32,.68) 62%, rgba(10,46,32,.88) 100%); }

.rule-gold { height: 1px; background: var(--gold); opacity: .2; }

/* ── 6. Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease,
              border-color var(--dur-1) ease, box-shadow var(--dur-2) ease,
              transform var(--dur-1) ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .i { flex-shrink: 0; }

.btn--cta       { background: var(--gold); color: var(--ink); }
.btn--cta:hover { background: var(--gold-dark); }
.btn--primary       { background: var(--g700); color: #fff; }
.btn--primary:hover { background: var(--g600); }
.btn--secondary       { background: transparent; color: var(--g700); border-color: var(--g700); }
.btn--secondary:hover { background: var(--g100); }
.btn--ghost       { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--on-dark-2); }
.btn--quiet       { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn--quiet:hover { border-color: var(--g600); color: var(--g700); }

.btn--sm    { min-height: 44px; padding: 0 16px; font-size: .8125rem; }
.btn--lg    { min-height: 54px; padding: 0 28px; font-size: 1rem; }
.btn--block { width: 100%; }
@media (min-width: 600px) { .btn--block { width: auto; } .btn--block-sm-auto { width: auto; } }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 600; color: var(--g700);
  text-decoration: none; min-height: 44px;
  transition: color var(--dur-1) ease, gap var(--dur-1) ease;
}
.link-arrow:hover { color: var(--g600); gap: 10px; }
.link-arrow svg { transition: transform var(--dur-1) ease; }

.link-plain { color: var(--g700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-plain:hover { color: var(--g600); }

/* ── 7. Badges, chips, pills ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-xs); white-space: nowrap;
}
.badge--gold   { background: var(--gold); color: var(--ink); }
.badge--green  { background: var(--g700); color: #fff; }
.badge--dark   { background: rgba(10,46,32,.78); color: #fff; backdrop-filter: blur(4px); }
.badge--save   { background: #b3261e; color: #fff; }
.badge--soft   { background: var(--g100); color: var(--g700); }
.badge--outline{ background: transparent; border: 1px solid var(--line); color: var(--muted); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font-size: .8125rem; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.chip:hover { border-color: var(--g600); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--g700); border-color: var(--g700); color: #fff; }

.chip-row {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row > * { scroll-snap-align: start; }

/* ── 8. Cards & surfaces ─────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.card--flat { box-shadow: none; }
.card--pad { padding: 20px; }
@media (min-width: 768px) { .card--pad { padding: 26px; } }

.panel {
  background: var(--g100);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
}
.panel--sand { background: var(--sand); }
.panel--warn { background: var(--danger-bg); border-color: #f3c9c5; }

.stat {
  padding: 24px 16px;
  text-align: center;
}
.stat__v { font-family: var(--serif); font-weight: 600; font-size: clamp(1.75rem, 6vw, 2.5rem); color: var(--g900); line-height: 1; margin-bottom: 8px; }
.stat__l { font-size: .875rem; font-weight: 600; color: var(--ink); }
.stat__s { font-size: .75rem; color: var(--muted); margin-top: 2px; }

/* Divided data strip: stacked with bottom borders on mobile, columns on desktop */
.datastrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.datastrip > * { border-bottom: 1px solid var(--line); }
.datastrip > *:nth-child(even) { border-left: 1px solid var(--line); }
.datastrip > *:nth-last-child(-n+2):nth-child(odd) { border-bottom: 0; }
.datastrip > *:nth-last-child(1):nth-child(even) { border-bottom: 0; }
@media (min-width: 1024px) {
  .datastrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .datastrip > * { border-bottom: 0; border-left: 0; border-right: 1px solid var(--line); }
  .datastrip > *:nth-child(even) { border-left: 0; }
  .datastrip > *:last-child { border-right: 0; }
}

/* ── 9. Header ───────────────────────────────────────────────────────────── */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  background: var(--g900);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background-color var(--dur-2) ease;
}
.header.is-stuck {
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 6px 24px rgba(10,46,32,.28);
}
.header__inner {
  height: 100%;
  /* Grid, not flex — a 3-column [logo][nav][langs+CTA] layout is what
     lets the middle nav column center ITSELF in the leftover space
     between the other two, regardless of how wide either one is. Flex
     alone can't do that without extra wrapper elements: nav would either
     hug the logo (flex-start, the old behavior) or need equal-width
     spacer elements on both sides, which breaks the moment logo/CTA
     widths differ (they always do). */
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  /* The header's own row deliberately ignores .wrap's shared 1280px
     content cap — that cap exists so page CONTENT lines up consistently
     section to section, but a nav bar reading as a centered island with
     empty green margins on a wide monitor (confirmed live: ~2000px
     browser, logo and CTA both sitting ~350px in from the true edges)
     looks like a mistake, not a design choice. max-width:none here lets
     the logo/CTA actually reach toward the real viewport edges; the
     smaller fixed side padding (vs. --gutter) keeps them from sitting
     flush against the glass. */
  max-width: none;
  padding-inline: 24px;
}
@media (min-width: 1024px) { .header__inner { padding-inline: 40px; } }
.brand {
  display: inline-flex; align-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.25rem;
  letter-spacing: .045em; color: #fff; text-decoration: none; flex-shrink: 0;
}
.brand span { color: var(--gold); }
@media (min-width: 1024px) { .brand { font-size: 1.3125rem; } }
/* The logo mark is a brand-green PNG-style graphic — on the header/footer's
   dark green it would sit at ~3.6:1 contrast (muddy, borderline-illegible),
   so it gets a small white chip behind it rather than sitting bare. */
.brand__logo { display: block; height: 38px; width: auto; background: #fff; padding: 6px 12px; border-radius: var(--r-sm); }
@media (min-width: 1024px) { .brand__logo { height: 54px; } }

.nav { display: none; }
/* This bar's own breakpoint — separate from the general --gutter/1024px
   tier above — because it needs meaningfully more room than "desktop"
   normally implies. Measured live against real rendered widths: with 9
   top-level items (Cruises/Flights/Corporate/Insurance all added since
   this was last tuned for ~7) plus the logo, language switcher and CTA
   button, the row needs ~1.33k px to lay out on one line even after
   trimming gaps/font-size below as far as still comfortably readable/
   tappable. Below this width the burger menu (which already lists every
   one of these same links) takes over instead — that's a deliberate,
   measured choice, not a leftover mobile-only breakpoint: at exactly
   1024-1439px the old single 1024px breakpoint let the CTA button's own
   text wrap to 2 lines and spill out past the header's fixed height,
   because nothing left of it could actually shrink far enough to give it
   room. */
@media (min-width: 1440px) {
  /* justify-self centers the nav's own (content-sized) box within its 1fr
     grid column, i.e. in the leftover space between the logo and the
     langs/CTA group — not a margin hack, which would only have worked for
     one specific logo/CTA width combination. */
  .nav { display: flex; align-items: center; gap: 28px; justify-self: center; }
  .nav a {
    font-size: .8125rem; font-weight: 500; color: var(--on-dark);
    text-decoration: none; padding: 6px 0; position: relative;
    transition: color var(--dur-1) ease;
    /* Flex items shrink below their content's natural width by default —
       with no explicit width and several multi-word labels (hy/ru menus
       especially), that let the browser wrap mid-label onto two stacked
       lines once the row got tight instead of keeping each link on one
       line, same as every other nav on the site. */
    white-space: nowrap;
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-2) var(--ease);
  }
  .nav a:hover { color: #fff; }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { color: #fff; }
}

.header__end { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* Belt-and-suspenders alongside the .nav trim above — even if the row is
   still tight on some viewport, the CTA button itself must never wrap: a
   wrapped 2nd line has nowhere to go inside the header's fixed height and
   visibly spills out under the content below. */
.header__end .btn { white-space: nowrap; flex-shrink: 0; }

.langs { display: none; }
@media (min-width: 1440px) { .langs { display: flex; gap: 0; } }
.langs [data-lang] {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-size: .8125rem; font-weight: 500; padding: 6px 6px; border-radius: var(--r-xs);
  min-height: 44px; color: var(--on-dark-2); transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.langs [data-lang]:hover { color: #fff; }
.langs [data-lang][aria-pressed="true"] { background: rgba(255,255,255,.14); color: #fff; }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: #fff; border-radius: var(--r-sm);
}
.burger:hover { background: rgba(255,255,255,.1); }
/* Matches .nav/.langs's own breakpoint above, not the general 1024px tier
   — the burger must stay up exactly as long as the full nav is hidden. */
@media (min-width: 1440px) { .burger { display: none; } }

/* Mobile navigation panel */
.mobnav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-nav);
  background: var(--g900);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--gutter) 32px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.mobnav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.mobnav a.mobnav__link {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.0625rem; font-weight: 500; color: var(--on-dark);
  text-decoration: none; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.09);
}
.mobnav a.mobnav__link[aria-current="page"] { color: var(--gold); }
.mobnav__foot { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mobnav__langs { display: flex; gap: 8px; }
.mobnav__langs [data-lang] {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  flex: 1; min-height: 46px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.14); color: var(--on-dark-2); font-weight: 500;
}
.mobnav__langs [data-lang][aria-pressed="true"] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.36); color: #fff; }
.mobnav__contact { display: grid; gap: 2px; margin-top: 8px; font-size: .875rem; }
.mobnav__contact li a, .mobnav__contact li span {
  display: flex; align-items: center; gap: 11px;
  min-height: 46px; color: var(--on-dark); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobnav__contact li:last-child span { border-bottom: 0; }
.mobnav__contact li a:hover { color: #fff; }
.mobnav__contact .i { color: var(--gold); }

/* Page offset for fixed header */
.page { padding-top: var(--header-h); }
.page--flush { padding-top: 0; }

/* ── 10. Breadcrumb ──────────────────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; }
.crumbs a { color: var(--g700); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--muted); }
.crumbs .sep { color: #a9a294; }
.on-dark .crumbs a { color: var(--g100); }
.on-dark .crumbs [aria-current] { color: var(--on-dark-2); }
.on-dark .crumbs .sep { color: var(--on-dark-3); }

/* ── 11. Page hero (interior pages) ──────────────────────────────────────── */
.phero {
  background: var(--g900);
  padding: 28px 0 34px;
  position: relative;
  overflow: hidden;
}
.phero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); opacity: .22;
}
.phero h1 { color: #fff; margin: 14px 0 10px; }
.phero p  { color: var(--g100); max-width: 62ch; }
@media (min-width: 768px) { .phero { padding: 40px 0 48px; } }

/* ── 12. Forms ───────────────────────────────────────────────────────────── */
/* Forms are their own container, so fields pair up on the form width rather
   than the viewport width — an aside form stays one column while the same
   markup in a wide column goes two-up. */
form { container-type: inline-size; }

.field { display: block; min-width: 0; }
.field + .field { margin-top: var(--field-gap); }

/* Short, related inputs sit on one row instead of a long lonely column. */
.field-row { display: grid; gap: var(--field-gap); }
.field-row > .field + .field { margin-top: 0; }
.field-row + .field, .field + .field-row, .field-row + .field-row { margin-top: var(--field-gap); }
@container (min-width: 30rem) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.field__label {
  display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: 7px;
}
.field__label .req { color: var(--g600); }
.field__hint { font-size: .75rem; color: var(--muted); margin-top: 6px; }
.field__error {
  display: none; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--danger); margin-top: 6px; font-weight: 500;
}
.field.is-invalid .field__error { display: flex; }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem; /* ≥16px prevents iOS zoom on focus */
  line-height: 1.4;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
/* Keyed to the pointer, not the viewport: iOS Safari zooms the page when a
   control under 16px takes focus and never zooms back out. A tablet in
   portrait is wide enough to hit a width breakpoint but is still a touch
   device, so the width query got this wrong. */
@media (hover: hover) and (pointer: fine) {
  .input, .select, .textarea { font-size: .9375rem; }
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--g600); box-shadow: 0 0 0 3px rgba(20,107,75,.14);
}
.textarea { min-height: 120px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23566159' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); }

.form-dark .field__label { color: var(--on-dark); }
.form-dark .field__label .req { color: var(--gold-light); }
/* background-COLOR, not the shorthand: the shorthand would reset the select's
   chevron background-image to repeat from 0,0 and tile it across the field. */
.form-dark .input, .form-dark .select, .form-dark .textarea {
  background-color: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff;
}
.form-dark .input::placeholder, .form-dark .textarea::placeholder { color: var(--on-dark-3); }
.form-dark .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23dcebe2' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.form-dark .select option { color: var(--ink); }
.form-dark .input:focus, .form-dark .select:focus, .form-dark .textarea:focus {
  border-color: var(--on-dark-2); box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}

.form-note { font-size: .75rem; color: var(--muted); line-height: 1.6; }
.form-dark .form-note { color: var(--on-dark-2); }

.form-status {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px; border-radius: var(--r-md); font-size: .875rem;
}
.form-status--ok   { background: var(--g100); color: var(--g900); }
.form-status--err  { background: var(--danger-bg); color: #7c1d17; }
/* Without this, the [hidden] attribute loses the cascade tie to the class's
   own `display: flex` and every success box renders visible by default —
   the same defensive rule every other hideable component here already has
   (.modal[hidden], .pcard[hidden], etc.) except this one was missing it. */
.form-status[hidden] { display: none; }

/* ── 13. Accordion ───────────────────────────────────────────────────────── */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 0; text-align: left;
  font-family: var(--serif); font-size: .9375rem; font-weight: 600; color: var(--ink); line-height: 1.45;
  transition: color var(--dur-1) ease;
}
.acc__btn:hover { color: var(--g700); }
.acc__icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center; margin-top: 1px;
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(180deg); background: var(--g700); border-color: var(--g700); color: #fff; }
/* Answers stay in the DOM (crawlable); collapsed via grid-rows, not display:none.
   The button is wrapped in a heading, so the open state is matched on the item —
   .is-open is set by JS, :has() covers the no-JS case in modern browsers. */
.acc__body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease), opacity var(--dur-2) ease;
  opacity: 0;
}
.acc__item.is-open > .acc__body { grid-template-rows: 1fr; opacity: 1; }
.acc__item:has(> h3 > .acc__btn[aria-expanded="true"]) > .acc__body { grid-template-rows: 1fr; opacity: 1; }
.acc__body > div { overflow: hidden; }
.acc__body p { padding-bottom: 20px; font-size: .875rem; line-height: 1.75; color: var(--muted); max-width: 72ch; }

/* ── 14. Footer ──────────────────────────────────────────────────────────── */
.footer { background: var(--g900); color: var(--on-dark-2); padding-top: 48px; }
.footer__rule { max-width: var(--container); margin: 0 auto 36px; }
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 600px)  { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 24px; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; } }
.footer h3 { font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 14px; }
.footer a { color: var(--on-dark-2); text-decoration: none; }
.footer li a { display: inline-block; padding: 7px 0; font-size: .875rem; transition: color var(--dur-1) ease; }
.footer a:hover { color: #fff; }
.footer__brandline { color: var(--on-dark-2); font-size: .875rem; line-height: 1.7; margin: 12px 0 18px; max-width: 30ch; }
.footer__contact { display: grid; gap: 2px; font-size: .8125rem; color: var(--on-dark-3); }
.footer__contact li a, .footer__contact li span {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 4px 0; line-height: 1.4;
}
.footer__contact .i { color: var(--on-dark-3); }
.footer__contact li a:hover .i { color: var(--gold); }
.footer__bottom {
  margin-top: 40px; border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0 28px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  font-size: .75rem; color: var(--on-dark-3);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 16px; }

/* ── 15. Mobile sticky action bar ────────────────────────────────────────── */
.stickybar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: flex; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--g900); border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 -6px 28px rgba(10,46,32,.35);
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease);
}
.stickybar[data-show="true"] { transform: none; }
.stickybar .btn { flex: 1; min-height: 46px; font-size: .875rem; padding: 0 12px; }
body:has(.stickybar) .footer { padding-bottom: 76px; }
@media (min-width: 1024px) {
  .stickybar { display: none; }
  body:has(.stickybar) .footer { padding-bottom: 0; }
}

/* ── 16. Scroll reveal ───────────────────────────────────────────────────── */
/* Guarded by the .js class that the inline head script sets. Without
   JavaScript — or if anything goes wrong before the observer runs — the
   content is simply visible. Never hide content behind a script that has to
   succeed. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, #f3f1ea 50%, var(--line-soft) 75%);
  background-size: 840px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .9s linear infinite; }

@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ── 16b. Toast ──────────────────────────────────────────────────────────── */
.toast {
  position: fixed; z-index: var(--z-toast);
  left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translate(-50%, 130%);
  max-width: calc(100vw - 32px);
  background: var(--g900); color: #fff;
  font-size: .8125rem; line-height: 1.5;
  padding: 13px 18px; border-radius: 999px;
  box-shadow: var(--sh-3);
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) ease;
  opacity: 0; text-align: center;
}
.toast[data-show="true"] { transform: translate(-50%, 0); opacity: 1; }
@media (min-width: 1024px) { .toast { bottom: 28px; } }

/* ── 16c. Live-search overlay ────────────────────────────────────────────── */
/* Only the Maldives search is a slow (20-30s) live third-party lookup, so
   only that submit path shows this — every other destination search is an
   instant DB query and never needs it. */
.search-overlay {
  position: fixed; inset: 0; z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10, 46, 32, .92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.search-overlay[hidden] { display: none; }
.search-overlay__box {
  max-width: 420px; width: 100%; text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-xl);
  padding: 40px 28px;
  box-shadow: var(--sh-4);
}
.search-overlay__spinner { display: inline-flex; color: var(--gold); margin-bottom: 18px; }
.search-overlay__box h3 { color: #fff; font-size: 1.15rem; margin-bottom: 8px; }
.search-overlay__box p { color: var(--on-dark-2); font-size: .875rem; line-height: 1.6; margin: 0 auto; max-width: 34ch; }

/* ── 16d. Quick-book modal ───────────────────────────────────────────────── */
/* --vvh is kept in sync with window.visualViewport's height by the inline
   script in layouts/app.blade.php. Plain `100vh`/`inset:0` use the LAYOUT
   viewport, which mobile browsers do NOT shrink when the on-screen keyboard
   opens — a position:fixed modal sized/anchored off that stays the same
   physical size while the keyboard covers its lower half, pushing the
   submit button (and sometimes the whole box, on iOS) out of the visible
   area. Falls back to 100vh where JS hasn't run yet or the API is
   unavailable, which is the old (keyboard-unaware) behavior. */
.modal {
  position: fixed; top: 0; left: 0; right: 0; height: var(--vvh, 100vh);
  z-index: var(--z-sheet);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; }
.modal__box {
  position: relative; width: 100%; max-width: 480px;
  max-height: calc(var(--vvh, 100vh) - 32px); overflow-y: auto; overflow-x: hidden;
  background: var(--white); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 28px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow: var(--sh-4);
  animation: pop-in var(--dur-3) var(--ease);
}
/* Without an explicit overflow-x, the box computed it as auto too (CSS
   spec: overflow-y non-visible + overflow-x visible → the visible axis
   becomes auto) — any content wider than the box turned that into a
   left-right scrollbar on the whole popup instead of the content just
   wrapping/shrinking. overflow-x: hidden forces every child back to
   actually fitting max-width: 480px rather than silently widening it. */
@media (min-width: 640px) {
  .modal { align-items: center; }
  .modal__box { border-radius: var(--r-xl); padding: 32px; }
}
.modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; color: var(--muted);
}
.modal__close:hover { background: var(--sand); color: var(--ink); }
.modal__summary { font-size: .875rem; color: var(--muted); margin: 4px 0 20px; padding-right: 32px; }

/* ── 17. Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── 18. Print ───────────────────────────────────────────────────────────── */
@media print {
  .header, .mobnav, .stickybar, .searchbar, .btn { display: none !important; }
  .page { padding-top: 0; }
  body { background: #fff; font-size: 11pt; }
  .acc__body { grid-template-rows: 1fr !important; opacity: 1 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ── 19. Tap targets ─────────────────────────────────────────────────────── */
/* Anything a finger has to hit gets at least ~44px of reachable area. Inline
   links inside running text are exempt — they are read, not tapped at speed. */
.brand {
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.footer li a { padding: 10px 0; }
.footer__bottom nav a { display: inline-block; padding: 12px 0; }
.footer__bottom { gap: 4px 20px; }
.crumbs a { display: inline-block; padding: 6px 0; }

/* Honeypot — changed 2026-09-09 from the old left:-9999px off-screen
   approach to plain display:none. The old technique still left the field
   discoverable in the render tree, just positioned off-screen — Chrome/
   Bitwarden/etc.'s autofill scans the DOM regardless of position and would
   offer to fill a "company" text field it found sitting next to name/
   email/phone, and the same pattern (a form field present in the markup
   but hidden from the visible page) is exactly what an automated scanner
   flags as deceptive/hidden-data-collection — the likely cause of a Search
   Console security report, present identically on every form on the site
   (contact/corporate/insurance/visas/cruise+flight booking modals, all
   share this one .hp class). display:none removes it from the DOM's
   rendered/focusable state entirely, which autofill engines and scanners
   alike correctly treat as "not a real field a user could ever see or
   fill" — same anti-spam effect against bots that don't evaluate CSS at
   all, none of the "field hidden from view" red flags for anything that
   does. */
.hp { display: none; }

/* Small controls are fine with a mouse; on a touch screen they must still
   clear 16px so focusing them does not zoom the page. */
@media (hover: none) and (pointer: coarse) {
  .input, .select, .textarea, .select--sm,
  .search__select, .trav__age select, .childage select { font-size: 16px; }
}

/* Languages that are not published yet stay legible but read as unavailable. */
.langs button[aria-disabled="true"],
.mobnav__langs button[aria-disabled="true"] { opacity: .55; }
.langs button[aria-disabled="true"]:hover,
.mobnav__langs button[aria-disabled="true"]:hover { opacity: .8; }