.appointment-picker { padding: 0; overflow: hidden; }
.appointment-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 28px; border-bottom: 1px solid var(--border); }
.appointment-picker-heading h2 { margin: 0; font-size: 24px; }
.appointment-picker-heading > span { padding: 7px 10px; border: 1px solid rgba(127,229,200,.3); border-radius: 999px; color: var(--mint); font: 600 10px/1 "JetBrains Mono",monospace; letter-spacing: .1em; }
.appointment-location { display: flex; align-items: center; gap: 15px; padding: 15px 28px; border-bottom: 1px solid var(--border); background: rgba(127,229,200,.045); }
.appointment-location span { flex: none; color: var(--mint); font: 600 10px/1 "JetBrains Mono",monospace; letter-spacing: .12em; }
.appointment-location a { color: #fff; font-size: 13px; font-weight: 600; text-underline-offset: 3px; }
.availability-loading { padding: 42px; color: var(--grey); text-align: center; }
.appointment-days { display: grid; max-height: 520px; overflow-y: auto; }
.appointment-day { display: grid; grid-template-columns: minmax(190px,.7fr) minmax(0,1.3fr); gap: 24px; padding: 22px 28px; border-bottom: 1px solid var(--border); }
.appointment-day h3 { margin: 5px 0; color: #fff; font-size: 15px; }
.appointment-slot-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.appointment-slot { border: 1px solid #3a3a42; border-radius: 9px; padding: 10px 8px; color: var(--mint); background: #09090a; font: 700 12px/1.2 "JetBrains Mono",monospace; cursor: pointer; }
.appointment-slot:hover { border-color: var(--mint); }
.appointment-slot.selected { border-color: var(--mint); color: #00110d; background: var(--mint); }
.appointment-confirm { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; background: #0a0a0b; }
.appointment-confirm p { margin: 0; }
.form-grid label { gap: 3px; }
.field-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(255,141,141,.14) !important; }
@media(max-width:720px) {
  .appointment-picker-heading,.appointment-confirm { align-items: stretch; flex-direction: column; }
  .appointment-location { align-items: flex-start; flex-direction: column; gap: 7px; }
  .appointment-day { grid-template-columns: 1fr; }
  .appointment-slot-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .appointment-confirm .primary { width: 100%; }
}