/* ============================================================
   Fix My Appointment — Forms, steps & wizards (forms.css)
   ============================================================ */

.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  color: var(--ink-900); margin-bottom: 7px;
}
.form-label .req { color: var(--red-600); }
.form-hint { font-size: 0.8rem; color: var(--ink-400); margin-top: 5px; }
.form-error { font-size: 0.8rem; color: var(--red-600); margin-top: 5px; display: none; }
.form-group.invalid .form-error { display: block; }
.form-group.invalid .form-control { border-color: var(--red-600); }

.form-control {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  font-family: var(--font-body); font-size: 0.96rem; color: var(--ink-900); background: var(--surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.form-control:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--teal-100); }
.form-control:disabled, .form-control[readonly] { background: #F0F4F3; color: var(--ink-400); cursor: not-allowed; }
textarea.form-control { min-height: 96px; resize: vertical; }
select.form-control { appearance: auto; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* Checkboxes / radios */
.check-group { display: flex; flex-wrap: wrap; gap: 10px; }
.check-pill {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 999px; padding: 9px 16px;
  font-size: 0.9rem; background: var(--surface); transition: all 0.12s ease; user-select: none;
}
.check-pill input { accent-color: var(--teal-600); }
.check-pill:has(input:checked) { border-color: var(--teal-600); background: var(--teal-050); color: var(--teal-700); font-weight: 600; }

/* ---------- Time slot builder (Component: TimeSlotBuilder) ----------
   Replaces free-typed "10:00 AM, 10:30 AM" comma lists with two toggleable
   clinic sessions (native <input type="time"> pickers) + a slot-duration
   step; the actual comma-separated list still gets written into a hidden
   input named "timeSlots" so nothing downstream needs to change. */
.timeslot-builder {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg);
}
.timeslot-session { display: flex; flex-direction: column; gap: 8px; }
.timeslot-range { display: flex; gap: 10px; }
.timeslot-range label {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; font-weight: 600; color: var(--ink-400);
}
.timeslot-range input[type="time"] {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 8px;
  font-size: 0.9rem; font-family: var(--font-body); background: var(--surface);
}
@media (max-width: 720px) {
  .timeslot-builder { grid-template-columns: 1fr; }
}

/* ---------- Wizard progress (Component: Progress_ClinicRegistration) ---------- */
.wizard-progress { display: flex; gap: 0; margin: 26px 0 34px; counter-reset: wstep; }
.wizard-step { flex: 1; text-align: center; position: relative; }
.wizard-step::before {
  counter-increment: wstep; content: counter(wstep);
  display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 8px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--border);
  font-family: var(--font-display); font-weight: 700; color: var(--ink-400); position: relative; z-index: 2;
}
.wizard-step::after {
  content: ""; position: absolute; top: 19px; left: 50%; width: 100%; height: 2px;
  background: var(--border); z-index: 1;
}
.wizard-step:last-child::after { display: none; }
.wizard-step span { font-size: 0.76rem; color: var(--ink-400); font-weight: 600; display: block; }
.wizard-step.active::before { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.wizard-step.active span { color: var(--teal-700); }
.wizard-step.done::before { border-color: var(--green-600); background: var(--green-600); color: #fff; content: "✓"; }
.wizard-step.done::after { background: var(--green-600); }

.wizard-panel { display: none; }
.wizard-panel.active { display: block; animation: panelIn 0.25s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }

.form-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 34px; max-width: 760px; margin: 0 auto;
}

/* ---------- OTP inputs (Component: Input_OtpGroup) ---------- */
.otp-inputs { display: flex; gap: 10px; justify-content: flex-start; margin: 12px 0; }
.otp-inputs input {
  width: 48px; height: 56px; text-align: center; font-size: 1.4rem; font-family: var(--font-display);
  font-weight: 700; border: 1.5px solid var(--border); border-radius: 10px; color: var(--ink-900);
}
.otp-inputs input:focus { outline: none; border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--teal-100); }
.otp-timer { font-size: 0.86rem; color: var(--ink-400); }
.otp-timer b { color: var(--saffron-600); font-variant-numeric: tabular-nums; }

