/* ============================================================
   booking.css — Booking Wizard Styles
   English Talk Club
   ============================================================ */

/* ── Step Dots ── */
.step-dot {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem;
  transition: all 0.4s ease; position: relative; z-index: 1;
}
.step-dot.active  { background: linear-gradient(135deg,#f97316,#fb923c); color: white; box-shadow: 0 4px 16px rgba(249,115,22,0.45); }
.step-dot.done    { background: #10b981; color: white; }
.step-dot.pending { background: #e2e8f0; color: #94a3b8; }

/* ── Step Connector ── */
.step-connector { flex: 1; height: 2px; background: #e2e8f0; transition: background 0.4s ease; }
.step-connector.done { background: linear-gradient(90deg, #10b981, #34d399); }

/* ── Step Label ── */
.step-label { font-size: 0.7rem; font-weight: 600; margin-top: 6px; text-align: center; white-space: nowrap; }

/* ── Select Cards ── */
.select-card { border: 2px solid #e2e8f0; border-radius: 16px; padding: 16px; cursor: pointer; transition: all 0.25s ease; background: white; }
.select-card:hover { border-color: #fb923c; box-shadow: 0 4px 20px rgba(249,115,22,0.15); }
.select-card.selected { border-color: #f97316; background: #fff7ed; box-shadow: 0 4px 20px rgba(249,115,22,0.2); }
.select-card .check-icon { display: none; }
.select-card.selected .check-icon { display: none; }
.select-card.location-closed { opacity: 0.5; cursor: not-allowed; border-color: #e2e8f0; background: #f8fafc; }
.select-card.location-closed:hover { border-color: #e2e8f0; box-shadow: none; }

/* ── Calendar ── */
.cal-day {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.cal-day:hover:not(.disabled):not(.empty) { background: #fff7ed; color: #f97316; }
.cal-day.selected { background: linear-gradient(135deg,#f97316,#fb923c); color: white; box-shadow: 0 3px 12px rgba(249,115,22,0.4); }
.cal-day.today    { font-weight: 700; color: #f97316; }
.cal-day.disabled { color: #cbd5e1; cursor: not-allowed; }
.cal-day.empty    { cursor: default; }

/* ── Time Slots ── */
.time-slot { padding: 8px 14px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; }
.time-slot:hover:not(.taken) { border-color: #fb923c; color: #f97316; }
.time-slot.selected { background: linear-gradient(135deg,#f97316,#fb923c); border-color: #f97316; color: white; }
.time-slot.taken { background: #f8fafc; color: #cbd5e1; cursor: not-allowed; border-color: #f1f5f9; }

/* ── Form Inputs ── */
.form-input { width: 100%; border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; font-size: 1rem; outline: none; transition: border-color 0.2s; }
@media (max-width: 768px) { .form-input { font-size: 16px; } }
.form-input:focus { border-color: #f97316; }
.form-input.error { border-color: #ef4444; }

/* ── Payment Cards ── */
.pay-card { border: 2px solid #e2e8f0; border-radius: 16px; padding: 24px; cursor: pointer; transition: all 0.25s; background: white; }
.pay-card:hover    { border-color: #fb923c; }
.pay-card.selected { border-color: #f97316; background: #fff7ed; }
.pay-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d1d5db; transition: all 0.2s; flex-shrink: 0; position: relative; }
.pay-card.selected .pay-radio { border-color: #f97316; background: #f97316; }
.pay-card.selected .pay-radio::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: white; }

/* ── Card Fields Slide ── */
#card-fields { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
#card-fields.open { max-height: 520px; }

/* ── Disabled Button ── */
.btn-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── Summary ── */
.summary-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.summary-item:last-child { border-bottom: none; }

/* ── Success Panel ── */
#success-screen.show { display: block !important; }

/* ── Mobile Booking Optimizations ── */
@media (max-width: 768px) {
  /* Compact step dots */
  .step-dot { width: 32px; height: 32px; font-size: 0.75rem; }
  .step-label { font-size: 0.6rem; }

  /* Compact cards */
  .select-card { padding: 12px; }
  .select-card h3 { font-size: 1rem !important; }
  .select-card ul { font-size: 0.8rem; }
  .select-card .font-display.text-2xl { font-size: 1.25rem !important; }

  /* Payment cards compact */
  .pay-card { padding: 14px; }

  /* Steps container compact */
  #step-1, #step-2, #step-3, #step-4, #step-5 { padding: 16px !important; }
  #step-1 h2, #step-2 h2, #step-3 h2, #step-4 h2, #step-5 h2 { font-size: 1.25rem !important; margin-bottom: 4px !important; }
  #step-1 > p, #step-2 > p, #step-3 > p, #step-4 > p, #step-5 > p { margin-bottom: 12px !important; font-size: 0.8rem !important; }

  /* Form inputs compact */
  #step-4 .grid { gap: 12px !important; }

  /* Calendar compact */
  .cal-day { width: 32px; height: 32px; font-size: 0.75rem; }

  /* Time slots compact */
  .time-slot { padding: 6px 10px; font-size: 0.75rem; }

  /* Hero section compact — step bar sits right below header */
  .pt-20.pb-5 { padding-top: 56px !important; padding-bottom: 6px !important; }
  .pt-20.pb-5 h1 { font-size: 1.4rem !important; margin-bottom: 2px !important; }
  .pt-20.pb-5 p { font-size: 0.75rem !important; margin-bottom: 0 !important; }
  .pt-20.pb-5 .section-accent { margin-bottom: 4px !important; }

  /* Wizard section compact on mobile */
  section.py-6.pb-12 { padding-top: 8px !important; }

  /* Step 5 buttons spacing */
  #step-5 .flex.justify-between { gap: 12px; }
}