/* ==========================
   CHECK ELIGIBILITY FORM — page-specific styles
   Loaded by /funding/check-eligibility/index.html
   Shared form styles live in /forms.css
   ========================== */

/* ── Match the unified mockup look (scoped to this page only so other
              .product-form-card pages aren't affected) ── */
        .product-form-card input[type="text"],
        .product-form-card input[type="tel"],
        .product-form-card input[type="email"],
        .product-form-card input[type="number"],
        .product-form-card select,
        .product-form-card .ef-input,
        .product-form-card .ef-select {
            border-radius: 6px;
            padding: 13px 15px;
            font-family: 'Vectora Roman';
            font-size: 17px;
            line-height: 1.1;
        }

        .product-form-card select,
        .product-form-card .ef-select {
            padding-right: 40px;
        }

        .product-form-card input::placeholder {
            font-family: 'Vectora Roman';
            font-size: 17px;
            color: #718096;
        }

        .product-form-card input:focus,
        .product-form-card select:focus,
        .product-form-card .ef-input:focus,
        .product-form-card .ef-select:focus {
            outline: none;
            border-color: #6ab235;
            box-shadow: 0 0 0 2px rgba(106, 178, 53, 0.18);
        }

        /* Custom dropdown styling within .product-form-card (mirrors forms.css) */
        .product-form-card .custom-dropdown {
            position: relative;
            min-width: 0;
        }

        .product-form-card .dd-trigger {
            box-sizing: border-box;
            width: 100%;
            padding: 13px 32px 13px 15px;
            border: 1px solid #e0e6ee;
            border-radius: 6px;
            font-family: 'Vectora Roman';
            font-size: 17px;
            line-height: 1.1;
            background-color: #fff;
            color: #000;
            cursor: pointer;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%236ab235' stroke-width='2' d='M1 1.5l5 5 5-5'/></svg>");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 10px 7px;
            display: flex;
            align-items: center;
            min-height: 47px;
        }

        .product-form-card .dd-trigger.placeholder {
            color: #718096;
            font-family: 'Vectora Roman';
        }

        .product-form-card .dd-trigger.error {
            border-color: #cc4b37;
        }

        .product-form-card .dd-trigger.open,
        .product-form-card .dd-trigger:focus {
            outline: none;
            border-color: #6ab235;
            box-shadow: 0 0 0 2px rgba(106, 178, 53, 0.18);
        }

        .product-form-card .dd-panel {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            z-index: 100;
            background: #fff;
            border: 1px solid #e0e6ee;
            border-radius: 6px;
            max-height: 260px;
            overflow-y: auto;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        }

        .product-form-card .dd-panel.open {
            display: block;
        }

        .product-form-card .dd-option {
            padding: 11px 15px;
            font-family: 'Vectora Roman';
            font-size: 17px;
            color: #000;
            cursor: pointer;
        }

        .product-form-card .dd-option:hover {
            background: #eef2f7;
        }

        .product-form-card .dd-option.selected {
            background: #eaf5e0;
            color: #6ab235;
            font-weight: 700;
        }

        /* Inline-question dropdown stays narrow as designed */
        .ef-inline-q .ef-inline-select .custom-dropdown {
            width: 130px;
        }

        /* Consent checkbox: bigger, rounder to match mockup */
        .product-form-card .consent input[type="checkbox"] {
            width: 20px;
            height: 20px;
            border: 1px solid #e0e6ee;
            border-radius: 12px;
            margin-top: 0;
        }

        /* Field labels — match mockup tone */
        .product-form-card .field-label {
            font-family: 'Vectora Roman';
            font-size: 16px;
            color: #000;
            line-height: 1.2;
        }

        /* ── Eligibility form: overrides + calculator-specific ── */
        .product-form-card {
            background: #ffffff;
            max-width: 720px;
        }

        .product-form-card .ef-step {
            display: none;
            min-height: 640px;
        }

        .product-form-card .ef-step.active {
            display: block;
        }

        /* Step 4 anchors to the top like the other steps (was being
           vertically-centered which made it look like it was floating
           in the middle of the column) */
        .product-form-card [data-step="4"].active {
            display: block;
        }

        /* Step 1: tighter spacing, placeholder-only (no field labels) */
        .product-form-card [data-step="1"] .ef-group {
            margin-bottom: 10px;
        }

        .product-form-card [data-step="1"] .ef-row {
            gap: 10px;
        }

        .product-form-card [data-step="1"] .consent {
            margin-top: 14px;
        }

        /* Step 2 spacing */
        .product-form-card [data-step="2"] .ef-goback-top {
            margin-bottom: 28px;
        }

        .product-form-card [data-step="2"] .ef-thank {
            text-align: center;
            margin-bottom: 64px;
        }

        .product-form-card [data-step="2"] .ef-group .field-label {
            margin-bottom: 2px;
        }

        .product-form-card [data-step="2"] .ef-note {
            margin: 4px 0 14px;
        }

        /* Step 3 spacing */
        .product-form-card [data-step="3"] .ef-goback-top {
            margin-bottom: 28px;
        }

        .product-form-card [data-step="3"] .ef-heading {
            margin-bottom: 32px;
        }

        .product-form-card [data-step="3"] .ef-inline-q {
            justify-content: center;
        }

        .product-form-card [data-step="3"] .ef-group .field-label {
            margin-bottom: 2px;
        }

        .ef-subtext {
            font-family: 'Vectora Roman';
            font-size: 17px;
            line-height: 1.7;
            color: #000;
            margin-bottom: 20px;
        }

        .ef-heading {
            font-family: 'Vectora Black';
            font-size: 38px;
            letter-spacing: -0.06em;
            color: #000;
            line-height: 1.2;
            margin-bottom: 10px;
            text-align: left;
        }

        .ef-heading .green {
            color: #6ab235;
        }

        .ef-thank {
            font-family: 'Vectora Roman';
            font-size: 18px;
            color: #000;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .product-form-card .ef-btn {
            display: inline-block;
            background: #7be42f;
            color: #000;
            border: none;
            border-radius: 28px;
            padding: 15px 42px;
            font-family: 'Vectora Roman';
            font-size: 18px;
            font-weight: 700;
            -webkit-text-stroke: 0.4px;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
            text-align: center;
            text-decoration: none;
        }

        .ef-btn-wrap {
            text-align: center;
            margin-top: 16px;
        }

        .product-form-card .ef-btn:hover {
            background: #6fd426;
        }

        .product-form-card .ef-btn:active {
            transform: scale(0.98);
        }


        .ef-nav {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 8px;
        }

        .ef-nav .ef-btn {
            flex: 1;
        }

        .ef-goback {
            font-family: 'Vectora Roman';
            font-size: 15px;
            font-weight: 700;
            color: #718096;
            background: none;
            border: none;
            cursor: pointer;
            white-space: nowrap;
            padding: 0;
        }

        .ef-goback:hover {
            color: #4a5568;
        }

        .ef-goback-top {
            display: inline-block;
            font-family: 'Vectora Roman';
            font-size: 15px;
            font-weight: 700;
            -webkit-text-stroke: 0.4px;
            color: #6ab235;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            margin-bottom: 16px;
        }

        .ef-goback-top:hover {
            color: #000000;
        }

        .ef-row {
            display: flex;
            gap: 14px;
        }

        .ef-row>.ef-group {
            flex: 1;
            min-width: 0;
        }

        .ef-group {
            margin-bottom: 18px;
        }

        .product-form-card .ef-group .field-label {
            margin-top: 0;
            margin-bottom: 6px;
        }

        .ef-err {
            font-size: 12px;
            color: #cc4b37;
            margin-top: 4px;
            display: none;
        }

        .ef-err.show {
            display: block;
        }

        .product-form-card .ef-input.error,
        .product-form-card .ef-select.error {
            border-color: #cc4b37;
        }

        /* Currency input wrapper */
        .ef-currency {
            position: relative;
        }

        .ef-currency .ef-dollar {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'Vectora Roman';
            font-size: 17px;
            color: #718096;
            pointer-events: none;
            z-index: 1;
        }

        .product-form-card .ef-currency .ef-input {
            padding-left: 28px;
        }

        /* 4-month deposits row */
        .ef-months {
            display: flex;
            gap: 10px;
        }

        .ef-months>.ef-group {
            flex: 1;
            min-width: 0;
        }

        .ef-note {
            text-align: center;
            font-family: 'Vectora Light';
            font-size: 13px;
            color: #000;
            margin: 8px 0 20px;
            line-height: 1.5;
        }

        /* Do-you-have-existing-funding inline question */
        .ef-inline-q {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }

        .product-form-card .ef-inline-q .field-label {
            margin-top: 0;
            margin-bottom: 0;
            white-space: nowrap;
        }

        .ef-inline-q .ef-inline-select {
            width: 130px;
        }

        .product-form-card .ef-inline-q .ef-inline-select select {
            padding: 10px 40px 10px 14px;
            font-size: 15px;
        }

        .ef-inline-q .ef-err {
            width: 100%;
        }

        /* Conditional funding details */
        .ef-funding-fields {
            display: none;
            margin-bottom: 8px;
        }

        .ef-funding-fields.show {
            display: block;
        }

        .ef-fields-row {
            display: flex;
            gap: 10px;
            margin-bottom: 40px;
        }

        .ef-fields-row>.ef-group {
            flex: 1;
            min-width: 0;
            margin-bottom: 0;
        }

        /* Breathing room above the debt sheet header so it doesn't crowd the
           totals row (Combined Balance / Total Daily Payment) above it */
        .ef-debt-sheet {
            margin-top: 24px;
        }

        /* Calculated totals row (under Total Balance & Total Daily Payment) */
        .ef-calc-row {
            display: flex;
            gap: 10px;
            margin-top: 6px;
            margin-bottom: 8px;
        }

        .ef-calc-col {
            flex: 1;
            min-width: 0;
            text-align: center;
        }

        .ef-calc-total {
            font-family: 'Vectora Bold';
            font-size: 25px;
            letter-spacing: -0.05em;
            color: #6ab235;
            line-height: 1.2;
            /* Match input field height + bottom-anchor the text so the bottom
               of "$0.00" lines up with the bottom of the dropdown next to it */
            min-height: 47px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        /* Help link */
        .ef-help {
            display: block;
            text-align: right;
            font-family: 'Vectora Roman';
            font-size: 18px;
            font-weight: 700;
            -webkit-text-stroke: 0.4px;
            color: #6ab235;
            text-decoration: underline;
            margin: 36px 0;
        }

        .ef-help:hover {
            text-decoration: underline;
        }

        /* Debt sheet table — 4 columns: Funder | Balance | Payment | Frequency */
        .ef-pos-header-row,
        .ef-pos-row {
            gap: 10px;
            align-items: center;
            margin-bottom: 10px;
        }

        .ef-pos-header-row {
            display: none;
            margin-bottom: 2px;
        }

        .ef-pos-row {
            display: none;
        }

        .ef-pos-header-row.show,
        .ef-pos-row.show {
            display: grid;
            grid-template-columns: 5fr 5fr 5fr 4fr;
        }

        .ef-pos-col-field {
            min-width: 0;
        }

        .product-form-card .ef-pos-col-field .ef-input,
        .product-form-card .ef-pos-col-field select {
            margin-bottom: 0;
        }

        .ef-pos-header {
            font-family: 'Vectora Roman';
            font-size: 16px;
            font-weight: 700;
            color: #000;
        }

        /* Step 4 results */
        .ef-results {
            text-align: center;
            padding: 8px 0;
        }

        .ef-results-heading {
            font-family: 'Vectora Black';
            font-size: 38px;
            letter-spacing: -0.06em;
            color: #6ab235;
            margin-bottom: 28px;
            line-height: 1.1;
        }

        .ef-pre-text {
            font-family: 'Vectora Roman';
            font-size: 20px;
            font-weight: 700;
            -webkit-text-stroke: 0.px;
            color: #000;
            margin-bottom: 24px;
        }

        .ef-amount {
            font-family: 'Vectora Black';
            font-size: 56px;
            letter-spacing: -0.06em;
            color: #6ab235;
            margin-bottom: 36px;
            line-height: 1.1;
        }

        .product-form-card .ef-results .ef-btn {
            margin: 0 auto 36px;
            display: inline-block;
            padding: 13px 36px;
            font-size: 16px;
        }

        .ef-contact {
            font-family: 'Vectora Roman';
            font-size: 16px;
            color: #000;
            line-height: 1.75;
            margin-bottom: 28px;
            text-align: center;
        }

        .ef-contact a {
            font-size: 16px;
            font-weight: 700;
            color: #6ab235;
            text-decoration: underline;
            letter-spacing: -0.04em;
        }

        .ef-disclaimer {
            text-align: justify;
            font-family: 'Vectora Light';
            font-size: 12px;
            color: #000;
            margin-top: 80px;
        }

        /* Responsive */
        @media (max-width: 720px) {

            .ef-row,
            .ef-fields-row,
            .ef-calc-row {
                flex-direction: column;
                gap: 0;
            }

            .ef-calc-row {
                margin-top: 0;
            }

            .ef-months {
                flex-wrap: wrap;
            }

            .ef-months>.ef-group {
                flex: 1 1 45%;
                min-width: 120px;
            }

            /* On mobile, stack the 4 debt-sheet columns into 2 rows of 2 */
            .ef-pos-header-row.show,
            .ef-pos-row.show {
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }

            .ef-heading {
                font-size: 22px;
            }

            .ef-results-heading {
                font-size: 38px;
            }

            .ef-amount {
                font-size: 28px;
            }
        }