/* ============================================================
   Booking widget (public/js/booking-widget.js). Loaded by the widget
   itself, so every host page gets it. Uses the site's variables from
   redesign.css. The sheet / card placement lives in redesign.css (.td-book).
   ============================================================ */
.bw-host { display: flex; flex-direction: column; min-height: 0; }
/* never let wide content (the day strip) widen whatever layout hosts the form */
.bw { min-width: 0; max-width: 100%; contain: inline-size; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: var(--white); color: var(--text); font-family: var(--font-sans); -webkit-tap-highlight-color: transparent; }
.bw *, .bw *::before, .bw *::after { box-sizing: border-box; }
.bw button { font-family: inherit; }
.bw button:focus-visible, .bw-input:focus-visible, .bw-extra:focus-within, .bw a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.bw-loading { display: flex; justify-content: center; gap: 7px; padding: 36px 0; }
.bw-loading span { width: 9px; height: 9px; border-radius: 50%; background: var(--orange-soft); animation: bw-pulse 1s ease-in-out infinite; }
.bw-loading span:nth-child(2) { animation-delay: .15s; } .bw-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes bw-pulse { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.bw-error { color: var(--error); font-size: .9rem; margin: 8px 0 0; }

.bw-handle { display: none; flex: none; width: 44px; height: 5px; margin: 9px auto 0; border-radius: 3px; background: var(--line); }
.bw-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px 4px; touch-action: none; }
.bw-eyebrow { margin: 0; font: 600 .7rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-deep); }
.bw-tour { margin: 2px 0 0; font: 700 1.12rem/1.22 var(--font-serif); color: var(--ink); }
.bw-x { display: none; flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.bw-x:hover { background: var(--cream-deep); }
@media (max-width: 1024px) { .td-book .bw-handle { display: block; } .td-book .bw-x { display: inline-flex; } }

/* step indicator */
.bw-steps { flex: none; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 8px 18px 2px; padding: 0; list-style: none; }
.bw-steps::before, .bw-steps::after { content: ''; position: absolute; top: 19px; left: 12.5%; height: 2px; border-radius: 1px; }
.bw-steps::before { right: 12.5%; background: var(--line); }
.bw-steps::after { width: calc(75% * var(--bw-progress, 0)); background: var(--orange); transition: width .38s cubic-bezier(.4, 0, .2, 1); }
.bw-step { position: relative; z-index: 1; width: 100%; min-height: 58px; padding: 4px 0 2px; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; color: var(--text-muted); font: 600 .72rem var(--font-sans); }
.bw-step:disabled { cursor: default; }
.bw-step:not(:disabled):not(.is-current):hover .bw-step-n { border-color: var(--orange-soft); }
.bw-step-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 2px solid var(--line); font: 700 .8rem var(--font-sans); color: var(--text-muted); transition: background .25s, border-color .25s, color .25s, transform .25s; }
.bw-step.is-done .bw-step-n { border-color: var(--orange); color: var(--orange-deep); }
.bw-step.is-current { color: var(--ink); }
.bw-step.is-current .bw-step-n { background: var(--orange-btn); border-color: var(--orange-btn); color: var(--white); transform: scale(1.1); }
.bw-step-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px 20px; }
.bw-panel { animation: bw-in .3s cubic-bezier(.2, .8, .2, 1) both; outline: none; }
@keyframes bw-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.bw-label { display: block; margin: 0 0 8px; font: 700 .78rem var(--font-sans); letter-spacing: .02em; color: var(--ink); }
.bw-hint, .bw-empty { margin: 0 0 12px; font-size: .84rem; line-height: 1.5; color: var(--text-muted); }
.bw-err { margin: 6px 0 0; font-size: .82rem; line-height: 1.4; color: var(--error); }
.bw-err:empty { display: none; }
.bw-link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 14px; background: var(--ink); color: var(--white); font: 700 .95rem var(--font-sans); text-decoration: none; }

/* mode switch: segmented control */
.bw-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 18px; padding: 4px; border-radius: 16px; background: var(--cream-deep); }
.bw-mode-btn { min-height: 48px; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: 600 .84rem/1.2 var(--font-sans); cursor: pointer; transition: background .2s, box-shadow .2s, color .2s; }
.bw-mode-btn.is-active { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }

