/* Booking flow — layers on styles.css design system (vars defined there). */

.book-layout [hidden]{display:none !important}

.book-layout{display:grid; grid-template-columns:1fr 360px; gap:36px; align-items:start}
.book-steps{min-width:0} /* a wide child can't stretch the column past the screen */

/* Steps */
.book-step{background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 44px rgba(15,17,21,.05); margin-bottom:26px; opacity:.45; pointer-events:none; transition:opacity .25s ease}
.book-step.is-active{opacity:1; pointer-events:auto}
.book-step-head{display:flex; align-items:center; gap:14px; padding:24px 28px 0}
.book-step-head h2{font-size:24px; margin:0}
.book-step-num{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--green); color:#fff; font-family:var(--display); font-weight:800; font-size:16px; flex:none}
.book-step-body{padding:18px 28px 28px}
.book-hint{font-size:14px; color:var(--muted); margin:0 0 6px}
.book-step.is-active .book-hint-locked{display:none}
.book-error{color:#B3261E; font-size:14px; font-weight:600; margin:10px 0 0}
.book-ok{color:#1B7A3D; font-size:14px; font-weight:600; margin:10px 0 0}

/* Dates */
.book-dates{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:12px}
.book-dates label{display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--green-800)}
.book-dates input{padding:14px 16px; border:1px solid var(--line); border-radius:10px; font-family:var(--font); font-size:16px; background:var(--cloud)}
.book-dates input:focus{outline:2px solid var(--green); border-color:var(--green)}

/* Cart cards */
.book-carts{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.book-cart{position:relative; border:2px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; background:#fff; text-align:left; padding:0; font-family:var(--font); transition:border-color .15s ease, box-shadow .15s ease}
.book-cart:hover{border-color:var(--green-300)}
.book-cart.is-selected{border-color:var(--green); box-shadow:0 10px 30px rgba(45,95,162,.18)}

/* Cart photo gallery (swipe on touch, arrows on desktop) */
.book-gal{position:relative}
.book-gal-strip{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.book-gal-strip::-webkit-scrollbar{display:none}
.book-gal-strip img{flex:0 0 100%; width:100%; aspect-ratio:4/5; object-fit:cover; display:block; scroll-snap-align:start}
.book-gal-btn{position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:none; background:rgba(10,10,10,.55); color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 3px}
.book-gal-btn:hover{background:rgba(10,10,10,.8)}
.book-gal-btn.prev{left:10px}
.book-gal-btn.next{right:10px}
.book-gal-dots{position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; pointer-events:none}
.book-gal-dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55)}
.book-gal-dots span.on{background:#fff}
.book-cart-body{display:block; padding:16px 18px 18px}
.book-cart-tag{display:block; font-size:11px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--green-800)}
.book-cart-name{display:block; font-family:var(--display); font-weight:800; font-size:20px; margin:4px 0 6px; color:var(--ink)}
.book-cart-rate{display:block; font-size:15px; color:var(--muted)}
.book-cart-rate strong{font-family:var(--display); font-size:22px; color:var(--ink)}
.book-cart.is-unavailable{cursor:not-allowed; opacity:.55}
.book-cart.is-unavailable:hover{border-color:var(--line)}
.book-cart-badge{position:absolute; top:12px; left:12px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:6px 12px; border-radius:999px}
.book-cart.is-selected .book-cart-badge{background:var(--green)}

/* Add-ons */
.book-addons{display:flex; flex-direction:column; gap:12px; margin-bottom:20px}
.book-addon{display:flex; align-items:center; justify-content:space-between; gap:16px; border:2px solid var(--line); border-radius:14px; padding:16px 18px; transition:border-color .15s ease}
.book-addon-thumb{width:56px; height:56px; object-fit:cover; border-radius:10px; flex:none; cursor:pointer; border:1px solid var(--line)}
.book-addon-info{flex:1; min-width:0}
.book-addon.is-selected{border-color:var(--green)}
.book-addon-info strong{display:block; font-size:16px}
.book-addon-info span{font-size:14px; color:var(--muted)}
.book-addon-price{font-weight:700; white-space:nowrap; color:var(--green-800)}
.book-addon-qty{display:flex; align-items:center; gap:10px}
.book-addon-qty button{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:18px; font-weight:700; cursor:pointer; line-height:1; color:var(--ink)}
.book-addon-qty button:hover:not(:disabled){border-color:var(--green); color:var(--green)}
.book-addon-qty button:disabled{opacity:.35; cursor:not-allowed}
.book-addon-qty .qty{min-width:20px; text-align:center; font-weight:800; font-family:var(--display); font-size:17px}

/* Coupon */
.book-coupon label{display:block; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--green-800); margin-bottom:8px}
.book-coupon-row{display:flex; gap:10px}
.book-coupon-row input{flex:1; min-width:0; padding:12px 16px; border:1px solid var(--line); border-radius:10px; font-family:var(--font); font-size:15px; background:var(--cloud); text-transform:uppercase}
.book-coupon-row input:focus{outline:2px solid var(--green); border-color:var(--green)}

/* Detail fields */
.book-fields{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:8px}
.book-fields label{display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--green-800)}
.book-fields label.span2{grid-column:span 2}
.book-fields input{padding:13px 16px; border:1px solid var(--line); border-radius:10px; font-family:var(--font); font-size:16px; background:var(--cloud)}
.book-fields input:focus{outline:2px solid var(--green); border-color:var(--green)}
.book-subhead{font-size:16px; margin:22px 0 12px}

