/* Booking wizard styles */
.step-indicator {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
#booking-wizard .step {
    width: 40px;
    height: 40px;
    background-color: #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px;
    font-weight: bold;
}
.step-label { font-size: .85rem; color: var(--fa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#booking-wizard .step.active { background: linear-gradient(90deg, var(--fa-primary), var(--fa-secondary)); color: #fff; }
.calendar-day {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    transition: all 0.2s ease;
}
.calendar-day:hover {
    background-color: #e9ecef;
}
.calendar-day.selected { background-color: var(--fa-primary); color: #fff; }
/* Holiday style */
.calendar-day.holiday {
    background-color: #ffebee;
    color: #d32f2f;
    position: relative;
}
.calendar-day.holiday:hover {
    background-color: #ffcdd2;
}
.calendar-day.holiday::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #d32f2f;
}
.time-slot {
    padding: 8px 12px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
}
.time-slot:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
}
.time-slot.selected { background-color: var(--fa-primary); color: #fff; border-color: var(--fa-primary); }
.employee-card, .service-card {
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100%;
}
.employee-card:hover, .service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(2,8,23,.12);
}

/* Wizard compact mode for hero */
.wizard-compact .card { border: 1px solid #dbe7e2; border-radius: 14px; box-shadow: 0 12px 24px rgba(2,8,23,.06); }
.wizard-compact .card-body { padding: .6rem .85rem; }
.wizard-compact .card-title { font-size: 1rem; }
.wizard-compact .step { width: 32px; height: 32px; }
.wizard-compact .step-label { display: none; }
.wizard-compact .wizard-steps { display: none !important; }
.wizard-compact .calendar-day { width: 30px; height: 30px; }
.wizard-compact .table th, .wizard-compact .table td { padding: .25rem; }
.wizard-compact .btn { border-radius: .75rem; }
.wizard-compact .employee-card .rounded-circle { width: 40px !important; height: 40px !important; }
.wizard-compact .service-card h5 { font-size: 1rem; }
.wizard-compact .service-card .card-text { margin-bottom: .5rem; }

/* Brand on outline buttons only inside wizard */
#booking-wizard .btn-outline-primary { border-color: var(--fa-primary); color: var(--fa-primary); }
#booking-wizard .btn-outline-primary:hover { background-color: var(--fa-primary); color: #fff; }
#booking-wizard .service-card.border-primary,
#booking-wizard .employee-card.border-primary {
  border-color: var(--fa-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(45,122,106,.15) !important;
}

/* Form styles to match mint theme */
#booking-wizard .form-control,
#booking-wizard .form-select { border-color:#dbe7e2; border-radius:10px; }
#booking-wizard .form-control:focus,
#booking-wizard .form-select:focus { border-color: var(--fa-primary); box-shadow: 0 0 0 .2rem rgba(45,122,106,.12); }
#booking-wizard .btn-primary,
#booking-wizard .btn-success { background: var(--fa-primary); border:none; border-radius:999px; font-weight:700; }
#booking-wizard .btn-primary:hover,
#booking-wizard .btn-success:hover { filter:brightness(.95); }

/* Accessibility: focus-visible outlines for key interactive blocks */
#booking-wizard .service-card:focus-visible,
#booking-wizard .employee-card:focus-visible,
#booking-wizard .calendar-day.available:focus-visible,
#booking-wizard .time-slot:focus-visible,
#booking-wizard .btn:focus-visible {
  outline: 3px solid var(--fa-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem rgba(45,122,106,.15);
}

/* Step indicator via ARIA */
.step[aria-current="step"] { background: linear-gradient(90deg, var(--fa-primary), var(--fa-secondary)); color:#fff; }

/* Calendar day enhancements */
.calendar-day.available:hover { background-color: #e9f5f1; }
.calendar-day[aria-current="date"],
.calendar-day.selected { background-color: var(--fa-primary); color:#fff; }

/* Time slot toggle state */
.time-slot[aria-pressed="true"] { background-color: var(--fa-primary); color:#fff; border-color: var(--fa-primary); }

@media (prefers-reduced-motion: reduce) {
  .employee-card:hover, .service-card:hover { transform: none; }
}

/* =====================================================================
   Popup público de reserva (#bookingModal)
   Replica el modal "Nueva Cita" del panel (resources/views/livewire/
   appointment-form.blade.php + resources/css/styles.css) con los colores
   de la web de demo. Todo va bajo #bookingModal para no tocar el wizard
   inline de los heroes (velure/hero, landing/hero-booking).
   ===================================================================== */
#bookingModal {
  --bk-primary: #0f5f58;
  --bk-primary-dark: #0b4a45;
  --bk-primary-2: #0f766e;
  --bk-primary-light: #e3f2ef;
  --bk-primary-ring: rgba(15, 95, 88, .12);
  --bk-text: #111827;
  --bk-text-2: #6b7280;
  --bk-text-3: #9ca3af;
  --bk-border: #e5e7eb;
  --bk-border-input: #d1d5db;
  --bk-bg-input: #f9fafb;
  --bk-bg-hover: #f3f4f6;
  --bk-radius-md: 10px;
  --bk-radius-lg: 14px;
  --bk-radius-xl: 20px;
  --bk-pad: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bk-text);
}

/* ---- Caja del modal ---- */
#bookingModal .modal-dialog { max-width: 680px; }
#bookingModal .modal-content {
  border: 0;
  border-radius: var(--bk-radius-xl);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05);
}
#bookingModal .modal-header {
  padding: 20px var(--bk-pad);
  border-bottom: 1px solid var(--bk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#bookingModal .modal-title {
  margin: 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--bk-text);
}
#bookingModal .bk-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bk-text-3);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
#bookingModal .bk-modal-close:hover { background: var(--bk-bg-hover); color: var(--bk-text); }
#bookingModal .bk-modal-close:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 2px; }
#bookingModal .modal-body { padding: 0; }

/* El wizard va "desnudo": sin la tarjeta Bootstrap que lo envuelve */
#bookingModal #booking-wizard > .row { margin: 0; }
#bookingModal #booking-wizard > .row > [class*="col-"] { padding: 0; }
#bookingModal #booking-wizard > .row > [class*="col-"] > .card {
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  background: transparent;
}
#bookingModal #booking-wizard > .row > [class*="col-"] > .card > .card-body { padding: 0; }