/* ---------- Verification status lines ---------- */
.verify-line {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px;
  font-size: 0.92rem; font-weight: 600; margin-top: 10px;
}
.verify-line.ok { background: var(--green-100); color: var(--green-600); }
.verify-line.fail { background: var(--red-100); color: var(--red-600); }
.verify-line.partial { background: var(--amber-100); color: var(--amber-600); }
.verify-line .tick {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: currentColor; flex: none;
}
.verify-line .tick::after { content: "✓"; color: #fff; font-size: 0.75rem; }
.verify-line.fail .tick::after { content: "✕"; }

/* Google fetched result box */
.google-result {
  border: 1.5px dashed var(--teal-600); border-radius: 12px; padding: 16px; margin-top: 14px;
  background: var(--teal-050); font-size: 0.92rem;
}

/* Upload dropzone (Component: Upload_Collateral) */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 34px; text-align: center;
  color: var(--ink-400); cursor: pointer; transition: all 0.15s ease; background: var(--surface);
}
.dropzone:hover, .dropzone.drag { border-color: var(--teal-600); background: var(--teal-050); }
.dropzone input { display: none; }
.upload-preview { max-height: 180px; border-radius: 10px; margin-top: 14px; box-shadow: var(--shadow-sm); }

/* Declaration box */
.declaration-box {
  background: var(--teal-050); border: 1px solid var(--teal-100); border-radius: var(--radius);
  padding: 20px; font-size: 0.92rem; line-height: 1.7; color: var(--ink-600);
}
.declaration-box b { color: var(--ink-900); }

/* Coupon / payment */
.coupon-row { display: flex; gap: 10px; }
.coupon-row .form-control { flex: 1; }
.campaign-banner {
  background: linear-gradient(90deg, var(--saffron-100), var(--teal-100));
  border-radius: var(--radius); padding: 14px 18px; font-weight: 600; color: var(--ink-900);
  display: flex; gap: 10px; align-items: center; font-size: 0.94rem;
}
.pay-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.pay-option {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 10px; text-align: center;
  cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--ink-600); background: var(--surface);
}
.pay-option:has(input:checked), .pay-option.selected { border-color: var(--teal-600); background: var(--teal-050); color: var(--teal-700); }
.pay-option input { display: none; }

/* Auth pages */
.auth-wrap { min-height: calc(100vh - var(--nav-height)); display: grid; place-items: center; padding: 48px 20px; }
.auth-card { width: 100%; max-width: 440px; }
.role-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.role-tab {
  flex: 1 1 auto; text-align: center; padding: 9px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border); font-size: 0.84rem; font-weight: 600; color: var(--ink-400);
  background: var(--surface);
}
.role-tab.active { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }

/* ---------- Booking availability calendar (Component: Calendar_BookingDate) ---------- */
.cal-wrap { border: 1.5px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface); max-width: 360px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: var(--font-display); color: var(--ink-900); }
.cal-nav { width: 34px; height: 34px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; cursor: pointer; font-size: 1.1rem; color: var(--teal-700); }
.cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekdays span { text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-400); text-transform: uppercase; padding: 4px 0; }
.cal-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-size: 0.9rem; border: none; background: transparent; font-family: var(--font-body); padding: 0; }
.cal-empty { visibility: hidden; }
.cal-available { background: var(--green-100); color: var(--green-600); font-weight: 700; cursor: pointer; }
.cal-available:hover { background: var(--teal-100); color: var(--teal-700); }
.cal-disabled { color: #C3D2D0; cursor: not-allowed; }
.cal-selected, .cal-available.cal-selected { background: var(--green-600); color: #fff; box-shadow: var(--shadow-sm); }
.cal-today { outline: 2px solid var(--saffron-500); outline-offset: -2px; }
.cal-legend { margin-top: 10px; font-size: 0.74rem; color: var(--ink-400); display: flex; align-items: center; gap: 6px; }
.cal-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--green-100); border: 1px solid var(--green-600); flex: none; }

/* ---------- Monthly Pattern builder (Component: Builder_MonthlyPattern) ---------- */
.pattern-builder { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
@media (max-width: 640px) { .pattern-builder { grid-template-columns: 1fr; } }
.pattern-preview {
  margin: 12px 0 10px; padding: 10px 14px; border-radius: 10px; font-size: 0.9rem;
  background: #EEF3F2; color: var(--ink-400); border: 1.5px dashed var(--border);
}
.pattern-preview.has-pattern {
  background: var(--teal-050); color: var(--teal-700); border-color: var(--teal-600);
  font-weight: 700; font-family: var(--font-display);
}
.pattern-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pattern-chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--green-100);
  color: var(--green-600); font-weight: 700; font-size: 0.84rem; font-family: var(--font-display);
  padding: 6px 8px 6px 14px; border-radius: 999px;
}
.pattern-chip button {
  background: var(--green-600); color: #fff; border: none; width: 20px; height: 20px;
  border-radius: 50%; cursor: pointer; font-size: 0.85rem; line-height: 1; display: grid; place-items: center;
}
.pattern-chip button:hover { background: var(--red-600); }

