/* ============================================================
   CinemaAccess – accessibility and high contrast overrides
   Loaded after page-specific CSS.

   Purpose:
   - Keep high contrast readable across public, account, and admin pages.
   - Avoid harsh white borders and sharp blocks.
   - Use a stable palette: near-black background, dark surfaces,
     white text, yellow active states with black text.
   ============================================================ */

html.ca-high-contrast {
    color-scheme: dark;

    --hc-bg: #05070a;
    --hc-bg-deep: #000000;
    --hc-surface: #101418;
    --hc-surface-2: #151a20;
    --hc-surface-3: #1c232b;
    --hc-text: #f8fafc;
    --hc-muted: #d7dee8;
    --hc-soft: #b8c2cf;
    --hc-accent: #ffe600;
    --hc-accent-hover: #fff36d;
    --hc-accent-soft: rgba(255, 230, 0, 0.14);
    --hc-border: #2d3742;
    --hc-border-strong: #465462;
    --hc-danger: #ffb4a8;
    --hc-danger-bg: #34110e;
    --hc-success: #b7f7ce;
    --hc-success-bg: #062f17;
    --hc-focus: #ffe600;

    /* CinemaAccess tokens */
    --blue: var(--hc-accent);
    --blue-dark: var(--hc-accent-hover);
    --blue-light: var(--hc-accent-soft);
    --gray-50: var(--hc-bg);
    --gray-100: var(--hc-surface);
    --gray-200: var(--hc-border);
    --gray-300: var(--hc-border-strong);
    --gray-400: var(--hc-soft);
    --gray-500: var(--hc-soft);
    --gray-600: var(--hc-muted);
    --gray-700: var(--hc-text);
    --gray-900: var(--hc-text);
    --green: var(--hc-success);
    --purple: var(--hc-accent);
    --orange: var(--hc-accent);
    --brand-yellow: var(--hc-accent);
    --brand-yellow-strong: var(--hc-accent-hover);
    --brand-yellow-soft: var(--hc-accent-soft);
    --brand-cream: var(--hc-bg);
    --brand-cream-2: var(--hc-surface);
    --brand-offwhite: var(--hc-surface);
    --brand-white: var(--hc-surface);
    --brand-ink: var(--hc-text);
    --brand-border: var(--hc-border);
    --border-soft: var(--hc-border);
    --danger: var(--hc-danger);
    --danger-soft: rgba(255, 180, 168, 0.14);
    --text-main: var(--hc-text);
    --text-soft: var(--hc-muted);
    --text-light: var(--hc-soft);
    --shadow: none;
    --shadow-sm: none;
    --shadow-soft: none;
    --shadow-strong: none;

    /* Admin tokens */
    --admin-bg: var(--hc-bg);
    --admin-surface: var(--hc-surface);
    --admin-surface-2: var(--hc-surface-2);
    --admin-border: var(--hc-border);
    --admin-border-strong: var(--hc-border-strong);
    --admin-text: var(--hc-text);
    --admin-text-soft: var(--hc-muted);
    --admin-text-muted: var(--hc-soft);
    --admin-brand: var(--hc-accent);
    --admin-brand-strong: var(--hc-accent-hover);
    --admin-brand-soft: var(--hc-accent-soft);
    --admin-success: var(--hc-success);
    --admin-success-soft: rgba(183, 247, 206, 0.14);
    --admin-danger: var(--hc-danger);
    --admin-danger-soft: rgba(255, 180, 168, 0.14);
    --admin-info: var(--hc-accent);
    --admin-shadow-sm: none;
    --admin-shadow-md: none;
    --admin-shadow-lg: none;

    /* Admin tools tokens */
    --tool-bg: var(--hc-bg);
    --tool-surface: var(--hc-surface);
    --tool-border: var(--hc-border);
    --tool-border-strong: var(--hc-border-strong);
    --tool-text: var(--hc-text);
    --tool-text-soft: var(--hc-muted);
    --tool-brand: var(--hc-accent);
    --tool-brand-soft: var(--hc-accent-soft);
    --tool-danger: var(--hc-danger);
    --tool-danger-soft: rgba(255, 180, 168, 0.14);
    --tool-success: var(--hc-success);
    --tool-success-soft: rgba(183, 247, 206, 0.14);
}

html.ca-high-contrast,
html.ca-high-contrast body,
html.ca-high-contrast .ca-page,
html.ca-high-contrast .admin-page,
html.ca-high-contrast .db-page,
html.ca-high-contrast .adb-page {
    background: var(--hc-bg) !important;
    color: var(--hc-text) !important;
}

