/*
 * D14.9 R1C — GLOBAL SEMANTIC THEME PROPAGATION
 * ------------------------------------------------------------
 * Final public-runtime theme authority.
 *
 * Goal:
 *   Make the selected Project Theme propagate across legacy/public modules
 *   that still carry older fixed colors or module-specific palettes.
 *
 * Safety:
 *   - Structural/layout rules are not replaced.
 *   - Semantic status meaning is preserved:
 *       success / warning / danger / emergency.
 *   - Theme Studio / Admin UI is intentionally not targeted.
 *   - Page-builder components keep their explicit authoring semantics, but
 *     generic surfaces/buttons/forms inherit project theme tokens.
 */

:root {
    --semantic-primary: var(--theme-primary, #0f6972);
    --semantic-secondary: var(--theme-secondary, #69be45);
    --semantic-accent: var(--theme-accent, #0e8ad8);
    --semantic-background: var(--theme-background, #f7fbfc);
    --semantic-surface: var(--theme-surface, #ffffff);
    --semantic-text: var(--theme-text, #123b45);
    --semantic-muted: var(--theme-muted, #667a80);
    --semantic-border: var(
        --theme-border,
        color-mix(in srgb, var(--semantic-text) 13%, transparent)
    );
    --semantic-primary-strong:
        color-mix(in srgb, var(--semantic-primary) 78%, #000);
    --semantic-primary-soft:
        color-mix(in srgb, var(--semantic-primary) 9%, var(--semantic-surface));
    --semantic-secondary-soft:
        color-mix(in srgb, var(--semantic-secondary) 11%, var(--semantic-surface));
    --semantic-accent-soft:
        color-mix(in srgb, var(--semantic-accent) 10%, var(--semantic-surface));
    --semantic-surface-alt:
        color-mix(in srgb, var(--semantic-background) 72%, var(--semantic-surface));
    --semantic-on-primary: var(--site-action-text, #ffffff);
    --semantic-focus:
        var(
            --theme-focus-ring,
            color-mix(in srgb, var(--semantic-primary) 28%, transparent)
        );
    --semantic-shadow:
        var(
            --theme-shadow,
            0 14px 34px color-mix(in srgb, var(--semantic-text) 10%, transparent)
        );
}

/* ============================================================
   GLOBAL PUBLIC SURFACE CONTRACT
============================================================ */

main,
.public-page,
.news-experience-page,
.news-page-content,
.news-details-page,
.news-article-shell,
.doctor-directory,
.doctor-details,
.doctor-booking,
.unified-booking-page,
.booking-status-page,
.patient-service-page,
.magazine-page-content,
.magazine-details-page {
    color: var(--semantic-text);
}

.news-page-content,
.news-details-page,
.news-article-shell,
.doctor-directory,
.doctor-details,
.doctor-booking,
.unified-booking-page,
.booking-status-page,
.patient-service-page,
.magazine-page-content,
.magazine-details-page {
    background-color: var(--semantic-background);
}

.news-card,
.news-modern-card,
.news-feature-story,
.news-aside-card,
.doctor-directory-card,
.doctor-info-grid article,
.doctor-review-form,
.doctor-reviews article,
.booking-form-section,
.booking-success-card,
.booking-empty-state,
.booking-status-shell,
.booking-status-result,
.patient-service-card,
.magazine-card,
.magazine-details-content,
.home-content-card,
.home-upcoming-card,
.home-editorial-panel,
.latest-news-panel,
.site-card,
.card {
    background-color: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
    box-shadow: var(--semantic-shadow);
}

.news-card h1,
.news-card h2,
.news-card h3,
.news-modern-card h1,
.news-modern-card h2,
.news-modern-card h3,
.news-details-header h1,
.news-article-header h1,
.doctor-directory h1,
.doctor-directory h2,
.doctor-details h1,
.doctor-details h2,
.doctor-card-body h2,
.booking-page-header h1,
.booking-section-heading h2,
.booking-success-card h1,
.booking-status-header h1,
.booking-status-result h2,
.patient-service-card h2,
.patient-service-section-heading h2,
.magazine-page-hero h1,
.magazine-card h2,
.magazine-card h3,
.magazine-details-page h1,
.home-section-heading h2,
.home-card-header h2 {
    color: var(--semantic-text) !important;
}

.news-card p,
.news-modern-card p,
.news-details-summary,
.news-details-meta,
.news-meta-line,
.news-article-deck,
.news-article-author,
.news-article-content,
.doctor-card-body > p,
.doctor-info-grid p,
.doctor-reviews time,
.booking-page-header p,
.booking-section-heading p,
.booking-success-card p,
.booking-status-header p,
.patient-service-card p,
.magazine-card p,
.magazine-summary,
.text-muted,
.muted {
    color: var(--semantic-muted) !important;
}

.news-read-more,
.news-back-link,
.news-breadcrumb a,
.news-modern-breadcrumb a,
.news-card-link,
.news-section-heading > a,
.doctor-back,
.doctor-card-body h2 a,
.booking-back-link,
.patient-service-card a,
.patient-service-section-heading a,
.magazine-breadcrumb a,
.magazine-card-actions a,
.home-card-header a,
.home-section-heading > a {
    color: var(--semantic-primary) !important;
}

.news-read-more:hover,
.news-back-link:hover,
.news-breadcrumb a:hover,
.news-modern-breadcrumb a:hover,
.news-card-link:hover,
.news-section-heading > a:hover,
.doctor-back:hover,
.doctor-card-body h2 a:hover,
.booking-back-link:hover,
.patient-service-card a:hover,
.patient-service-section-heading a:hover,
.magazine-breadcrumb a:hover,
.magazine-card-actions a:hover,
.home-card-header a:hover,
.home-section-heading > a:hover {
    color: var(--semantic-primary-strong) !important;
}

/* ============================================================
   NEWS — INDEX, DETAILS, HOME PANELS
============================================================ */

.news-page-hero,
.news-experience-hero {
    background:
        radial-gradient(
            circle at 12% 18%,
            color-mix(in srgb, var(--semantic-secondary) 22%, transparent),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--semantic-primary) 92%, #07111f),
            color-mix(in srgb, var(--semantic-secondary) 76%, #07111f)
        ) !important;
}

.news-filter-form,
.news-filter-panel,
.news-search-box,
.news-details-container,
.news-article-main,
.news-aside-card {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.news-filter-form input,
.news-filter-form select,
.news-search-box input {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.news-filter-form button,
.news-search-submit,
.news-primary-link,
.news-pagination .active,
.news-modern-pagination .active,
.news-modern-pagination [aria-current="page"] {
    background: var(--semantic-primary) !important;
    color: var(--semantic-on-primary) !important;
    border-color: var(--semantic-primary) !important;
}

.news-filter-reset,
.news-pagination a,
.news-modern-pagination a,
.news-category-chips a {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.news-category-chips a:hover,
.news-category-chips a.is-active,
.news-modern-pagination a:hover,
.news-pagination a:hover {
    background: var(--semantic-primary) !important;
    color: var(--semantic-on-primary) !important;
    border-color: var(--semantic-primary) !important;
}

.news-card-image span,
.news-details-category,
.news-aside-label,
.news-kicker,
.news-section-heading span,
.news-meta-line span {
    color: var(--semantic-primary) !important;
}

.news-feature-media,
.news-modern-card-media,
.news-image-placeholder {
    background:
        linear-gradient(
            135deg,
            var(--semantic-primary-soft),
            var(--semantic-secondary-soft)
        ) !important;
}

.latest-news-ticker {
    background: var(--semantic-primary) !important;
    color: var(--semantic-on-primary) !important;
    border-color: var(--semantic-primary) !important;
}

.latest-news-ticker > strong,
.latest-news-ticker a {
    color: var(--semantic-on-primary) !important;
}

.latest-news-panel,
.latest-news-center-card,
.home-editorial-panel,
.home-editorial-feature-card,
.home-magazine-feature,
.home-side-promotion {
    background-color: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.latest-news-panel-title,
.latest-news-panel-title a,
.latest-news-side-item strong,
.latest-news-center-card h2,
.home-editorial-panel-title,
.home-editorial-panel-title a,
.home-editorial-news-item strong,
.home-magazine-info strong,
.home-side-promotion strong {
    color: var(--semantic-text) !important;
}

.latest-news-side-item span,
.latest-news-center-icon,
.latest-news-center-card a,
.home-editorial-news-item span,
.home-editorial-feature-icon,
.home-editorial-feature-content a,
.home-magazine-info a,
.home-side-promotion small {
    color: var(--semantic-primary) !important;
}

/* Keep warning/featured meaning semantic rather than brand-derived. */
.news-feature-badge,
.news-card-featured {
    background-color: color-mix(
        in srgb,
        var(--theme-warning, #f59f00) 18%,
        var(--semantic-surface)
    ) !important;
    color: color-mix(
        in srgb,
        var(--theme-warning, #f59f00) 76%,
        #3a2a00
    ) !important;
}

/* ============================================================
   DOCTORS — DIRECTORY + PROFILE/DETAILS
============================================================ */

.doctor-directory-hero,
.doctor-profile-hero {
    color: var(--semantic-on-primary) !important;
    background:
        linear-gradient(
            135deg,
            var(--semantic-primary-strong),
            var(--semantic-primary)
        ) !important;
}

.doctor-directory-hero h1,
.doctor-directory-hero p,
.doctor-profile-hero h1,
.doctor-profile-hero h2,
.doctor-profile-hero p {
    color: var(--semantic-on-primary) !important;
}

.doctor-filters,
.doctor-review-form,
.doctor-info-grid article,
.doctor-slot,
.doctor-reviews article {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.doctor-filters input,
.doctor-filters select,
.doctor-review-form input,
.doctor-review-form select,
.doctor-review-form textarea {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.doctor-filters input:focus,
.doctor-filters select:focus,
.doctor-review-form input:focus,
.doctor-review-form select:focus,
.doctor-review-form textarea:focus {
    border-color: var(--semantic-primary) !important;
    outline-color: var(--semantic-focus) !important;
}

.doctor-specialty-pills a {
    color: var(--semantic-primary) !important;
    background: var(--semantic-primary-soft) !important;
    border-color: var(--semantic-border) !important;
}

.doctor-specialty-pills a:hover,
.doctor-specialty-pills a.active {
    color: var(--semantic-on-primary) !important;
    background: var(--semantic-primary) !important;
    border-color: var(--semantic-primary) !important;
}

.doctor-directory-card {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
    box-shadow: var(--semantic-shadow) !important;
}

.doctor-directory-card:hover {
    border-color: color-mix(
        in srgb,
        var(--semantic-primary) 45%,
        var(--semantic-border)
    ) !important;
}

.doctor-directory-card .doctor-card-body {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
}

.doctor-card-body > small {
    color: var(--semantic-primary) !important;
    background: var(--semantic-primary-soft) !important;
}

.doctor-card-body h2,
.doctor-card-body h2 a,
.doctor-fee,
.doctor-info-grid h2,
.doctor-reviews h2,
.doctor-review-form h2,
.doctor-section-heading h2 {
    color: var(--semantic-text) !important;
}

.doctor-card-body > p,
.doctor-stars small,
.doctor-info-grid p,
.doctor-reviews time,
.doctor-section-heading p {
    color: var(--semantic-muted) !important;
}

.doctor-stars span {
    color: var(--theme-warning, #f59f00) !important;
}

.doctor-actions a.primary,
.doctor-main-book,
.doctor-review-form button,
.doctor-filters button {
    background: var(--semantic-primary) !important;
    border-color: var(--semantic-primary) !important;
    color: var(--semantic-on-primary) !important;
}

.doctor-actions a:not(.primary) {
    background: var(--semantic-surface) !important;
    border-color: var(--semantic-primary) !important;
    color: var(--semantic-primary) !important;
}

.doctor-section-heading > i,
.doctor-next-slot {
    color: var(--semantic-primary) !important;
}

.doctor-success {
    color: color-mix(
        in srgb,
        var(--theme-success, #2f9e44) 76%,
        #073b18
    ) !important;
    background: color-mix(
        in srgb,
        var(--theme-success, #2f9e44) 12%,
        var(--semantic-surface)
    ) !important;
}

.doctor-error {
    color: color-mix(
        in srgb,
        var(--theme-danger, #e03131) 76%,
        #4b0909
    ) !important;
    background: color-mix(
        in srgb,
        var(--theme-danger, #e03131) 11%,
        var(--semantic-surface)
    ) !important;
}

/* ============================================================
   DOCTOR SCHEDULES + HOME UPCOMING APPOINTMENTS
============================================================ */

.doctor-schedule-page {
    background: var(--semantic-background) !important;
    color: var(--semantic-text) !important;
}

.doctor-schedule-filter,
.schedule-board {
    background-color: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.doctor-schedule-filter select,
.doctor-schedule-filter input {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.doctor-schedule-filter button,
.schedule-period-navigation a {
    color: var(--semantic-on-primary) !important;
    background: var(--semantic-primary) !important;
    border-color: var(--semantic-primary) !important;
}

.schedule-board-header h1,
.schedule-board-header h2,
.schedule-doctor-name-wrap strong,
.schedule-slot strong {
    color: var(--semantic-text) !important;
}

.schedule-board-header p,
.schedule-doctor-name-wrap small,
.schedule-slot small,
.schedule-board-footer small {
    color: var(--semantic-muted) !important;
}

.schedule-eyebrow,
.schedule-board-footer a {
    color: var(--semantic-primary) !important;
}

.schedule-matrix th,
.schedule-matrix td,
.schedule-doctor-cell,
.schedule-slot {
    border-color: var(--semantic-border) !important;
}

.schedule-has-slots,
.schedule-slot-bookable {
    background: var(--semantic-primary-soft) !important;
}

.schedule-book-action {
    background: var(--semantic-secondary-soft) !important;
    color: color-mix(
        in srgb,
        var(--semantic-secondary) 72%,
        var(--semantic-text)
    ) !important;
}

.doctor-schedule-relation-hint {
    background: var(--semantic-primary-soft) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.doctor-schedule-relation-hint i {
    color: var(--semantic-primary) !important;
}

.home-upcoming-appointments {
    background:
        linear-gradient(
            180deg,
            var(--semantic-primary-soft),
            var(--semantic-background)
        ) !important;
}

.home-section-heading span,
.home-upcoming-doctor small {
    color: var(--semantic-primary) !important;
}

.home-section-heading h2,
.home-upcoming-doctor strong {
    color: var(--semantic-text) !important;
}

.home-section-heading p,
.home-upcoming-card > p {
    color: var(--semantic-muted) !important;
}

.home-upcoming-card {
    background: var(--semantic-surface) !important;
    border-color: var(--semantic-border) !important;
}

.home-upcoming-doctor img,
.home-upcoming-doctor > span,
.home-upcoming-time {
    background: var(--semantic-primary-soft) !important;
    color: var(--semantic-text) !important;
}

.home-upcoming-book {
    color: var(--semantic-on-primary) !important;
    background: var(--semantic-primary) !important;
}

.home-upcoming-book:hover,
.home-upcoming-book:focus-visible {
    color: var(--semantic-on-primary) !important;
    background: var(--semantic-primary-strong) !important;
}

/* ============================================================
   BOOKING FLOW + BOOKING STATUS
============================================================ */

.unified-booking-page,
.booking-status-page {
    background:
        linear-gradient(
            180deg,
            var(--semantic-primary-soft),
            var(--semantic-background) 24rem
        ) !important;
}

.selected-schedule-summary > div,
.booking-form-section,
.booking-success-card,
.booking-empty-state,
.booking-date-group,
.booking-time-option,
.booking-status-shell,
.booking-status-result,
.booking-status-details > div {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.booking-page-header h1,
.booking-success-card h1,
.booking-section-heading h2,
.booking-date-group h3,
.booking-time-main strong,
.selected-schedule-summary strong,
.booking-status-header h1,
.booking-status-result-heading strong,
.booking-status-current h2,
.booking-status-step h3,
.booking-status-details dd {
    color: var(--semantic-text) !important;
}

.booking-page-header p,
.booking-success-card p,
.booking-section-heading p,
.booking-time-main small,
.booking-time-meta small,
.selected-schedule-summary span,
.booking-reference span,
.booking-consent,
.booking-status-header p,
.booking-status-step p,
.booking-status-details dt,
.booking-status-details small {
    color: var(--semantic-muted) !important;
}

.booking-back-link,
.booking-eyebrow,
.booking-status-eyebrow,
.booking-status-input i {
    color: var(--semantic-primary) !important;
}

.booking-section-heading > span,
.booking-submit-button,
.booking-primary-link,
.booking-status-submit,
.booking-status-primary-link {
    background: var(--semantic-primary) !important;
    color: var(--semantic-on-primary) !important;
    border-color: var(--semantic-primary) !important;
}

.booking-secondary-link,
.booking-status-secondary-link,
.booking-status-home-link {
    background: var(--semantic-surface) !important;
    color: var(--semantic-primary) !important;
    border-color: var(--semantic-primary) !important;
}

.booking-time-option:has(input:checked),
.booking-status-input:focus-within {
    border-color: var(--semantic-primary) !important;
    box-shadow: 0 0 0 3px var(--semantic-focus) !important;
}

.booking-patient-grid input,
.booking-patient-grid textarea,
.booking-status-input,
.booking-status-input input {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

/* Status semantics intentionally preserved. */
.status-pending,
.booking-status-step.pending {
    color: color-mix(in srgb, var(--theme-warning, #f59f00) 78%, #3a2a00) !important;
    background: color-mix(in srgb, var(--theme-warning, #f59f00) 15%, var(--semantic-surface)) !important;
}

.status-confirmed,
.status-completed,
.booking-status-step.done {
    color: color-mix(in srgb, var(--theme-success, #2f9e44) 75%, #073b18) !important;
    background: color-mix(in srgb, var(--theme-success, #2f9e44) 13%, var(--semantic-surface)) !important;
}

.status-cancelled,
.booking-status-terminal.is-danger {
    color: color-mix(in srgb, var(--theme-danger, #e03131) 78%, #4b0909) !important;
    background: color-mix(in srgb, var(--theme-danger, #e03131) 12%, var(--semantic-surface)) !important;
}

/* ============================================================
   PATIENT SERVICES
============================================================ */

.patient-service-page {
    background: var(--semantic-background) !important;
}

.patient-service-hero:not(.patient-service-hero-emergency) {
    background:
        radial-gradient(
            circle at 10% 10%,
            color-mix(in srgb, var(--semantic-secondary) 22%, transparent),
            transparent 32rem
        ),
        linear-gradient(
            135deg,
            var(--semantic-primary-strong),
            var(--semantic-primary)
        ) !important;
}

.turn-service-hero,
.report-service-hero {
    background:
        radial-gradient(
            circle at 85% 20%,
            color-mix(in srgb, var(--semantic-secondary) 20%, transparent),
            transparent 28rem
        ),
        linear-gradient(
            135deg,
            var(--semantic-primary-strong),
            var(--semantic-primary)
        ) !important;
}

/* Emergency remains semantically red/danger. */
.patient-service-hero-emergency {
    background:
        radial-gradient(
            circle at 10% 10%,
            color-mix(in srgb, #fff 16%, transparent),
            transparent 30rem
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--theme-danger, #e03131) 68%, #3f0b11),
            var(--theme-danger, #e03131)
        ) !important;
}

.patient-service-eyebrow,
.patient-service-card > i,
.patient-service-card a,
.patient-service-section-heading span,
.patient-service-section-heading a,
.hospital-specialty-card i {
    color: var(--semantic-primary) !important;
}

.patient-service-card,
.hospital-specialty-card,
.patient-service-form,
.patient-turn-form,
.medical-report-notes {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.patient-service-card h2,
.patient-service-section-heading h2,
.hospital-specialty-card,
.patient-turn-result h2,
.medical-report-notes h2 {
    color: var(--semantic-text) !important;
}

.patient-service-card p,
.patient-service-form label > span:first-child,
.patient-turn-details dt,
.turn-disclaimer {
    color: var(--semantic-muted) !important;
}

.patient-service-form input,
.patient-service-form select,
.patient-service-form textarea,
.patient-turn-form input,
.patient-turn-form select {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.patient-service-form input:focus,
.patient-service-form select:focus,
.patient-service-form textarea:focus {
    border-color: var(--semantic-primary) !important;
    outline-color: var(--semantic-focus) !important;
}

.patient-service-primary,
.patient-turn-form button {
    background: var(--semantic-primary) !important;
    color: var(--semantic-on-primary) !important;
    border-color: var(--semantic-primary) !important;
}

.patient-service-secondary {
    background: var(--semantic-surface) !important;
    color: var(--semantic-primary) !important;
    border-color: var(--semantic-primary) !important;
}

/* ============================================================
   MAGAZINE / EDITORIAL
============================================================ */

.magazine-page-hero {
    color: var(--semantic-on-primary) !important;
    background:
        linear-gradient(
            135deg,
            var(--semantic-primary-strong),
            var(--semantic-primary)
        ) !important;
}

.magazine-page-hero h1,
.magazine-page-hero p {
    color: var(--semantic-on-primary) !important;
}

.magazine-card,
.magazine-details-content,
.magazine-details-cover,
.magazine-article-content {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.magazine-card h2,
.magazine-card h3,
.magazine-details-page h1,
.magazine-article-content h2,
.magazine-article-content h3 {
    color: var(--semantic-text) !important;
}

.magazine-card p,
.magazine-summary {
    color: var(--semantic-muted) !important;
}

.magazine-issue-badge {
    background: var(--semantic-primary-soft) !important;
    color: var(--semantic-primary) !important;
}

/* ============================================================
   HOME / LEGACY CARDS / QUICK SERVICES
============================================================ */

.home-content-section,
.home-editorial-section {
    color: var(--semantic-text);
}

.home-content-card,
.medical-center-item {
    background: var(--semantic-surface) !important;
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.home-card-header {
    border-color: var(--semantic-border) !important;
}

.home-card-header h2 {
    color: var(--semantic-text) !important;
}

.home-card-header h2 i,
.home-card-header a,
.medical-center-item:hover {
    color: var(--semantic-primary) !important;
}

.quick-service-item {
    color: var(--semantic-text) !important;
    border-color: var(--semantic-border) !important;
}

.quick-service-item:hover {
    color: var(--semantic-primary) !important;
    background: var(--semantic-primary-soft) !important;
}

.quick-service-icon {
    color: var(--semantic-primary) !important;
}

/* ============================================================
   GENERIC CMS / PAGE BUILDER RUNTIME
============================================================ */

.visual-page,
.visual-section,
.builder-feature-section,
.builder-metric-item,
.builder-feature-item,
.visual-table-wrap,
.dynamic-chat-widget,
.dynamic-contact-dock,
.dynamic-lead-widget,
.builder-location-widget {
    color: var(--semantic-text);
}

.builder-metric-item,
.builder-feature-item,
.visual-table-wrap,
.dynamic-chat-widget,
.dynamic-contact-dock,
.dynamic-lead-widget,
.builder-location-widget {
    background-color: var(--semantic-surface);
    border-color: var(--semantic-border);
}

.visual-heading,
.builder-feature-item h2,
.builder-feature-item h3,
.builder-metric-item strong {
    color: var(--semantic-text);
}

.visual-button-primary,
.dynamic-lead-widget button[type="submit"] {
    background: var(--semantic-primary) !important;
    border-color: var(--semantic-primary) !important;
    color: var(--semantic-on-primary) !important;
}

.visual-button-secondary,
.visual-button-outline {
    background: var(--semantic-surface) !important;
    border-color: var(--semantic-primary) !important;
    color: var(--semantic-primary) !important;
}

/* ============================================================
   GLOBAL FORM / FOCUS CONTRACT
============================================================ */

main input:not([type="checkbox"]):not([type="radio"]),
main select,
main textarea {
    background-color: var(--semantic-surface);
    color: var(--semantic-text);
    border-color: var(--semantic-border);
}

main input:focus,
main select:focus,
main textarea:focus,
main button:focus-visible,
main a:focus-visible {
    outline-color: var(--semantic-focus);
}

/* Do not force theme colors into media itself. */
img,
picture,
video,
canvas {
    color: inherit;
}

/* Reduced motion stays respected after final override layer. */
@media (prefers-reduced-motion: reduce) {
    .news-modern-card,
    .doctor-directory-card,
    .home-upcoming-card,
    .patient-service-card {
        transition: none !important;
    }
}

/* ============================================================
   D14.10B — DEEP THEME PROPAGATION
   Doctor schedules + nested runtime descendants.

   Rule:
   Theme semantic tokens remain the authority, while schedule-specific
   semantic variables preserve readable light/dark relationships.
============================================================ */

.schedule-board {
    --schedule-bg:
        color-mix(in srgb, var(--semantic-primary) 88%, #071923);
    --schedule-overlay:
        color-mix(in srgb, var(--semantic-primary) 72%, #06131b);
    --schedule-header-bg:
        color-mix(in srgb, var(--semantic-primary) 82%, #081923);
    --schedule-header-text: var(--semantic-on-primary);
    --schedule-doctor-bg:
        color-mix(in srgb, var(--semantic-primary) 72%, #07151d);
    --schedule-doctor-text: var(--semantic-on-primary);
    --schedule-day-bg: var(--semantic-surface);
    --schedule-day-text: var(--semantic-text);
    --schedule-slot-bg: var(--semantic-primary-soft);
    --schedule-slot-text:
        color-mix(in srgb, var(--semantic-primary) 78%, var(--semantic-text));
    --schedule-empty-bg: var(--semantic-surface-alt);
    --schedule-empty-text: var(--semantic-muted);
    --schedule-border: var(--semantic-border);
    --schedule-accent: var(--semantic-accent);

    color: var(--schedule-header-text) !important;
    background: var(--schedule-bg) !important;
    border-color: color-mix(in srgb, var(--schedule-border) 65%, transparent) !important;
}

.schedule-board-overlay {
    background: var(--schedule-overlay) !important;
}

.schedule-board-header h1,
.schedule-board-header h2,
.schedule-board-header p,
.schedule-board-header strong,
.schedule-board-header span,
.schedule-board-header small {
    color: var(--schedule-header-text) !important;
    -webkit-text-fill-color: var(--schedule-header-text) !important;
}

.schedule-board-header p,
.schedule-board-header small {
    opacity: .90;
}

.schedule-eyebrow {
    color: var(--schedule-accent) !important;
    -webkit-text-fill-color: var(--schedule-accent) !important;
}

.schedule-matrix thead th,
.schedule-matrix thead th span,
.schedule-matrix thead th small {
    color: var(--schedule-header-text) !important;
    -webkit-text-fill-color: var(--schedule-header-text) !important;
    background: var(--schedule-header-bg) !important;
}

.schedule-specialty-row th,
.schedule-specialty-row th * {
    color: var(--schedule-header-text) !important;
    -webkit-text-fill-color: var(--schedule-header-text) !important;
    background:
        color-mix(in srgb, var(--schedule-header-bg) 82%, var(--schedule-accent)) !important;
    border-inline-start-color: var(--schedule-accent) !important;
}

.schedule-doctor-cell,
.schedule-doctor-cell * {
    color: var(--schedule-doctor-text) !important;
    -webkit-text-fill-color: var(--schedule-doctor-text) !important;
}

.schedule-doctor-cell {
    background: var(--schedule-doctor-bg) !important;
}

.schedule-doctor-name-wrap img {
    background: var(--semantic-surface) !important;
    border: 2px solid color-mix(in srgb, var(--schedule-header-text) 22%, transparent);
}

.schedule-has-slots {
    background: var(--schedule-day-bg) !important;
    color: var(--schedule-day-text) !important;
}

.schedule-has-slots > *,
.schedule-has-slots strong,
.schedule-has-slots span,
.schedule-has-slots small {
    color: var(--schedule-day-text) !important;
    -webkit-text-fill-color: var(--schedule-day-text) !important;
}

.schedule-slot,
.schedule-slot * {
    color: var(--schedule-slot-text) !important;
    -webkit-text-fill-color: var(--schedule-slot-text) !important;
}

.schedule-slot {
    background: var(--schedule-slot-bg) !important;
    border-color: var(--schedule-border) !important;
    border-inline-start-color: var(--schedule-accent) !important;
}

.schedule-empty-cell,
.schedule-empty-cell * {
    color: var(--schedule-empty-text) !important;
    -webkit-text-fill-color: var(--schedule-empty-text) !important;
    background: var(--schedule-empty-bg) !important;
}

.schedule-book-action,
.schedule-book-action * {
    color: var(--semantic-primary) !important;
    -webkit-text-fill-color: var(--semantic-primary) !important;
}

.schedule-book-action {
    background: color-mix(in srgb, var(--semantic-primary) 9%, var(--semantic-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--semantic-primary) 24%, var(--semantic-border)) !important;
}

.schedule-book-action:hover,
.schedule-book-action:focus-visible {
    color: var(--semantic-on-primary) !important;
    -webkit-text-fill-color: var(--semantic-on-primary) !important;
    background: var(--semantic-primary) !important;
}

.schedule-board-footer,
.schedule-board-footer * {
    color: var(--schedule-header-text) !important;
    -webkit-text-fill-color: var(--schedule-header-text) !important;
}

.schedule-board-footer {
    background:
        color-mix(in srgb, var(--schedule-header-bg) 84%, transparent) !important;
}

.schedule-period-navigation a,
.schedule-period-navigation a * ,
.doctor-schedule-filter button,
.doctor-schedule-filter button * {
    color: var(--semantic-on-primary) !important;
    -webkit-text-fill-color: var(--semantic-on-primary) !important;
}

.doctor-schedule-filter label,
.doctor-schedule-filter strong,
.doctor-schedule-filter span {
    color: var(--semantic-text) !important;
}

/* Doctors — force nested legacy text to the active semantic palette. */
.doctor-directory-card .doctor-card-body h2,
.doctor-directory-card .doctor-card-body h2 a,
.doctor-directory-card .doctor-card-body strong,
.doctor-directory-card .doctor-fee {
    color: var(--semantic-text) !important;
    -webkit-text-fill-color: var(--semantic-text) !important;
}

.doctor-directory-card .doctor-card-body p,
.doctor-directory-card .doctor-card-body > small,
.doctor-directory-card .doctor-card-body .doctor-next-slot,
.doctor-directory-card .doctor-card-body .doctor-card-meta {
    color: var(--semantic-muted) !important;
    -webkit-text-fill-color: var(--semantic-muted) !important;
}

.doctor-directory-card .doctor-actions a.primary,
.doctor-directory-card .doctor-actions a.primary *,
.doctor-main-book,
.doctor-main-book * {
    color: var(--semantic-on-primary) !important;
    -webkit-text-fill-color: var(--semantic-on-primary) !important;
    background: var(--semantic-primary) !important;
    border-color: var(--semantic-primary) !important;
}

.doctor-directory-card .doctor-actions a:not(.primary),
.doctor-directory-card .doctor-actions a:not(.primary) * {
    color: var(--semantic-primary) !important;
    -webkit-text-fill-color: var(--semantic-primary) !important;
    background: var(--semantic-surface) !important;
    border-color: var(--semantic-primary) !important;
}

/* News/editorial — nested descendants inherit semantic text consistently. */
.news-modern-card h2,
.news-modern-card h3,
.news-modern-card h2 a,
.news-modern-card h3 a,
.news-card h2,
.news-card h3,
.news-card h2 a,
.news-card h3 a,
.latest-news-panel strong,
.latest-news-center-card h2,
.home-editorial-news-item strong {
    color: var(--semantic-text) !important;
    -webkit-text-fill-color: var(--semantic-text) !important;
}

.news-modern-card p,
.news-modern-card small,
.news-card p,
.news-card small,
.latest-news-panel small,
.home-editorial-news-item span {
    color: var(--semantic-muted) !important;
    -webkit-text-fill-color: var(--semantic-muted) !important;
}

/* Generic primary actions that still contain nested legacy colors. */
main .btn-primary,
main .btn-primary *,
main [class*="book"] button,
main [class*="book"] button *,
main [class*="booking"] .theme-primary-action,
main [class*="booking"] .theme-primary-action * {
    color: var(--semantic-on-primary) !important;
    -webkit-text-fill-color: var(--semantic-on-primary) !important;
}

/* ============================================================
   D14.10C — GENERIC PROJECT-SCOPED SEMANTIC ROLE CONTRACT
   ------------------------------------------------------------
   This stylesheet is intentionally project-agnostic.

   It never encodes a project/company/hospital name or a fixed brand.
   Each public site receives its own active project theme variables.
   Shared CSS only maps UI PURPOSE -> semantic theme role.

   Critical distinction:
   - Primary CTA / booking / continue actions = BRAND PRIMARY
   - Success / confirmed / completed states = SUCCESS
   - Warning / pending states = WARNING
   - Danger / emergency / destructive actions = DANGER
============================================================ */

:root {
    --role-primary-action-bg: var(--semantic-primary);
    --role-primary-action-fg: var(--semantic-on-primary);
    --role-primary-action-hover:
        color-mix(in srgb, var(--semantic-primary) 84%, #000);

    --role-secondary-action-bg: var(--semantic-surface);
    --role-secondary-action-fg: var(--semantic-primary);
    --role-secondary-action-border: var(--semantic-primary);

    --role-available-bg: var(--semantic-primary-soft);
    --role-available-fg:
        color-mix(in srgb, var(--semantic-primary) 72%, var(--semantic-text));
    --role-available-border:
        color-mix(in srgb, var(--semantic-primary) 34%, var(--semantic-border));

    --role-confirmed-bg:
        color-mix(in srgb, var(--theme-success, #2f9e44) 13%, var(--semantic-surface));
    --role-confirmed-fg:
        color-mix(in srgb, var(--theme-success, #2f9e44) 76%, #073b18);

    --role-pending-bg:
        color-mix(in srgb, var(--theme-warning, #f59f00) 15%, var(--semantic-surface));
    --role-pending-fg:
        color-mix(in srgb, var(--theme-warning, #f59f00) 78%, #3a2a00);

    --role-danger-bg: var(--theme-danger, #e03131);
    --role-danger-fg: #ffffff;
}

/* Primary brand actions — never map these to success colors. */
.booking-submit-button,
.booking-primary-link,
.booking-status-submit,
.booking-status-primary-link,
.doctor-main-book,
.doctor-actions a.primary,
.doctor-filters button,
.doctor-review-form button,
.doctor-schedule-filter button,
.schedule-period-navigation a,
.home-upcoming-book,
.news-search-submit,
.news-primary-link,
.patient-service-primary,
.patient-turn-form button,
.visual-button-primary,
.dynamic-lead-widget button[type="submit"],
main .btn-primary,
main button.btn-primary {
    background: var(--role-primary-action-bg) !important;
    border-color: var(--role-primary-action-bg) !important;
    color: var(--role-primary-action-fg) !important;
    -webkit-text-fill-color: var(--role-primary-action-fg) !important;
}

.booking-submit-button *,
.booking-primary-link *,
.booking-status-submit *,
.booking-status-primary-link *,
.doctor-main-book *,
.doctor-actions a.primary *,
.doctor-filters button *,
.doctor-review-form button *,
.doctor-schedule-filter button *,
.schedule-period-navigation a *,
.home-upcoming-book *,
.news-search-submit *,
.news-primary-link *,
.patient-service-primary *,
.patient-turn-form button *,
.visual-button-primary *,
.dynamic-lead-widget button[type="submit"] *,
main .btn-primary *,
main button.btn-primary * {
    color: var(--role-primary-action-fg) !important;
    -webkit-text-fill-color: var(--role-primary-action-fg) !important;
}

.booking-submit-button:hover,
.booking-submit-button:focus-visible,
.doctor-main-book:hover,
.doctor-main-book:focus-visible,
.doctor-actions a.primary:hover,
.home-upcoming-book:hover,
.news-primary-link:hover,
.patient-service-primary:hover,
main .btn-primary:hover,
main .btn-primary:focus-visible {
    background: var(--role-primary-action-hover) !important;
    border-color: var(--role-primary-action-hover) !important;
}

/* Secondary / outline actions. */
.booking-secondary-link,
.booking-status-secondary-link,
.booking-status-home-link,
.patient-service-secondary,
.visual-button-secondary,
.visual-button-outline,
.doctor-actions a:not(.primary),
main .btn-outline-primary {
    background: var(--role-secondary-action-bg) !important;
    color: var(--role-secondary-action-fg) !important;
    -webkit-text-fill-color: var(--role-secondary-action-fg) !important;
    border-color: var(--role-secondary-action-border) !important;
}

/* Available/selectable is a brand-soft state, NOT a success state. */
.schedule-slot,
.schedule-has-slots .schedule-slot,
.booking-time-option,
.booking-date-group .booking-time-option,
.home-upcoming-time {
    background: var(--role-available-bg) !important;
    border-color: var(--role-available-border) !important;
}

.schedule-slot,
.schedule-slot *,
.booking-time-option,
.booking-time-option *,
.home-upcoming-time,
.home-upcoming-time * {
    color: var(--role-available-fg) !important;
    -webkit-text-fill-color: var(--role-available-fg) !important;
}

/* Confirmed/completed are the only ordinary booking states that use Success. */
.status-confirmed,
.status-completed,
.booking-status-step.done,
.booking-confirmed,
.booking-completed {
    background: var(--role-confirmed-bg) !important;
    color: var(--role-confirmed-fg) !important;
    -webkit-text-fill-color: var(--role-confirmed-fg) !important;
}

/* Pending remains warning. */
.status-pending,
.booking-status-step.pending {
    background: var(--role-pending-bg) !important;
    color: var(--role-pending-fg) !important;
    -webkit-text-fill-color: var(--role-pending-fg) !important;
}

/* Emergency/destructive remains Danger, independent from project brand. */
.btn-danger,
.patient-service-hero-emergency .btn,
.booking-status-terminal.is-danger {
    background: var(--role-danger-bg) !important;
    border-color: var(--role-danger-bg) !important;
    color: var(--role-danger-fg) !important;
    -webkit-text-fill-color: var(--role-danger-fg) !important;
}

/* Schedule board may use brand-deep surfaces, but actions still use brand primary. */
.schedule-board {
    --schedule-bg:
        color-mix(in srgb, var(--semantic-primary) 88%, #071923);
    --schedule-header-bg:
        color-mix(in srgb, var(--semantic-primary) 82%, #081923);
    --schedule-doctor-bg:
        color-mix(in srgb, var(--semantic-primary) 72%, #07151d);
    --schedule-accent: var(--semantic-accent);
}

.schedule-book-action {
    background: var(--role-available-bg) !important;
    border-color: var(--role-available-border) !important;
    color: var(--role-primary-action-bg) !important;
    -webkit-text-fill-color: var(--role-primary-action-bg) !important;
}

.schedule-book-action:hover,
.schedule-book-action:focus-visible {
    background: var(--role-primary-action-bg) !important;
    border-color: var(--role-primary-action-bg) !important;
    color: var(--role-primary-action-fg) !important;
    -webkit-text-fill-color: var(--role-primary-action-fg) !important;
}