/**
 * ROI Calculator Styles for Mastercam Theme
 * ==========================================
 * This stylesheet inherits colors, typography, and component styles
 * from the Mastercam WordPress theme (Bootstrap 5 based).
 *
 * Theme Variables:
 * - Primary: #E52600 (CNC Red)
 * - Font: Inter (body, h3-h6), Oswald (h1-h2)
 * - Buttons: 700 weight, 14px, 2px border, 5px radius
 * - Cards: Transparent bg, 0 border radius, 30px padding
 * - Forms: 10px vertical, 20px horizontal padding
 */

/* ============================================
   CSS CUSTOM PROPERTIES - Design System
   Scoped to calculator container to prevent global conflicts
   ============================================ */

.roi-calculator {
    /* Spacing System - 8px base unit */
    --spacing-unit: 8px;
    --spacing-xs: 4px;      /* 0.5 unit */
    --spacing-sm: 8px;      /* 1 unit */
    --spacing-md: 16px;     /* 2 units */
    --spacing-lg: 24px;     /* 3 units */
    --spacing-xl: 36px;     /* 4.5 units */
    --spacing-xxl: 48px;    /* 6 units */
    --spacing-xxxl: 60px;   /* 7.5 units */

    /* Colors - Semantic naming from Mastercam theme */
    --color-primary: #E52600;           /* CNC Red */
    --color-primary-dark: #CC2600;      /* Dark CNC Red */
    --color-primary-hover: #D1D9DD;     /* Light CNC Red */

    --color-text-primary: #1B2426;     /* Black */
    --color-text-muted: #565656;       /* Grey */
    --color-text-secondary: #737373;   /* Dark Grey */

    --color-border-light: #D3D3D3;     /* Light Grey border */
    --color-border-medium: #424242;    /* Medium Grey border */
    --color-border-dark: #737373;      /* Dark Grey border */

    --color-bg-light: #f0f0f0;         /* Light Grey background */
    --color-bg-medium: #D1D9DD;        /* Medium Grey background */
    --color-bg-form-step: #F3F3F3;     /* Form step background */
    --color-bg-white: #ffffff;         /* White */

    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    --border-width-progress: 4px;

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 5px;
    --border-radius-lg: 8px;
    --border-radius-circle: 50%;

    /* Typography */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 15px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 30px;

    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 120%;
    --line-height-base: 30px;
    --line-height-normal: normal;

    /* Progress Indicator */
    --progress-marker-size: 36px;
    --progress-line-height: 4px;

    /* Z-index Scale */
    --z-index-sticky: 10;
    --z-index-modal-backdrop: 10001; /* Higher than sticky-cta-bar (9999) */

    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s ease;
}

/* ============================================
   UTILITY CLASSES - Semantic Inline Style Replacements
   ============================================ */

/* Button icon spacing */
.btn-icon-start {
    margin-right: var(--spacing-xs);
}

.btn-icon-end {
    margin-left: var(--spacing-xs);
}

.btn-icon-interpret {
    margin-right: var(--spacing-sm);
}

/* Hidden elements */
.hidden {
    display: none !important;
}

/* Sidebar sections */
.sidebar-reset-section {
    margin-top: 1rem;
    padding-top: 1rem;
    text-align: center;
    border-top: var(--border-width-thin) solid var(--color-border-light);
}

/* Results summary card */
.results-summary-card {
    border-width: var(--border-width-thick) !important;
}

/* ============================================
   LAYOUT - Left Aligned
   ============================================ */

/* Ensure calculator is left-aligned */
.roi-calculator {
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
}

/* Override any centering from WordPress or theme */
.wp-block-group .roi-calculator,
.aligncenter .roi-calculator {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ============================================
   ACCESSIBILITY - WCAG AA Compliant
   ============================================ */

/* Screen reader only content (visually hidden but accessible) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip to content link for keyboard users */
.skip-to-calculator:focus {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
    background: #000;
    color: #fff;
    z-index: 10000;
    text-decoration: none;
}

/* ============================================
   THEME INTEGRATION
   ============================================ */

/* Calculator Wrapper */
.roi-calculator-wrapper {
    margin: 2rem 0;
}

/* Calculator Container - inherits theme max-width */
.roi-calculator {
    margin: 0;
    font-family: 'Inter', sans-serif; /* Match theme body font */
    color: #1B2426; /* Match theme $black */
}

/* Headings inherit theme typography */
.roi-calculator h1,
.roi-calculator h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    line-height: 100%;
    text-transform: uppercase;
    color: #1B2426 !important;
}

.roi-calculator h3,
.roi-calculator h4,
.roi-calculator h5,
.roi-calculator h6 {
    font-family: 'Inter', sans-serif;
    line-height: 125%;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #1B2426 !important;
}

/* Main calculator title */
.roi-calculator h3 {
    font-size: 18px;
}

@media (min-width: 768px) {
    .roi-calculator h3 {
        font-size: 24px;
    }
}

/* Section headings and questions */
.roi-calculator h4 {
    font-size: 16px;
}

@media (min-width: 768px) {
    .roi-calculator h4 {
        font-size: 20px;
    }
}

/* Subheadings */
.roi-calculator h5 {
    font-size: 20px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: -0.48px;
}

@media (min-width: 768px) {
    .roi-calculator h5 {
        font-size: 24px;
    }
}

/* Result card headings - normalize with body text */
.roi-calculator .card-body h5,
.roi-calculator .card-body h6 {
    font-size: 1rem; /* Same as body text for result labels */
    font-weight: 600;
    color: #1B2426 !important; /* Black text for result labels */
}

