/* Multi-Step Service Form Styles - Side by Side Layout */
#multi-step-form-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: visible;
    box-sizing: border-box;
}

/* Ensure all children use border-box */
#multi-step-form-container * {
    box-sizing: border-box;
}

/* Add bottom space to the entire page when sticky footer is active */
body.xendoo-sticky-footer-active {
    padding-bottom: var(--xendoo-footer-space, 96px);
}

/* Header */
.form-header {
    background: #f8f9fa;
    padding: 12px 20px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.header-actions { display: none; }

.header-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.header-nav .nav-item + .nav-item { position: relative; }
.header-nav .nav-item + .nav-item::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: #e0e0e0;
}

.btn-header {
    padding: 12px 18px;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    /* Non-interactive progress indicator — not a button. No pointer/hover affordance. */
    cursor: default;
    transition: all 0.2s ease;
    color: #4a5a61;
    line-height: 1;
}
.btn-header .nav-icon { margin-right: 10px; font-size: 20px; }

/* Active/current step pill */
.btn-header.active, .btn-header[aria-current="step"] {
    background: #003546;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 53, 70, 0.25);
}

.btn-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: absolute;
    right: 12px;
}

.btn-close:hover {
    background-color: #f0f0f0;
    color: #666;
}

/* Main Content Layout */
.form-content {
    display: flex;
    min-height: 600px;
    /* Prevent floats from theme CSS affecting children */
    float: none !important;
    position: relative;
}

/* Clearfix in case any theme styles introduce floats */
#multi-step-form-container .form-content::after {
    content: "";
    display: block;
    clear: both;
}

.form-left {
    background: #f8f9fa;
    padding: 40px 30px;
    border-right: 1px solid #e5e5e5;
    flex: 0 0 40%;
    min-width: 0;
    float: none !important;
    position: static !important;
}

.form-right {
    background: white;
    padding: 40px 30px 20px 30px;
    overflow: visible !important;
    flex: 0 0 60%;
    min-width: 0;
    float: none !important;
    position: static !important;
}

.step-header {
    margin-bottom: 30px;
}

.step-number {
    color: #24BFE6;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
}