/* ---- Stepper: círculos numerados unidos por líneas ---- */
#bookingModal .wizard-steps {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 !important;
  padding: 20px var(--bk-pad);
  border-bottom: 1px solid var(--bk-border);
  --bs-gutter-x: 0;
}
#bookingModal .wizard-steps > div {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
}
#bookingModal .wizard-steps > div:not(:last-child) { flex: 1 1 auto; }
#bookingModal .wizard-steps > div:not(:last-child)::after {
  content: '';
  flex: 1 1 auto;
  min-width: 16px;
  height: 2px;
  margin: 0 6px;
  background: var(--bk-border);
}
#bookingModal .step-indicator {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  height: auto;
  text-align: left;
}
#bookingModal #booking-wizard .step {
  width: 28px;
  height: 28px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--bk-border);
  background: #fff;
  color: var(--bk-text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: all .2s;
}
#bookingModal .step-label {
  font-size: 12px;
  line-height: 1.6;
  color: var(--bk-text-3);
  white-space: nowrap;
}
/* Paso actual y pasos ya completados (los anteriores al activo) */
#bookingModal #booking-wizard .step.active,
#bookingModal #booking-wizard .step[aria-current="step"],
#bookingModal #booking-wizard .wizard-steps > div:has(~ div .step.active) .step {
  background: var(--bk-primary);
  border-color: var(--bk-primary);
  color: #fff;
}
#bookingModal .step-indicator:has(.step.active) .step-label,
#bookingModal .wizard-steps > div:has(~ div .step.active) .step-label {
  color: var(--bk-text);
  font-weight: 500;
}