/* ---- Credentials box (clinic registration success popup) ----
   The one place a temporary password is shown on screen, so it needs to be
   impossible to miss and easy to copy down. */
.cred-box {
  border: 2px solid var(--teal-600); border-radius: 12px; padding: 16px;
  margin: 16px 0; background: var(--teal-050);
}
.cred-box h4 {
  margin: 0 0 10px; color: var(--teal-700); font-family: var(--font-display);
  font-size: 0.95rem;
}
.cred-box .data-table td { border-color: #CFE7E3; }
.cred-value {
  font-size: 1.25rem; letter-spacing: 2px; color: var(--teal-700);
  font-family: var(--font-display); user-select: all;
}

/* ---- Internal context bar (doctor-finder in walk-in booking mode) ----
   Keeps the clinic's identity visible after leaving the dashboard, so staff
   always know which clinic they are booking for. */
.internal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: var(--teal-050); border: 1px solid #CFE7E3;
  border-left: 4px solid var(--teal-600); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px;
}
.internal-bar-id { display: flex; flex-direction: column; min-width: 0; }
.internal-bar-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  color: var(--teal-700); line-height: 1.2;
}
.internal-bar-sub { font-size: 0.76rem; color: var(--ink-400); margin-top: 2px; }

/* ---- Frozen dashboard header on the internal doctor finder ----
   Mirrors the clinic dashboard's welcome strip and stays pinned while the
   doctor list scrolls, so staff never lose sight of which clinic they're
   booking for. */
.internal-header {
  position: sticky; top: var(--nav-height); z-index: 40; /* the site navbar is itself sticky at top:0 (z:100) */
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 4px 12px; margin-bottom: 18px;
}
.internal-header-title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--ink-900); margin: 0 0 6px; line-height: 1.15;
}
.internal-header-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.internal-header-main { min-width: 0; }
/* Disable sticky only on genuinely narrow phone screens, where a pinned
 * header eats too much vertical space. 640px was too aggressive: a desktop
 * browser with DevTools docked open (exactly how this gets tested) narrows the
 * page's visible width under 640px too, silently killing the sticky behaviour
 * on a normal desktop. 480px is real-phone territory only. */
@media (max-width: 480px) {
  .internal-header { position: static; }
  .internal-header-title { font-size: 1.2rem; }
}
.internal-header-warn {
  background: #FFF6E6; border: 1px solid #F2DBA6; border-left: 4px solid #E0A526;
  border-radius: 8px; padding: 10px 14px; margin: -8px 0 18px;
  font-size: 0.8rem; color: #6B4A00; line-height: 1.5;
}

/* ---- Booking modal section headings (Modal_BookAppointment) ----
   Groups "Appointment details" / "Patient details" visually, reusing the same
   icon set as the prescription sheet for a consistent look across the app. */
.modal-section-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem;
  color: var(--teal-700); text-transform: uppercase; letter-spacing: 0.04em;
  margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1.5px solid var(--teal-050);
}
.modal-section-title:first-of-type { margin-top: 6px; }
.modal-section-title svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ============================================================
   Patient Visit (Component: Card_PatientVisit, visits.js)
   Front-desk arrival check-in: Appointment ID -> patient details ->
   Confirm Visit -> Patient Visit ID. Lives in forms.css because it is
   the one stylesheet every dashboard loads (super-admin-dashboard.html
   does not load print.css, so nothing here may depend on it).
   ============================================================ */
.visit-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
  background: var(--surface); margin-top: 6px;
}
.visit-card-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.visit-serial {
  background: var(--teal-050); border-radius: 10px; padding: 6px 14px; text-align: center; flex-shrink: 0;
}
.visit-serial-label {
  display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--teal-700);
}
.visit-serial b { font-size: 1.5rem; color: var(--saffron-500); line-height: 1.1; }
.visit-card-title { min-width: 0; flex: 1; }
.visit-card-title b { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-900); }
.visit-card-title small { color: var(--ink-400); font-size: 0.78rem; }

.visit-grid { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.visit-field { min-width: 0; }
.visit-field-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: 2px;
}
.visit-field-value { font-size: 0.9rem; font-weight: 600; color: var(--ink-900); word-break: break-word; }

