/* CDFC — appointment.css */
.appt-layout{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start;}
.appt-sidebar{position:sticky;top:96px;}
@media(max-width:960px){.appt-layout{grid-template-columns:1fr;}.appt-sidebar{position:static;}}

/* ─── MOBILE RESPONSIVE ─── */

@media (max-width: 960px) {
  .appt-layout { grid-template-columns: 1fr; }
  .appt-sidebar { position: static; }
  .step-bar .step { font-size: .72rem; padding: 12px 6px; }
  .step-bar .step .s-num { font-size: .9rem; }
  .consult-tiles { grid-template-columns: 1fr 1fr; }
  .dept-tiles { grid-template-columns: 1fr 1fr; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .step-bar .step span:not(.s-num) { display: none; }
  .step-bar .step { padding: 12px 0; }
  .consult-tiles { grid-template-columns: 1fr; }
  .dept-tiles { grid-template-columns: 1fr 1fr; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .calendar-strip { gap: 6px; }
  .cal-day { flex: 0 0 54px; padding: 8px 4px; }
  .info-strips { gap: 8px; }
}
@media (max-width: 380px) {
  .dept-tiles { grid-template-columns: 1fr; }
  .slot-grid { grid-template-columns: 1fr 1fr; }
  .step-actions { flex-direction: column; }
  .step-actions .btn { width: 100%; justify-content: center; }
}

/* Patient Type row: 2 columns normally, 3 once Patient ID appears (Existing Patient) */
#patientTypeRow.has-patient-id { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  #patientTypeRow.has-patient-id { grid-template-columns: 1fr; }
}

/* Hero bullet list — sits on the dark .page-hero gradient */
.appt-hero-bullets { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.appt-hero-bullets li { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.9); }
.appt-hero-bullets li svg { width: 16px; height: 16px; flex: none; color: var(--amber-400, #f3b224); }
@media (max-width: 640px) { .appt-hero-bullets { flex-direction: column; gap: 10px; } }