/*
 * SayNinja camp wizard.
 *
 * Loaded only on /locations/<slug>/summer-camp/ and only when the gym has
 * published camp dates. Depends on sayninja-camps -> sayninja-location, so the
 * tokens and the embedded Hanken / Fraunces faces are already on the page.
 *
 * Everything is scoped to #campModal (and .cw-cta for the page button). The
 * class wizard's .wiz / .step / .f rules live in location.css; scoping here
 * means this renders identically whether or not those rules exist, and cannot
 * change how #bookModal looks anywhere else.
 *
 * Locked constraints honoured: none of the three banned properties appear here,
 * so a grep for them across the theme stays a clean zero.
 */

#campModal{
  --cw-pink:#EB2D84; --cw-ink:#17182B; --cw-blue:#2790E0; --cw-yellow:#F2B12A;
  --cw-lilac:#BF9BDE; --cw-mute:#6A6E85; --cw-line:#E3E5EF;
  --cw-coach:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --cw-kid:Fraunces,Georgia,"Times New Roman",serif;

  position:fixed; top:0; right:0; bottom:0; left:0; z-index:9990;
  display:none; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:max(18px, env(safe-area-inset-top,0px)) 14px max(28px, env(safe-area-inset-bottom,0px));
  font-family:var(--cw-coach); font-size:16px; line-height:1.5; color:var(--cw-ink);
}
#campModal.open{display:block}
#campModal *, #campModal *::before, #campModal *::after{box-sizing:border-box}

#campModal .cw-scrim{position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(14,20,48,.72)}

/* ---------- card ---------- */
#campModal .wiz{
  position:relative; max-width:620px; margin:0 auto 7px;
  background:#fff; border:3px solid var(--cw-ink); border-radius:18px; overflow:hidden;
  box-shadow:7px 7px 0 var(--cw-ink);
}
@media (min-width:680px){ #campModal .wiz{ margin-top:4vh } }

/* ---------- head: a sky ---------- */
#campModal .wiz-head{
  position:relative; overflow:hidden; background:var(--cw-blue); color:#fff;
  padding:66px 22px 22px; border-bottom:3px solid var(--cw-ink);
}
#campModal .wiz-head > *{position:relative; z-index:1}
#campModal .wiz-head .close{
  position:absolute; top:12px; right:12px; z-index:2;
  background:none; border:0; color:rgba(255,255,255,.85); font-size:28px; line-height:1;
  cursor:pointer; padding:4px 9px; border-radius:8px;
}
#campModal .wiz-head .close:focus-visible{outline:3px solid var(--cw-yellow); outline-offset:1px}
#campModal .wiz-chip{display:inline-block; background:rgba(255,255,255,.22); color:#fff; font-size:12px; font-weight:800; padding:5px 11px; border-radius:999px}

/* course line, ending at the pink buzzer */
#campModal .bar{position:relative; height:3px; background:rgba(255,255,255,.3); border-radius:2px; margin:16px 10px 14px 0}
#campModal .bar i{position:absolute; left:0; top:0; height:3px; border-radius:2px; background:#fff; width:0; transition:width .3s ease}
#campModal .bar b{position:absolute; right:-10px; top:-5.5px; width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.35); transition:background .3s, box-shadow .3s}
#campModal .bar b.hit{background:var(--cw-pink); box-shadow:0 0 0 5px rgba(235,45,132,.35)}

#campModal .wiz-meta{font-size:12.5px; color:rgba(255,255,255,.78); margin-bottom:6px}
#campModal .wiz-title{font-family:var(--cw-coach); font-weight:800; font-size:clamp(21px,4.6vw,26px); letter-spacing:-.015em; line-height:1.15; margin:0 0 5px; color:#fff}
#campModal .wiz-title:focus{outline:none}
#campModal .wiz-sub{margin:0; font-size:14.5px; color:rgba(255,255,255,.9)}
#campModal .wiz-sub .kid{font-family:var(--cw-kid); font-style:italic; font-weight:600}

