/**
 * ROI Calculator Dark Mode Styles
 * ==========================================
 * Styles for dark mode support when calculators are placed in
 * WordPress blocks with dark background classes
 *
 * Refactored using :is() selector and CSS custom properties
 * for improved maintainability and reduced file size
 */

/* ============================================
   DARK MODE - CSS CUSTOM PROPERTIES
   ============================================ */

/**
 * Define color scheme using CSS custom properties
 * This makes it easy to maintain and update colors consistently
 */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator {
    /* Base text colors for dark backgrounds */
    --roi-text-base: rgba(255, 255, 255, 0.95);
    --roi-text-heading: #ffffff;
    --roi-text-muted: rgba(255, 255, 255, 0.7);
    --roi-text-placeholder: rgba(255, 255, 255, 0.5);

    /* Light background colors (for form steps and cards) */
    --roi-bg-form-step: #F3F3F3;
    --roi-bg-card: #ffffff;
    --roi-bg-card-header: #f8f9fa;
    --roi-bg-sidebar: #ffffff;

    /* Dark text colors (for light backgrounds) */
    --roi-text-dark: #212529;
    --roi-text-dark-muted: #6c757d;

    /* Border colors */
    --roi-border-light: #dee2e6;
    --roi-border-input: #ced4da;
    --roi-border-semi: rgba(255, 255, 255, 0.3);
    --roi-border-subtle: rgba(255, 255, 255, 0.2);

    /* Form control colors for dark backgrounds */
    --roi-form-bg: rgba(255, 255, 255, 0.1);
    --roi-form-bg-focus: rgba(255, 255, 255, 0.15);

    /* Brand colors */
    --roi-primary: #E52600;
    --roi-primary-hover: #FF9780;
    --roi-primary-dark: #CC2600;

    /* Button colors */
    --roi-btn-secondary: #6c757d;
    --roi-btn-secondary-hover: #5a6268;
    --roi-btn-secondary-border: #545b62;

    /* Progress indicator colors */
    --roi-progress-bg: rgba(0, 0, 0, 0.05);
    --roi-progress-marker-inactive: #6c757d;
    --roi-progress-marker-active: #E52600;

    /* Set base text color */
    color: var(--roi-text-base);
}

/* ============================================
   TYPOGRAPHY - DARK BACKGROUNDS
   ============================================ */

/* Headings on dark page background */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(h3, h4, h5, h6) {
    color: var(--roi-text-heading) !important;
}

/* Step headings */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .step-heading {
    color: var(--roi-text-heading);
}

/* Text and labels on dark backgrounds */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(.form-label, .metric-label, p, span:not(.step-badge)) {
    color: var(--roi-text-base) !important;
}

/* Muted text */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(.text-muted, .form-text, .small) {
    color: var(--roi-text-muted) !important;
}

/* ============================================
   FORM CONTROLS - DARK BACKGROUNDS
   ============================================ */

