/**
 * Public booking pages — design tokens + tenant brand overrides.
 * Brand colors are set per request via add_dynamic_styles() (--brand-*).
 * Defaults match textellent-theme.css when Appearance colors are unchanged.
 */

body.booking {
  font-family: "Funnel Sans", sans-serif;
  background-color: var(--brand-bg, var(--white-160));
  color: var(--black-800);
}

body.booking h1,
body.booking h2,
body.booking h3,
body.booking h4,
body.booking h5,
body.booking h6 {
  font-family: "Funnel Display", serif;
}

/* Classic / time_zone_enhanced wizard */
#book-appointment-wizard #header {
  background: var(--brand-primary, var(--button-primary-bg));
  border-bottom: 4px solid var(--brand-secondary, var(--figma-bg-tertiary));
}

#book-appointment-wizard #company-name {
  color: var(--figma-white);
}

#book-appointment-wizard .book-step {
  border-color: var(--brand-secondary, var(--figma-border-dark));
}

#book-appointment-wizard .book-step strong {
  color: var(--brand-secondary, var(--figma-text-light));
}

#book-appointment-wizard .active-step {
  border-color: var(--brand-secondary, var(--figma-bg-tertiary));
}

#book-appointment-wizard .active-step strong {
  color: var(--brand-primary, var(--button-primary-bg));
}

#book-appointment-wizard #available-hours .selected-hour {
  background: var(--brand-primary, var(--button-primary-bg));
  border-color: var(--button-primary-hover-bg);
  color: var(--figma-white);
}

#book-appointment-wizard .frame-container .frame-title {
  color: var(--figma-text-secondary);
}

/* jQuery UI — public booking */
body.booking .ui-widget.ui-widget-content {
  border: 1px solid var(--brand-secondary, var(--figma-border-light));
}

body.booking .ui-draggable .ui-dialog-titlebar {
  background: var(--brand-primary, var(--button-primary-bg));
  color: var(--figma-white);
}

body.booking .ui-datepicker .ui-widget-header,
body.booking .ui-datepicker th {
  background: var(--brand-secondary, var(--button-primary-bg));
  color: var(--figma-white);
}

html body.booking .ui-datepicker td a.ui-state-active {
  background: var(--brand-primary, var(--button-primary-bg)) !important;
  color: var(--figma-white) !important;
}

body.booking .ui-datepicker td a.ui-state-highlight {
  border: 1px solid var(--brand-secondary, var(--figma-border-dark)) !important;
  background-color: var(--figma-bg-tertiary) !important;
  color: var(--figma-text-primary) !important;
}

body.booking .ui-datepicker td a,
body.booking .ui-datepicker td span {
  color: var(--brand-fore, var(--figma-text-secondary)) !important;
}

body.booking .ui-datepicker .ui-datepicker-prev-hover,
body.booking .ui-datepicker .ui-datepicker-next-hover {
  background: var(--figma-bg-tertiary);
  border-color: var(--figma-border-dark);
}

body.booking .ui-datepicker .ui-slider-handle {
  border-color: var(--brand-primary, var(--button-primary-bg));
  background-color: var(--brand-primary, var(--button-primary-bg));
}

body.booking .ui-widget {
  font-family: "Funnel Sans", sans-serif;
}

body.booking .custom-qtip {
  font-family: "Funnel Sans", sans-serif;
}

body.booking .btn-primary {
  background-color: var(--brand-primary, var(--button-primary-bg));
  border-color: var(--brand-primary, var(--button-primary-bg));
  border-radius: var(--btn-border-radius);
}

body.booking .btn-primary:hover,
body.booking .btn-primary:focus {
  background-color: var(--button-primary-hover-bg);
  border-color: var(--button-primary-hover-bg);
}

body.booking .form-control {
  border-radius: var(--input-border-radius);
  border-color: var(--figma-border-light);
}

body.booking .form-control:focus {
  border-color: var(--figma-accent-purple);
  box-shadow: 0 0 0 2px rgba(107, 95, 242, 0.2);
}

/* Simplified booking (book.css) — primary actions */
body.booking .btn-primary,
body.booking .confirm-btn,
body.booking .book-btn {
  background-color: var(--brand-primary, var(--button-primary-bg)) !important;
  border-color: var(--brand-primary, var(--button-primary-bg)) !important;
}

body.booking .btn-primary:hover,
body.booking .confirm-btn:hover,
body.booking .book-btn:hover {
  background-color: var(--button-primary-hover-bg) !important;
  border-color: var(--button-primary-hover-bg) !important;
}

body.booking a.nav-link.active,
body.booking .time-slot.selected {
  background-color: var(--brand-primary, var(--button-primary-bg)) !important;
  color: var(--figma-white) !important;
}

body.booking .nav-link {
  color: var(--brand-primary, var(--button-primary-bg));
}