html.ca-high-contrast body {
    background-image: none !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.ca-high-contrast ::selection {
    background: var(--hc-accent) !important;
    color: var(--hc-bg-deep) !important;
}

/* Remove gradients/light panels that caused white-on-cream text. */
html.ca-high-contrast :where(
    .admin-page,
    .adb-page,
    .admin-header,
    .admin-card--soft,
    .db-main,
    .mv-hero,
    .mv-body,
    .mv-sessions
) {
    background-image: none !important;
}

/* Core surfaces: dark panels, softer radius, subtle borders. */
html.ca-high-contrast :where(
    .ca-nav,
    .ca-footer,
    .ca-sidebar,
    .ca-movie-card,
    .ca-session-group,
    .ca-session-cinema-block,
    .ca-session-slot,
    .ca-cinema-card,
    .ca-empty-state,
    .ca-page > .container > form,
    .mv-cinema-block,
    .mv-poster-wrap,
    .mv-poster-placeholder,
    .auth-card,
    .contact-card,
    .message,
    .db-sidebar,
    .db-main,
    .db-topbar,
    .db-section,
    .db-stat-card,
    .db-next-card,
    .db-overview-block,
    .db-movie-card,
    .db-session-row,
    .db-alert-card,
    .db-settings-card,
    .admin-header,
    .admin-card,
    .admin-table-wrap,
    .adb-panel,
    .adb-queue-card,
    .adb-alert-card,
    .adb-member-card,
    .adb-mini-card
) {
    background: var(--hc-surface) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(
    .ca-sidebar,
    .ca-movie-card,
    .ca-session-group,
    .ca-session-slot,
    .ca-cinema-card,
    .mv-cinema-block,
    .mv-poster-placeholder,
    .auth-card,
    .contact-card,
    .db-section,
    .db-stat-card,
    .db-next-card,
    .db-overview-block,
    .db-movie-card,
    .db-session-row,
    .db-alert-card,
    .db-settings-card,
    .admin-header,
    .admin-card,
    .admin-table-wrap,
    .adb-panel,
    .adb-queue-card,
    .adb-alert-card,
    .adb-member-card,
    .adb-mini-card
) {
    border-radius: 16px !important;
}

html.ca-high-contrast :where(
    .ca-session-movie-header,
    .ca-session-movie-poster-ph,
    .admin-table thead th,
    .admin-table tbody tr,
    .admin-list__item,
    .admin-stat-line,
    .db-brand,
    .db-sidebar-footer,
    .ca-sidebar-section
) {
    background: transparent !important;
    border-color: var(--hc-border) !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(.mv-hero) {
    background: #0b0f14 !important;
    border-bottom: 1px solid var(--hc-border) !important;
}

html.ca-high-contrast :where(.mv-body, .mv-sessions) {
    background: var(--hc-bg) !important;
    border-color: var(--hc-border) !important;
}

/* Text colour reset for hard-coded page CSS. */
html.ca-high-contrast :where(
    h1, h2, h3, h4, h5, h6,
    p, li, label, legend, th, td,
    .ca-logo-name,
    .ca-page-header h1,
    .ca-toolbar-count,
    .ca-movie-card-title,
    .ca-movie-card-title a,
    .ca-sidebar-label,
    .ca-checkbox-item,
    .ca-session-movie-title,
    .ca-session-movie-title a,
    .ca-session-cinema-name,
    .ca-session-slot-time,
    .mv-title,
    .mv-sessions-heading,
    .mv-cinema-name,
    .mv-credit-value,
    .db-brand-name,
    .db-user-name,
    .db-section-title,
    .db-welcome-heading,
    .db-stat-value,
    .db-stat-label,
    .db-block-title,
    .db-movie-card-title,
    .admin-title,
    .admin-card__title,
    .admin-kpi__label,
    .admin-kpi__value,
    .admin-stat-line__label,
    .admin-stat-line__value,
    .admin-list__title,
    .admin-table th,
    .admin-table td,
    .adb-mini-card strong,
    .adb-feed-copy strong,
    .adb-queue-card h3,
    .adb-alert-card h3,
    .adb-member-card h3
) {
    color: var(--hc-text) !important;
}

html.ca-high-contrast :where(
    .ca-page-header p,
    .ca-movie-card-meta,
    .ca-session-movie-meta,
    .ca-session-cinema-distance,
    .mv-meta-row,
    .mv-synopsis,
    .mv-credit-label,
    .mv-cinema-location,
    .ca-about-body p,
    .db-brand-tag,
    .db-user-email,
    .db-section-sub,
    .db-welcome-sub,
    .db-block-sub,
    .admin-subtitle,
    .admin-card__desc,
    .admin-kpi__meta,
    .admin-list__text,
    .admin-list__meta,
    .admin-table__subtext,
    .admin-empty,
    .adb-stat-label,
    .adb-stat-foot,
    .adb-mini-card p,
    .adb-mini-label,
    .adb-feed-copy p,
    .adb-queue-copy,
    .adb-alert-card p,
    .adb-member-card p
) {
    color: var(--hc-muted) !important;
}

html.ca-high-contrast :where(a) {
    color: var(--hc-accent) !important;
}

/* Form fields: readable text, visible but not bright-white borders. */
html.ca-high-contrast :where(
    input,
    select,
    textarea,
    .ca-nav-search-input,
    .ca-sidebar-search,
    .ca-sort-select,
    .ca-location-select,
    .ca-postcode-input,
    .ca-cinema-search-input
) {
    background: var(--hc-surface-2) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(input::placeholder, textarea::placeholder, .ca-nav-search-input::placeholder) {
    color: var(--hc-soft) !important;
    opacity: 1 !important;
}

html.ca-high-contrast :where(input:focus, select:focus, textarea:focus, .ca-nav-search-input:focus, .ca-sidebar-search:focus, .ca-sort-select:focus) {
    outline: 3px solid var(--hc-focus) !important;
    outline-offset: 2px !important;
    border-color: var(--hc-focus) !important;
}

html.ca-high-contrast :where(input[type='checkbox'], input[type='radio']) {
    accent-color: var(--hc-accent) !important;
}

/* Buttons and navigation: inactive = dark/yellow, active = yellow/black. */
html.ca-high-contrast :where(
    button,
    input[type='button'],
    input[type='submit'],
    input[type='reset'],
    .button,
    a.button,
    .ca-btn,
    .ca-nav-link,
    .ca-pref-btn,
    .ca-contrast-toggle,
    .ca-view-btn,
    .ca-date-btn,
    .ca-date-tab,
    .ca-sidebar-apply,
    .ca-sidebar-clear-all,
    .mv-btn,
    .admin-btn,
    .db-nav-item,
    .db-topbar-back,
    .db-topbar-logout,
    .db-logout
) {
    background: var(--hc-surface-2) !important;
    color: var(--hc-accent) !important;
    border: 1px solid var(--hc-border-strong) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

html.ca-high-contrast :where(
    button:hover,
    button:focus-visible,
    input[type='button']:hover,
    input[type='submit']:hover,
    input[type='reset']:hover,
    .button:hover,
    a.button:hover,
    .ca-btn:hover,
    .ca-nav-link:hover,
    .ca-pref-btn:hover,
    .ca-contrast-toggle:hover,
    .ca-view-btn:hover,
    .ca-date-btn:hover,
    .ca-date-tab:hover,
    .ca-sidebar-apply:hover,
    .mv-btn:hover,
    .admin-btn:hover,
    .db-nav-item:hover,
    .db-logout:hover
) {
    background: var(--hc-accent-soft) !important;
    color: var(--hc-accent) !important;
    border-color: var(--hc-accent) !important;
}

html.ca-high-contrast :where(
    .ca-nav-link.active,
    .ca-pref-btn.is-active,
    .ca-contrast-toggle.is-active,
    .ca-view-btn.active,
    .ca-date-btn.active,
    .ca-date-tab.active,
    .ca-sidebar-apply,
    .mv-btn-trailer,
    .admin-btn--primary,
    .db-nav-item.is-active,
    .db-logout:hover
) {
    background: var(--hc-accent) !important;
    color: var(--hc-bg-deep) !important;
    border-color: var(--hc-accent) !important;
}

/* Critical fix: active tabs/buttons may contain spans or links with inherited yellow text. */
html.ca-high-contrast :where(
    .ca-nav-link.active *,
    .ca-pref-btn.is-active *,
    .ca-contrast-toggle.is-active *,
    .ca-view-btn.active *,
    .ca-date-btn.active *,
    .ca-date-tab.active *,
    .ca-sidebar-apply *,
    .mv-btn-trailer *,
    .admin-btn--primary *,
    .db-nav-item.is-active *,
    .db-logout:hover *
) {
    color: var(--hc-bg-deep) !important;
}

html.ca-high-contrast :where(.ca-date-tabs, .ca-date-btn-list, .mv-actions, .ca-nav-preferences, .ca-nav-links) {
    gap: 10px !important;
}

html.ca-high-contrast :focus-visible {
    outline: 3px solid var(--hc-focus) !important;
    outline-offset: 3px !important;
}

/* Badges / pills. */
html.ca-high-contrast :where(
    .ca-badge,
    .ca-genre-tag,
    .caption-badge-db,
    .db-status-pill,
    .adb-role-pill,
    .adb-status-dot,
    .adb-queue-tag,
    .adb-feed-time,
    .admin-kpi__meta,
    .mv-rating-badge,
    .mv-content-warning
) {
    background: var(--hc-accent) !important;
    color: var(--hc-bg-deep) !important;
    border-color: var(--hc-accent) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(
    .ca-badge *,
    .ca-genre-tag *,
    .caption-badge-db *,
    .db-status-pill *,
    .adb-role-pill *,
    .adb-status-dot *,
    .adb-queue-tag *,
    .adb-feed-time *,
    .admin-kpi__meta *,
    .mv-rating-badge *,
    .mv-content-warning *
) {
    color: var(--hc-bg-deep) !important;
}

html.ca-high-contrast :where(.ca-session-slot:hover, .ca-session-slot:focus-visible) {
    background: var(--hc-surface-3) !important;
    border-color: var(--hc-accent) !important;
    transform: translateY(-1px);
}

html.ca-high-contrast :where(.ca-session-slot-time) {
    color: var(--hc-text) !important;
}

/* Tables and separators. */
html.ca-high-contrast :where(table, thead, tbody, tr, th, td, .admin-table, .admin-stat-row, .admin-list) {
    border-color: var(--hc-border) !important;
}

html.ca-high-contrast :where(.admin-table thead, .admin-table th) {
    background: var(--hc-surface-2) !important;
}

html.ca-high-contrast :where(hr, .admin-card::before) {
    border-color: var(--hc-border) !important;
}

html.ca-high-contrast .admin-card::before {
    background: var(--hc-accent) !important;
}

/* Poster placeholders and media frames: subtle outline, not white boxes. */
html.ca-high-contrast :where(
    .ca-movie-poster-placeholder,
    .ca-session-movie-poster-ph,
    .mv-poster-placeholder,
    .mv-poster-wrap,
    .mv-poster-img
) {
    background: var(--hc-surface) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(.mv-poster-placeholder, .mv-poster-wrap, .mv-poster-img) {
    border-radius: 14px !important;
}

/* Flash messages remain distinguishable while meeting contrast. */
html.ca-high-contrast .message.success {
    background: var(--hc-success-bg) !important;
    color: var(--hc-success) !important;
    border-color: #2fb86a !important;
}

html.ca-high-contrast .message.error {
    background: var(--hc-danger-bg) !important;
    color: var(--hc-danger) !important;
    border-color: #ff7b6f !important;
}

html.ca-high-contrast .message.warning,
html.ca-high-contrast .message.info {
    background: #302900 !important;
    color: var(--hc-accent) !important;
    border-color: var(--hc-accent) !important;
}

/* Keep icons visible without turning every svg white/yellow globally. */
html.ca-high-contrast :where(svg) {
    color: inherit !important;
}

@media (max-width: 900px) {
    html.ca-high-contrast .ca-nav-inner {
        background: var(--hc-bg) !important;
    }
}

/* ============================================================
   High contrast contrast-audit patch
   Fixes yellow-background controls that inherited yellow/white text
   from links or page-specific button classes, and softens hard edges.
   ============================================================ */

/* Give bordered components a calm default border so page CSS cannot leave
   high-contrast mode with harsh white outlines. Accent borders are restored
   below for active controls and badges. */
html.ca-high-contrast :where(
    .ca-nav,
    .ca-footer,
    .ca-sidebar,
    .ca-sidebar-section,
    .ca-movie-card,
    .ca-session-group,
    .ca-session-cinema-block,
    .ca-session-slot,
    .ca-session-movie-header,
    .ca-session-movie-poster-ph,
    .mv-hero,
    .mv-body,
    .mv-sessions,
    .mv-cinema-block,
    .mv-poster-wrap,
    .mv-poster-placeholder,
    .db-sidebar,
    .db-main,
    .db-section,
    .db-stat-card,
    .db-next-card,
    .db-overview-block,
    .db-movie-card,
    .db-session-row,
    .db-alert-card,
    .db-settings-card,
    .admin-header,
    .admin-card,
    .admin-table-wrap,
    .admin-tools-header,
    .admin-tools-card,
    .admin-tools-table-wrap,
    .adb-panel,
    .adb-table-wrap,
    .adb-queue-card,
    .adb-alert-card,
    .adb-member-card,
    .adb-mini-card
) {
    border-color: var(--hc-border) !important;
}

html.ca-high-contrast :where(
    .admin-tools-header,
    .admin-tools-card,
    .admin-tools-table-wrap,
    .admin-tools-note,
    .adb-panel,
    .adb-table-wrap,
    .adb-queue-card,
    .adb-alert-card,
    .adb-member-card,
    .adb-mini-card,
    .adb-metric-row div
) {
    background: var(--hc-surface) !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(
    .admin-tools-header,
    .admin-tools-card,
    .admin-tools-table-wrap,
    .adb-panel,
    .adb-table-wrap,
    .adb-queue-card,
    .adb-alert-card,
    .adb-member-card,
    .adb-mini-card,
    .adb-metric-row div
) {
    border-radius: 18px !important;
}

/* High-confidence list of controls that intentionally use yellow. They must
   always use black text, including nested spans/icons, to satisfy WCAG contrast. */
html.ca-high-contrast :is(
    .button-primary,
    a.button-primary,
    button.button-primary,
    input[type='submit'].button-primary,
    input[type='button'].button-primary,
    .ca-btn-primary,
    .ca-nav-link.active,
    .ca-pref-btn.is-active,
    .ca-contrast-toggle.is-active,
    .ca-view-btn.active,
    .ca-date-btn.active,
    .ca-date-tab.active,
    .ca-sidebar-apply,
    .mv-btn-trailer,
    .admin-btn--primary,
    .admin-page .button.button-primary,
    .admin-page button.button-primary,
    .admin-page input[type='submit'].button-primary,
    .admin-tools-btn--primary,
    .admin-tools-page .button.button-primary,
    .admin-tools-page button.button-primary,
    .admin-tools-page input[type='submit'].button-primary,
    .db-nav-item.is-active,
    .db-next-btn
) {
    background: var(--hc-accent) !important;
    background-image: none !important;
    color: var(--hc-bg-deep) !important;
    border-color: var(--hc-accent) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.ca-high-contrast :is(
    .button-primary,
    a.button-primary,
    button.button-primary,
    input[type='submit'].button-primary,
    input[type='button'].button-primary,
    .ca-btn-primary,
    .ca-nav-link.active,
    .ca-pref-btn.is-active,
    .ca-contrast-toggle.is-active,
    .ca-view-btn.active,
    .ca-date-btn.active,
    .ca-date-tab.active,
    .ca-sidebar-apply,
    .mv-btn-trailer,
    .admin-btn--primary,
    .admin-page .button.button-primary,
    .admin-page button.button-primary,
    .admin-page input[type='submit'].button-primary,
    .admin-tools-btn--primary,
    .admin-tools-page .button.button-primary,
    .admin-tools-page button.button-primary,
    .admin-tools-page input[type='submit'].button-primary,
    .db-nav-item.is-active,
    .db-next-btn
) :is(span, strong, em, small, svg, path, i) {
    color: var(--hc-bg-deep) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

html.ca-high-contrast :is(
    .button-primary:hover,
    a.button-primary:hover,
    button.button-primary:hover,
    input[type='submit'].button-primary:hover,
    input[type='button'].button-primary:hover,
    .ca-btn-primary:hover,
    .ca-nav-link.active:hover,
    .ca-pref-btn.is-active:hover,
    .ca-contrast-toggle.is-active:hover,
    .ca-view-btn.active:hover,
    .ca-date-btn.active:hover,
    .ca-date-tab.active:hover,
    .ca-sidebar-apply:hover,
    .mv-btn-trailer:hover,
    .admin-btn--primary:hover,
    .admin-tools-btn--primary:hover,
    .db-nav-item.is-active:hover,
    .db-next-btn:hover
) {
    background: var(--hc-accent-hover) !important;
    background-image: none !important;
    color: var(--hc-bg-deep) !important;
    border-color: var(--hc-accent-hover) !important;
    transform: translateY(-1px);
}

/* Secondary/outline button audit: no yellow text on yellow fills, no pale fills. */
html.ca-high-contrast :is(
    .button-secondary,
    a.button-secondary,
    button.button-secondary,
    .ca-btn-outline,
    .ca-btn-ghost,
    .admin-btn--secondary,
    .admin-btn--ghost,
    .admin-tools-btn--secondary,
    .admin-tools-link,
    .mv-btn-dark,
    .db-session-btn,
    .db-topbar-back,
    .db-topbar-logout,
    .db-logout
) {
    background: var(--hc-surface-2) !important;
    background-image: none !important;
    color: var(--hc-accent) !important;
    border-color: var(--hc-border-strong) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.ca-high-contrast :is(
    .button-secondary:hover,
    a.button-secondary:hover,
    button.button-secondary:hover,
    .ca-btn-outline:hover,
    .ca-btn-ghost:hover,
    .admin-btn--secondary:hover,
    .admin-btn--ghost:hover,
    .admin-tools-btn--secondary:hover,
    .admin-tools-link:hover,
    .mv-btn-dark:hover,
    .db-session-btn:hover,
    .db-topbar-back:hover,
    .db-topbar-logout:hover,
    .db-logout:hover
) {
    background: var(--hc-accent-soft) !important;
    color: var(--hc-accent) !important;
    border-color: var(--hc-accent) !important;
}

/* Yellow/brand pills, tags and small action links must also use black text. */
html.ca-high-contrast :is(
    .ca-badge,
    .ca-genre-tag,
    .caption-badge,
    .caption-badge-db,
    .db-status-pill,
    .adb-role-pill,
    .adb-status-dot,
    .adb-queue-tag,
    .adb-feed-time,
    .admin-badge--brand,
    .admin-tools-pill--brand,
    .admin-tools-link--edit,
    .admin-kpi__meta,
    .mv-rating-badge,
    .mv-content-warning,
    .adb-table-pill,
    .adb-table-pill--warning,
    .adb-table-pill--pending,
    .adb-priority,
    .adb-priority--high,
    .adb-priority--medium,
    .adb-priority--low
) {
    background: var(--hc-accent) !important;
    background-image: none !important;
    color: var(--hc-bg-deep) !important;
    border-color: var(--hc-accent) !important;
    text-shadow: none !important;
}

html.ca-high-contrast :is(
    .ca-badge,
    .ca-genre-tag,
    .caption-badge,
    .caption-badge-db,
    .db-status-pill,
    .adb-role-pill,
    .adb-status-dot,
    .adb-queue-tag,
    .adb-feed-time,
    .admin-badge--brand,
    .admin-tools-pill--brand,
    .admin-tools-link--edit,
    .admin-kpi__meta,
    .mv-rating-badge,
    .mv-content-warning,
    .adb-table-pill,
    .adb-priority
) :is(span, strong, em, small, svg, path, i) {
    color: var(--hc-bg-deep) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Success/danger status chips stay semantically different but retain contrast. */
html.ca-high-contrast :is(.admin-badge--success, .admin-tools-pill--success, .admin-tools-status-yes, .adb-table-pill--ok) {
    background: var(--hc-success-bg) !important;
    color: var(--hc-success) !important;
    border-color: #2fb86a !important;
}

html.ca-high-contrast :is(.admin-badge--danger, .admin-tools-pill--danger, .admin-tools-link--delete, .admin-tools-status-no, .admin-btn--danger, .db-danger-btn) {
    background: var(--hc-danger-bg) !important;
    color: var(--hc-danger) !important;
    border-color: #ff7b6f !important;
}

/* Tables: avoid bright separators and keep row hover subtle. */
html.ca-high-contrast :where(
    .admin-tools-table thead th,
    .admin-tools-table tbody td,
    .adb-table thead th,
    .adb-table tbody td,
    .admin-table thead th,
    .admin-table tbody td
) {
    background: transparent !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-border) !important;
}

html.ca-high-contrast :where(
    .admin-tools-table thead th,
    .adb-table thead th,
    .admin-table thead th
) {
    background: var(--hc-surface-2) !important;
    color: var(--hc-muted) !important;
}

html.ca-high-contrast :where(.admin-tools-table tbody tr:hover td, .adb-table tbody tr:hover td, .admin-table tbody tr:hover td) {
    background: var(--hc-surface-2) !important;
}

html.ca-high-contrast :where(.admin-tools-muted, .admin-tools-header p, .admin-tools-page label, .admin-tools-empty, .adb-stat-label, .adb-stat-foot, .adb-feed-copy p, .adb-queue-copy, .adb-alert-card p, .adb-member-card p, .adb-table td span, .adb-metric-row span) {
    color: var(--hc-muted) !important;
}

html.ca-high-contrast :where(.admin-tools-table strong, .admin-tools-header h1, .adb-mini-card strong, .adb-feed-copy strong, .adb-queue-card h3, .adb-alert-card h3, .adb-member-card h3, .adb-metric-row strong) {
    color: var(--hc-text) !important;
}

/* Softer rendering for the whole high-contrast UI. */
html.ca-high-contrast :where(
    button,
    .button,
    .ca-btn,
    .ca-nav-link,
    .ca-pref-btn,
    .ca-contrast-toggle,
    .ca-date-btn,
    .ca-date-tab,
    .ca-session-slot,
    .admin-btn,
    .admin-tools-btn,
    .admin-tools-link,
    .db-nav-item,
    .mv-btn
) {
    border-radius: 999px !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        opacity .18s ease !important;
}

html.ca-high-contrast :where(
    .ca-movie-card,
    .ca-session-group,
    .ca-session-cinema-block,
    .mv-cinema-block,
    .db-section,
    .db-stat-card,
    .admin-card,
    .admin-tools-card,
    .adb-panel,
    .adb-queue-card,
    .adb-alert-card,
    .adb-member-card,
    .adb-mini-card
) {
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease !important;
}

/* ============================================================
   Final high contrast sweep – button/link contrast and smoother UI
   Addresses remaining yellow-on-white/white-on-light cases, especially
   legacy CakePHP links and dashboard empty states.
   ============================================================ */

/* Use the same dark surface for remaining dashboard/account empty panels. */
html.ca-high-contrast :where(
    .db-empty,
    .db-empty-next,
    .db-empty-card,
    .db-empty-state
) {
    background: var(--hc-surface) !important;
    background-image: none !important;
    color: var(--hc-muted) !important;
    border: 1.5px solid var(--hc-border) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(
    .db-empty p,
    .db-empty-next p,
    .db-empty-card p,
    .db-empty-state p
) {
    color: var(--hc-muted) !important;
}

html.ca-high-contrast :where(
    .db-empty strong,
    .db-empty-next strong,
    .db-empty-card strong,
    .db-empty-state strong
) {
    color: var(--hc-text) !important;
}

html.ca-high-contrast :where(
    .db-empty a,
    .db-empty-next a,
    .db-empty-card a,
    .db-empty-state a
) {
    color: var(--hc-accent) !important;
    font-weight: 900 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

html.ca-high-contrast :where(
    .db-empty a:hover,
    .db-empty a:focus-visible,
    .db-empty-next a:hover,
    .db-empty-next a:focus-visible,
    .db-empty-card a:hover,
    .db-empty-card a:focus-visible,
    .db-empty-state a:hover,
    .db-empty-state a:focus-visible
) {
    color: var(--hc-accent-hover) !important;
}

/* Legacy simple admin form pages: the back link is a plain <p><a>. Make it
   look like an outline button instead of yellow text on a white pill. */
html.ca-high-contrast .ca-page > .container > p:first-of-type a {
    background: var(--hc-bg-deep) !important;
    background-image: none !important;
    color: var(--hc-accent) !important;
    border: 2px solid var(--hc-accent) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

html.ca-high-contrast .ca-page > .container > p:first-of-type a:hover,
html.ca-high-contrast .ca-page > .container > p:first-of-type a:focus-visible {
    background: var(--hc-accent) !important;
    color: var(--hc-bg-deep) !important;
    border-color: var(--hc-accent) !important;
    transform: translateY(-1px);
}

html.ca-high-contrast .ca-page > .container > p:first-of-type a :is(span, strong, em, small, svg, path, i),
html.ca-high-contrast .ca-page > .container > p:first-of-type a:hover :is(span, strong, em, small, svg, path, i),
html.ca-high-contrast .ca-page > .container > p:first-of-type a:focus-visible :is(span, strong, em, small, svg, path, i) {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* The simple form shell previously looked too sharp/white in high contrast.
   Keep it visible, but reduce the harsh white outline. */
html.ca-high-contrast .ca-page > .container > form {
    background: var(--hc-bg-deep) !important;
    background-image: none !important;
    color: var(--hc-text) !important;
    border: 1.5px solid var(--hc-border-strong) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
}

html.ca-high-contrast .ca-page > .container > form label,
html.ca-high-contrast .ca-page > .container > form .checkbox label {
    color: var(--hc-text) !important;
    font-weight: 900 !important;
}

html.ca-high-contrast .ca-page > .container > form input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
html.ca-high-contrast .ca-page > .container > form select,
html.ca-high-contrast .ca-page > .container > form textarea {
    background: #05070a !important;
    color: var(--hc-text) !important;
    border: 1.5px solid var(--hc-border-strong) !important;
    border-radius: 12px !important;
}

html.ca-high-contrast .ca-page > .container > form input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus,
html.ca-high-contrast .ca-page > .container > form select:focus,
html.ca-high-contrast .ca-page > .container > form textarea:focus {
    background: #05070a !important;
    color: var(--hc-text) !important;
    border-color: var(--hc-accent) !important;
    box-shadow: 0 0 0 4px rgba(255, 230, 0, 0.22) !important;
}

/* Bold yellow borders for unselected/outline navigation and action buttons.
   Active buttons remain yellow-filled with black text. */
html.ca-high-contrast :is(
    .ca-nav-link:not(.active),
    .ca-pref-btn:not(.is-active),
    .ca-contrast-toggle:not(.is-active),
    .ca-view-btn:not(.active),
    .ca-date-btn:not(.active),
    .ca-date-tab:not(.active),
    .ca-btn-outline,
    .ca-btn-ghost,
    .button-secondary,
    a.button-secondary,
    button.button-secondary,
    .admin-btn--secondary,
    .admin-btn--ghost,
    .admin-tools-btn--secondary,
    .admin-tools-link,
    .mv-btn-dark,
    .db-session-btn,
    .db-topbar-back,
    .db-topbar-logout,
    .db-logout
) {
    background: var(--hc-bg-deep) !important;
    background-image: none !important;
    color: var(--hc-accent) !important;
    border: 2px solid var(--hc-accent) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.ca-high-contrast :is(
    .ca-nav-link:not(.active),
    .ca-pref-btn:not(.is-active),
    .ca-contrast-toggle:not(.is-active),
    .ca-view-btn:not(.active),
    .ca-date-btn:not(.active),
    .ca-date-tab:not(.active),
    .ca-btn-outline,
    .ca-btn-ghost,
    .button-secondary,
    a.button-secondary,
    button.button-secondary,
    .admin-btn--secondary,
    .admin-btn--ghost,
    .admin-tools-btn--secondary,
    .admin-tools-link,
    .mv-btn-dark,
    .db-session-btn,
    .db-topbar-back,
    .db-topbar-logout,
    .db-logout
) :is(span, strong, em, small, svg, path, i) {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

html.ca-high-contrast :is(
    .ca-nav-link:not(.active):hover,
    .ca-nav-link:not(.active):focus-visible,
    .ca-pref-btn:not(.is-active):hover,
    .ca-pref-btn:not(.is-active):focus-visible,
    .ca-contrast-toggle:not(.is-active):hover,
    .ca-contrast-toggle:not(.is-active):focus-visible,
    .ca-view-btn:not(.active):hover,
    .ca-view-btn:not(.active):focus-visible,
    .ca-date-btn:not(.active):hover,
    .ca-date-btn:not(.active):focus-visible,
    .ca-date-tab:not(.active):hover,
    .ca-date-tab:not(.active):focus-visible,
    .ca-btn-outline:hover,
    .ca-btn-outline:focus-visible,
    .ca-btn-ghost:hover,
    .ca-btn-ghost:focus-visible,
    .button-secondary:hover,
    a.button-secondary:hover,
    button.button-secondary:hover,
    .admin-btn--secondary:hover,
    .admin-btn--ghost:hover,
    .admin-tools-btn--secondary:hover,
    .admin-tools-link:hover,
    .mv-btn-dark:hover,
    .db-session-btn:hover,
    .db-topbar-back:hover,
    .db-topbar-logout:hover,
    .db-logout:hover
) {
    background: var(--hc-accent) !important;
    color: var(--hc-bg-deep) !important;
    border-color: var(--hc-accent) !important;
    transform: translateY(-1px);
}

/* Filled yellow controls: force black text and a consistent 2px edge. */
html.ca-high-contrast :is(
    .button-primary,
    a.button-primary,
    button.button-primary,
    input[type='submit'].button-primary,
    input[type='button'].button-primary,
    .ca-btn-primary,
    .ca-nav-link.active,
    .ca-pref-btn.is-active,
    .ca-contrast-toggle.is-active,
    .ca-view-btn.active,
    .ca-date-btn.active,
    .ca-date-tab.active,
    .ca-sidebar-apply,
    .mv-btn-trailer,
    .admin-btn--primary,
    .admin-tools-btn--primary,
    .db-nav-item.is-active,
    .db-next-btn
) {
    background: var(--hc-accent) !important;
    background-image: none !important;
    color: var(--hc-bg-deep) !important;
    border: 2px solid var(--hc-accent) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.ca-high-contrast :is(
    .button-primary,
    a.button-primary,
    button.button-primary,
    input[type='submit'].button-primary,
    input[type='button'].button-primary,
    .ca-btn-primary,
    .ca-nav-link.active,
    .ca-pref-btn.is-active,
    .ca-contrast-toggle.is-active,
    .ca-view-btn.active,
    .ca-date-btn.active,
    .ca-date-tab.active,
    .ca-sidebar-apply,
    .mv-btn-trailer,
    .admin-btn--primary,
    .admin-tools-btn--primary,
    .db-nav-item.is-active,
    .db-next-btn
) :is(span, strong, em, small, svg, path, i) {
    color: var(--hc-bg-deep) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Avoid accidental light panels from generic cards/messages after page CSS. */
html.ca-high-contrast :where(
    .card,
    .panel,
    .box,
    .empty,
    .empty-state,
    .admin-empty,
    .ca-empty-state
) {
    background: var(--hc-surface) !important;
    background-image: none !important;
    color: var(--hc-muted) !important;
    border-color: var(--hc-border) !important;
    box-shadow: none !important;
}

/* Final smoothing pass. */
html.ca-high-contrast :where(
    .ca-nav-link,
    .ca-pref-btn,
    .ca-contrast-toggle,
    .ca-view-btn,
    .ca-date-btn,
    .ca-date-tab,
    .button,
    button,
    .admin-btn,
    .admin-tools-btn,
    .admin-tools-link,
    .db-nav-item,
    .db-session-btn,
    .mv-btn,
    .ca-page > .container > p:first-of-type a
) {
    border-radius: 999px !important;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}

html.ca-high-contrast :where(
    .db-empty,
    .db-section,
    .db-stat-card,
    .admin-card,
    .admin-tools-card,
    .admin-tools-header,
    .admin-table-wrap,
    .admin-tools-table-wrap,
    .ca-movie-card,
    .ca-session-group,
    .ca-session-cinema-block,
    .mv-cinema-block,
    .ca-page > .container > form
) {
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease !important;
}


/* ============================================================
   Header search usability patch
   Fixes the high-contrast nav search shrinking to icon-only width
   and ensures typed search text/caret remain visible.
   ============================================================ */
html.ca-high-contrast .ca-nav-inner {
    gap: 14px !important;
}

html.ca-high-contrast .ca-nav-search {
    flex: 0 1 clamp(280px, 22vw, 430px) !important;
    width: clamp(280px, 22vw, 430px) !important;
    min-width: 280px !important;
    max-width: 430px !important;
    position: relative !important;
}

html.ca-high-contrast .ca-nav-search-input,
html.ca-high-contrast .ca-nav-search input[type='search'] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 42px 10px 44px !important;
    background: #05070a !important;
    color: var(--hc-text) !important;
    caret-color: var(--hc-accent) !important;
    border: 2px solid var(--hc-border-strong) !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--hc-text) !important;
    text-overflow: ellipsis !important;
}

html.ca-high-contrast .ca-nav-search-input:hover,
html.ca-high-contrast .ca-nav-search input[type='search']:hover {
    border-color: var(--hc-accent) !important;
    background: #080b10 !important;
}

html.ca-high-contrast .ca-nav-search-input:focus,
html.ca-high-contrast .ca-nav-search input[type='search']:focus {
    background: #080b10 !important;
    color: var(--hc-text) !important;
    -webkit-text-fill-color: var(--hc-text) !important;
    border-color: var(--hc-accent) !important;
    outline: 3px solid rgba(255, 230, 0, 0.35) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 1px #000 inset !important;
}

html.ca-high-contrast .ca-nav-search-input::placeholder,
html.ca-high-contrast .ca-nav-search input[type='search']::placeholder {
    color: var(--hc-muted) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--hc-muted) !important;
}

html.ca-high-contrast .ca-nav-search-icon {
    left: 16px !important;
    color: var(--hc-muted) !important;
    z-index: 2 !important;
}

html.ca-high-contrast .ca-nav-search:focus-within .ca-nav-search-icon {
    color: var(--hc-accent) !important;
}

html.ca-high-contrast .ca-nav-search-input::-webkit-search-cancel-button,
html.ca-high-contrast .ca-nav-search input[type='search']::-webkit-search-cancel-button {
    cursor: pointer !important;
    opacity: 1 !important;
    filter: invert(1) brightness(1.4) contrast(1.2) !important;
}

/* Keep the header from compressing the search field on normal desktop widths. */
@media (min-width: 1101px) {
    html.ca-high-contrast .ca-nav-inner {
        max-width: none !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    html.ca-high-contrast .ca-logo,
    html.ca-high-contrast .ca-nav-preferences,
    html.ca-high-contrast .ca-nav-links {
        flex: 0 0 auto !important;
    }
}

@media (max-width: 1250px) {
    html.ca-high-contrast .ca-nav-search {
        flex-basis: 280px !important;
        width: 280px !important;
        min-width: 260px !important;
    }
}

@media (max-width: 1100px) {
    html.ca-high-contrast .ca-nav-search {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        order: 2 !important;
    }

    html.ca-high-contrast .ca-nav-preferences,
    html.ca-high-contrast .ca-nav-links {
        order: 3 !important;
    }
}

/* ============================================================
   Header compactness + final contrast cleanup
   Keeps high-contrast header closer to the original grouping,
   thickens inactive yellow outlines, and reinforces legacy empty states.
   ============================================================ */

/* Compact desktop header layout in high contrast so controls do not look over-spaced. */
@media (min-width: 1101px) {
    html.ca-high-contrast .ca-nav-inner {
        justify-content: flex-start !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html.ca-high-contrast .ca-logo {
        margin-right: 2px !important;
    }

    html.ca-high-contrast .ca-nav-search {
        flex: 0 1 348px !important;
        width: 348px !important;
        min-width: 320px !important;
        max-width: 348px !important;
        margin-right: 2px !important;
    }

    html.ca-high-contrast .ca-nav-preferences {
        gap: 8px !important;
        margin-right: 4px !important;
        flex-wrap: nowrap !important;
    }

    html.ca-high-contrast .ca-nav-links {
        margin-left: 0 !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
}

/* On medium desktop widths, keep a slightly smaller grouped header before mobile wrapping kicks in. */
@media (min-width: 1101px) and (max-width: 1450px) {
    html.ca-high-contrast .ca-nav-inner {
        gap: 8px !important;
    }

    html.ca-high-contrast .ca-nav-search {
        flex-basis: 310px !important;
        width: 310px !important;
        min-width: 290px !important;
        max-width: 310px !important;
    }

    html.ca-high-contrast .ca-nav-link,
    html.ca-high-contrast .ca-pref-btn,
    html.ca-high-contrast .ca-contrast-toggle {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Thicker inactive yellow outlines for readability and a clearer affordance. */
html.ca-high-contrast :where(
    .ca-nav-link:not(.active),
    .ca-pref-btn:not(.is-active),
    .ca-contrast-toggle:not(.is-active),
    .mv-btn:not(.is-active),
    .ca-page > .container > p:first-of-type a,
    .db-block-more,
    .db-saved-remove,
    .db-remove-form .button,
    .button.db-danger-btn,
    .admin-btn--secondary,
    .admin-tools-btn--secondary,
    .adb-btn--secondary
) {
    border-width: 2px !important;
}

/* Keep inactive outline buttons black-with-yellow and active buttons yellow-with-black. */
html.ca-high-contrast :where(
    .ca-nav-link:not(.active),
    .ca-pref-btn:not(.is-active),
    .ca-contrast-toggle:not(.is-active)
) {
    background: #05070a !important;
    color: var(--hc-accent) !important;
    border-color: var(--hc-accent) !important;
}

html.ca-high-contrast :where(
    .ca-nav-link.active,
    .ca-pref-btn.is-active,
    .ca-contrast-toggle.is-active
) {
    background: var(--hc-accent) !important;
    color: #000 !important;
    border-color: var(--hc-accent) !important;
}

html.ca-high-contrast :where(
    .ca-nav-link,
    .ca-pref-btn,
    .ca-contrast-toggle,
    .ca-page > .container > p:first-of-type a
) :is(span, strong, em, small, svg, path, i) {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Saved movies / empty states: force dark panel and readable copy. */
html.ca-high-contrast :where(
    .db-empty,
    .db-empty-next,
    .db-empty-card,
    .db-empty-state,
    .db-next-card--empty,
    .db-overview-empty
) {
    background: #0a1018 !important;
    color: var(--hc-muted) !important;
    border: 1.5px solid var(--hc-border) !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(
    .db-empty,
    .db-empty-next,
    .db-empty-card,
    .db-empty-state,
    .db-next-card--empty,
    .db-overview-empty
) * {
    color: inherit !important;
}

html.ca-high-contrast :where(
    .db-empty p,
    .db-empty-next p,
    .db-empty-card p,
    .db-empty-state p,
    .db-next-card--empty p,
    .db-overview-empty p
) {
    color: var(--hc-muted) !important;
}

html.ca-high-contrast :where(
    .db-empty strong,
    .db-empty-next strong,
    .db-empty-card strong,
    .db-empty-state strong,
    .db-next-card--empty strong,
    .db-overview-empty strong
) {
    color: var(--hc-text) !important;
}

html.ca-high-contrast :where(
    .db-empty a,
    .db-empty-next a,
    .db-empty-card a,
    .db-empty-state a,
    .db-next-card--empty a,
    .db-overview-empty a
) {
    color: var(--hc-accent) !important;
    font-weight: 900 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

/* Legacy back links and secondary buttons should remain outline buttons, not light pills. */
html.ca-high-contrast .ca-page > .container > p:first-of-type a,
html.ca-high-contrast .ca-page > .container > p:first-of-type a:visited {
    background: #05070a !important;
    color: var(--hc-accent) !important;
    border-color: var(--hc-accent) !important;
}

html.ca-high-contrast .ca-page > .container > p:first-of-type a:hover,
html.ca-high-contrast .ca-page > .container > p:first-of-type a:focus-visible {
    background: var(--hc-accent) !important;
    color: #000 !important;
    border-color: var(--hc-accent) !important;
}

/* ============================================================
   Header centering patch
   Make high-contrast desktop header align like standard mode:
   centered inside the normal container, with primary nav pushed right.
   ============================================================ */
@media (min-width: 1101px) {
    html.ca-high-contrast .ca-nav .ca-nav-inner {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        flex-wrap: nowrap !important;
    }

    html.ca-high-contrast .ca-nav-search {
        flex: 1 1 260px !important;
        width: auto !important;
        min-width: 220px !important;
        max-width: 360px !important;
        margin-right: 0 !important;
    }

    html.ca-high-contrast .ca-nav-preferences {
        flex: 0 0 auto !important;
        margin-right: 0 !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    html.ca-high-contrast .ca-nav-links {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    html.ca-high-contrast .ca-logo {
        margin-right: 0 !important;
    }
}

@media (min-width: 1101px) and (max-width: 1450px) {
    html.ca-high-contrast .ca-nav .ca-nav-inner {
        gap: 12px !important;
    }

    html.ca-high-contrast .ca-nav-search {
        max-width: 320px !important;
        min-width: 200px !important;
    }
}


/* ============================================================
   Account-level preference/favourite cinema additions
   ============================================================ */

html.ca-high-contrast :where(
    .ca-cinema-card,
    .db-cinema-card,
    .db-favourite-cinema-chip
) {
    background: var(--hc-surface) !important;
    color: var(--hc-text) !important;
    border: 1.5px solid var(--hc-border) !important;
    box-shadow: none !important;
}

html.ca-high-contrast .ca-cinema-card--favourite {
    border-color: var(--hc-accent) !important;
}

html.ca-high-contrast :where(
    .ca-cinema-card-name,
    .ca-cinema-card-chain,
    .ca-cinema-card-location,
    .db-cinema-card-title,
    .db-cinema-card-location,
    .db-favourite-cinema-chip strong,
    .db-favourite-cinema-chip span,
    .db-settings-pref-list,
    .db-settings-pref-list strong
) {
    color: inherit !important;
}

html.ca-high-contrast :where(
    .ca-cinema-fav-btn,
    .ca-cinema-site-link
) {
    background: #05070a !important;
    color: var(--hc-accent) !important;
    border: 2px solid var(--hc-accent) !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(
    .ca-cinema-fav-btn:hover,
    .ca-cinema-fav-btn:focus-visible,
    .ca-cinema-site-link:hover,
    .ca-cinema-site-link:focus-visible,
    .ca-cinema-fav-btn.is-saved
) {
    background: var(--hc-accent) !important;
    color: #000 !important;
    border-color: var(--hc-accent) !important;
}

html.ca-high-contrast :where(
    .ca-cinema-icon
) {
    background: var(--hc-accent) !important;
    color: #000 !important;
    border: 1px solid var(--hc-accent) !important;
}

/* ============================================================
   High contrast support for saved movie buttons
   ============================================================ */
html.ca-high-contrast :where(.ca-save-movie-btn, .mv-btn-save) {
    background: #05070a !important;
    color: var(--hc-accent) !important;
    border: 2px solid var(--hc-accent) !important;
    box-shadow: none !important;
}

html.ca-high-contrast :where(.ca-save-movie-btn:hover, .ca-save-movie-btn:focus-visible, .mv-btn-save:hover, .mv-btn-save:focus-visible) {
    background: var(--hc-accent) !important;
    color: #000 !important;
    border-color: var(--hc-accent) !important;
}

html.ca-high-contrast :where(.ca-save-movie-btn.is-saved, .ca-save-movie-btn:disabled, .mv-btn-save.is-saved, .mv-btn-save:disabled) {
    background: var(--hc-accent) !important;
    color: #000 !important;
    border-color: var(--hc-accent) !important;
    opacity: 1 !important;
}

html.ca-high-contrast :where(.ca-save-movie-btn, .mv-btn-save) :is(span, strong, em, svg, path) {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}