/* Native picker — shared styles for the in-page slot/date picker.
 * Loaded by book.html (wizard mode) and account.html (reschedule mode).
 */

/* ── NATIVE PICKER ── */
.native-picker {
  margin-top: 20px;
}

.native-picker-status {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
}

.native-picker-status.error {
  border-color: #b00020;
  color: #b00020;
}

.native-picker-grid {
  display: flex;
  gap: 12px;
  align-items: start;
  flex-wrap: wrap;
}

.native-calendar-pane {
  flex: 0 0 auto;
  min-width: 0;
}
.native-slots-pane {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 360px;
}

/* Flatpickr binds to this input; in inline mode it can still render the
   input as a visible text box. Hide it — the inline calendar IS the UI. */
#native-date-input { display: none !important; }

/* Match the slot-button font (DM Sans body font). Flatpickr's default
   inherits from the page, but its own stylesheet sets a system stack
   in places — override here to keep calendar text consistent. */
.flatpickr-calendar,
.flatpickr-day,
.flatpickr-weekday,
.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
  font-family: 'DM Sans', sans-serif;
}

.native-slots-heading {
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--green-dark);
}

.native-slots {
  display: grid;
  /* Fixed-width columns keep buttons aligned across rows regardless of
     content width (e.g. "9:00 AM" vs "10:00 AM"). */
  grid-template-columns: repeat(auto-fill, 114px);
  gap: 10px;
}

.native-slot {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  /* Force single-line — DM Sans renders "10:00 AM" slightly wider than
     other times, which would otherwise wrap at 108px. */
  white-space: nowrap;
}

.native-slot:hover,
.native-slot:focus-visible {
  border-color: var(--green-dark);
  outline: none;
}

.native-slot.selected {
  /* Darken for AA in dark mode (#fff on #2d7a3a = 5.31:1 vs #3d9950 = 3.58:1). #307 */
  background: var(--btn-primary-bg, var(--green-dark));
  border-color: var(--green-dark);
  color: #fff;
}

.native-empty {
  margin: 0;
  color: var(--text-muted);
}

.native-picker .flatpickr-calendar.inline {
  width: 100%;
  max-width: 360px;
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Disabled "current time" marker rendered by the picker when
 * options.currentStartUtc (today: reschedule mode) matches a slot's startUtc.
 * The slot stacks the time on top and a small "Current" sublabel below.
 *
 * Uses real theme tokens (--border, --text-muted) — the previous
 * --color-surface-2 / --color-text-muted custom properties are not defined
 * anywhere in this codebase, so the pill rendered with light-mode #f3f3f3 /
 * #888 fallbacks even on the dark theme.
 */
.native-slot.current {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.native-slot.current:hover { background: var(--border); }

.native-slot-sublabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: inherit;
  line-height: 1;
}

@media (max-width: 720px) {
  .native-picker-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .native-picker .flatpickr-calendar.inline {
    max-width: none;
  }
}