/* Form controls on dark backgrounds (outside form steps) */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(.form-control, .form-select) {
    background-color: var(--roi-form-bg);
    border-color: var(--roi-border-semi);
    color: var(--roi-text-heading);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(.form-control, .form-select):focus {
    background-color: var(--roi-form-bg-focus);
    border-color: var(--roi-primary);
    color: var(--roi-text-heading);
    box-shadow: 0 0 0 0.2rem rgba(209, 17, 65, 0.25);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-control::placeholder {
    color: var(--roi-text-placeholder);
}

/* ============================================
   FORM STEPS - LIGHT BACKGROUNDS
   ============================================ */

/* Form step backgrounds (light gray) */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(.form-step, .deburr-role-selection) {
    background-color: var(--roi-bg-form-step);
    border-color: var(--roi-border-light);
    padding: var(--spacing-xl) var(--spacing-lg);
}

/* Text inside form steps should be dark since background is light */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(.form-step, .deburr-role-selection) :is(h3, h4, h5, h6, .form-label, .metric-label, p, span:not(.step-badge)) {
    color: var(--roi-text-dark) !important;
}

/* Muted text inside form steps */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-step :is(.text-muted, .form-text, .small) {
    color: var(--roi-text-dark-muted) !important;
}

/* Form controls inside form steps (white background) */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-step :is(.form-control, .form-select) {
    background-color: var(--roi-bg-card);
    border-color: var(--roi-border-input);
    color: var(--roi-text-dark);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-step :is(.form-control, .form-select):focus {
    background-color: var(--roi-bg-card);
    border-color: var(--roi-primary);
    color: var(--roi-text-dark);
    box-shadow: 0 0 0 0.2rem rgba(209, 17, 65, 0.25);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-step .form-control::placeholder {
    color: var(--roi-text-dark-muted);
}

/* ============================================
   BUTTONS - FORM STEPS
   ============================================ */

/* Secondary buttons inside form steps */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-step .btn-secondary {
    background-color: var(--roi-btn-secondary) !important;
    border-color: var(--roi-btn-secondary) !important;
    color: var(--roi-text-heading) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-step .btn-secondary:is(:hover, :focus) {
    background-color: var(--roi-btn-secondary-hover) !important;
    border-color: var(--roi-btn-secondary-border) !important;
    color: var(--roi-text-heading) !important;
}

/* Outline secondary buttons inside form steps */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-step .btn-outline-secondary {
    color: var(--roi-btn-secondary) !important;
    border-color: var(--roi-btn-secondary) !important;
    background-color: transparent !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-step .btn-outline-secondary:is(:hover, :focus) {
    background-color: var(--roi-btn-secondary) !important;
    border-color: var(--roi-btn-secondary) !important;
    color: var(--roi-text-heading) !important;
}

/* Role selection buttons inside deburr-role-selection */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .deburr-role-selection .role-selection-btn {
    color: var(--roi-text-dark) !important;
    border-color: var(--roi-btn-secondary) !important;
    background-color: var(--roi-bg-card) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .deburr-role-selection .role-selection-btn:is(:hover, :focus, [aria-pressed="true"]) {
    background-color: var(--roi-primary) !important;
    border-color: var(--roi-primary) !important;
    color: var(--roi-text-heading) !important;
}

/* ============================================
   CARDS - WHITE BACKGROUNDS
   ============================================ */

/* Cards in dark mode (white background) */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card {
    background-color: var(--roi-bg-card);
    border-color: var(--roi-border-light);
    color: var(--roi-text-dark) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card-body {
    color: var(--roi-text-dark) !important;
}

/* All text inside cards should be dark */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card :is(h3, h4, h5, h6, .form-label, .metric-label, p, span:not(.step-badge)) {
    color: var(--roi-text-dark) !important;
}

/* Muted text inside cards */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card :is(.text-muted, .form-text, .small) {
    color: var(--roi-text-dark-muted) !important;
}

/* Buttons inside cards */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card .btn-secondary {
    background-color: var(--roi-btn-secondary) !important;
    border-color: var(--roi-btn-secondary) !important;
    color: var(--roi-text-heading) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card .btn-secondary:is(:hover, :focus) {
    background-color: var(--roi-btn-secondary-hover) !important;
    border-color: var(--roi-btn-secondary-border) !important;
    color: var(--roi-text-heading) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card .btn-outline-secondary {
    color: var(--roi-btn-secondary) !important;
    border-color: var(--roi-btn-secondary) !important;
    background-color: transparent !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card .btn-outline-secondary:is(:hover, :focus) {
    background-color: var(--roi-btn-secondary) !important;
    border-color: var(--roi-btn-secondary) !important;
    color: var(--roi-text-heading) !important;
}

/* Card headers */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card-header {
    background-color: var(--roi-bg-card-header);
    border-bottom-color: var(--roi-border-light);
    color: var(--roi-text-dark) !important;
}

/* ============================================
   SIDEBAR - WHITE BACKGROUND
   ============================================ */

/* Sidebar sticky card */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky {
    background-color: var(--roi-bg-sidebar);
    border-color: var(--roi-border-light);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky .card {
    background-color: transparent;
    border: none;
}

/* All text inside sidebar should be dark, except metric values which stay red */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky :is(h3, h4, h5, h6, .form-label, .metric-label, p, span:not(.step-badge):not(.metric-value span)) {
    color: var(--roi-text-dark) !important;
}

/* Ensure metric values and their children remain primary red color */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky .metric-value,
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky .metric-value span {
    color: var(--roi-primary) !important;
}

/* Muted text inside sidebar */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky :is(.text-muted, .form-text, .small) {
    color: var(--roi-text-dark-muted) !important;
}

/* Buttons inside sidebar */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky .btn-secondary {
    background-color: var(--roi-btn-secondary) !important;
    border-color: var(--roi-btn-secondary) !important;
    color: var(--roi-text-heading) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky .btn-secondary:is(:hover, :focus) {
    background-color: var(--roi-btn-secondary-hover) !important;
    border-color: var(--roi-btn-secondary-border) !important;
    color: var(--roi-text-heading) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky .btn-outline-secondary {
    color: var(--roi-btn-secondary) !important;
    border-color: var(--roi-btn-secondary) !important;
    background-color: transparent !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky .btn-outline-secondary:is(:hover, :focus) {
    background-color: var(--roi-btn-secondary) !important;
    border-color: var(--roi-btn-secondary) !important;
    color: var(--roi-text-heading) !important;
}

/* Reset button inside sidebar */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky :is(#mastercam-reset-btn, #deburr-reset-btn) {
    color: var(--roi-text-dark-muted) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-sidebar-sticky :is(#mastercam-reset-btn, #deburr-reset-btn):hover {
    color: var(--roi-primary) !important;
}

/* ============================================
   METRICS AND VALUES
   ============================================ */

/* Live metrics */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .live-metric {
    background-color: transparent;
}

/* Metric values */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .metric-value {
    color: var(--roi-text-dark);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .text-primary {
    color: var(--roi-primary) !important;
}

/* ============================================
   BUTTONS - GLOBAL
   ============================================ */

/* Primary buttons */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .btn-primary {
    background-color: var(--roi-primary) !important;
    border-color: var(--roi-primary) !important;
    color: var(--roi-text-heading) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .btn-primary:is(:hover, :focus) {
    background-color: var(--roi-primary-hover) !important;
    border-color: var(--roi-primary-hover) !important;
    color: #1B2426 !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .btn-outline-primary {
    color: var(--roi-primary-hover) !important;
    border-color: var(--roi-primary-hover) !important;
    background-color: transparent !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .btn-outline-primary:is(:hover, :focus) {
    background-color: var(--roi-primary-hover) !important;
    border-color: var(--roi-primary-hover) !important;
    color: #1B2426 !important;
}

/* Secondary buttons (global, on dark backgrounds) */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .btn-secondary {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--roi-text-heading) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .btn-secondary:is(:hover, :focus) {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: var(--roi-text-heading) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .btn-outline-secondary {
    color: var(--roi-text-heading) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: transparent !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .btn-outline-secondary:is(:hover, :focus) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--roi-text-heading) !important;
    color: var(--roi-text-heading) !important;
}

/* Role selection buttons (global, on dark backgrounds) */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .role-selection-btn {
    color: var(--roi-text-heading) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .role-selection-btn:is(:hover, :focus, [aria-pressed="true"]) {
    background-color: var(--roi-primary) !important;
    border-color: var(--roi-primary) !important;
    color: var(--roi-text-heading) !important;
}

/* Reset button (global) */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(#mastercam-reset-btn, #deburr-reset-btn) {
    color: rgba(255, 255, 255, 0.9);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(#mastercam-reset-btn, #deburr-reset-btn):hover {
    color: var(--roi-primary-hover);
}

/* ============================================
   BORDERS AND DIVIDERS
   ============================================ */

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator hr {
    border-color: var(--roi-border-subtle);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .sidebar-reset-section {
    border-top-color: var(--roi-border-subtle);
}

/* ============================================
   FORM CONTROLS - RANGE SLIDERS
   ============================================ */

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-range::-webkit-slider-runnable-track {
    background: var(--roi-border-semi);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-range::-moz-range-track {
    background: var(--roi-border-semi);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-range::-webkit-slider-thumb {
    background: var(--roi-primary);
    border-color: var(--roi-text-heading);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-range::-moz-range-thumb {
    background: var(--roi-primary);
    border-color: var(--roi-text-heading);
}

/* ============================================
   PROGRESS INDICATORS
   ============================================ */

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-step-progress {
    background-color: var(--roi-progress-bg);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .step-progress-marker {
    background-color: var(--roi-progress-marker-inactive);
    border-color: var(--roi-progress-marker-inactive);
    color: var(--roi-text-heading);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .step-progress-item:is(.active, .completed) .step-progress-marker {
    background-color: var(--roi-progress-marker-active);
    border-color: var(--roi-progress-marker-active);
    color: var(--roi-text-heading);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .step-progress-item::before {
    background-color: var(--roi-progress-marker-inactive);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .step-progress-item:is(.active, .completed)::before {
    background-color: var(--roi-progress-marker-active);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .step-progress-label {
    color: var(--roi-text-heading);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .step-progress-item:is(.active, .completed) .step-progress-label {
    color: var(--roi-primary);
}

/* ============================================
   TABLES
   ============================================ */

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .table {
    color: var(--roi-text-dark);
    border-color: var(--roi-border-light);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .table thead {
    background-color: var(--roi-bg-card-header);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .table :is(th, td) {
    border-color: var(--roi-border-light);
    color: var(--roi-text-dark);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--roi-progress-bg);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .table-dark {
    background-color: rgba(0, 0, 0, 0.3);
}

/* ============================================
   ALERTS AND BACKGROUNDS
   ============================================ */

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .alert {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--roi-border-subtle);
    color: var(--roi-text-heading);
}

/* Alert with .bg-light should keep light background with dark text */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .alert.bg-light {
    background-color: #F3F3F3 !important;
    color: var(--roi-text-dark) !important;
}

/* All text inside .alert.bg-light should be dark */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .alert.bg-light :is(h4, p, li, span) {
    color: var(--roi-text-dark) !important;
}

/* Buttons inside .alert.bg-light should use standard styling (not dark mode overrides) */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .alert.bg-light .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .alert.bg-light .btn-secondary:is(:hover, :focus) {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #fff !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .alert.bg-light .btn-outline-secondary {
    color: #6c757d !important;
    border-color: #6c757d !important;
    background-color: transparent !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .alert.bg-light .btn-outline-secondary:is(:hover, :focus) {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .bg-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .bg-success {
    background-color: rgba(40, 167, 69, 0.3) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .bg-success * {
    color: var(--roi-text-heading) !important;
}

/* Border colors */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .border-primary {
    border-color: var(--roi-primary-hover) !important;
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .card.border-primary {
    border-color: var(--roi-primary-hover) !important;
    border-width: 2px;
}

/* ============================================
   FOCUS AND VALIDATION STATES
   ============================================ */

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(input, select, button):focus-visible {
    outline-color: var(--roi-primary-hover);
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 138, 0.25);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-control.is-valid {
    border-color: #28a745;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .form-control.is-invalid {
    border-color: #dc3545;
}

/* ============================================
   RESULTS MODAL
   ============================================ */

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .results-modal-container {
    background: #1a1a1a;
    color: var(--roi-text-heading);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .results-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--roi-border-semi);
    color: var(--roi-text-heading);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .results-modal-close:hover {
    background: var(--roi-primary);
    border-color: var(--roi-primary);
}

/* ============================================
   RESULTS AND VALUES
   ============================================ */

/* Ensure all result numbers stay visible in dark mode */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .calculator-results :is(span, td, .h2, .h3, .h4) {
    color: var(--roi-text-dark) !important;
}

/* Currency symbols and metric values */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator :is(.currency-symbol, .deburr-currency-symbol) {
    color: inherit;
}

/* Step badges stay with brand color */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .step-badge {
    background-color: var(--roi-primary);
    color: var(--roi-text-heading);
}

/* ============================================
   COMPARISON CARDS (DEBURR CALCULATOR)
   ============================================ */

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .comparison-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--roi-border-subtle);
}

:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .metric-row {
    background: rgba(255, 255, 255, 0.05);
}

/* Bottom line box */
:is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator .bottom-line-box {
    background: linear-gradient(135deg, var(--roi-primary) 0%, var(--roi-primary-dark) 100%);
    color: var(--roi-text-heading);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    :is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator {
        background: white !important;
        color: black !important;
    }

    :is(.has-dark-background-color, .has-dark-background, .has-black-background-color) .roi-calculator * {
        background: white !important;
        color: black !important;
        border-color: #dee2e6 !important;
    }
}