/* session.css - 1:1 session slot picker. Mobile-first (>90% phone traffic).
 * Loaded only on the Consultations page. Inert until the picker JS finds real
 * availability, so it never shifts the layout for the plain add-to-cart flow.
 * Tokens fall back to safe values so it works even if the theme vars change. */

.sa-picker {
  margin: 14px 0 4px;
  padding: 16px;
  border: 1px solid var(--line, #e6ddc9);
  border-radius: 14px;
  background: var(--cream, #fbf7ee);
  color: var(--night, #2a2417);
}
.sa-picker-h {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: var(--night, #2a2417);
}
.sa-picker-grid { display: block; }
.sa-picker-day {
  margin: 12px 0 6px;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft, #5b513c);
}

/* Slots: full-bleed, easy thumb targets on a phone; wrap into a grid as space
   allows. Min height 44px = the accessible tap-target floor. */
.sa-picker-grid .sa-slot {
  display: inline-block;
  min-width: 76px;
  min-height: 44px;
  margin: 4px 6px 4px 0;
  padding: 10px 14px;
  border: 1px solid var(--gold, #b8923e);
  border-radius: 10px;
  background: #fff;
  color: var(--night, #2a2417);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.sa-picker-grid .sa-slot:hover,
.sa-picker-grid .sa-slot:focus-visible {
  background: var(--cream, #fbf7ee);
  outline: 2px solid var(--gold, #b8923e);
  outline-offset: 1px;
}
.sa-picker-grid .sa-slot.on {
  background: var(--gold, #b8923e);
  border-color: var(--gold, #b8923e);
  color: #1c160c; /* dark text on gold = AA on the gold tone */
}

.sa-picker-email {
  display: block;
  width: 100%;
  margin: 14px 0 10px;
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid var(--line, #cfc4ab);
  border-radius: 10px;
  font: inherit;
  color: var(--night, #2a2417);
  background: #fff;
}
.sa-picker-email:focus-visible {
  outline: 2px solid var(--gold, #b8923e);
  outline-offset: 1px;
}

.sa-picker-go { width: 100%; min-height: 48px; }

.sa-picker-msg {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft, #5b513c);
  min-height: 1.2em;
}

/* Desktop: let slots sit in a comfortable inline run; the picker stays narrow
   beside the service copy rather than stretching the whole column. */
@media (min-width: 760px) {
  .sa-picker { max-width: 520px; }
}