/* ============================================================
   AQUA.MA — Booking Flow Stylesheet (Playful Theme)
   Covers: modal overlay, stepper, activity picker,
           date/time picker, participant selector, confirmation
   ============================================================ */

/* ── BOOKING TRIGGER SECTION ── */
.booking-section {
  padding: 8rem 4rem;
  background: var(--surface); border-top: 4px dashed var(--ocean);
  text-align: center;
}
.booking-section .section-title { margin-bottom: 1rem; }
.booking-section p {
  font-size: 1.1rem; line-height: 1.8; font-weight: 500;
  color: var(--text-muted); max-width: 520px; margin: 0 auto 2.5rem;
}
.booking-activities-preview {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin-bottom: 3rem;
}
.act-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--mist); border: 2px solid var(--gold); border-radius: 20px;
  padding: .6rem 1.2rem; font-size: .85rem; font-weight: bold; letter-spacing: .1em; text-transform:uppercase;
  color: var(--ocean); cursor: none;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.act-pill:hover {
  background: var(--gold); box-shadow: 4px 4px 0 var(--ocean); transform: translateY(-2px); color: var(--ocean);
}
.act-pill-icon { font-size: 1.2rem; }

/* ── MODAL OVERLAY ── */
.booking-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,51,153,.85); /* sam blue */
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  padding: 1.5rem;
}
.booking-overlay.open { opacity: 1; pointer-events: all; }

/* ── MODAL PANEL ── */
.booking-modal {
  background: var(--deep);
  border: 4px solid var(--ocean); border-radius: 30px;
  box-shadow: 12px 12px 0 var(--gold);
  width: 100%; max-width: 760px; max-height: 92vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(40px);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.booking-overlay.open .booking-modal { transform: translateY(0); }

/* scrollbar */
.booking-modal::-webkit-scrollbar       { width: 8px; }
.booking-modal::-webkit-scrollbar-track { background: var(--surface); border-radius: 4px; }
.booking-modal::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; border: 2px solid var(--ocean); }

/* ── MODAL HEADER ── */
.modal-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem 2rem;
  background: var(--surface);
  border-bottom: 4px solid var(--ocean);
}
.modal-title {
  font-family: var(--font-display); font-size: 2rem;
  letter-spacing: .08em; color: var(--ocean);
}
.modal-close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--deep); border: 2px solid var(--ocean); box-shadow: 2px 2px 0 var(--accent);
  color: var(--ocean); font-size: 1.2rem; cursor: none; font-weight: bold;
  transition: transform .2s, box-shadow .2s;
}
.modal-close:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--coral); background: var(--surface); }

/* ── STEPPER ── */
.stepper {
  display: flex; padding: 1.4rem 2rem;
  border-bottom: 2px dashed var(--ocean); background: var(--deep);
  gap: 0; overflow-x: auto;
}
.step {
  display: flex; align-items: center; flex: 1; min-width: 0;
}
.step-num {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: bold; font-family: var(--font-display);
  background: var(--surface); border: 2px solid var(--text-muted);
  color: var(--text-muted);
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.step.active   .step-num { background: var(--gold); border-color: var(--ocean); color: var(--ocean); transform: scale(1.1); box-shadow: 2px 2px 0 var(--accent); }
.step.done     .step-num { background: var(--accent); border-color: var(--ocean); color: var(--surface); }
.step-label {
  font-size: .75rem; font-weight: bold; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-left: .6rem; white-space: nowrap;
  transition: color .3s;
}
.step.active .step-label { color: var(--ocean); }
.step.done   .step-label { color: var(--ocean); }
.step-connector {
  flex: 1; height: 3px; min-width: 16px; max-width: 40px; border-radius: 2px;
  background: rgba(0,51,153,.2); margin: 0 .6rem;
  transition: background .3s;
}
.step.done + .step .step-connector,
.step-connector.done { background: var(--accent); }

/* ── STEP PANELS ── */
.step-panel { display: none; padding: 2.5rem 2rem; }
.step-panel.active { display: block; }

.step-heading {
  font-family: var(--font-display); font-size: 2.5rem; color: var(--ocean); text-shadow: 2px 2px 0 var(--surface);
  margin-bottom: .4rem; letter-spacing: .05em;
}
.step-sub {
  font-size: 1rem; color: var(--text-muted); margin-bottom: 1.8rem; font-weight: 500;
}

/* ── STEP 1: ACTIVITY PICKER ── */
.activity-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem;
}
.activity-card {
  background: var(--surface); border: 3px solid var(--ocean); border-radius: 20px;
  padding: 1.5rem 1.2rem; cursor: none;
  position: relative; overflow: hidden; box-shadow: 4px 4px 0 var(--gold);
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s; text-align: center;
}
.activity-card::after { display: none; }
.activity-card:hover             { transform: translateY(-4px); box-shadow: 4px 8px 0 var(--accent); }
.activity-card.selected          { border-color: var(--accent); background: var(--mist); box-shadow: 4px 4px 0 var(--ocean); transform: translateY(2px); }
.activity-card-icon  { font-size: 3rem; margin-bottom: 1rem; display: block; }
.activity-card-name  { font-family: var(--font-display); font-size: 1.8rem; color: var(--ocean); line-height: 1; }
.activity-card-desc  { font-size: .85rem; color: var(--text-muted); margin-top: .6rem; line-height: 1.4; font-weight: 500;}
.activity-card-price {
  display: inline-block; margin-top: 1rem; padding: 0.3rem 0.8rem; background: var(--gold); border-radius: 12px; border: 2px solid var(--ocean);
  font-size: .8rem; font-weight: bold; letter-spacing: .1em; color: var(--ocean);
}
.activity-card-check {
  position: absolute; top: .8rem; right: .8rem;
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ocean); box-shadow: 2px 2px 0 var(--ocean);
  background: var(--coral); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--surface); font-weight: 700;
  opacity: 0; transform: scale(.5);
  transition: opacity .25s, transform .25s;
}
.activity-card.selected .activity-card-check { opacity: 1; transform: scale(1) rotate(10deg); }

