/* ============================================================
   travelX — front-site stylesheet (light theme, teal + orange)
   ============================================================ */
:root {
  --primary: #0e7490;
  --primary-dark: #155e75;
  --primary-darker: #164e63;
  --primary-light: #ecfeff;
  --footer-bg: #0c4a5e;
  --accent: #f97316;
  --accent-dark: #ea580c;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --card: #ffffff;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --font: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { flex-shrink: 0; display: flex; align-items: center; }
.brand-logo { height: 58px; width: auto; max-width: 46vw; }
.main-nav { display: flex; gap: 22px; flex: 1; }
.main-nav a { color: var(--ink); font-weight: 600; font-size: 15px; padding: 6px 2px; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: var(--primary); border-bottom-color: var(--accent); }
.header-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 20px; padding: 4px 10px; cursor: pointer; }

/* ---------- buttons / badges / flash ---------- */
.btn { display: inline-block; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; transition: .15s; font-family: var(--font); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-outline { border-color: var(--primary); color: var(--primary); background: #fff; }
.btn-outline:hover { background: var(--primary-light); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--bg); }
.btn-lg { padding: 14px 30px; font-size: 16px; }
.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-purple { background: #f3e8ff; color: #6b21a8; }
.badge-gray { background: #f1f5f9; color: #475569; }
.flash { padding: 13px 18px; border-radius: 10px; margin: 16px 0; font-weight: 600; font-size: 14.5px; }
.flash-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.flash-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ---------- hero + search widget ---------- */
/* No overflow:hidden here on purpose. The search box's autocomplete hangs below
   the widget and, at four or more results, reaches past the bottom of the hero —
   a clipping ancestor cut it off mid-list, and no z-index can rescue that
   because the clip is geometric, not paint order. The scenery it used to contain
   (glow, clouds, planes, birds) all lives inside .hero-fx, which does its own
   overflow:hidden below, so nothing escapes as a result of this. */
.hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 45%, var(--primary-darker) 100%); background-size: 220% 220%; animation: heroShift 18s ease-in-out infinite alternate; color: #fff; padding: 64px 0 96px; position: relative; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 320px at 85% -10%, rgba(251,146,60,.28), transparent 60%); pointer-events: none; }
@keyframes heroShift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }

/* animated scenery layer */
.hero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-glow { position: absolute; top: -80px; right: 8%; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(253,186,116,.5), transparent 65%); animation: glowPulse 6s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.18); opacity: 1; } }
.fx-cloud { position: absolute; background: rgba(255,255,255,.14); border-radius: 99px; filter: blur(1px); }
.fx-cloud::before, .fx-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.fx-cloud::before { width: 55%; height: 160%; top: -70%; left: 18%; }
.fx-cloud::after { width: 40%; height: 120%; top: -45%; right: 16%; }
.fx-c1 { width: 190px; height: 44px; top: 18%; animation: drift 44s linear infinite; }
.fx-c2 { width: 130px; height: 32px; top: 46%; animation: drift 60s linear infinite; animation-delay: -22s; opacity: .7; }
.fx-c3 { width: 260px; height: 56px; top: 70%; animation: drift 75s linear infinite; animation-delay: -40s; opacity: .5; }
@keyframes drift { from { transform: translateX(-320px); } to { transform: translateX(calc(100vw + 320px)); } }
.fx-plane { position: absolute; top: 30%; animation: fly 16s linear infinite; opacity: 0; }
.fx-plane2 { top: 58%; animation-duration: 23s; animation-delay: -9s; }
@keyframes fly {
  0% { transform: translateX(-80px) translateY(30px); opacity: 0; }
  6% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 80px)) translateY(-60px); opacity: 0; }
}
.fx-bird { position: absolute; color: rgba(255,255,255,.5); font-size: 15px; font-weight: 700; }
.fx-b1 { top: 24%; left: 12%; animation: flap 7s ease-in-out infinite; }
.fx-b2 { top: 34%; left: 22%; animation: flap 9s ease-in-out infinite; animation-delay: -3s; font-size: 11px; }
@keyframes flap { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-16px) scaleY(.6); } }
@media (prefers-reduced-motion: reduce) {
  .hero, .fx-glow, .fx-cloud, .fx-plane, .fx-bird, .spinner, .search-progress-bar { animation: none !important; }
  .fx-plane { display: none; }
}
.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero h1 { font-size: clamp(30px, 4.6vw, 50px); font-weight: 800; letter-spacing: -1px; line-height: 1.15; }
.hero h1 .hl { color: #fdba74; }
.hero p.sub { margin: 14px auto 0; max-width: 640px; color: #cffafe; font-size: 17px; }
.search-widget { max-width: 980px; margin: 36px auto -60px; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(8, 51, 68, .45); color: var(--ink); position: relative; z-index: 2; text-align: left; }
.sw-tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sw-tabs::-webkit-scrollbar { display: none; }
.sw-tab { flex: 0 0 auto; padding: 15px 26px; font-weight: 700; font-size: 15px; color: var(--muted); cursor: pointer; background: none; border: none; border-bottom: 3px solid transparent; font-family: var(--font); white-space: nowrap; }
.sw-tab.active { color: var(--primary); border-bottom-color: var(--accent); }
.sw-panel { display: none; padding: 22px; }
.sw-panel.active { display: block; }
.sw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sw-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 14.5px; font-family: var(--font); background: #fff; color: var(--ink); box-sizing: border-box; min-width: 0; max-width: 100%; }
/* iOS Safari gives date/time inputs an intrinsic width that ignores width:100%
   (they overflow their container) and centres the value. Resetting the native
   appearance makes them behave like every other field on iPhone. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] {
  -webkit-appearance: none; appearance: none;
  -webkit-min-logical-width: 0; min-width: 0; max-width: 100%; width: 100%;
  box-sizing: border-box; text-align: left; min-height: 44px; line-height: normal;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }
/* stop any grid/flex track from being stretched by a field's intrinsic width */
.sw-grid > *, .filter-grid > *, .grid-2 > *, .grid-3 > *, .guest-row > * { min-width: 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 116, 144, .12); }
.trip-types { display: flex; gap: 16px; margin-bottom: 14px; }
.trip-types label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; cursor: pointer; }
.sw-submit { margin-top: 16px; text-align: right; }