/* Ensure all result numbers and values use black text */
.roi-calculator .calculator-results span,
.roi-calculator .calculator-results td,
.roi-calculator .calculator-results .h2,
.roi-calculator .calculator-results .h3,
.roi-calculator .calculator-results .h4 {
    color: #1B2426 !important; /* Black text for all numbers and values */
}

/* Primary color override to match Mastercam CNC Red */
.roi-calculator .card-header.bg-primary,
.roi-calculator .btn-primary {
    background-color: #E52600 !important; /* Mastercam CNC Red */
    border-color: #E52600 !important;
}

.roi-calculator .btn-primary:hover,
.roi-calculator .btn-primary:focus {
    background-color: #737373 !important; /* Theme $darkgrey - Match Mastercam theme */
    border-color: #737373 !important;
    color: #ffffff !important;
}

/* Success background - default light grey for non-text-white cards */
.roi-calculator .bg-success {
    background-color: #D1D9DD !important; /* Theme medium grey */
    color: #1B2426 !important; /* Black text for contrast */
}

/* Success cards with white text - use slightly darker grey than bg-light */
.roi-calculator .card.bg-success.text-white,
.roi-calculator .bg-success.text-white {
    background-color: #d9d9d9 !important; /* Slightly darker than bg-light (#f0f0f0) */
    color: #1B2426 !important; /* Black text */
}

.roi-calculator .card.bg-success.text-white h6,
.roi-calculator .card.bg-success.text-white p,
.roi-calculator .card.bg-success.text-white span,
.roi-calculator .bg-success.text-white * {
    color: #1B2426 !important; /* Black text */
}

.roi-calculator .text-primary {
    color: #E52600 !important;
}

.roi-calculator .border-primary {
    border-color: #E52600 !important;
}

/* Cards match theme styling */
.roi-calculator .card {
    border-radius: 0; /* Match theme $card-border-radius */
}

.roi-calculator .card-body {
    padding: 30px; /* Match theme $card-spacer-x and $card-spacer-y */
}

.roi-calculator .card-header {
    padding: 30px; /* Match theme $card-cap-padding-y */
    font-weight: 600;
}

/* Equal height cards in results section */
.roi-calculator .calculator-results .row {
    display: flex;
    flex-wrap: wrap;
}

.roi-calculator .calculator-results .row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.roi-calculator .calculator-results .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.roi-calculator .calculator-results .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Buttons match theme styling */
.roi-calculator .btn {
    font-family: 'Inter', sans-serif; /* Match theme $btn-font-family */
    font-weight: 700; /* Match theme $btn-font-weight */
    font-size: 14px; /* Match theme $btn-font-size */
    border-width: 2px; /* Match theme $btn-border-width */
    border-radius: 5px; /* Match theme $btn-border-radius */
    padding: 10px 20px; /* Match theme form padding */
    text-transform: uppercase; /* Match theme buttons */
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Secondary button matches theme */
.roi-calculator .btn-secondary {
    background-color: #E52600 !important;
    border-color: #E52600 !important;
    color: #ffffff !important;
}

.roi-calculator .btn-secondary:hover,
.roi-calculator .btn-secondary:focus {
    background-color: #CC2600 !important; /* Theme $cncreddark - Match Mastercam theme */
    border-color: #CC2600 !important;
    color: #ffffff !important;
}

.roi-calculator .btn-outline-secondary {
    color: #E52600 !important;
    border-color: #E52600 !important;
    background-color: transparent !important;
}

.roi-calculator .btn-outline-secondary:hover,
.roi-calculator .btn-outline-secondary:focus {
    background-color: #E52600 !important;
    border-color: #E52600 !important;
    color: #ffffff !important;
}

/* Form controls match theme */
.roi-calculator .form-control,
.roi-calculator .form-select {
    padding: 10px 20px; /* Match theme $input-btn-padding */
    border-radius: 0; /* Match theme $border-radius */
    border-width: 1px; /* Match theme $border-width */
    border-color: #737373; /* Match theme $darkgrey */
    font-family: 'Inter', sans-serif;
    font-size: 1rem; /* Consistent with body text */
    color: #1B2426; /* Match theme $black */
    background-color: #fff;
}

/* Links match theme */
.roi-calculator a {
    color: #E52600; /* Match theme $link-color */
    text-decoration: none;
}

.roi-calculator a:hover {
    color: #D1D9DD; /* Match theme $link-hover-color */
    text-decoration: none; /* Match theme $link-hover-decoration */
}

/* Gray colors match theme */
.roi-calculator .text-muted {
    color: #565656 !important; /* Match theme $grey */
}

.roi-calculator .bg-light {
    background-color: #f0f0f0 !important; /* Match theme $lightgrey */
}

/* Spacing matches theme - $spacer: 1rem */
.roi-calculator .mb-3 {
    margin-bottom: 1rem !important;
}

.roi-calculator .mb-4 {
    margin-bottom: 1.5rem !important;
}

.roi-calculator .mt-4,
.roi-calculator .mt-5 {
    margin-top: 1.5rem !important;
}

/* Shadows match theme */
.roi-calculator .shadow-sm {
    box-shadow: 0 4px 8px rgb(0 0 0 / 15%) !important; /* Match theme $shadow */
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Ensure text-muted meets WCAG AA contrast ratio (4.5:1) */
.roi-calculator .text-muted,
.roi-calculator .small.text-muted,
.roi-calculator .form-text.text-muted {
    color: #565656 !important; /* Darker than Bootstrap default #6c757d for better contrast */
}

/* Focus visible styles for better keyboard navigation */
.roi-calculator input:focus-visible,
.roi-calculator select:focus-visible,
.roi-calculator button:focus-visible,
.roi-calculator .accordion-button:focus-visible {
    outline: 3px solid #E52600;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(209, 17, 65, 0.25);
}

/* Ensure range sliders are keyboard accessible */
.roi-calculator input[type="range"]:focus-visible {
    outline: 3px solid #E52600;
    outline-offset: 2px;
}

/* ============================================
   TWO-COLUMN LAYOUT
   ============================================ */

/* Ensure parent card-body doesn't interfere with sticky */
.roi-calculator .card-body {
    overflow: visible;
}

/* Ensure row allows sticky positioning and aligns columns to top */
.roi-calculator > .row {
    overflow: visible;
    align-items: flex-start;
}

/* Form Column */
.calculator-form-column {
    /* Padding removed */
}

/* Sidebar */
.calculator-sidebar-sticky {
    /* Sticky positioning removed */
}

/* Ensure parent column allows sticky positioning */
.roi-calculator .col-lg-5 {
    align-self: flex-start;
}

/* Ensure parent elements allow sticky */
.roi-calculator .card-body,
.roi-calculator .row {
    overflow: visible;
}

/* Hide progress bar in redesigned Deburr calculator */
.deburr-calculator-redesign .deburr-progress {
    display: none !important;
}

/* Sidebar Card Styling */
.calculator-sidebar-sticky {
    background-color: var(--color-bg-white);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    padding: 1rem;
}

.calculator-sidebar-sticky .card {
    border: none;
    box-shadow: none;
}

.calculator-sidebar-sticky h3 {
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    text-align: left;
}

/* Live Metrics */
.live-metric {
    text-align: left;
    padding-top: 0;
    padding-bottom: var(--spacing-lg); /* 24px - vertical rhythm */
    background-color: var(--color-bg-white);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-base);
}

.metric-label {
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
}

.metric-value {
    font-size: 40px !important;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

/* Ensure all children of metric-value inherit the 40px font size */
.metric-value * {
    font-size: inherit !important;
}

/* Reset Button in Sidebar */
#mastercam-reset-btn,
#deburr-reset-btn {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 26px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

#mastercam-reset-btn:hover,
#mastercam-reset-btn:focus,
#deburr-reset-btn:hover,
#deburr-reset-btn:focus {
    color: var(--color-primary);
    background: none;
    border: none;
    text-decoration: none;
}

/* Progress Bar Customization */
.form-progress .progress {
    background-color: #D1D9DD;
    border-radius: 10px;
    overflow: hidden;
}

.form-progress .progress-bar {
    transition: width 0.6s ease;
    background-color: #E52600 !important;
}

/* ============================================
   PROGRESSIVE DISCLOSURE FORM STEPS
   ============================================ */

.progressive-form {
    position: relative;
    min-height: 500px; /* Prevent layout shift when switching between steps */
}

.progressive-form .form-step {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--color-bg-form-step);
    border: none;
    border-radius: var(--border-radius-lg);
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Deburr qualification steps - additional padding for better spacing in dark mode */
.deburr-qualification {
    padding: var(--spacing-xl) 0;
}

/* Deburr Role Selection - standalone form-step styling */
.deburr-role-selection {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--color-bg-form-step);
    border-radius: var(--border-radius-lg);
}

