/* Book Now page: tabs for the Vagaro booking widgets (2026-10-20). Uses the theme variables, so all three styles work. */
.booking-tabs[hidden], .booking-tablist[hidden], .booking-tabs-intro[hidden], [data-booking-fallback][hidden] { display: none; }
.booking-tabs-intro {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  opacity: 0.8;
  margin: 0 0 1rem;
}
.booking-tablist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 1.5rem;
  max-width: 960px;
}
.booking-tab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-hover, rgba(200, 169, 126, 0.45));
  border-radius: 999px;
  color: var(--text-primary, #fff);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 0.65rem 1.15rem;
  white-space: nowrap;
}
.booking-tab:hover { border-color: var(--gold, #c8a97e); color: var(--gold-light, #e2c9a0); }
.booking-tab[aria-selected="true"] {
  background: var(--gold, #c8a97e);
  border-color: var(--gold, #c8a97e);
  color: #1a1a1a;
}
.booking-tab:focus-visible { outline: 2px solid var(--gold-light, #e2c9a0); outline-offset: 3px; }
.booking-tabpanel[hidden] { display: none; }
.booking-tabpanel-note {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.75;
  margin: 0 0 1rem;
}
.booking-tabpanel .vagaro a { font-size: 14px; color: #aaa; text-decoration: none; }
@media (max-width: 600px) {
  .booking-tablist {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0.25rem 0.25rem;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
  }
  .booking-tablist::-webkit-scrollbar { display: none; }
  .booking-tab { flex: 0 0 auto; font-size: 0.85rem; padding: 0.6rem 1rem; }
}