/* Eway Destinations v2 — "deal board" design system.
   Tokens taken verbatim from the approved design. */

:root {
  --bg: #0f1722;
  --card: #18222f;
  --line: #243244;
  --text: #eef2f6;
  --muted: #b6c2cf;
  --dim: #8595a8;
  --placeholder: #6f7f92;
  --green: #2fd06f;
  --yellow: #ffd84a;
  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--yellow); }
input, select, textarea, button { font: inherit; }
::placeholder { color: var(--placeholder); }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

/* ---------- Date inputs ----------
   The dropdown panel itself is browser chrome and only follows color-scheme, so
   dark is the most we can do there. The calendar button is reachable though, and
   its default glyph reads as grey browser furniture on these cards — replace it
   with a green one so the control belongs to the theme. Declared once here
   rather than per-card, so every date field matches. */
input[type="date"] { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  width: 1.05em; height: 1.05em;
  margin-left: 6px;
  cursor: pointer;
  opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd06f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="date"]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Firefox has no picker indicator to style; the field still inherits the theme. */

/* ---------- Selects ----------
   color-scheme is what makes the popup list render dark — without it the option
   list opens white against these cards. Then drop the native arrow for a green
   chevron so the control reads as ours. Anything styling a select after this
   must use background-color, not the background shorthand, or it wipes the
   chevron. */
select {
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd06f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: .62em;
  padding-right: 1.5em;
}
select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
select::-ms-expand { display: none; }

/* Headlines: Archivo variable width, very wide and tight. */
h1, h2, .display {
  font-weight: 900;
  font-stretch: 120%;
  letter-spacing: -.01em;
  margin: 0;
}
h1 { font-size: clamp(52px, 6vw, 80px); line-height: .88; font-stretch: 125%; letter-spacing: -.02em; }
h2 { font-size: clamp(34px, 4vw, 44px); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--dim); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15, 23, 34, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1d2938;
}
.site-header .bar {
  max-width: var(--maxw); margin: 0 auto;
  padding: 18px var(--pad);
  display: flex; flex-wrap: wrap; gap: 16px 28px;
  align-items: center; justify-content: space-between;
}
.wordmark { color: var(--text); line-height: 1; display: flex; align-items: center; gap: 10px; }
.wordmark .mark { width: 40px; height: 40px; object-fit: contain; flex: none; }
.site-footer .wordmark .mark { width: 34px; height: 34px; }
.wordmark .name { font-weight: 900; font-size: 22px; font-stretch: 115%; }
.wordmark .name span { color: var(--green); }
.wordmark .tag { font-size: 10px; letter-spacing: .16em; color: var(--dim); margin-top: 3px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; }
.site-nav a { padding: 6px 0; color: var(--muted); border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--text); }
.site-nav a.active { color: var(--text); border-bottom-color: var(--green); }
.header-right { display: flex; gap: 10px; align-items: center; }
.header-phone { font-size: 15px; font-weight: 600; color: var(--text); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: 0; border-radius: var(--r-md); font-weight: 800;
  text-align: center; }