.visit-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.visit-hint { font-size: 0.78rem; color: var(--ink-400); }

/* Confirmed state: green button + tick beside it + the minted Visit ID.
   The :disabled selector is NOT optional here. The button is disabled once the
   visit is confirmed, and style.css's `.btn:disabled` (specificity 0,2,0) beats
   a bare `.btn-visited` (0,1,0) — so without matching that specificity the
   "Visited" button silently renders in the generic disabled grey instead of
   green. forms.css loads after style.css, so an equal-specificity rule wins. */
.btn-visited, .btn-visited:disabled {
  background: var(--green-100); color: var(--green-600);
  border: 1.5px solid var(--green-600); font-weight: 700;
  cursor: default; opacity: 1; box-shadow: none; transform: none;
}
.visit-tick { color: var(--green-600); font-size: 1.3rem; font-weight: 700; line-height: 1; }
.visit-idbox {
  background: var(--green-100); border: 1px solid var(--green-600); border-radius: 8px;
  padding: 6px 12px; line-height: 1.35;
}
.visit-idbox-label {
  display: block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--green-600);
}
.visit-idbox b { color: var(--ink-900); font-size: 0.95rem; letter-spacing: 0.02em; }
.visit-idbox small { display: block; color: var(--ink-400); font-size: 0.68rem; }

.visit-note {
  background: var(--teal-050); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 0.84rem; color: var(--ink-400); margin-top: 6px;
}
.visit-note b { color: var(--ink-900); }
.visit-warn {
  background: #FFF6E6; border: 1px solid #F2DBA6; border-radius: 8px;
  padding: 8px 12px; font-size: 0.8rem; color: #8A5A00; margin-top: 14px;
}
.visit-lookup-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.visit-lookup-row .form-group { flex: 1 1 260px; margin-bottom: 0; }

@media (max-width: 560px) {
  .visit-lookup-row .btn { width: 100%; }
  .visit-actions { align-items: flex-start; }
}

/* ============================================================
   QR scanner (Component: Modal_QrScanner, qr-scan.js)
   ============================================================ */
.qr-scan-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 3; background: #0B1F1D;
  border-radius: 10px; overflow: hidden;
}
.qr-scan-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Aiming guide. pointer-events:none so it can never swallow a click meant for
   the modal underneath. */
.qr-scan-frame {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 62%; aspect-ratio: 1; border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.qr-scan-status {
  margin-top: 12px; font-size: 0.84rem; color: var(--ink-400); text-align: center; min-height: 2.4em;
}
.qr-scan-status.bad { color: var(--red-600); font-weight: 600; }

/* Appointment QR — modal-only chrome. The QR block itself lives in print.css,
   because it also has to render inside the slip's print window (which loads
   only style.css + print.css). These three classes never print. */
.apt-qr-modal { text-align: center; }
.apt-qr-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin: 16px 0 4px; text-align: left;
}
.apt-qr-meta span {
  display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--teal-700);
}
.apt-qr-meta b { font-size: 0.88rem; color: var(--ink-900); }
.apt-qr-help { font-size: 0.75rem; color: var(--ink-400); margin-top: 12px; }

/* ============================================================
   Super Admin: temp credentials + delete modal
   ============================================================ */
.tempcred {
  margin-top: 4px; padding: 5px 7px; border-radius: 6px;
  background: #FFF6E6; border: 1px solid #F2DBA6;
}
.tempcred-label {
  display: block; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #8A5A00;
}
.tempcred code {
  display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem; font-weight: 700; color: var(--ink-900);
  background: #fff; border: 1px solid #E4CE9A; border-radius: 4px;
  padding: 1px 6px; cursor: pointer; user-select: all;
}
.tempcred code:hover { border-color: var(--saffron-500); }
.tempcred small { display: block; font-size: 0.62rem; }