.progressive-form .form-step.hidden {
    opacity: 0;
    /* Use absolute positioning to remove from flow and prevent whitespace */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    /* Override global .hidden to allow transitions */
    display: block !important;
}

.progressive-form .form-step.step-revealed {
    animation: slideInFade 0.5s ease both;
}

@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.progressive-form .form-step.step-completed {
    background-color: #f8f9fa;
}

/* Step Headings */
.step-heading {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1B2426;
    margin-bottom: 1rem;
    opacity: 1;
    transition: opacity 0.3s ease;
    position: relative;
}

.step-heading.hidden {
    opacity: 0;
    /* Use absolute positioning to remove from flow and prevent whitespace */
    position: absolute;
    pointer-events: none;
    /* Override global .hidden to allow transitions */
    display: flex !important;
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #E52600;
    color: white;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 700;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.form-step.step-completed .step-badge {
    background-color: #28a745;
    color: #ffffff;
}

/* Optional Step Badge */
.optional-step .step-heading .badge {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
}

/* Step Navigation Buttons */
.form-step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xl); /* 36px - Visual separation from form fields */
}

.form-step-navigation .btn {
    min-width: 120px;
}

.form-step-navigation .step-nav-spacer {
    flex: 1;
}

/* Step Progress Indicator */
.form-step-progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 1.5rem 0;
    background-color: #fff;
    border-radius: 8px;
    padding: 1.5rem;
}

.step-progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    text-align: center;
}

.step-progress-item::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    right: -50%;
    height: var(--progress-line-height); /* 4px - connecting line thickness */
    background-color: var(--color-border-light);
    z-index: 0;
}

.step-progress-item:last-child::before {
    display: none;
}

.step-progress-item.active::before {
    background-color: var(--color-text-primary);
}

.step-progress-item.completed::before {
    background-color: var(--color-text-primary);
}

.step-progress-marker {
    width: var(--progress-marker-size);
    height: var(--progress-marker-size);
    border-radius: var(--border-radius-circle);
    background-color: var(--color-bg-white);
    border: var(--border-width-progress) solid var(--color-border-light);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-base);
    position: relative;
    z-index: 1;
    margin-bottom: 0.5rem;
    transition: all var(--transition-base);
}

.step-progress-item.active .step-progress-marker {
    background-color: var(--color-bg-white);
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
    transform: scale(1.1);
}

.step-progress-item.completed .step-progress-marker {
    background-color: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: white;
}

.step-progress-label {
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
    max-width: 120px;
}

.step-progress-item.active .step-progress-label {
    color: var(--color-text-primary);
}

