/* WhiteWall v3.4 one-page booking + slide-in pay panel (DREW-221). */
:root{
  --ink:#111111; --muted:#555555; --warm:#f4f3f0; --line:#e0ddd6; --line2:#d6d3cc;
  --g-bg:#dcefe3; --g-bd:#8fc0a1; --g-tx:#1d4a30;
  --y-bg:#f8ecd0; --y-bd:#ddb66a; --y-tx:#6b4510;
  --r-bg:#f6e2de; --r-bd:#e0a79d; --r-tx:#7a2a20;
}
.bk-page{font-family:'Manrope','Inter',system-ui,sans-serif;color:var(--ink);background:#fff;margin:0;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
.bk-page *{box-sizing:border-box}
/* DREW-221 rev item 4: kill the iOS tap-highlight flash + double-tap zoom on pills/toggles/cells. */
.bk-page button,.bk-page a,.bk-seg,.bk-pkg,.bk-start,.bk-chip,.bk-cell,.bk-step{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#bk-root{max-width:1180px;margin:0 auto}
.bk-h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(26px,3.2vw,36px);margin:0 0 14px;line-height:1.05}
.bk-h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;margin:0 0 10px}
.bk-line{color:var(--muted);font-size:15px;line-height:1.55;margin:10px 0 0}
.bk-line.sm{font-size:13px}
.bk-note{color:var(--muted);font-size:13px;margin:14px 0 0}
.bk-err{color:#b22;font-size:14px;margin:10px 0 0;line-height:1.5}

/* top bar + hero */
.bk-topbar{background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 32px}
.bk-back,.bk-topcta{color:rgba(255,255,255,.85);text-decoration:none;font-size:13px;letter-spacing:1px}
.bk-topcta{justify-self:end}
.bk-logo-link{justify-self:center;display:inline-flex}
.bk-logo{height:44px;display:block}
@media (max-width:600px){.bk-topbar{padding:18px 20px}.bk-logo{height:36px}}
/* DREW-222: black top bar removed; hero is bigger + full-bleed (breaks out of the centered column). */
.bk-hero{position:relative;height:clamp(320px,48vh,540px);overflow:hidden;background:var(--ink);width:100vw;margin-left:calc(50% - 50vw)}
.bk-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.94}
.bk-hero-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px 32px;z-index:2;background:linear-gradient(rgba(0,0,0,.4),transparent)}
.bk-hero-logo img{height:42px;display:block}
.bk-hero-events{color:#fff;text-decoration:none;font-size:13px;letter-spacing:1px;white-space:nowrap}
@media (max-width:600px){.bk-hero-nav{padding:16px 20px}.bk-hero-logo img{height:34px}}
.bk-panel-book{margin-top:14px;width:100%;border:0;border-radius:999px;padding:14px;font:inherit;font-weight:600;font-size:16px;background:var(--ink);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kb{animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.1) translate(-1%,-1%)}}
.bk-hero-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 24px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;display:flex;flex-direction:column;gap:2px}
.bk-hero-cap strong{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:26px}
.bk-hero-cap span{font-size:13px;opacity:.85}

