/**
 * CF7 Multi-Step Form - Custom Styling
 * Homepage Lead Capture Form
 * Tema: Contractor Pro
 * Updated: 2025-12-11 - Fixed flat structure for CF7 shortcode parsing
 */

/* Container principal - sem box-shadow para match com produção */
.wpcf7-form.multi-step-form {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: 600px;
    margin: 0 auto;
}

/* White background box - let plugin handle absolute positioning */
.multi-step-form .fieldset-cf7mls {
    background: transparent;
    padding: 0;
    width: 100%;
    max-width: none;
    overflow: visible;
}

/* Wrapper - auto height to contain form content */
.multi-step-form .fieldset-cf7mls-wrapper {
    position: relative;
    min-height: auto;
}

/* Hide empty p tags that break layout */
.multi-step-form .fieldset-cf7mls > p:empty {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
}

/* ====== UNIFIED WHITE BOX APPROACH ====== */
/* All form content elements share ONE white box */

/* Create unified white box by applying background to form rows */
.multi-step-form .form-row-new {
    background: #ffffff;
    padding: 8px 20px;
    margin-bottom: 0;
    border: none;
}

/* Step 2: Address field in bare <p> tag - give it white background */
.multi-step-form .fieldset-cf7mls p:has([data-name="address"]) {
    background: #ffffff;
    padding: 20px 20px 8px 20px;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    border: none;
}

/* Step 2: Address field wrapper - top corners rounded */
.multi-step-form .form-row-address {
    background: #ffffff !important;
    border-radius: 8px 8px 0 0;
    padding-top: 20px;
    border: none;
}

/* Step 2: Location row (city/state/zip) - unified with address */
.multi-step-form .form-row-location {
    background: #ffffff;
    padding: 8px 20px 20px 20px;
    margin-top: 0 !important;
    margin-bottom: 0;
    border-radius: 0 0 8px 8px;
    display: flex;
    gap: 10px;
    box-shadow: none;
    border: none;
}

/* First row: top corners rounded + extra top padding */
.multi-step-form .fieldset-cf7mls > .form-row-new:first-of-type {
    border-radius: 8px 8px 0 0;
    padding-top: 20px;
    border: none;
    margin-bottom: -1px; /* Fix sub-pixel gap showing hero background */
}

/* Last row: bottom corners rounded + extra bottom padding */
.multi-step-form .fieldset-cf7mls > .form-row-new + .form-row-new {
    border-radius: 0 0 8px 8px;
    padding-bottom: 20px;
    margin-top: 0;
    border: none;
}

/* Button wrapper - CLEARLY OUTSIDE with visible gap */
.multi-step-form .cf7mls-btns {
    background: transparent !important;
    margin-top: 25px !important;
    padding: 0;
}

/* ====== STEP 3 & 4: UNIFIED WHITE BOX (question + options together) ====== */

/* Step question headings - TOP of unified box */
.multi-step-form .step-question {
    background: #ffffff;
    padding: 25px 25px 10px 25px;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: #021A8E;
    margin-top: 0;
}

/* Step 3: Services checkboxes - UNIFIED with question above */
.multi-step-form .wpcf7-checkbox.services,
.multi-step-form .services {
    background: #ffffff;
    padding: 10px 25px 25px 25px;
    margin-top: 0 !important;
    margin-bottom: 0;
    border-radius: 0 0 8px 8px;
    border: none;
    box-shadow: none;
}

/* Step 4: Radio buttons container - UNIFIED with question above */
.multi-step-form .radio-buttons {
    background: #ffffff;
    padding: 10px 25px 25px 25px;
    margin-top: 0 !important;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
}

/* Conditional group (homeowner details) - stays unified */
.multi-step-form .conditional-group {
    background: #ffffff;
    padding: 15px 25px;
    margin-top: 0 !important;
    margin-bottom: 0;
    border: none;
}

/* Consent box (TCPA) - Light gray background, BOTTOM of unified box */
.multi-step-form .consent-box {
    background: #f8f9fa !important;
    border-radius: 0 0 8px 8px;
    box-shadow: none;
    padding: 20px 25px;
    margin-top: 0 !important;
    border: none;
    border-top: 1px solid #e0e0e0;
}

/* If no consent box, last white element gets rounded bottom */
.multi-step-form .services:last-child,
.multi-step-form .radio-buttons:last-child {
    border-radius: 0 0 8px 8px;
    border: none;
}

/* ====== PROGRESS BAR ====== */
.cf7mls-progress-bar-wrapper {
    margin-bottom: 30px;
}

.cf7mls-progress-bar {
    background-color: #e0e0e0;
    height: 8px;
    border-radius: 10px;
    overflow: hidden;
}

.cf7mls-progress-bar .cf7mls-progress {
    background: linear-gradient(90deg, #ffc107 0%, #ffb300 100%);
    height: 100%;
    transition: width 0.3s ease;
}

.cf7mls-step-info {
    color: #021A8E;
    font-weight: 600;
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
}

/* Step content animation */
.cf7mls-step {
    animation: fadeIn 0.3s ease;
}

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

/* ====== FORM FIELDS ====== */
.multi-step-form .form-row-new {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
}

.multi-step-form .form-row-new p {
    display: flex;
    gap: 12px;
    margin: 0;
    width: 100%;
}

/* Make CF7 span wrappers expand to fill available space */
.multi-step-form .form-row-new span.wpcf7-form-control-wrap {
    flex: 1 1 0;
    min-width: 0;
}

/* Hide <br> tags globally */
.multi-step-form br {
    display: none !important;
}

.multi-step-form .form-row-new input,
.multi-step-form .form-row-new select,
.multi-step-form input[type="text"],
.multi-step-form input[type="email"],
.multi-step-form input[type="tel"],
.multi-step-form select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid #090E34;
    border-radius: 0;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s ease;
    height: 43px;
    background: #ffffff;
}

.multi-step-form input:focus,
.multi-step-form select:focus {
    outline: none;
    border-color: #ffc107;
    box-shadow: none;
}

.multi-step-form input::placeholder {
    color: #333333;
    opacity: 1;
}

