/* Wanderlust — Travel template. Beach palette + flat buttons (no gradient).
   Recreated from the Claude Design "Travel App" prototype as a responsive web
   layout (centered mobile-width column, works on desktop & phone). */

:root {
  /* Beach accent (teal/aqua) — flat, no gradient.
     --accent follows the CMS "Warna Tombol" (Style page → colors.primary,
     emitted as --wb-primary by the render server); falls back to the teal
     default when the site hasn't customised it. The soft/dark derivatives are
     mixed off whatever --accent resolves to, so a single picked colour yields a
     coherent button set. */
  --accent: var(--wb-primary, #0E9F8E);
  /* Static teal fallbacks first; browsers with color-mix override them so a
     custom button colour gets matching soft/dark shades. Old browsers keep the
     teal defaults (the color-mix lines are simply ignored as invalid). */
  --accent-soft: #E5F7F4;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, #fff);
  --accent-dark: #0a7d70;
  --accent-dark: color-mix(in srgb, var(--accent) 82%, #000);
  --sun: #FFC83D;          /* warm sand/sun accent */
  --coral: #FF6B5E;        /* flash-sale / alerts */
  --ink: #16323a;          /* deep teal-ink for headings */
  --muted: #7a8c92;
  --line: #e6eef0;
  --bg: #f4fbfa;           /* soft sea-foam page bg */
  --card: #ffffff;
  --radius: 22px;
  --shadow-card: 0 10px 26px rgba(14,90,80,.08);
  --shadow-sm: 0 4px 14px rgba(14,90,80,.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 80% at 50% 0%, #e3f6f1 0%, #eef7f6 55%, var(--bg) 100%);
  color: var(--ink);
  overflow-x: hidden; /* contain the .app slide-in so it never adds a horizontal scrollbar */
}
::-webkit-scrollbar { width: 0; height: 0; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* Centered phone-width app column (responsive site). */
.app {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  background: #fbfefe;
  position: relative;
  padding-bottom: 96px;
  box-shadow: 0 0 60px rgba(14,90,80,.06);
}
.screen { padding: 0 18px; position: relative; }
.pt { padding-top: 28px; }

/* ── Buttons (flat) ───────────────────────────────────────── */
.btn {
  border: none; border-radius: 16px; font-weight: 700; font-size: 15px;
  padding: 14px 26px; background: var(--accent); color: #fff; transition: background .15s;
}
.btn:hover { background: var(--accent-dark); }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-sun:hover { background: #f0b71f; }
.btn-outline { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); }
.btn-block { width: 100%; }

/* ── Circle button ────────────────────────────────────────── */
.circle {
  width: 44px; height: 44px; border-radius: 50%; border: none; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(14,90,80,.12); flex-shrink: 0;
}
.circle.accent { background: var(--accent); }

/* ── Header / avatar ──────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; }
.avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.avatar.initials { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
.notif-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; border: 1.5px solid #fff; }
.greet-name { font-weight: 600; font-size: 17px; }
.greet-sub { font-size: 13px; color: var(--muted); }
/* Branding logo sits in the avatar slot when logged out — shown as the original
   logo only (no white disc, border, shadow, or padding). Hidden until initHeader
   reveals it (only when a real logo loaded). */
.brand-logo { display: none; width: 100%; height: 100%; object-fit: contain; }
/* When the avatar holds the logo, strip the circular chrome so just the logo shows. */
.avatar.has-logo { background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }

/* ── Notifications popup (anchored to the bell, top-right) ─────────────────── */
.notif-pop {
  position: absolute; top: 60px; right: 0; z-index: 40; width: 240px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(14,90,80,.16); padding: 14px 16px 18px;
  transform-origin: top right; opacity: 0; transform: translateY(-6px) scale(.97);
  transition: opacity .16s ease, transform .16s ease;
}
.notif-pop.show { opacity: 1; transform: translateY(0) scale(1); }
.notif-pop::before {
  content: ""; position: absolute; top: -6px; right: 16px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.notif-pop-head { font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 10px; }
.notif-pop-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 4px; }
.notif-pop-empty p { font-size: 13px; color: #9aa7aa; margin: 0; }

/* ── Search bar ───────────────────────────────────────────── */
.search {
  margin-top: 18px; display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px; padding: 13px 16px; box-shadow: 0 6px 18px rgba(14,90,80,.05);
}
.search input { flex: 1; border: none; outline: none; font-size: 14.5px; font-family: inherit; color: var(--ink); background: transparent; }
.search .ph { flex: 1; font-size: 14.5px; color: #aab7ba; }

/* ── Search sort popup (anchored under the filter button) ──────────────────── */
.filter-active { box-shadow: 0 0 0 3px var(--accent-soft); }
.filter-pop {
  position: absolute; top: 56px; right: 0; z-index: 40; width: 190px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(14,90,80,.16); padding: 8px;
}
.filter-pop-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #9aa7aa; padding: 4px 8px 6px; }
.filter-opt {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; font-size: 13.5px; color: var(--ink); padding: 9px 10px; border-radius: 10px;
}
.filter-opt:hover { background: #f3f8f7; }
.filter-opt.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  margin-top: 18px; position: relative; border-radius: 24px; overflow: hidden; height: 178px;
  background: linear-gradient(120deg, #4fc3c0 0%, #6fd3cf 45%, #a7e8e2 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 22px 0 0 22px; width: 60%; }
.hero h1 { font-weight: 700; font-size: 21px; line-height: 1.18; color: #06403a; margin: 0; }
.hero-photo {
  position: absolute; right: 14px; top: 26px; width: 42%; height: 124px; border-radius: 18px; overflow: hidden;
  transform: rotate(4deg); box-shadow: 0 14px 30px rgba(6,60,55,.25); border: 3px solid #fff; z-index: 1;
}
.hero-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* ── Section head ─────────────────────────────────────────── */
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 14px; }
.sec-head .title { font-weight: 700; font-size: 17.5px; letter-spacing: -.3px; }
.sec-head .see { border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ── Category pills ───────────────────────────────────────── */
.cats { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-right: -18px; transition: opacity .22s ease; }
/* Hide the category row until initCategories() decides the final content (CMS
   categories vs the template defaults), so the hardcoded defaults never flash
   and get swapped on load. The default pills stay in the DOM (height reserved →
   no layout shift); JS adds .cats-ready to fade the final row in once. Gating on
   the absence of .cats-ready (not on an HTML class) means it works against the
   already-served, memory-cached HTML without a server restart. */
.cats:not(.cats-ready) { opacity: 0; }
.cat {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 11px 18px 11px 14px;
  border-radius: 16px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 13.5px; color: #39414e;
}
.cat.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cat.on svg { stroke: #fff; }

/* ── Destination cards ────────────────────────────────────── */
.dest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; row-gap: 26px; }
.dcard { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid #eef4f3; display: flex; flex-direction: column; }
.dcard .thumb { position: relative; height: 130px; }
.dcard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.tag { position: absolute; top: 9px; left: 9px; padding: 4px 9px; border-radius: 8px; color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; width: max-content; max-width: calc(100% - 18px); height: max-content; white-space: nowrap; line-height: 1.2; }
.tag.flash { background: var(--coral); }
.tag.promo { background: var(--sun); color: var(--ink); }
.tag.best { background: var(--ink); }
/* Detail hero pins the tag to the bottom — reset the card's top:9px so the
   element isn't stretched top↔bottom into a tall block. */
.detail-hero .tag { top: auto; }
.dcard .arrow { position: absolute; right: 12px; bottom: -16px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.dcard .body { padding: 14px 13px 13px; flex: 1; min-width: 0; }
.dcard .name { font-weight: 600; font-size: 14.5px; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard .loc { display: flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 12px; color: #9aa7aa; }
.dcard .from { font-size: 10.5px; color: #aab7ba; margin-bottom: -2px; }
.dcard .price { font-weight: 700; font-size: 14.5px; color: var(--accent); }
.dcard .price .pax { font-size: 11px; font-weight: 500; color: #9aa7aa; }
/* promo pricing: struck-through original + save badge above the live price */
.dcard .pricebox { min-width: 0; }
.dcard .oldrow { display: flex; align-items: center; gap: 6px; margin: 1px 0; }
.dcard .old { font-size: 11.5px; color: #aab7ba; text-decoration: line-through; }
.dcard .save { font-size: 9.5px; font-weight: 700; color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, #fff); padding: 1.5px 6px; border-radius: 6px; line-height: 1.3; letter-spacing: .2px; }
.rating { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 13px; }

/* wide card (search list) */
.dcard.wide { flex-direction: row; }
.dcard.wide .thumb { width: 132px; height: auto; min-height: 124px; flex-shrink: 0; }
.dcard.wide .body { padding: 12px 14px; }

/* ── Bottom nav ───────────────────────────────────────────── */
.bottomnav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; width: 432px; max-width: calc(100% - 28px); z-index: 30;
  background: #fff; border-radius: 24px; padding: 9px 10px; box-shadow: 0 12px 30px rgba(14,90,80,.16);
  border: 1px solid #eef4f3; display: flex; align-items: center; justify-content: space-around;
}
.navbtn { border: none; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 8px; flex: 1; }
.navbtn .ico { width: 38px; height: 30px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.navbtn.on .ico { background: var(--accent); }
.navbtn.on .ico svg { stroke: #fff; }
.navbtn .lbl { font-size: 10.5px; font-weight: 600; color: #aab7ba; }
.navbtn.on .lbl { color: var(--accent); }
/* ── Shimmer skeleton (loading state) ─────────────────────── */
.skel { position: relative; overflow: hidden; background: #eaf0ef; border-radius: 8px; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: skelShimmer 1.25s infinite; }
@keyframes skelShimmer { 100% { transform: translateX(100%); } }
.skel-line { display: block; height: 13px; }
.skel-code { display: inline-block; width: 112px; height: 15px; vertical-align: middle; }
/* Elevated center QR-Code button (FAB) */
.navbtn-fab { position: relative; }
.navbtn-fab .fab {
  width: 54px; height: 54px; border-radius: 50%; margin-top: -28px; margin-bottom: 3px;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  border: 4px solid #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 42%, transparent), 0 2px 6px rgba(0,0,0,.12);
}
.navbtn-fab:active .fab { transform: translateY(1px); }
.navbtn-fab .lbl { color: var(--accent); }

/* ── Detail screen ────────────────────────────────────────── */
.detail-hero { position: relative; height: 300px; }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero .scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,30,30,.32), rgba(6,30,30,0) 30%); pointer-events: none; }
/* Swipeable hero image carousel (cover + gallery). */
.detail-hero .hero-swipe { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.detail-hero .hero-swipe::-webkit-scrollbar { display: none; }
.detail-hero .hero-swipe > .wb-img { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; }
.detail-hero .hero-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 3; pointer-events: none; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,.32); }
.detail-hero .hero-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .2s ease, background .2s ease; }
.detail-hero .hero-dot.on { width: 16px; border-radius: 4px; background: #fff; }
/* Carousel prev/next navigation arrows. */
.detail-hero .hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.detail-hero .hero-nav.prev { left: 14px; }
.detail-hero .hero-nav.next { right: 14px; }
.detail-hero .hero-nav[hidden] { display: none; }
.detail-top { position: absolute; top: 24px; left: 18px; right: 18px; display: flex; justify-content: space-between; z-index: 3; }
.detail-body { position: relative; margin-top: -28px; background: #fff; border-top-left-radius: 28px; border-top-right-radius: 28px; padding: 22px 20px 0; }
.dtitle { font-weight: 700; font-size: 23px; letter-spacing: -.4px; }
.rating-chip { display: flex; align-items: center; gap: 4px; background: #fff6e0; padding: 6px 10px; border-radius: 11px; }
.facts { display: flex; gap: 8px; margin-top: 16px; }
.fact { display: flex; align-items: center; gap: 7px; background: #f1f8f7; border-radius: 13px; padding: 9px 12px; flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: #46505e; }
.sec { margin-top: 26px; }
.sec .h { font-weight: 700; font-size: 16.5px; letter-spacing: -.3px; margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; }
.blurb { margin: 0; font-size: 13.5px; line-height: 1.6; color: #5a6472; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip { font-size: 11.5px; font-weight: 500; color: var(--accent); background: var(--accent-soft); padding: 5px 11px; border-radius: 9px; }

/* date cards */
.dates { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-right: -18px; }
.datecard { flex-shrink: 0; width: 132px; text-align: left; border-radius: 14px; padding: 11px 13px; position: relative; border: 1.5px solid #e8efed; background: #fff; }
.datecard.on { border: 2px solid var(--accent); background: var(--accent-soft); padding: 10.5px 12.5px; }
/* leave room for the tick badge so the month label never collides with it */
.datecard .m { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 500; color: #9aa7aa; white-space: nowrap; padding-right: 22px; }
.datecard .m svg { flex-shrink: 0; }
.datecard.on .m { color: var(--accent); }
.datecard .r { font-weight: 700; font-size: 14.5px; margin-top: 5px; line-height: 1.1; white-space: nowrap; }
.datecard .seat { margin-top: 6px; font-size: 10px; font-weight: 600; color: #16a34a; }
.datecard .seat.low { color: var(--coral); }
.datecard .tick { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
/* Meeting point options (selectable, single-select) */
.mp-list { display: flex; flex-direction: column; gap: 10px; }
.mp-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1.5px solid #e8efed; background: #fff; border-radius: 13px; padding: 12px 14px; position: relative; }
.mp-opt.on { border: 2px solid var(--accent); background: var(--accent-soft); padding: 11.5px 13.5px; }
.mp-opt .mp-ic { color: #9aa7aa; display: flex; flex-shrink: 0; }
.mp-opt.on .mp-ic { color: var(--accent); }
.mp-opt .mp-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.mp-opt .mp-time { flex-shrink: 0; margin-right: 4px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.mp-opt .mp-tick { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp-opt .mp-tick[hidden] { display: none; }

/* Meeting-point trigger (shown when there are many points; opens the sheet) */
.mp-trigger { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1.5px solid #e8efed; background: #fff; border-radius: 13px; padding: 13px 14px; cursor: pointer; font-family: inherit; }
.mp-trigger:hover { border-color: var(--accent); }
.mp-trigger .mp-ic { color: var(--accent); display: flex; flex-shrink: 0; }
.mp-trigger-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.mp-trigger-name { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-trigger-time { flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.mp-trigger-chev { display: flex; flex-shrink: 0; }
.mp-trigger-hint { margin-top: 8px; font-size: 11.5px; color: #9aa7aa; }

/* Meeting-point bottom-sheet */
.mp-sheet { text-align: left; padding: 0; max-height: 78vh; display: flex; flex-direction: column; overflow: hidden; }
.mp-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.mp-sheet-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.mp-sheet-x { border: none; background: #f4f8f7; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.mp-sheet-search { display: flex; align-items: center; gap: 8px; margin: 0 20px 6px; padding: 11px 13px; background: #f4f8f7; border-radius: 12px; }
.mp-sheet-input { flex: 1; border: none; background: transparent; outline: none; font-family: inherit; font-size: 14px; color: var(--ink); }
.mp-sheet-input::placeholder { color: #9aa7aa; }
.mp-sheet-list { padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mp-sheet-empty { padding: 24px 20px 32px; text-align: center; font-size: 13.5px; color: #9aa7aa; }
/* The selected card's tick is toggled via the [hidden] attribute; CSS display
   must yield to it (otherwise display:flex would keep every tick visible). */
.datecard .tick[hidden] { display: none; }

/* timeline itinerary */
.tl-row { display: flex; gap: 14px; position: relative; }
.tl-node { display: flex; flex-direction: column; align-items: center; }
.tl-num { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; }
.tl-line { width: 2px; flex: 1; background: #e1ece9; margin-top: 4px; }
.tl-day { font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }
.tl-title { font-weight: 700; font-size: 14.5px; margin: 1px 0 7px; }
.tl-item { display: flex; gap: 8px; align-items: flex-start; }
.tl-dot { width: 5px; height: 5px; border-radius: 50%; background: #bcd0cc; margin-top: 7px; flex-shrink: 0; }
.tl-item span { font-size: 13px; color: #5a6472; line-height: 1.45; }
/* Itinerary "Lihat selengkapnya" toggle */
.itin-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 14px; padding: 11px 16px;
  background: var(--accent-soft); color: var(--accent);
  border: none; border-radius: 14px; font-family: inherit; font-weight: 600; font-size: 13px;
}
.itin-more-chev { transition: transform .2s ease; }
.itin-more.open .itin-more-chev { transform: rotate(180deg); }

/* facilities */
.fac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.fac { display: flex; align-items: center; gap: 10px; }
.fac .ic { width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.fac span { font-size: 12.5px; color: #46505e; font-weight: 500; line-height: 1.25; }
.excluded { margin-top: 15px; background: #fafcfb; border: 1px solid #eef4f3; border-radius: 14px; padding: 12px 14px; }
.excluded .h2 { font-size: 12px; font-weight: 600; color: #7a8c92; margin-bottom: 7px; }
.bring-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.bring { display: flex; align-items: center; gap: 10px; background: #f1f8f7; border-radius: 13px; padding: 10px 12px; font-size: 12.5px; color: #46505e; font-weight: 500; }

/* sticky action bar */
.actionbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 460px; max-width: 100%; z-index: 30;
  background: #fff; border-top: 1px solid #eef4f3; padding: 14px 20px 18px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 -8px 24px rgba(14,90,80,.07);
}
.actionbar .old { font-size: 11px; color: #aab7ba; text-decoration: line-through; }
.actionbar .now { font-weight: 700; font-size: 19px; color: var(--accent); }
.actionbar .lbl { font-size: 11.5px; color: var(--muted); }

/* booking steps */
.steps { display: flex; gap: 6px; margin-top: 14px; }
.step { flex: 1; height: 4px; border-radius: 4px; background: #e7eeec; }
.step.on { background: var(--accent); }
.mini { display: flex; gap: 12px; background: #fff; border: 1px solid #eef4f3; border-radius: 16px; padding: 10px; box-shadow: 0 6px 18px rgba(14,90,80,.05); }
.mini .t { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.mini .t img { width: 100%; height: 100%; object-fit: cover; }
.panel { background: #fff; border: 1px solid #eef4f3; border-radius: 16px; }
.prow { display: flex; align-items: center; padding: 14px 16px; }
.prow + .prow { border-top: 1px solid #f0f5f4; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button { width: 32px; height: 32px; border-radius: 10px; border: 1.5px solid #e1ebe8; background: #fff; display: flex; align-items: center; justify-content: center; }
.stepper button:disabled { background: #f3f7f6; }
.stepper .v { font-weight: 700; font-size: 15px; min-width: 16px; text-align: center; }
.summary { margin-top: 22px; background: #fff; border: 1px solid #eef4f3; border-radius: 16px; padding: 16px 18px; }
.sumrow { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.sumrow .l { font-size: 13px; color: #7a8c92; font-weight: 500; }
.sumrow .r { font-size: 13.5px; color: #46505e; font-weight: 600; }
.sumrow.total .l { font-size: 15px; color: var(--ink); font-weight: 700; }
.sumrow.total .r { font-size: 17px; color: var(--accent); font-weight: 700; }
.divider { height: 1px; background: #f0f5f4; margin: 10px 0; }

/* payment options */
.payopt { cursor: pointer; border-radius: 14px; padding: 12px 14px; border: 1.5px solid #eaf2f0; background: #fff; display: flex; align-items: center; gap: 11px; }
.payopt.on { border: 2px solid var(--accent); background: var(--accent-soft); }
.radio { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 2px solid #cfdedb; display: flex; align-items: center; justify-content: center; }
.payopt.on .radio { border: none; background: var(--accent); }

/* success */
.success-check { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.bookcode { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: #fff; border: 1px dashed #cfdedb; border-radius: 11px; padding: 9px 16px; }
.note-warn { margin-top: 8px; font-size: 12px; color: #b9791f; background: #fff7ec; border-radius: 10px; padding: 8px 12px; }

/* ── Auth & splash (added for storefront customer login) ─────────────────── */
.auth-wrap { padding: 0 24px; }
.auth-head { padding-top: 56px; }
/* Branding logo on auth pages — hidden until a real logo loads (see HTML). */
.auth-logo { display: none; height: 48px; max-width: 200px; width: auto; object-fit: contain; margin-bottom: 18px; }
.auth-head h1 { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.4px; }
.auth-head p { font-size: 13.5px; color: #7a8c92; margin-top: 6px; line-height: 1.5; }
.field { margin-top: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: #5a6e72; margin-bottom: 7px; }
.field .input-box { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #e4eeed; border-radius: 14px; padding: 13px 15px; transition: border-color .15s; }
.field .input-box:focus-within { border-color: var(--accent); }
.field input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 14.5px; color: var(--ink); }
.field .eye { background: none; border: none; padding: 0; display: flex; color: #9aa7aa; }
.auth-err { display: none; margin-top: 14px; font-size: 12.5px; color: var(--coral); background: #fff1ef; border-radius: 11px; padding: 10px 14px; }
.auth-err.show { display: block; }
.auth-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-foot { text-align: center; font-size: 13px; color: #7a8c92; margin-top: 22px; }
.divider-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; color: #9aa7aa; font-size: 12px; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: #e4eeed; }

/* splash */
/* Full-bleed hero photo: brand logo, headline, and a small "With Us" line. */
.splash { position: fixed; inset: 0; z-index: 50; color: #fff;
  background: #0c1a18 url('../img/dieng.webp') center/cover no-repeat;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  padding: 60px 34px; opacity: 1; transition: opacity .5s ease; }
.splash::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(8,15,14,.5) 0%, rgba(8,15,14,.1) 40%, rgba(8,15,14,.55) 100%); }
.splash.hide { opacity: 0; pointer-events: none; }
/* Brand logo — hidden until a real logo loads (the render server swaps the src). */
.splash-logo { display: none; position: relative; z-index: 1; height: 44px; width: auto; max-width: 180px; object-fit: contain; margin-bottom: 22px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
.splash-title { position: relative; z-index: 1; max-width: 8ch;
  font-size: 46px; font-weight: 700; line-height: 1.05; letter-spacing: -1px;
  text-shadow: 0 2px 20px rgba(0,0,0,.42);
  opacity: 0; animation: splashFade .6s ease .15s forwards; }
.splash-sub { position: relative; z-index: 1; margin-top: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  opacity: 0; animation: splashFade .6s ease .3s forwards; }
@keyframes splashFade { to { opacity: 1; } }
.profile-id { display:flex; align-items:center; gap:14px; }
.profile-id .pic { width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow:0 6px 16px rgba(14,90,80,.18); }
.menu-card { margin-top:18px; background:#fff; border:1px solid #eef4f3; border-radius:18px; overflow:hidden; }
.menu-row { width:100%; border:none; background:transparent; display:flex; align-items:center; gap:13px; padding:15px 16px; font-family:inherit; }
.menu-row + .menu-row { border-top:1px solid #f2f6f5; }
.menu-row .ic { width:36px; height:36px; border-radius:11px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.menu-row .lbl { flex:1; text-align:left; font-size:14px; font-weight:500; color:var(--ink); }
.btn-logout { width:100%; margin-top:16px; border:1.5px solid #f0d4d4; background:#fff; border-radius:15px; padding:14px 0; display:flex; align-items:center; justify-content:center; gap:8px; color:#d6453f; font-weight:600; font-size:14px; font-family:inherit; }

/* ── Profile: stats + traveller progress ─────────────────────────────────── */
.pstats { display:flex; gap:10px; margin-top:16px; }
.pstat { flex:1; background:#fff; border:1px solid #eef4f3; border-radius:14px; padding:12px 8px; text-align:center; box-shadow:0 2px 8px rgba(14,90,80,.04); }
.pstat .v { font-weight:700; font-size:19px; color:var(--accent); }
.pstat .l { font-size:11.5px; color:var(--muted); margin-top:1px; }
.progress-card { position:relative; margin-top:16px; background:#fff; border:1px solid #eef4f3; border-radius:18px; padding:16px 18px; overflow:hidden; box-shadow:0 6px 18px rgba(14,90,80,.05); }
.progress-card .lead { width:70%; font-size:14.5px; color:#46505e; line-height:1.4; }
.progress-card .lead b { font-weight:700; color:var(--ink); font-size:17px; }
.progress-card .bar { margin-top:14px; height:9px; border-radius:6px; background:#e8eef0; overflow:hidden; width:82%; }
.progress-card .bar > span { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#4a9d5b,#2f7d3f); }
.progress-card .mtn { position:absolute; right:-4px; bottom:-2px; width:116px; height:88px; }

/* ── Empty state (itinerary / riwayat) ───────────────────────────────────── */
.empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:44px 30px 0; }
.empty .deco { position:relative; width:116px; height:116px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; }
.empty .deco .inner { position:absolute; inset:24px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(14,90,80,.10); }
.empty .deco .dot { position:absolute; border-radius:50%; }
.empty .deco .dot.a { width:14px; height:14px; background:var(--sun); top:6px; right:14px; }
.empty .deco .dot.b { width:10px; height:10px; background:var(--accent); bottom:14px; left:8px; }
.empty .e-title { font-weight:700; font-size:18px; color:#16323a; margin-top:16px; }
.empty .e-body { font-size:13.5px; color:#7a8c92; line-height:1.55; max-width:260px; margin-top:8px; }
.empty .btn { display:inline-flex; align-items:center; gap:8px; margin-top:20px; }
.empty .ghost { margin-top:14px; background:none; border:none; font-family:inherit; font-size:13px; font-weight:600; color:var(--accent); }

/* ── Filter tabs (riwayat) ───────────────────────────────────────────────── */
.ftabs { display:flex; gap:8px; margin:16px 0 4px; }
.ftab { flex:1; border:1px solid #e4eeed; background:#fff; border-radius:12px; padding:9px 0; font-family:inherit; font-size:13px; font-weight:600; color:#7a8c92; }
.ftab.on { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── Trip banner (itinerary active trip) ─────────────────────────────────── */
.tripbanner { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid #eef4f3; border-radius:18px; padding:14px; box-shadow:var(--shadow-card); }
.tripbanner .pic { width:54px; height:54px; border-radius:14px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pill { display:inline-block; font-size:11px; font-weight:600; padding:3px 10px; border-radius:9px; background:var(--accent-soft); color:var(--accent); }

/* ── Itinerary screen (active trip: hero card + day tabs + timeline) ──────── */
.it-status { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#0E7C5B; background:#E3F5EC; padding:5px 12px; border-radius:999px; }
.it-status .dot { width:7px; height:7px; border-radius:50%; background:#16a34a; }
/* Dark photo hero */
.trip-hero { position:relative; margin-top:16px; border-radius:20px; overflow:hidden; min-height:172px; background:#16323a; display:flex; align-items:flex-end; }
.trip-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.trip-hero .scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,28,26,.15) 0%, rgba(8,28,26,.78) 100%); }
.trip-hero .info { position:relative; z-index:2; padding:18px 20px; color:#fff; width:100%; }
.trip-hero .code { font-size:11px; font-weight:600; letter-spacing:1px; opacity:.85; }
.trip-hero .ttl { font-size:23px; font-weight:700; line-height:1.1; margin-top:2px; }
.trip-hero .dates { font-size:13px; opacity:.9; margin-top:5px; }
.trip-hero .count { display:inline-flex; align-items:center; gap:6px; margin-top:11px; background:rgba(255,255,255,.16); backdrop-filter:blur(3px); padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600; }
/* Day tabs */
.day-tabs { display:flex; gap:10px; margin-top:16px; overflow-x:auto; padding-bottom:2px; margin-right:-18px; }
.day-tab { flex-shrink:0; min-width:96px; text-align:center; border:1.5px solid #e8efed; background:#fff; border-radius:16px; padding:11px 16px; font-family:inherit; }
.day-tab .lbl { font-size:11.5px; font-weight:600; color:#9aa7aa; }
.day-tab .dt { font-size:15px; font-weight:700; color:var(--ink); margin-top:2px; }
.day-tab.on { background:var(--accent); border-color:var(--accent); }
.day-tab.on .lbl, .day-tab.on .dt { color:#fff; }
.day-head { font-weight:700; font-size:16px; margin:22px 0 14px; }
/* Timeline */
.it-tl { position:relative; }
.it-stop { display:flex; gap:14px; align-items:flex-start; padding-bottom:18px; position:relative; }
.it-stop .time { width:46px; flex-shrink:0; font-size:12.5px; font-weight:600; color:#7a8c92; padding-top:24px; text-align:right; }
.it-stop .node { position:relative; display:flex; flex-direction:column; align-items:center; padding-top:26px; }
.it-stop .node .pin { width:13px; height:13px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px currentColor; background:currentColor; flex-shrink:0; }
.it-stop .node .line { width:2px; flex:1; background:#e1ece9; margin-top:4px; min-height:30px; }
.it-stop:last-child .node .line { display:none; }
.it-card { flex:1; min-width:0; background:#fff; border:1px solid #eef4f3; border-radius:16px; padding:12px; box-shadow:var(--shadow-card); display:flex; gap:12px; align-items:center; }
.it-card .thumb { width:60px; height:60px; border-radius:12px; overflow:hidden; flex-shrink:0; background:#e9f1f0; }
.it-card .thumb img { width:100%; height:100%; object-fit:cover; }
.it-card .body { flex:1; min-width:0; }
.it-badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:8px; }
.it-card .st-title { font-weight:700; font-size:14.5px; color:var(--ink); margin-top:6px; line-height:1.2; }
.it-card .st-sub { font-size:12.5px; color:#9aa7aa; margin-top:2px; }

/* ── Google sign-in button container ─────────────────────────────────────── */
.gbtn { display:flex; justify-content:center; min-height:44px; margin-top:4px; }
.gbtn-fallback { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; border:1.5px solid #e4eeed; border-radius:14px; padding:13px 0; font-family:inherit; font-size:14px; font-weight:600; color:#3c4043; }

/* ── Page slide transitions (forward/back stack navigation) ───────────────────
   Self-hosted subset of Animate.css (CSP forbids external style CDNs). The
   render server's wb-page-transition runtime tags the incoming .app with one of
   these on load: slideInRight when navigating forward (home → detail → select →
   payment), slideInLeft when going back. Direct entry/refresh gets neither.
   Honors prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .animate__animated {
    animation-duration: .32s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
  }
  .animate__slideInRight { animation-name: wbSlideInRight; }
  .animate__slideInLeft  { animation-name: wbSlideInLeft; }
}
@keyframes wbSlideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes wbSlideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Staggered reveal for list/card children when present (opt-in via data-stagger). */
@media (prefers-reduced-motion: no-preference) {
  [data-stagger] > * { animation: wbFadeUp .18s cubic-bezier(.22,.61,.36,1) both; }
  [data-stagger] > *:nth-child(2) { animation-delay: .02s; }
  [data-stagger] > *:nth-child(3) { animation-delay: .04s; }
  [data-stagger] > *:nth-child(4) { animation-delay: .06s; }
  [data-stagger] > *:nth-child(5) { animation-delay: .07s; }
  [data-stagger] > *:nth-child(n+6) { animation-delay: .08s; }
}
@keyframes wbFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Shimmer (skeleton loading for not-yet-ready data/images) ────────────── */
.wb-shimmer {
  position: relative; overflow: hidden;
  background: #e9f1f0;
}
.wb-shimmer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 80%);
  transform: translateX(-100%);
  animation: wbShimmer 1.3s ease-in-out infinite;
}
@keyframes wbShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .wb-shimmer::after { animation: none; }
}

/* Images: show a shimmer placeholder until the image finishes loading, then
   fade the image in over it. Applied via the wb-img helper in travel.js. */
.wb-img { display: block; position: relative; width: 100%; height: 100%; background: #e9f1f0; overflow: hidden; }
.wb-img > img { width: 100%; height: 100%; object-fit: cover; }
.wb-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 80%);
  transform: translateX(-100%);
  animation: wbShimmer 1.3s ease-in-out infinite;
  transition: opacity .25s ease;
}
.wb-img > img { opacity: 0; transition: opacity .3s ease; }
.wb-img.is-loaded > img { opacity: 1; }
.wb-img.is-loaded::after { opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .wb-img > img { opacity: 1; transition: none; }
  .wb-img::after { animation: none; }
}

/* Gallery thumbnail wrapper (shimmer + fixed size). */
.wb-img.gal-thumb { width: 120px; height: 90px; border-radius: 12px; flex-shrink: 0; }

/* Image lightbox — tap any [data-zoom] image (detail hero + gallery) to view
   full-screen with pinch / double-tap zoom and drag-to-pan. */
[data-zoom] { cursor: zoom-in; }
.wb-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; }
.wb-lightbox.on { display: flex; }
.wb-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; touch-action: none; will-change: transform; user-select: none; -webkit-user-select: none; }
.wb-lb-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 38px; text-align: center; cursor: pointer; }

/* Skeleton card pieces (used in loading states). */
.sk { background: #e9f1f0; border-radius: 8px; }
.sk-line { height: 11px; border-radius: 6px; }
/* Skeleton tour cards mirroring .dcard layout. */
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; row-gap: 26px; }
.sk-card { background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid #eef4f3; box-shadow: var(--shadow-card); }
.sk-card .sk-thumb { height: 130px; }
.sk-card .sk-pad { padding: 14px 13px 16px; }
.sk-card.wide { display: flex; }
.sk-card.wide .sk-thumb { width: 132px; height: auto; min-height: 124px; flex-shrink: 0; }
.sk-card.wide .sk-pad { flex: 1; }

/* ── Confirm modal (logout, etc.) ───────────────────────────────────────── */
.wb-modal-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(16,40,46,.42); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .18s ease;
}
.wb-modal-backdrop.show { opacity: 1; }
.wb-modal {
  width: 100%; max-width: 460px; background: #fff;
  border-radius: 22px 22px 0 0; padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(14,90,80,.18); text-align: center;
  transform: translateY(16px); transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.wb-modal-backdrop.show .wb-modal { transform: none; }
.wb-modal .ic { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; }
.wb-modal .ic.danger { background: #fdeceb; }
.wb-modal h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.wb-modal p { margin: 7px 0 0; font-size: 13.5px; color: #7a8c92; line-height: 1.5; }
.wb-modal .acts { display: flex; gap: 10px; margin-top: 22px; }
.wb-modal .acts > button { flex: 1; }
.wb-btn-cancel { border: 1.5px solid #e4eeed; background: #fff; color: var(--ink);
  border-radius: 14px; padding: 13px 0; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.wb-btn-cancel:hover { background: #f4fbfa; }
.wb-btn-danger { border: none; background: #e5484d; color: #fff;
  border-radius: 14px; padding: 13px 0; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.wb-btn-danger:hover { background: #d23b40; }
@media (prefers-reduced-motion: reduce) {
  .wb-modal-backdrop, .wb-modal { transition: none; }
}
@media (min-width: 520px) {
  .wb-modal-backdrop { align-items: center; }
  .wb-modal { border-radius: 22px; }
}