/* layout */
.bk-wrap{display:grid;grid-template-columns:1fr 360px;gap:28px;padding:28px 20px 80px;align-items:start}
.bk-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.bk-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.bk-row{display:flex;flex-wrap:wrap;gap:10px}
.bk-seggrp{display:inline-flex;background:var(--warm);border-radius:999px;padding:4px}
.bk-seg{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:9px 18px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center}
.bk-seg.on{background:var(--ink);color:#fff}
.bk-seg.dis{opacity:.4;cursor:not-allowed}
.bk-seg-sub{font-weight:400;font-size:11px;opacity:.6}

/* package + start cards */
.bk-pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bk-pkg{text-align:left;border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:14px;padding:14px 16px;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.bk-pkg.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bk-pkg-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.bk-pkg-name{font-weight:600;font-size:15px}
.bk-pkg-price{font-weight:600;font-size:14px}
.bk-pkg-sub{font-size:12px;opacity:.7;line-height:1.4}
.bk-starts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.bk-start{min-width:112px;border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:14px;padding:12px 16px;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:3px;text-align:center}
.bk-start.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bk-start-lbl{font-weight:600;font-size:15px}
.bk-start-sub{font-size:11px;opacity:.7}

/* extra hours */
.bk-extra{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.bk-extra-lbl{font-weight:600;font-size:14px}
.bk-extra-note{font-size:12px;color:var(--muted);flex:1 1 180px}
.bk-stepper{display:inline-flex;align-items:center;gap:10px}
.bk-stepper.sm .bk-step{width:32px;height:32px}
.bk-step{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:#fff;font-size:20px;cursor:pointer;line-height:1}
.bk-step:disabled{opacity:.35;cursor:not-allowed}
.bk-step-val{min-width:44px;text-align:center;font-weight:600}
.bk-nudge{margin-top:14px;background:var(--warm);border-radius:12px;padding:12px 14px;font-size:14px}
.bk-link{background:none;border:0;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.bk-link.sm{font-size:13px}

/* calendar */
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bk-cal-month{font-weight:600}
.bk-nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:#fff;font-size:18px;cursor:pointer}
.bk-nav:disabled{opacity:.35;cursor:not-allowed}
.bk-cal-need{color:var(--muted);font-size:13px;margin:4px 0 10px}
.bk-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;color:#9a978f;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.bk-dows span{text-align:center}
.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.bk-cell{aspect-ratio:1;min-height:40px;border-radius:10px;font:inherit;font-weight:600;font-size:15px;border:1px solid #f0eee9;background:#fff;color:#c4c2bd;cursor:not-allowed}
.bk-cell.blank{border:0;background:transparent}
.bk-cell.past,.bk-cell.neutral{background:#fff;color:#c4c2bd;border:1px solid #f0eee9}
/* DREW-221 rev: saturated calendar colours matching the current live calendar (DREW-200). */
.bk-cell.green{background:#16a34a;color:#fff;border:1px solid #15803d;cursor:pointer}
.bk-cell.yellow{background:#f5a60a;color:#3f2600;border:1px solid #d97706;cursor:pointer}
.bk-cell.red{background:#dc2626;color:#fff;border:1px solid #b01818;cursor:pointer;text-decoration:line-through;text-decoration-thickness:2px}
.bk-cell.sel{background:var(--ink);color:#fff;border:1px solid var(--ink);cursor:pointer;text-decoration:none}
.bk-cell.range{background:#e4e2dc;color:var(--ink);border:1px solid #e4e2dc}
@media (hover:hover){
  .bk-cell.green:hover{background:#12833c}
  .bk-cell.yellow:hover{background:#e08c06}
  .bk-cell.red:hover{background:#bf1d1d}
}
.bk-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:13px;color:var(--muted)}
.bk-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* DREW-221 rev item d: legend moved up next to the heading + a smidge bigger/more prominent. */
.bk-cal-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin-bottom:12px}
.bk-cal-top .bk-h2{margin:0}
.bk-legend-top{margin-top:0;font-size:14px;font-weight:600;color:var(--ink);gap:14px 18px}
.bk-legend-top i{width:15px;height:15px;border-radius:4px}
.lg.g{background:#16a34a;border:1px solid #15803d}
.lg.y{background:#f5a60a;border:1px solid #d97706}
.lg.r{background:#dc2626;border:1px solid #b01818}

/* chips + panel */
.bk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bk-chips.sm .bk-chip{padding:8px 12px;font-size:13px}
.bk-chip{border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:999px;padding:10px 16px;font:inherit;font-size:14px;cursor:pointer}
.bk-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bk-panel{border-width:1px}
.bk-panel.green{background:var(--g-bg);border-color:var(--g-bd)}
.bk-panel.yellow{background:var(--y-bg);border-color:var(--y-bd)}
.bk-panel.red{background:var(--r-bg);border-color:var(--r-bd)}
.bk-panel-ttl{font-weight:700;font-size:16px}
.bk-badge{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:5px 12px;font-size:12px;margin-bottom:8px}
.bk-sub{margin-top:12px}
.bk-sublbl{font-size:13px;color:var(--muted);display:block;margin-bottom:6px}

/* summary */
.bk-summary{position:sticky;top:18px}
.bk-sum-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.bk-sum-img{width:100%;height:150px;object-fit:cover}
.bk-sum-body{padding:18px}
.bk-sum-ttl{font-weight:600;font-size:16px}
.bk-sum-addr{font-size:13px;color:var(--muted);margin-top:2px}
.bk-sum-when{font-size:14px;margin-top:10px}
.bk-sum-lines{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.bk-li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.bk-sum-total{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-weight:700;font-size:17px}
.bk-book{width:100%;margin-top:16px;border:0;border-radius:999px;padding:16px;font:inherit;font-weight:600;font-size:16px;background:var(--ink);color:#fff;cursor:pointer}
.bk-book.dis{background:#c9c7c2;cursor:not-allowed}
.bk-sum-fine{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}

/* pay panel */
.bk-paywrap{position:fixed;inset:0;z-index:1000;pointer-events:none}
.bk-paywrap.open{pointer-events:auto}
.bk-payscrim{position:absolute;inset:0;background:rgba(17,17,17,.45);opacity:0;transition:opacity .25s}
.bk-paywrap.open .bk-payscrim{opacity:1}
.bk-panel-slide{position:absolute;top:0;right:0;height:100%;width:min(560px,100%);background:#fff;box-shadow:-10px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(100%);animation:slidein .3s ease-out forwards}
@keyframes slidein{to{transform:translateX(0)}}
.bk-pay-head{display:flex;align-items:center;justify-content:space-between;padding:28px 24px 16px;border-bottom:1px solid var(--line)}
.bk-pay-head .bk-h2{margin:0}
.bk-x{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.bk-pay-scroll{overflow-y:auto;overflow-x:hidden;padding:22px;flex:1;max-width:100%}
.bk-recap{background:var(--warm);border-radius:12px;padding:14px 16px;margin-bottom:18px}
.bk-recap-ttl{font-weight:600}
.bk-recap-when{font-size:14px;color:var(--muted);margin-top:2px}
.bk-fields{display:flex;flex-direction:column;gap:14px}
.bk-fgrp{display:flex;flex-direction:column;gap:6px}
.bk-flabel{font-size:13px;font-weight:600}
.bk-input{border:1px solid var(--line2);border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;width:100%;background:#fff}
.bk-input:focus{outline:2px solid var(--ink);outline-offset:1px}
.bk-guest{max-width:90px;text-align:center}
.bk-fee{background:var(--y-bg);border:1px solid var(--y-bd);border-radius:12px;padding:12px 14px;color:var(--y-tx)}
.bk-fee p{margin:6px 0 10px;font-size:13px}
.bk-paysec{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.bk-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;margin-top:12px;cursor:pointer}
.bk-check input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
.bk-reel{display:flex;gap:10px;align-items:center;border:1px solid var(--ink);border-radius:10px;padding:10px 14px;margin:12px 0;text-decoration:none;color:var(--ink);font-size:13px}
.bk-reel-play{flex:0 0 auto;width:26px;height:26px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:11px}
/* add-ons */
.bk-badge-sm{display:inline-block;font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--muted)}
.bk-addons{background:var(--warm);border-radius:14px;padding:18px;margin-top:22px;border:0;overflow:hidden;max-width:100%}
.bk-rec{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin:14px 0}
.bk-rec-lbl{font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:700}
.bk-rec-set{font-weight:600;margin-top:4px}
.bk-rail-ctrls{display:flex;justify-content:space-between;align-items:center;margin:12px 0 8px}
.bk-swipe{font-size:13px;color:var(--muted)}
.bk-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:#fff;cursor:pointer;font-size:16px;margin-left:6px}
.bk-rail-wrap{position:relative;overflow:hidden;max-width:100%}
.bk-rail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin;touch-action:pan-x;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.bk-rail::-webkit-scrollbar{height:6px}
.bk-addon{flex:0 0 210px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.bk-addon.on{border:2px solid var(--ink)}
.bk-addon img{width:100%;height:120px;object-fit:cover}
.bk-addon-b{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}
.bk-addon-nm{font-weight:600;font-size:14px}
.bk-addon-pr{font-size:13px;color:var(--muted)}
.bk-rail-next,.bk-rail-prev{position:absolute;top:60px;width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;font-size:18px;box-shadow:0 2px 10px rgba(0,0,0,.25);z-index:2;opacity:.92}
.bk-rail-next{right:8px}
.bk-rail-prev{left:8px}
.bk-addon-count{font-size:14px;font-weight:600;color:var(--g-tx);margin-top:12px}
/* signature */
.bk-agree{width:100%;border-radius:12px;padding:16px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;background:#fff;color:var(--ink);border:1px dashed var(--ink)}
.bk-agree a{color:inherit}
.bk-signed .sig{font-family:'Homemade Apple',cursive;font-size:30px;display:inline-block;animation:sigwrite 1.9s ease-out both;border-bottom:1px solid var(--line2);padding:0 8px 6px}
@keyframes sigwrite{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.bk-sig-meta{font-size:12px;color:var(--muted);margin-top:8px}
.bk-promo-row{display:flex;gap:8px}
.bk-totals .bk-li{margin-top:6px}
.bk-still{margin-top:14px;font-size:14px;color:var(--y-tx);background:var(--y-bg);border:1px solid var(--y-bd);border-radius:10px;padding:10px 12px}
.bk-card-field{margin-top:18px}
.bk-sqcard{min-height:50px;border:1px solid var(--line2);border-radius:10px;padding:8px;margin-top:6px}
.bk-fine{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
.bk-pay{width:100%;margin-top:16px;border:0;border-radius:999px;padding:16px;font:inherit;font-weight:600;font-size:16px;background:var(--ink);color:#fff;cursor:pointer}
.bk-pay.dis{opacity:.4;cursor:not-allowed}
/* detail overlay */
.bk-detail-scrim{position:absolute;inset:0;background:rgba(17,17,17,.4)}
.bk-detail{position:absolute;top:0;right:0;height:100%;width:min(460px,100%);background:#fff;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.2)}
.bk-detail-img{width:100%;border-radius:12px;margin-bottom:12px}
.bk-crew-card{border-radius:10px;margin-top:12px;overflow:hidden;border:1px solid var(--line)}
.bk-crew-card .bk-crew-h{color:#fff;font-size:11px;letter-spacing:1.4px;font-weight:700;padding:9px 14px}
.bk-crew-card.inc{border-color:var(--g-bd)}
.bk-crew-card.inc .bk-crew-h{background:#1e5c40}
.bk-crew-card.not .bk-crew-h{background:#8a4a3a}
.bk-crew-card ul{list-style:none;margin:0;padding:12px 16px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.bk-crew-card.not li{color:var(--muted)}

@media (max-width:900px){
  .bk-wrap{grid-template-columns:1fr}
  .bk-summary{position:static;order:2}
  .bk-panel-slide{width:100%}
}
@media (prefers-reduced-motion:reduce){.kb,.bk-panel-slide,.bk-signed .sig{animation:none}.bk-panel-slide{transform:none}}