/* the sun: climbs as the booking progresses, rays at the buzzer */
#campModal .sun{
  position:absolute; z-index:0; width:50px; height:50px; margin:-25px 0 0 -25px;
  left:11%; top:58px;
  border-radius:50%; background:var(--cw-yellow); border:3px solid var(--cw-ink);
  box-shadow:0 0 30px 14px rgba(242,177,42,.5);
  opacity:.6; pointer-events:none;
  transition:left .6s cubic-bezier(.34,.01,.24,1), top .6s cubic-bezier(.34,.01,.24,1), opacity .6s linear;
}
#campModal .sun::before{
  content:""; position:absolute; top:-22px; right:-22px; bottom:-22px; left:-22px; border-radius:50%; opacity:.4;
  background:repeating-conic-gradient(from 0deg, rgba(242,177,42,.85) 0deg 5deg, rgba(242,177,42,0) 5deg 22deg);
  transition:opacity .5s linear; animation:cwSunSpin 40s linear infinite;
}
#campModal .sun.peak{box-shadow:0 0 44px 20px rgba(242,177,42,.7)}
#campModal .sun.peak::before{opacity:1; animation-duration:16s}
@keyframes cwSunSpin{to{transform:rotate(360deg)}}

/* ---------- body ---------- */
#campModal .wiz-body{padding:22px}
#campModal .step{display:none}
#campModal .step.on{display:block}

/* choice cards */
#campModal .wantpick{display:grid; gap:11px}
#campModal .want{
  display:block; width:100%; text-align:left; position:relative;
  background:#fff; border:2.5px solid var(--cw-line); border-radius:13px;
  padding:15px 17px; cursor:pointer; font-family:inherit; font-size:16px; color:var(--cw-ink);
  transition:border-color .15s, box-shadow .15s;
}
#campModal .want:hover{border-color:var(--cw-lilac)}
#campModal .want:focus-visible{outline:3px solid var(--cw-yellow); outline-offset:2px}
#campModal .want[aria-pressed="true"]{border-color:var(--cw-pink); box-shadow:0 0 0 4px rgba(235,45,132,.16)}
#campModal .want b{display:block; font-weight:800; font-size:17.5px; margin:0 90px 3px 0}
#campModal .wsub{display:block; color:var(--cw-mute); font-size:14px; line-height:1.4}
#campModal .wprice{position:absolute; top:15px; right:17px; font-family:var(--cw-kid); font-style:italic; font-weight:600; font-size:19px; color:var(--cw-pink)}

/* day timeline, drawn to scale */
#campModal .tl{display:block; position:relative; height:28px; margin-top:11px}
#campModal .tl .track{position:absolute; left:0; right:0; top:8px; height:7px; border-radius:4px; background:var(--cw-line)}
#campModal .tl .fill{position:absolute; left:0; top:8px; height:7px; border-radius:4px; background:var(--cw-blue)}
#campModal .tl .lunch{position:absolute; top:0; width:2px; height:23px; background:var(--cw-yellow)}
#campModal .tl .lunch em{position:absolute; left:6px; top:-2px; font-style:normal; font-size:10.5px; font-weight:800; color:#8A6A12; white-space:nowrap}
#campModal .tl .e{position:absolute; top:18px; font-size:10.5px; color:var(--cw-mute)}
#campModal .tl .e.l{left:0}
#campModal .tl .e.r{right:0}

/* fields */
#campModal .fields{display:grid; gap:13px}
#campModal .two{display:grid; gap:13px; grid-template-columns:1fr 1fr}
#campModal .three{display:grid; gap:10px; grid-template-columns:2fr .7fr 1fr}
@media (max-width:460px){ #campModal .two, #campModal .three{grid-template-columns:1fr} }
#campModal .fl{display:block; font-size:13px; font-weight:800; color:#3A3D55; margin-bottom:5px}
#campModal .f{
  width:100%; border:2px solid var(--cw-line); border-radius:10px; padding:11px 13px;
  font-family:inherit; font-size:16px; color:var(--cw-ink); background:#fff; margin:0;
}
#campModal .f:focus{outline:3px solid var(--cw-yellow); outline-offset:1px; border-color:var(--cw-blue)}
#campModal .f[aria-invalid="true"]{border-color:var(--cw-pink); background:rgba(235,45,132,.04)}
#campModal textarea.f{resize:vertical; min-height:62px}
#campModal .err{display:none; color:#C21360; font-size:13.5px; font-weight:800; margin-top:6px}
#campModal .err.on{display:block}

