/* ============================================================
   Balance Farm — add-on time picker
   Sheet-shell modal asking when an experience should be scheduled.
   Free entry on the left, meridiem toggle inside the field, a round
   confirm to its right, and quick picks below.
   ============================================================ */

.timepick__eyebrow {
  padding: 20px 20px 0;
  font-family: var(--font-serif);
  font-size: var(--t-sm);
  font-weight: var(--w-regular);
  letter-spacing: var(--t-sm-track);
}
.timepick__title {
  padding: var(--s-5);
  font-size: var(--t-xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-xl-track);
  line-height: 90%;
}

/* ---- entry row: field + round confirm ---- */
.timepick__row {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  padding: var(--s-5);
}
/* composes .c-field — the underlined input used everywhere else on the site;
   only the flex sizing beside the round confirm is its own */
.timepick__input {
  flex: 1 1 auto;
  min-width: 0;
}
.timepick__input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.4; }
.timepick__input::-webkit-calendar-picker-indicator:hover { opacity: 0.8; }


.timepick__go {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--d-fast) ease, opacity var(--d-fast) ease;
}
@media (hover: hover) {
  .timepick__go:hover { background: var(--accent-hover); }
}
.timepick__go img {
  width: 9px;
  height: 15px;
  transform: rotate(180deg);          /* the back chevron, pointing forward */
  filter: invert(1);
}

/* ---- quick picks ---- */
.timepick__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  padding: var(--s-5);
}
/* the confirm dims until there is something valid to confirm */
.timepick__go[disabled] { opacity: 0.35; cursor: default; }

@media (max-width: 600px) {
  .timepick__title { font-size: var(--t-xl); }
  .timepick__go { width: 48px; height: 48px; }
}

/* Opened from inside the booking flow, which shares the .bkflow base rule
   (z-index 70) and the .bkflow--sheet overrides that follow it. A two-class
   selector outranks both, so this always stacks on top. */
.bkflow.bkflow--timepick { z-index: 90; }
.bkflow.bkflow--timepick .bkflow__backdrop { z-index: 1; }
.bkflow.bkflow--timepick .bkflow__panel { z-index: 2; }