/* ---- Paneles de cada paso ---- */
/* display:block pisa el .booking-step {display:flex; column} de feature-pages.css
   (velure-demo); el JS sigue ocultando con style="display:none" en línea */
#bookingModal .booking-step {
  display: block;
  position: static;
  padding: var(--bk-pad) var(--bk-pad) 0;
  text-align: left;
}
#bookingModal .booking-step h4.card-title {
  margin: 0 0 16px !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--bk-text);
}
#bookingModal .booking-step h4.card-title:focus { outline: none; }

/* Pie con los botones: fijo abajo como el modal-footer del panel */
#bookingModal .wizard-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: var(--bk-pad) calc(var(--bk-pad) * -1) 0 !important;
  padding: 16px var(--bk-pad);
  border-top: 1px solid var(--bk-border);
  background: #fff;
}
#bookingModal .wizard-actions > .next-step,
#bookingModal .wizard-actions > [type="submit"] { margin-left: auto; }

/* ---- Botones (.btn / .btn-primary / .btn-secondary del panel) ---- */
#bookingModal .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  border-radius: var(--bk-radius-md);
  border: 1px solid transparent;
  box-shadow: none;
  transition: all .2s ease;
  white-space: nowrap;
}
#bookingModal .btn-primary-fisio,
#bookingModal #booking-wizard .btn-primary,
#bookingModal #booking-wizard .btn-success {
  background: var(--bk-primary);
  border-color: var(--bk-primary);
  color: #fff;
  border-radius: var(--bk-radius-md);
  font-weight: 500;
  filter: none;
}
#bookingModal .btn-primary-fisio:hover:not(:disabled),
#bookingModal #booking-wizard .btn-primary:hover,
#bookingModal #booking-wizard .btn-success:hover {
  background: var(--bk-primary-dark);
  border-color: var(--bk-primary-dark);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 95, 88, .3);
}
#bookingModal .btn-primary-fisio:disabled,
#bookingModal .btn-primary-fisio.disabled {
  background: var(--bk-primary);
  border-color: var(--bk-primary);
  color: #fff;
  opacity: .45;
}
#bookingModal .btn-secondary,
#bookingModal #booking-wizard .btn-outline-primary:not(.calendar-day):not(.time-slot) {
  background: var(--bk-bg-input);
  border-color: var(--bk-border);
  color: var(--bk-text);
}
#bookingModal .btn-secondary:hover,
#bookingModal #booking-wizard .btn-outline-primary:not(.calendar-day):not(.time-slot):hover {
  background: var(--bk-bg-hover);
  border-color: var(--bk-border);
  color: var(--bk-text);
}
#bookingModal #booking-wizard .btn:focus-visible {
  outline: 2px solid var(--bk-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--bk-primary-ring);
}

/* ---- Tarjetas de opción (tratamiento / especialista) = .wizard-card ---- */
#bookingModal #booking-step-1 > .row,
#bookingModal #employees-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
#bookingModal #booking-step-1 > .row > div,
#bookingModal #employees-container > div {
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}
#bookingModal #employees-container > .col-12 { grid-column: 1 / -1; }
#bookingModal .service-card,
#bookingModal .employee-card {
  border: 2px solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  background: #fff;
  color: var(--bk-text);
  box-shadow: none;
  transition: all .15s;
}
#bookingModal .service-card:hover,
#bookingModal .employee-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--bk-primary);
  background: var(--bk-bg-hover);
}
#bookingModal #booking-wizard .service-card.border,
#bookingModal #booking-wizard .employee-card.border {
  border: 2px solid var(--bk-primary) !important;
  background: var(--bk-primary-light);
  box-shadow: 0 0 0 1px var(--bk-primary) !important;
}
#bookingModal .service-card:focus-visible,
#bookingModal .employee-card:focus-visible {
  outline: 2px solid var(--bk-primary);
  outline-offset: 2px;
  box-shadow: none;
}
#bookingModal .service-card .card-body,
#bookingModal .employee-card .card-body { padding: 14px 16px; }
#bookingModal .service-card .card-body { display: flex; flex-direction: column; height: 100%; }
#bookingModal .service-card .card-title {
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--bk-text);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
#bookingModal .service-card .card-text {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--bk-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#bookingModal .service-card .card-body > .d-flex {
  justify-content: flex-start !important;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 12px;
  color: var(--bk-text-2);
}
#bookingModal .service-card .card-body > .d-flex .fa-clock { font-size: 11px; }
#bookingModal .service-card .card-body > .d-flex .fw-bold { color: var(--bk-text); font-weight: 600 !important; }