.step-progress-item.completed .step-progress-label {
    color: var(--color-text-primary);
}

/* Clickable progress items (completed steps) */
.step-progress-item.is-clickable {
    cursor: pointer;
}

.step-progress-item.is-clickable:hover .step-progress-marker,
.step-progress-item.is-clickable:focus .step-progress-marker {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.step-progress-item.is-clickable:focus {
    outline: none;
}

.step-progress-item.is-clickable:focus-visible .step-progress-marker {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

@media (max-width: 768px) {
    .step-progress-label {
        font-size: 10px;
        max-width: 80px;
    }

    .step-progress-marker {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

/* Responsive Two-Column Layout */
@media (max-width: 991px) {
    .calculator-form-column {
        margin-bottom: 2rem;
    }

    /* Reduce min-height on mobile where vertical space is limited */
    .progressive-form {
        min-height: 400px;
    }

    /* On mobile, stack form above sidebar */
    .roi-calculator .calculator-form-column,
    .roi-calculator .col-lg-7 {
        order: 1;
    }

    .roi-calculator .row > .col-lg-5 {
        order: 2;
    }
}

/* ============================================
   DEBURR CALCULATOR SPECIFIC STYLES
   ============================================ */

/* Keep top/bottom padding but override left/right */
#deburr-calculator .card-body {
    padding: 30px;
}

/* ============================================
   DEBURR CALCULATOR - THREE-ZONE REDESIGN
   ============================================ */

/* ZONE 1: Problem Agitation Section */
.problem-agitation-section {
    margin-bottom: 3rem;
}

.quick-stats-bar {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 2rem;
    border-radius: 8px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: #E52600;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.875rem;
    color: #565656;
    line-height: 1.4;
}

/* ZONE 2: Calculator Stages */
.calculator-stage {
    margin-bottom: 3rem;
}

.stage-header {
    border-bottom: 3px solid #E52600;
    padding-bottom: 1rem;
}

.stage-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1B2426;
    margin-bottom: 0.5rem;
}

.stage-subtitle {
    font-size: 1rem;
    margin-bottom: 0;
}

.form-section {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.section-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1B2426;
    margin-bottom: 1rem;
}

/* Interim Results */
.interim-results-section {
    margin: 2rem 0;
    animation: slideInFade 0.5s ease;
}

.interim-results-section .alert {
    border-left: 5px solid #E52600;
}

/* ZONE 3: Results Display */
.results-zone {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 3px solid #E52600;
}

.results-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #1B2426;
    margin-bottom: 1rem;
}

/* Comparison Cards */
.comparison-card {
    background: white;
    border: 2px solid #D1D9DD;
    border-radius: 8px;
    padding: 2rem;
    height: 100%;
    transition: all 0.3s ease;
}

.comparison-card.current-state {
    border-color: #dc3545;
}

.comparison-card.with-mastercam {
    border-color: #28a745;
    background: linear-gradient(135deg, #f8fff9 0%, #e8f5e9 100%);
}

.comparison-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid currentColor;
}

.comparison-card.current-state .comparison-title {
    color: #dc3545;
}

.comparison-card.with-mastercam .comparison-title {
    color: #28a745;
}

.comparison-metrics {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.metric-label {
    font-weight: 600;
    color: #565656;
}

.metric-value {
    font-weight: 700;
    font-size: 40px;
    color: #1B2426;
}

.metric-value.success {
    color: #28a745;
}

/* Bottom Line Box */
.bottom-line-box {
    background: linear-gradient(135deg, #E52600 0%, #b01036 100%);
    color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(209, 17, 65, 0.3);
}

.bottom-line-metric {
    padding: 1rem;
}

.bottom-line-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.bottom-line-value {
    font-size: 2rem;
    font-weight: 700;
}

/* Tooltip Button Styling */
.roi-calculator .btn-link.btn-sm {
    text-decoration: none;
    vertical-align: baseline;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.roi-calculator .btn-link.btn-sm:hover svg {
    opacity: 0.7;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 767px) {
    /* Problem Agitation Stats */
    .quick-stats-bar {
        padding: 1rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.8125rem;
    }

    /* Stage Headers */
    .stage-title {
        font-size: 1.5rem;
    }

    /* Form Sections */
    .form-section {
        padding: 1rem;
    }

    /* Comparison Cards - Single Column */
    .comparison-card {
        margin-bottom: 1rem;
    }

    /* Bottom Line Box */
    .bottom-line-box {
        padding: 1.5rem;
    }

    .bottom-line-value {
        font-size: 1.5rem;
    }

    /* Sticky Interim Results on Mobile */
    .interim-results-section.sticky-mobile {
        position: sticky;
        top: 60px;
        z-index: 10;
        background: white;
        padding: 1rem 0;
        margin: 0 -15px;
        padding-left: 15px;
        padding-right: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Floating "See My Savings" Button */
    .floating-cta {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: translateX(-50%) scale(1); }
        50% { transform: translateX(-50%) scale(1.05); }
    }

    /* Swipeable Comparison */
    .comparison-cards-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        display: flex;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .comparison-cards-container .col-md-6 {
        min-width: 85%;
        scroll-snap-align: center;
    }

    .swipe-indicator {
        text-align: center;
        color: #565656;
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }

    .swipe-indicator::after {
        content: " 👉";
    }
}

/* Editor Preview Styles */
.roi-calculator-editor-preview {
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%); /* Use theme grays */
    border: 2px dashed #D1D9DD;
    border-radius: 5px; /* Match theme button radius */
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.roi-calculator-editor-preview h3 {
    color: #E52600; /* Mastercam CNC Red */
}

/* Input Focus Enhancement - Use Mastercam theme colors */
.roi-calculator input[type="number"]:focus,
.roi-calculator select:focus {
    border-color: #E52600; /* Mastercam CNC Red */
    box-shadow: 0 0 0 0.2rem rgba(209, 17, 65, 0.25); /* CNC Red with transparency */
}

/* Results Cards - No hover effects (non-interactive display elements) */
.calculator-results .card {
    /* Cards display read-only results - no hover interaction needed */
}

/* Print Styles */
@media print {
    /* Hide everything on the page using visibility (allows children to override) */
    body * {
        visibility: hidden;
    }

    /* Reset body for clean print */
    html, body {
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    body {
        padding-right: 0 !important;
    }

    /* Remove box shadows */
    *, *::before, *::after {
        box-shadow: none !important;
    }

    /* Position the modal at top left for printing */
    #resultsModal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        visibility: visible !important;
    }

    /* Make modal dialog visible */
    #resultsModal .modal-dialog {
        visibility: visible !important;
        overflow: visible !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* Make modal content and all children visible */
    #resultsModal .modal-content,
    #resultsModal .modal-content * {
        visibility: visible !important;
        overflow: visible !important;
    }

    #resultsModal .modal-content {
        position: static !important;
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        background: white !important;
    }

    #resultsModal .modal-body {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 20px !important;
    }

    /* Hide modal header and footer for print */
    #resultsModal .modal-header,
    #resultsModal .modal-header *,
    #resultsModal .modal-footer,
    #resultsModal .modal-footer * {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide the interpretation section in print */
    #roi-interpretation,
    #roi-interpretation * {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide backdrop */
    .modal-backdrop {
        display: none !important;
        visibility: hidden !important;
    }

    /* Show input values summary */
    #input-values-summary {
        display: block !important;
        visibility: visible !important;
    }

    /* Print Header */
    #resultsModal .modal-body::before {
        content: "Mastercam ROI Calculator Report";
        display: block;
        visibility: visible !important;
        font-size: 18pt;
        font-weight: 700;
        color: #1B2426;
        text-align: center;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 3px solid #E52600;
    }

    /* Avoid page breaks */
    .card {
        border: 1px solid #dee2e6 !important;
        page-break-inside: avoid;
        margin-bottom: 0.75rem !important;
        break-inside: avoid;
    }

    .card-body {
        padding: 15px !important;
    }

    .table {
        page-break-inside: avoid;
        break-inside: avoid;
        font-size: 10pt;
    }

    .table th,
    .table td {
        padding: 8px 10px !important;
    }

    #input-values-summary {
        page-break-after: avoid;
        break-after: avoid;
        background: #f8f9fa !important;
        padding: 15px !important;
        margin-bottom: 1rem !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure colors print properly */
    .bg-primary,
    .bg-success,
    .bg-info,
    .text-primary,
    .border-primary,
    .results-summary-card,
    .table-dark {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Summary card styling for print */
    .results-summary-card {
        border: 3px solid #E52600 !important;
        background: #fff !important;
    }

    .results-summary-card .display-4 {
        font-size: 24pt !important;
    }

    /* Better typography for print */
    body {
        font-size: 10pt;
        line-height: 1.3;
    }

    h3, h4, h5, h6 {
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Print header styling */
    #input-values-summary h3 {
        color: #1B2426 !important;
        border-bottom: 2px solid #E52600;
        padding-bottom: 0.5rem;
        margin-bottom: 0.75rem;
        font-size: 12pt;
    }

    #input-values-summary p {
        margin-bottom: 0.25rem !important;
        font-size: 10pt;
    }

    /* Better spacing for print */
    .row {
        margin-bottom: 0.5rem;
    }

    .row.g-3 {
        --bs-gutter-y: 0.5rem;
    }

    /* Section headings */
    .calculator-results h4 {
        font-size: 12pt;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        color: #1B2426 !important;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 0.25rem;
    }

    /* Compact cards in print */
    .calculator-results .h2 {
        font-size: 16pt !important;
    }

    .calculator-results .h3 {
        font-size: 14pt !important;
    }

    /* Print footer */
    .calculator-results::after {
        content: "Generated by Mastercam ROI Calculator - www.mastercam.com";
        display: block;
        text-align: center;
        font-size: 8pt;
        color: #6c757d;
        margin-top: 1.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #dee2e6;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .roi-calculator {
        font-size: 0.95rem;
    }

    .calculator-results .h2,
    .calculator-results .h3,
    .calculator-results .h4 {
        font-size: 1.5rem;
    }

    .table-responsive {
        font-size: 0.875rem;
    }
}