.btn-green { background: var(--green); color: var(--bg); padding: 16px; font-size: 18px; }
.btn-green:hover { background: #29b862; color: var(--bg); }
.btn-yellow-outline { background: transparent; border: 1.5px solid var(--yellow);
  color: var(--yellow); font-weight: 700; font-size: 14px; padding: 8px 14px;
  border-radius: var(--r-sm); }
.btn-yellow-outline:hover { background: var(--yellow); color: var(--bg); }
.btn-ghost { background: transparent; border: 1.5px solid currentColor; color: inherit;
  font-size: 15px; padding: 12px; border-radius: 12px; width: 100%; }
.link-green { background: none; border: 0; cursor: pointer; color: var(--green);
  font-weight: 700; font-size: 16px; padding: 0; }

/* ---------- Hero ----------
   Full-bleed Burj photo behind the hero. The gradients are not decoration —
   white and green type on a photo fails contrast without them, so they keep
   the left column near-solid and let the tower show through on the right. */
.hero-bg {
  background-color: var(--bg);
  background-image:
    linear-gradient(to bottom, rgba(15,23,34,.06) 0%, rgba(15,23,34,0) 45%, rgba(15,23,34,.55) 90%, var(--bg) 100%),
    linear-gradient(to right, var(--bg) 0%, rgba(15,23,34,.80) 23%, rgba(15,23,34,.08) 55%, rgba(15,23,34,0) 100%),
    url('../img/photos/hero-burj-1600.webp');
  background-size: auto, auto, cover;
  background-position: center, center, center 32%;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  /* the 800px file is enough at phone widths, and saves 200 KB on mobile data */
  .hero-bg {
    background-image:
      linear-gradient(to bottom, rgba(15,23,34,.62) 0%, rgba(15,23,34,.45) 35%, var(--bg) 100%),
      linear-gradient(to right, rgba(15,23,34,.80) 0%, rgba(15,23,34,.70) 100%),
      url('../img/photos/hero-burj-800.webp');
  }
}

.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: 48px var(--pad) 64px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 48px; align-items: center;
}
/* Caption pill + photo credit, sitting on the image below the hero columns. */
.hero-foot {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 34px;
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: center; justify-content: space-between;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(15, 23, 34, .72); border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  border-radius: 999px; padding: 8px 8px 8px 16px;
  color: var(--text); font-size: 14px; font-weight: 600;
}
.hero-pill:hover { color: var(--text); border-color: var(--green); }
.hero-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.hero-pill .tag {
  background: var(--yellow); color: var(--bg); font-weight: 800; font-size: 13px;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.hero-credit { font-size: 12px; color: var(--dim); }

.hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; }
.hero-stats .n { font-weight: 900; font-size: 30px; font-stretch: 115%; }
.hero-stats .l { font-size: 13px; color: var(--dim); }
.hero p.lede { margin: 26px 0 0; font-size: 19px; line-height: 1.5; color: var(--muted);
  max-width: 480px; text-wrap: pretty; }

/* ---------- Build-your-request card ---------- */
.build { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 28px; position: relative; }
.build .label { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--yellow); }
.build .sentence { font-size: 26px; line-height: 1.9; font-weight: 600; margin-top: 10px; }
.build select, .build input[type=date] {
  background-color: var(--bg); color: var(--green); border: 0; border-bottom: 2px solid var(--green);
  font-weight: 700; font-size: 24px; padding: 0 1.4em 0 4px; max-width: 100%;
  color-scheme: dark;
}
.build input[type=date] { font-size: 20px; }
.build .preview { margin-top: 18px; background: var(--bg); border-radius: var(--r-md);
  padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.build .preview .k { color: var(--dim); }
.build .btn-green { margin-top: 14px; width: 100%; }
.build .alt { margin-top: 12px; font-size: 13px; color: var(--dim); text-align: center; }

.sticker {
  position: absolute; top: -28px; right: -14px; z-index: 2; transform: rotate(8deg);
  background: var(--yellow); color: var(--bg); font-weight: 900; font-size: 17px;
  font-stretch: 110%; padding: 12px 16px; border-radius: 999px; text-align: center;
  line-height: 1.05;
}
.sticker .big { font-size: 30px; }

/* ---------- Deals ticker ---------- */
.ticker { background: var(--yellow); color: var(--bg); overflow: hidden; }
.ticker-track {
  display: flex; gap: 40px; white-space: nowrap; width: max-content;
  padding: 14px 0; font-weight: 800; font-size: 16px; font-stretch: 110%;
  animation: ticker 32s linear infinite;
}
.ticker-track > span { flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; padding-inline: var(--pad); }
}

/* ---------- Sections ---------- */
section { padding-top: 80px; }
section.first { padding-top: 72px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 12px; margin-bottom: 24px; }
.sec-head .note { font-size: 15px; color: var(--dim); }

.grid { display: grid; gap: 18px; }
.g-520 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.g-300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g-270 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.g-260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.g-250 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.g-160 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }

/* Striped placeholder — used wherever a photo is missing. */
.ph { background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px,
      rgba(255,255,255,.02) 10px 20px);
  display: flex; align-items: flex-end; padding: 10px;
  font: 500 10px 'JetBrains Mono', monospace; color: rgba(255,255,255,.45); }
