/* Booking pages (/pages/room, /gazebo, /vendor-window, /rink), used with js/book.js.
   Layout, hero, header, footer and buttons come from style.css + homepage.css
   (body.home-v2), same as every other page. This file only styles the
   picker card and reuses the facility-card / facility-pricing look from
   /pages/facilities. */
.bkp-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: 'book photo' 'book info'; gap: 24px 32px; align-items: start; max-width: 1200px; }
.bkp-layout > .bk { grid-area: book; }
.bkp-layout > .bkp-photo { grid-area: photo; }
.bkp-layout > .bkp-info { grid-area: info; }

/* Booking card */
.bk { min-width: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 28px; scroll-margin-top: 100px; }
.bk h2 { font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: -0.01em; color: var(--color-dark); margin: 0 0 4px; text-align: left; }
.bk-sub { margin: 0 0 24px; color: var(--color-text-light); font-size: 14.5px; }
.bk-step { margin: 0 0 26px; }
.bk-step h3 { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--color-dark); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.bk-step h3 i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--color-dark); color: #faf5ea; font-size: 12.5px; display: inline-grid; place-items: center; }

.bk-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.bk-day, .bk-chip { font-family: var(--font-body); border: 1.5px solid var(--color-border); background: #fff; color: var(--color-dark); border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.bk-day { flex: 0 0 62px; scroll-snap-align: start; padding: 8px 0; display: grid; gap: 1px; text-align: center; }
.bk-day span { font-size: 11.5px; color: var(--color-text-light); }
.bk-day b { font-family: var(--font-heading); font-size: 20px; line-height: 1.2; }
.bk-chip { padding: 9px 14px; font-size: 14.5px; font-weight: 600; min-width: 86px; }
.bk-day:hover:not(:disabled), .bk-chip:hover:not(:disabled) { border-color: var(--color-teal-dark); }
.bk-day.is-on, .bk-chip.is-on { background: var(--color-dark); border-color: var(--color-dark); color: #faf5ea; }
.bk-day.is-on span { color: rgba(250,245,234,.75); }
.bk-day:disabled, .bk-chip:disabled { opacity: .45; cursor: not-allowed; background: #f6f6f4; }
.bk-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-dur { display: grid; text-align: left; min-width: 130px; }
.bk-dur span { font-size: 12px; font-weight: 400; opacity: .75; }
.bk-empty { margin: 0; color: var(--color-text-light); font-size: 14.5px; }
.bk-other { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13.5px; color: var(--color-text-light); }
.bk-other input { font: inherit; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-dark); }

.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-fields label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--color-dark); }
.bk-fields label.full { grid-column: 1 / -1; }
.bk-fields input, .bk-fields textarea { font: inherit; font-weight: 400; font-size: 15px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-dark); width: 100%; box-sizing: border-box; background: #fff; }
.bk-fields input:focus, .bk-fields textarea:focus { outline: 2px solid var(--color-teal-dark); outline-offset: 0; border-color: transparent; }
.bk-fields textarea { min-height: 64px; resize: vertical; }
.bk-fields em { font-style: normal; font-weight: 400; color: var(--color-text-light); }
.bk-email-note { font-size: 13px; font-weight: 400; color: var(--color-teal-dark); min-height: 1em; }
.bk-agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 16px 0 0; color: var(--color-text); }
.bk-agree input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--color-dark); }
.bk-hp { position: absolute; left: -9999px; }

.bk-bar { position: sticky; bottom: 0; margin: 22px -28px -28px; padding: 16px 28px; background: #fff; border-top: 1px solid var(--color-border); border-radius: 0 0 8px 8px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bk-sum { display: grid; gap: 2px; }
.bk-sum-when { font-weight: 700; color: var(--color-dark); font-size: 15px; }
.bk-sum-price { font-family: var(--font-heading); font-size: 24px; font-weight: 800; color: var(--color-dark); }
.bk-sum-price s { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--color-text-light); }
.bk-sum-note { font-size: 12.5px; color: var(--color-text-light); }
.bk-bar .btn:disabled { opacity: .5; cursor: not-allowed; }
.bk-error { background: #fdeee9; color: var(--color-primary-hover); border-radius: 8px; padding: 12px 14px; margin: 16px 0 0; font-size: 14.5px; }
.bk-fine { font-size: 13px; color: var(--color-text-light); margin: 12px 0 0; }

.bk-done { text-align: center; padding: 12px 0; }
.bk-done-mark { width: 60px; height: 60px; border-radius: 50%; background: #2a8a4a; color: #faf5ea; font-size: 32px; font-weight: 800; display: grid; place-items: center; margin: 0 auto 14px; }
.bk-done h2 { text-align: center; }
.bk-done ol { text-align: left; max-width: 440px; margin: 20px auto 0; padding-left: 22px; line-height: 1.6; }

/* Right column: photo + price block (same look as the facilities cards) */
.bkp-info { display: grid; gap: 18px; }
.bkp-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bkp-photo .facility-pricing { margin: 14px; }
.facility-pricing { padding: 14px 16px; background: rgba(47, 157, 167, 0.06); border: 1px solid rgba(47, 157, 167, 0.22); border-radius: 8px; }
.facility-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.facility-price-row + .facility-price-row { border-top: 1px dashed rgba(29,55,73,0.18); }
.facility-price-tier { font-family: var(--font-body); color: var(--color-dark); font-weight: 600; font-size: 14px; }
.facility-price-amt { font-family: var(--font-heading); font-weight: 800; color: var(--color-dark); font-size: 15px; white-space: nowrap; font-feature-settings: "lnum","tnum"; }
.bkp-card { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 20px 22px; }
.bkp-card h3 { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin: 0 0 10px; color: var(--color-dark); text-align: left; }
.bkp-card ul { margin: 0; padding-left: 20px; list-style: disc; line-height: 1.6; font-size: 14.5px; }
.bkp-card li { margin: 4px 0; }
.bkp-card p { margin: 0; font-size: 14.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .bkp-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'photo' 'book' 'info'; }
  .bk { padding: 20px 16px; }
  .bk-bar { margin: 20px -16px -20px; padding: 14px 16px; }
  .bk-bar .btn { width: 100%; }
  .bk-fields { grid-template-columns: 1fr; }
}