/* Form Label Enhancement - Match theme form styling */
.roi-calculator .form-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #1B2426; /* Match theme $black */
    line-height: 1.5;
}

/* Fieldset grouping for visual organization */
.roi-calculator fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.roi-calculator fieldset legend {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #D1D9DD;
    width: 100%;
}

/* Inline help button styling */
.roi-calculator .btn-link {
    color: #565656;
    text-decoration: none;
    vertical-align: middle;
}

.roi-calculator .btn-link:hover,
.roi-calculator .btn-link:focus {
    color: #E52600;
}

/* Form text helper styling */
.roi-calculator .form-text {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Invalid feedback styling */
.roi-calculator .invalid-feedback {
    display: none;
    font-size: 0.875rem;
    color: #dc3545;
    margin-top: 0.25rem;
}

.roi-calculator .is-invalid ~ .invalid-feedback {
    display: block;
}

.roi-calculator .form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Valid (success) feedback styling - Theme red checkmark */
.roi-calculator .form-control.is-valid {
    border-color: #E52600;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23E52600' 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");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.roi-calculator .form-control.is-valid:focus {
    border-color: #E52600;
    box-shadow: 0 0 0 0.2rem rgba(209, 17, 65, 0.15);
}

.roi-calculator .form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Currency Symbol Styling */
.currency-symbol,
.deburr-currency-symbol {
    font-weight: 600;
}

/* ============================================
   RANGE SLIDER STYLING
   ============================================ */

/* Range slider track - match theme styling */
.roi-calculator .form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.roi-calculator .form-range:focus {
    outline: 2px solid #E52600;
    outline-offset: 2px;
}

.roi-calculator .form-range:focus:not(:focus-visible) {
    outline: none;
}

.roi-calculator .form-range:focus-visible {
    outline: 3px solid #E52600;
    outline-offset: 2px;
}

/* Track styling */
.roi-calculator .form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    cursor: pointer;
    background: #D1D9DD; /* Theme medium grey */
    border-radius: 0.25rem;
}

