/* Booking page (book.html). Colors, fonts and the .cta/.chip/.panel looks come from styles.css */
.bk-page{background:var(--tint)}
.bk-call{justify-self:end;font-weight:700;color:var(--blue2);text-decoration:none;padding:12px 4px}
.bk{max-width:1040px;margin:0 auto;padding:calc(104px + env(safe-area-inset-top,0px)) var(--gr) 40px var(--gl);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.bk h1{grid-column:1/-1;margin:0;font-family:var(--display);font-weight:400;font-size:clamp(34px,7vw,52px);line-height:1.05;text-transform:uppercase;letter-spacing:.02em;color:var(--blue)}
.bk-steps{grid-column:1/-1;list-style:none;margin:0;padding:0;display:flex;gap:8px 18px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--mute)}
.bk-steps li{display:flex;align-items:center;gap:8px}
.bk-steps span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:13px}
.bk-steps li[aria-current]{color:var(--ink)}
.bk-steps li[aria-current] span,.bk-steps li.was span{background:var(--blue2);border-color:var(--blue2);color:#fff}
.bk-err{grid-column:1/-1;margin:0;padding:12px 14px;border-radius:10px;background:#fff1f0;border:1px solid #f3b4ae;color:#8a1c12;font-weight:600}
.bk-step{grid-column:1}
.bk-step h2{font-size:26px}
.bk-step .bk-h2{margin-top:26px}
.bk-step .lbl small{font-weight:400;color:var(--mute)}
.bk-in{display:block;width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.bk-in:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bk-in.bad{border-color:#d93a2b}
textarea.bk-in{resize:vertical}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-step .chip{min-height:44px;padding:9px 18px;font-size:15px}

/* package cards and add-on rows are real buttons and checkboxes */
.bk-pkgs,.bk-addons{display:grid;gap:8px;margin-top:10px}
.bk-pkg{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.bk-pkg b{display:block;font-weight:600}
.bk-pkg small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.bk-pkg > span{font-weight:700;font-size:20px;color:var(--ice);white-space:nowrap}
.bk-pkg:hover{border-color:var(--accent)}
.bk-pkg[aria-checked="true"]{border-color:var(--blue2);background:rgba(74,155,255,.12);box-shadow:inset 0 0 0 1px var(--blue2)}
.bk-add{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.bk-add input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue2);flex:none}
.bk-add .nm{flex:1;font-weight:600}
.bk-add .pr{font-weight:700;color:var(--ice);white-space:nowrap}
.bk-qty{display:flex;align-items:center;gap:6px}
.bk-qty button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer;color:var(--blue2)}
.bk-qty output{min-width:52px;text-align:center;font-size:14px}

/* month calendar */
.bk-cal{max-width:460px}
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;margin:10px 0 8px}
.bk-cal-head b{font-size:17px}
.bk-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--blue2)}
.bk-arrow:disabled{opacity:.35;cursor:default}
.bk-dow,.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.bk-dow{font-size:12px;color:var(--mute);font-weight:600;margin-bottom:4px}
.bk-day{aspect-ratio:1;min-height:40px;border-radius:10px;border:1px solid transparent;background:none;font-size:15px;color:var(--mute)}
button.bk-day{background:#fff;border-color:var(--line);color:var(--ink);font-weight:600;cursor:pointer}
button.bk-day:hover{border-color:var(--accent)}
button.bk-day[aria-pressed="true"]{background:var(--blue2);border-color:var(--blue2);color:#fff}
.bk-day.off{opacity:.45;text-decoration:line-through}
.bk-slots{margin-top:10px}
.bk-slots:empty::before{content:"Pick a date to see open times.";color:var(--mute);font-size:14px}

/* summary card: beside the steps on wide screens, stuck to the bottom on phones */
.bk-bar{grid-column:2;grid-row:3/span 3;position:sticky;top:calc(100px + env(safe-area-inset-top,0px));background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 24px 60px rgba(10,50,120,.14)}
.bk-sum{margin:0;display:grid;gap:8px;font-size:14px}
.bk-sum div{display:flex;justify-content:space-between;gap:12px}
.bk-sum dt{color:var(--mute)}
.bk-sum dd{margin:0;text-align:right;font-weight:600}
.bk-bar-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.bk-total small{display:block;font-size:12px;color:var(--mute)}
.bk-total b{font-size:26px;color:var(--blue)}
.bk-btns{display:flex;gap:8px;align-items:center}
.bk-btns .cta,.bk-btns .chip{min-height:44px;cursor:pointer;font-size:15px}
.bk-btns .cta:disabled{opacity:.5;cursor:default;transform:none}
.bk-done{grid-column:1/-1;max-width:560px;text-align:left}
.bk-done .bk-sum{margin:14px 0}
.bk-done .cta{margin-top:16px}
.bk-ref{margin:6px 0 0;color:var(--soft)}

@media (max-width:860px){
  .bk{grid-template-columns:minmax(0,1fr);padding-top:calc(96px + env(safe-area-inset-top,0px));padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .bk-bar{grid-column:1;grid-row:auto;position:fixed;top:auto;left:0;right:0;bottom:0;z-index:30;border-radius:16px 16px 0 0;border-width:1px 0 0;padding:12px var(--gr) calc(12px + env(safe-area-inset-bottom,0px)) var(--gl);box-shadow:0 -10px 30px rgba(10,50,120,.14)}
  .bk-bar .bk-sum{display:none}
  .bk-bar-row{margin-top:0;padding-top:0;border-top:0}
  .bk-add{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* on phones the full summary shows above the Confirm button on the last step */
@media (max-width:860px){.bk-bar.full .bk-sum{display:grid;margin-bottom:12px}.bk:has(.bk-bar.full){padding-bottom:calc(330px + env(safe-area-inset-bottom,0px))}}

/* the hidden attribute must win over the display rules above */
[hidden]{display:none!important}
.bk-step .chips{margin-top:10px}