/* Out-of-area notice */
.book-outside{background:#FFF7E6; border:1px solid #F0D9A8; border-radius:14px; padding:18px 20px; margin:14px 0 4px; font-size:15px}
.book-outside p{margin:8px 0 0; color:var(--charcoal)}
.book-outside a{color:var(--green-800); font-weight:800}

/* Attestations */
.book-attest{display:flex; flex-direction:column; gap:12px}
.book-attest label{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; cursor:pointer}
.book-attest input{margin-top:3px; width:18px; height:18px; accent-color:var(--green); flex:none}

/* Review */
.book-policy{font-size:14px; color:var(--muted); background:var(--green-100); border-radius:10px; padding:12px 16px; margin:12px 0 18px}

/* Summary sidebar */
.book-summary{position:sticky; top:120px; background:var(--ink); color:#fff; border-radius:20px; padding:28px}
.book-summary h3{color:#fff; font-size:20px; margin:0 0 16px}
.book-summary-empty{color:#AEB4A6; font-size:15px; line-height:1.5}
.book-line{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:15px}
.book-line .lbl strong{display:block; font-weight:700}
.book-line .lbl span{font-size:13px; color:#AEB4A6}
.book-line .val{font-weight:700; white-space:nowrap}
.book-line.is-discount .val{color:#7FD79A}
.book-summary-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; font-weight:800}
.book-summary-total .amt{font-family:var(--display); font-size:32px; letter-spacing:-1px}
.book-summary-note{margin-top:16px; font-size:13px; color:#AEB4A6; line-height:1.5}

/* Special offer banner */
.book-offer{background:var(--ink); color:#fff; border-radius:20px; overflow:hidden; margin-bottom:26px}
.book-offer img{width:100%; aspect-ratio:16/7; object-fit:cover; display:block}
.book-offer-body{padding:22px 26px 26px}
.book-offer-tag{display:inline-block; background:var(--green); color:#fff; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:5px 12px; border-radius:999px; margin-bottom:10px}
.book-offer h2{color:#fff; font-size:24px; margin:0 0 6px}
.book-offer p{color:#C9CFD8; margin:4px 0; font-size:15px}
.book-offer .book-offer-price{font-family:var(--display); font-size:30px; font-weight:800; color:#fff; margin-top:8px}
.book-offer .book-offer-price span{font-size:15px; font-weight:500; color:#C9CFD8}
.book-offer-note{background:rgba(255,255,255,.08); border-radius:10px; padding:10px 14px; margin-top:12px}
.book-offer-error{background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; margin-bottom:26px; text-align:center}
.book-offer-error h2{margin:0 0 8px}

/* Agreement + signature — full-screen guided signing dialog (built by sign.js) */
html.sign-lock{overflow:hidden}
.sign-dlg{display:none; position:fixed; inset:0; z-index:1000; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--cloud); color:var(--ink)}
.sign-dlg[open]{display:flex; flex-direction:column}
.sign-dlg [hidden]{display:none !important}
.sign-bar{position:relative; flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px 18px; background:var(--navy-deep); color:#fff}
.sign-bar-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.sign-bar-text strong{font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:-.3px}
.sign-bar-text span{font-size:13.5px; color:var(--green-300)}
.sign-close{flex:none; width:40px; height:40px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:transparent; color:#fff; font-size:24px; line-height:1; cursor:pointer}
.sign-close:hover{border-color:var(--cyan); color:var(--cyan)}
.sign-progress{position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.15)}
.sign-progress span{display:block; width:0; height:100%; background:var(--cyan)}
.sign-scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; outline:none}
.sign-doc{max-width:800px; margin:24px auto; padding:36px 44px 40px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 44px rgba(15,17,21,.05)}
.sign-agreement{font-size:16px; line-height:1.65}
.sign-agreement h2{font-size:24px; margin:30px 0 12px}
.sign-agreement h2:first-child{margin-top:0}
.sign-agreement h3{font-size:17px; margin:24px 0 8px}
.sign-agreement p{margin:0 0 12px}
.sign-agreement ul{margin:0 0 12px 22px}
.sign-clause{position:relative; margin:26px -14px; padding:20px 18px 12px; border:2px solid var(--cyan); border-radius:14px; background:var(--green-100); scroll-margin-top:14px}
.sign-clause::before{content:"Your initials required"; position:absolute; top:-12px; left:16px; padding:3px 12px; border-radius:999px; background:var(--cyan); color:#06222d; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase}
.sign-clause.is-done{border-color:#1B7A3D; background:#fff}
.sign-clause.is-done::before{content:"Initialed \2713"; background:#1B7A3D; color:#fff}
.sign-clause h3:first-child{margin-top:4px}
.sign-initial{display:inline-flex; align-items:center; gap:10px; margin:6px 0 6px 8px; vertical-align:middle}
.sign-initial input{width:120px; padding:10px 12px; border:2px solid var(--navy); border-radius:10px; background:#fff; font-family:var(--font); font-size:18px; font-weight:800; letter-spacing:2px; text-transform:uppercase; text-align:center}
.sign-initial input::placeholder{font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted)}
.sign-initial input:focus{outline:2px solid var(--green); border-color:var(--green)}
.sign-initial input.is-invalid{border-color:#B3261E; outline-color:#B3261E}
.sign-initial-mark{padding:2px 14px; border-bottom:2px solid var(--ink); font-size:20px; letter-spacing:2px}
.sign-initial-change{border:0; background:none; font-family:inherit; font-size:13px; font-weight:700; color:var(--muted); text-decoration:underline; cursor:pointer}
.sign-block{margin-top:34px; padding-top:26px; border-top:2px solid var(--line); scroll-margin-top:14px}
.sign-block h3{font-size:22px; margin:0 0 14px}
.sign-block fieldset{min-width:0; margin:0; padding:0; border:0}
.sign-block .book-attest{margin-top:14px}
.sign-block .btn-block{margin-top:18px; white-space:normal}
.sign-block.is-locked fieldset{opacity:.4}
.sign-block.is-locked canvas{pointer-events:none}
.sign-lock-note{margin:0 0 16px; padding:12px 16px; border-radius:10px; background:var(--green-100); color:var(--navy); font-size:15px; font-weight:700}
.sign-foot{flex:none; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:68px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); font-size:14.5px; font-weight:700; color:var(--navy)}
.sign-clause.is-pulse,.sign-block.is-pulse{animation:sign-pulse .9s ease-out}
@keyframes sign-pulse{from{box-shadow:0 0 0 0 rgba(0,200,255,.55)} to{box-shadow:0 0 0 16px rgba(0,200,255,0)}}
@media (max-width:640px){
  .sign-doc{margin:0; padding:24px 18px 32px; border:0; border-radius:0; box-shadow:none}
  .sign-clause{margin:24px -8px; padding:20px 12px 10px}
  .sign-bar-text span{font-size:12.5px}
  .sign-foot{font-size:13px}
}
.book-sig-label{display:block; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--green-800); margin:14px 0 8px}
.book-sig-wrap{position:relative; border:1px dashed var(--green-300); border-radius:14px; background:#fff; overflow:hidden}
.book-sig-wrap canvas{display:block; width:100%; height:140px; touch-action:none; cursor:crosshair}
.book-sig-clear{position:absolute; top:10px; right:10px; border:1px solid var(--line); background:#fff; border-radius:999px; font-size:12px; font-weight:700; padding:5px 14px; cursor:pointer; color:var(--muted)}
.book-sig-clear:hover{color:var(--ink); border-color:var(--ink)}

/* Confirmation page */
.confirm-card{background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 44px rgba(15,17,21,.05); padding:32px; max-width:640px; margin:0 auto}
.confirm-card h3{font-size:22px; margin:0 0 18px}
.confirm-rows{display:flex; flex-direction:column}
.confirm-row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px}
.confirm-row span{color:var(--muted)}

@media (max-width: 900px){
  .book-layout{grid-template-columns:1fr}
  .book-summary{position:static; order:2}
  .book-carts{grid-template-columns:1fr}
  .book-fields{grid-template-columns:1fr}
  .book-fields label.span2{grid-column:span 1}
  .book-dates{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .book-step-head{padding:22px 20px 0}
  .book-step-body{padding:16px 20px 24px}
  .book-step .btn-block{white-space:normal}
  /* Add-ons: photo + description on the first line, price and quantity on the second */
  .book-addon{flex-wrap:wrap; gap:12px 14px; padding:14px}
  .book-addon-info{flex-basis:calc(100% - 70px)}
  .book-addon-info:first-child{flex-basis:100%}
  .book-addon-thumb{align-self:flex-start}
  .book-addon-price{margin-right:auto}
  /* The 300px Turnstile widget gets the card's full width, so it stays inside on 360px phones */
  #turnstile-box{display:flex; justify-content:center; margin-left:-20px; margin-right:-20px}
}

/* Extension summary key/value (extend page) */
.ext-kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:6px 0 0}
.ext-kv dt{color:#5C6473; font-size:13px}
.ext-kv dd{margin:0; font-weight:600}

/* Image lightbox / slider (booking flow: add-on thumbnails + cart zoom) */
body.book-lb-open{overflow:hidden}
.book-lb[hidden]{display:none}
.book-lb{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center}
.book-lb-backdrop{position:absolute; inset:0; background:rgba(10,12,15,.86)}
.book-lb-stage{position:relative; max-width:92vw; max-height:88vh}
.book-lb-img{display:block; max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.book-lb-btn{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.9); color:var(--ink); font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 4px}
.book-lb-btn:hover{background:#fff}
.book-lb-btn.prev{left:8px}
.book-lb-btn.next{right:8px}
.book-lb-btn[hidden]{display:none}
.book-lb-close{position:absolute; top:8px; right:8px; width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.92); color:var(--ink); font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 2px}
.book-lb-close:hover{background:#fff}
.book-lb-counter{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background:rgba(10,10,10,.6); color:#fff; padding:4px 12px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.5px}
.book-lb-counter[hidden]{display:none}
.book-gal-zoom{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:none; background:rgba(10,10,10,.55); color:#fff; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2}
.book-gal-zoom:hover{background:rgba(10,10,10,.85)}