/* glass/families/gift-overlay.css - the home page's gift-card window (#gk-modal) and the gift-card Stripe step, in the glass
   expression. Loaded at the END of the home page body (after the root's inline <style id="modal-css">), so equal specificity wins.
   Presentation only: ids, names, handlers and the Stripe element are untouched. Tokens come from core (--g-*). */

/* ---- 1. the form window ---------------------------------------------------------------------------------------------- */
#gk-modal .gk-modal-backdrop{background:#17212673;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#gk-modal .gk-modal-panel{width:min(580px,calc(100vw - 24px));max-height:min(90svh,920px);padding:34px 30px 30px;color:var(--g-ink);
  background:#ffffffeb;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-glass-edge);border-radius:var(--g-glass-radius);box-shadow:var(--g-shadow-float);overscroll-behavior:contain}
#gk-modal .gk-modal-panel .eyebrow{display:block;margin:0 0 8px;font:600 13px/1.2 var(--g-font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-soft)}
#gk-modal .gk-modal-panel h2{margin:0;padding-right:44px;font:500 clamp(30px,6vw,40px)/1.05 var(--g-font-display);letter-spacing:-.02em;text-transform:uppercase;color:var(--g-ink)}
#gk-modal .gk-modal-lede{margin:12px 0 22px;font-size:16.5px;line-height:1.55;color:var(--g-ink-soft)}
#gk-modal .gk-modal-close{top:14px;right:14px;width:44px;height:44px;border:1px solid var(--g-line);background:#fff;color:var(--g-ink)}
#gk-modal .gk-modal-close:hover{border-color:var(--g-ink);color:var(--g-ink)}
#gk-modal .gk-modal-close:focus-visible,#gk-modal :is(input,textarea):focus-visible,#gk-modal .gk-student:has(input:focus-visible),#gk-modal #gc-pay-btn:focus-visible{outline:3px solid var(--g-ink);outline-offset:2px}
#gk-modal .gk-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
#gk-modal .gk-field{margin-bottom:16px;min-width:0}
#gk-modal .gk-field label{margin:0 0 7px;font:600 15.5px/1.3 var(--g-font-ui);letter-spacing:0;text-transform:none;color:var(--g-ink)}
#gk-modal .gk-field label span{font-size:14px !important;color:var(--g-ink-soft)}
#gk-modal .gk-field :is(input,textarea){min-height:50px;padding:12px 14px;font:400 16px/1.4 var(--g-font-ui);color:var(--g-ink);background:#fff;border:1.5px solid #18272d70;border-radius:var(--g-control-radius)}
#gk-modal .gk-field textarea{min-height:84px}
#gk-modal .gk-field :is(input,textarea)::placeholder{color:#5b6a71;opacity:1}
#gk-modal .gk-field :is(input,textarea):focus{border-color:var(--g-ink)}
#gk-modal .gk-field .gk-hint{margin-top:6px;font-size:14px;line-height:1.4;color:var(--g-ink-soft)}
#gk-modal .gk-student{align-items:center;gap:12px;min-height:56px;padding:12px 14px;margin:2px 0 16px;border:1.5px solid #18272d70;border-radius:var(--g-control-radius);background:#fff}
#gk-modal .gk-student:hover,#gk-modal .gk-student:has(input:checked){border-color:var(--g-ink)}
#gk-modal .gk-student input[type=checkbox]{width:22px;height:22px;margin:0;accent-color:var(--g-ink)}
#gk-modal .gk-student-text{font-size:16px;line-height:1.4;color:var(--g-ink)}
#gk-modal .gk-student-price{color:var(--g-red);font-weight:600}
#gk-modal .gk-student-desc{font-size:14px;color:var(--g-ink-soft)}
#gk-modal .gk-total{padding:14px 0 16px;border-top:1px solid var(--g-line)}
#gk-modal .gk-total-label{font:600 15.5px/1.3 var(--g-font-ui);color:var(--g-ink-soft)}
#gk-modal .gk-total-price{font:500 34px/1 var(--g-font-display);letter-spacing:-.01em;color:var(--g-ink);font-variant-numeric:tabular-nums}
#gk-modal .gk-form-error{padding:12px 14px;border-radius:var(--g-control-radius);background:#bc1c2b14;border:1px solid #bc1c2b66;color:#8f1520;font-size:15px;line-height:1.45}
#gk-modal #gc-pay-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:0 22px;border:0;border-radius:var(--g-control-radius);background:var(--g-red);color:#fff;font:600 17px/1 var(--g-font-ui);cursor:pointer;box-shadow:none;transition:background-color .2s,transform .16s var(--g-ease-out)}
#gk-modal #gc-pay-btn:hover{background:var(--g-red-hover)}
#gk-modal #gc-pay-btn:active{transform:scale(.98)}
#gk-modal #gc-pay-btn[disabled]{opacity:.6;cursor:default}
#gk-modal #gc-pay-btn svg{width:18px;height:18px}
@media(max-width:620px){
  #gk-modal{place-items:end center}
  #gk-modal .gk-modal-panel{width:100vw;max-height:94svh;padding:26px 18px calc(24px + env(safe-area-inset-bottom));border-radius:var(--g-glass-radius) var(--g-glass-radius) 0 0}
  #gk-modal .gk-form-row{grid-template-columns:1fr}
}
@media(prefers-reduced-transparency:reduce){#gk-modal .gk-modal-panel{background:var(--g-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---- 2. the Stripe step (built by main.js: .booking-modal-overlay > .booking-modal-panel with #gc-stripe-element) ----------- */
.booking-modal-overlay:has(#gc-stripe-element){background:#17212673;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.booking-modal-overlay .booking-modal-panel:has(#gc-stripe-element){width:100%;max-width:480px !important;color:var(--g-ink);background:#f5f8fa;border-left:1px solid var(--g-glass-edge);border-radius:var(--g-glass-radius) 0 0 var(--g-glass-radius);box-shadow:var(--g-shadow-float)}
.booking-modal-panel:has(#gc-stripe-element) .booking-modal-header{padding:22px 22px 6px;background:transparent;border:0;border-radius:0}
.booking-modal-panel:has(#gc-stripe-element) .booking-modal-header>div{min-width:0}
.booking-modal-panel:has(#gc-stripe-element) .section-label{display:block;margin:0 0 6px;font:600 13px/1.2 var(--g-font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-soft)}
.booking-modal-panel:has(#gc-stripe-element) .booking-modal-header h2{margin:0;font:500 clamp(30px,6vw,38px)/1.05 var(--g-font-display);letter-spacing:-.02em;text-transform:uppercase;color:var(--g-ink)}
.booking-modal-panel:has(#gc-stripe-element) .booking-modal-close{position:static;width:44px;height:44px;margin:0;border:1px solid var(--g-line);border-radius:999px;background:#fff;color:var(--g-ink)}
.booking-modal-panel:has(#gc-stripe-element) .booking-modal-close:hover{transform:none;border-color:var(--g-ink)}
.booking-modal-panel:has(#gc-stripe-element) .booking-modal-body{padding:14px 22px calc(26px + env(safe-area-inset-bottom))}
.booking-modal-panel:has(#gc-stripe-element) .payment-summary{margin:0 0 18px;padding:16px 18px;background:#fff;border:1px solid var(--g-line);border-radius:14px}
.booking-modal-panel:has(#gc-stripe-element) .payment-summary-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:16px;color:var(--g-ink)}
.booking-modal-panel:has(#gc-stripe-element) .payment-summary-row strong{white-space:nowrap;flex:0 0 auto;font:600 22px/1.2 var(--g-font-ui);color:var(--g-ink);font-variant-numeric:tabular-nums}
.booking-modal-panel:has(#gc-stripe-element) #gc-stripe-element{margin-bottom:16px;padding:8px;min-height:120px;background:#fff;border:1px solid var(--g-line);border-radius:14px}
.booking-modal-panel:has(#gc-stripe-element) .booking-error{margin:0 0 14px;padding:12px 14px;border-radius:var(--g-control-radius);background:#bc1c2b14;border:1px solid #bc1c2b66;color:#8f1520;font-size:15px;line-height:1.45}
.booking-modal-panel:has(#gc-stripe-element) #gc-stripe-pay-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:0 22px;border:0;border-radius:var(--g-control-radius);background:var(--g-red);color:#fff;font:600 17px/1 var(--g-font-ui);cursor:pointer;box-shadow:none}
.booking-modal-panel:has(#gc-stripe-element) #gc-stripe-pay-btn:hover{background:var(--g-red-hover);transform:none}
.booking-modal-panel:has(#gc-stripe-element) #gc-stripe-pay-btn[disabled]{opacity:.6}
.booking-modal-panel:has(#gc-stripe-element) :is(.booking-modal-close,#gc-stripe-pay-btn):focus-visible{outline:3px solid var(--g-ink);outline-offset:2px}
@media(max-width:620px){
  .booking-modal-overlay .booking-modal-panel:has(#gc-stripe-element){max-width:100% !important;border-radius:0;border-left:0}
}
@media(prefers-reduced-motion:reduce){.booking-modal-overlay .booking-modal-panel:has(#gc-stripe-element){transition:none}}