/* day strip */
.bw-days-wrap { position: relative; margin: 0 -18px 12px; }
.bw-days { display: flex; gap: 8px; padding: 6px 18px 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; position: relative; -webkit-overflow-scrolling: touch; }
.bw-days::-webkit-scrollbar { display: none; }
.bw-day { flex: 0 0 62px; min-height: 82px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--white); color: var(--ink); cursor: pointer; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.bw-day-w { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.bw-day-n { font: 800 1.35rem/1 var(--font-sans); }
.bw-day-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.bw-day.has-slots .bw-day-dot { background: var(--orange); }
.bw-day:not(:disabled):hover { border-color: var(--orange-soft); }
.bw-day:disabled { border-style: dashed; background: transparent; opacity: .45; cursor: not-allowed; }
.bw-day.is-selected { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(42, 31, 26, .22); }
.bw-day.is-selected .bw-day-w { color: rgba(255, 255, 255, .72); }
.bw-day.is-selected .bw-day-dot { background: var(--orange-soft); }
.bw-day-month { flex: 0 0 auto; align-self: center; padding: 0 2px; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 .66rem var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.bw-days-nav { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: var(--shadow-md); cursor: pointer; }
.bw-days-nav:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .bw-days-wrap > .bw-days-nav { display: inline-flex; position: absolute; top: 32px; z-index: 2; }
  .bw-days-wrap .bw-days { padding-left: 52px; padding-right: 52px; }
  .bw-days-prev { left: 8px; } .bw-days-next { right: 8px; }
}
.bw-cal-head .bw-days-nav { display: inline-flex; width: 44px; height: 44px; box-shadow: none; background: var(--cream-deep); }

/* slots */
.bw-slots { min-height: 8px; }
.bw-slot-list { display: grid; gap: 8px; margin-bottom: 4px; }
.bw-slot { min-height: 54px; padding: 8px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 .35em; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); color: var(--text); font: 500 .94rem var(--font-sans); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s, transform .15s; }
.bw-slot:not(:disabled):hover { border-color: var(--orange-soft); }
.bw-slot:not(:disabled):active { transform: scale(.99); }
.bw-slot-t { color: var(--ink); font-weight: 800; }
.bw-slot-s { color: var(--success); font-weight: 600; }
.bw-slot.is-selected { border-color: var(--orange); background: #FFF3E6; box-shadow: 0 0 0 3px rgba(232, 116, 26, .18); }
.bw-slot.is-full { opacity: .5; cursor: not-allowed; }
.bw-slot.is-full .bw-slot-s { color: var(--text-muted); }

/* request-mode calendar */
.bw-cal { margin-bottom: 14px; }
.bw-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; color: var(--ink); }
.bw-cal-head strong { display: block; }
.bw-cal-head strong::first-letter { text-transform: uppercase; }
.bw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bw-cal-wd { padding: 4px 0; text-align: center; font: 600 .72rem var(--font-sans); color: var(--text-muted); text-transform: uppercase; }
.bw-cal-day { min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: 600 .92rem var(--font-sans); cursor: pointer; transition: background .15s, color .15s; }
.bw-cal-day:not(:disabled):hover { background: var(--cream-deep); }
.bw-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--line); }
.bw-cal-day.is-selected { background: var(--orange-btn); color: var(--white); box-shadow: 0 6px 14px rgba(232, 116, 26, .35); }
.bw-cal-day:disabled { opacity: .28; cursor: default; }
.bw-cal-day.is-blocked { opacity: .4; text-decoration: line-through; background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(42, 31, 26, .07) 5px 8px); }