/* Especialista: avatar redondo + nombre, como en el panel */
#bookingModal .employee-card .card-body { gap: 12px; }
#bookingModal .employee-card .rounded-circle {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--bk-primary-2), var(--bk-primary)) !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}
#bookingModal .employee-card .flex-fill { min-width: 0; }
#bookingModal .employee-card h6 {
  margin: 0 !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--bk-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bookingModal .employee-card small { display: none; }

/* ---- Fecha y hora: dos columnas, chips como .wizard-time ---- */
#bookingModal #booking-step-3 > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  --bs-gutter-x: 0;
}
#bookingModal #booking-step-3 > .row > div { width: auto; padding: 0; }
#bookingModal #booking-step-3 .card {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0 !important;
}
#bookingModal #booking-step-3 .card-header {
  padding: 0 0 8px;
  border: 0;
  background: transparent;
}
#bookingModal #booking-step-3 .card-header h5 {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--bk-text);
}
#bookingModal #current-month-year::first-letter { text-transform: uppercase; }
#bookingModal #booking-step-3 .card-body { padding: 0; }
#bookingModal #prev-month,
#bookingModal #next-month {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--bk-border);
  border-radius: 8px;
  background: #fff;
  color: var(--bk-text-2);
  font-size: 11px;
}
#bookingModal #prev-month:hover,
#bookingModal #next-month:hover { border-color: var(--bk-primary); color: var(--bk-primary); background: #fff; }
#bookingModal #booking-step-3 .table-responsive { overflow: visible; }
#bookingModal #booking-step-3 .table { --bs-table-bg: transparent; margin: 0; table-layout: fixed; }
#bookingModal #booking-step-3 .table th {
  padding: 4px 0 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--bk-text-3);
}
#bookingModal #booking-step-3 .table td { padding: 3px 0; }
#bookingModal #booking-wizard .calendar-day {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--bk-radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: #d1d5db !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
}
#bookingModal #booking-wizard .calendar-day.btn-outline-primary {
  border-color: var(--bk-border);
  background: var(--bk-bg-input);
  color: var(--bk-text) !important;
}
#bookingModal #booking-wizard .calendar-day.btn-outline-primary:hover {
  border-color: var(--bk-primary);
  background: var(--bk-bg-input);
  color: var(--bk-primary) !important;
}
#bookingModal #booking-wizard .calendar-day.btn-primary,
#bookingModal #booking-wizard .calendar-day[aria-current="date"] {
  border-color: var(--bk-primary);
  background: var(--bk-primary);
  color: #fff !important;
}
/* booking-wizard.js añade btn-outline-primary a todos los días al elegir uno:
   los no disponibles (aria-disabled) deben seguir viéndose apagados */
#bookingModal #booking-wizard .calendar-day[aria-disabled="true"] {
  border-color: transparent;
  background: transparent;
  color: #d1d5db !important;
  cursor: default;
  pointer-events: none;
}
#bookingModal #booking-wizard .calendar-day.btn-warning {
  border-color: #fde68a;
  background: #fef3c7;
  color: #92400e !important;
}