/* birthday pills */
#campModal .dobdd{display:grid; grid-template-columns:1fr .8fr 1.1fr; gap:9px}
#campModal .dobpill{position:relative; text-align:left; background:#fff; border:2px solid var(--cw-line); border-radius:10px; padding:8px 26px 8px 12px; cursor:pointer; font-family:inherit; color:var(--cw-ink)}
#campModal .dobpill:disabled{opacity:.45; cursor:not-allowed}
#campModal .dobpill[aria-expanded="true"]{border-color:var(--cw-blue)}
#campModal .dobpill:focus-visible{outline:3px solid var(--cw-yellow); outline-offset:2px}
#campModal .doblab{display:block; font-size:11px; font-weight:800; color:var(--cw-mute)}
#campModal .dobval{display:block; font-size:16px; font-weight:800}
#campModal .dobchev{position:absolute; right:11px; top:50%; width:7px; height:7px; border-right:2px solid var(--cw-mute); border-bottom:2px solid var(--cw-mute); transform:translateY(-70%) rotate(45deg)}
#campModal .dobpanel{margin-top:10px; border:2px solid var(--cw-line); border-radius:12px; padding:12px}
#campModal .dobgrid{display:grid; gap:6px}
#campModal .dobgrid.m{grid-template-columns:repeat(4,1fr)}
#campModal .dobgrid.d{grid-template-columns:repeat(7,1fr)}
#campModal .dobgrid.y{grid-template-columns:repeat(4,1fr)}
#campModal .dobcell{border:2px solid var(--cw-line); background:#fff; border-radius:8px; padding:9px 0; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; color:var(--cw-ink)}
#campModal .dobcell:hover{border-color:var(--cw-lilac)}
#campModal .dobcell:focus-visible{outline:3px solid var(--cw-yellow); outline-offset:2px}
#campModal .dobcell[aria-pressed="true"]{background:var(--cw-pink); border-color:var(--cw-pink); color:#fff}
#campModal .dobhint, #campModal .dobecho{margin:9px 0 0; font-size:12.5px; color:var(--cw-mute)}
#campModal .dobecho:empty{display:none}

/* dates */
#campModal .cwho{margin:0 0 12px; font-size:14px; color:var(--cw-mute)}
#campModal .crail{display:flex; gap:7px; overflow-x:auto; padding-bottom:9px; margin-bottom:14px; -webkit-overflow-scrolling:touch}
#campModal .crail button{flex:0 0 auto; border:2px solid var(--cw-line); background:#fff; border-radius:999px; padding:8px 15px; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; color:var(--cw-ink); white-space:nowrap}
#campModal .crail button:focus-visible{outline:3px solid var(--cw-yellow); outline-offset:2px}
#campModal .crail button[aria-selected="true"]{background:var(--cw-blue); border-color:var(--cw-blue); color:#fff}
#campModal .classes{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
#campModal .daycell{position:relative; border:2px solid var(--cw-line); background:#fff; border-radius:11px; padding:12px 13px; text-align:left; font-family:inherit; cursor:pointer; color:var(--cw-ink)}
#campModal .daycell:hover{border-color:var(--cw-lilac)}
#campModal .daycell:focus-visible{outline:3px solid var(--cw-yellow); outline-offset:2px}
#campModal .daycell[aria-pressed="true"]{border-color:var(--cw-pink); background:rgba(235,45,132,.05)}
#campModal .daycell[disabled]{opacity:.4; cursor:not-allowed}
#campModal .daycell b{display:block; font-size:15.5px; font-weight:800}
#campModal .daycell span{display:block; font-size:12.5px; color:var(--cw-mute); margin-top:1px}
#campModal .daycell i{position:absolute; top:11px; right:11px; width:17px; height:17px; border-radius:50%; border:2px solid var(--cw-line)}
#campModal .daycell[aria-pressed="true"] i{background:var(--cw-pink); border-color:var(--cw-pink)}

#campModal .pin{margin-top:14px}
#campModal .pin:empty{display:none}
#campModal .weekup{background:rgba(242,177,42,.14); border:2px solid var(--cw-yellow); border-radius:12px; padding:13px 15px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
#campModal .weekup p{margin:0; flex:1 1 180px; font-size:14px}
#campModal .weekup b{font-weight:800}
#campModal .weekup .btn{flex:0 0 auto; padding:10px 16px; font-size:14.5px}
#campModal .runtot{display:flex; justify-content:space-between; align-items:baseline; margin-top:15px; padding-top:13px; border-top:2px solid var(--cw-line)}
#campModal .runtot .k{font-size:14px; color:var(--cw-mute)}
#campModal .runtot .v{font-family:var(--cw-kid); font-style:italic; font-weight:600; font-size:24px; color:var(--cw-pink)}