/* inputs */
.bw-field { margin-bottom: 14px; }
.bw-field .bw-label { margin-bottom: 6px; }
.bw-input { display: block; width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font: 500 1rem var(--font-sans); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.bw-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232, 116, 26, .2); }
.bw-input.is-invalid { border-color: var(--error); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
textarea.bw-input { padding: 12px 14px; min-height: 92px; line-height: 1.5; resize: vertical; }

/* party counter + extras */
.bw-counter { display: inline-flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: var(--cream-deep); }
.bw-cnt-btn { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); color: var(--ink); font: 500 1.6rem/1 var(--font-sans); cursor: pointer; transition: transform .15s, opacity .2s; }
.bw-cnt-btn:not(:disabled):active { transform: scale(.92); }
.bw-cnt-btn:disabled { opacity: .35; cursor: default; }
.bw-count { min-width: 64px; text-align: center; font: 800 1.7rem var(--font-serif); color: var(--ink); }
.bw-cnt-hint { margin: 8px 2px 4px; }
.bw-price-note { margin: 0 2px 22px; font-size: .86rem; color: var(--text-muted); }
.bw-extras-l { margin-top: 4px; }
.bw-extras { display: grid; gap: 10px; }
.bw-extra { position: relative; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.bw-extra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bw-extra:hover { border-color: var(--orange-soft); }
.bw-extra-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bw-extra-t b { font-size: .95rem; line-height: 1.3; color: var(--ink); }
.bw-extra-p { font-size: .82rem; color: var(--text-muted); }
.bw-extra-check { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); color: transparent; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.bw-extra.is-on { border-color: var(--orange); background: #FFF3E6; box-shadow: 0 0 0 3px rgba(232, 116, 26, .14); }
.bw-extra.is-on .bw-extra-check { background: var(--orange-btn); border-color: var(--orange-btn); color: var(--white); transform: scale(1.08); }

/* review */
.bw-rv { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.bw-rv-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: start; padding: 10px 6px 10px 14px; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.45; }
.bw-rv-row:first-child { border-top: 0; }
.bw-rv-row dt { padding-top: 12px; font: 600 .76rem var(--font-sans); color: var(--text-muted); }
.bw-rv-row dd { margin: 0; padding-top: 12px; color: var(--ink); overflow-wrap: anywhere; }
.bw-rv-sub { display: block; font-size: .84rem; color: var(--text-muted); }
.bw-rv-line { display: block; }
.bw-edit { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--orange-deep); font: 600 .82rem var(--font-sans); cursor: pointer; }
.bw-edit:hover { text-decoration: underline; }
.bw-total { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-radius: 16px; background: var(--cream); color: var(--text); font-weight: 600; }
.bw-total strong { font: 800 1.55rem var(--font-serif); color: var(--ink); }
.bw-review-note { margin: 12px 2px 0; }

/* summary bar = primary button */
.bw-bar { flex: none; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(42, 31, 26, .05); }
.bw-bar[hidden] { display: none; }
.bw-sum { margin: 0 0 9px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 600 .84rem var(--font-sans); color: var(--text); }
.bw-bar-row { display: flex; gap: 10px; }
.bw-back { flex: 0 0 54px; height: 54px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); cursor: pointer; transition: background .2s; }
.bw-back[hidden] { display: none; }
.bw-back:hover { background: var(--cream-deep); }
.bw-go { flex: 1; min-height: 54px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--orange-btn); color: var(--white); font: 700 1.02rem var(--font-sans); cursor: pointer; box-shadow: 0 10px 22px rgba(232, 116, 26, .34); transition: transform .15s, background .2s, box-shadow .2s; }
.bw-go:hover { background: var(--orange-deep); }
.bw-go:active { transform: scale(.985); }
.bw-go:disabled { opacity: .7; cursor: progress; }
.bw-go.is-final { background: var(--ink); box-shadow: 0 10px 22px rgba(42, 31, 26, .3); }
.bw-go.is-final:hover { background: #000; }

/* confirmation */
.bw-confirm { text-align: center; padding: 28px 8px 12px; animation: bw-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.bw-confirm h3 { margin: 14px 0 8px; font: 700 1.4rem var(--font-serif); color: var(--ink); outline: none; }
.bw-confirm p { margin: 0 0 8px; }
.bw-confirm-icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: var(--white); box-shadow: 0 0 0 8px rgba(20, 131, 59, .14); }
.bw-ref { display: inline-block; padding: 8px 18px; border-radius: 999px; background: var(--cream-deep); font: 800 1.25rem var(--font-serif); letter-spacing: .06em; color: var(--ink); }

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

/* Van rule: live breakdown under the party counter and in the review */
.bw-van-note { margin: 6px 0 0; font-size: .88rem; min-height: 1.2em; }
.bw-van-breakdown { margin-top: 10px; }