@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;0,800;1,600;1,700;1,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --shadow-card: 0 1px 2px rgba(15,26,46,.05), 0 12px 28px -10px rgba(5,94,148,.16);
}

html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #FFFFFF; color: #0F1A2E; }

/* No sideways page scroll on phones: decorative blobs, dots and blurs that
   poke past the screen edge are cut off instead of widening the page.
   `clip` (unlike `hidden`) keeps position: sticky working. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
body { overscroll-behavior-x: none; }
.font-display { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.015em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CFE0F7; border-radius: 8px; }

/* ---------- Buttons ----------
   Written as plain CSS (not @apply): this file is loaded via a normal
   <link>, and the Tailwind Play CDN script only compiles classes it finds
   in the HTML (or in a <style type="text/tailwindcss"> block), never the
   contents of a linked stylesheet, so @apply here was silently a no-op
   (the browser just drops the unknown at-rule), leaving every .btn-* button
   site-wide with no background, padding, or icon/text layout at all. */
.btn, .btn-primary, .btn-outline, .btn-ghost, .btn-dark, .btn-outline-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-outline:focus-visible, .btn-ghost:focus-visible, .btn-dark:focus-visible, .btn-outline-danger:focus-visible {
  outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(5,136,214,0.55);
}
.btn-primary {
  background-color: #0588D6; color: #fff;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 10px 24px -8px rgba(5,136,214,0.5);
}
.btn-primary:hover { background-color: #056DB0; transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(5,136,214,0.6); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { pointer-events: none; }
.btn-outline {
  border: 1px solid rgba(15,26,46,0.15); color: #0F1A2E;
  padding: 0.75rem 1.5rem;
}
.btn-outline:hover { border-color: #38B6F7; color: #0588D6; transform: translateY(-2px); }
.btn-ghost { color: #2C394F; padding: 0.5rem 1rem; }
.btn-ghost:hover { background-color: #E3EEFC; }
.btn-dark { background-color: #0674B5; color: #fff; padding: 0.75rem 1.5rem; }
.btn-dark:hover { background-color: #0A86C9; transform: translateY(-2px); }
/* Destructive-tinted secondary action, e.g. "remove from selection" */
.btn-outline-danger { border: 1px solid #E3555A; color: #E3555A; background: #fff; padding: 0.75rem 1.5rem; }
.btn-outline-danger:hover { background-color: #FEF2F2; }

/* ---------- Icon-only buttons (map controls, sheet chrome) ---------- */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.btn-icon:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(5,136,214,0.55); }

/* ---------- Bottom-sheet chrome ---------- */
.sheet-handle { width: 36px; height: 4px; border-radius: 9999px; background: rgba(15,26,46,.16); }

/* ---------- Skeleton loading ---------- */
.skeleton { position: relative; overflow: hidden; background: #E3EEFC; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }

/* ---------- Badges / pills ---------- */
.badge-pill { font-size: 11px; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 9999px; letter-spacing: 0.025em; }

/* ---------- Nav ---------- */
.nav-link { position: relative; font-size: 0.875rem; font-weight: 500; color: #2C394F; transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); padding-bottom: 0.25rem; }
.nav-link:hover { color: #0588D6; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: #0588D6;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover::after, .nav-link-active::after { transform: scaleX(1); }
.nav-link-active { color: #0588D6; }

/* ---------- Cards ---------- */
/* A framed white card so packages stand apart from the tinted page background. */
.card-package {
  display: flex; flex-direction: column; padding: 0.75rem 0.75rem 1rem;
  background: #fff; border: 1px solid #D3E3F7; border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgba(15,26,46,0.04), 0 8px 24px -16px rgba(5,94,148,0.25);
  transition: transform .35s ease, border-color .25s ease, box-shadow .35s ease;
}
.card-package:hover { transform: translateY(-6px); border-color: #38B6F7; box-shadow: 0 18px 36px -18px rgba(5,94,148,0.45); }

/* ---------- Frosted glass card (iOS style), used over photo backgrounds ---------- */
.glass-card {
  position: relative; isolation: isolate;
  background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10));
  border: 1px solid rgba(255,255,255,0.38);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 18px 40px -18px rgba(15,26,46,0.6);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
/* Glossy top sheen. */
.glass-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);
}
.glass-card:hover { background: linear-gradient(135deg, rgba(255,255,255,0.36), rgba(255,255,255,0.16)); border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }
.glass-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,194,61,0.8); }

/* ---------- Custom select (see initCustomSelects in app.js) ---------- */
.cselect { position: relative; }
.cselect-native { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cselect-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; text-align: left; cursor: pointer; }
.cselect-trigger.field-input { cursor: pointer; }
.cselect-trigger:disabled { cursor: not-allowed; opacity: .5; }
.cselect-trigger[aria-expanded="true"].field-input { border-color: #38B6F7; box-shadow: 0 0 0 4px rgba(5,136,214,0.12); }
.cselect-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-chevron { width: 1rem; height: 1rem; flex-shrink: 0; color: #7C8BA1; transition: transform .2s ease; }
.cselect-trigger[aria-expanded="true"] .cselect-chevron { transform: rotate(180deg); color: #0588D6; }
.cselect-panel {
  position: fixed; z-index: 1600; max-height: 18rem; overflow-y: auto; padding: 0.375rem;
  background: #fff; border: 1px solid #D3E3F7; border-radius: 0.875rem;
  box-shadow: 0 20px 40px -16px rgba(15,26,46,0.35);
  animation: cselect-in .14s ease-out;
}
@keyframes cselect-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cselect-option {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.625rem 0.75rem; border-radius: 0.625rem; font-size: 0.875rem; color: #1B2740; cursor: pointer;
}
.cselect-option.is-active { background: #F1F6FE; }
.cselect-option[aria-selected="true"] { background: #E6F6FF; color: #056DB0; font-weight: 600; }
.cselect-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.cselect-check { width: 1rem; height: 1rem; flex-shrink: 0; color: #0588D6; visibility: hidden; }
.cselect-option[aria-selected="true"] .cselect-check { visibility: visible; }
@media (max-width: 639px) { .cselect-option { padding: 0.75rem; font-size: 1rem; } }

.category-card { display: block; transition: transform .35s ease; }
.category-card:hover { transform: translateY(-4px); }
/* Title and blurb always take a fixed number of lines (2 each, 3 for the
   blurb on the narrow 8-per-row cards), so the icon above them sits at the
   same height on every card whatever the text length. */
.category-card-title { font-size: 1rem; line-height: 1.25; height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.category-card-blurb { font-size: .75rem; line-height: 1rem; height: 2rem; margin-top: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1280px) {
  .category-card-title { font-size: .875rem; }
  .category-card-blurb { height: 3rem; -webkit-line-clamp: 3; }
  .category-card-body { padding: .75rem; }
}

/* ---------- Package grid tabs ---------- */
.tab-btn {
  padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500;
  border: 1px solid rgba(15,26,46,0.1); color: #3F4E68;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;
}
.tab-btn:hover { border-color: #38B6F7; color: #0588D6; }
.tab-btn-active, .tab-btn-active:hover { background-color: #0674B5; color: #fff; border-color: #0674B5; }

/* ---------- Detail gallery ---------- */
/* Fixed-size photo frame: the photo is shown whole (never cropped) and
   only enlarged up to a limit set in app.js, a blurred copy fills the rest
   so every package gets the same frame without zooming small photos. */
.photo-frame {
  position: relative; overflow: hidden; background: #1B2740;
  display: flex; align-items: center; justify-content: center;
}
.photo-frame-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(28px) brightness(0.75); transform: scale(1.15);
}
.photo-frame-img {
  position: relative; width: 100%; height: 100%;
  max-width: 100%; max-height: 100%; object-fit: contain;
}

.thumb-btn {
  width: 5rem; height: 4rem; border-radius: 0.75rem; overflow: hidden;
  border: 2px solid transparent; opacity: 0.7;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;
}
.thumb-btn:hover { opacity: 1; }
.thumb-active { border-color: #0588D6; opacity: 1; }

/* ---------- Inputs ---------- */
.field-label { display: block; font-size: 0.875rem; font-weight: 600; color: #1B2740; margin-bottom: 0.375rem; }
.field-input {
  width: 100%; border-radius: 0.75rem; border: 1px solid rgba(15,26,46,0.12); background: #fff;
  padding: 0.75rem 1rem; font-size: 0.875rem; color: #0F1A2E;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.field-input::placeholder { color: #7C8BA1; }
.field-input:focus { outline: none; border-color: #38B6F7; box-shadow: 0 0 0 4px rgba(5,136,214,0.12); }
/* Room for a leading search icon and/or a trailing clear button, layered on top of .field-input's own padding. */
.field-input-search { padding-left: 2.75rem; }
.field-input-clearable { padding-right: 2.75rem; }
/* iOS Safari zooms the whole page into any input under 16px when it's focused. */
@media (max-width: 639px) { .field-input { font-size: 16px; } }
/* Side by side fields: when one label wraps to more lines than its neighbour,
   the inputs still line up along the bottom of the row. */
.field-row > * { display: flex; flex-direction: column; min-width: 0; }
.field-row > * > .field-input { margin-top: auto; height: 3.125rem; }
/* Date/time pickers render with their own inner height on mobile browsers. */
.field-row input[type="date"], .field-row input[type="time"] { -webkit-appearance: none; appearance: none; line-height: 1.25; padding-left: 0.75rem; padding-right: 0.75rem; }

/* ---------- Payment brand badges ---------- */
.brand-badge {
  display: flex; align-items: center; justify-content: center; border-radius: 0.5rem;
  border: 1px solid rgba(15,26,46,0.1); background: #fff; padding: 0.5rem 0.75rem;
  opacity: 0.4; filter: grayscale(100%); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-badge-active { opacity: 1; filter: grayscale(0); border-color: #38B6F7; box-shadow: 0 4px 12px -4px rgba(5,136,214,0.4); }

/* ---------- Booking widget ---------- */
.booking-widget { position: sticky; top: 6rem; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Success check animation ---------- */
@keyframes pop-in {
  0% { opacity: 0; transform: scale(.6); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.animate-pop-in { animation: pop-in .5s cubic-bezier(.2,.8,.3,1.3) both; }

@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-slide-in { animation: fade-slide-in .45s ease both; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .cselect-panel { animation: none; }
  .card-package, .category-card, .glass-card, .btn, .btn-icon, .nav-link::after { transition: none !important; }
  .animate-pop-in, .animate-fade-slide-in { animation: none !important; }
  .skeleton::after { animation: none !important; }
}

/* ---------- Misc ---------- */
.hero-shape { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
.divider-dot::before { content: "•"; margin: 0 8px; color: #B9D3F2; }

/* ---------- Custom trip map pins (icon + theme color per category) ---------- */
.map-pin { position: relative; width: 36px; height: 44px; }
.map-pin-body {
  position: absolute; left: 2px; top: 2px; width: 32px; height: 32px;
  background: var(--pin-color); border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(15, 26, 46, .35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.map-pin-body svg { transform: rotate(45deg); width: 16px; height: 16px; color: #fff; stroke-width: 2.25; }
.map-pin.is-selected .map-pin-body { box-shadow: 0 0 0 3px #FFC23D, 0 3px 10px rgba(15, 26, 46, .35); }
.map-pin:hover .map-pin-body { transform: rotate(-45deg) scale(1.1); }
.map-pin-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 9999px; background: #FFC23D; color: #0F1A2E; border: 2px solid #fff;
  font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
}
.map-legend {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 2px;
  background: rgba(255, 255, 255, .95); border-radius: 9999px; padding: 6px 10px;
  box-shadow: 0 8px 24px -8px rgba(5,94,148, .35); font-size: 10px; color: #2C394F;
}
.map-legend.hidden { display: none; }
/* Phones: the legend wraps onto several rows, so a full pill shape would look odd. */
@media (max-width: 639px) { .map-legend { border-radius: 14px; } }
.map-legend-item { display: flex; align-items: center; gap: 4px; line-height: 16px; white-space: nowrap; }
.map-legend-dot { width: 14px; height: 14px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.map-legend-dot svg { width: 8px; height: 8px; }
/* Region zones are only clickable in the region step, elsewhere they must not look clickable. */
.zones-locked path.leaflet-interactive { cursor: inherit; }
@media (prefers-reduced-motion: reduce) { .map-pin-body { transition: none; } }

/* ---------- Decorative accents ----------
   Dot grids and soft color blobs that fill empty areas (section waves live
   in partials/deco). Always behind content, never clickable. */

.deco-dots {
  position: absolute; z-index: 0; pointer-events: none;
  background-image: radial-gradient(currentColor 2px, transparent 2.5px);
  background-size: 18px 18px;
}
.deco-blob { position: absolute; z-index: 0; pointer-events: none; border-radius: 9999px; filter: blur(48px); opacity: .55; }

/* Section eyebrow: small colored pill instead of plain uppercase text. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3rem .8rem; border-radius: 9999px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #E6F6FF; color: #056DB0;
}
.eyebrow-coral { background: #FFF1EC; color: #E5532F; }
.eyebrow-lagoon { background: #E8FBF7; color: #0D9488; }
.eyebrow-light { background: rgba(255,255,255,.18); color: #fff; }

/* Colored underline stroke under a highlighted heading word. */
.hl-underline { position: relative; white-space: nowrap; }
.hl-underline::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .02em; height: .32em; z-index: -1;
  background: #FFC23D; opacity: .55; border-radius: 9999px; transform: rotate(-1.5deg);
}


/* Titles placed straight on a photo (home hero and page headers, no overlay
   or card): heavier weights plus a layered shadow keep the text readable.
   Only the text itself gets the shadow, never the search form inside. */
.hero-text h1, .hero-text > p, .hero-stats, a.hero-text { text-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 4px 18px rgba(0, 0, 0, .5); }
a.hero-text svg, .hero-text > p svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.hero-text .eyebrow-light { background: rgba(0, 0, 0, .3); font-weight: 800; }