/*
  Beauty Botox Bar - Complete central colour coverage
  Loaded after legacy page CSS. All values come from Administration.
*/

html[data-bbb-theme],
html[data-bbb-theme] body {
  background-color: var(--bbb-bg) !important;
  color: var(--bbb-text) !important;
}

/* Header / navigation */
html[data-bbb-theme] :is(
  .site-header,
  .unified-mobile-menu,
  .mobile-menu,
  .bbb-member-dropdown,
  .header-shell
) {
  background-color: var(--bbb-header-bg) !important;
  color: var(--bbb-header-text) !important;
  border-color: var(--bbb-border) !important;
}

html[data-bbb-theme] :is(
  .site-header a,
  .site-header button,
  .unified-mobile-menu a,
  .mobile-menu a,
  .bbb-member-dropdown a
) {
  color: var(--bbb-header-text) !important;
  border-color: var(--bbb-border) !important;
}

html[data-bbb-theme] :is(
  .main-nav a.active,
  .unified-mobile-menu a.active,
  .mobile-menu a.active,
  [aria-current="page"]
) {
  background-color: var(--bbb-nav-active-bg) !important;
  color: var(--bbb-nav-active-text) !important;
}

/* General page sections */
html[data-bbb-theme] :is(
  main,
  .page,
  .page-shell,
  .content-shell,
  .app-shell,
  .member-shell,
  .dashboard-shell
) {
  color: var(--bbb-text) !important;
}

html[data-bbb-theme] :is(
  .section-surface,
  .page-section,
  .content-section,
  .member-section
) {
  background-color: var(--bbb-section-bg) !important;
  color: var(--bbb-text) !important;
}

/* Hero / banners: background-color only so configured images remain visible. */
html[data-bbb-theme] :is(
  .hero,
  .page-hero,
  .masthead,
  .intro-hero,
  .member-hero,
  .journey-hero,
  .appointments-hero,
  .messages-hero,
  .bv-hero
) {
  background-color: var(--bbb-hero-bg) !important;
  color: var(--bbb-hero-text) !important;
  border-color: var(--bbb-border) !important;
}

html[data-bbb-theme] :is(
  .hero h1,.hero h2,.hero h3,.hero p,
  .page-hero h1,.page-hero h2,.page-hero h3,.page-hero p,
  .masthead h1,.masthead h2,.masthead h3,.masthead p,
  .member-hero h1,.member-hero h2,.member-hero p,
  .journey-hero h1,.journey-hero h2,.journey-hero p,
  .appointments-hero h1,.appointments-hero h2,.appointments-hero p,
  .messages-hero h1,.messages-hero h2,.messages-hero p
) {
  color: var(--bbb-hero-text) !important;
}

html[data-bbb-theme] :is(
  .hero .eyebrow,
  .page-hero .eyebrow,
  .masthead .eyebrow,
  .member-hero .eyebrow,
  .journey-hero .eyebrow,
  .appointments-hero .eyebrow,
  .messages-hero .eyebrow
) {
  color: var(--bbb-hero-accent) !important;
}

/* Cards, panels, boxes and dynamically-created blocks */
html[data-bbb-theme] :is(
  .card,.box,.panel,.tile,.modal-panel,.dialog,.dialog-card,
  .profile-card,.profile-section,.appointment-card,.treatment-card,
  .journey-card,.journey-panel,.journey-detail-section,.article-card,
  .service-card,.trip-card,.planner-card,.request-card,.message-card,
  .conversation-card,.settings-card,.offer-card,.package-card,.price-card,
  .comparison-card,.clinical-photo-card,.push-notification-settings,
  .account-notification-row,.data-card,
  [class$="-card"],[class$="-panel"],[class$="-box"],[class$="-tile"]
) {
  background-color: var(--bbb-card-bg) !important;
  color: var(--bbb-card-text) !important;
  border-color: var(--bbb-border) !important;
}

html[data-bbb-theme] :is(
  .card,.box,.panel,.tile,
  [class$="-card"],[class$="-panel"],[class$="-box"],[class$="-tile"]
) :is(h1,h2,h3,h4,h5,h6,strong) {
  color: var(--bbb-card-text) !important;
}

/* Soft / secondary surfaces */
html[data-bbb-theme] :is(
  .soft,.sub-panel,.inner-card,.empty,.empty-admin,.status-box,
  .form-note,.security-note,.muted-box,.summary-box,.filter-bar,
  .toolbar,.tabs,.tab-list
) {
  background-color: var(--bbb-surface-alt) !important;
  color: var(--bbb-muted) !important;
  border-color: var(--bbb-border) !important;
}

/* Typography */
html[data-bbb-theme] :is(h1,h2,h3,h4,h5,h6,strong,.title,.heading) {
  color: var(--bbb-text) !important;
}

html[data-bbb-theme] :is(.muted,.subtitle,.description,.meta,.helper,.hint,small) {
  color: var(--bbb-muted) !important;
}

html[data-bbb-theme] :is(.eyebrow,.category,.accent,.gold,[class*="eyebrow"]) {
  color: var(--bbb-accent) !important;
}