/* ── STEP 2: DATE & TIME ── */
.datetime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

/* Calendar */
.calendar { background: var(--surface); border: 3px solid var(--ocean); padding: 1.5rem; border-radius: 20px; box-shadow: 6px 6px 0 var(--gold); }
.cal-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;
}
.cal-title { font-family: var(--font-display); font-size: 1.6rem; color: var(--ocean); letter-spacing: .05em; }
.cal-nav {
  background: var(--deep); border: 2px solid var(--ocean); border-radius: 50%;
  color: var(--ocean); width: 36px; height: 36px; box-shadow: 2px 2px 0 var(--accent);
  display: flex; align-items: center; justify-content: center;
  cursor: none; font-size: 1.2rem; font-weight: bold; transition: transform .2s, box-shadow .2s;
}
.cal-nav:hover { transform: translateY(-2px); box-shadow: 2px 4px 0 var(--coral); background: var(--surface); }
.cal-grid     { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal-day-name { font-size: .75rem; font-weight: bold; letter-spacing: .1em; text-align: center; color: var(--ocean); padding: .5rem 0; }
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: bold; color: var(--ocean);
  cursor: none; border-radius: 12px; border: 2px solid transparent;
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.cal-day:not(.empty):not(.past):hover { background: var(--gold); transform: scale(1.1); border-color: var(--ocean); }
.cal-day.today   { color: var(--coral); font-weight: 900; background: var(--mist); border-color: var(--coral); }
.cal-day.selected { background: var(--accent); color: var(--surface); font-weight: 900; border-color: var(--ocean); transform: scale(1.1); box-shadow: 2px 2px 0 var(--ocean); }
.cal-day.past    { opacity: .25; pointer-events: none; }
.cal-day.empty   { pointer-events: none; }

/* Time slots */
.time-slots { display: flex; flex-direction: column; gap: 1rem; }
.time-label { font-size: .8rem; font-weight: bold; letter-spacing: .15em; text-transform: uppercase; color: var(--ocean); margin-bottom: .4rem; }
.time-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }
.time-slot {
  padding: .8rem .4rem; text-align: center; border-radius: 12px; font-weight: bold;
  background: var(--surface); border: 2px solid var(--ocean); box-shadow: 3px 3px 0 var(--mist);
  font-size: .9rem; color: var(--ocean);
  cursor: none; transition: transform .2s, box-shadow .2s, background .2s;
}
.time-slot:hover     { transform: translateY(-2px); box-shadow: 3px 5px 0 var(--gold); background: var(--mist); }
.time-slot.selected  { background: var(--accent); border-color: var(--ocean); box-shadow: 3px 3px 0 var(--ocean); color: var(--surface); transform: translateY(2px); }
.time-slot.unavail   { opacity: .4; pointer-events: none; background: #e0e0e0; border-color: #a0a0a0; box-shadow: none; text-decoration: line-through; }

/* ── STEP 3: PARTICIPANTS ── */
.participants-section { display: flex; flex-direction: column; gap: 1.5rem; }
.participant-row {
  display: flex; align-items: center; justify-content: space-between; border-radius: 20px;
  padding: 1.5rem; background: var(--surface); border: 3px solid var(--ocean); box-shadow: 6px 6px 0 var(--gold);
}
.participant-info-label { font-size: 1.1rem; font-weight: bold; color: var(--ocean); }
.participant-info-desc  { font-size: .85rem; font-weight: 500; color: var(--text-muted); margin-top: .4rem; }
.counter {
  display: flex; align-items: center; gap: 1rem;
}
.counter-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--deep); border: 2px solid var(--ocean); box-shadow: 2px 2px 0 var(--accent);
  color: var(--ocean); font-size: 1.5rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  cursor: none; transition: transform .2s, box-shadow .2s;
}
.counter-btn:hover { transform: translateY(-2px); box-shadow: 2px 4px 0 var(--coral); background: var(--surface); }
.counter-val {
  font-family: var(--font-display); font-size: 2.5rem; color: var(--ocean);
  min-width: 32px; text-align: center; line-height: 1; text-shadow: 2px 2px 0 var(--gold);
}
.participants-note {
  font-size: .9rem; font-weight: 500; color: var(--ocean);
  padding: 1rem 1.2rem; background: var(--mist); border-radius: 12px;
  border-left: 4px solid var(--gold); margin-top: 1rem;
}

