/* ============================================================
   OPERATION LASERTAG — BOOKING FORM STYLES
   ============================================================ */

.booking-wrap { max-width:1100px; margin:0 auto; padding:3rem 1.5rem 6rem; }
.booking-steps { display:flex; gap:0; margin-bottom:2.5rem; border:1px solid var(--dark-4); }
.step-item { flex:1; padding:0.875rem; text-align:center; border-right:1px solid var(--dark-4); position:relative; }
.step-item:last-child { border-right:none; }
.step-num  { font-family:var(--font-display); font-size:1.4rem; color:var(--grey); line-height:1; }
.step-label{ font-family:var(--font-cond); font-size:0.65rem; letter-spacing:0.15em; color:var(--grey); text-transform:uppercase; display:block; margin-top:0.2rem; }
.step-item.active .step-num  { color:var(--amber); }
.step-item.active .step-label{ color:var(--off-white); }
.step-item.done .step-num    { color:var(--green-glow); }
.step-item.done::after { content:'✓'; position:absolute; top:0.5rem; right:0.75rem; color:var(--green-glow); font-size:0.75rem; }

.booking-grid { display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }

.form-panel { background:var(--dark-3); border:1px solid var(--dark-4); }
.form-section { padding:1.75rem 2rem; border-bottom:1px solid var(--dark-4); }
.form-section:last-child { border-bottom:none; }
.form-section-title { font-family:var(--font-cond); font-size:0.7rem; letter-spacing:0.25em; color:var(--green-glow); text-transform:uppercase; margin-bottom:1.5rem; display:flex; align-items:center; gap:0.6rem; }
.form-section-title .snum { background:var(--green); color:#fff; font-size:0.65rem; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Sessions */
.sessions-list { display:flex; flex-direction:column; gap:0.6rem; }
.session-radio { display:none; }
.session-radio + .session-label {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.875rem 1.125rem; border:1px solid var(--dark-4);
  cursor:pointer; transition:border-color .2s, background .2s; background:var(--dark-2);
}
.session-radio:checked + .session-label { border-color:var(--green); background:rgba(45,90,27,.15); }
.session-radio:disabled + .session-label { opacity:.45; cursor:not-allowed; }
.sl-date { font-family:var(--font-cond); font-size:.9rem; font-weight:600; color:var(--off-white); }
.sl-time { font-family:var(--font-cond); font-size:.8rem; color:var(--grey-light); }
.spaces-badge { font-family:var(--font-cond); font-size:.7rem; letter-spacing:.08em; padding:.2rem .6rem; font-weight:700; }
.spaces-green { background:rgba(76,175,80,.15); color:var(--green-glow); border:1px solid rgba(76,175,80,.3); }
.spaces-amber { background:rgba(255,160,0,.15);  color:#FFA000; border:1px solid rgba(255,160,0,.3); }
.spaces-red   { background:rgba(192,57,43,.15);  color:#E74C3C; border:1px solid rgba(192,57,43,.3); }

/* Form fields */
.f-row  { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.f-row.single { grid-template-columns:1fr; }
.f-group { display:flex; flex-direction:column; gap:.35rem; }
.f-group label { font-family:var(--font-cond); font-size:.7rem; letter-spacing:.15em; color:var(--green-glow); text-transform:uppercase; }
.f-group input, .f-group select, .f-group textarea {
  background:var(--dark-2); border:1px solid var(--dark-4); color:var(--off-white);
  font-family:var(--font-body); font-size:.95rem; padding:.75rem 1rem; width:100%;
  transition:border-color .2s;
}
.f-group input:focus, .f-group select:focus, .f-group textarea:focus { outline:none; border-color:var(--green); }
.f-group textarea { resize:vertical; min-height:80px; }
.f-hint { font-size:.78rem; color:var(--grey); }
.f-group.err input, .f-group.err select { border-color:var(--red); }
.f-errmsg { font-size:.75rem; color:var(--red); display:none; }
.f-group.err .f-errmsg { display:block; }

/* Food options */
.food-block { border:1px solid var(--dark-4); background:var(--dark-2); margin-bottom:.75rem; }
.food-block:last-child { margin-bottom:0; }
.food-hdr { display:flex; align-items:center; gap:1rem; padding:1rem 1.125rem; cursor:pointer; }
.food-cb  { width:16px; height:16px; accent-color:var(--green); cursor:pointer; flex-shrink:0; }
.food-info-col { flex:1; }
.food-nm  { font-family:var(--font-cond); font-size:.95rem; font-weight:600; color:var(--off-white); }
.food-ds  { font-size:.8rem; color:var(--grey-light); margin-top:.1rem; }
.food-pr  { font-family:var(--font-display); font-size:1.25rem; color:var(--amber); white-space:nowrap; }
.food-pr small { font-family:var(--font-cond); font-size:.65rem; color:var(--grey-light); }
.food-qty { display:none; padding:0 1.125rem .875rem; align-items:center; gap:.75rem; flex-wrap:wrap; }
.food-qty.show { display:flex; }
.food-qty label { font-family:var(--font-cond); font-size:.7rem; letter-spacing:.1em; color:var(--green-glow); }
.food-qty input { width:80px; }
.food-qty .f-hint { align-self:center; }

/* Discount */
.disc-row { display:flex; gap:.75rem; }
.disc-row input { flex:1; text-transform:uppercase; }
.disc-btn { background:var(--dark-2); border:1px solid var(--dark-4); color:var(--off-white); font-family:var(--font-cond); font-size:.8rem; letter-spacing:.1em; padding:0 1.25rem; cursor:pointer; white-space:nowrap; transition:border-color .2s, color .2s; }
.disc-btn:hover { border-color:var(--green); color:var(--green-glow); }
.disc-msg { font-size:.8rem; margin-top:.4rem; min-height:1rem; }
.disc-msg.ok  { color:var(--green-glow); }
.disc-msg.bad { color:var(--red); }

/* Stripe card */
#card-element { background:var(--dark-2); border:1px solid var(--dark-4); padding:.85rem 1rem; }
#card-element.StripeElement--focus { border-color:var(--green); }
#card-element.StripeElement--invalid { border-color:var(--red); }
#card-errors { color:var(--red); font-size:.8rem; margin-top:.35rem; min-height:1rem; }
.pay-error { color:var(--red); font-size:.85rem; margin-top:.75rem; display:none; }

/* Pay button */
.pay-btn { width:100%; font-size:1.05rem; padding:1.1rem; position:relative; }
.pay-btn:disabled { opacity:.6; cursor:not-allowed; transform:none !important; }
.spinner { display:none; width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:8px; }
.pay-btn.loading .spinner { display:inline-block; }
.pay-btn.loading .btn-text { opacity:.7; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Price sidebar */
.price-summary { background:var(--dark-3); border:1px solid var(--dark-4); position:sticky; top:88px; }
.ps-title { font-family:var(--font-cond); font-size:.7rem; letter-spacing:.25em; color:var(--green-glow); padding:1.125rem 1.5rem; border-bottom:1px solid var(--dark-4); }
.ps-lines { padding:1.125rem 1.5rem; border-bottom:1px solid var(--dark-4); }
.ps-line { display:flex; justify-content:space-between; align-items:baseline; padding:.35rem 0; font-size:.88rem; color:var(--grey-light); }
.ps-line .amt { font-weight:600; color:var(--off-white); }
.ps-line.total { font-family:var(--font-cond); font-size:1rem; color:var(--off-white); border-top:1px solid var(--dark-4); margin-top:.5rem; padding-top:.75rem; }
.ps-line.total .amt { font-size:1.4rem; color:var(--amber); }
.ps-line.discount .amt { color:var(--green-glow); }
.ps-line.hidden { display:none; }
.ps-badges { padding:1.125rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; }
.ps-badge { display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--grey); }

/* Session summary box in payment step */
.session-box { background:var(--dark-2); border:1px solid var(--green); padding:.875rem 1.125rem; margin-bottom:1.5rem; }
.session-box p { margin:0; font-family:var(--font-cond); font-size:.85rem; color:var(--off-white); }

.step-nav { display:flex; justify-content:space-between; align-items:center; }
.step-nav-right { margin-left:auto; }

@media(max-width:860px) {
  .booking-grid { grid-template-columns:1fr; }
  .price-summary { position:static; }
  .f-row { grid-template-columns:1fr; }
  .booking-steps { display:none; }
}
@media(max-width:500px) {
  .form-section { padding:1.25rem 1.25rem; }
}