/* ============================================================
   Booking modal — visually mirrors the real internal admin
   appointment-booking component (resources/views/livewire/
   appointment-form.blade.php + public/css/styles.css): same
   radius scale, shadow depth, modal header/body/footer rhythm,
   step-circle indicator, card-style option tiles and form field
   treatment. Colors follow the demo clinic's own palette so the
   modal stays visually coherent with the rest of the page.
   Functional hooks (ids/classes read by public/js/booking-wizard.js)
   are left untouched — this file only restyles them.
   ============================================================ */

#bookingModal{ --bw-radius: var(--dc-radius-lg, 14px); }

#bookingModal .modal-content{
  border:none;
  border-radius:var(--dc-radius-xl,20px);
  box-shadow:0 24px 60px rgba(20,32,25,.28);
  overflow:hidden;
}
#bookingModal .modal-header{
  padding:20px 24px;
  border-bottom:1px solid var(--dc-border,#E7E1D6);
  background:linear-gradient(180deg, var(--dc-primary-lighter,#F3F8F4), #fff);
}
#bookingModal .modal-title{font-size:17px;font-weight:700;color:var(--dc-primary-dark,#234F39)}
#bookingModal .btn-close{opacity:.55;transition:opacity .15s ease}
#bookingModal .btn-close:hover{opacity:1}
#bookingModal .modal-body{padding:24px;background:var(--dc-bg,#FBF8F3)}

/* Wizard shell card sits flush inside the modal body */
#bookingModal #booking-wizard > .row{margin:0}
#bookingModal #booking-wizard .card{border:none;box-shadow:none;background:transparent}
#bookingModal #booking-wizard .card-body{padding:0}

/* Step indicator: numbered circles + connecting line, mirrors
   the internal wizard-step / wizard-step-num / wizard-step-line. */
#bookingModal .wizard-steps{padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--dc-border,#E7E1D6);position:relative}
#bookingModal .step-indicator{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
#bookingModal .step{
  width:30px;height:30px;border-radius:50%;
  background:#fff;color:var(--dc-muted,#5B6B5E);
  border:2px solid var(--dc-border,#E7E1D6);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;transition:all .2s ease;
}
#bookingModal .step.active,
#bookingModal .step[aria-current="step"]{
  background:var(--dc-primary,#2E6F4E);
  border-color:var(--dc-primary,#2E6F4E);
  color:#fff;
}
#bookingModal .step-label{font-size:11.5px;color:var(--dc-muted,#5B6B5E);white-space:nowrap}
#bookingModal .col-md-2 .step-indicator .step-label,
#bookingModal .col-md-3 .step-indicator .step-label{font-weight:500}

/* Section titles inside each step */
#bookingModal .booking-step .card-title{font-weight:700;color:var(--dc-text,#20281F)}

/* Selectable tiles: services / date presets share the same
   "wizard-card" treatment as the internal component. */
#bookingModal .service-card,
#bookingModal .employee-card{
  border:2px solid var(--dc-border,#E7E1D6) !important;
  border-radius:var(--bw-radius);
  background:#fff;
  box-shadow:none;
  transition:all .15s ease;
}
#bookingModal .service-card:hover,
#bookingModal .employee-card:hover{
  border-color:var(--dc-primary,#2E6F4E) !important;
  background:var(--dc-primary-lighter,#F3F8F4);
}
#bookingModal .service-card.border.border-primary,
#bookingModal .employee-card.border.border-primary{
  border-color:var(--dc-primary,#2E6F4E) !important;
  background:var(--dc-primary-light,#E7F1EA);
  box-shadow:0 0 0 1px var(--dc-primary,#2E6F4E);
}
#bookingModal .service-card .card-body,
#bookingModal .employee-card .card-body{padding:16px}
#bookingModal .service-card .card-title{font-size:14px;font-weight:700;margin-bottom:6px}
#bookingModal .service-card .card-text{font-size:12.5px;color:var(--dc-muted,#5B6B5E)}
#bookingModal .service-card .fw-bold{color:var(--dc-primary-dark,#234F39)}
#bookingModal .employee-card .bg-primary{background:var(--dc-primary,#2E6F4E) !important}

/* Calendar (step 3) */
#bookingModal .card-header{background:#fff;border-bottom:1px solid var(--dc-border,#E7E1D6);padding:12px 16px}
#bookingModal .card-header h5{font-weight:700;font-size:14px}
#bookingModal table.table-borderless th{font-size:11.5px;color:var(--dc-muted,#5B6B5E);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
#bookingModal .calendar-day{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;margin:0 auto;transition:all .15s ease;border:none;
}
#bookingModal .calendar-day.btn-outline-primary{background:#fff;border:1px solid var(--dc-border,#E7E1D6) !important;color:var(--dc-text,#20281F)}
#bookingModal .calendar-day.btn-outline-primary:hover{background:var(--dc-primary-lighter,#F3F8F4);border-color:var(--dc-primary,#2E6F4E) !important}
#bookingModal .calendar-day.btn-primary{background:var(--dc-primary,#2E6F4E) !important;border-color:var(--dc-primary,#2E6F4E) !important;color:#fff}
#bookingModal .calendar-day.btn-light{background:transparent;color:var(--dc-muted,#5B6B5E);opacity:.5}
#bookingModal .calendar-day.btn-warning{background:var(--dc-accent-light,#FBEAE0) !important;color:var(--dc-accent-dark,#C15F2C) !important}
#bookingModal #prev-month,
#bookingModal #next-month{border-radius:999px;border-color:var(--dc-border,#E7E1D6);color:var(--dc-primary,#2E6F4E)}
#bookingModal #prev-month:hover,
#bookingModal #next-month:hover{background:var(--dc-primary,#2E6F4E);border-color:var(--dc-primary,#2E6F4E);color:#fff}

/* Time slots */
#bookingModal .time-slot{
  border-radius:999px !important;
  font-weight:600;font-size:13px;padding:8px 12px !important;
  border:1px solid var(--dc-border,#E7E1D6) !important;
  color:var(--dc-text,#20281F);background:#fff;
}
#bookingModal .time-slot.btn-outline-primary:hover{border-color:var(--dc-primary,#2E6F4E) !important;color:var(--dc-primary,#2E6F4E)}
#bookingModal .time-slot.btn-primary{background:var(--dc-primary,#2E6F4E) !important;border-color:var(--dc-primary,#2E6F4E) !important;color:#fff}

/* Form fields (step 4 — client data), mirrors .form-input/.form-select */
#bookingModal .form-label{font-size:13px;font-weight:600;color:var(--dc-text,#20281F);margin-bottom:6px}
#bookingModal .form-control{
  padding:9px 12px;background:var(--dc-primary-lighter,#F3F8F4);
  border:1px solid var(--dc-border,#E7E1D6);border-radius:10px;
  font-size:13.5px;color:var(--dc-text,#20281F);transition:all .15s ease;
}
#bookingModal .form-control:focus{
  outline:none;border-color:var(--dc-primary,#2E6F4E);background:#fff;
  box-shadow:0 0 0 3px rgba(var(--dc-primary-rgb,46,111,78),.14);
}

/* Summary side-cards */
#bookingModal .card:has(> .card-header){border:1px solid var(--dc-border,#E7E1D6);border-radius:var(--bw-radius);box-shadow:var(--dc-shadow-sm,0 4px 14px rgba(32,40,31,.05));background:#fff}
#bookingModal #time-slots-container .card,
#bookingModal .card-header + .card-body{background:transparent}

/* Buttons */
#bookingModal .btn-secondary{
  background:var(--dc-primary-lighter,#F3F8F4);color:var(--dc-text,#20281F);
  border:1px solid var(--dc-border,#E7E1D6);border-radius:999px;font-weight:600;
}
#bookingModal .btn-secondary:hover{background:var(--dc-border,#E7E1D6);color:var(--dc-text,#20281F)}
#bookingModal .btn-primary-nutricionista{padding:.6rem 1.3rem}
#bookingModal .btn-primary-nutricionista:disabled,
#bookingModal .btn.next-step:disabled{opacity:.45;box-shadow:none;transform:none;cursor:not-allowed}
#bookingModal .btn-primary{background:var(--dc-primary,#2E6F4E);border-color:var(--dc-primary,#2E6F4E)}
#bookingModal .btn-primary:hover{background:var(--dc-primary-dark,#234F39);border-color:var(--dc-primary-dark,#234F39)}
#bookingModal .btn-outline-primary{color:var(--dc-primary,#2E6F4E);border-color:var(--dc-primary,#2E6F4E)}
#bookingModal .btn-outline-primary:hover{background:var(--dc-primary,#2E6F4E);border-color:var(--dc-primary,#2E6F4E)}

/* Confirmation step (5) */
#bookingModal .card.border-success{border-color:var(--dc-primary,#2E6F4E) !important;border-radius:var(--bw-radius)}
#bookingModal .card-header.bg-success{background:var(--dc-primary,#2E6F4E) !important}
#bookingModal .text-success{color:var(--dc-primary,#2E6F4E) !important}
#bookingModal .text-primary{color:var(--dc-primary,#2E6F4E) !important}
#bookingModal .alert-info{
  background:var(--dc-primary-lighter,#F3F8F4);border:1px solid var(--dc-border,#E7E1D6);
  color:var(--dc-text,#20281F);border-radius:var(--bw-radius);
}

/* Accessibility */
#bookingModal .service-card:focus-visible,
#bookingModal .employee-card:focus-visible,
#bookingModal .calendar-day:focus-visible,
#bookingModal .time-slot:focus-visible,
#bookingModal .btn:focus-visible{
  outline:3px solid var(--dc-primary,#2E6F4E);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  #bookingModal *{transition:none !important}
}

/* Compact horizontal step indicator on small screens (avoids a tall
   stacked list from Bootstrap's col-md-* falling back to block level). */
@media (max-width:575.98px){
  #bookingModal .wizard-steps{display:flex !important;flex-wrap:nowrap;overflow-x:auto;gap:.35rem;padding-bottom:10px}
  #bookingModal .wizard-steps > div{flex:0 0 auto;width:auto !important;padding:0 .3rem}
  #bookingModal .step-indicator{gap:3px}
  #bookingModal .step{width:24px;height:24px;font-size:10.5px}
  #bookingModal .step-label{display:none}
  #bookingModal .modal-body{padding:16px}
}