/* ===== MasVeriyaa — ocean, sunset, salt ===== */
:root {
  --ink: #0b1d2e;
  --deep: #0e3550;
  --sea: #0e4d64;
  --lagoon: #19b5b0;
  --foam: #e8f6f5;
  --sand: #f7f1e7;
  --coral: #ff6b4a;
  --coral-d: #e5502f;
  --sun: #f4b942;
  --text: #1c2b38;
  --muted: #5f7180;
  --line: #dfe7ea;
  --card: #fff;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(11, 29, 46, .25);
  --head: 'Big Shoulders Display', Impact, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--text); background: var(--sand); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--sea); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--head); line-height: 1.02; letter-spacing: .5px; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; }
h3 { font-size: 1.35rem; font-weight: 800; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); } .small { font-size: .88rem; } .nowrap { white-space: nowrap; }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .75rem; font-weight: 700; color: var(--lagoon); margin: 0 0 .7rem; }
.eyebrow.dark { color: var(--coral); }
.block { padding: 72px 0; }
.empty { padding: 26px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--coral); color: #fff; border: 0; border-radius: 999px; padding: 11px 22px;
  font: 700 .95rem var(--body); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; box-shadow: 0 6px 18px -8px rgba(255, 107, 74, .8); }
.btn:hover { background: var(--coral-d); transform: translateY(-1px); }
.btn.big { padding: 15px 30px; font-size: 1.05rem; }
.btn.sm { padding: 7px 16px; font-size: .85rem; }
.btn.xs { padding: 5px 11px; font-size: .78rem; box-shadow: none; }
.btn.full { width: 100%; }
.btn.ghost { background: transparent; border: 1.5px solid currentColor; box-shadow: none; color: inherit; }
.btn.ghost-dark { background: transparent; color: var(--sea); border: 1.5px solid var(--sea); box-shadow: none; }
.btn.ghost-dark:hover { background: var(--sea); color: #fff; }
.btn.danger { background: #c23b3b; box-shadow: none; }

/* ---------- Top bar ---------- */
.topbar { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 1000; }
.topbar.over-hero { position: absolute; left: 0; right: 0; background: transparent; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.logo { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font: 800 1.7rem var(--head); letter-spacing: 1px; }
.logo b { color: var(--coral); font-weight: 900; }
.links { display: flex; align-items: center; gap: 22px; }
.links a { color: #e5f1f3; text-decoration: none; font-weight: 600; font-size: .93rem; }
.links a:hover { color: #fff; }
.burger { display: none; width: 36px; height: 36px; cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 6px; right: 6px; height: 2px; background: #fff; content: ''; border-radius: 2px; }
.burger span { top: 17px; } .burger span::before { top: -7px; left: 0; right: 0; } .burger span::after { top: 7px; left: 0; right: 0; }
@media (max-width: 860px) {
  .burger { display: block; }
  .links { position: absolute; top: 70px; left: 0; right: 0; background: var(--ink); flex-direction: column; align-items: flex-start; padding: 18px 24px 26px; gap: 14px; display: none; }
  #navtoggle:checked ~ .links { display: flex; }
}
.flash { padding: 13px 0; font-weight: 600; background: #d8f3ec; color: #0c5b4a; }
.flash.err { background: #fde4df; color: #8a2a17; }
.notice { background: #fff6dc; border-left: 4px solid var(--sun); padding: 14px 18px; border-radius: 8px; margin-bottom: 22px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: #fff; padding: 120px 0 170px; }
.hero-sky { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 78% 38%, rgba(255, 170, 90, .55), transparent 45%),
  linear-gradient(180deg, #0b1d2e 0%, #13405e 42%, #1b6b84 70%, #f08a5d 100%); }
.sun { position: absolute; width: 230px; height: 230px; border-radius: 50%; right: 12%; top: 34%;
  background: radial-gradient(circle, #ffe0a3 0%, #ffb067 45%, rgba(255, 120, 80, 0) 72%); filter: blur(1px); animation: sunPulse 8s ease-in-out infinite; }
@keyframes sunPulse { 50% { transform: scale(1.06); } }
.waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 42%; }
.waves path { animation: swell 9s ease-in-out infinite; transform-origin: center; }
.w1 { fill: #12506b; opacity: .85; } .w2 { fill: #0e3d57; animation-duration: 11s !important; animation-delay: -2s !important; } .w3 { fill: var(--ink); animation-duration: 13s !important; animation-delay: -4s !important; }
@keyframes swell { 50% { transform: translateX(-30px) translateY(6px); } }
.line { position: absolute; right: 6%; top: 0; height: 75%; width: 30%; pointer-events: none; animation: bob 5s ease-in-out infinite; transform-origin: top right; }
@keyframes bob { 50% { transform: rotate(-1.5deg) translateY(8px); } }
.hero-inner { position: relative; z-index: 2; }
.hero h1 { color: #fff; font-size: clamp(3rem, 8.5vw, 7rem); text-transform: uppercase; margin-bottom: .3em; text-shadow: 0 4px 30px rgba(0, 0, 0, .25); }
.hero h1 em { font-style: normal; color: var(--coral); -webkit-text-stroke: 0; }
.lede { font-size: 1.12rem; max-width: 620px; color: #d9ecf0; }
@media (prefers-reduced-motion: reduce) { .waves path, .sun, .line { animation: none; } }

.searchbar { margin-top: 34px; display: flex; gap: 10px; align-items: flex-end; background: rgba(255, 255, 255, .96); padding: 14px; border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); max-width: 980px; flex-wrap: wrap; }
.searchbar label { flex: 1 1 170px; display: flex; flex-direction: column; color: var(--ink); }
.searchbar label.narrow { flex: 0 1 100px; }
.searchbar span { font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; color: var(--muted); padding: 0 4px 4px; }
.searchbar select, .searchbar input { border: 1.5px solid var(--line); background: #fff; }
.searchbar .btn { flex: 0 0 auto; height: 50px; }

/* ---------- Forms ---------- */
input, select, textarea { font: inherit; width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(25, 181, 176, .18); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--coral); }
input[type=range] { padding: 0; border: 0; accent-color: var(--coral); }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 14px; }
label small { font-weight: 400; color: var(--muted); }
label.inline { display: flex; align-items: center; gap: 8px; }
fieldset { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 16px 18px 6px; margin: 0 0 16px; background: #fff; }
legend { font-weight: 700; padding: 0 6px; color: var(--sea); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.checks label { display: flex; align-items: center; gap: 6px; font-weight: 500; margin: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.preview { display: block; max-height: 140px; border-radius: 10px; margin-top: 10px; }
.boost p { margin-top: 0; }
.boost-row { display: flex; gap: 16px; align-items: center; }
.boost-row output { font-weight: 800; color: var(--coral); white-space: nowrap; min-width: 170px; }

/* ---------- Counters ---------- */
.counter-strip { background: var(--ink); color: #fff; padding: 26px 0 40px; }
.counters { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.counters b { display: block; font: 900 2.8rem var(--head); color: var(--lagoon); }
.counters span { color: #9fb8c4; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }
@media (max-width: 640px) { .counters { grid-template-columns: 1fr 1fr; gap: 18px; } }

.section-head { margin-bottom: 34px; }
.section-head.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.section-head.light h2 { color: #fff; }
.muted-light { color: #9fc3cf; }

/* ---------- Fishing styles ---------- */
.styles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .styles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .styles-grid { grid-template-columns: 1fr; } }
.style-tile { position: relative; padding: 24px 22px 20px; border-radius: var(--radius); text-decoration: none; color: #fff; min-height: 210px; display: flex; flex-direction: column; overflow: hidden; transition: transform .2s; }
.style-tile:hover { transform: translateY(-4px); }
.style-tile::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .08); }
.style-tile.s0 { background: linear-gradient(150deg, #0e4d64, #0b1d2e); }
.style-tile.s1 { background: linear-gradient(150deg, #19b5b0, #0e4d64); }
.style-tile.s2 { background: linear-gradient(150deg, #ff6b4a, #b23a2a); }
.style-tile.s3 { background: linear-gradient(150deg, #224a72, #0e3550); }
.style-tile .num { font: 900 2.4rem var(--head); opacity: .35; }
.style-tile h3 { color: #fff; font-size: 1.6rem; margin: 4px 0 6px; text-transform: uppercase; }
.style-tile p { margin: 0 0 auto; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.style-tile .count { margin-top: 14px; font-weight: 700; font-size: .85rem; }

/* ---------- Map ---------- */
.map-section { background: var(--ink); padding: 80px 0; }
.bigmap { height: 560px; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { background: rgba(255, 255, 255, .08); color: #d5e8ed; border: 1px solid rgba(255, 255, 255, .15); padding: 7px 14px; border-radius: 999px; font: 600 .85rem var(--body); cursor: pointer; }
.chip.on, .chip:hover { background: var(--lagoon); color: var(--ink); border-color: var(--lagoon); }
.boat-pin span { display: block; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; background: var(--coral); transform: rotate(-45deg); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.pop b { font: 800 1.2rem var(--head); display: block; color: var(--ink); }
.pop span { display: block; color: var(--muted); font-size: .82rem; }
.pop ul { padding: 0; margin: 8px 0 0; list-style: none; }
.pop li { padding: 6px 0; border-top: 1px solid var(--line); }
.pop li a { font-weight: 700; display: block; }
.pop small { color: var(--muted); }
.smallmap { height: 0; border-radius: var(--radius); overflow: hidden; transition: height .3s; margin-bottom: 0; }
.smallmap.show { height: 380px; margin-bottom: 20px; }
.tripmap { height: 300px; border-radius: var(--radius); }
.pickmap { height: 320px; border-radius: 10px; margin-bottom: 8px; cursor: crosshair; }

/* ---------- Trip cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.card { background: var(--card); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -18px rgba(11, 29, 46, .4); }
.card-media { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.card-media.noimg { display: grid; place-items: center; color: rgba(255, 255, 255, .22); }
.card-media.t-0 { background: linear-gradient(140deg, #19b5b0, #0e4d64); }
.card-media.t-1 { background: linear-gradient(140deg, #0e4d64, #0b1d2e); }
.card-media.t-2 { background: linear-gradient(140deg, #ff8a5c, #c4452b); }
.card-media.t-3 { background: linear-gradient(140deg, #2c6a9a, #0e3550); }
.fish-mark { width: 55%; }
.tags { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.tag { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; background: var(--ink); color: #fff; }
.tag.hot { background: var(--sun); color: var(--ink); }
.tag.sale { background: #e0362b; color: #fff; }
.type-chip { position: absolute; bottom: 12px; left: 12px; background: rgba(11, 29, 46, .78); color: #fff; font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(4px); }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 1.45rem; margin-bottom: 4px; }
.meta { color: var(--muted); font-size: .86rem; margin: 0 0 12px; }
.facts { list-style: none; padding: 0; margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.facts li { background: var(--foam); color: var(--sea); font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.price { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.price b { font: 900 1.7rem var(--head); color: var(--ink); }
.price s { color: var(--muted); font-size: .9rem; }
.price span { color: var(--muted); font-size: .85rem; }

/* ---------- Heritage + CTA ---------- */
.heritage { background: linear-gradient(180deg, var(--sea), var(--deep)); color: #d7eaef; padding: 90px 0; }
.heritage h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); }
.heritage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
@media (max-width: 800px) { .heritage-grid { grid-template-columns: 1fr; gap: 10px; } }
.pledge { list-style: none; padding: 0; margin: 20px 0 0; }
.pledge li { padding: 8px 0 8px 30px; position: relative; border-top: 1px solid rgba(255, 255, 255, .12); font-weight: 600; color: #fff; }
.pledge li::before { content: ''; position: absolute; left: 0; top: 14px; width: 16px; height: 8px; border-left: 3px solid var(--lagoon); border-bottom: 3px solid var(--lagoon); transform: rotate(-45deg); }
.cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta h2 { margin-bottom: 6px; }
.cta p { margin: 0; color: var(--muted); max-width: 560px; }

/* ---------- Page heads / search ---------- */
.page-head { background: linear-gradient(120deg, var(--ink), var(--sea)); color: #fff; padding: 56px 0 46px; }
.page-head h1 { color: #fff; text-transform: uppercase; }
.search-layout { display: grid; grid-template-columns: 270px 1fr; gap: 30px; padding: 36px 0 70px; align-items: start; }
@media (max-width: 860px) { .search-layout { grid-template-columns: 1fr; } }
.filters { background: #fff; padding: 22px; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 86px; }
@media (max-width: 860px) { .filters { position: static; } }
.results-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }

/* ---------- Trip page ---------- */
.trip-hero { background: linear-gradient(120deg, var(--ink), var(--sea) 60%, #1b8a8e); background-size: cover; background-position: center; color: #fff; padding: 110px 0 60px; }
.trip-hero h1 { color: #fff; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 4.8rem); }
.trip-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; padding: 40px 0 80px; align-items: start; }
@media (max-width: 960px) { .trip-layout { grid-template-columns: 1fr; } }
.trip-main h2 { margin-top: 1.6em; }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.spec-grid div { background: #fff; padding: 16px 18px; }
.spec-grid span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.spec-grid b { font: 800 1.4rem var(--head); color: var(--ink); }
@media (max-width: 560px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: 6px 0 6px 26px; position: relative; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 12px; height: 6px; border-left: 2.5px solid var(--lagoon); border-bottom: 2.5px solid var(--lagoon); transform: rotate(-45deg); }
.ticks.safety li::before { border-color: var(--coral); }
.book-box { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 24px 50px -24px rgba(11, 29, 46, .45); position: sticky; top: 90px; }
.book-box .from { margin-bottom: 18px; color: var(--muted); }
.book-box .from b { font: 900 2rem var(--head); color: var(--ink); }
.total-box { background: var(--foam); border-radius: 12px; padding: 12px 16px; margin: 4px 0 16px; }
.total-box div { display: flex; justify-content: space-between; padding: 3px 0; }
.total-box .grand { border-top: 1px solid rgba(14, 77, 100, .2); margin-top: 6px; padding-top: 8px; font-weight: 800; font-size: 1.15rem; color: var(--ink); }

/* ---------- Confirmation / auth ---------- */
.narrow-page { max-width: 820px; }
.confirm { background: #fff; padding: 40px; border-radius: 20px; box-shadow: var(--shadow); }
.ref { font: 900 1.6rem var(--head); color: var(--coral); letter-spacing: 2px; }
.kv { width: 100%; border-collapse: collapse; margin: 20px 0; }
.kv th, .kv td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv th { width: 130px; color: var(--muted); font-weight: 600; }
.auth { min-height: 70vh; display: grid; place-items: center; padding: 50px 16px; background: radial-gradient(ellipse at top, var(--foam), var(--sand)); }
.auth-box { background: #fff; padding: 36px; border-radius: 20px; width: min(440px, 100%); box-shadow: var(--shadow); }
.auth-box h1 { font-size: 2.4rem; text-transform: uppercase; }

/* ---------- Status pills ---------- */
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.status.pending { background: #fff1cf; color: #8a5a00; }
.status.confirmed { background: #d8f3ec; color: #0c5b4a; }
.status.completed { background: #dde9ff; color: #24438a; }
.status.cancelled { background: #fbe0dc; color: #8a2a17; }

/* ---------- Dashboards ---------- */
.area-host main, .area-admin main { background: #f1f5f6; min-height: 70vh; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; }
.kpis.six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .kpis.six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .kpis, .kpis.six { grid-template-columns: 1fr 1fr; } }
.kpis div { background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: 0 2px 6px rgba(11, 29, 46, .05); }
.kpis span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; }
.kpis b { font: 900 2rem var(--head); color: var(--ink); display: block; }
.kpis small { color: var(--muted); font-size: .78rem; }
.kpis .hl { background: var(--ink); } .kpis .hl b { color: var(--lagoon); } .kpis .hl span, .kpis .hl small { color: #9fb8c4; }
.panel { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: 0 2px 6px rgba(11, 29, 46, .05); margin-bottom: 18px; }
.panel h3 { font-size: 1.25rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.stat-grid .panel { margin: 0; }
.chart-box { position: relative; height: 290px; } .chart-box.sm { height: 240px; }
.hbars { list-style: none; padding: 0; margin: 0; }
.hbars li { display: grid; grid-template-columns: 130px 1fr 54px; gap: 10px; align-items: center; padding: 5px 0; font-size: .88rem; }
.hbars .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .bar { background: var(--foam); border-radius: 4px; height: 10px; overflow: hidden; }
.hbars .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--lagoon), var(--sea)); border-radius: 4px; }
.hbars b { text-align: right; }
.seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 2px 6px rgba(11, 29, 46, .06); flex-wrap: wrap; }
.seg a { padding: 6px 14px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: .85rem; }
.seg a.on { background: var(--ink); color: #fff; }
.table-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); box-shadow: 0 2px 6px rgba(11, 29, 46, .05); margin-bottom: 30px; }
.panel .table-wrap { box-shadow: none; margin: 0; }
.table-wrap.tall { max-height: 560px; overflow-y: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 12px 14px; border-bottom: 2px solid var(--line); background: #fafcfc; position: sticky; top: 0; }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data.compact td { padding: 6px 12px; vertical-align: middle; }
table.data small { color: var(--muted); }
table.data form { display: flex; gap: 6px; flex-wrap: wrap; }
.rate { width: 110px; padding: 6px 8px; }
.avail-layout { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .avail-layout { grid-template-columns: 1fr; } }
.row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.days label { background: var(--foam); padding: 5px 10px; border-radius: 8px; }
.boat-list { display: grid; gap: 10px; }
.boat-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 16px; align-items: center; background: #fff; padding: 12px 18px 12px 12px; border-radius: var(--radius); text-decoration: none; color: inherit; }
.boat-row:hover { box-shadow: var(--shadow); }
.boat-row .thumb { width: 70px; height: 52px; border-radius: 8px; background: linear-gradient(140deg, var(--lagoon), var(--sea)) center / cover; }
.boat-row small { display: block; color: var(--muted); }
.boat-row span { color: var(--sea); font-weight: 700; }
.inline-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-filters input, .inline-filters select { width: auto; padding: 7px 10px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #c7dbe2; padding: 60px 0 24px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 30px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { color: #fff; margin: 0 0 12px; font-family: var(--head); font-size: 1.15rem; letter-spacing: 1px; }
.footer a { display: block; color: #c7dbe2; text-decoration: none; padding: 3px 0; font-size: .92rem; }
.footer a:hover { color: var(--lagoon); }
.footer .muted { color: #8ba5b2; }
.copy { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 40px; padding-top: 20px; }
.leaflet-container { font-family: var(--body); }
@media (max-width: 760px) { .sun { width: 150px; height: 150px; right: -40px; top: 12%; opacity: .7; } .line { display: none; } }

/* ======================= v2 components ======================= */
.logo img { display: block; height: 44px; width: auto; }
.foot-logo { height: 52px; width: auto; margin-bottom: 8px; }
@media (max-width: 520px) { .logo img { height: 36px; } }
.center { text-align: center; }
.block.tight { padding: 36px 0 70px; }
.page-head.slim { padding: 36px 0 30px; }
.page-head.slim h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-head .eyebrow a { color: var(--lagoon); text-decoration: none; }
.page-head .lede { margin: 0; }
.tag.photo { background: var(--lagoon); color: var(--ink); }
.dim { opacity: .5; }
.link-btn { background: none; border: 0; color: var(--sea); font: 600 .82rem var(--body); cursor: pointer; padding: 2px 4px; }
.link-btn.danger { color: #c23b3b; }
.inline-form { display: inline; }
.field-lbl { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }

/* nav extras */
.cart-link { position: relative; display: inline-flex; }
.cart-link .badge { position: absolute; top: -8px; right: -10px; background: var(--coral); color: #fff; font-size: .7rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.me { display: inline-flex; align-items: center; gap: 8px; }
.me img, .me .initial { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.me .initial { background: var(--lagoon); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }

/* social login */
.social { display: grid; gap: 10px; margin: 6px 0 18px; }
.soc { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 12px; font-weight: 700; text-decoration: none; border: 1.5px solid var(--line); color: var(--ink); background: #fff; transition: box-shadow .15s; }
.soc:hover { box-shadow: 0 4px 14px -6px rgba(11, 29, 46, .35); }
.soc.facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; margin-top: 6px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* stars */
.stars { --s: 15px; display: inline-block; position: relative; width: calc(var(--s) * 5); height: var(--s); vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d6dfe3' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7.3L12 17.8 5.7 21.5l1.7-7.3L2 9.5l7.1-.6z'/%3E%3C/svg%3E") repeat-x; background-size: var(--s) var(--s); }
.stars span { position: absolute; inset: 0 auto 0 0; display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f4b942' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7.3L12 17.8 5.7 21.5l1.7-7.3L2 9.5l7.1-.6z'/%3E%3C/svg%3E") repeat-x; background-size: var(--s) var(--s); }
.stars.lg { --s: 24px; }
.card-rating { margin: -6px 0 10px; font-size: .85rem; display: flex; align-items: center; gap: 6px; min-height: 20px; }
.card-rating span { color: var(--muted); }
.new-tag { color: var(--lagoon) !important; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.hero-rating { color: #fff; text-decoration: none; white-space: nowrap; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 2rem; color: #d6dfe3; cursor: pointer; margin: 0; line-height: 1; transition: color .1s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--sun); }
.star-input input:focus-visible + label { outline: 2px solid var(--lagoon); border-radius: 4px; }

/* reviews */
.review-list { display: grid; gap: 14px; }
.review { background: #fff; border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 2px 8px rgba(11, 29, 46, .06); }
.review header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.review h4 { margin: 8px 0 4px; font-size: 1.05rem; }
.review p { margin: 6px 0; }
.review form { margin-top: 8px; }
.review-stars { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.review-stars span { display: inline-flex; align-items: center; gap: 6px; }
.reply { background: var(--foam); border-left: 3px solid var(--lagoon); padding: 10px 14px; border-radius: 8px; margin-top: 10px; font-size: .92rem; }
.reply p { margin: 4px 0 0; }
.reviews-home { background: var(--ink); color: #d7eaef; padding: 80px 0; }
.reviews-home h2 { color: #fff; }
.big-rating { display: grid; justify-items: end; gap: 4px; }
.big-rating b { font: 900 3.4rem var(--head); color: var(--sun); line-height: 1; }
.big-rating span { color: #9fb8c4; font-size: .85rem; }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .quote-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .quote-grid { grid-template-columns: 1fr; } .big-rating { justify-items: start; } }
.quote { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .2s, background .2s; }
.quote:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .09); }
.quote h3 { color: #fff; margin: 12px 0 6px; font-size: 1.4rem; }
.quote p { margin: 0 0 18px; color: #c4dbe2; font-size: .95rem; flex: 1; }
.quote footer { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 12px; display: grid; }
.quote footer b { color: #fff; }
.quote footer span { color: var(--lagoon); font-size: .82rem; }

/* photos */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.deck-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 10px; }
.deck-grid a { position: relative; border-radius: 14px; overflow: hidden; display: block; }
.deck-grid a.big { grid-column: span 2; grid-row: span 2; }
.deck-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.deck-grid a:hover img { transform: scale(1.05); }
.deck-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; background: linear-gradient(transparent, rgba(11, 29, 46, .85)); color: #fff; font-weight: 700; font-size: .85rem; }
@media (max-width: 700px) { .deck-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.photo-grid figure { margin: 0; background: var(--foam); border-radius: 12px; overflow: hidden; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.photo-grid figcaption { padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; }
.photo-grid figcaption label { margin: 0; font-size: .82rem; }
.upload-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.upload-row input[type=file] { flex: 1; min-width: 200px; }

/* trip page extras */
.extras, .policy { list-style: none; padding: 0; margin: 0; }
.extras li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.extras li small { display: block; color: var(--muted); font-weight: 400; }
.extras li > span:last-child { white-space: nowrap; font-weight: 700; text-align: right; }
.policy li { padding: 10px 0 10px 30px; position: relative; border-bottom: 1px solid var(--line); }
.policy li::before { content: ''; position: absolute; left: 4px; top: 16px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--lagoon); }
.host-card { display: flex; align-items: center; gap: 16px; background: #fff; padding: 16px 20px; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(11, 29, 46, .06); }
.host-card > div:nth-child(2) { flex: 1; }
.host-card small { display: block; color: var(--muted); }
.avatar { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(140deg, var(--lagoon), var(--sea)); color: #fff; display: grid; place-items: center; font: 900 1.6rem var(--head); overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.addon-pick { padding: 10px 14px 2px; }
.addon-pick label { font-weight: 500; margin-bottom: 8px; align-items: flex-start; }
.addon-pick small { color: var(--muted); }

/* booking manager */
.manage-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; padding: 30px 0 70px; align-items: start; }
@media (max-width: 960px) { .manage-layout { grid-template-columns: 1fr; } }
.side-actions .panel h3 { font-size: 1.15rem; }
.panel.accent { background: linear-gradient(140deg, #fff 40%, var(--foam)); border: 1.5px solid rgba(25, 181, 176, .35); }
.money-table td { text-align: right; white-space: nowrap; }
.money-table tr.grand th, .money-table tr.grand td { font-weight: 800; color: var(--ink); font-size: 1.05rem; border-top: 2px solid var(--line); }
.addon-row { display: grid; grid-template-columns: 1fr 64px auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.addon-row small { display: block; color: var(--muted); }
.addon-row input { padding: 6px 8px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 8px 0 8px 18px; border-left: 2px solid var(--line); position: relative; font-size: .9rem; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--lagoon); }
.my-list { display: grid; gap: 10px; margin-bottom: 30px; }
.my-trip { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; background: #fff; padding: 14px 18px; border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(11, 29, 46, .06); transition: box-shadow .15s; }
.my-trip:hover { box-shadow: var(--shadow); }
.date-badge { background: var(--ink); color: #fff; border-radius: 12px; text-align: center; padding: 8px 0; }
.date-badge b { display: block; font: 900 1.8rem var(--head); line-height: 1; }
.date-badge span { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lagoon); }
.my-trip .info small { display: block; color: var(--muted); margin: 2px 0 6px; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.my-trip .go { color: var(--sea); font-weight: 700; }
@media (max-width: 560px) { .my-trip { grid-template-columns: 54px 1fr; } .my-trip .go { display: none; } }
.cancelled-list summary { cursor: pointer; font-weight: 700; color: var(--muted); margin: 10px 0; }

/* shop */
.shop-head { background: linear-gradient(120deg, var(--ink), #144a63 60%, var(--coral-d)); }
.shop-filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.shop-filters input { flex: 1; min-width: 200px; }
.shop-filters select { width: auto; }
.chips.light .chip { background: #fff; color: var(--sea); border-color: var(--line); text-decoration: none; }
.chips.light .chip.on, .chips.light .chip:hover { background: var(--sea); color: #fff; border-color: var(--sea); }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.products.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .products.four { grid-template-columns: 1fr 1fr; } }
.product { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.p-media { position: relative; aspect-ratio: 4 / 3; background: center / cover; }
.p-media.noimg { background: linear-gradient(140deg, var(--foam), #cfeeed); display: grid; place-items: center; color: var(--sea); }
.p-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.p-body h3 { font-size: 1.2rem; margin-bottom: 2px; }
.p-body .small { color: var(--muted); margin: 6px 0 10px; }
.p-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.p-price { font: 900 1.5rem var(--head); color: var(--ink); }
.low { color: var(--coral-d); font-weight: 700; margin-top: 6px; }
.cart-table .qty { width: 72px; padding: 6px 8px; }
.cart-table tr.grand td { font-size: 1.1rem; border-top: 2px solid var(--line); }
.money-table th { width: auto; }

/* ======================= v3 — fluid & interactive ======================= */
/* Smooth cross-page transitions (Chrome/Edge/Safari 18+; others just navigate normally) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .32s ease both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.topbar { view-transition-name: topbar; }
::view-transition-group(topbar) { animation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

html.noscroll, html.menu-open { overflow: hidden; }
.sr-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0 !important; }

/* progress bar */
.navbar-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; background: linear-gradient(90deg, var(--lagoon), var(--coral)); box-shadow: 0 0 10px var(--lagoon); opacity: 0; transition: width .5s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.navbar-progress.run { opacity: 1; }
.navbar-progress.done { opacity: 0; transition: width .2s, opacity .4s .15s; }

/* header behaviour */
.topbar { transition: background .3s, box-shadow .3s, transform .35s cubic-bezier(.2,.8,.2,1), height .3s; }
.topbar.over-hero { position: fixed; }
.topbar.scrolled { background: rgba(11, 29, 46, .92); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .6); }
.topbar.tuck { transform: translateY(-100%); }
.topbar .nav { transition: height .3s; }
.topbar.scrolled .nav { height: 60px; }
.links a:not(.btn) { position: relative; }
.links a:not(.btn):not(.cart-link):not(.me)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--coral); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.links a:not(.btn):hover::after { transform: scaleX(1); }
@media (max-width: 860px) {
  .links { display: flex !important; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .25s, transform .25s; max-height: calc(100vh - 70px); overflow-y: auto; }
  #navtoggle:checked ~ .links { opacity: 1; pointer-events: auto; transform: none; }
  .links a { font-size: 1.1rem; }
  .burger span, .burger span::before, .burger span::after { transition: transform .3s, top .3s, background .3s; }
  #navtoggle:checked + .burger span { background: transparent; }
  #navtoggle:checked + .burger span::before { top: 0; transform: rotate(45deg); }
  #navtoggle:checked + .burger span::after { top: 0; transform: rotate(-45deg); }
}

/* toasts */
.toasts { position: fixed; top: 84px; right: 18px; z-index: 2500; display: grid; gap: 10px; width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--ink); padding: 14px 14px 14px 16px; border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(11, 29, 46, .55); border-left: 4px solid var(--lagoon); opacity: 0; transform: translateX(40px) scale(.96); transition: opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1.2); font-weight: 600; font-size: .92rem; }
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateX(40px); }
.toast.err { border-left-color: #e0362b; }
.toast .ticon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lagoon); color: #fff; font-weight: 900; }
.toast.err .ticon { background: #e0362b; }
.toast .tmsg { flex: 1; }
.toast button { background: none; border: 0; font-size: 1.3rem; color: var(--muted); cursor: pointer; line-height: 1; }
.js .flash { display: none; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* buttons: ripple, busy, added */
.btn, .chip, .soc { position: relative; overflow: hidden; }
.btn:active { transform: translateY(1px) scale(.98); }
.ripple { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55); transform: translate(-50%, -50%) scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
.ghost-dark .ripple, .chip .ripple, .soc:not(.facebook) .ripple { background: rgba(14, 77, 100, .25); }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(40); opacity: 0; } }
.btn.busy { color: transparent !important; pointer-events: none; }
.btn.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.ghost-dark.busy::after { border-color: rgba(14, 77, 100, .3); border-top-color: var(--sea); }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.added { background: var(--lagoon) !important; color: var(--ink) !important; }

/* cards: 3D tilt + light shine */
.card, .product, .style-tile, .quote { transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .2s; }
.card.tilting, .product.tilting, .style-tile.tilting, .quote.tilting { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-6px); transition: transform .08s linear, box-shadow .3s; }
.card::after, .product::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 40%); opacity: 0; transition: opacity .3s; }
.card, .product { position: relative; }
.card.tilting::after, .product.tilting::after { opacity: 1; }
.card-media { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-media { transform: scale(1.04); }
.card { overflow: hidden; }
.card:hover .fish-mark { animation: swim 2.4s ease-in-out infinite; }
@keyframes swim { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(10px) rotate(-3deg); } 75% { transform: translateX(-10px) rotate(3deg); } }

/* fishing style tiles: a fish swims across on hover */
.style-tile::before { content: ''; position: absolute; width: 70px; height: 30px; right: -90px; top: 22px; opacity: .25;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cpath d='M5 25c20-22 60-22 85 0-25 22-65 22-85 0zM90 25l25-15v30z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; transform: scaleX(-1); }
.style-tile:hover::before { animation: tile-swim 1.8s ease-in-out forwards; }
@keyframes tile-swim { to { right: calc(100% + 20px); } }
.style-tile .count { transition: letter-spacing .25s, transform .25s; display: inline-block; }
.style-tile:hover .count { transform: translateX(6px); }

/* images */
img.fade { opacity: 0; transition: opacity .5s ease; }
img.fade.loaded { opacity: 1; }

/* species ticker */
.species { background: var(--coral); color: #fff; overflow: hidden; white-space: nowrap; padding: 11px 0; position: relative; z-index: 2; }
.species-track { display: inline-flex; gap: 0; animation: marquee 45s linear infinite; }
.species span { font: 800 1.15rem var(--head); text-transform: uppercase; letter-spacing: .14em; padding: 0 22px; display: inline-flex; align-items: center; gap: 22px; }
.species span::after { content: ''; width: 18px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cpath d='M5 25c20-22 60-22 85 0-25 22-65 22-85 0zM90 25l25-15v30z' fill='%230b1d2e'/%3E%3C/svg%3E") center / contain no-repeat; margin-left: 22px; }
.species:hover .species-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* steppers */
.stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; width: 100%; max-width: 180px; }
.stepper input { border: 0; text-align: center; border-radius: 0; -moz-appearance: textfield; min-width: 0; padding: 10px 4px; }
.stepper input:focus { box-shadow: none; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button { border: 0; background: var(--foam); color: var(--sea); font-size: 1.25rem; font-weight: 700; width: 42px; flex: none; cursor: pointer; transition: background .15s; }
.stepper button:hover { background: #cfeeed; }
.stepper:focus-within { border-color: var(--lagoon); box-shadow: 0 0 0 3px rgba(25, 181, 176, .18); }
.stepper.bump input { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.18); color: var(--coral); } }
.cart-table .stepper, .addon-row .stepper { max-width: 120px; }
.cart-table .stepper button, .addon-row .stepper button { width: 30px; }
.addon-row { grid-template-columns: 1fr auto auto; }
.searchbar .stepper { max-width: none; height: 46px; }

/* date chips */
.date-wrap { position: relative; display: flex; align-items: center; gap: 4px; margin: 4px 0 16px; }
.date-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 6px; flex: 1; align-items: stretch; }
.date-strip::-webkit-scrollbar { display: none; }
.date-chip { scroll-snap-align: start; flex: none; width: 70px; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 4px 9px; cursor: pointer; display: grid; justify-items: center; gap: 1px; font-family: var(--body); color: var(--ink); position: relative; transition: transform .15s, border-color .15s, background .15s, box-shadow .2s; }
.date-chip:hover { transform: translateY(-2px); border-color: var(--lagoon); }
.date-chip small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.date-chip b { font: 900 1.6rem var(--head); line-height: 1; }
.date-chip .dc-time { font-size: .7rem; color: var(--muted); }
.date-chip .dc-price { font-size: .78rem; font-weight: 800; color: var(--sea); }
.date-chip em { position: absolute; top: -8px; right: -6px; background: #e0362b; color: #fff; font-style: normal; font-size: .62rem; font-weight: 800; padding: 2px 5px; border-radius: 6px; }
.date-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 10px 20px -10px rgba(11, 29, 46, .7); transform: translateY(-2px); }
.date-chip.on small, .date-chip.on .dc-time { color: #9fc3cf; }
.date-chip.on .dc-price { color: var(--lagoon); }
.month-tag { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--coral); align-self: center; }
.ds-nav { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--foam); color: var(--sea); font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; line-height: 1; }
.ds-nav:hover { background: var(--lagoon); color: #fff; }
@media (pointer: coarse) { .ds-nav { display: none; } }

/* totals pulse */
.pulse { animation: pulse .45s ease; display: inline-block; }
@keyframes pulse { 40% { transform: scale(1.12); color: var(--coral); } }

/* sticky mobile book bar */
.bookbar { display: none; }
@media (max-width: 960px) {
  .bookbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 900; background: rgba(11, 29, 46, .95); backdrop-filter: blur(10px); color: #c7dbe2; border-radius: 18px; padding: 10px 10px 10px 16px; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .5); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s; font-size: .82rem; }
  .bookbar b { font: 900 1.4rem var(--head); color: #fff; }
  .bookbar.hide { transform: translateY(140%); opacity: 0; }
  .to-top { bottom: 84px !important; }
}

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(5, 14, 24, .94); display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 10px; transform: scale(.94); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.lightbox.open figure { transform: none; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 12px; box-shadow: 0 30px 60px -20px #000; opacity: 0; transition: opacity .3s; }
.lightbox img.loaded { opacity: 1; }
.lightbox figcaption { color: #9fb8c4; font-size: .85rem; }
.lb-nav, .lb-close { background: rgba(255, 255, 255, .1); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 1.8rem; cursor: pointer; justify-self: center; line-height: 1; transition: background .2s; }
.lb-nav:hover, .lb-close:hover { background: var(--coral); }
.lb-close { position: absolute; top: 18px; right: 18px; }
@media (max-width: 600px) { .lightbox { grid-template-columns: 1fr; } .lb-nav { display: none; } }

/* back to top */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--coral); }

/* cart fly + wiggle */
.fly-dot { position: fixed; z-index: 3500; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 107, 74, .3); pointer-events: none; }
.cart-link.wiggle { animation: wiggle .5s; }
@keyframes wiggle { 25% { transform: rotate(-14deg) scale(1.15); } 50% { transform: rotate(10deg) scale(1.15); } 75% { transform: rotate(-6deg); } }
.cart-link .badge { animation: pop .3s; }
@keyframes pop { from { transform: scale(0); } }

/* live areas while loading */
[data-live] { transition: opacity .25s; }
[data-live].loading { opacity: .45; pointer-events: none; }
.smallmap { transition: height .35s cubic-bezier(.2,.8,.2,1), margin .35s; }

/* misc polish */
.searchbar { transition: box-shadow .3s, transform .3s; }
.searchbar:focus-within { box-shadow: 0 40px 70px -20px rgba(0, 0, 0, .6), 0 0 0 4px rgba(25, 181, 176, .35); transform: translateY(-2px); }
.date-badge { transition: transform .25s; }
.my-trip:hover .date-badge { transform: rotate(-4deg) scale(1.05); }
.my-trip .go, .boat-row span { transition: transform .2s; }
.my-trip:hover .go, .boat-row:hover span { transform: translateX(4px); }
.panel, .kpis div { transition: box-shadow .25s, transform .25s; }
.kpis div:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(11, 29, 46, .35); }
.chip { transition: background .2s, color .2s, border-color .2s, transform .15s; }
.chip:hover { transform: translateY(-1px); }
.status { transition: transform .2s; }
tr:hover .status { transform: scale(1.06); }
table.data tbody tr, table.data tr { transition: background .15s; }
table.data tr:hover td { background: #f7fbfb; }
.boat-pin span { transition: transform .2s; }
.boat-pin:hover span { transform: rotate(-45deg) scale(1.25); }
.boat-pin span { animation: drop .5s cubic-bezier(.3,1.4,.6,1) backwards; }
@keyframes drop { from { transform: translateY(-30px) rotate(-45deg); opacity: 0; } }
details[open] summary ~ * { animation: vt-in .3s ease; }
::selection { background: var(--lagoon); color: var(--ink); }
*:focus-visible { outline: 3px solid var(--lagoon); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .species-track { animation: none; }
}
.trip-layout > *, .manage-layout > *, .search-layout > *, .avail-layout > * { min-width: 0; }
.book-box { max-width: 100%; }
.bookbar .btn { white-space: nowrap; flex: none; }
.bookbar .bb-price { min-width: 0; line-height: 1.25; }
label > .stepper { display: flex; margin-top: 4px; }
[hidden], .total-box [hidden] { display: none !important; }

/* ======================= v4 — every screen size + scroll effects ======================= */
/* Fluid container: roomier on big monitors, tighter gutters on small phones */
@media (min-width: 1600px) { html { font-size: 17px; } .wrap { width: min(1440px, 100% - 96px); } }
@media (min-width: 2200px) { html { font-size: 18.5px; } .wrap { width: min(1720px, 100% - 160px); } .bigmap { height: 680px; } }
@media (max-width: 380px) { .wrap { width: calc(100% - 24px); } h1 { font-size: 2.1rem; } .hero h1 { font-size: 2.6rem; } }
img, svg, video { max-width: 100%; }
code { word-break: break-all; }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.products { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.stat-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.photo-grid { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; }
  .block { padding: 52px 0; }
  .products, .products.four { grid-template-columns: 1fr 1fr; gap: 12px; }
  .p-body { padding: 10px 12px 12px; } .p-body h3 { font-size: 1.05rem; } .p-body .small { display: none; } .p-price { font-size: 1.2rem; }
  .p-foot { flex-direction: column; align-items: stretch; } .p-foot .btn { width: 100%; }
  .section-head.row > .btn { width: 100%; }
  .confirm, .auth-box { padding: 24px 18px; }
  .kv th { width: 96px; }
}
@media (pointer: coarse) { .chip, .btn.xs, .link-btn { min-height: 40px; } .btn.xs { padding: 8px 14px; } }

/* hero: waves never show an edge, search fits any width */
.waves { width: 112%; left: -6%; }
.searchbar label.narrow { flex: 0 1 150px; }
.searchbar .stepper button { width: 36px; }
.searchbar .stepper input { width: 100%; min-width: 34px; }
@media (max-width: 640px) {
  .hero { padding: 100px 0 130px; }
  .searchbar { padding: 12px; gap: 8px; }
  .searchbar label, .searchbar label.narrow { flex: 1 1 calc(50% - 8px); }
  .searchbar .btn { flex: 1 1 100%; }
}
@media (max-height: 520px) and (orientation: landscape) { .hero { min-height: auto; padding: 90px 0 110px; } .line, .sun { display: none; } }

/* safe areas (iPhone notch / home bar) */
.bookbar { bottom: calc(10px + env(safe-area-inset-bottom)); }
.to-top { bottom: calc(18px + env(safe-area-inset-bottom)); right: calc(18px + env(safe-area-inset-right)); }
.topbar .nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* phones & tablets: data tables turn into stacked cards */
@media (max-width: 900px) {
  .table-wrap { background: transparent; box-shadow: none; overflow: visible; }
  table.stackable, table.stackable tbody, table.stackable tr, table.stackable td { display: block; width: 100%; }
  table.stackable .thead-row { display: none; }
  table.stackable tr { background: #fff; border-radius: 14px; padding: 8px 14px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(11, 29, 46, .07); }
  .panel table.stackable tr { box-shadow: none; border: 1.5px solid var(--line); }
  table.stackable td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border: 0; border-bottom: 1px dashed var(--line); text-align: right; }
  table.stackable td:last-child { border-bottom: 0; }
  table.stackable td[data-label]::before { content: attr(data-label); flex: none; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: left; }
  table.stackable td:first-child { font-size: 1rem; }
  table.stackable td.nowrap, table.stackable td form { justify-content: flex-end; }
  table.stackable tr.grand td, table.stackable tr.dim td { background: transparent; }
  table.stackable td[colspan] { justify-content: flex-start; font-weight: 800; }
  table.data tr:hover td { background: transparent; }
}

/* search filters fold away on small screens */
.filter-toggle { display: none; }
@media (max-width: 860px) {
  .filters.collapsible { position: static; padding: 14px; }
  .filters.collapsible .filter-toggle { display: flex; width: 100%; }
  .filters.collapsible > label, .filters.collapsible > button.btn:not(.filter-toggle), .filters.collapsible > a { display: none; }
  .filters.collapsible.open > label, .filters.collapsible.open > button.btn, .filters.collapsible.open > a { display: block; }
  .filters.collapsible.open > label:first-of-type { margin-top: 14px; }
  .filters.collapsible { display: block; }
  .filters.collapsible.open { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .filters.collapsible.open .filter-toggle, .filters.collapsible.open > button.btn:not(.filter-toggle), .filters.collapsible.open > a { grid-column: 1 / -1; }
}
.fcount { background: var(--coral); color: #fff; border-radius: 10px; padding: 0 7px; font-size: .75rem; }

/* header reading-progress line */
.topbar::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--lagoon), var(--coral)); transform: scaleX(var(--sp, 0)); transform-origin: left; opacity: .9; pointer-events: none; }
.topbar.over-hero:not(.scrolled)::after { opacity: 0; }

/* ---- Pinned horizontal "Pick your fight" ---- */
.hpin { position: relative; background: var(--sand); }
.hpin-sticky { padding: 72px 0 50px; }
.hpin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.hpin-meter { display: flex; align-items: center; gap: 10px; font: 800 1rem var(--head); color: var(--muted); }
.hpin-count { color: var(--coral); font-size: 1.6rem; min-width: 2ch; }
.hpin-bar { width: 140px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.hpin-bar i { display: block; height: 100%; background: var(--coral); transform: scaleX(.06); transform-origin: left; transition: transform .15s linear; }
.styles-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 12px max(16px, calc((100vw - 1200px) / 2)) 26px; scroll-padding-inline: max(16px, calc((100vw - 1200px) / 2)); }
@media (min-width: 1600px) { .styles-track { padding-inline: max(48px, calc((100vw - 1440px) / 2)); } }
@media (min-width: 2200px) { .styles-track { padding-inline: max(80px, calc((100vw - 1720px) / 2)); } }
.styles-track::-webkit-scrollbar { display: none; }
.styles-track .style-tile { flex: 0 0 auto; width: clamp(240px, 78vw, 360px); min-height: clamp(240px, 36vh, 380px); scroll-snap-align: start; padding: 28px 26px 24px; }
.styles-track .style-tile h3 { font-size: clamp(1.6rem, 2.2vw, 2.3rem); }
.styles-track .style-tile .num { font-size: clamp(2.4rem, 4vw, 4rem); }
@media (min-width: 640px) and (max-width: 1023px) { .styles-track .style-tile { width: 44vw; } }
.hpin.pinned .hpin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 70px 0 30px; }
.hpin.pinned .styles-track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.hpin.pinned .style-tile { --enter: 1; transform: translateY(calc((1 - var(--enter)) * 70px)) rotate(calc((1 - var(--enter)) * 5deg)); opacity: calc(.35 + var(--enter) * .65); transition: box-shadow .3s; }
.hpin.pinned .style-tile.tilting { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-6px); opacity: 1; }
.hpin.pinned .style-tile:hover { opacity: 1; }

/* ---- Words light up ---- */
[data-words] .w { opacity: .16; transition: opacity .35s ease, color .35s ease; }
[data-words] .w.lit { opacity: 1; }
[data-words] .w.lit:nth-last-child(-n+4) { color: var(--lagoon); }

/* ---- Drifting giant words ---- */
.map-section, .drift-host { position: relative; overflow: hidden; }
.drift-host { overflow: visible; }
.bg-word { position: absolute; left: 50%; top: 40px; translate: -50% 0; font: 900 clamp(5rem, 17vw, 18rem) var(--head); text-transform: uppercase; white-space: nowrap; line-height: .8; color: rgba(255, 255, 255, .045); pointer-events: none; user-select: none; z-index: 0; will-change: transform; }
.bg-word.outline { color: transparent; -webkit-text-stroke: 1.5px rgba(14, 77, 100, .1); top: 10px; }
.map-section .wrap, .drift-host > :not(.bg-word) { position: relative; z-index: 1; }
body { overflow-x: clip; }

/* ---- Map zoom-open ---- */
.zoom-reveal { will-change: clip-path, transform; border-radius: 20px; }
.zoom-reveal .bigmap { border-radius: 0; }

/* ---- Wave dividers ---- */
.wave-div { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(34px, 5vw, 70px); fill: var(--sand); overflow: hidden; pointer-events: none; z-index: 2; }
.wave-div path { will-change: transform; }
.map-section, .heritage, .footer { position: relative; }
.map-section { padding-top: calc(80px + clamp(34px, 5vw, 70px)); }
.heritage { padding-top: calc(90px + clamp(34px, 5vw, 70px)); }
.footer { padding-top: calc(60px + clamp(34px, 5vw, 70px)); }
.reviews-home + .heritage .wave-div { fill: var(--ink); }
.area-host .footer .wave-div, .area-admin .footer .wave-div { fill: #f1f5f6; }

/* ---- Section headings: underline grows as they arrive ---- */
.section-head h2 { position: relative; }
.section-head h2::after { content: ''; display: block; height: 4px; width: 72px; margin-top: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--coral), var(--sun)); transform: scaleX(var(--hq, 1)); transform-origin: left; }
.section-head.light h2::after, .reviews-home h2::after { background: linear-gradient(90deg, var(--lagoon), #8ee6e2); }

/* ---- Fishing-line depth gauge (home page, wide screens) ---- */
.depth { display: none; }
@media (min-width: 1200px) {
  .depth { display: block; position: fixed; top: 0; right: 26px; height: 100vh; width: 70px; z-index: 800; pointer-events: none; opacity: 0; transition: opacity .4s; --d: 0; }
  .depth.show { opacity: 1; }
  .depth-line { position: absolute; right: 34px; top: 0; width: 2px; height: calc(70px + var(--d) * (100vh - 330px)); background: linear-gradient(rgba(14, 77, 100, .15), rgba(14, 77, 100, .55)); }
  .depth-line i { position: absolute; left: -3px; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(transparent 0 38px, rgba(14, 77, 100, .4) 38px 40px); }
  .depth-hook { position: absolute; right: 27px; top: calc(66px + var(--d) * (100vh - 330px)); color: var(--coral); display: grid; justify-items: end; gap: 4px; animation: hookbob 2.4s ease-in-out infinite; }
  .depth-hook svg { margin-right: -1px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2)); }
  .depth-m { font: 900 1rem var(--head); color: var(--ink); background: #fff; padding: 2px 8px; border-radius: 8px; box-shadow: 0 4px 12px -4px rgba(11, 29, 46, .3); white-space: nowrap; }
  .depth-zone { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sea); white-space: nowrap; }
  .depth-zone.zflash { animation: zone .6s ease; }
}
@keyframes hookbob { 50% { transform: translateY(5px) rotate(-4deg); } }
@keyframes zone { from { opacity: 0; transform: translateX(10px); } }

/* parallax helpers */
.card-media, .p-media { background-repeat: no-repeat; }
.trip-hero, .page-head { background-attachment: scroll; }
.deck-grid a img { transition: none; }
@media (prefers-reduced-motion: reduce) { .hpin.pinned .style-tile { transform: none; opacity: 1; } [data-words] .w { opacity: 1; } }
.drift-host { overflow-x: clip; overflow-y: visible; }
html { overflow-x: clip; }
.waves, .wave-div, .line { max-width: none; }

/* ---- Map: depth legend + layer switcher ---- */
.depth-legend { background: rgba(255, 255, 255, .94); padding: 8px 10px 7px; border-radius: 10px; box-shadow: 0 4px 14px -6px rgba(11, 29, 46, .4); font: 600 .72rem var(--body); color: var(--ink); width: 190px; }
.depth-legend b { display: block; font-size: .75rem; margin-bottom: 4px; }
.dl-bar { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #d7f1f2 0%, #9fd6e6 12%, #5aa9d2 30%, #2e6fae 55%, #1b3f7a 80%, #10204a 100%); }
.dl-ticks { display: flex; justify-content: space-between; margin-top: 2px; color: var(--muted); font-size: .64rem; }
.dl-ticks i { font-style: normal; }
.depth-legend small { display: block; color: var(--muted); font-weight: 500; font-size: .62rem; margin-top: 2px; }
.leaflet-control-layers { border-radius: 12px !important; border: 0 !important; box-shadow: 0 6px 18px -8px rgba(11, 29, 46, .5) !important; font-family: var(--body); }
.leaflet-control-layers-expanded { padding: 10px 14px !important; }
.leaflet-control-layers label { margin: 0 0 4px; font-weight: 600; font-size: .85rem; display: block; }
.leaflet-control-layers-toggle { width: 40px !important; height: 40px !important; }
@media (max-width: 520px) { .depth-legend { width: 150px; } .depth-legend small { display: none; } }

/* ======================= Dates & rates calendar ======================= */
.cal-head .actions { align-items: center; }
.cal-head select { width: auto; max-width: 320px; }
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav h2 { margin: 0 8px; min-width: 210px; text-align: center; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.cal-nav h2::after { display: none; }
.select-mode { margin: 0; background: #fff; padding: 8px 14px; border-radius: 999px; box-shadow: 0 2px 6px rgba(11, 29, 46, .06); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .8rem; font-weight: 600; margin-bottom: 14px; color: var(--ink); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.lg.open { background: #e2f7f1; border: 1.5px solid #3cc6a0; } .lg.booked { background: var(--coral); } .lg.busy { background: #ffe9b8; border: 1.5px solid var(--sun); }
.lg.closed { background: #eceff1; border: 1.5px dashed #b6c2c9; } .lg.other { background: var(--sea); border-radius: 50%; }

.calendar { background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(11, 29, 46, .07); padding: 10px; transition: opacity .2s; touch-action: pan-y; }
.calendar.loading { opacity: .5; pointer-events: none; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-dow button { background: none; border: 0; font: 800 .72rem var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 6px 0; cursor: pointer; border-radius: 8px; }
.cal-dow button:hover { background: var(--foam); color: var(--sea); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { min-height: 118px; border-radius: 12px; border: 1.5px solid var(--line); padding: 6px 7px 7px; background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 4px; position: relative; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; min-width: 0; }
.cal-cell:hover { border-color: var(--lagoon); box-shadow: 0 8px 18px -12px rgba(11, 29, 46, .45); transform: translateY(-1px); }
.cal-cell:focus-visible { outline: 3px solid var(--lagoon); }
.cal-cell.blank { border: 0; background: transparent; cursor: default; box-shadow: none; transform: none; }
.cal-cell.past { background: #f6f8f9; cursor: default; opacity: .6; }
.cal-cell.past:hover { transform: none; box-shadow: none; border-color: var(--line); }
.cal-cell.st-on { background: linear-gradient(180deg, #f2fbf8, #fff 60%); border-color: #bfe9dc; }
.cal-cell.st-off { background: repeating-linear-gradient(135deg, #f7f9fa 0 8px, #eef2f4 8px 16px); }
.cal-cell.today .dn { background: var(--ink); color: #fff; }
.cal-cell.sel { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .25); background: #fff6f3; }
.calendar.selecting .cal-cell:not(.past):not(.blank) { cursor: copy; }
.cc-top { display: flex; align-items: center; gap: 6px; }
.dn { font: 900 1.05rem var(--head); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.disc { font-size: .62rem; font-weight: 800; background: #e0362b; color: #fff; padding: 1px 5px; border-radius: 5px; }
.cc-pills { display: grid; gap: 3px; }
.pill { display: flex; justify-content: space-between; gap: 4px; align-items: center; font-size: .72rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill b { font-weight: 800; }
.pill.open { background: #e2f7f1; color: #0c5b4a; }
.pill.open.custom { box-shadow: inset 3px 0 0 var(--lagoon); }
.pill.booked { background: var(--coral); color: #fff; }
.pill.busy { background: #ffe9b8; color: #7a5200; }
.pill.closed { background: #eceff1; color: #8a989f; text-decoration: line-through; }
.more { font-size: .68rem; color: var(--muted); font-weight: 700; }
.others { margin-top: auto; font-size: .66rem; font-weight: 700; color: var(--sea); }
/* on/off switch */
.sw { margin-left: auto; width: 34px; height: 20px; border-radius: 999px; border: 0; background: #cfd8dc; position: relative; cursor: pointer; flex: none; transition: background .2s; padding: 0; }
.sw i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s cubic-bezier(.3,1.4,.6,1); }
.sw.on { background: #2fbf98; } .sw.on i { transform: translateX(14px); }
.sw:disabled { opacity: .4; cursor: not-allowed; }
.sw.busy-sw { opacity: .5; }
.sw.small { width: 38px; height: 22px; } .sw.small i { width: 16px; height: 16px; } .sw.small.on i { transform: translateX(16px); }

/* day editor drawer */
.day-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 100%); background: #fff; z-index: 2600; box-shadow: -20px 0 50px -20px rgba(11, 29, 46, .5); transform: translateX(105%); transition: transform .35s cubic-bezier(.2,.8,.2,1); overflow-y: auto; }
.day-drawer.open { transform: none; }
.dd-inner { padding: 22px 22px 40px; }
.day-drawer header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.day-drawer header h3 { font-size: 1.8rem; margin: 2px 0 0; }
.dd-close { background: var(--foam); border: 0; width: 38px; height: 38px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; color: var(--sea); }
.day-drawer h4 { margin: 18px 0 8px; font: 800 1.1rem var(--head); letter-spacing: .5px; text-transform: uppercase; color: var(--sea); }
.dd-note { background: #fff1ef; border-left: 3px solid #e0362b; padding: 8px 12px; border-radius: 8px; font-size: .85rem; }
.dd-scrim { position: fixed; inset: 0; background: rgba(11, 29, 46, .35); z-index: 2550; }
.slot-row { display: grid; grid-template-columns: 124px 1fr auto auto; gap: 8px 10px; align-items: end; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
.slot-row:has(.s-seats) { grid-template-columns: 124px 1fr 72px auto auto; }
.slot-row.is-closed { background: #f6f8f9; }
.slot-row.is-closed input { color: #8a989f; }
.slot-row input { padding: 8px 9px; }
.slot-row label { margin: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.slot-row label span { display: block; margin-bottom: 2px; }
.slot-row .sw { margin: 0 0 8px; }
.slot-row .s-del { margin-bottom: 6px; font-size: 1rem; }
.s-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .82rem; }
.tag.busy { background: #ffe9b8; color: #7a5200; }
.add-slot { background: var(--foam); padding: 12px 14px; border-radius: 12px; margin-top: 10px; }
.add-slot h4 { margin-top: 0 !important; }
.as-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; }
.others-list { list-style: none; padding: 0; margin: 0; }
.others-list li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* bulk selection bar */
.sel-bar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2400; background: var(--ink); color: #fff; border-radius: 18px; padding: 10px 12px 10px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .6); width: max-content; max-width: calc(100vw - 24px); animation: vt-in .25s ease; }
.sel-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sel-group { display: inline-flex; gap: 4px; }
.sel-bar input { width: 104px; padding: 6px 8px; border-radius: 8px; border: 0; }
.btn.ghost-light { background: transparent; border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; box-shadow: none; }
.btn.ghost-light:hover { background: rgba(255, 255, 255, .12); }
.link-btn.light { color: #9fc3cf; }
.gen-panel { margin-top: 18px; }
.gen-panel summary { cursor: pointer; list-style: none; }
.gen-panel summary::-webkit-details-marker { display: none; }
.gen-panel summary::before { content: '＋'; margin-right: 8px; color: var(--coral); font-weight: 900; }
.gen-panel[open] summary::before { content: '－'; }
.gen-panel form { margin-top: 14px; }

/* calendar on tablets and phones */
@media (max-width: 900px) {
  .cal-cell { min-height: 96px; padding: 5px; }
  .pill { font-size: .66rem; padding: 2px 4px; }
  .pill b { display: none; }
  .others { display: none; }
}
@media (max-width: 600px) {
  .calendar { padding: 6px; border-radius: 14px; }
  .cal-grid, .cal-dow { gap: 3px; }
  .cal-cell { min-height: 74px; padding: 4px 3px; border-radius: 9px; gap: 2px; }
  .cc-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dn { width: 22px; height: 22px; font-size: .9rem; }
  .disc { display: none; }
  .sw { margin-left: 0; width: 28px; height: 16px; } .sw i { width: 10px; height: 10px; } .sw.on i { transform: translateX(12px); }
  .pill { font-size: .6rem; padding: 1px 3px; justify-content: center; }
  .cc-pills .pill:nth-child(n+3) { display: none; }
  .cal-nav h2 { min-width: 0; font-size: 1.3rem; }
  .cal-legend span.muted { display: none; }
  .day-drawer { top: auto; bottom: 0; height: auto; max-height: 88vh; width: 100%; border-radius: 22px 22px 0 0; transform: translateY(105%); }
  .day-drawer.open { transform: none; }
  .slot-row, .slot-row:has(.s-seats) { grid-template-columns: 1fr 1fr auto auto; }
  .slot-row .s-seats { grid-column: 1 / 2; }
  .sel-bar { border-radius: 14px; padding: 10px; gap: 8px; }
  .sel-bar input { width: 80px; }
}
.shop-offer { margin-top: 18px; }
.offer-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.offer-row small { display: block; color: var(--muted); }
.offer-row input { padding: 6px 8px; }
.cal-head .actions { max-width: 100%; }
.cal-head select { min-width: 0; max-width: 100%; flex: 1 1 220px; }
@media (max-width: 900px) { table.stackable td { overflow-wrap: anywhere; flex-wrap: wrap; } table.stackable td > * { min-width: 0; } }
@media (max-width: 420px) { .offer-row { grid-template-columns: 1fr 80px; } .offer-row .btn { grid-column: 1 / -1; } }
.calendar { user-select: none; -webkit-user-select: none; }
.logo img { height: 58px; width: auto; }
.topbar.scrolled .logo img { height: 50px; }
@media (max-width: 520px) { .logo img, .topbar.scrolled .logo img { height: 46px; } }
.foot-logo { height: 70px; width: auto; }
@media (max-width: 520px) { .foot-logo { height: 58px; } }

/* Legal pages (privacy, data deletion) */
.legal h1 { margin-bottom: .4em; }
.legal h2 { font-size: clamp(1.2rem, 4vw, 1.5rem); margin: 1.6em 0 .5em; }
.legal p, .legal li { line-height: 1.65; overflow-wrap: anywhere; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li { margin-bottom: .45em; }
.legal a:not(.btn) { color: var(--sea); text-decoration: underline; }
.footer .copy a { color: inherit; text-decoration: underline; display: inline-block; padding: 6px 0; }

/* ---------- Maldives map (Tripveriyaa base map, no animation) ---------- */
.mvmap { position: relative; overflow: hidden; background: radial-gradient(110% 80% at 65% 35%, #0e5a86, #062c4c 62%, #041d33); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.mvmap.dragging { cursor: grabbing; }
.pickmap.mvmap { cursor: crosshair; }
.mvmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mvmap-base { pointer-events: none; }
.mvmap-grid line { stroke: #fff; stroke-opacity: .1; stroke-width: 1; }
.mvmap-grid text { fill: #fff; opacity: .4; font-family: var(--body); font-weight: 600; }
.mvmap-labels text { fill: #fff; font-family: var(--body); font-weight: 700; paint-order: stroke; stroke: rgba(3, 30, 52, .75); opacity: .92; pointer-events: none; }
.mvmap-pin { cursor: pointer; outline: none; }
.mvmap-pin path { fill: var(--coral); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); transition: fill .15s; }
.mvmap-pin circle { fill: #fff; }
.mvmap-pin:hover path, .mvmap-pin:focus-visible path { fill: var(--coral-d); }
.mvmap-ui { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.mvmap-ui button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .94); color: var(--ink); font: 700 1.35rem/1 var(--body); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); cursor: pointer; }
.mvmap-ui button:hover { background: #fff; }
.mvmap-credit { position: absolute; right: 8px; bottom: 6px; font-size: .68rem; color: rgba(255, 255, 255, .75); pointer-events: auto; }
.mvmap-credit a { color: inherit; }
.mvmap-pop { position: absolute; z-index: 3; transform: translate(-50%, -100%); width: min(290px, calc(100% - 24px)); background: #fff; color: var(--text); border-radius: 14px; padding: 14px 44px 12px 16px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); cursor: auto; user-select: text; -webkit-user-select: text; }
.mvmap-pop.below { transform: translate(-50%, 0); }
.mvmap-pop::after { content: ""; position: absolute; left: calc(50% + var(--tip, 0px)); bottom: -8px; width: 16px; height: 16px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.mvmap-pop.below::after { bottom: auto; top: -8px; }
.mvmap-pop-body { max-height: 230px; overflow: auto; position: relative; z-index: 1; }
.mvmap-pop-body a { color: var(--sea); }
.mvmap-x { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; z-index: 2; }
.mvmap.hint::before { content: "Use Ctrl + scroll or the + \2212  buttons to zoom"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; background: rgba(4, 29, 51, .85); color: #fff; padding: 10px 16px; border-radius: 99px; font: 600 .9rem var(--body); pointer-events: none; white-space: nowrap; }
@media (max-width: 520px) { .mvmap-ui { right: 8px; top: 8px; } .mvmap.hint::before { white-space: normal; text-align: center; width: 80%; } }

/* ---- The catch: at 200 m a fish swims in, bites and fights on the hook ---- */
.depth-fish, .depth-bubbles { display: none; }
@media (min-width: 1200px) {
  .depth-hook { position: absolute; }
  .depth-fish { display: block; position: absolute; top: 2px; right: 10px; width: 58px; height: 25px; transform-origin: 100% 55%; opacity: 0; pointer-events: none; }
  .depth-fish svg { display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .25)); }
  .depth.bite .depth-fish { opacity: 1; animation: fishIn .9s cubic-bezier(.3, .9, .4, 1) both; }
  .depth.caught .depth-fish { opacity: 1; animation: fishFight .5s ease-in-out infinite alternate; }
  .depth.gone .depth-fish { animation: fishAway .7s ease-in both; }
  .depth.caught .depth-hook { animation: hookTug .5s ease-in-out infinite alternate; }
  .depth.bite .depth-hook { animation: hookNibble .15s ease-in-out 3; animation-delay: .55s; }
  .depth.caught .depth-zone { color: var(--coral); font-size: .72rem; }
  .depth.caught .depth-m { background: var(--coral); color: #fff; }
  .depth-bubbles { display: block; position: absolute; top: 4px; right: 20px; width: 40px; height: 30px; pointer-events: none; }
  .depth-bubbles i { position: absolute; bottom: 0; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid rgba(14, 77, 100, .55); opacity: 0; }
  .depth-bubbles i:nth-child(1) { left: 4px; } .depth-bubbles i:nth-child(2) { left: 14px; width: 4px; height: 4px; }
  .depth-bubbles i:nth-child(3) { left: 24px; } .depth-bubbles i:nth-child(4) { left: 32px; width: 4px; height: 4px; }
  .depth.caught .depth-bubbles i { animation: bubble 1.6s ease-out infinite; }
  .depth.caught .depth-bubbles i:nth-child(2) { animation-delay: .4s; } .depth.caught .depth-bubbles i:nth-child(3) { animation-delay: .8s; } .depth.caught .depth-bubbles i:nth-child(4) { animation-delay: 1.2s; }
}
@keyframes fishIn { 0% { opacity: 0; transform: translateX(-90px) rotate(8deg); } 60% { opacity: 1; transform: translateX(-6px) rotate(-4deg); } 80% { transform: translateX(2px) rotate(6deg); } 100% { opacity: 1; transform: none; } }
@keyframes fishFight { from { transform: rotate(-14deg); } to { transform: rotate(16deg) translateY(2px); } }
@keyframes fishAway { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-110px) rotate(-10deg); } }
@keyframes hookTug { from { transform: translate(-1px, 2px) rotate(-3deg); } to { transform: translate(1px, 7px) rotate(3deg); } }
@keyframes hookNibble { 50% { transform: translateY(6px); } }
@keyframes bubble { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-46px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .depth-fish, .depth-hook, .depth-bubbles i { animation: none !important; } }

/* ---- Catch label + coral reef at the bottom of the line ---- */
.depth-catch, .depth-reef { display: none; }
@media (min-width: 1200px) {
  .depth-catch { display: block; font: 800 .78rem var(--body); color: var(--ink); background: #fff; padding: 3px 9px; border-radius: 99px; box-shadow: 0 4px 12px -4px rgba(11, 29, 46, .35); white-space: nowrap; }
  .depth-catch:empty { display: none; }
  .depth.caught .depth-catch { animation: zone .5s ease; }
  .depth-reef { display: block; position: fixed; right: 0; bottom: 0; width: 300px; height: 130px; z-index: 790; pointer-events: none; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s; }
  .depth-reef.show { opacity: 1; transform: none; }
  .depth-reef svg { display: block; }
  .depth-reef { -webkit-mask-image: linear-gradient(to right, transparent, #000 28%); mask-image: linear-gradient(to right, transparent, #000 28%); }
  .rf-weed { transform-box: fill-box; transform-origin: 50% 100%; animation: weed 3.2s ease-in-out infinite alternate; }
  .rf-weed.w2 { animation-duration: 2.6s; animation-delay: -1s; }
  .rf { offset-rotate: 0deg; }
  .rf1 { animation: swim1 14s linear infinite; } .rf2 { animation: swim2 19s linear infinite; } .rf3 { animation: swim3 11s linear infinite; } .rf4 { animation: swim4 9s linear infinite; }
  .rf-b { animation: rfWiggle .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 30% 50%; }
  .rf-bubbles circle { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1; animation: rfbub 4s ease-in infinite; }
  .rf-bubbles circle:nth-child(2) { animation-delay: 1.3s; } .rf-bubbles circle:nth-child(3) { animation-delay: 2.6s; }
}
@keyframes weed { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }
@keyframes rfWiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes swim1 { 0% { transform: translate(40px, 70px); } 45% { transform: translate(250px, 62px); } 50% { transform: translate(256px, 66px) scaleX(-1); } 95% { transform: translate(46px, 76px) scaleX(-1); } 100% { transform: translate(40px, 70px); } }
@keyframes swim2 { 0% { transform: translate(270px, 50px) scaleX(-1); } 48% { transform: translate(30px, 40px) scaleX(-1); } 52% { transform: translate(24px, 44px); } 100% { transform: translate(270px, 50px); } }
@keyframes swim3 { 0% { transform: translate(120px, 88px); } 40% { transform: translate(200px, 80px); } 50% { transform: translate(206px, 84px) scaleX(-1); } 90% { transform: translate(110px, 92px) scaleX(-1); } 100% { transform: translate(120px, 88px); } }
@keyframes swim4 { 0% { transform: translate(-10px, 28px); } 100% { transform: translate(320px, 22px); } }
@keyframes rfbub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-100px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .depth-reef * { animation: none !important; } }

/* ---- Reeling in, landing in the cart, and the fish basket ---- */
@media (min-width: 1200px) {
  .depth.reeling .depth-fish { opacity: 1; animation: fishHang .35s ease-in-out infinite alternate; }
  .depth.reeling .depth-hook { animation: hookTug .35s ease-in-out infinite alternate; }
  .depth.reeling .depth-zone { color: var(--lagoon); }
  .depth.reeling .depth-m { background: var(--lagoon); color: #fff; }
}
@keyframes fishHang { from { transform: rotate(-26deg) translate(-2px, 2px); } to { transform: rotate(-40deg) translate(-1px, 4px); } }
.fish-fly { position: fixed; z-index: 3000; width: 58px; height: 25px; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.fish-fly svg { display: block; }
.cart-link .fish-badge { position: absolute; bottom: -9px; left: -12px; display: inline-flex; align-items: center; gap: 2px; background: var(--lagoon); color: #fff; font: 800 .66rem/1 var(--body); padding: 2px 5px 2px 4px; border-radius: 9px; box-shadow: 0 0 0 2px var(--ink); white-space: nowrap; }
.cart-link .fish-badge.pop { animation: pop .35s; }
.fish-basket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; background: linear-gradient(180deg, #e8f6f5, #fff); border-radius: var(--radius); padding: clamp(16px, 4vw, 28px); margin-bottom: 24px; box-shadow: 0 2px 6px rgba(11, 29, 46, .05); }
.fish-basket[hidden] { display: none; }
.fish-basket h2 { margin: 0 0 4px; }
.fish-basket .basket-art svg { width: 100%; height: auto; max-width: 420px; display: block; margin: 0 auto; }
.basket-list { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 8px; }
.basket-list li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 8px 12px; box-shadow: 0 1px 3px rgba(11, 29, 46, .08); }
.basket-list li span { flex: 1; font-weight: 700; }
.basket-list li b { color: var(--sea); }
.basket-total { font: 800 1.1rem var(--head); color: var(--coral-d); letter-spacing: .02em; }
.fish-basket .small { margin: 0 0 12px; }
@media (max-width: 760px) { .fish-basket { grid-template-columns: 1fr; } }

/* ---- "Let's fish" game for phones & tablets (the wide-screen gauge covers desktops) ---- */
.fish-cta, .fg { display: none; }
@media (max-width: 1199px) {
  .fish-cta { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 850; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 99px; background: var(--coral); color: #fff; font: 800 1rem var(--body); box-shadow: 0 12px 26px -10px rgba(229, 80, 47, .75), 0 0 0 3px rgba(255, 255, 255, .9); cursor: pointer; animation: ctaBob 2.6s ease-in-out infinite; }
  .fish-cta svg { color: #fff; }
  .fish-cta:active { transform: scale(.96); }
  html.fg-open, html.fg-open body { overflow: hidden; }
  html.fg-open .fish-cta { display: none; }
  .fg { display: block; position: fixed; inset: 0; z-index: 4000; background: #0b1d2e; color: #fff; overscroll-behavior: contain; }
  .fg[hidden] { display: none; }
  .fg-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px 18px; background: linear-gradient(rgba(11, 29, 46, .75), transparent); }
  .fg-top b { font: 900 1.45rem var(--head); letter-spacing: .02em; margin-right: auto; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
  .fg-basket { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 800 .95rem var(--body); text-decoration: none; }
  .fg-basket.wiggle { animation: wiggle .5s; }
  .fg-basket svg { color: var(--sea); }
  .fg-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer; }
  .fg-sea { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
  .fg-sea::-webkit-scrollbar { display: none; }
  .fg-water { position: relative; height: 1000vh; background: linear-gradient(#bfeef0 0%, #7fd8e6 4%, #19b5b0 12%, #138f9c 30%, #0e6b80 50%, #0e4d64 70%, #0a3047 88%, #06192a 100%); }
  .fg-mark { position: absolute; left: 0; right: 0; padding: 6px 14px; border-top: 1px dashed rgba(255, 255, 255, .45); font: 700 .78rem var(--body); text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .85); }
  .fg-mark b { font: 900 1.05rem var(--head); margin-right: 8px; letter-spacing: .02em; }
  .fg-mark:first-child { border-top: 0; margin-top: calc(78px + env(safe-area-inset-top)); }
  .fg-swim { position: absolute; left: 0; opacity: .75; animation: fgSwim 16s linear infinite; }
  .fg-swim svg { width: 64px; height: 28px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
  .fg-swim.s1 { animation-duration: 21s; animation-delay: -7s; } .fg-swim.s2 { animation-duration: 13s; animation-delay: -3s; }
  .fg-reef { position: absolute; left: 0; right: 0; bottom: 0; }
  .fg-reef svg { width: 100%; height: auto; min-height: 42vh; display: block; }
  .fg-rig { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .fg-line { position: absolute; top: 0; right: 30%; width: 2px; height: 36%; background: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .85)); }
  .fg-hook { position: absolute; top: calc(36% - 4px); right: calc(30% - 6px); display: grid; justify-items: end; gap: 5px; color: var(--coral); transform-origin: 100% 0; animation: hookbob 2.4s ease-in-out infinite; }
  .fg-hook > svg { margin-right: -1px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
  .fg-rig .depth-fish { display: block; position: absolute; top: 2px; right: 10px; width: 58px; height: 25px; transform-origin: 100% 55%; opacity: 0; }
  .fg-rig .depth-fish svg { display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
  .fg-rig .depth-bubbles { display: block; position: absolute; top: 4px; right: 20px; width: 40px; height: 30px; }
  .fg-rig .depth-bubbles i { position: absolute; bottom: 0; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); opacity: 0; }
  .fg-rig .depth-bubbles i:nth-child(1) { left: 4px; } .fg-rig .depth-bubbles i:nth-child(2) { left: 14px; width: 4px; height: 4px; } .fg-rig .depth-bubbles i:nth-child(3) { left: 24px; } .fg-rig .depth-bubbles i:nth-child(4) { left: 32px; width: 4px; height: 4px; }
  .fg-rig .depth-m { font: 900 1.15rem var(--head); color: var(--ink); background: #fff; padding: 3px 10px; border-radius: 9px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); white-space: nowrap; }
  .fg-rig .depth-zone { font: 800 .72rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); white-space: nowrap; }
  .fg-rig .depth-zone.zflash { animation: zone .6s ease; }
  .fg-rig .depth-catch { display: block; font: 800 .85rem var(--body); color: var(--ink); background: #fff; padding: 4px 11px; border-radius: 99px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); white-space: nowrap; }
  .fg-rig .depth-catch:empty { display: none; }
  .fg-rig.bite .depth-fish { opacity: 1; animation: fishIn .9s cubic-bezier(.3, .9, .4, 1) both; }
  .fg-rig.bite .fg-hook { animation: hookNibble .15s ease-in-out 3; animation-delay: .55s; }
  .fg-rig.caught .depth-fish { opacity: 1; animation: fishFight .5s ease-in-out infinite alternate; }
  .fg-rig.caught .fg-hook { animation: hookTug .5s ease-in-out infinite alternate; }
  .fg-rig.caught .depth-m { background: var(--coral); color: #fff; }
  .fg-rig.caught .depth-zone { color: #ffd2c6; }
  .fg-rig.caught .depth-bubbles i, .fg-rig.reeling .depth-bubbles i { animation: bubble 1.6s ease-out infinite; }
  .fg-rig.caught .depth-bubbles i:nth-child(2) { animation-delay: .4s; } .fg-rig.caught .depth-bubbles i:nth-child(3) { animation-delay: .8s; } .fg-rig.caught .depth-bubbles i:nth-child(4) { animation-delay: 1.2s; }
  .fg-rig.reeling .depth-fish { opacity: 1; animation: fishHang .35s ease-in-out infinite alternate; }
  .fg-rig.reeling .fg-hook { animation: hookTug .35s ease-in-out infinite alternate; }
  .fg-rig.reeling .depth-m { background: var(--lagoon); color: #fff; }
  .fg-rig.gone .depth-fish { animation: fishAway .7s ease-in both; }
  .fg-tip { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 3; margin: 0 auto; max-width: 420px; text-align: center; background: rgba(11, 29, 46, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 10px 14px; border-radius: 14px; font: 600 .88rem/1.4 var(--body); transition: opacity .4s; pointer-events: none; }
  .fg.deep .fg-tip { opacity: 0; }
}
@keyframes ctaBob { 50% { transform: translateY(-4px); } }
@keyframes fgSwim { from { transform: translateX(-60px); } to { transform: translateX(calc(100vw + 20px)); } }
@media (prefers-reduced-motion: reduce) { .fish-cta, .fg-swim { animation: none !important; } }

/* ===== Hosting: verification, packages, gear, feedback (v5) ===== */
.err-text { color: #b3261e; font-weight: 700; } .ok-text { color: #0c5b4a; font-weight: 700; } .warn-text { color: #8a5a00; font-weight: 700; }
.notice.urgent { background: #fdecea; border-left-color: #d93a2b; }
.notice.ok-notice, .ok-notice { background: #e2f6f0; border-left: 4px solid var(--lagoon); }
a.notice { display: block; color: inherit; text-decoration: none; } a.notice:hover { box-shadow: var(--shadow); }
.nav .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--coral); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; }
.stack { display: grid; gap: 0; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.boat-row.slim { grid-template-columns: 1fr auto; padding: 14px 18px; }

/* Host dashboard status cards */
.host-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 0 0 26px; }
.hs-card { display: grid; gap: 4px; align-content: start; background: #fff; border-radius: var(--radius); padding: 16px 18px; border-left: 5px solid var(--sun); box-shadow: 0 2px 8px rgba(11, 29, 46, .06); color: inherit; text-decoration: none; transition: box-shadow .15s; }
a.hs-card:hover { box-shadow: var(--shadow); }
.hs-card.urgent { border-left-color: #d93a2b; background: #fff7f6; }
.hs-card.warn { border-left-color: var(--coral); }
.hs-card.ok { border-left-color: var(--lagoon); }
.hs-card b { font: 800 1.3rem var(--head); color: var(--ink); }
.hs-card > span { color: var(--muted); font-size: .9rem; }
.hs-k { font-size: .72rem !important; text-transform: uppercase; letter-spacing: .16em; font-weight: 800; color: var(--muted); }
.hs-go { color: var(--sea) !important; font-weight: 800; margin-top: 4px; }

/* Verification */
.verify-progress { background: #fff; border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.verify-progress .bar { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.verify-progress .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--lagoon), var(--sea)); border-radius: inherit; min-width: 6px; transition: width .4s; }
.verify-progress p { margin: 0; }
.step-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 6px; }
.step-head h2, .step-head h3 { margin: 0; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 30px; }
.doc-card { background: #fff; border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 6px rgba(11, 29, 46, .05); scroll-margin-top: 90px; }
.doc-card p { margin: 0; }
.doc-card .btn { align-self: flex-start; }
.doc-thumb { display: block; border-radius: 10px; overflow: hidden; background: var(--foam); aspect-ratio: 4 / 3; }
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-note { background: #fdecea; color: #8a2a17; border-radius: 8px; padding: 8px 10px; font-size: .88rem; }
.file-pick { margin: 0; position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; border: 2px dashed var(--line); border-radius: 12px; color: var(--sea); font-weight: 700; cursor: pointer; text-align: center; padding: 8px 12px; }
.file-pick:hover, .file-pick:focus-within { border-color: var(--lagoon); background: var(--foam); }
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-pick.has span { color: var(--ink); }
.doc-review { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.doc-review .doc-thumb { max-width: 320px; }
.doc-review p { margin: 0; }
.doc-actions { display: grid; gap: 8px; }
.doc-actions input { padding: 9px 11px; }

/* Packages */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; max-width: 460px; } }
.plan-card { position: relative; background: #fff; border-radius: var(--radius); padding: 26px 22px 22px; border: 2px solid transparent; box-shadow: 0 2px 8px rgba(11, 29, 46, .06); }
.plan-card.popular { border-color: var(--coral); }
.plan-card.current { border-color: var(--lagoon); background: linear-gradient(160deg, #fff 55%, var(--foam)); }
.plan-card h2 { font-size: 2rem; margin-bottom: .2em; }
.plan-flag { position: absolute; top: -12px; left: 20px; background: var(--coral); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.plan-price { margin: 0 0 14px; } .plan-price b { font: 900 2.2rem var(--head); color: var(--ink); } .plan-price span { color: var(--muted); margin-left: 4px; }
.plan-list { list-style: none; padding: 0; margin: 0; }
.plan-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.plan-list .yes { color: var(--lagoon); font-weight: 900; margin-right: 6px; } .plan-list .no { color: var(--muted); margin-right: 6px; }
.plan-cur { margin: 14px 0 0; font-weight: 800; color: #0c5b4a; }

/* Money-back guarantee */
.guarantee-box { border: 1.5px dashed var(--sun); background: #fffaf0; border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.guarantee-box legend { font-weight: 800; padding: 0 6px; }
.guarantee-box p { margin: 6px 0 10px; }
.guarantee-note { background: #fffaf0; border: 1.5px solid var(--sun); border-radius: var(--radius); padding: 14px 18px; margin: 20px 0 0; }
.guarantee-line { color: #8a5a00; }
.tag.gold { background: var(--sun); color: var(--ink); }
.tag.ok { background: var(--lagoon); color: var(--ink); }

/* Trust badges on trip pages */
.trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.trust { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 99px; font-size: .8rem; font-weight: 800; background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.trust.ok { background: var(--lagoon); color: var(--ink); border-color: var(--lagoon); }
.trust.gold { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.trust.sm { margin-top: 6px; font-size: .72rem; padding: 3px 9px; }
.host-card .trust:not(.ok) { color: var(--ink); border-color: var(--line); }
.host-bio { background: #fff; border-radius: var(--radius); padding: 14px 20px; margin: 10px 0 0; }

/* Gear checklist (boat form) */
.gear-pick h4 { margin: 16px 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.gear-pick h4:first-of-type { margin-top: 4px; }
.gear-grid, .gear-other { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.gear-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 8px 6px 12px; transition: border-color .15s, background .15s; }
.gear-row.on { border-color: rgba(25, 181, 176, .55); background: #f3fbfa; }
.gear-row label { flex: 1; margin: 0; display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-weight: 600; }
.gear-row input[type=checkbox] { width: 20px; height: 20px; flex: none; }
.gear-row input[type=number] { width: 72px; flex: none; padding: 7px 8px; text-align: center; }
.gear-other .gear-row input:not([type=number]) { flex: 1; min-width: 0; padding: 8px 10px; }
.gear-other { margin-bottom: 10px; }
.gear-row:not(.on) input[type=number] { opacity: .45; }
.gear-show { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 24px; }
.gear-show h4 { margin: 8px 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.gear-show .qty { color: var(--sea); }

/* Map: boat range */
.mvmap-ring { fill: rgba(25, 181, 176, .14); stroke: var(--lagoon); stroke-width: 2; stroke-dasharray: 6 5; pointer-events: none; }
.mvmap-ring.range { animation: ringIn .35s ease-out; }
@keyframes ringIn { from { opacity: 0; } }
.pop .pop-range { color: #0c6f6b !important; font-weight: 700; }
.pop .vbadge { font: 800 .7rem var(--body); font-style: normal; background: var(--lagoon); color: var(--ink); padding: 2px 7px; border-radius: 99px; vertical-align: middle; }

/* Feedback & complaints */
.kind-pick { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.kind-pick legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.kind-pick label.inline { margin: 0; min-height: 40px; }
.fb-list { display: grid; gap: 10px; margin-bottom: 30px; }
.fb-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; padding: 14px 18px; border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: 0 2px 6px rgba(11, 29, 46, .05); }
.fb-row:hover { box-shadow: var(--shadow); }
.fb-row > div { min-width: 0; } .fb-row small { display: block; color: var(--muted); }
.fb-row .status { flex: none; }
.fb-msgs { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.fb-msg { display: block; border-radius: 14px; padding: 12px 16px; background: var(--foam); max-width: 88%; overflow-wrap: anywhere; }
.fb-msg.mine { background: #fff3ea; justify-self: end; }
.fb-msg.host { background: #eef1ff; }
.fb-msg b { display: inline; margin-right: 8px; } .fb-msg > span { display: inline; } .fb-msg p { margin: 6px 0 0; }
@media (max-width: 560px) {
  .fb-msg { max-width: 100%; }
  .fb-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .plan-card h2 { font-size: 1.7rem; }
  .gear-grid, .gear-other { grid-template-columns: 1fr; }
}
.status.todo { background: #eef2f4; color: var(--muted); }

/* Admin settings tabs + package editor */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin: 0 0 24px; }
.tabs a { padding: 11px 18px; min-height: 44px; display: inline-flex; align-items: center; font-weight: 800; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--coral); }
.tabs a:hover { color: var(--sea); }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0; }
.pkg-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 18px 8px; margin: 0; min-width: 0; }
.pkg-card legend { font: 800 1.35rem var(--head); color: var(--ink); padding: 0 8px; }
.pkg-card.trial { background: linear-gradient(160deg, #fff 55%, var(--foam)); }
.pkg-card label.inline { min-height: 40px; margin-bottom: 6px; }
.pkg-limit { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.pkg-limit > label:first-child { margin-bottom: 14px; }
.pkg-limit label.inline { margin-bottom: 20px; font-weight: 600; }
.pkg-limit input:disabled { background: #f3f6f7; color: var(--muted); }
@media (max-width: 520px) { .tabs { gap: 0; } .tabs a { padding: 10px 10px; font-size: .9rem; } }
/* Admin: start fresh */
.reset-page { max-width: 760px; }
.reset-list { margin: 0; padding-left: 20px; } .reset-list li { padding: 4px 0; }
.danger-zone { border: 2px solid #e4a59c; background: #fffaf9; }
.danger-zone h3 { color: #a02a1b; }
.danger-zone label.inline { align-items: flex-start; } .danger-zone label.inline input { margin-top: 4px; }

/* Host app start page (app.php) + "get the app" banner */
.app-start { min-height: calc(100vh - 70px); background: radial-gradient(120% 70% at 50% 0%, var(--sea), var(--ink) 70%); color: #e8f6f5; text-align: center; padding: 48px 20px 60px; display: flex; flex-direction: column; align-items: center; }
.app-start h1 { color: #fff; font-size: clamp(2.4rem, 9vw, 3.6rem); }
.app-start .lede { margin: 0 auto 26px; max-width: 420px; }
.app-start-icon { border-radius: 24px; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6); margin-bottom: 18px; }
.app-start-btns { display: grid; gap: 12px; width: min(100%, 360px); margin-bottom: 28px; }
.app-start-points { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 8px; color: #b9d6de; }
.app-start-points li::before { content: '✓ '; color: var(--lagoon); font-weight: 900; }
.app-start .small a { color: #9fc3cf; }
.app-start .notice { color: var(--text); max-width: 420px; text-align: left; }
.get-app { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; text-decoration: none; padding: 12px 16px; border-radius: var(--radius); margin: 0 0 18px; max-width: 460px; }
.get-app img { border-radius: 10px; flex: none; }
.get-app small { display: block; color: #9fc3cf; }
@media (display-mode: standalone) { .get-app { display: none; } }