/* ── STEP 4: CONTACT DETAILS ── */
.booking-form { display: flex; flex-direction: column; gap: 1.5rem; }
.booking-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* ── STEP 5: CONFIRMATION ── */
.confirmation { text-align: center; padding: 2rem 0; }
.confirm-icon {
  font-size: 5rem; display: block; margin: 0 auto 1.5rem;
  animation: pop-in .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pop-in { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.confirm-title {
  font-family: var(--font-display); font-size: 3.5rem; text-shadow: 3px 3px 0 var(--gold);
  color: var(--ocean); margin-bottom: 1rem;
}
.confirm-sub { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2.5rem; font-weight: 500; }
.confirm-summary {
  text-align: left; background: var(--surface); border-radius: 20px;
  border: 4px solid var(--ocean); padding: 2rem; box-shadow: 8px 8px 0 var(--mist);
  display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2rem;
}
.confirm-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 1rem; font-weight: bold; border-bottom: 2px dashed rgba(0,51,153,0.1); padding-bottom: 0.5rem;
}
.confirm-row:last-of-type { border-bottom: none; }
.confirm-row-label { color: var(--text-muted); }
.confirm-row-val   { color: var(--ocean); font-weight: 900; text-align: right; }
.confirm-total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1.5rem; border-top: 4px solid var(--ocean);
  font-size: 1.2rem;
}
.confirm-total-label { color: var(--ocean); font-weight: 900; }
.confirm-total-price { font-family: var(--font-display); font-size: 3rem; color: var(--coral); text-shadow: 2px 2px 0 var(--ocean); }
.confirm-note {
  font-size: .85rem; font-weight: bold; color: var(--ocean); margin-top: 1.5rem;
  padding: 1rem 1.2rem; background: var(--mist); border-radius: 12px;
  border: 2px dashed var(--accent);
}

/* ── MODAL FOOTER (navigation buttons) ── */
.modal-footer {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 2rem;
  background: var(--surface);
  border-top: 4px solid var(--ocean);
}
.modal-progress {
  font-size: .85rem; font-weight: bold; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); padding: 0.5rem 1rem; background: var(--deep); border-radius: 20px; border: 2px solid var(--ocean);
}
.modal-nav { display: flex; gap: 1rem; }

/* validation error */
.field-error {
  font-size: .8rem; font-weight: bold; color: var(--coral); margin-top: .4rem; margin-left: 0.5rem;
  display: none;
}
.form-field.invalid .field-error    { display: block; }
.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea { border-color: var(--coral); background: rgba(255,0,0,0.05); }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .booking-modal    { max-height: 98vh; border-width: 2px; border-radius: 12px; }
  .datetime-grid    { grid-template-columns: 1fr; }
  .activity-grid    { grid-template-columns: 1fr 1fr; }
  .booking-section  { padding: 5rem 1.5rem; }
  .time-grid        { grid-template-columns: repeat(4,1fr); }
  .booking-form .form-row { grid-template-columns: 1fr; }
  .modal-header     { padding: 1.2rem 1.5rem; }
  .stepper          { padding: 1rem 1.2rem; }
  .step-panel       { padding: 2rem 1.5rem; }
  .modal-footer     { padding: 1.2rem 1.5rem; }
}