/* NEXT2 static public theme application.
   BrandThemeManager projects DB-backed --brand-* tokens and only toggles
   data-brand-theme-active; this file owns their global CSS consumption. */

/* Static consumer of the server-projected theme. BrandThemeManager only projects
   tokens and toggles this attribute; visual CSS no longer lives inside JS. */
html[data-brand-theme-active="true"] {
  --accent: var(--brand-primary);
  --primary: var(--brand-primary);
  --success: var(--brand-success);
  --warning: var(--brand-warning);
  --gradient-header: var(--brand-gradient-header);
}

html[data-brand-theme-active="true"] body.booking-app,
html[data-brand-theme-active="true"] .booking-app,
html[data-brand-theme-active="true"] #booking-app,
html[data-brand-theme-active="true"] .booking-container { color: var(--brand-text); }

html[data-brand-theme-active="true"] .content-header,
html[data-brand-theme-active="true"] .booking-topbar,
html[data-brand-theme-active="true"] .booking-sidebar .sidebar-header {
  background: var(--brand-gradient-header) !important;
  color: var(--brand-header-text) !important;
}

html[data-brand-theme-active="true"] .booking-topbar-brand { min-width: 0 !important; overflow: hidden !important; }
html[data-brand-theme-active="true"] .booking-topbar-logo {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  max-width: 84px !important;
  overflow: hidden !important;
  border-radius: var(--radius-sm) !important;
}
html[data-brand-theme-active="true"] .booking-topbar-logo > img,
html[data-brand-theme-active="true"] .booking-topbar-logo-img {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: 84px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  border-radius: var(--radius-sm) !important;
}
html[data-brand-theme-active="true"] .sidebar-practitioner-avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}
html[data-brand-theme-active="true"] .sidebar-practitioner-avatar > img,
html[data-brand-theme-active="true"] .sidebar-practitioner-avatar-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

html[data-brand-theme-active="true"] .content-header,
html[data-brand-theme-active="true"] .content-header *,
html[data-brand-theme-active="true"] .booking-topbar-brand,
html[data-brand-theme-active="true"] .booking-topbar-brand *,
html[data-brand-theme-active="true"] .booking-user-menu__button,
html[data-brand-theme-active="true"] .booking-user-menu__button *,
html[data-brand-theme-active="true"] .contact-header-top,
html[data-brand-theme-active="true"] .contact-header-top *,
html[data-brand-theme-active="true"] .booking-sidebar .sidebar-header,
html[data-brand-theme-active="true"] .booking-sidebar .sidebar-header *,
html[data-brand-theme-active="true"] .booking-sidebar .sidebar-practitioner-label,
html[data-brand-theme-active="true"] .booking-sidebar #sidebar-practitioner-name {
  color: var(--brand-header-text) !important;
  -webkit-text-fill-color: var(--brand-header-text) !important;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--brand-text) 55%, transparent);
}

html[data-brand-theme-active="true"] .content-header svg,
html[data-brand-theme-active="true"] .booking-topbar svg,
html[data-brand-theme-active="true"] .contact-header-top svg,
html[data-brand-theme-active="true"] .booking-sidebar .sidebar-header svg {
  color: var(--brand-header-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html[data-brand-theme-active="true"] .content-header .btn-ghost-sm,
html[data-brand-theme-active="true"] .content-header .back-button {
  background: color-mix(in srgb, var(--brand-header-control-bg) 82%, transparent) !important;
  border-color: color-mix(in srgb, var(--brand-header-text) 54%, transparent) !important;
  color: var(--brand-header-text) !important;
  -webkit-text-fill-color: var(--brand-header-text) !important;
  backdrop-filter: blur(6px);
}
html[data-brand-theme-active="true"] .content-header .btn-ghost-sm:hover,
html[data-brand-theme-active="true"] .content-header .back-button:hover {
  background: var(--brand-header-control-bg) !important;
  color: var(--brand-header-text) !important;
}

html[data-brand-theme-active="true"] a,
html[data-brand-theme-active="true"] .link,
html[data-brand-theme-active="true"] .text-link { color: var(--brand-primary); }

html[data-brand-theme-active="true"] button.primary,
html[data-brand-theme-active="true"] .btn-primary,
html[data-brand-theme-active="true"] .primary-btn,
html[data-brand-theme-active="true"] .booking-primary,
html[data-brand-theme-active="true"] .payment-submit,
html[data-brand-theme-active="true"] #payment-submit,
html[data-brand-theme-active="true"] #finalize-booking-btn,
html[data-brand-theme-active="true"] .cta-primary {
  background: var(--brand-gradient-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-card-button-text) !important;
  -webkit-text-fill-color: var(--brand-card-button-text) !important;
}
html[data-brand-theme-active="true"] button.primary:hover,
html[data-brand-theme-active="true"] .btn-primary:hover,
html[data-brand-theme-active="true"] .primary-btn:hover,
html[data-brand-theme-active="true"] .booking-primary:hover,
html[data-brand-theme-active="true"] .payment-submit:hover,
html[data-brand-theme-active="true"] #payment-submit:hover,
html[data-brand-theme-active="true"] #finalize-booking-btn:hover,
html[data-brand-theme-active="true"] .cta-primary:hover {
  filter: brightness(.96);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 24%, transparent);
}
html[data-brand-theme-active="true"] button.secondary,
html[data-brand-theme-active="true"] .btn-secondary,
html[data-brand-theme-active="true"] .secondary-btn {
  border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--brand-surface-border));
  color: var(--brand-primary);
}

