/*
  Client-side "pick a preferred time" widget. Montreal and New York are
  both Eastern Time (EST/EDT) -- no per-visitor timezone conversion is
  needed or wanted here, so every slot is a fixed Eastern-Time label. This
  is a request mechanism, not a live-availability booking calendar: nothing
  here checks real staff availability. It fills a hidden field on the
  contact form (see contact.html); the actual confirmation still happens
  by email once the form backend exists (Build Plan §9.2/§9.3).
*/

.scheduler {
  display: grid;
  gap: var(--space-4);
}

.scheduler__hint {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-small);
}

.scheduler__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.scheduler__day {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  font-size: var(--font-small);
  font-weight: 700;
  cursor: pointer;
}

.scheduler__day.is-selected {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.scheduler__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}

.scheduler__time {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  font-size: var(--font-small);
  cursor: pointer;
}

.scheduler__time.is-selected {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.scheduler__confirmation {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-size: var(--font-small);
  font-weight: 700;
}

.scheduler__confirmation[hidden] {
  display: none;
}