.shot { position: relative; overflow: hidden; background: #111a26; }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Ticket stub card ---------- */
.stub { display: grid; grid-template-columns: 140px minmax(0, 1fr) 140px;
  background: var(--card); border-radius: 16px; overflow: hidden; position: relative;
  color: var(--text); }
.stub:hover { color: var(--text); }
/* Definite height, not min-height: the image's height:100% only resolves against
   a definite parent, so with min-height a portrait source (Burj is 800x1067)
   renders at its own aspect ratio and stretches the whole row. */
.stub .pic { height: 130px; }
.stub .mid { padding: 18px 20px; overflow: hidden; }
.stub .emirate { font-size: 12px; letter-spacing: .12em; color: var(--dim); font-weight: 600; }
.stub .name { font-size: 20px; font-weight: 700; margin-top: 4px; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stub .meta { font-size: 14px; color: var(--muted); margin-top: 4px; }
.stub .price { background: var(--yellow); color: var(--bg); padding: 18px 16px;
  display: flex; flex-direction: column; justify-content: center;
  border-left: 2px dashed var(--bg); }
.stub .price .off { font-weight: 900; font-size: 14px; }
.stub .price .from { font-size: 12px; font-weight: 600; margin-top: 6px; }
.stub .price .amt { font-weight: 900; font-size: 34px; font-stretch: 115%; line-height: 1; }
.stub .price .was { font-size: 12px; font-weight: 600; text-decoration: line-through;
  opacity: .6; margin-top: 4px; }
/* the two half-circle notches that make it read as a torn ticket */
.stub .notch { position: absolute; right: 131px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--bg); }
.stub .notch.t { top: -9px; }
.stub .notch.b { bottom: -9px; }
@media (max-width: 560px) {
  .stub { grid-template-columns: 96px minmax(0, 1fr) 118px; }
  .stub .notch { right: 109px; }
  .stub .price .amt { font-size: 26px; }
}

/* ---------- Safari tiers ---------- */
.tier { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
  position: relative; background: transparent; color: var(--text); }
.tier.popular { background: var(--green); color: var(--bg); border-color: var(--green); }
.tier .badge { position: absolute; top: -12px; right: 18px; background: var(--bg);
  color: var(--yellow); font-weight: 800; font-size: 12px; padding: 5px 10px;
  border-radius: 999px; border: 1px solid var(--yellow); }
.tier .label { font-size: 14px; letter-spacing: .12em; font-weight: 700; opacity: .8; }
.tier .amt { font-weight: 900; font-size: 52px; font-stretch: 115%; margin: 8px 0; }
.tier .perk { font-size: 16px; line-height: 1.8; }
.tier .btn-ghost { margin-top: 18px; }

/* ---------- Tour / package cards ---------- */
.tcard { text-align: left; background: none; border: 0; padding: 0; color: var(--text);
  display: block; }
.tcard .pic { height: 180px; border-radius: var(--r-md); overflow: hidden; }
.tcard .name { font-size: 18px; font-weight: 700; margin-top: 12px; }
.tcard .meta { font-size: 14px; color: var(--muted); margin-top: 2px; }
.tcard .price { font-size: 15px; margin-top: 6px; }
.tcard .price b { color: var(--yellow); }
.tcard .price span { color: var(--dim); }

.pkg { background: var(--card); border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; }
.pkg .pic { height: 160px; position: relative; }
.pkg .off { position: absolute; top: 12px; right: 12px; background: var(--yellow);
  color: var(--bg); font-weight: 900; font-size: 15px; font-stretch: 110%;
  padding: 6px 10px; border-radius: 999px; transform: rotate(4deg); }
.pkg .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pkg .name { font-size: 21px; font-weight: 800; font-stretch: 110%; }
.pkg .nights { font-size: 13px; color: var(--dim); margin-top: 2px; }
.pkg .inc { margin: 12px 0 14px; display: grid; gap: 6px; }
.pkg .inc div { font-size: 14px; color: var(--muted); display: flex; gap: 8px; }
.pkg .inc .tick { color: var(--green); }
.pkg .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pkg .tags span { font-size: 12px; font-weight: 600; border: 1px solid var(--line);
  color: var(--muted); padding: 4px 8px; border-radius: 6px; }
.pkg .cta { margin-top: 14px; text-align: center; background: var(--green); color: var(--bg);
  font-weight: 800; padding: 12px; border-radius: 12px; }

/* ---------- Emirate tiles ---------- */
.etile { text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 0; overflow: hidden; color: var(--text); display: block; }
.etile:hover { color: var(--text); border-color: var(--green); }
.etile .pic { height: 150px; }
.etile .body { padding: 14px; }
.etile .n { font: 500 11px 'JetBrains Mono', monospace; color: var(--green); }
.etile .name { font-weight: 800; font-size: 17px; margin-top: 4px; line-height: 1.1; }
.etile .tag { font-size: 13px; color: var(--dim); margin-top: 4px; }

/* ---------- Numbered service blocks ---------- */
.svc { text-align: left; background: none; border: 0; border-top: 3px solid var(--green);
  padding: 18px 0 0; color: var(--text); display: block; }
.svc:hover { color: var(--text); }
.svc .n { font-weight: 900; font-size: 40px; font-stretch: 115%; color: var(--green); }
.svc .h { font-weight: 700; font-size: 22px; margin-top: 6px; }
.svc .d { color: var(--muted); font-size: 15px; margin-top: 6px; line-height: 1.5; }

/* ---------- Why grid ----------
   One bordered block; the 1px gap over a --line background paints the hairlines. */
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.why { background: var(--bg); padding: 26px; }
.why .t { font-weight: 800; font-size: 19px; }
.why .d { color: var(--muted); font-size: 15px; margin-top: 8px; line-height: 1.55;
  text-wrap: pretty; }

/* ---------- Agent band ---------- */
.agent-band {
  margin-top: 80px; background: var(--yellow); color: var(--bg);
  border-radius: var(--r-xl); padding: 34px 38px;
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center;
}
.agent-band .h { font-weight: 900; font-stretch: 120%; font-size: clamp(26px, 3vw, 36px); }
.agent-band .d { font-size: 17px; margin-top: 6px; font-weight: 500; }
.agent-band .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.agent-band .b1 { background: var(--bg); color: var(--yellow); border: 0; font-weight: 800;
  font-size: 16px; padding: 15px 22px; border-radius: 12px; cursor: pointer; }
.agent-band .b2 { background: transparent; border: 2px solid var(--bg); color: var(--bg);
  font-weight: 800; font-size: 16px; padding: 13px 22px; border-radius: 12px; }
.agent-band .b2:hover { background: var(--bg); color: var(--yellow); }

/* ---------- Footer ---------- */
.site-footer { margin-top: 72px; border-top: 1px solid var(--line); }
.site-footer .cols { max-width: var(--maxw); margin: 0 auto;
  padding: 44px var(--pad) 28px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 32px; font-size: 15px; line-height: 2; color: var(--muted); }
.site-footer .h4 { color: var(--text); font-weight: 700; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--green); }
.site-footer .fmark { display: inline-block; font-weight: 900; font-size: 22px;
  font-stretch: 115%; color: var(--text); line-height: 1; }