#bookingModal #time-slots-container > p,
#bookingModal #time-slots-container > .text-muted {
  margin: 0;
  font-size: 13px;
  text-align: left !important;
  color: var(--bk-text-2) !important;
}
#bookingModal #time-slots-container > .row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
#bookingModal #time-slots-container > .row > div { flex: 0 0 auto; width: auto; padding: 0; margin: 0; }
#bookingModal #booking-wizard .time-slot {
  width: auto !important;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-md);
  background: var(--bk-bg-input);
  color: var(--bk-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  transform: none;
}
#bookingModal #booking-wizard .time-slot:hover,
#bookingModal #booking-wizard .time-slot.btn-primary:hover,
#bookingModal #booking-wizard .calendar-day.btn-primary:hover { box-shadow: none; }
#bookingModal #booking-wizard .time-slot:hover {
  border-color: var(--bk-primary);
  background: var(--bk-bg-input);
  color: var(--bk-primary);
}
#bookingModal #booking-wizard .time-slot.btn-primary,
#bookingModal #booking-wizard .time-slot[aria-pressed="true"] {
  border-color: var(--bk-primary);
  background: var(--bk-primary);
  color: #fff;
}

/* ---- Avisos (sin profesionales / sin horarios / errores) ---- */
#bookingModal #booking-wizard .alert {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
}
#bookingModal #booking-wizard .alert-warning { background: #fff7ed; border: 1px solid #f59e0b; color: #92400e; }
#bookingModal #booking-wizard .alert-danger { background: #fee2e2; border: 1px solid #ef4444; color: #991b1b; }
#bookingModal #employees-container .text-muted { margin: 0; font-size: 13px; color: var(--bk-text-2) !important; }

/* ---- Datos del paciente + resumen ---- */
#bookingModal #booking-step-4 > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  --bs-gutter-x: 0;
}
#bookingModal #booking-step-4 > .row > div { width: auto; padding: 0; }
#bookingModal #booking-step-4 .mb-3 { margin-bottom: 16px !important; }
#bookingModal #booking-step-4 .form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bk-text);
}
#bookingModal #booking-wizard .form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--bk-border-input);
  border-radius: var(--bk-radius-md);
  background: var(--bk-bg-input);
  color: var(--bk-text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: none;
  transition: all .2s ease;
}
#bookingModal #booking-wizard .form-control::placeholder { color: var(--bk-text-3); }
#bookingModal #booking-wizard .form-control:focus {
  outline: none;
  background: #fff;
  border-color: var(--bk-primary);
  box-shadow: 0 0 0 3px var(--bk-primary-ring);
}
#bookingModal #booking-wizard textarea.form-control { min-height: 100px; resize: vertical; }
#bookingModal #booking-step-4 .card {
  border: 0;
  border-radius: var(--bk-radius-lg);
  background: var(--bk-bg-input);
  padding: 20px;
}
#bookingModal #booking-step-4 .card-header { padding: 0 0 12px; border: 0; background: transparent; }
#bookingModal #booking-step-4 .card-header h5 {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--bk-text);
}
#bookingModal #booking-step-4 .card-body { padding: 0; }
#bookingModal #booking-step-4 .card-body > .mb-3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px !important;
  font-size: 13px;
}
#bookingModal #booking-step-4 .card-body > .mb-3 strong { font-weight: 400; color: var(--bk-text-2); flex-shrink: 0; }
#bookingModal #booking-step-4 .card-body > .mb-3 p { margin: 0; font-weight: 500; color: var(--bk-text); text-align: right; }
#bookingModal #booking-step-4 .card-body > .mb-3 p:empty::before { content: '-'; color: var(--bk-text-3); }