.roi-calculator .form-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    cursor: pointer;
    background: #D1D9DD;
    border-radius: 0.25rem;
}

/* Thumb styling - theme red */
.roi-calculator .form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #E52600; /* Theme CNC red */
    cursor: pointer;
    margin-top: -0.375rem;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.roi-calculator .form-range::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #E52600;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Focus state */
.roi-calculator .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 0.2rem rgba(209, 17, 65, 0.25);
}

.roi-calculator .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 0.2rem rgba(209, 17, 65, 0.25);
}

/* Active state */
.roi-calculator .form-range:active::-webkit-slider-thumb {
    background: #CC2600; /* Theme dark red */
}

.roi-calculator .form-range:active::-moz-range-thumb {
    background: #CC2600;
}

/* Range value display styling */
.roi-calculator .form-label .text-primary {
    font-size: 1.125rem;
    display: inline-block;
    min-width: 3rem;
    text-align: left;
}

/* ============================================
   RESULTS MODAL STYLING (Bootstrap)
   ============================================ */

/* Results modal uses Bootstrap modal - custom styling for content */
#resultsModal .modal-body {
    padding: 1.5rem;
}

#resultsModal .modal-header {
    background: #f8f9fa;
    border-bottom: 2px solid #E52600;
}

#resultsModal .modal-title {
    color: #1B2426;
    font-weight: 700;
}

#resultsModal .modal-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Results modal content animation */
#resultsModal .calculator-results {
    animation: slideUpFade 0.4s ease both;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation for calculator transitions */
.roi-calculator [style*="display:none"] {
    opacity: 0;
}

.roi-calculator [style*="display: none"] {
    opacity: 0;
}

/* Button Group Spacing */
.roi-calculator .d-grid {
    gap: 1rem;
}

/* Table Enhancements */
.roi-calculator .table th {
    font-weight: 600;
    white-space: nowrap;
}

.roi-calculator .table td {
    vertical-align: middle;
}

/* Alert Styling */
.roi-calculator .alert {
    border-radius: 0.5rem;
}

/* Card Header Enhancement */
.roi-calculator .card-header {
    font-weight: 600;
    padding: 1rem 1.25rem;
}

/* Loading State (optional) */
.roi-calculator.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Focus Visible for Accessibility - WCAG AA compliant with Mastercam theme colors */
.roi-calculator button:focus-visible,
.roi-calculator input:focus-visible,
.roi-calculator select:focus-visible {
    outline: 3px solid #E52600; /* Mastercam CNC Red */
    outline-offset: 2px;
}