.site-footer .fmark span { color: var(--green); }
.site-footer .fmark:hover { color: var(--text); }
.site-footer .about { line-height: 1.6; margin: 6px 0 0; max-width: 240px; }
.site-footer .legal { max-width: var(--maxw); margin: 0 auto;
  padding: 18px var(--pad) 32px; font-size: 13px; color: var(--dim);
  border-top: 1px solid #1d2938; }

/* ---------- Floating WhatsApp ---------- */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 30;
  background: var(--green); color: var(--bg); font-weight: 800; font-size: 15px;
  padding: 14px 20px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.wa-float:hover { color: var(--bg); background: #29b862; }

/* ---------- Agent modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(6, 10, 16, .72);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none !important; }
.modal .panel { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 28px; width: min(100%, 420px); position: relative; }
.modal .title { font-weight: 900; font-stretch: 115%; font-size: 26px; }
.modal .sub { color: var(--dim); font-size: 14px; margin-top: 4px; }
.modal .close { position: absolute; top: 14px; right: 16px; background: none; border: 0;
  color: var(--dim); font-size: 22px; cursor: pointer; line-height: 1; }
.field { width: 100%; background-color: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; padding: 13px 14px; margin-top: 12px; }
.field:focus { outline: 2px solid var(--green); outline-offset: 1px; }
select.field { padding-right: 2.4em; background-position: right 13px center; }
.modal .btn-green { width: 100%; margin-top: 16px; }
.modal .switch { margin-top: 14px; text-align: center; font-size: 14px; color: var(--dim); }
.msg { margin-top: 12px; font-size: 14px; border-radius: 10px; padding: 10px 12px; }
.msg.err { background: rgba(255, 90, 90, .12); color: #ff9c9c; }
.msg.ok { background: rgba(47, 208, 111, .12); color: var(--green); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 18px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-weight: 400; font-size: 24px;
  line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.6;
  max-width: 70ch; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.rates { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
table.rates th { text-align: left; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); font-weight: 700; padding: 12px 14px;
  border-bottom: 1px solid var(--line); }
table.rates td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
table.rates td:first-child { color: var(--text); font-weight: 600; }
table.rates td.p { color: var(--yellow); font-weight: 800; white-space: nowrap; }

/* ---------- Misc ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--text);
  border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 15px; cursor: pointer; }
.chip.active { background: var(--green); border-color: var(--green); color: var(--bg); }
.chip:hover { color: var(--text); border-color: var(--green); }
.chip.active:hover { color: var(--bg); }
.fact { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.fact .k { font-size: 12px; letter-spacing: .1em; color: var(--dim); font-weight: 700;
  text-transform: uppercase; }
.fact .v { font-weight: 700; margin-top: 4px; }
.lede { color: var(--muted); }
.notice { border-left: 3px solid var(--green); padding: 14px 18px; background: var(--card);
  border-radius: 0 12px 12px 0; }



.build .b-num:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ---------- Themed date picker ----------
   Same reasoning as the dropdown: the native date panel is browser chrome —
   it renders grey with blue accents regardless of our tokens, and Playwright
   cannot screenshot it. eway.js swaps it for this in-page calendar and keeps
   the real <input type=date> as the value holder, so existing handlers run
   unchanged. No JS -> the native picker stays. */
.dp { position: relative; display: inline-block; max-width: 100%; }
.dp > input[type="date"] { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
.dp-btn {
  display: inline-flex; align-items: center; gap: .45em;
  cursor: pointer; text-align: left;
  background: none; border: 0; color: inherit; font: inherit;
}
.dp-btn::after {
  content: ""; flex: none; width: 1.05em; height: 1.05em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd06f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dp-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.dp-btn .dp-empty { color: var(--placeholder); }

.dp-pop {
  position: absolute; z-index: 45; top: calc(100% + 8px); left: 0;
  width: 300px; padding: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  font-size: 14px; font-weight: 500;
}
.dp[data-open="false"] .dp-pop { display: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-title { font-weight: 800; font-size: 16px; color: var(--text); }
.dp-nav { display: flex; gap: 4px; }
.dp-nav button {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--text);
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.dp-nav button:hover { border-color: var(--green); color: var(--green); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font: 500 11px 'JetBrains Mono', monospace;
  color: var(--dim); padding: 4px 0 6px; }
.dp-day {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  border: 0; background: none; color: var(--text);
  border-radius: 8px; font: inherit; font-size: 13.5px;
}
.dp-day:hover:not(:disabled) { background: var(--line); }
.dp-day.is-other { color: var(--dim); opacity: .55; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px var(--green); color: var(--green); }
.dp-day.is-active { background: var(--green); color: var(--bg); font-weight: 800; }
.dp-day:disabled { opacity: .25; cursor: default; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.dp-foot button { background: none; border: 0; cursor: pointer; font: inherit;
  font-weight: 700; font-size: 13px; color: var(--green); padding: 2px 4px; }
.dp-foot button:hover { color: var(--yellow); }

/* ---------- Build-your-request pills ----------
   Replaces the running-sentence layout. Each control is a pill; the select and
   date inputs inside are still enhanced by the themed listbox / calendar, so
   this is presentation only — the value holders and handlers are unchanged. */
.build .label {
  display: inline-block;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
}
.bq { display: grid; gap: 12px; margin-top: 18px; }
.bq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* an author `display:flex` outranks the UA sheet's [hidden]{display:none},
   so the hidden rows would still paint */
.bq-row[hidden] { display: none; }

.bq-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px;
  min-width: 0;
}
.bq-ico { width: 18px; height: 18px; flex: none; opacity: .85; }

/* the headline control gets the green treatment */
.bq-service {
  background: rgba(47, 208, 111, .12);
  border-color: rgba(47, 208, 111, .45);
  color: var(--green);
  flex: 1 1 auto;
}
.bq-lead { font-weight: 700; font-size: 17px; flex: none; }
.bq-service .sel { flex: 1 1 auto; min-width: 0; }
.bq-service .sel-btn { color: var(--text); font-weight: 700; font-size: 17px; }
.bq-service .sel-list { font-size: 15px; }

.bq-where { display: inline-flex; align-items: center; gap: 6px;
  color: var(--dim); font-size: 16px; font-weight: 500; }
.bq-where .sel-btn { color: var(--muted); font-weight: 600; font-size: 16px; }

/* counts: big number, icon, label, chevron */
.bq-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bq-count { position: relative; }
.bq-num {
  width: 2.4ch; min-width: 2.4ch; flex: none;
  background: none; border: 0; padding: 0;
  color: var(--text); font: inherit; font-size: 20px; font-weight: 800;
  text-align: left; color-scheme: dark;
}
.bq-num::-webkit-outer-spin-button,
.bq-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bq-num { -moz-appearance: textfield; appearance: textfield; }
.bq-num:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.bq-label { color: var(--muted); font-size: 16px; font-weight: 600; }
.bq-more {
  margin-left: auto; flex: none; width: 26px; height: 26px;
  background: none; border: 0; cursor: pointer; padding: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238595a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 16px;
}
.bq-more:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd06f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.bq-more:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.bq-count[data-open="true"] .bq-more { transform: rotate(90deg); }

/* quick-pick list reuses the dropdown panel look */
.bq-picks {
  position: absolute; z-index: 44; top: calc(100% + 8px); right: 0;
  min-width: 96px; max-height: 260px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  scrollbar-width: none; -ms-overflow-style: none;
}
.bq-picks::-webkit-scrollbar { width: 0; display: none; }
.bq-count[data-open="false"] .bq-picks { display: none; }
.bq-picks li {
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.bq-picks li[aria-selected="true"] { color: var(--green); }
.bq-picks li.is-active { background: var(--green); color: var(--bg); }

/* date pill spans the row */
.bq-date { width: 100%; }

/* ...except in the stay row, where two share it */
.bq-stay .bq-date { width: auto; flex: 1 1 210px; }
.bq-stay .bq-lead { font-size: 13px; color: var(--dim); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; }
.bq-nights {
  flex: none; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 216, 74, .12); color: var(--yellow);
  font-size: 14px; font-weight: 800;
}
.bq-nights:empty { display: none; }
.bq-pkg .bq-pill { flex: 1 1 auto; }
.bq-pkg .sel { flex: 1 1 auto; min-width: 0; }
.bq-pkg .sel-btn { color: var(--text); font-weight: 700; font-size: 16px; }
@media (max-width: 560px) {
  .bq-stay .bq-date { flex: 1 1 100%; }
}
.bq-date .dp { flex: 1 1 auto; min-width: 0; }
.bq-date .dp-btn { width: 100%; color: var(--muted); font-size: 15px;
  font-weight: 600; letter-spacing: .06em; }
.bq-date .dp-btn .dp-empty { color: var(--dim); text-transform: uppercase;
  letter-spacing: .12em; font-size: 13px; }
.bq-date .dp-btn::after { margin-left: auto; }

@media (max-width: 560px) {
  .bq-counts { grid-template-columns: 1fr; }
  .bq-service { width: 100%; }
}

/* the pills carry the border now — no underline on controls inside them */
.bq .sel { border-bottom: 0; }
.bq .sel-btn, .bq .dp-btn { padding: 0; }

/* the pill is the trigger, but the number stays a text field */
.bq-count { cursor: pointer; }
.bq-count .bq-num { cursor: text; }

/* ---------- legal pages (privacy, terms) ----------
   Long-form prose lifted from the v1 templates; the v1 sheet is gone, so the
   v2 tokens style it here. */
.legal-doc { max-width: 78ch; }
.legal-doc h1 { font-size: clamp(34px, 5vw, 54px); line-height: .95; margin: 0 0 8px; }
.legal-doc .last-updated { color: var(--dim); font-size: 14px; margin: 0 0 32px; }
.legal-doc .content-section { padding: 22px 0; border-top: 1px solid var(--line); }
.legal-doc h2 { font-size: 22px; margin: 0 0 10px; color: var(--text); }
.legal-doc h3 { font-size: 17px; margin: 18px 0 6px; color: var(--muted); }
.legal-doc p { color: var(--muted); line-height: 1.7; margin: 0 0 12px; font-size: 15px; }
.legal-doc ul, .legal-doc ol { color: var(--muted); line-height: 1.7; font-size: 15px;
  margin: 0 0 12px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc a { color: var(--green); }
.legal-doc strong { color: var(--text); }