/* ---------- stats strip (live inventory highlights) ---------- */
.stats-strip { background: #fff; border-bottom: 1px solid var(--line); padding: 96px 0 34px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-item { text-align: center; padding: 10px 6px; }
.stat-ico { font-size: 30px; display: block; margin-bottom: 6px; }
.stat-num { display: block; font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: -1px; color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.stat-lbl { color: var(--muted); font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sw-hint { color: var(--muted); font-size: 13px; font-weight: 600; margin-right: 14px; }
.sw-hint b { color: var(--primary-dark); }
.sw-submit { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stats-strip { padding: 84px 0 22px; }
  .sw-hint { margin-right: 0; width: 100%; text-align: center; order: 2; }
}

/* ---------- sections ---------- */
.section { padding: 64px 0; }
.section.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { text-align: center; margin-bottom: 38px; }
.section-head h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.5px; }
.section-head h2 span { color: var(--accent); }
.section-head p { color: var(--muted); max-width: 560px; margin: 8px auto 0; }

/* ---------- package cards ---------- */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
.pkg-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; }
.pkg-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -14px rgba(15, 23, 42, .22); }
/* Sold out for the dates the guest picked: still listed and still clickable —
   they can open it and try other dates — but visibly not bookable. The hover
   lift is cancelled deliberately: a card that rises to meet the cursor promises
   something this one can't deliver. */
.pkg-card.is-unavailable { opacity: .72; }
.pkg-card.is-unavailable:hover { transform: none; box-shadow: var(--shadow); }
.pkg-thumb { position: relative; aspect-ratio: 8 / 5; overflow: hidden; }
.pkg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pkg-thumb .tag { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.94); color: var(--primary-dark); font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 99px; }
.pkg-thumb .dur { position: absolute; bottom: 12px; right: 12px; background: rgba(15,23,42,.78); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 99px; }
.pkg-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pkg-body h3 { font-size: 17px; font-weight: 800; line-height: 1.35; }
.pkg-body h3 a { color: var(--ink); }
.pkg-body h3 a:hover { color: var(--primary); }
.pkg-meta { color: var(--muted); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; }
.pkg-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px dashed var(--line); }
.pkg-price { font-size: 19px; font-weight: 800; color: var(--primary-dark); }
.pkg-price small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.pkg-price .pkg-from { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1px; }