/* Location row (Address, City, State, Zip) */
.form-row-location {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.form-row-location select,
.form-row-location input {
    width: 100%;
}

/* Force horizontal layout for all fieldset paragraphs */
.multi-step-form .fieldset-cf7mls > p {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    margin-bottom: -1px;
}

.multi-step-form .fieldset-cf7mls > p > span {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.multi-step-form .fieldset-cf7mls select,
.multi-step-form .fieldset-cf7mls input[type="text"],
.multi-step-form .fieldset-cf7mls input[type="email"],
.multi-step-form .fieldset-cf7mls input[type="tel"] {
    width: 100%;
}

/* ====== STEP 3: SERVICES GRID ====== */
.wpcf7-form-control.services,
.wpcf7-checkbox.services {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0;
    padding: 10px 25px 25px 25px;
}

.services .wpcf7-list-item {
    margin: 0 !important;
    display: block;
}

/* Services checkbox labels - BUTTON STYLE */
.services .wpcf7-list-item-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid #021A8E;
    border-radius: 8px;
    padding: 18px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 14px;
    min-height: 70px;
    text-align: center;
    color: #021A8E !important;
}

.services .wpcf7-list-item-label:hover {
    border-color: #021A8E;
    background: rgba(2, 26, 142, 0.05);
    transform: translateY(-2px);
}

/* FIXED: Checkbox checked state - highlight ENTIRE LABEL using :has() */
.services .wpcf7-list-item:has(input[type="checkbox"]:checked) label,
.services .wpcf7-list-item-label:has(input[type="checkbox"]:checked) {
    background: #021A8E !important;
    color: #ffffff !important;
    border-color: #021A8E !important;
    box-shadow: 0 4px 12px rgba(2, 26, 142, 0.3);
}

/* Fallback for browsers without :has() - target span */
.services .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label {
    background: #021A8E !important;
    color: #ffffff !important;
}

/* ====== STEP 4: YES/NO RADIO BUTTONS - HIGH CONTRAST ====== */
.radio-buttons {
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 10px 25px 25px 25px;
}

.radio-buttons .wpcf7-list-item {
    flex: 1;
    margin: 0 !important;
}

/* Radio button labels - HIGH CONTRAST button style */
.radio-buttons .wpcf7-list-item-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 3px solid #021A8E;
    border-radius: 50px;
    padding: 16px 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 700;
    font-size: 16px;
    color: #021A8E !important;
    min-height: 56px;
}

.radio-buttons .wpcf7-list-item-label:hover {
    border-color: #021A8E;
    background: rgba(2, 26, 142, 0.05);
    transform: translateY(-2px);
}

/* FIXED: Radio checked state - NAVY BLUE background (no yellow!) */
.radio-buttons .wpcf7-list-item:has(input[type="radio"]:checked) label,
.radio-buttons .wpcf7-list-item-label:has(input[type="radio"]:checked) {
    background: #021A8E !important;
    color: #ffffff !important;
    border-color: #021A8E !important;
    box-shadow: 0 4px 12px rgba(2, 26, 142, 0.3);
}

/* Fallback for browsers without :has() */
.radio-buttons .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label {
    background: #021A8E !important;
    color: #ffffff !important;
}

/* ====== CONSENT BOX (TCPA) ====== */
.consent-box {
    background: #f8f9fa;
    padding: 20px 25px;
    border-radius: 0 0 8px 8px;
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0;
}

.consent-box .wpcf7-list-item {
    margin: 0 !important;
}

.consent-box .wpcf7-list-item-label {
    font-size: 13px !important;
    line-height: 1.6;
    color: #333333 !important;
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 400;
}

.consent-box input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* ====== NAVIGATION BUTTONS ====== */
.cf7mls-btn-wrapper,
.cf7mls-btns {
    display: flex;
    gap: 18px;
    margin: 20px 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
}