.step-header h2 {
    color: #003546;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.step-header p {
    color: #707070;
    font-size: 16px;
    margin: 0;
    line-height: 1.5;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.service-option {
    position: relative;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    padding: 25px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.service-option:hover {
    border-color: #24BFE6;
    box-shadow: 0 4px 12px rgba(36, 191, 230, 0.1);
    transform: translateY(-2px);
}

.service-option.selected {
    border-color: #003546;
    background-color: #003546;
    color: white;
}

.service-option input[type="checkbox"] {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 18px;
    height: 18px;
    accent-color: #24BFE6;
}

.service-option.selected input[type="checkbox"] {
    accent-color: white;
}

.service-option label {
    cursor: pointer;
    display: block;
}

.service-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.service-option h3 {
    color: inherit;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* Questions Section */
.service-questions {
    margin-bottom: 30px;
    /* Ensure container collapses when children are hidden */
    display: block;
    min-height: 0;
    height: auto !important;
}
.service-questions.no-animate .reveal-group.active-step { animation: none !important; }

.service-questions h3 {
    color: #003546;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #24BFE6;
}

/* Ensure hidden question groups don't take up ANY space */
.question-group {
    margin-bottom: 25px;
    position: relative;
}

.question-group:not(.active-step),
.question-group[data-conditional-hidden] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.question-group.active-step {
    display: block !important;
    visibility: visible !important;
}

/* New: stable meta row below each section title */
.service-questions .section-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 8px 0 6px;
}
.service-questions .section-meta-left { display: flex; align-items: center; gap: 6px; }
.service-questions .section-meta-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* Per-section step counter */
.service-questions .step-counter {
    text-align: right;
    font-size: 18px;
    color: #003546;
    margin: 0 0 4px;
    font-weight: 700;
}

/* Step counter pulse animation on change */
.step-counter.step-animate { animation: stepPulse 0.25s ease-out; }
@keyframes stepPulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

/* Next question hint under the counter */
.next-hint {
    text-align: right;
    font-size: 14px;
    color: #707070;
    margin: 0; /* remove negative margins to prevent layout jump */
    min-height: 20px; /* reserve space so row height stays constant whether hint exists or not */
    font-style: italic;
}

/* Add more space above the question label */
.question-group > label {
    display: block;
    color: #003546;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
    margin-top: 24px;
    padding-top: 12px;
    line-height: 1.4;
}

/* Question definition/help text */
.question-definition {
    font-size: 13px;
    color: #707070;
    line-height: 1.5;
    margin: -8px 0 16px 0;
    font-style: italic;
    padding: 0;
}

/* Compact per-section answer summary */
.section-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
/* Full-width completion banner inside question area */
.section-completion-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    margin: 12px 0 16px;
    border: 2px solid #c8e6c9;
    background: #e8f5e9;
    color: #1b5e20;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    animation: bannerPop .22s ease-out;
}
.section-completion-banner .complete-icon svg { width: 36px; height: 36px; display: block; }
.section-completion-banner .complete-content { display: flex; flex-direction: column; gap: 4px; }
.section-completion-banner .complete-text { font-weight: 800; letter-spacing: .2px; font-size: 18px; }
.section-completion-banner .complete-cta { font-size: 14px; color: #707070; font-weight: 600; }
.section-completion-banner .complete-get-started { 
    background-color: #24BFE6; color: white; border: none; border-radius: 6px; padding: 12px 24px; 
    font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center;
}
.section-completion-banner .complete-get-started:hover { 
    background-color: #1a9ac7; transform: translateY(-2px); 
}

@keyframes bannerPop { from { transform: scale(.98); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@keyframes slideDown {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.answer-chip {
    border: 1px solid #cfd8dc;
    color: #003546;
    background: #f5f8fa;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.answer-chip:hover { background: #E6EDF0; border-color: #b0bec5; }

.radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 8px;
    width: 100%;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 2px solid #e5e5e5;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    font-weight: 500;
    text-align: center;
    min-height: 42px;
    font-size: 13px;
    line-height: 1.3;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.radio-group label:hover {
    border-color: #24BFE6;
    background-color: #E6EDF0;
}

/* Tooltip styles for labels with title attribute */
.radio-group label[title] {
    cursor: help;
}

.radio-group label[title]::after {
    content: "ⓘ";
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 12px;
    color: #24BFE6;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.radio-group label[title]:hover::before {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #003546;
    color: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    width: 220px;
    text-align: left;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    line-height: 1.4;
}

.radio-group label[title]:hover::after {
    opacity: 1;
}

.radio-group input[type="radio"]:checked + label {
    border-color: #003546;
    background-color: #003546;
    color: white;
    font-weight: 600;
}

.conditional-questions {
    margin-left: 15px;
    padding-left: 15px;
    border-left: 3px solid #24BFE6;
    margin-top: 20px;
}

/* Progressive reveal for question groups */
.reveal-group { display: none; opacity: 0; }
.reveal-group.revealed { 
    display: block; 
}

/* Smooth fade for active step only (no slide/push) */
.reveal-group { transition: opacity 0.15s ease-out; }
.reveal-group.active-step { opacity: 1; animation: fadeOnly 0.15s ease-out; }

/* Section header styling */
.form-right .step-header {
    background: #ffffff;
    padding-top: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
}

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

/* Checkbox Group Styles */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid #e5e5e5;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.checkbox-item:hover {
    border-color: #24BFE6;
    background-color: #E6EDF0;
}

.checkbox-item.selected {
    border-color: #003546;
    background-color: #003546;
    color: white;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    accent-color: #24BFE6;
}

.checkbox-item.selected input[type="checkbox"] {
    accent-color: white;
}

.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    color: inherit;
}

/* Inline "Next" micro-CTA for progressive flow */
/* Hide "Next" button in single-question mode */
.next-question-cta { display: none !important; }

/* Back button for single-question flow */
.back-question-cta {
    position: static;
    margin-top: 10px;
    padding: 6px 10px;
    background: transparent;
    color: #003546;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .15s ease;
}
.back-question-cta:hover { background: #E6EDF0; border-color: #b0bec5; }

/* On desktop, hide the inline back button; we use the left-gutter control */
@media (min-width: 769px) {
    .back-question-cta { display: none !important; }
}

/* Section-level back control (SVG only, no outer circle) */
.section-back-compact { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.section-back-compact .back-label { order: -1; margin-bottom: 2px; font-size: 13px; color: #003546; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.section-back-compact .back-icon { background: none; border: none; padding: 0; line-height: 1; color: #003546; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.section-back-compact .back-icon svg { width: 44px; height: 44px; display: block; }
.section-back-compact .back-icon:hover { color: #001F29; }
.section-back-compact .back-icon:disabled { opacity: .45; cursor: not-allowed; }

/* Old per-question back control (disabled) */
.question-back { display: none !important; }

/* Stationary panel-level back control on the left of Step 2 panel */
.panel-back {
    position: sticky;
    top: 200px; /* vertical position while scrolling */
    margin-left: -28px; /* nudge into the left gutter of the panel */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 4;
}
.panel-back .back-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #003546;
    background: #fff;
    color: #003546;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.panel-back .back-circle:hover { background: #003546; color: #fff; }
.panel-back .back-label { font-size: 10px; color: #003546; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.panel-back .back-circle:disabled { opacity: .5; cursor: not-allowed; }

/* Removed viewport-fixed back styles in favor of section meta back */

@media (max-width: 768px) {
    .section-back { display: none; }
    .question-back { display: none; }
    .panel-back { display: none; }
}

/* Footer - HIDDEN (kept for future use) */
.form-footer {
    display: none !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: #003546;
    color: #fff;
    z-index: 1000;
    /* Full-bleed look while centered inner content */
    box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}

.form-footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 18px clamp(16px, 4vw, 30px) calc(clamp(16px, 4vw, 30px) + env(safe-area-inset-right));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    box-sizing: border-box;
}

.footer-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.footer-cta-text {
    margin: 0;
    font-size: 14px;
    color: #fff;
    text-align: left;
    width: 100%;
    max-width: 400px;
    white-space: nowrap;
}

.form-footer p {
    margin: 0;
    font-size: 14px;
}

.discovery-link {
    color: #24BFE6;
    text-decoration: none;
    font-weight: 600;
}

.discovery-link:hover {
    text-decoration: underline;
}

.pricing-display {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.price-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.price {
    font-size: 36px;
    font-weight: 700;
    color: white;
    transition: all 0.3s ease;
}

.period {
    color: #bbb;
    font-size: 14px;
}

.pricing-estimate {
    font-size: 12px;
    color: #bbb;
    font-style: italic;
    margin-top: 5px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-get-started {
    background-color: #24BFE6;
    color: white;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(36, 191, 230, 0.3);
    white-space: nowrap;
}

.btn-get-started:hover {
    background-color: #1a9ac7;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(36, 191, 230, 0.4);
}

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

/* Loading States */
.form-loading {
    opacity: 0.6;
    pointer-events: none;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #c3e6cb;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #f5c6cb;
}

/* Responsive Design */
/* Tablet and smaller */
@media (max-width: 1024px) {
    .radio-group {
        grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    }
    
    .radio-group label {
        padding: 9px 10px;
        font-size: 12px;
    }
    
    .form-left,
    .form-right {
        padding: 30px 20px;
    }
    
    .form-left {
        flex: 0 0 35%;
    }
    
    .form-right {
        flex: 0 0 65%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .form-content {
        flex-direction: column;
    }
    
    .form-left {
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
        min-height: auto;
        padding: 25px 16px;
        flex: 1 1 auto;
    }
    
    .form-right {
        min-height: auto;
        padding: 25px 16px;
        flex: 1 1 auto;
    }
    
    .form-footer {
        position: fixed;
        bottom: 50px;
        left: 0;
        right: 0;
        width: 100vw;
        background-color: #003546;
        color: #fff;
        z-index: 1000;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    }
    
    .footer-right {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        padding-bottom: 7px;
        align-items: flex-end;
        gap: 6px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .radio-group {
        grid-template-columns: 1fr;
        gap: 6px;
        width: 100%;
    }
    
    .radio-group label {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 40px;
        width: 100%;
        word-wrap: break-word;
    }
    
    .checkbox-group {
        grid-template-columns: 1fr;
    }
    
    .question-group > label {
        font-size: 15px;
        margin-top: 0;
        padding-top: 0;
    }
    
    .step-header h2 {
        font-size: 22px;
    }
    
    .header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .btn-header {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .btn-header .nav-icon {
        font-size: 16px;
    }
    
    .form-footer-inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        align-items: center;
    }
    
    .footer-left {
        align-items: center;
        text-align: center;
        width: 100%;
    }
    
    .footer-right {
        width: 100%;
        align-items: center;
        display: none !important;
    }
    
    .footer-cta-text {
        text-align: center;
        white-space: normal;
        max-width: 100%;
        display: none !important;
    }
    
    /* Scoped to the sticky form footer. Unscoped, this also matched the completion
       banner's "Get Started Today" (class="btn btn-get-started complete-get-started"),
       which is the ONLY control that submits the finished calculator — on mobile you
       could answer every question, type your name and email, and have no way to
       continue (MEN-324). The footer copy of the button is already covered by
       .footer-right { display: none } above, so this rule only ever needed the footer. */
    .form-footer .btn-get-started {
        display: none !important;
    }
    
    .pricing-display {
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    .price-wrapper {
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    .step-header h2 {
        font-size: 24px;
    }
    
    .conditional-questions {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 2px solid #24BFE6;
        padding-top: 15px;
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    #multi-step-form-container {
        margin: 5px;
        border-radius: 8px;
    }
    
    .form-left,
    .form-right {
        padding: 20px 16px;
    }
    
    .form-header {
        padding: 10px 12px;
    }
    
    .radio-group label {
        padding: 8px 10px;
        font-size: 12px;
        min-height: 38px;
    }
    
    .question-group > label {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .step-header h2 {
        font-size: 20px;
    }
    
    .price {
        font-size: 28px;
    }
    
    .tier-badge {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    
    /* padding handled by inner on mobile */
}

/* Tier Badge Styles */
.tier-badge {
    transition: all 0.3s ease;
}

.tier-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(36, 191, 230, 0.5);
}

/* Add-ons Section Styling */
.qty-btn {
    transition: all 0.2s ease;
    cursor: pointer;
}

.qty-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 53, 70, 0.2);
}

.qty-btn:active {
    transform: scale(0.95);
}

.qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input[type="number"][readonly] {
    background: #f8f9fa;
    cursor: default;
}

/* Responsive adjustments for add-ons */
@media (max-width: 768px) {
    .qty-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
    
    input[type="number"][readonly] {
        width: 50px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
}

/* Industry Type Dropdown Styling */
#industry_type {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23003546' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

#industry_type:hover {
    border-color: #00A3E0;
}

#industry_type:focus {
    outline: none;
    border-color: #00A3E0;
    box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.1);
}

#industry_type option {
    padding: 10px;
}

/* Add-ons Section - Always Visible */
.addons-section,
#addons-section-container {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
}

/* Add-ons toggle button */
.addons-toggle-btn:hover {
    background: #E6EDF0 !important;
    border-color: #24BFE6 !important;
}

.addons-toggle-btn:active {
    transform: scale(0.98);
}

/* Ensure add-ons are never hidden by reveal-group class */
.addons-section.reveal-group,
#addons-section-container.reveal-group {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.addon-item {
    display: block !important;
    margin-bottom: 12px !important;
}

/* Lock the button container spacing and layout */
.addon-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Aggressively prevent browser extension icons from affecting layout */
[data-lastpass-icon-root],
[data-lastpass-root],
[data-dashlane-root],
[data-1password-root],
div[style*="lastpass"],
div[id*="lastpass"] {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Specifically target within add-ons section */
.addon-controls [data-lastpass-icon-root],
.addon-controls [data-lastpass-root],
.addon-item [data-lastpass-icon-root],
.addon-item [data-lastpass-root],
.addons-section [data-lastpass-icon-root],
.addons-section [data-lastpass-root] {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* Make helper text fixed width so buttons align */
.addon-controls > span:last-child {
    min-width: 100px !important;
    margin-left: 4px !important;
}

/* Ensure the form doesn't hide overflow that would clip add-ons */
#multi-step-form {
    overflow: visible !important;
}

.form-right {
    overflow: visible !important;
}


/* ZorConnect Modal Styles */
.zorconnect-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.zorconnect-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.zorconnect-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10001;
}

.zorconnect-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px;
    transition: color 0.2s ease;
}

.zorconnect-modal-close:hover {
    color: #003546;
}

.zorconnect-modal-body {
    text-align: center;
}

.zorconnect-image {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.zorconnect-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
}

.zorconnect-btn-yes,
.zorconnect-btn-no {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.zorconnect-btn-yes {
    background: #24BFE6;
    color: white;
}

.zorconnect-btn-yes:hover {
    background: #1da5c9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(36, 191, 230, 0.3);
}

.zorconnect-btn-no {
    background: #f0f0f0;
    color: #003546;
}

.zorconnect-btn-no:hover {
    background: #e0e0e0;
}

@media (max-width: 768px) {
    .zorconnect-modal-content {
        padding: 30px 20px;
        width: 95%;
    }
    
    .zorconnect-buttons {
        flex-direction: column;
    }
    
    .zorconnect-btn-yes,
    .zorconnect-btn-no {
        width: 100%;
    }
}

/* Rejection Modal Specific Styles */
.rejection-modal-content {
    max-width: 500px !important;
}

#rejection-modal .zorconnect-modal {
    z-index: 10000 !important;
}

#rejection-modal .zorconnect-modal-overlay {
    z-index: 10000 !important;
}

#rejection-modal .zorconnect-modal-content {
    z-index: 10001 !important;
}

/* Scheduler Section Styles */
.scheduler-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

.scheduler-container h3 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.scheduler-container p {
    margin-bottom: 15px !important;
}

.meetings-iframe-container {
    min-height: 600px;
    width: 100%;
    display: block !important;
    visibility: visible !important;
}

.meetings-iframe-container iframe {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 600px !important;
}

#submit-details-section {
    padding: 20px 20px 0 20px;
    display: none;
}

#submit-details-section.show,
#submit-details-section[style*="display: block"] {
    display: block !important;
}

/* Reduce form-right padding when showing scheduler */
.form-right.scheduler-active {
    padding: 10px 20px !important;
}

@media (max-width: 768px) {
    .scheduler-container {
        padding: 0;
    }
    
    #submit-details-section {
        padding: 0 10px;
    }
    
    .form-right.scheduler-active {
        padding: 10px !important;
    }
}

/* Completion email field focus state */
#completion-email:focus {
    outline: none;
    border-color: #003546 !important;
    box-shadow: 0 0 0 3px rgba(0, 53, 70, 0.1);
}

/* Completion banner email and button layout - stack on mobile */
.section-completion-banner > div:last-child {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* The banner is built by JS as a flex column, but .section-completion-banner still carries
   align-items:center from its original grid styling, so each row shrank to its content
   width and centred instead of spanning the banner. The email row collapsed to the width
   of its nowrap button and sat inset on both sides, leaving the ragged left/right edges
   flagged on MEN-324 (~29px each side at 393px, ~17px at 1440px). Stretch every row. */
.section-completion-banner > div {
    width: 100%;
}

@media (max-width: 768px) {
    .section-completion-banner > div:last-child {
        flex-direction: column;
    }

    .section-completion-banner > div:last-child > div {
        width: 100%;
    }

    #completion-email {
        min-width: 100% !important;
    }

    .complete-get-started {
        width: 100%;
    }

    /* "Get Estimate / Submit Details" progress pills. At 393px each wraps onto two lines
       inside its pill and the pair reads as broken UI rather than progress; the flow is
       linear on mobile and the per-section step counter already communicates position. */
    .form-header {
        display: none;
    }
}

/* Mobile step header improvements */
@media (max-width: 768px) {
    .step-header {
        margin-bottom: 12px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Flatten both parent divs so we can reorder their children */
    .step-header > div:first-child,
    .step-header > div:last-child {
        display: contents !important;
    }
    
    /* Order 1: h2 "Tell Us About Your Business" */
    .step-header h2 {
        order: 1;
        font-size: 22px !important;
        margin: 0 0 10px 0 !important;
    }
    
    /* Order 2: p "Answer a few questions..." */
    .step-header p {
        order: 2;
        font-size: 14px !important;
        margin: 0 0 16px 0 !important;
    }
    
    /* Order 3: Question counter "Question 1 of X" - add padding above */
    .step-header > div:first-child > div {
        order: 3;
        white-space: normal !important;
        margin-left: 0 !important;
        text-align: left !important;
        margin-bottom: 8px;
        padding-top: 16px;
        font-size: 16px;
    }
    
    /* Order 4: Next hint "Next: [hint]" */
    .step-header > div:last-child > div {
        order: 4;
        white-space: normal !important;
        margin-left: 0 !important;
        text-align: left !important;
        font-size: 13px;
    }
}