/* ============================================================
   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: 20px; 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 {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #d1d5db;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease; flex-shrink: 0;
}
.select-card.selected .check-icon { background: #f97316; border-color: #f97316; color: white; }

/* ── Calendar ── */
.cal-day {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; 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; }