/* Enhanced focus for keyboard navigation */
.roi-calculator button:focus,
.roi-calculator input:focus,
.roi-calculator select:focus {
    outline: 2px solid #E52600; /* Mastercam CNC Red */
    outline-offset: 1px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .roi-calculator button,
    .roi-calculator input,
    .roi-calculator select {
        border-width: 2px; /* Already matches theme */
    }

    .roi-calculator button:focus-visible,
    .roi-calculator input:focus-visible,
    .roi-calculator select:focus-visible {
        outline-width: 4px;
        outline-color: #CC2600; /* Darker CNC Red for high contrast */
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .calculator-results .card,
    .roi-calculator [style*="display:none"],
    .roi-calculator [style*="display: none"] {
        transition: none !important;
        animation: none !important;
    }
}

/* Color Contrast Improvements for WCAG AA - Using Mastercam theme colors */
.roi-calculator .text-muted {
    color: #565656 !important; /* Theme $grey - Ensures 4.5:1 contrast ratio */
}

.roi-calculator .card-header.bg-primary,
.roi-calculator .card.bg-primary.text-white,
.roi-calculator .bg-primary.text-white {
    background-color: #E52600 !important; /* Mastercam CNC Red */
    color: #ffffff !important; /* White text on red background */
}

/* White text for headings and all content on red background */
.roi-calculator .card-header.bg-primary h3,
.roi-calculator .card-header.bg-primary h4,
.roi-calculator .card-header.bg-primary h5,
.roi-calculator .card-header.bg-primary h6,
.roi-calculator .bg-primary.text-white h3,
.roi-calculator .bg-primary.text-white h4,
.roi-calculator .bg-primary.text-white h5,
.roi-calculator .bg-primary.text-white h6,
.roi-calculator .bg-primary.text-white *,
.roi-calculator .card-header.bg-primary * {
    color: #ffffff !important; /* White text on red background */
}

.roi-calculator .bg-info {
    background-color: #e7e9ec !important; /* Theme $info */
    color: #1B2426 !important; /* Ensure text contrast */
}

.roi-calculator .text-success {
    color: #565656 !important; /* Theme grey */
}

/* Focus management for dynamic content */
.roi-calculator [aria-live="polite"] {
    position: relative;
}

/* Ensure buttons have proper contrast */
.roi-calculator .btn {
    font-weight: 500;
    min-height: 44px; /* Touch target size for mobile accessibility */
    min-width: 44px;
}

/* Large touch targets for mobile */
@media (max-width: 768px) {
    .roi-calculator button,
    .roi-calculator input,
    .roi-calculator select {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* ============================================
   PREMIUM UX ENHANCEMENTS
   ============================================ */

/* Progressive Disclosure - Hide results until data entered */
/* Results are always visible when in modal */
.results-modal .calculator-results {
    opacity: 1;
    visibility: visible;
}

/* Two Column Layout: Keep results column height intact */
@media (min-width: 992px) {
    .roi-calculator .calculator-results {
        min-height: 400px;
    }
}

/* Smooth Reveal Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered Card Reveals */
.calculator-results.is-visible .card {
    animation: fadeInUp 0.5s ease-out backwards;
}

.calculator-results.is-visible .row:nth-child(1) .col-md-6:nth-child(1) .card {
    animation-delay: 0.1s;
}

.calculator-results.is-visible .row:nth-child(1) .col-md-6:nth-child(2) .card {
    animation-delay: 0.2s;
}

.calculator-results.is-visible .row:nth-child(3) .col-md-6:nth-child(1) .card {
    animation-delay: 0.3s;
}

.calculator-results.is-visible .row:nth-child(3) .col-md-6:nth-child(2) .card {
    animation-delay: 0.4s;
}

/* Value Change Pulse */
@keyframes valuePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.roi-calculator .value-updating {
    animation: valuePulse 0.3s ease-in-out;
    color: #E52600;
    font-weight: 700;
}

/* Number Counter Animation */
.roi-calculator .counter {
    display: inline-block;
    transition: all 0.3s ease-out;
}

/* Highlight Significant Results */
@keyframes successGlow {
    0%, 100% {
        box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
    }
    50% {
        box-shadow: 0 4px 20px rgba(230, 230, 230, 0.5);
    }
}

.roi-calculator .card.is-significant {
    animation: successGlow 1.5s ease-in-out;
}

/* Progress Indicator for Deburr Calculator */
.deburr-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    gap: 0.5rem;
}

.deburr-progress-step {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #D1D9DD;
    transition: all 0.3s ease-in-out;
}

.deburr-progress-step.is-active {
    background-color: #E52600;
    transform: scale(1.3);
}

.deburr-progress-step.is-complete {
    background-color: #565656;
}

.deburr-progress-line {
    width: 40px;
    height: 2px;
    background-color: #D1D9DD;
    transition: background-color 0.3s ease-in-out;
}

.deburr-progress-line.is-complete {
    background-color: #565656;
}

/* Smooth Section Transitions for Deburr */
.roi-calculator [id^="option-container"],
.roi-calculator [id^="calculator-"],
.roi-calculator #q2-option2-no-response {
    animation: fadeIn 0.4s ease-in-out;
}

/* Input Focus Enhancements */
.roi-calculator input[type="number"]:focus,
.roi-calculator select:focus {
    transform: scale(1.01);
    transition: all 0.2s ease-in-out;
}

/* Button Hover Enhancements - Align to theme (minimal transforms) */
.roi-calculator .btn {
    position: relative;
    overflow: hidden;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.roi-calculator .btn:hover {
    /* No transform - theme uses only color transitions */
    box-shadow: none;
}

.roi-calculator .btn:active {
    /* No transform - match theme behavior */
}

/* Loading State for Calculations */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.roi-calculator .is-calculating {
    background: linear-gradient(
        90deg,
        rgba(209, 17, 65, 0.05) 0%,
        rgba(209, 17, 65, 0.15) 50%,
        rgba(209, 17, 65, 0.05) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Table Row Stagger */
.roi-calculator table tbody tr {
    animation: fadeInUp 0.3s ease-out backwards;
}

.roi-calculator table tbody tr:nth-child(1) { animation-delay: 0.1s; }
.roi-calculator table tbody tr:nth-child(2) { animation-delay: 0.15s; }
.roi-calculator table tbody tr:nth-child(3) { animation-delay: 0.2s; }
.roi-calculator table tbody tr:nth-child(4) { animation-delay: 0.25s; }
.roi-calculator table tbody tr:nth-child(5) { animation-delay: 0.3s; }

/* Currency Selector Smooth Transition */
.roi-calculator .currency-symbol {
    transition: opacity 0.2s ease-in-out;
}

.roi-calculator .currency-symbol.is-updating {
    opacity: 0.5;
}

/* Success Badge Animation */
@keyframes badgeBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.roi-calculator .payback-badge {
    display: inline-block;
    animation: badgeBounce 0.5s ease-in-out;
}

/* Reduced Motion Override - Respect User Preferences */
@media (prefers-reduced-motion: reduce) {
    .roi-calculator * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .roi-calculator .calculator-results {
        transition: opacity 0.2s ease-in-out;
    }

    .roi-calculator input:focus,
    .roi-calculator .btn:hover {
        transform: none;
    }
}

/* ============================================
   ROI CALCULATOR UI FIXES
   ============================================ */

/* Make #preview-total-savings same font size as #preview-year-1-savings */
.roi-calculator #preview-total-savings,
.roi-calculator #preview-year-1-savings {
    font-size: var(--font-size-xl); /* 30px - consistent sizing */
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}

/* Update range slider background to #424242 */
.roi-calculator .form-range::-webkit-slider-runnable-track {
    background: #424242;
}

.roi-calculator .form-range::-moz-range-track {
    background: #424242;
}

/* Hide progress indicator labels on mobile, center connector line */
@media (max-width: 768px) {
    .step-progress-label {
        display: none;
    }

    /* Center connector line with step number elements */
    .step-progress-item::before {
        top: calc(var(--progress-marker-size) / 2 - var(--progress-line-height) / 2);
    }
}

/* Remove min-height from form steps - let content determine height */
/* The sidebar will naturally set the column height through flexbox */

/* Make form column equal height with sidebar column on desktop */
@media (min-width: 992px) {
    .roi-calculator > .row {
        align-items: stretch;
    }

    /* Keep margin between multiple visible form steps (e.g., Deburr calculator with role selection + substeps) */
    .progressive-form .form-step {
        margin-bottom: 2rem;
    }

    /* Remove margin from last visible form-step to prevent extra whitespace */
    .progressive-form .form-step:not(.hidden):last-of-type {
        margin-bottom: 0;
    }
}

/* Show checkmark on Annual Maintenance when it has a valid calculated value */
.roi-calculator #yearly-software-maintenance-contracts-cost.is-valid {
    border-color: #E52600;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23E52600' 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");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Extra small text for inline links */
.roi-calculator .x-small {
    font-size: 0.75rem;
    color: #1B2426;
    text-decoration: underline;
}

.roi-calculator .x-small:hover {
    color: #1B2426;
    text-decoration: underline;
}

/* Override Bootstrap modal z-index to appear above sticky CTA bar (9999) */
.modal.fade {
    z-index: 10002;
}

.modal-backdrop.fade {
    z-index: 10001;
}

/* ============================================
   DISCLAIMER COLLAPSE STYLING
   ============================================ */

/* Disclaimer toggle button */
.roi-calculator .disclaimer-toggle {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Disclaimer icon rotation */
.roi-calculator .disclaimer-icon {
    transition: transform var(--transition-base);
}

/* Rotate icon 90 degrees when expanded */
.roi-calculator .disclaimer-toggle[aria-expanded="true"] .disclaimer-icon {
    transform: rotate(90deg);
}

/* ============================================
   DEBURR CALCULATOR PRINT STYLES
   ============================================ */

/* Print button styling */
.calculator-print-btn {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: var(--border-width-thin) solid var(--color-border-light);
}

.calculator-print-btn .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media print {
    /* Hide everything except print container */
    body.printing-calculator > *:not(#print-container) {
        display: none !important;
    }

    /* Reset body */
    body.printing-calculator {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    /* Print container takes full page */
    #print-container {
        display: block !important;
        position: static !important;
        width: 100% !important;
        padding: 20px !important;
        margin: 0 !important;
        background: white !important;
    }

    /* Calculator in print container */
    #print-container #deburr-calculator {
        display: block !important;
        width: 100% !important;
    }

    /* Two column layout for print */
    #print-container #deburr-calculator > .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #print-container #deburr-calculator .col-lg-7 {
        width: 55% !important;
        flex: 0 0 55% !important;
        max-width: 55% !important;
        padding-right: 20px !important;
    }

    #print-container #deburr-calculator .col-lg-5 {
        width: 45% !important;
        flex: 0 0 45% !important;
        max-width: 45% !important;
    }

    /* Print header */
    #print-container #deburr-calculator::before {
        content: "Mastercam Deburr ROI Calculator Results";
        display: block !important;
        font-size: 18pt !important;
        font-weight: 700 !important;
        color: #1B2426 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
        border-bottom: 3px solid #E52600 !important;
        width: 100% !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Form styling for print */
    #print-container .form-step {
        background: #f8f9fa !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        page-break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    #print-container .form-label {
        font-size: 10pt !important;
        font-weight: 600 !important;
        color: #1B2426 !important;
    }

    #print-container .form-control,
    #print-container .form-select {
        font-size: 10pt !important;
        border: 1px solid #dee2e6 !important;
        background: white !important;
    }

    #print-container .form-text {
        font-size: 8pt !important;
        color: #6c757d !important;
    }

    /* Sidebar styling */
    #print-container .calculator-sidebar-sticky {
        position: static !important;
        width: 100% !important;
        padding: 15px !important;
        border: 2px solid #E52600 !important;
        background: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Preview cards */
    #print-container #deburr-programmer-preview,
    #print-container #deburr-operator-preview {
        border: none !important;
        box-shadow: none !important;
    }

    /* Results header */
    #print-container .calculator-sidebar-sticky h3 {
        font-size: 14pt !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
        border-bottom: 2px solid #E52600 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Live metrics */
    #print-container .live-metric {
        padding: 10px 0 !important;
        border-bottom: 1px solid #dee2e6 !important;
        page-break-inside: avoid !important;
    }

    #print-container .metric-label {
        font-size: 10pt !important;
        color: #565656 !important;
    }

    #print-container .metric-value {
        font-size: 18pt !important;
        color: #E52600 !important;
        font-weight: 700 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure colors print */
    #print-container .text-primary {
        color: #E52600 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Disclaimer */
    #print-container .calculator-disclaimer {
        margin-top: 20px !important;
        padding-top: 15px !important;
        border-top: 1px solid #dee2e6 !important;
    }

    #print-container .calculator-disclaimer .collapse {
        display: block !important;
        height: auto !important;
    }

    #print-container .disclaimer-icon {
        display: none !important;
    }

    /* Print footer */
    #print-container #deburr-calculator::after {
        content: "Generated by Mastercam ROI Calculator - www.mastercam.com";
        display: block !important;
        text-align: center !important;
        font-size: 8pt !important;
        color: #6c757d !important;
        margin-top: 20px !important;
        padding-top: 15px !important;
        border-top: 1px solid #dee2e6 !important;
        width: 100% !important;
    }

    /* Hide helper text */
    #print-container .calculator-sidebar-sticky > .mt-3.text-center {
        display: none !important;
    }
}