/* ---- Confirmación ---- */
#bookingModal #booking-step-5 { padding-bottom: var(--bk-pad); }
#bookingModal #booking-step-5 .mb-4:first-child > div {
  width: 56px !important;
  height: 56px !important;
  background: var(--bk-primary-light) !important;
}
#bookingModal #booking-step-5 .mb-4:first-child .fa-check { color: var(--bk-primary) !important; font-size: 24px !important; }
#bookingModal #booking-step-5 > .text-center > .mb-4:first-child { margin-bottom: 16px !important; }
#bookingModal #booking-step-5 h3 {
  margin-bottom: 6px !important;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bk-text) !important;
}
#bookingModal #booking-step-5 > .text-center > p.text-muted { font-size: 13px; color: var(--bk-text-2) !important; margin-bottom: 20px !important; }
#bookingModal #booking-step-5 .row { margin: 0; --bs-gutter-x: 0; }
#bookingModal #booking-step-5 .row > .col-md-8 { width: 100%; padding: 0; }
#bookingModal #booking-step-5 .row.mt-4 { margin-top: 12px !important; }
#bookingModal #booking-step-5 .card {
  border: 0 !important;
  border-radius: var(--bk-radius-lg);
  background: var(--bk-bg-input);
  padding: 20px;
  text-align: left;
}
#bookingModal #booking-step-5 .card-header {
  padding: 0 0 12px;
  border: 0;
  background: transparent !important;
  color: var(--bk-text) !important;
}
#bookingModal #booking-step-5 .card-header h5 { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0; }
#bookingModal #booking-step-5 .card-header i { color: var(--bk-primary); }
#bookingModal #booking-step-5 .card-body { padding: 0; }
#bookingModal #booking-step-5 .card-body .row { display: block; }
#bookingModal #booking-step-5 .card-body .row > div { width: 100%; padding: 0; }
#bookingModal #booking-step-5 .card-body .mb-3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px !important;
  font-size: 13px;
}
#bookingModal #booking-step-5 .card-body .mb-3 strong { font-weight: 400; color: var(--bk-text-2); flex-shrink: 0; }
#bookingModal #booking-step-5 .card-body .mb-3 > div { font-weight: 500; color: var(--bk-text); text-align: right; }
#bookingModal #confirmation-appointment-id { font-size: 13px !important; color: var(--bk-primary) !important; font-weight: 700 !important; }
#bookingModal #booking-step-5 .alert-info {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-lg);
  background: #fff;
  color: var(--bk-text-2);
  font-size: 13px;
  text-align: left;
}
#bookingModal #booking-step-5 .alert-info h6 { font-size: 13px; font-weight: 600; color: var(--bk-text); margin-bottom: 8px; }
#bookingModal #booking-step-5 .alert-info li { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }
#bookingModal #booking-step-5 .alert-info i { width: 16px; color: var(--bk-primary); flex-shrink: 0; }
#bookingModal #booking-step-5 .mt-4:not(.row):not(.pt-4) { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px !important; }
#bookingModal #booking-step-5 .mt-4 .me-3 { margin-right: 0 !important; }
#bookingModal #booking-step-5 .border-top { margin-top: 20px !important; padding-top: 16px !important; border-color: var(--bk-border) !important; }
#bookingModal #booking-step-5 .border-top h6 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
#bookingModal #booking-step-5 .border-top p { font-size: 12px; color: var(--bk-text-2) !important; }

/* ---- Rejillas según el ancho ---- */
@media (min-width: 480px) {
  #bookingModal #booking-step-1 > .row,
  #bookingModal #employees-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  #bookingModal #booking-step-1 > .row,
  #bookingModal #employees-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bookingModal #booking-step-3 > .row,
  #bookingModal #booking-step-4 > .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- Móvil ---- */
@media (max-width: 575.98px) {
  #bookingModal { --bk-pad: 16px; }
  #bookingModal .modal-dialog { margin: .5rem; }
  #bookingModal .modal-header { padding: 16px var(--bk-pad); }
  #bookingModal .wizard-steps { padding: 14px var(--bk-pad); }
  /* Solo se lee la etiqueta del paso actual; el resto, círculos */
  #bookingModal .step-label { display: none; }
  #bookingModal .step-indicator:has(.step.active) .step-label { display: block; }
  #bookingModal .wizard-steps > div:not(:last-child)::after { min-width: 8px; margin: 0 4px; }
  #bookingModal .wizard-actions .btn { flex: 1 1 0; }
  #bookingModal .wizard-actions > .next-step,
  #bookingModal .wizard-actions > [type="submit"] { margin-left: 0; }
  #bookingModal #booking-wizard .calendar-day { width: 34px; height: 34px; }
}