/* Continue/Next button */
.cf7mls-btn,
button.cf7mls-btn,
.cf7mls_next,
button.cf7mls_next {
    width: auto;
    min-width: 160px !important;
    background: #ffc107 !important;
    color: #021A8E !important;
    border: none !important;
    height: 52px;
    padding: 0 40px !important;
    border-radius: 6px !important;
    font-weight: 600;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.cf7mls_next.action-button:hover, .cf7mls_back.action-button:hover, .fieldset-cf7mls .wpcf7-form-control.wpcf7-cf7mls_preview_step:hover{
    opacity: 1 !important;
}

.cf7mls-btn:hover,
button.cf7mls-btn:hover {
    background: #ffb300 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    opacity: 1 !important;
}

/* Back button - improved contrast */
.cf7mls-btn.cf7mls-btn-prev,
button.cf7mls-btn.cf7mls-btn-prev,
.cf7mls_back,
button.cf7mls_back {
    background: #f5f5f5 !important;
    color: #333333 !important;
    border: 2px solid #cccccc !important;
    border-radius: 6px !important;
    height: 52px;
    min-width: 160px !important;
    font-weight: 500;
}

.cf7mls-btn.cf7mls-btn-prev:hover,
button.cf7mls-btn.cf7mls-btn-prev:hover,
.cf7mls_back:hover,
button.cf7mls_back:hover {
    background: #e0e0e0 !important;
    color: #333333 !important;
    border-color: #999999 !important;
    opacity: 1 !important;
}

/* ====== SUBMIT BUTTON - ONLY VISIBLE ON STEP 5 (CONSENT) ====== */
/* DEFAULT: Hide submit button on ALL steps */
.wpcf7-submit,
input[type="submit"].wpcf7-submit,
button[type="submit"].wpcf7-submit,
.cf7mls-btns .wpcf7-submit,
.multi-step-form .cf7mls-btns input[type="submit"] {
    display: none !important;
    visibility: hidden !important;
}

/* ONLY show submit on Step 5 - when consent fieldset is ACTIVE (current step) */
/* Uses form-level :has() to detect active consent step */
.multi-step-form:has(.fieldset-cf7mls.cf7mls_current_fs .consent-text) .wpcf7-submit,
.multi-step-form:has(.fieldset-cf7mls.cf7mls_current_fs .consent-text) input[type="submit"].wpcf7-submit {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffc107 !important;
    color: #021A8E !important;
    border: none !important;
    height: 52px;
    padding: 0 40px !important;
    border-radius: 6px !important;
    font-weight: 600;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px !important;
}

.multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-submit:hover {
    background: #ffb300 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

/* Step 5 button container - flexbox layout for perfect alignment */
/* Hide the <br> tag that forces vertical stacking */
.fieldset-cf7mls.cf7mls_current_fs:has(.consent-text) p:has(.wpcf7-submit) br {
    display: none !important;
}

/* Center the button row using flexbox on fieldset */
.fieldset-cf7mls.cf7mls_current_fs:has(.consent-text) {
    text-align: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

/* Keep non-button elements (consent text, radio) in normal flow - BEFORE buttons */
.fieldset-cf7mls.cf7mls_current_fs:has(.consent-text) > .consent-text,
.fieldset-cf7mls.cf7mls_current_fs:has(.consent-text) > p:has(.wpcf7-radio) {
    order: 0 !important;
    flex: 0 0 100% !important;
    display: block !important;
}

/* Button containers inline with NO WRAP - forces side-by-side */
.fieldset-cf7mls.cf7mls_current_fs:has(.consent-text) > p:last-of-type,
.fieldset-cf7mls.cf7mls_current_fs:has(.consent-text) > .cf7mls-btns {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    height: 52px !important;
    flex: 0 0 auto !important;
}

/* Back button container - appears FIRST (left side) */
.cf7mls-btns.cf7mls-btns-last-step {
    order: 1 !important;
    margin-right: 18px !important;
}

/* Submit button paragraph - appears SECOND (right side) */
.fieldset-cf7mls.cf7mls_current_fs:has(.consent-text) > p:last-of-type {
    order: 2 !important;
    margin-left: 0 !important;
    height: auto !important;
}

/* Style for the cloned submit button that JS adds to Step 4 */
.multi-step-form .submit-moved {
    display: inline-block !important;
    visibility: visible !important;
    background: #ffc107 !important;
    color: #021A8E !important;
    border: none !important;
    height: 56px;
    padding: 0 50px !important;
    border-radius: 6px !important;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    margin-left: 10px;
}

.multi-step-form .submit-moved:hover {
    background: #ffb300 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

/* ====== SUBMIT BUTTON VISIBILITY ====== */
/* CF7 Multi-Step plugin handles showing Submit only on last step automatically.
   We just style it - no need to hide/show with CSS! */

/* ====== CONDITIONAL GROUP ====== */
.conditional-group,
.homeowner-details {
    margin: 0;
    padding: 15px 25px;
    animation: slideDown 0.3s ease;
    background: #ffffff;
}

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

/* ====== HIDE NATIVE INPUTS (but keep clickable) ====== */
.multi-step-form .wpcf7-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Radio inputs - FULL SIZE for clickability */
.multi-step-form .wpcf7-radio .wpcf7-list-item {
    position: relative;
}

.multi-step-form .wpcf7-radio input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    margin: 0;
}

/* ====== VALIDATION ERRORS ====== */
.wpcf7-not-valid-tip {
    color: #d32f2f;
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

.wpcf7-form-control.wpcf7-not-valid {
    border-color: #d32f2f !important;
}

/* HIDE response output until form is actually submitted (prevents showing errors on page load) */
.wpcf7-response-output {
    display: none;
    border: 2px solid #4caf50;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
}

/* Only show response output when CF7 adds a status class after submission */
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-response-output.wpcf7-mail-sent-ok,
.wpcf7-response-output.wpcf7-spam-blocked,
.wpcf7-response-output.wpcf7-acceptance-missing {
    display: block;
}

.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-response-output.wpcf7-acceptance-missing {
    border-color: #d32f2f;
    background: #ffebee;
    color: #c62828;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
    border-color: #4caf50;
    background: #e8f5e9;
    color: #2e7d32;
}

/* Loading state */
.wpcf7-form.submitting .wpcf7-submit {
    opacity: 0.7;
    cursor: wait;
}

.wpcf7-spinner {
    margin-left: 10px;
}


/* ====== STEP 5: CONSENT WITH YES/NO (FLAT STRUCTURE) ====== */
/* Uses fieldset styling since CF7 doesn't parse shortcodes in nested divs */
/* IMPORTANT: Buttons should be OUTSIDE the white box (like other steps) */
.multi-step-form .fieldset-cf7mls:has(.consent-text) {
    display: block;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.consent-text {
    font-size: 14px;
    color: #333333;
    text-align: center;
    padding: 25px 25px 15px 25px;
    margin: 0;
    line-height: 1.6;
    background: #ffffff;
    border-radius: 8px 8px 0 0;
}

/* Consent Yes/No radio buttons */
.multi-step-form .fieldset-cf7mls:has(.consent-text) > p:has(.wpcf7-radio) {
    display: flex !important;
    justify-content: center;
    padding: 25px;
    background: #ffffff;
    margin: 0;
    border-radius: 0 0 8px 8px;
}

.multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-radio {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-list-item {
    flex: 0 0 auto;
    min-width: 120px;
}

/* Consent radio labels */
.multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-list-item-label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 3px solid #021A8E;
    border-radius: 50px;
    padding: 12px 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 700;
    font-size: 15px;
    color: #021A8E !important;
    min-height: 48px;
}

/* Consent radio checked state */
.multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-list-item:has(input[type="radio"]:checked) .wpcf7-list-item-label {
    background: #021A8E !important;
    color: #ffffff !important;
    border-color: #021A8E !important;
    box-shadow: 0 4px 12px rgba(2, 26, 142, 0.3);
}

/* ===========================================
   RESPONSIVE - COMPREHENSIVE MOBILE FIXES
   =========================================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .wpcf7-form.multi-step-form {
        max-width: 100%;
        padding: 0 15px;
    }

    /* Form rows stack vertically */
    .multi-step-form .form-row-new {
        flex-direction: column;
        max-width: 100%;
    }

    .multi-step-form .form-row-new input,
    .multi-step-form .form-row-new select {
        width: 100% !important;
    }

    /* Location row stacks */
    .form-row-location,
    .multi-step-form .form-row-location {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    /* Services grid - 2 columns on tablet */
    .wpcf7-checkbox.services,
    .services {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
        padding: 10px 20px 20px 20px;
    }

    .services .wpcf7-list-item-label {
        min-height: 65px;
        padding: 14px 10px;
        font-size: 13px;
    }

    /* Radio buttons - full width on tablet */
    .radio-buttons {
        flex-direction: column;
        padding: 10px 20px 20px 20px;
    }

    .radio-buttons .wpcf7-list-item-label {
        min-height: 52px;
        font-size: 15px;
    }

    /* Step question - smaller padding */
    .multi-step-form .step-question {
        padding: 20px 20px 10px 20px;
        font-size: 16px;
        justify-content: center;
    }

    /* Consent box */
    .consent-box,
    .multi-step-form .consent-box {
        padding: 15px 20px;
    }

    .consent-box .wpcf7-list-item-label {
        font-size: 12px !important;
    }

    /* Step 4 two-column - stack on tablet */
    .multi-step-form .fieldset-cf7mls:has(.step4-left) {
        grid-template-columns: 1fr !important;
    }

    .multi-step-form .step4-left {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .multi-step-form .step4-left .step-question,
    .multi-step-form .step4-right .step-question {
        padding: 20px 20px 10px 20px;
    }

    .multi-step-form .step4-left .wpcf7-radio,
    .multi-step-form .step4-right .wpcf7-radio {
        padding: 10px 20px 20px 20px;
    }

    /* Step 5 consent - tablet */
    .consent-text {
        font-size: 13px;
        padding: 20px 20px 12px 20px;
    }

    .multi-step-form .fieldset-cf7mls:has(.consent-text) > p:has(.wpcf7-radio) {
        padding: 20px;
    }

    /* Buttons */
    .cf7mls-btns {
        flex-direction: column;
        align-items: center;
    }

    .cf7mls-btn,
    button.cf7mls-btn,
    .cf7mls-btn.cf7mls-btn-prev {
        width: 100% !important;
        max-width: 280px;
        min-width: unset !important;
    }

    /* Submit button */
    .wpcf7-submit {
        width: 100% !important;
        max-width: 280px;
    }

    /* Conditional group */
    .conditional-group {
        padding: 15px 20px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .wpcf7-form.multi-step-form {
        padding: 0 10px;
    }

    /* Services grid - 1 column on mobile */
    .wpcf7-checkbox.services,
    .services {
        grid-template-columns: 1fr !important;
        gap: 8px;
        padding: 8px 15px 15px 15px;
    }

    .services .wpcf7-list-item-label {
        min-height: 55px;
        padding: 12px 10px;
        font-size: 14px;
    }

    /* Step question */
    .multi-step-form .step-question {
        padding: 15px 15px 8px 15px;
        font-size: 15px;
    }

    /* Radio buttons */
    .radio-buttons {
        padding: 8px 15px 15px 15px;
        gap: 10px;
    }

    .radio-buttons .wpcf7-list-item-label {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 14px;
        border-width: 2px;
    }

    /* Consent box */
    .consent-box,
    .multi-step-form .consent-box {
        padding: 12px 15px;
        border-radius: 0 0 4px 4px;
    }

    .consent-box .wpcf7-list-item-label {
        font-size: 11px !important;
        line-height: 1.5;
    }

    /* Step 4 - mobile */
    .multi-step-form .step4-left .step-question,
    .multi-step-form .step4-right .step-question {
        padding: 15px 15px 8px 15px;
        font-size: 15px;
    }

    .multi-step-form .step4-left .wpcf7-radio,
    .multi-step-form .step4-right .wpcf7-radio {
        padding: 8px 15px 15px 15px;
    }

    /* Step 5 consent - mobile */
    .consent-text {
        font-size: 12px;
        padding: 15px;
        line-height: 1.5;
    }

    .multi-step-form .fieldset-cf7mls:has(.consent-text) > p:has(.wpcf7-radio) {
        padding: 15px;
    }

    .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-radio {
        gap: 15px;
    }

    .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-list-item {
        min-width: 100px;
    }

    /* Buttons */
    .cf7mls-btn,
    button.cf7mls-btn {
        height: 48px;
        font-size: 14px;
        padding: 0 30px !important;
    }

    .wpcf7-submit {
        height: 52px;
        font-size: 15px;
    }

    /* Progress bar */
    .cf7mls-progress-bar-wrapper {
        margin-bottom: 20px;
    }

    .cf7mls-step-info {
        font-size: 13px;
    }

    /* Conditional group */
    .conditional-group {
        padding: 12px 15px;
    }

    /* Input fields */
    .multi-step-form input[type="text"],
    .multi-step-form input[type="email"],
    .multi-step-form input[type="tel"],
    .multi-step-form select {
        height: 40px;
        font-size: 14px;
        padding: 10px 14px;
    }

    /* Form wrapper - auto height */
    .multi-step-form .fieldset-cf7mls-wrapper {
        min-height: auto;
    }

    /* ====== STEP 2 MOBILE FIX: Unified field widths ====== */
    /* CRITICAL: Both rows must have IDENTICAL padding */
    .multi-step-form .form-row-address,
    .multi-step-form .form-row-location {
        padding: 10px 15px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .multi-step-form .form-row-address {
        padding-top: 20px !important;
        border-radius: 8px 8px 0 0 !important;
    }

    .multi-step-form .form-row-location {
        padding-bottom: 20px !important;
        border-radius: 0 0 8px 8px !important;
        display: block !important;
    }

    /* P tags inside both rows - BLOCK display, no flex */
    .multi-step-form .form-row-address > p,
    .multi-step-form .form-row-location > p {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }

    .multi-step-form .form-row-location > p:last-child {
        margin-bottom: 0 !important;
    }

    /* SPAN wrappers - MUST be block and 100% width */
    .multi-step-form .form-row-address span.wpcf7-form-control-wrap,
    .multi-step-form .form-row-location span.wpcf7-form-control-wrap {
        display: block !important;
        width: 100% !important;
        flex: none !important;
    }

    /* ALL inputs and selects - IDENTICAL width */
    .multi-step-form .form-row-address input[type="text"],
    .multi-step-form .form-row-location input[type="text"],
    .multi-step-form .form-row-location select {
        width: 100% !important;
        max-width: 100% !important;
        height: 48px !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* ====== STEP 4 MOBILE FIX: White background + radio styling ====== */
    /* Ensure white background on Step 4 fieldset */
    .multi-step-form .fieldset-cf7mls:has(.step4-left),
    .multi-step-form .fieldset-cf7mls:has([name="own-home"]),
    .multi-step-form .fieldset-cf7mls:has([name="project-type"]) {
        background: #ffffff !important;
        border-radius: 8px !important;
    }

    /* Step 4 questions */
    .multi-step-form .step4-left,
    .multi-step-form .step4-right {
        background: #ffffff !important;
    }

    /* Radio buttons must be styled as buttons, not plain text */
    .multi-step-form .wpcf7-radio {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px 15px 15px 15px;
    }

    .multi-step-form .wpcf7-radio .wpcf7-list-item {
        margin: 0 !important;
    }

    .multi-step-form .wpcf7-radio .wpcf7-list-item-label {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #ffffff !important;
        border: 3px solid #021A8E !important;
        border-radius: 50px !important;
        padding: 12px 20px !important;
        min-height: 48px;
        font-weight: 700 !important;
        font-size: 14px !important;
        color: #021A8E !important;
        cursor: pointer;
    }

    /* Radio checked state on mobile */
    .multi-step-form .wpcf7-radio .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label {
        background: #021A8E !important;
        color: #ffffff !important;
    }

    /* ====== STEP 5 MOBILE FIX: Consent layout ====== */
    /* Fieldset transparent - buttons OUTSIDE white box */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) {
        background: transparent !important;
        border-radius: 0 !important;
    }

    .consent-text {
        font-size: 12px !important;
        padding: 15px !important;
        background: #ffffff !important;
        border-radius: 8px 8px 0 0 !important;
    }

    /* Consent Yes/No centered - white background with rounded bottom */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) > p:has(.wpcf7-radio) {
        background: #ffffff !important;
        border-radius: 0 0 8px 8px !important;
        padding: 15px !important;
        margin: 0 !important;
    }

    .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-radio {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 15px !important;
        background: transparent !important;
    }

    .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-list-item {
        min-width: 100px;
        flex: 0 0 auto;
    }
}

/* Extra small screens (360px and below) */
@media (max-width: 360px) {
    .services .wpcf7-list-item-label {
        font-size: 13px;
        padding: 10px 8px;
    }

    .radio-buttons .wpcf7-list-item-label {
        font-size: 13px;
        padding: 10px 15px;
    }

    .consent-box .wpcf7-list-item-label {
        font-size: 10px !important;
    }

    .multi-step-form .step-question {
        font-size: 14px;
    }
}

/* Step 2 - Horizontal layout for City/State/Zip (desktop only) */
@media (min-width: 769px) {
    .multi-step-form .form-row-location {
        display: flex !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .multi-step-form .form-row-location > p {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .multi-step-form .form-row-location > p > span {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}

/* Hide br tags in form-row-location */
.multi-step-form .form-row-location br {
    display: none !important;
}

/* ============================================================
   CRITICAL MOBILE FIXES - Added 2025-12-12
   Higher specificity to ensure styles are applied
   ============================================================ */

/* STEP 2: Reduce spacing between Address and City fields */
@media (max-width: 480px) {
    /* Reduce vertical spacing between fields */
    .multi-step-form .form-row-address {
        padding: 15px 15px 4px 15px !important;
    }

    .multi-step-form .form-row-location {
        padding: 4px 15px 15px 15px !important;
    }

    /* All P tags - consistent 8px gap */
    .multi-step-form .form-row-address > p,
    .multi-step-form .form-row-location > p {
        margin: 0 0 8px 0 !important;
    }

    .multi-step-form .form-row-address > p:last-child,
    .multi-step-form .form-row-location > p:last-child {
        margin-bottom: 0 !important;
    }
}

/* STEP 4: Radio buttons MUST be styled as pill buttons */
/* Using extremely high specificity to override any other styles */
@media (max-width: 768px) {
    /* Container styling */
    body .wpcf7-form .wpcf7-radio,
    body .multi-step-form .wpcf7-radio,
    body span.wpcf7-form-control.wpcf7-radio {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px 15px 15px 15px !important;
        background: transparent !important;
    }

    /* List item wrapper */
    body .wpcf7-form .wpcf7-radio .wpcf7-list-item,
    body .multi-step-form .wpcf7-radio .wpcf7-list-item {
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
    }

    /* THE ACTUAL LABEL SPAN - styled as pill button */
    body .wpcf7-form .wpcf7-radio span.wpcf7-list-item-label,
    body .multi-step-form .wpcf7-radio span.wpcf7-list-item-label,
    body .fieldset-cf7mls .wpcf7-radio span.wpcf7-list-item-label,
    .wpcf7 .wpcf7-radio span.wpcf7-list-item-label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #ffffff !important;
        border: 3px solid #021A8E !important;
        border-radius: 50px !important;
        padding: 12px 20px !important;
        min-height: 48px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        color: #021A8E !important;
        cursor: pointer !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Checked state - using adjacent sibling selector (most compatible) */
    body .wpcf7-form .wpcf7-radio input[type="radio"]:checked + span.wpcf7-list-item-label,
    body .multi-step-form .wpcf7-radio input[type="radio"]:checked + span.wpcf7-list-item-label,
    .wpcf7 .wpcf7-radio input[type="radio"]:checked + span.wpcf7-list-item-label {
        background-color: #021A8E !important;
        color: #ffffff !important;
        border-color: #021A8E !important;
    }

    /* Also support :has() for browsers that support it */
    body .wpcf7-radio .wpcf7-list-item:has(input:checked) span.wpcf7-list-item-label {
        background-color: #021A8E !important;
        color: #ffffff !important;
    }

    /* HIDE native radio inputs completely */
    body .wpcf7-form .wpcf7-radio input[type="radio"],
    body .multi-step-form .wpcf7-radio input[type="radio"],
    .wpcf7 .wpcf7-radio input[type="radio"] {
        position: absolute !important;
        opacity: 0 !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        pointer-events: none !important;
    }

    /* Step 5 Consent - horizontal layout override */
    body .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-radio {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    body .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-list-item {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    body .multi-step-form .fieldset-cf7mls:has(.consent-text) span.wpcf7-list-item-label {
        width: auto !important;
        min-width: 100px !important;
    }
}

/* Desktop protection - ensure radio styling stays correct on desktop */
@media (min-width: 769px) {
    .radio-buttons .wpcf7-list-item-label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 3px solid #021A8E !important;
        border-radius: 50px !important;
        padding: 16px 30px !important;
        min-height: 56px !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        color: #021A8E !important;
        cursor: pointer !important;
    }

    .radio-buttons input[type="radio"]:checked + .wpcf7-list-item-label,
    .radio-buttons .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label {
        background: #021A8E !important;
        color: #ffffff !important;
    }

    /* Hide native radio on desktop too */
    .radio-buttons input[type="radio"] {
        position: absolute !important;
        opacity: 0 !important;
        width: 1px !important;
        height: 1px !important;
    }
}

/* ============================================================
   STEP 4 FIXES - Clickable radios + Full white background
   Added 2025-12-12
   ============================================================ */

@media (max-width: 768px) {
    /* Step 4 - White background for ENTIRE fieldset */
    body .multi-step-form .fieldset-cf7mls:has(.step-question),
    body .multi-step-form .fieldset-cf7mls:has(.radio-question),
    body .fieldset-cf7mls:has(.wpcf7-radio) {
        background: #ffffff !important;
        border-radius: 8px !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Make list-item position relative for absolute input positioning */
    body .wpcf7-form .wpcf7-radio .wpcf7-list-item,
    body .multi-step-form .wpcf7-radio .wpcf7-list-item {
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    /* Radio inputs - MUST be full size and CLICKABLE */
    /* Override the previous 1px hidden style */
    body .wpcf7-form .wpcf7-radio input[type="radio"],
    body .multi-step-form .wpcf7-radio input[type="radio"],
    .wpcf7 .wpcf7-radio input[type="radio"] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
        z-index: 10 !important;
        margin: 0 !important;
        padding: 0 !important;
        /* REMOVE these blocking properties */
        clip: unset !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }
}

/* ============================================================
   STEP 2 FIX - Equal widths and consistent spacing
   Added 2025-12-12
   ============================================================ */

@media (max-width: 768px) {
    /* Step 2 container - white background and proper padding */
    body .multi-step-form .fieldset-cf7mls:has(.form-row-address),
    body .fieldset-cf7mls:has(.form-row-location) {
        background: #ffffff !important;
        border-radius: 8px !important;
        padding: 20px 15px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Address row - full width with bottom margin */
    body .multi-step-form .form-row-address,
    .form-row-address {
        padding: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Address input - FULL WIDTH */
    body .multi-step-form .form-row-address input[type="text"],
    .form-row-address input[type="text"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Location row - stack vertically with gaps */
    body .multi-step-form .form-row-location,
    .form-row-location {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    /* Remove any flex row behavior */
    body .multi-step-form .form-row-location > p,
    .form-row-location > p {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* All field wrappers in location row - full width */
    body .multi-step-form .form-row-location span.wpcf7-form-control-wrap,
    .form-row-location span.wpcf7-form-control-wrap {
        display: block !important;
        width: 100% !important;
    }

    /* All inputs and selects - FULL WIDTH and same height */
    body .multi-step-form .form-row-address input,
    body .multi-step-form .form-row-location input,
    body .multi-step-form .form-row-location select,
    .form-row-address input,
    .form-row-location input,
    .form-row-location select {
        width: 100% !important;
        height: 48px !important;
        padding: 12px 15px !important;
        font-size: 16px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Hide any br tags causing issues */
    body .multi-step-form .form-row-location br,
    .form-row-location br {
        display: none !important;
    }
}

/* ============================================================
   STEP 2 MOBILE - FINAL FIX (Matches Step 1 exactly)
   December 12, 2025

   Step 1 uses .form-row-new with:
   - First row: padding 20px 20px 8px 20px, border-radius 8px 8px 0 0
   - Second row: padding 8px 20px 20px 20px, border-radius 0 0 8px 8px
   - Gap: 12px between fields
   - P tags: margin 0, padding 0
   ============================================================ */

@media (max-width: 768px) {
    /* ===== FIELDSET CONTAINER - Remove conflicting styles ===== */
    html body .wpcf7-form.multi-step-form .fieldset-cf7mls:has(.form-row-address) {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* ===== ADDRESS ROW (Top) - Same as Step 1 first row ===== */
    html body .multi-step-form .form-row-address {
        background: #ffffff !important;
        padding: 20px 20px 0 20px !important;
        margin: 0 !important;
        border-radius: 8px 8px 0 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ===== LOCATION ROW (Bottom) - Same as Step 1 second row ===== */
    html body .multi-step-form .form-row-location {
        background: #ffffff !important;
        padding: 0 20px 20px 20px !important;
        margin: 0 !important;
        border-radius: 0 0 8px 8px !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ===== ALL P TAGS - Reset to zero (like Step 1) ===== */
    html body .multi-step-form .form-row-address > p,
    html body .multi-step-form .form-row-location > p,
    html body .multi-step-form .fieldset-cf7mls p:has([data-name="address"]) {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    /* ===== SPAN WRAPPERS - 100% width + 12px spacing ===== */
    html body .multi-step-form .form-row-address span.wpcf7-form-control-wrap,
    html body .multi-step-form .form-row-location span.wpcf7-form-control-wrap {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Remove margin from LAST field in each row */
    html body .multi-step-form .form-row-address span.wpcf7-form-control-wrap:last-child,
    html body .multi-step-form .form-row-location span.wpcf7-form-control-wrap:last-child {
        margin-bottom: 0 !important;
    }

    /* ===== ALL INPUTS AND SELECTS - 100% width, same height ===== */
    html body .multi-step-form .form-row-address input,
    html body .multi-step-form .form-row-location input,
    html body .multi-step-form .form-row-location select {
        width: 100% !important;
        height: 48px !important;
        padding: 12px 16px !important;
        border: 1px solid #090E34 !important;
        border-radius: 0 !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* ===== BUTTONS - Centered, stacked ===== */
    html body .multi-step-form .cf7mls-btns {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 15px !important;
        padding: 0 !important;
    }

    html body .multi-step-form .cf7mls-btns .cf7mls_back,
    html body .multi-step-form .cf7mls-btns .cf7mls_next {
        width: 200px !important;
        max-width: 100% !important;
    }

    /* ============================================================
       STEP 2 MOBILE - LOCATION FIELDS (December 12, 2025)
       Uses .form-row-step2 class - ONLY for Step 2
       ============================================================ */
    
    /* Step 2 container - unified white background */
    html body .multi-step-form .step2-fields-container {
        background: #ffffff !important;
        border-radius: 8px !important;
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Each field row in Step 2 */
    html body .multi-step-form .form-row-step2 {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* P tags inside step2 rows - reset */
    html body .multi-step-form .form-row-step2 > p {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* All inputs and selects in Step 2 - 100% width */
    html body .multi-step-form .form-row-step2 input[type="text"],
    html body .multi-step-form .form-row-step2 select {
        width: 100% !important;
        height: 48px !important;
        padding: 12px 16px !important;
        border: 1px solid #090E34 !important;
        border-radius: 0 !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-color: #ffffff !important;
    }
    
    /* Select dropdown arrow */
    html body .multi-step-form .form-row-step2 select {
        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='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        padding-right: 40px !important;
        background-color: #ffffff !important;
    }
}

/* ============================================================
   DESKTOP FIXES - Step 2, Step 4, Radio Styling
   Added 2025-12-12
   ============================================================ */

@media (min-width: 769px) {
    /* ====== STEP 2: City/State/Zip Horizontal Row ====== */
    /* Target Step 2 fieldset by position (2nd fieldset) */
    
    /* Address row - full width at top */
    .multi-step-form .fieldset-cf7mls:nth-of-type(2) > .form-row-new:nth-of-type(1) {
        display: block;
        background: #ffffff;
        padding: 20px 20px 8px 20px;
        border-radius: 8px 8px 0 0;
        margin-bottom: 0;
    }
    
    /* City/State/Zip container row */
    .multi-step-form .fieldset-cf7mls:nth-of-type(2) > .form-row-new:nth-of-type(2),
    .multi-step-form .fieldset-cf7mls:nth-of-type(2) > .form-row-new:nth-of-type(3),
    .multi-step-form .fieldset-cf7mls:nth-of-type(2) > .form-row-new:nth-of-type(4) {
        display: inline-flex;
        vertical-align: top;
        background: #ffffff;
        padding: 8px 6px 20px 6px;
        margin: 0;
        border-radius: 0;
    }
    
    /* First inline field (City) - no left padding, bottom corners */
    .multi-step-form .fieldset-cf7mls:nth-of-type(2) > .form-row-new:nth-of-type(2) {
        width: calc(50% - 4px);
        padding-left: 20px;
        border-radius: 0 0 0 8px;
    }
    
    /* State field */
    .multi-step-form .fieldset-cf7mls:nth-of-type(2) > .form-row-new:nth-of-type(3) {
        width: calc(25% - 4px);
    }
    
    /* Zip field - no right padding, bottom corners */
    .multi-step-form .fieldset-cf7mls:nth-of-type(2) > .form-row-new:nth-of-type(4) {
        width: calc(25% - 4px);
        padding-right: 20px;
        border-radius: 0 0 8px 0;
    }
    
    /* All fields in Step 2 - 100% of their container */
    .multi-step-form .fieldset-cf7mls:nth-of-type(2) .form-row-new input,
    .multi-step-form .fieldset-cf7mls:nth-of-type(2) .form-row-new select {
        width: 100%;
    }
    
    /* ====== STEP 4: Two-Column Layout (Design Match) ====== */
    /* Design: Label on top, horizontal buttons below, vertical divider between halves */
    /* Buttons OUTSIDE the white box (like Step 1) */
    /* IMPORTANT: Only apply grid to fieldsets with step-question (homeowner question), 
       NOT to fieldsets with form-row-new (contact fields like Name, Email) */
    .multi-step-form .fieldset-cf7mls:nth-of-type(4):has(.step-question):not(:has(.form-row-new)) {
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: auto auto auto;
        background: transparent;
        border-radius: 0;
        overflow: visible;
    }
    
    /* Step 4 with contact fields (Name, Company, Phone, Email) - block layout */
    .multi-step-form .fieldset-cf7mls:nth-of-type(4):has(.form-row-new) {
        display: block !important;
        background: #ffffff;
        border-radius: 8px;
        padding: 20px;
    }

    /* Hide empty p elements AND "Project Type" label (4th p = "Project Type") */
    .multi-step-form .fieldset-cf7mls:nth-of-type(4) > p:nth-of-type(1),
    .multi-step-form .fieldset-cf7mls:nth-of-type(4) > p:nth-of-type(4),
    .multi-step-form .fieldset-cf7mls:nth-of-type(4) > p:nth-of-type(6),
    .multi-step-form .fieldset-cf7mls:nth-of-type(4) > p:nth-of-type(7) {
        display: none !important;
    }

    /* LEFT HALF - "Do you own your home?" label (row 1) */
    .multi-step-form .fieldset-cf7mls:nth-of-type(4) > .step-question:nth-of-type(2) {
        grid-column: 1;
        grid-row: 1;
        background: #ffffff;
        border-right: 1px solid #e0e0e0;
        border-radius: 8px 0 0 0;
        padding: 25px 25px 10px 25px;
        margin: 0;
        font-weight: 600;
        font-size: 18px;
        color: #021A8E;
    }

    /* LEFT HALF - Yes/No radios (row 2) */
    .multi-step-form .fieldset-cf7mls:nth-of-type(4) > p:nth-of-type(3) {
        grid-column: 1;
        grid-row: 2;
        background: #ffffff;
        border-right: 1px solid #e0e0e0;
        border-radius: 0 0 0 8px;
        padding: 10px 25px 25px 25px;
        margin: 0;
    }

    /* RIGHT HALF - Empty top spacer (row 1) for visual balance */
    .multi-step-form .fieldset-cf7mls:nth-of-type(4)::before {
        content: '';
        grid-column: 2;
        grid-row: 1;
        background: #ffffff;
        border-radius: 0 8px 0 0;
    }

    /* RIGHT HALF - Replacement/Repair radios (row 2, aligned with Yes/No) */
    .multi-step-form .fieldset-cf7mls:nth-of-type(4) > p:nth-of-type(5) {
        grid-column: 2;
        grid-row: 2;
        background: #ffffff;
        border-radius: 0 0 8px 0;
        padding: 10px 20px 20px 20px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Buttons span full width at bottom - OUTSIDE white box */
    .multi-step-form .fieldset-cf7mls:nth-of-type(4) > .cf7mls-btns {
        grid-column: 1 / -1;
        grid-row: 3;
        background: transparent;
        padding-top: 20px;
    }
    
    /* Step 4: Radio buttons HORIZONTAL layout */
    .multi-step-form .fieldset-cf7mls:nth-of-type(4) .wpcf7-radio {
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        width: 100%;
    }
    
    /* ====== DESKTOP: Radio Pill Button Styling ====== */
    .multi-step-form .wpcf7-radio {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .multi-step-form .wpcf7-radio .wpcf7-list-item {
        margin: 0;
    }
    
    .multi-step-form .wpcf7-radio .wpcf7-list-item-label {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: 2px solid #021A8E;
        border-radius: 6px;
        padding: 10px 24px;
        min-height: 40px;
        min-width: 80px;
        font-weight: 500;
        font-size: 14px;
        color: #021A8E;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .multi-step-form .wpcf7-radio .wpcf7-list-item-label:hover {
        background: rgba(2, 26, 142, 0.05);
        transform: translateY(-1px);
    }
    
    /* Checked state - using adjacent sibling selector */
    .multi-step-form .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label {
        background: #021A8E;
        color: #ffffff;
        border-color: #021A8E;
        box-shadow: 0 4px 12px rgba(2, 26, 142, 0.3);
    }
    
    /* Also support :has() for modern browsers */
    .multi-step-form .wpcf7-radio .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label {
        background: #021A8E;
        color: #ffffff;
    }
    
    /* ====== STEP 5: Consent Layout ====== */
    /* Buttons OUTSIDE white box - fieldset transparent */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) {
        display: block;
        background: transparent;
        border-radius: 0;
    }

    /* Consent text - top of white box */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) .consent-text {
        background: #ffffff;
        border-radius: 8px 8px 0 0;
        padding: 25px 25px 15px 25px;
    }

    /* Radio container - bottom of white box */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) > p:has(.wpcf7-radio) {
        background: #ffffff;
        border-radius: 0 0 8px 8px;
        padding: 20px 25px 25px 25px;
        margin: 0;
    }

    .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-radio {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-list-item {
        flex: 0 0 auto;
        min-width: 120px;
    }
}

/* ============================================================
   STEP 2 DESKTOP FIX - Target correct classes
   ============================================================ */

@media (min-width: 769px) {
    /* Step 2 container - horizontal layout for City/State/Zip */
    .multi-step-form .step2-fields-container {
        background: #ffffff;
        border-radius: 8px;
        padding: 20px;
        display: block;
        text-align: left;
    }
    
    /* Address row - full width */
    .multi-step-form .step2-fields-container > .form-row-step2:first-child {
        display: block;
        margin-bottom: 12px;
    }
    
    /* Wrapper for City/State/Zip using display:flex workaround */
    .multi-step-form .step2-fields-container {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    /* Address - full width first */
    .multi-step-form .step2-fields-container > .form-row-step2:first-child {
        flex: 0 0 100%;
        margin-bottom: 0;
    }
    
    /* City - 50% width */
    .multi-step-form .step2-fields-container > .form-row-step2:nth-child(2) {
        flex: 0 0 calc(50% - 8px);
    }
    
    /* State - 25% width */
    .multi-step-form .step2-fields-container > .form-row-step2:nth-child(3) {
        flex: 0 0 calc(25% - 8px);
    }
    
    /* Zip - 25% width */
    .multi-step-form .step2-fields-container > .form-row-step2:nth-child(4) {
        flex: 0 0 calc(25% - 8px);
    }
    
    /* Remove inline-block properties */
    .multi-step-form .step2-fields-container > .form-row-step2:nth-child(2),
    .multi-step-form .step2-fields-container > .form-row-step2:nth-child(3),
    .multi-step-form .step2-fields-container > .form-row-step2:nth-child(4) {
        display: block;
        vertical-align: unset;
        margin-right: 0;
        margin-bottom: 0;
    }
    
    /* Fields inside - 100% width of container */
    .multi-step-form .step2-fields-container .form-row-step2 input,
    .multi-step-form .step2-fields-container .form-row-step2 select {
        width: 100%;
        height: 43px;
        box-sizing: border-box;
    }

    /* Select dropdowns - proper padding for arrow */
    .multi-step-form .step2-fields-container .form-row-step2 select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 40px;
        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='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-color: #ffffff;
        cursor: pointer;
    }

    /* Fix Address alignment - remove p tag margins */
    .multi-step-form .step2-fields-container .form-row-step2 > p {
        margin: 0;
        padding: 0;
    }

    /* Make Address input same width as row */
    .multi-step-form .step2-fields-container > .form-row-step2:first-child input {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================
   CONTACT US PAGE FORM - Override multi-step hiding rules
   The contact form is NOT a multi-step form, so show the submit button
   ============================================================ */
.contact-form-wrapper .wpcf7-form .wpcf7-submit,
.contact-form-wrapper .wpcf7-form input[type="submit"].wpcf7-submit,
.contact-page-section .wpcf7-submit {
    display: block !important;
    visibility: visible !important;
    width: 100%;
    padding: 16px 30px;
    background: #FFA500 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 15px;
}

.contact-form-wrapper .wpcf7-form .wpcf7-submit:hover,
.contact-page-section .wpcf7-submit:hover {
    background: #FF8C00 !important;
}

/* ============================================================
   END OF CF7 MULTI-STEP FORM STYLES
   
   NOTE: Hero section styles belong in the theme's style.css file,
   not in this form-specific CSS file.
   ============================================================ */

/* ============================================================
   CONSENT STEP: Proper Center Alignment (Desktop)
   All elements centered on the same vertical axis
   ============================================================ */
@media (min-width: 769px) {
    /* Consent fieldset - standard block layout with centered text */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) {
        display: block !important;
        text-align: center !important;
    }

    /* Consent text - centered paragraph */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) .consent-text {
        display: block !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Yes/No radio container - centered */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) > p:has(.wpcf7-radio) {
        display: block !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    /* Button containers - inline-block for natural centering */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) > .cf7mls-btns,
    .multi-step-form .fieldset-cf7mls:has(.consent-text) > p:has(.wpcf7-submit) {
        display: inline-block !important;
        vertical-align: top !important;
        margin: 0 9px !important;
        padding: 0 !important;
        width: auto !important;
    }

    /* Hide the CF7 spinner in consent step to prevent width issues */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-spinner {
        display: none !important;
    }

    /* Make both buttons exactly the same width for symmetry */
    .multi-step-form .fieldset-cf7mls:has(.consent-text) .cf7mls_back,
    .multi-step-form .fieldset-cf7mls:has(.consent-text) .wpcf7-submit {
        width: 160px !important;
        box-sizing: border-box !important;
    }
}