/* ============================================================
   Breakwater Cabana Portal — shared prototype design system
   Linked by every screen. Single source of truth for tokens
   + shared components. Screen-specific CSS lives in each page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --brand:#0056b3; --brand-deep:#003a7a; --ink:#111827; --muted:#5b6573;
  --gold:#FFD700; --aqua:#19B5C9; --sand:#F4E9D0; --sand-deep:#ead9b6;
  --surface:#fff; --bg:#F2F5F8; --line:#e4e8ee;
  --success:#1B9E5A; --alert:#E4572E;
  --s6:#19B5C9; --s10:#3E8FD0; --s15:#7A6CC4;
  --shadow:0 6px 20px rgba(16,33,64,.10); --shadow-sm:0 2px 8px rgba(16,33,64,.08);
  --r:18px; --r-sm:12px;
}
*{box-sizing:border-box}
/* Stop Android Chrome from auto-inflating text ("font boosting"), which made
   everything look bigger/zoomed vs iOS Safari and cramped the footer. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}

/* ---- Icon system (assets/icons.js swaps [data-ic] to an inline SVG) ----
   Any [data-ic] node renders an inline SVG that draws in currentColor and
   sizes to 1em (sizing also carried inline on the svg so it survives page
   rules like .mapwrap svg). Page chip rules (.trust .t .ic, .gtk-item .ic)
   keep setting the box size + color. */
[data-ic]{display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:-.12em}
[data-ic] svg{width:1em;height:1em;display:block;flex:none}
.ic[data-ic]{font-size:20px;color:var(--brand)}        /* default standalone icon */
.ico[data-ic]{font-size:17px}                           /* sits inside a tinted chip */
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:Poppins,sans-serif;letter-spacing:-.01em;margin:0}
a{color:var(--brand)}
button{font-family:inherit;cursor:pointer}
img,svg{max-width:100%}
.wrap{max-width:1320px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:1060px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)} .center{text-align:center}