.del-option { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.del-option h3 { margin: 0 0 6px; font-size: 0.98rem; display: flex; align-items: center; gap: 8px; }
.del-option p { margin: 0; }
.del-danger { border-color: #F3C2C2; background: #FEF7F7; }
.del-list { margin: 6px 0 10px; padding-left: 18px; }
.del-list li { margin-bottom: 3px; }
.del-option .form-group { margin: 10px 0 0; }

/* ============================================================
   Pause dates calendar (Component: Modal_PauseDates, pause-dates.js)
   ============================================================ */
.pause-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pause-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pc-dow {
  text-align: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-400); padding: 4px 0;
}
.pc-cell {
  aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; font-size: 0.85rem; font-weight: 600; color: var(--ink-900);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pc-blank { border: none; background: transparent; cursor: default; }
/* Consulting days must READ as consulting at a glance. The first cut used
   --teal-050 (#F2FAF8) against an #F5F7F7 off-day — a 1% difference in
   lightness, which is to say invisible. This tint is unmistakable next to both
   the grey off-days and the red paused ones. */
.pc-avail { background: #C4E7DE; border-color: #6FBEB1; color: #0A544D; font-weight: 700; }
.pc-off { background: #F4F6F6; border-color: #E8EDED; color: #9FB3B0; font-weight: 500; }
.pc-paused { background: #C6383C; border-color: #A32626; color: #fff; }
.pc-paused::after { content: "⏸"; font-size: 0.55rem; margin-left: 2px; }
.pc-today { outline: 2px solid var(--saffron-500); outline-offset: 1px; }
.pc-past { opacity: 0.45; cursor: not-allowed; }
/* Read-only cells (the doctor's availability view) must not look clickable. */
div.pc-cell { cursor: default; }
.pc-cell:not(.pc-past):not(.pc-blank):hover { border-color: var(--saffron-500); }
.pause-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 0.72rem; color: var(--ink-400); }
.pause-legend .pl { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.pl-paused { background: #C6383C; }
.pl-avail { background: #C4E7DE; border: 1px solid #6FBEB1; }
.pl-off { background: #F4F6F6; border: 1px solid #E8EDED; }
.badge-paused { background: #FDEDED; color: #A32626; border: 1px solid #F3C2C2; }

/* Doctor's Availability panel: calendar beside the slot/fee summary. Stacks on
   narrow screens — the calendar needs ~300px before the day cells get too
   small to tap. */
.avail-split { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 22px; align-items: start; }
.avail-side { min-width: 0; }
.avail-slots .visit-field-label { font-size: 0.62rem; }
@media (max-width: 720px) {
  .avail-split { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   Slot-level pause (Component: Panel_PauseSlots, pause-dates.js)
   ============================================================ */
.pause-slots-section {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border);
}
.pause-slots-title { font-size: 0.95rem; margin: 0 0 4px; }
#Pause_SlotChips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.slot-chip {
  border: 1.5px solid var(--border); background: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 0.82rem; font-weight: 600; color: var(--ink-900);
  cursor: pointer;
}
.slot-chip:hover { border-color: var(--saffron-500); }
.slot-chip-paused { background: #C6383C; border-color: #A32626; color: #fff; }
.pause-slot-summary { display: flex; gap: 6px; flex-wrap: wrap; }

/* Booked-slot radio option, disabled because it's paused for the selected date. */
.pay-option-disabled {
  opacity: 0.6; cursor: not-allowed; background: #F8F8F8;
}
.pay-option-disabled input { pointer-events: none; }

/* ============================================================
   Mobile OTP verification (Group_SignupOtp, auth.js)
   ============================================================ */
/* Wrap, and give the field a real floor. Without the min-width the +91 chip
   and the Send OTP button squeeze the input to ~58px on a 390px phone — wide
   enough for about three digits of a ten-digit number. The button drops to its
   own line rather than the field becoming unusable. */
.otp-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.otp-row .form-control { flex: 1 1 150px; min-width: 150px; }
.otp-row .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 420px) {
  .otp-row .btn { flex: 1 1 100%; }
}
/* The +91 prefix is fixed, not typed: normalizeIndianMobile only accepts
   Indian numbers, so showing the country code as furniture stops people
   pasting "+44..." and getting a rejection they don't understand. */
.otp-cc {
  display: flex; align-items: center; padding: 0 10px;
  background: var(--teal-050); border: 1.5px solid var(--border); border-radius: 8px;
  font-weight: 700; font-size: 0.88rem; color: var(--teal-700); flex-shrink: 0;
}
.input-verified {
  border-color: var(--teal-600) !important;
  background: var(--teal-050);
}
.form-hint.warn { color: var(--saffron-600); font-weight: 600; }

/* ============================================================
   On-demand real distance (Component: Card_Doctor, doctor-finder.js)
   ============================================================ */
.link-btn {
  background: none; border: none; padding: 0; margin-left: 6px;
  color: var(--teal-600); font-size: 0.72rem; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.link-btn:hover { color: var(--teal-700); }
.link-btn:disabled { color: var(--ink-400); cursor: default; text-decoration: none; }