html[data-bbb-theme] a:not(.primary):not(.btn-primary):not(.button-primary) {
  color: var(--bbb-link);
}

/* Forms */
html[data-bbb-theme] :is(input,select,textarea) {
  background-color: var(--bbb-input-bg) !important;
  color: var(--bbb-input-text) !important;
  border-color: var(--bbb-border) !important;
}

html[data-bbb-theme] :is(input,textarea)::placeholder {
  color: var(--bbb-muted) !important;
  opacity: .78 !important;
}

html[data-bbb-theme] :is(input,select,textarea):focus {
  outline-color: var(--bbb-accent) !important;
  border-color: var(--bbb-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--bbb-accent-rgb),.18) !important;
}

/* Primary actions */
html[data-bbb-theme] :is(
  button.primary,.primary-action,.button-primary,.btn-primary,
  .submit-button,.booking-button,button[type="submit"]
) {
  background-color: var(--bbb-button-bg) !important;
  color: var(--bbb-button-text) !important;
  border-color: var(--bbb-button-bg) !important;
  box-shadow: var(--bbb-gold-glow) !important;
}

html[data-bbb-theme] :is(
  button.primary,.primary-action,.button-primary,.btn-primary,
  .submit-button,.booking-button,button[type="submit"]
):hover {
  background-color: var(--bbb-accent-hover) !important;
  border-color: var(--bbb-accent-hover) !important;
}

/* Secondary actions */
html[data-bbb-theme] :is(
  button.secondary,.secondary-action,.button-secondary,.btn-secondary
) {
  background-color: var(--bbb-button-secondary-bg) !important;
  color: var(--bbb-button-secondary-text) !important;
  border-color: var(--bbb-border) !important;
}

/* Notifications */
html[data-bbb-theme] :is(
  .unified-notification-panel,.notification-card,.notification-item,
  .bbb-notification-popup,.staff-alert-panel,.push-notification-settings
) {
  background-color: var(--bbb-notification-bg) !important;
  color: var(--bbb-notification-text) !important;
  border-color: var(--bbb-border) !important;
}

html[data-bbb-theme] :is(
  .unified-notification-panel,.notification-card,.notification-item,
  .bbb-notification-popup,.staff-alert-panel
) :is(h1,h2,h3,h4,p,span,strong,small,button,a) {
  color: var(--bbb-notification-text) !important;
}

html[data-bbb-theme] :is(.unified-notification-count,.staff-alert-badge,.badge-accent) {
  background-color: var(--bbb-accent) !important;
  color: var(--bbb-button-text) !important;
  border-color: var(--bbb-notification-bg) !important;
}

/* Status colours */
html[data-bbb-theme] :is(.success,.is-success,[data-status="success"],[data-status="completed"]) {
  color: var(--bbb-success) !important;
  border-color: var(--bbb-success) !important;
}
html[data-bbb-theme] :is(.warning,.is-warning,[data-status="warning"],[data-status="pending"]) {
  color: var(--bbb-warning) !important;
  border-color: var(--bbb-warning) !important;
}
html[data-bbb-theme] :is(.danger,.is-danger,.error,[data-status="danger"],[data-status="error"],[data-status="cancelled"]) {
  color: var(--bbb-danger) !important;
  border-color: var(--bbb-danger) !important;
}

/* Tables / dividers */
html[data-bbb-theme] :is(table,thead,tbody,tr,th,td,hr,.divider,.separator) {
  border-color: var(--bbb-border) !important;
}
html[data-bbb-theme] th {
  background-color: var(--bbb-surface-alt) !important;
  color: var(--bbb-text) !important;
}
html[data-bbb-theme] td {
  background-color: var(--bbb-card-bg) !important;
  color: var(--bbb-card-text) !important;
}

/* Treatments top offers area - independent controls */
html[data-bbb-theme] .offer-showcase:not(.is-vacation) {
  background: var(--bbb-treatments-top-bg) !important;
  color: var(--bbb-treatments-top-text) !important;
}
html[data-bbb-theme] .offer-showcase:not(.is-vacation) :is(h1,h2,h3,h4,strong,p) {
  color: var(--bbb-treatments-top-text) !important;
}
html[data-bbb-theme] .offer-showcase:not(.is-vacation) :is(.eyebrow,.offer-card-price strong) {
  color: var(--bbb-treatments-top-accent) !important;
}

/* Footer */
html[data-bbb-theme] :is(.site-footer,footer) {
  background-color: var(--bbb-footer-bg) !important;
  color: var(--bbb-footer-text) !important;
  border-color: var(--bbb-border) !important;
}
html[data-bbb-theme] :is(.site-footer,footer) :is(a,p,span,strong,small) {
  color: var(--bbb-footer-text) !important;
}

/* Luminous brand treatment */
html[data-bbb-theme] :is(h1,h2,h3,.brand-copy strong) {
  text-shadow: var(--bbb-text-glow) !important;
}

/* Do not alter media pixels. */
html[data-bbb-theme] :is(img,video,canvas,svg,picture) {
  filter: none;
}