/* ---- Header ---- */
header.site{background:linear-gradient(100deg,var(--brand-deep),var(--brand));color:#fff}
.topbar{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:block;width:214px;height:42px;font-size:0;text-decoration:none;flex:none;
  background:url('assets/cpbwblogo.webp') left center/contain no-repeat}
.brand .mark{display:none}
.brand small{display:none}
/* section links sit left of the action pills (Casino Pier / sign-in / cart); the
   gap pushes the action cluster to the right and everything centers on one line */
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:24px;font-weight:600;font-size:14px}
.topbar nav a{color:#fff;text-decoration:none;opacity:.88;line-height:1;display:inline-flex;align-items:center;transition:opacity .14s}
.topbar nav a:hover{opacity:1}
.topbar nav a[aria-current="page"]{opacity:1;border-bottom:2px solid var(--gold);padding-bottom:2px}
/* Casino Pier cross-link: hidden in the desktop header (it lives in the footer),
   shown as a branded row inside the mobile hamburger menu. */
.topbar nav a.xpark{display:none}
@media(max-width:900px){ .topbar nav a.xpark{ display:block!important; background:transparent!important; border:0!important; color:var(--brand,#0056b3)!important; font-weight:800; } }
.cart{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;padding:9px 15px;font-weight:700;font-size:14px;line-height:1;text-decoration:none}
.cart [data-ic]{font-size:17px}
/* Casino Pier ↔ Breakwater Beach cross-property pill (works on the header gradient + footer brand-deep) */
a.xpark{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;border-radius:999px;padding:9px 15px;font-weight:700;font-size:14px;line-height:1;text-decoration:none;white-space:nowrap}
a.xpark:hover{background:rgba(255,255,255,.24)}

/* ---- Step indicator (1 Date · 2 Cabana · 3 Cart · 4 Pay) ---- */
.steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 0 4px}
.steps .stp{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.steps .stp .n{width:22px;height:22px;border-radius:50%;background:#e6ebf2;color:var(--muted);display:grid;place-items:center;font-size:12px;font-weight:700}
.steps .stp.active{color:var(--ink)} .steps .stp.active .n{background:var(--brand);color:#fff}
.steps .stp.done .n{background:var(--success);color:#fff}
.steps .sep{width:18px;height:2px;background:var(--line);border-radius:2px}

/* ---- Context / date bar ---- */
.ctx{background:var(--surface);border-bottom:1px solid var(--line)}
.ctx .row{display:flex;align-items:center;gap:14px;height:58px}
.pill-date{display:flex;align-items:center;gap:10px;font-family:Poppins;font-weight:700;font-size:16px}
.pill-date .ico{width:30px;height:30px;border-radius:8px;background:#eaf2fb;color:var(--brand);display:grid;place-items:center}
.change{color:var(--brand);font-weight:600;font-size:13px;text-decoration:none;border-bottom:1px dashed var(--brand)}
.avail-count{margin-left:auto;font-weight:600;font-size:14px;color:var(--muted)}
.avail-count b{color:var(--ink)}

/* ---- Surfaces ---- */
.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.card{padding:18px}
.card h3.title,.section-title{font-family:Poppins;font-weight:700;font-size:18px;margin:0 0 10px}

/* ---- Buttons ---- */
.btn{border:0;border-radius:11px;font-weight:700;font-size:13.5px;padding:9px 16px;background:var(--brand);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.ghost{background:#eaf2fb;color:var(--brand)}
.btn.lg{font-family:Poppins;font-size:16px;padding:14px 22px;border-radius:13px}
.btn.block{width:100%}
.btn[disabled],.btn.is-disabled{background:#e9edf2;color:#9aa6b5;cursor:not-allowed}
.linkbtn{background:none;border:0;color:var(--brand);font-weight:600;font-size:13.5px;padding:0;text-decoration:none}
.cta{background:var(--brand);color:#fff;border:0;border-radius:13px;font-family:Poppins;font-weight:700;font-size:16px;padding:14px 26px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.cta[disabled]{background:#e9edf2;color:#9aa6b5;cursor:not-allowed}

/* ---- Form fields ---- */
.field{margin:0 0 14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin:0 0 6px;letter-spacing:.01em}
.field .hint{font-weight:500;color:var(--muted);font-size:11.5px}
.input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 13px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)}
.input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px #cfe1f7}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkrow{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.4}
.checkrow input{margin-top:2px}

/* ---- Line items / totals ---- */
.line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-size:14px}
.line .k{color:var(--muted)} .line .v{font-weight:600;font-family:Poppins}
.line.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:16px}
.line.total .v{font-weight:800;font-size:20px}
.line.grand .v{color:var(--brand-deep)}

/* ---- Pinned price card ---- */
.pcard{position:sticky;top:18px;overflow:hidden}
.pcard .ph{height:150px;background-size:cover;background-position:center}
.pcard .pb{padding:16px 18px}
.pcard h3{font-size:18px;margin:0 0 2px}
.policy{font-size:12.5px;color:var(--muted);margin:10px 0;padding:10px;background:#f6f9fc;border-radius:10px}
.policy b{color:var(--ink)}

/* ---- Badges / chips / notices ---- */
.tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:#eef2f7;color:#41506a}
.tag.acc{background:#e7f5ee;color:#127a45;display:inline-flex;align-items:center;gap:3px}
.tag [data-ic]{font-size:13px}
.dot{width:11px;height:11px;border-radius:50%;flex:none;border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.12)}
.save{display:inline-flex;align-items:center;line-height:1;font-size:11px;font-weight:800;color:#8a6d00;background:var(--gold);padding:4px 8px;border-radius:999px}
.notinc{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--alert);background:#fdeee9;border:1px solid #f6cdbf;padding:5px 10px;border-radius:8px}
.notice{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;background:#fff7ed;border:1px solid #f6dcc0;color:#8a5a1c;border-radius:12px;padding:12px 14px}

/* ---- Stepper (quantity) ---- */
.stepper{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{width:44px;height:44px;border:0;background:#fff;font-size:18px;color:var(--brand);line-height:1}
/* Disabled state signals via opacity + reduced affordance, not colour alone (a11y). */
.stepper button[disabled]{color:#7a8699;opacity:.45;cursor:not-allowed}
.stepper .q{min-width:30px;text-align:center;font-weight:700;font-family:Poppins}

/* ---- Express wallets ---- */
.wallets{display:grid;gap:10px}
.wbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;border:0;font-weight:700;font-size:15px}
.wbtn.apple{background:#000;color:#fff}
.wbtn.gpay{background:#fff;color:#3c4043;border:1.5px solid var(--line)}
.wbtn.link{background:#00d66f;color:#0a2233}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;margin:14px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- Sticky summary bar ---- */
.summary{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,33,64,.10);z-index:30}
.summary .row{display:flex;align-items:center;gap:16px;height:76px}
.summary .info{font-size:14px;color:var(--muted)}
.summary .info b{font-family:Poppins;color:var(--ink);font-size:17px}
.summary .total{margin-left:auto;text-align:right}
.summary .total .k{font-size:12px;color:var(--muted)}
.summary .total .v{font-family:Poppins;font-weight:800;font-size:22px}

/* ---- Preview sheet (shared) ---- */
.scrim{position:fixed;inset:0;background:rgba(8,20,40,.45);opacity:0;pointer-events:none;transition:.2s;z-index:40}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:50;background:#fff;box-shadow:var(--shadow);transition:.25s cubic-bezier(.22,.61,.36,1);top:0;right:0;height:100%;width:420px;transform:translateX(105%);border-left:1px solid var(--line)}
.sheet.open{transform:none}

/* ---- Hero ---- */
.hero{position:relative;border-radius:var(--r);overflow:hidden;color:#fff;min-height:250px;display:flex;align-items:center}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .scrim2{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,18,42,.82),rgba(0,18,42,.52) 55%,rgba(0,18,42,.36))}
.hero .inner{position:relative;padding:40px 32px}
.hero h1{font-size:38px;line-height:1.05;max-width:16ch}
.hero p{font-size:17px;max-width:46ch;opacity:.95;margin:10px 0 0}
.hero-wp{background:linear-gradient(105deg,var(--brand-deep),var(--brand))}
.hero-banner{display:block;width:100%;height:clamp(150px,26vw,300px);object-fit:cover;object-position:center 50%;border-radius:var(--r);box-shadow:var(--shadow-sm);margin-top:14px}

/* ---- Footer ---- */
footer.site{background:var(--brand-deep);color:#cfe0f3;margin-top:40px}
footer.site .row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;padding:26px 20px;font-size:13px}
footer.site a{color:#fff;text-decoration:none;font-weight:600}
footer.site .sp{margin-left:auto;opacity:.7}

/* ---- Success (confirmation) ---- */
.success-badge{width:64px;height:64px;border-radius:50%;background:#e7f6ee;color:var(--success);display:grid;place-items:center;font-size:32px;margin:0 auto 14px}

/* =========================== MOBILE =========================== */
@media(max-width:900px){
  .wrap,.wrap-narrow{padding:0 20px}
  .topbar nav{display:none}
  /* nav carried margin-left:auto on desktop; with it hidden, push the cart pill flush right */
  .topbar .cart{margin-left:auto}

  .steps{gap:6px;font-size:12px;padding:12px 0 2px}
  .steps .stp .n{width:20px;height:20px;font-size:11px}
  .steps .sep{width:12px}

  .ctx .row{height:auto;flex-wrap:wrap;gap:3px 10px;padding:9px 20px}
  .pill-date{font-size:15px}
  .pill-date .ico{width:26px;height:26px;font-size:14px}
  .avail-count{flex-basis:100%;margin-left:0;font-size:12.5px;line-height:1.35}

  .hero .inner{padding:28px 18px}
  .hero h1{font-size:28px}
  .hero p{font-size:15px}

  .two{grid-template-columns:1fr}

  /* pinned price card drops below content on mobile */
  .pcard{position:static}

  /* sticky summary: info on row 1, then [Total $X] left + CTA right on row 2 */
  .summary .row{height:auto;flex-wrap:wrap;gap:8px 14px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));align-items:center}
  .summary .info{flex-basis:100%;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .summary .info b{font-size:15px}
  .summary .total{margin-left:0;display:flex;align-items:baseline;gap:6px;text-align:left}
  .summary .total .v{font-size:20px}
  .cta{margin-left:auto;padding:12px 18px;font-size:15px;white-space:nowrap}

  /* preview sheet → bottom sheet */
  .sheet{top:auto;bottom:0;right:0;width:100%;height:auto;max-height:86vh;border-left:0;border-top-left-radius:20px;border-top-right-radius:20px;transform:translateY(105%)}
  .sheet.open{transform:none}

  /* footer: links stay on one centered wrapped row, copyright line beneath */
  footer.site .row{justify-content:center;text-align:center;gap:10px 18px;padding:24px 20px 26px}
  footer.site .sp{margin-left:0;flex-basis:100%;margin-top:2px}
}