html[data-brand-theme-active="true"] .progress-item.active,
html[data-brand-theme-active="true"] .step-item.active,
html[data-brand-theme-active="true"] .booking-status-timeline__item[data-status="current"],
html[data-brand-theme-active="true"] .booking-status-timeline__item.active,
html[data-brand-theme-active="true"] .payment-tab.active,
html[data-brand-theme-active="true"] .payment-method-tab.active,
html[data-brand-theme-active="true"] .tab.active,
html[data-brand-theme-active="true"] [aria-selected="true"].payment-tab {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}
html[data-brand-theme-active="true"] .progress-item.completed,
html[data-brand-theme-active="true"] .step-item.completed,
html[data-brand-theme-active="true"] .booking-status-timeline__item[data-status="completed"] { color: var(--brand-success) !important; }
html[data-brand-theme-active="true"] .progress-item.active .progress-dot,
html[data-brand-theme-active="true"] .step-item.active .step-dot,
html[data-brand-theme-active="true"] .booking-status-timeline__dot,
html[data-brand-theme-active="true"] .timeline-dot.active { background: var(--brand-primary) !important; }

html[data-brand-theme-active="true"] input:focus,
html[data-brand-theme-active="true"] select:focus,
html[data-brand-theme-active="true"] textarea:focus,
html[data-brand-theme-active="true"] .form-control:focus,
html[data-brand-theme-active="true"] .StripeElement--focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
}
html[data-brand-theme-active="true"] .badge.success,
html[data-brand-theme-active="true"] .status-paid,
html[data-brand-theme-active="true"] .payment-status-paid,
html[data-brand-theme-active="true"] .alert-success { color: var(--brand-success) !important; }
html[data-brand-theme-active="true"] .badge.warn,
html[data-brand-theme-active="true"] .alert-warning,
html[data-brand-theme-active="true"] .payment-status-pending { color: var(--brand-warning) !important; }

@media (max-width: 640px) {
  html[data-brand-theme-active="true"] button.primary,
  html[data-brand-theme-active="true"] .btn-primary,
  html[data-brand-theme-active="true"] .primary-btn,
  html[data-brand-theme-active="true"] .booking-primary,
  html[data-brand-theme-active="true"] .payment-submit,
  html[data-brand-theme-active="true"] #payment-submit,
  html[data-brand-theme-active="true"] #finalize-booking-btn,
  html[data-brand-theme-active="true"] .cta-primary { width: 100%; }
}

/* Migrated LOT247K3V public format convergence.
   These historical public surfaces now consume the same projected company tokens
   without a JavaScript-owned stylesheet. */
.consultation-type-card p,
.consultation-type-card__description,
.consultation-card-description,
[data-consultation-type-card] p {
  color: var(--brand-card-text) !important;
  opacity: .96 !important;
  text-shadow: none !important;
  font-weight: 500;
}
.consultation-type-card h3,
.consultation-type-card__title,
[data-consultation-type-card] h3 {
  color: var(--brand-card-title) !important;
  font-weight: 800;
}
.consultation-type-card button,
.consultation-type-card .select-btn,
.consultation-type-card .btn,
[data-consultation-type-card] button {
  background: var(--brand-action-secondary-bg) !important;
  border: 1.5px solid color-mix(in srgb, var(--brand-primary) 28%, var(--brand-card-panel-border)) !important;
  color: var(--brand-primary) !important;
  -webkit-text-fill-color: var(--brand-primary) !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 8%, transparent) !important;
}
.consultation-type-card button:hover,
.consultation-type-card .select-btn:hover,
.consultation-type-card .btn:hover,
[data-consultation-type-card] button:hover {
  transform: translateY(-1px);
  border-color: var(--brand-primary) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-primary) 14%, transparent) !important;
}
.step-item:not(.active):not(.completed) {
  border-color: color-mix(in srgb, var(--brand-card-panel-border) 82%, transparent) !important;
  background: color-mix(in srgb, var(--brand-card-panel-bg) 72%, transparent) !important;
  color: var(--brand-text-muted) !important;
  box-shadow: none !important;
}
.step-item:not(.active):not(.completed) .step-dot,
.step-item:not(.active):not(.completed) .step-number {
  border-color: color-mix(in srgb, var(--brand-card-panel-border) 90%, transparent) !important;
  color: var(--brand-text-muted) !important;
  background: var(--brand-card-panel-bg) !important;
  box-shadow: none !important;
}
#step-consultation-type .step-header,
#step-consultation .step-header,
.consultation-type-step .step-header { margin-bottom: 14px !important; }
#step-consultation-type .step-subtitle,
#step-consultation .step-subtitle,
.consultation-type-step .step-subtitle { margin-top: 8px !important; margin-bottom: 14px !important; }