.birth-time-control { position: relative; }
.birth-time-control input { width: 100%; padding-right: 54px; }
.birth-time-control .birth-time-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--gold-light);
}
.birth-time-toggle svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.birth-time-toggle:hover { color: #fff; }
.birth-time-picker {
  position: absolute;
  z-index: 26;
  top: calc(100% + 8px);
  left: 0;
  width: min(340px, calc(100vw - 48px));
  padding: 17px;
  background: #241812;
  border: 1px solid #aa7c35;
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .48);
}
.birth-time-picker[hidden] { display: none; }
.birth-time-heading { display: flex; align-items: center; justify-content: space-between; color: var(--gold-light); font-family: var(--display); font-size: 16px; font-weight: 700; }
.birth-time-heading button { width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 25px; line-height: 1; }
.birth-time-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.birth-time-column > span { display: block; margin: 0 0 7px; color: var(--muted); font-size: 12px; }
.birth-time-list {
  height: 196px;
  overflow-y: auto;
  padding: 5px;
  display: grid;
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(222, 184, 88, .22);
  border-radius: 6px;
  background: #180f0c;
  scrollbar-color: #866332 #180f0c;
  scrollbar-width: thin;
}
.birth-time-list .birth-time-option { grid-column: auto; justify-self: stretch; width: 100%; min-height: 40px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; }
.birth-time-option:hover { border-color: rgba(222, 184, 88, .6); background: #352318; }
.birth-time-option.is-selected { border-color: var(--gold); background: var(--gold); color: #1b120b; font-weight: 700; }
.birth-time-confirm { width: 100%; min-height: 43px; margin-top: 13px; border: 0; border-radius: 4px; background: var(--gold); color: #1b120b; font-weight: 700; }
.birth-time-confirm:hover:not(:disabled) { background: var(--gold-light); }
.birth-time-confirm:disabled { opacity: .45; cursor: default; }
.birth-time-hint { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
@media (max-width: 760px) { .birth-time-picker { width: min(340px, calc(100vw - 76px)); } }