/* ---------- category chips / feature tiles ---------- */
.chip-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chip { background: #fff; border: 1.5px solid var(--line); padding: 10px 22px; border-radius: 99px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.chip:hover, .chip.active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center; box-shadow: var(--shadow); }
.feature .ico { font-size: 34px; margin-bottom: 10px; }
.feature h3 { font-size: 16.5px; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 14px; }

/* ---------- filters bar (packages page) ---------- */
.filter-bar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 28px; box-shadow: var(--shadow); }
.filter-grid { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 12px; align-items: end; }

/* ---------- page hero (inner pages) ---------- */
.page-hero { background: linear-gradient(120deg, var(--primary-dark), var(--primary)); color: #fff; padding: 42px 0; margin-bottom: 36px; }
.page-hero h1 { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.5px; }
.page-hero p { color: #a5f3fc; margin-top: 4px; }
.breadcrumb { font-size: 13px; color: #a5f3fc; margin-bottom: 8px; }
.breadcrumb a { color: #cffafe; }

/* ---------- package detail ---------- */
.pkg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.pkg-layout > * { min-width: 0; }
.gallery-main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.gallery-thumbs img { border-radius: 10px; aspect-ratio: 8/5; object-fit: cover; cursor: pointer; border: 2px solid transparent; }
.gallery-thumbs img.active { border-color: var(--accent); }
.content-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-top: 24px; box-shadow: var(--shadow); }
.content-card h2 { font-size: 21px; margin-bottom: 14px; letter-spacing: -.3px; }
.content-card h2 span { color: var(--accent); }
.prose p { margin-bottom: 12px; color: #334155; }
/* Everything below is for admin-written rich text — the package overview and the
   free-form sections. The global reset at the top of this file zeroes margin and
   padding on every element, which is fine for markup we control but leaves
   editor output unstyled: lists lose their indent, and because list markers are
   drawn outside the content box they end up hanging off the left of the card.
   Headings lose their spacing the same way. */
.prose ul, .prose ol { padding-left: 20px; margin-bottom: 12px; }
.prose li { margin-bottom: 6px; color: #334155; }
.prose li:last-child { margin-bottom: 0; }
.prose h3 { font-size: 17px; font-weight: 800; margin: 18px 0 8px; }
.prose h4 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }
.prose h3:first-child, .prose h4:first-child { margin-top: 0; }
.prose blockquote { border-left: 3px solid var(--line); padding-left: 14px; margin: 0 0 12px; color: var(--muted); }
.prose a { text-decoration: underline; }
.prose > :last-child { margin-bottom: 0; }
.accordion-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.accordion-head { width: 100%; text-align: left; background: var(--bg); padding: 13px 18px; font-weight: 700; font-size: 15px; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: var(--font); color: var(--ink); }
.accordion-head .day-no { color: var(--accent); margin-right: 8px; }
.accordion-body { padding: 14px 18px; display: none; color: #334155; font-size: 14.5px; border-top: 1px solid var(--line); }
.accordion-item.open .accordion-body { display: block; }
.accordion-item.open .accordion-head { background: var(--primary-light); }

/* ---------- cabin pricing table ---------- */
/* The table can outgrow a phone, so it scrolls inside its own box rather than
   making the whole page scroll sideways. */
.rate-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rate-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 14px; }
.rate-table th { background: var(--primary); color: #fff; font-weight: 700; font-size: 13px;
  text-align: left; padding: 11px 13px; border-right: 1px solid rgba(255, 255, 255, .16); vertical-align: top; }
.rate-table th:last-child { border-right: none; }
.rate-table th span { display: block; font-weight: 600; font-size: 11.5px; opacity: .82; margin-top: 2px; }
.rate-table td { padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rate-table tbody tr:nth-child(even) { background: var(--bg); }
.rate-note { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.rate-was { color: var(--muted); text-decoration: line-through; white-space: nowrap; }
.rate-now { font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.rate-na { color: var(--muted); }

.rate-fixed { padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 9px;
  background: var(--bg); font-weight: 700; color: var(--primary-dark); }
.rate-fixed span { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); }

/* ---------- day-by-day itinerary: tabs + timeline ---------- */
.itin-tabs { display: flex; flex-wrap: wrap; gap: 6px; background: var(--bg); padding: 6px; border-radius: 10px; margin-bottom: 18px; }
.itin-tab { font: 700 13.5px var(--font); padding: 8px 18px; border-radius: 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.itin-tab:hover { color: var(--ink); }
.itin-tab.on { background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
/* Every day stays in the DOM for search engines and print; the tab picks one. */
.itin-day { display: none; }
.itin-day.on { display: block; }
@media print { .itin-day { display: block; } .itin-tabs { display: none; } }
.itin-day-title { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.itin-day-intro { color: #334155; font-size: 14.5px; margin-bottom: 14px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-stop { display: grid; grid-template-columns: 62px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tl-stop:last-child { border-bottom: none; }
.tl-mark { text-align: center; }
.tl-ico { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto;
  border-radius: 50%; background: var(--primary); color: #fff; font-size: 20px; line-height: 1; }
.tl-time { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tl-body h4 { font-size: 16px; font-weight: 800; color: var(--primary); margin-bottom: 5px; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.tl-points { margin: 0; padding-left: 18px; color: #334155; font-size: 14.5px; }
.tl-points li { margin-bottom: 5px; }
@media (max-width: 560px) {
  .tl-stop { grid-template-columns: 46px 1fr; gap: 12px; }
  .tl-ico { width: 38px; height: 38px; font-size: 17px; }
  .tl-time { font-size: 10.5px; }
}
.incl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.incl-grid ul { list-style: none; }
.incl-grid li { padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; border-bottom: 1px dashed var(--line); }
.incl li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 800; }
.excl li::before { content: "✕"; position: absolute; left: 0; color: #dc2626; font-weight: 800; }
.book-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); position: sticky; top: 86px; }
.book-box .from { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.book-box .price { font-size: 32px; font-weight: 800; color: var(--primary-dark); line-height: 1.2; }
.book-box .price small { font-size: 14px; color: var(--muted); font-weight: 600; }
.book-box .field { margin-top: 12px; }

/* Legal links in the footer bar, and the consent tick before an order. */
.consent-box { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 14px 0 4px; padding: 12px 14px; background: var(--primary-light); border-radius: 10px;
  font-size: 14px; line-height: 1.5; cursor: pointer; }
.consent-box input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.consent-box a { font-weight: 700; text-decoration: underline; }
.calc-total { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--line); font-weight: 800; font-size: 18px; }
.dep-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dep-pill { background: var(--primary-light); border: 1px solid #a5f3fc; color: var(--primary-dark); font-weight: 700; font-size: 13px; padding: 6px 13px; border-radius: 99px; }

/* ---------- checkout ---------- */
.steps { display: flex; gap: 0; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.step { flex: 1; text-align: center; padding: 13px 8px; font-weight: 700; font-size: 14px; color: var(--muted); background: #fff; border-right: 1px solid var(--line); }
.step:last-child { border-right: none; }
.step.active { background: var(--primary); color: #fff; }
.step.done { background: var(--primary-light); color: var(--primary-dark); }
.guest-row { display: grid; grid-template-columns: 2fr 80px 1.4fr; gap: 10px; margin-bottom: 10px; }
.summary-table { width: 100%; border-collapse: collapse; }
.summary-table td { padding: 9px 4px; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.summary-table td:last-child { text-align: right; font-weight: 700; }
.pay-option { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; background: #fff; }
.pay-option:hover { border-color: var(--primary); }
.pay-option input { accent-color: var(--primary); width: 18px; height: 18px; }
.pay-option .pay-name { font-weight: 700; }
.pay-option .pay-desc { font-size: 13px; color: var(--muted); }
.pay-logo { width: 44px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; }

/* ---------- auth & forms ---------- */
.auth-wrap { max-width: 460px; margin: 48px auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 34px; box-shadow: var(--shadow); }
.auth-wrap h1 { font-size: 24px; margin-bottom: 4px; letter-spacing: -.4px; }
.auth-wrap .sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.auth-wrap .field { margin-bottom: 14px; }
.auth-tabs { display: flex; background: var(--bg); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.auth-tabs button { flex: 1; border: none; background: none; padding: 9px; font-weight: 700; border-radius: 8px; cursor: pointer; color: var(--muted); font-family: var(--font); }
.auth-tabs button.active { background: #fff; color: var(--primary); box-shadow: var(--shadow); }
.form-note { font-size: 13px; color: var(--muted); margin-top: 14px; text-align: center; }

/* ---------- account ---------- */
/* minmax(0,…) stops a wide/nowrap table from stretching the whole grid column */
.acct-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.acct-grid > * { min-width: 0; }
.acct-menu { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.acct-menu a { display: block; padding: 13px 18px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 14.5px; }
.acct-menu a.active, .acct-menu a:hover { background: var(--primary-light); color: var(--primary-dark); }
.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.data-table th { text-align: left; padding: 12px 14px; background: var(--bg); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #fafcff; }

/* ---------- blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.post-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.post-card .body { padding: 18px; }
.post-card h3 { font-size: 17px; line-height: 1.4; margin-bottom: 6px; }
.post-card h3 a { color: var(--ink); }
.post-card p { color: var(--muted); font-size: 14px; }
.post-card .date { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; display: block; }
.post-body { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.post-body h2 { margin: 22px 0 10px; }
.post-body p { margin-bottom: 14px; color: #334155; }

/* ---------- airport autocomplete ---------- */
.ac-wrap { position: relative; }
.ac-list { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px -12px rgba(15, 23, 42, .28); z-index: 60; display: none; overflow: hidden; max-height: 320px; overflow-y: auto; }
.ac-list.open { display: block; }
.ac-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: var(--primary-light); }
.ac-code { background: var(--primary); color: #fff; font-weight: 800; font-size: 12px; border-radius: 7px; padding: 5px 8px; letter-spacing: .04em; flex-shrink: 0; }
.ac-code.ac-city { background: #fff7ed; font-size: 15px; padding: 3px 7px; }
.ac-main { font-size: 14px; line-height: 1.35; min-width: 0; }
.ac-main small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- fake search modal ---------- */
.spinner { width: 46px; height: 46px; border: 4px solid var(--primary-light); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 16px; animation: txspin .8s linear infinite; }
@keyframes txspin { to { transform: rotate(360deg); } }
.search-progress { height: 6px; background: var(--line); border-radius: 99px; margin-top: 18px; overflow: hidden; }
.search-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 99px; }

/* ---------- modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 18px; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: 16px; max-width: 440px; width: 100%; padding: 28px; position: relative; box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); }
.modal h3 { font-size: 20px; margin-bottom: 6px; }
.modal .sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.modal .field { margin-bottom: 12px; }
.modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted); }
.modal .success-ico { font-size: 52px; text-align: center; display: block; margin-bottom: 10px; }

/* ---------- footer ---------- */
.site-footer { background: var(--footer-bg); color: #cbd5e1; margin-top: 72px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; padding: 52px 20px 40px; }
.footer-logo { height: 46px; margin-bottom: 14px; }
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.footer-col a { display: block; color: #94c6d6; padding: 4px 0; font-size: 14px; }
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: 14px; color: #94c6d6; }
.footer-contact { margin-top: 12px; line-height: 1.9; }
/* The tel:/mailto: links live beside an emoji on the same line. Without this
   the .footer-col a rule above makes them blocks and drops each one under its
   icon — which is exactly what Safari's auto-generated links used to do. */
.footer-contact a { display: inline; padding: 0; color: inherit; }
.footer-contact a:hover { color: #fff; text-decoration: underline; }
.social-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.social-row a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #cbe8f2; transition: .15s; }
.social-row a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

/* ---------- floating chat bubbles ---------- */
.chat-bubbles { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.chat-btn { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: #fff;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.4); position: relative; transition: transform .15s; }
.chat-btn:hover { transform: scale(1.08); }
.chat-btn.whatsapp { background: #25d366; animation: chatPulse 2.6s ease-in-out infinite; }
.chat-btn.messenger { background: linear-gradient(135deg, #0695ff, #a334fa, #ff6968); }
@keyframes chatPulse { 0%, 100% { box-shadow: 0 8px 24px -6px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.45); }
  50% { box-shadow: 0 8px 24px -6px rgba(0,0,0,.4), 0 0 0 12px rgba(37,211,102,0); } }
.chat-label { position: absolute; right: 64px; background: #0f172a; color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; transform: translateX(6px); pointer-events: none; transition: .18s; }
.chat-btn:hover .chat-label { opacity: 1; transform: translateX(0); }
@media print { .chat-bubbles { display: none !important; } }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom-inner { display: flex; justify-content: space-between; padding: 18px 20px; font-size: 13.5px; color: #7fb4c7; flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: #fdba74; font-weight: 700; }

/* ---------- misc ---------- */
.empty-state { text-align: center; padding: 54px 20px; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-state .ico { font-size: 44px; display: block; margin-bottom: 10px; }
.text-center { text-align: center; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-2 { margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.pagination a, .pagination span { padding: 8px 15px; border: 1px solid var(--line); border-radius: 9px; font-weight: 700; font-size: 14px; background: #fff; }
.pagination .cur { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .header-inner { gap: 12px; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; gap: 0; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 22px; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; }
  .sw-grid, .filter-grid, .grid-3 { grid-template-columns: 1fr 1fr; }
  .pkg-layout, .acct-grid, .incl-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { gap: 24px; padding: 40px 20px 28px; }
  .book-box { position: static; }
}
@media (max-width: 700px) {
  /* 16px keeps iOS Safari from zooming in when a field gets focus */
  .field input, .field select, .field textarea,
  .filters input, .filters select { font-size: 16px; }
  /* wide tables scroll inside their own box instead of stretching the page */
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .summary-table td { font-size: 13.5px; }
}
@media (max-width: 560px) {
  /* !important so any inline grid-template-columns still collapses on phones */
  .sw-grid, .filter-grid, .grid-2, .grid-3, .guest-row { grid-template-columns: minmax(0, 1fr) !important; }
  .header-inner { height: 60px; gap: 8px; }
  .brand-logo { height: 46px; max-width: 42vw; }
  .header-actions { gap: 6px; }
  .header-actions .btn { padding: 8px 13px; font-size: 13.5px; }
  .header-actions .btn-ghost { display: none; }
  .nav-toggle { padding: 3px 10px; font-size: 18px; }
  .hero { padding: 40px 0 80px; }
  .hero p.sub { font-size: 15.5px; }
  .sw-tab { padding: 13px 16px; font-size: 14px; }
  .sw-panel { padding: 18px 16px; }
  .search-widget { margin: 28px auto -50px; border-radius: 14px; }
  .steps { flex-direction: column; }
  .step { border-right: none; border-bottom: 1px solid var(--line); }
  .section { padding: 44px 0; }
  .trip-types { gap: 12px; flex-wrap: wrap; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .content-card { padding: 20px 16px; }
  .chat-bubbles { right: 12px; bottom: 12px; gap: 10px; }
  .chat-btn { width: 48px; height: 48px; }
  .chat-label { display: none; }
  .ac-main small { font-size: 11px; }
}
@media (max-width: 400px) {
  .brand-logo { height: 40px; max-width: 38vw; }
  .header-actions .btn { padding: 7px 11px; font-size: 12.5px; }
  .sw-tab { padding: 12px 11px; font-size: 13.5px; }
  .container { padding: 0 14px; }
  .hero h1 { letter-spacing: -.5px; }
  .stat-num { font-size: 22px; }
}
@media (max-width: 360px) {
  .tab-long { display: none; }   /* "Tour Packages" → "Packages" so all 3 tabs still fit */
}
@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
}