/*
 * Shared customer-facing 12-hour time selector styling.
 * Add .v5-time-select to the hour select and data-period="am|pm" to each
 * hour option. AM follows the selected site theme; PM uses a restrained warm
 * accent so the periods stay distinct without changing the overall theme.
 */
.v5-time-select {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.v5-time-select.is-am {
  background-color: var(--v5-primary-light, #e1f5fe);
  border-color: var(--v5-primary, #3aafe4);
  color: var(--v5-primary-dark, #01579b);
}

.v5-time-select.is-pm {
  background-color: #fff3e8;
  border-color: var(--v5-accent, #ff8a65);
  color: #854b17;
}

.v5-time-select option[data-period="am"] {
  background-color: var(--v5-primary-light, #e1f5fe);
  color: var(--v5-primary-dark, #01579b);
}

.v5-time-select option[data-period="pm"] {
  background-color: #fff3e8;
  color: #854b17;
}

[data-theme="dark"] .v5-time-select.is-am,
[data-theme="dark"] .v5-time-select option[data-period="am"] {
  background-color: #173044;
  border-color: #2e8fbe;
  color: #a7e4fb;
}

[data-theme="dark"] .v5-time-select.is-pm,
[data-theme="dark"] .v5-time-select option[data-period="pm"] {
  background-color: #392a1a;
  border-color: #b7791f;
  color: #ffd493;
}