/* ==========================================================================
   Scapegoats Booking Widget — LIGHT theme, matched to the main site
   (Astra: white content, dark text, #d40000 red, Josefin Sans headings).
   Scoped under #sgb. The photographic HERO and ROOM CARDS stay dark because
   text sits directly on the images; every panel / chip / form / summary /
   modal body is light so the page reads like the rest of the site instead
   of a black block. All dark-theme var names are kept (aliased to light) so
   any inline var() in the widget markup still resolves.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap');

#sgb{
  --ground:transparent;--panel:#17131c;--panel2:#1e1a24;
  --surface:#17131c;--surface-2:#1e1a24;--surface-3:#262029;
  --text:#f2eef0;--muted:#b3aab2;--faint:#7d7580;
  --accent:#d40000;--accent-hot:#ff2a1f;--accent-deep:#7a0d0a;--open:#57b06a;
  --line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.07);
  --fd:"Josefin Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fb:inherit;
  --fm:"Josefin Sans",ui-monospace,Menlo,Consolas,monospace;
  position:relative;
  background:transparent;color:var(--text);
  font-family:var(--fb);font-size:16.5px;line-height:1.62;
  padding:0 0 64px;margin:0;
}
#sgb *{box-sizing:border-box}
#sgb .sgb-wrap{max-width:1180px;margin:0 auto;padding:0 22px}
#sgb button{margin:0;font:inherit;color:inherit;cursor:pointer;line-height:normal}
#sgb h2,#sgb h3,#sgb h4{margin:0;text-wrap:balance;color:var(--text)}
#sgb .display{font-family:var(--fd);font-weight:700;letter-spacing:.02em;line-height:1;text-transform:uppercase}
#sgb .mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
#sgb .eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:700}
#sgb .muted{color:var(--muted)}

/* ---- Hero (full-bleed cabin banner, like the site's page hero) --------- */
#sgb .sgb-head{
  position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw;
  overflow:hidden;text-align:center;margin:0 0 42px;
  padding:150px 24px 94px;
  background:#151016 url(https://scapegoats.nz/wp-content/uploads/2025/07/banner-4.jpg) center/cover no-repeat;
}
#sgb .sgb-head::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,12,.32),rgba(11,10,12,.62))}
#sgb .sgb-head>*{position:relative;z-index:1}
#sgb .sgb-head .eyebrow{display:block;margin-bottom:12px;color:#ff5a4f}
#sgb .sgb-head h2{font-family:var(--fd);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:clamp(40px,7vw,64px);line-height:1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
#sgb .sgb-head p{color:#e9e3e8;font-size:17px;margin:12px 0 0;text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* ---- Panel + stepper -------------------------------------------------- */
#sgb .sgb-panel{position:relative;background:linear-gradient(rgba(11,10,12,.58),rgba(11,10,12,.72)),url(https://scapegoats.nz/wp-content/uploads/scapegoats-rooms/panel-bg.jpg) center/cover no-repeat #0e0b11;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -46px rgba(0,0,0,.85)}
/* Rotating room-image backdrop INSIDE the panel (injected as .sgb-panelbg); content sits above via z-index */
#sgb .sgb-panelbg{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:0;transition:opacity .5s ease}
#sgb .sgb-panel:has(.sgb-stage .rooms) .sgb-panelbg{opacity:1} /* only on step 1 (room choice) */
#sgb .sgb-panelbg .s{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;animation:sgbpan 32s infinite;will-change:opacity,transform}
#sgb .sgb-panelbg .s:nth-child(1){animation-delay:0s}
#sgb .sgb-panelbg .s:nth-child(2){animation-delay:8s}
#sgb .sgb-panelbg .s:nth-child(3){animation-delay:16s}
#sgb .sgb-panelbg .s:nth-child(4){animation-delay:24s}
#sgb .sgb-panelbg .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,12,.66),rgba(11,10,12,.80))}
#sgb .sgb-steps,#sgb .sgb-body,#sgb .sgb-stage,#sgb .sgb-thanks,#sgb .sgb-summary{position:relative;z-index:1}
@keyframes sgbpan{0%{opacity:0;transform:scale(1.02)}5%{opacity:1}22%{opacity:1}28%{opacity:0}100%{opacity:0;transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){#sgb .sgb-panelbg .s{animation:none}#sgb .sgb-panelbg .s:nth-child(1){opacity:1;transform:none}}
#sgb .sgb-steps{display:flex;gap:6px;padding:16px 20px 0;flex-wrap:wrap}
#sgb .step{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:7px 12px;border-radius:20px;border:1px solid transparent;cursor:pointer;transition:.14s}
#sgb .step:hover{color:var(--muted)}
#sgb .step.on{color:var(--accent);border-color:rgba(212,0,0,.32);background:rgba(212,0,0,.06)}
#sgb .step.done{color:var(--open)}
#sgb .sgb-body{display:grid;grid-template-columns:1fr 340px;gap:0;align-items:start}
#sgb .sgb-stage{padding:28px 30px;min-height:430px}
#sgb .sgb-stage h3{font-family:var(--fd);text-transform:uppercase;letter-spacing:.03em;font-size:28px;font-weight:700;margin-bottom:5px}
#sgb .hint{color:var(--muted);font-size:15px;margin-bottom:20px}

/* ---- Room cards (photo + scrim, white text on image) ------------------ */
#sgb .rooms{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#sgb .room{position:relative;text-align:left;border:1px solid var(--line);background:#151016 center/cover no-repeat;border-radius:13px;padding:18px;color:#fff;transition:.16s;overflow:hidden;min-height:256px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 10px 26px -20px rgba(0,0,0,.55)}
#sgb .room::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,12,.20),rgba(11,10,12,.60) 46%,rgba(11,10,12,.96));z-index:0}
#sgb .room>*{position:relative;z-index:1}
#sgb .room:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 22px 44px -24px rgba(0,0,0,.6)}
#sgb .room:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(212,0,0,.45)}
#sgb .room .rn{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:28px;letter-spacing:.02em;line-height:1;margin-bottom:6px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.85)}
#sgb .room .rt{font-size:12px;color:#ff5a4f;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.95)}
#sgb .room .rb{font-size:14.5px;font-weight:600;color:#f6f2f5;margin-top:8px;min-height:42px;text-shadow:0 2px 10px rgba(0,0,0,1)}
#sgb .room .rd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;font-size:13.5px;font-weight:600;color:#efeaee;text-shadow:0 2px 8px rgba(0,0,0,1)}
#sgb .readmore{display:inline-block;flex:none;background:rgba(11,10,12,.72);border:1.5px solid var(--accent);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.03em;padding:9px 15px;border-radius:9px;white-space:nowrap;transition:.14s}
#sgb .readmore:hover{background:var(--accent);box-shadow:0 8px 22px -10px var(--accent)}

/* ---- Meters — default styling is for the dark room cards -------------- */
#sgb .rstats{display:flex;flex-direction:column;gap:6px;margin-top:10px}
#sgb .meter{display:flex;align-items:center;gap:8px;font-size:11px}
#sgb .meter .ml{width:76px;flex:none;color:#e7dfe5;letter-spacing:.04em;text-transform:uppercase;font-weight:700;font-size:11px;text-shadow:0 1px 6px rgba(0,0,0,.9)}
#sgb .meter .mbar{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
#sgb .meter .mbar i{display:block;height:100%;background:linear-gradient(90deg,#e23b2f,var(--accent));border-radius:4px}
#sgb .meter .mbar.fear i{background:linear-gradient(90deg,#c8781f,#e0a53a)}
#sgb .meter .mv{width:28px;flex:none;text-align:right;color:#f0eaef;font-size:13px;text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* ---- Chips (dates + times) — light ------------------------------------ */
/* ---- Month navigation on the "pick a night" step ---------------------- */
#sgb .monthnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 16px;max-width:330px}
#sgb .monthlbl{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:17px;color:var(--text);text-align:center;flex:1}
#sgb .mbtn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:18px;line-height:1;transition:.14s}
#sgb .mbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
#sgb .mbtn:disabled{opacity:.3;cursor:not-allowed}

#sgb .chips{display:flex;flex-wrap:wrap;gap:9px}
#sgb .chip{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:11px;padding:12px 16px;font-size:15px;transition:.14s;text-align:center;min-width:82px}
#sgb .chip:hover:not(.busy){border-color:var(--accent);color:var(--accent)}
#sgb .chip.sel{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
#sgb .chip small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
#sgb .chip.open .tk{color:var(--open)}
#sgb .chip.sel .tk{color:#fff}
#sgb .chip.busy{opacity:.5;cursor:not-allowed;text-decoration:line-through;border-style:dashed;background:var(--surface-2)}

/* ---- Player counter — light ------------------------------------------- */
#sgb .counter{display:flex;align-items:center;gap:18px;margin-top:6px}
#sgb .counter button{width:56px;height:56px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:28px;font-family:var(--fd);font-weight:700}
#sgb .counter button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
#sgb .counter button:disabled{opacity:.3;cursor:not-allowed}
#sgb .counter .n{font-family:var(--fd);font-weight:700;font-size:50px;min-width:56px;text-align:center;color:var(--text)}
#sgb .counter .lbl{color:var(--muted);font-size:14px}

/* ---- Nav + buttons ---------------------------------------------------- */
#sgb .nav{display:flex;justify-content:space-between;margin-top:22px;gap:12px}
#sgb .btn{border-radius:11px;padding:13px 22px;font-size:15px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--text);transition:.15s;letter-spacing:.02em;display:inline-block;text-align:center}
#sgb .btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
#sgb .btn.primary,#sgb .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
#sgb .btn.primary:hover:not(:disabled),#sgb .btn-primary:hover:not(:disabled){background:var(--accent-hot);border-color:var(--accent-hot);color:#fff;box-shadow:0 10px 26px -14px var(--accent)}
#sgb .btn:disabled{opacity:.4;cursor:not-allowed}

/* ---- Details form ----------------------------------------------------- */
#sgb .sgb-form label{display:block;font-size:13px;font-weight:700;color:#cfc7cd;margin-bottom:14px}
#sgb .sgb-form input{width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-weight:500}
#sgb .sgb-form input::placeholder{color:var(--faint)}
#sgb .sgb-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,0,0,.14)}
#sgb .sgb-form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#sgb .sgb-form .btn{width:100%;margin-top:4px}
#sgb .sgb-fineprint{font-size:12.5px;color:var(--faint);text-align:center;margin:12px 0 0}

/* ---- Summary rail — light --------------------------------------------- */
#sgb .sgb-rail{background:#14101a;border:1px solid rgba(255,255,255,.10);border-radius:14px;margin:114px 22px 22px;padding:20px 20px 22px;display:flex;flex-direction:column;color:#f2eef0}
#sgb .sgb-rail h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
#sgb .sumrow{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:15px}
#sgb .sumrow .k{color:#a49ca6}
#sgb .sumrow .v{text-align:right;font-weight:600;color:#fff}
#sgb .sumrow .v.empty{color:#6b636c;font-weight:400}
#sgb .total{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
#sgb .total .amt{font-family:var(--fd);font-weight:700;font-size:48px;color:var(--accent);letter-spacing:.02em}
#sgb .total .amt small{font-size:14px;color:#a49ca6;font-family:var(--fb);font-weight:400}

/* ---- Notices / policy / thank-you ------------------------------------- */
#sgb .sgb-policy{max-width:1180px;margin:18px auto 0;padding:0 22px;color:var(--faint);font-size:13.5px;text-align:center}
#sgb .sgb-notice{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:20px;color:var(--muted);text-align:center}
#sgb .sgb-notice a{color:var(--accent)}
#sgb .sgb-thanks{position:relative;overflow:hidden;max-width:560px;margin:0 auto;text-align:center;background:linear-gradient(rgba(11,10,12,.60),rgba(11,10,12,.80)),url(https://scapegoats.nz/wp-content/uploads/scapegoats-rooms/panel-bg.jpg) center/cover no-repeat #0e0b11;border:1px solid var(--line);border-radius:18px;padding:46px 34px 42px;box-shadow:0 30px 80px -46px rgba(0,0,0,.85)}
#sgb .sgb-thanks h2{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:42px;margin-bottom:10px;color:#fff}
#sgb .sgb-thanks p{color:#cfc7cd}
#sgb .sgb-summary{width:100%;max-width:400px;margin:26px auto 6px;border-collapse:collapse;text-align:left;background:rgba(0,0,0,.32);border-radius:12px;overflow:hidden}
#sgb .sgb-summary,#sgb .sgb-summary tr,#sgb .sgb-summary td{border:none !important}
#sgb .sgb-summary td{padding:11px 16px;font-size:15px;background:transparent !important}
#sgb .sgb-summary td:first-child{color:var(--muted);width:38%}
#sgb .sgb-summary td:last-child{color:#fff;font-weight:600}

/* ---- Read-more modal — light card, photo hero ------------------------- */
#sgb .sgb-modal[hidden]{display:none}
#sgb .sgb-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
#sgb .sgb-modal-back{position:absolute;inset:0;background:rgba(6,4,7,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#sgb .sgb-modal-card{position:relative;z-index:1;width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
#sgb .sgb-x{display:flex;align-items:center;justify-content:center;line-height:1;position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,10,12,.55);color:#fff;font-size:22px}
#sgb .sgb-x:hover{background:var(--accent);border-color:var(--accent)}
#sgb .sgb-modal-hero{height:210px;background-color:#151016;background-position:center;background-size:cover;background-repeat:no-repeat;position:relative;display:flex;align-items:flex-end;border-radius:18px 18px 0 0}
#sgb .sgb-modal-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,12,.05),rgba(11,10,12,.85));border-radius:18px 18px 0 0}
#sgb .sgb-modal-in{position:relative;z-index:1;padding:18px 22px}
#sgb .sgb-modal-in .rt{color:#ff5a4f;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.9)}
#sgb .modal-name{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:34px;letter-spacing:.02em;line-height:1;margin-top:4px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.85)}
#sgb .sgb-modal-body{padding:20px 22px 22px}
#sgb .sgb-modal-body p{margin:0 0 12px;color:#eae4e9;font-size:15.5px;font-weight:500;line-height:1.65}
#sgb .warn{display:inline-block;background:rgba(212,0,0,.10);border:1px solid rgba(212,0,0,.4);color:var(--accent);font-size:12px;font-weight:700;padding:5px 11px;border-radius:8px;margin-bottom:14px}
#sgb .modal-stats{display:flex;flex-direction:column;gap:10px;margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
#sgb .modal-stats .meter{font-size:12px}
#sgb .modal-stats .meter .ml{width:96px;color:var(--muted);text-shadow:none}
#sgb .modal-stats .meter .mbar{background:rgba(255,255,255,.14)}
#sgb .modal-stats .meter .mv{color:var(--text);text-shadow:none}
#sgb .statchip{align-self:flex-start;font-size:12px;color:var(--muted);background:var(--surface-3);border:1px solid var(--line);border-radius:20px;padding:4px 11px}
#sgb .modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}

/* ---- Gift-voucher purchase (shortcode [scapegoats_gift_voucher]) ------- */
#sgb .sgb-vstage{grid-column:1/-1}
#sgb .vtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:8px 0 4px}
#sgb .vtile{border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:18px 10px;text-align:center;transition:.14s;cursor:pointer}
#sgb .vtile:hover{border-color:var(--accent);transform:translateY(-2px)}
#sgb .vtile.sel{border-color:var(--accent);background:rgba(212,0,0,.05);box-shadow:0 0 0 2px rgba(212,0,0,.28)}
#sgb .vtile .va{display:block;font-family:var(--fd);font-weight:700;font-size:30px;color:var(--text);line-height:1}
#sgb .vtile.sel .va{color:var(--accent)}
#sgb .vtile .vp{display:block;font-size:12px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.06em}
#sgb .vsub{font-family:var(--fd);text-transform:uppercase;letter-spacing:.03em;font-size:17px;font-weight:700;color:var(--text);margin:22px 0 12px}
#sgb .sgb-vform{margin-top:8px}
@media(max-width:680px){#sgb .vtiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:430px){#sgb .vtiles{grid-template-columns:repeat(2,1fr)}}

/* ---- Responsive ------------------------------------------------------- */
@media(max-width:760px){
  #sgb .sgb-body{grid-template-columns:1fr}
  #sgb .sgb-rail{margin:2px 18px 20px}
  #sgb .sgb-head{padding:118px 20px 62px;margin-bottom:30px}
}
@media(max-width:520px){
  #sgb .rooms{grid-template-columns:1fr}
  #sgb .sgb-stage{padding:22px 18px;min-height:0}
  #sgb .sgb-steps{padding:14px 14px 0}
  #sgb .counter{gap:14px}
  #sgb .nav .btn{padding:12px 16px}
}
@media(max-width:480px){
  #sgb .sgb-form .two{grid-template-columns:1fr}
}