/* waiver */
#campModal .waiver{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.4; color:#3A3D55; cursor:pointer}
#campModal .waiver input{margin:3px 0 0; width:19px; height:19px; flex:0 0 auto; accent-color:#EB2D84}
#campModal .waiver a{color:var(--cw-blue); font-weight:800}
#campModal .scr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* summary + pay */
#campModal .sum{border:2px solid var(--cw-line); border-radius:13px; padding:16px 18px; margin-bottom:14px}
#campModal .sum:empty{display:none}
#campModal .sum .li{display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--cw-line)}
#campModal .sum .li:last-of-type{border-bottom:0}
#campModal .sum .li .k{color:var(--cw-mute); font-size:13.5px}
#campModal .sum .li .v{font-weight:800; text-align:right; font-size:14.5px}
#campModal .sum .li .v small{font-weight:400; color:var(--cw-mute); font-size:13px}
#campModal .sum .tot{display:flex; justify-content:space-between; align-items:baseline; margin-top:11px; padding-top:12px; border-top:2.5px solid var(--cw-ink)}
#campModal .sum .tot .k{font-weight:800; font-size:16px}
#campModal .sum .tot .v{font-family:var(--cw-kid); font-style:italic; font-weight:600; font-size:29px; color:var(--cw-pink)}
#campModal .note{background:rgba(242,177,42,.14); border:2px solid var(--cw-yellow); border-radius:12px; padding:13px 15px; font-size:14.5px; margin-bottom:14px}
#campModal .note b{display:block; font-weight:800; margin-bottom:3px}
#campModal .note a{color:var(--cw-blue); font-weight:800}
#campModal #cwPayEl{min-height:44px}
#campModal .pay-err{color:#C21360; font-size:13.5px; font-weight:800; margin:10px 0 0}
#campModal .pay-err:empty{display:none}

/* foot */
#campModal .wiz-foot{border-top:3px solid var(--cw-ink); padding:15px 22px 18px; background:#FBFBFD}
#campModal .foot-row{display:flex; gap:10px}
#campModal .btn{font-family:inherit; font-weight:800; font-size:16px; border-radius:11px; padding:13px 22px; cursor:pointer; border:2.5px solid transparent; line-height:1.2}
#campModal .btn:focus-visible{outline:3px solid var(--cw-yellow); outline-offset:2px}
#campModal .btn-g{background:#fff; color:var(--cw-mute); border-color:var(--cw-line)}
#campModal .btn-p{background:var(--cw-pink); color:#fff; flex:1 1 auto}
#campModal .btn-p:hover{background:#D11F73}
#campModal .btn-p[disabled]{background:var(--cw-line); color:#9AA0B4; cursor:not-allowed}
#campModal .wiz-escape{margin:12px 0 0; font-size:13px; color:var(--cw-mute); text-align:center}
#campModal .wiz-escape:empty{display:none}
#campModal .wiz-escape a{color:var(--cw-blue); font-weight:800; text-decoration:none}

/* ---------- the page button, beside the enquiry form ---------- */
.cw-cta{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  background:#fff; color:#17182B; border:3px solid #17182B; border-radius:16px;
  box-shadow:6px 6px 0 #17182B; padding:16px 18px; margin:0 6px 26px 0;
}
.cw-cta-t{flex:1 1 220px}
.cw-cta-t b{display:block; font-weight:800; font-size:18px; line-height:1.2}
.cw-cta-t span{display:block; font-size:14.5px; color:#6A6E85; margin-top:3px}
.cw-cta .btn{
  flex:0 0 auto; font-family:inherit; font-weight:800; font-size:16px; line-height:1.2;
  border-radius:11px; padding:13px 22px; cursor:pointer;
  background:#EB2D84; color:#fff; border:2.5px solid #EB2D84;
}
.cw-cta .btn:hover{background:#D11F73; border-color:#D11F73}
.cw-cta .btn:focus-visible{outline:3px solid #F2B12A; outline-offset:2px}

/* It used to sit beside the enquiry form at the foot of the page. It belongs
   with the day cards, where the parent has just decided how long the day is. */
.cw-cta-inline{max-width:1100px; margin:28px auto 0}
@media (max-width:700px){.cw-cta-inline{margin:20px 16px 0}}

@media (prefers-reduced-motion:reduce){
  #campModal *, #campModal *::before, #campModal *::after{transition:none !important; animation:none !important}
}