/*
 * fix-and-flip.css - FlipLatino
 * Extracted from fix-and-flip.html (batch-29c1-css-extraction-fix-and-flip)
 * Source: 4 inline <style> blocks merged in document order
 *   Block 1 (unnamed):                   original lines 15-1015
 *   Block 2 (lf-disable-menus):          original lines 1016-1026
 *   Block 3 (lf-autofill-natural-reset): original lines 1027-1056
 *   Block 4 (lf-autofill-lastwins):      original lines 1057-1099
 * Do not add shared/global rules here - page-specific styles only.
 */
        body {
            background: linear-gradient(to bottom right, #F6F8FB, #EAEEF6, #F6F8FB, #EAEEF6) no-repeat fixed;
            background-size: cover;
            padding: 20px 20px 20px;
            /* padding: clamp(12px, 2vw, 40px); */
        }


        h1 {
            font-family: 'Montserrat', sans-serif;
            text-align: center;
            color: #F05A28;
            letter-spacing: 1.5px;
            font-weight: 700;

            /* misma distancia arriba y abajo */
            margin: 40px 0;
        }

        h2 {
            font-family: 'Montserrat', sans-serif;
            text-align: center;
            color: #F05A28;
            letter-spacing: 1.5px;
            font-weight: 500;

            /* sin márgenes extra */
            margin: 0;
        }

        /* ===== Ocultar COMPLETAMENTE el scrollbar (seguir desplazando) ===== */
        /* WebKit (Chrome / Edge / Safari) */
        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            width: 0;
            /* sin ancho */
            height: 0;
            /* sin alto (para ejes horizontales) */
            background: transparent;
            /* por si el motor pinta pista */
        }

        /* Firefox */
        html,
        body {
            scrollbar-width: none;
            /* oculta el scrollbar */
            scrollbar-color: transparent transparent;
            /* redundante: "por si acaso" */
        }

        /* Windows/IE legado (EdgeHTML) - no estorba en navegadores modernos */
        html,
        body {
            -ms-overflow-style: none;
            /* esconder barras en motores MS antiguos */
        }

        form,
        .results-table {
            max-width: 600px;
            /* match MAO */
            margin: 20px auto;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 1) !important;
            padding: 20px;
            border-radius: 15px;
        }

        /* FIX-FLIP-LAYOUT-09: remove ghost inner form card — ff-main-calc is the single container */
        #fixAndFlipForm {
            max-width: none !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            background: transparent !important;
            border: none !important;
        }


        label {
            margin-top: 10px;
            font-weight: bold;
            color: white;
            position: relative;
            display: inline-block;
        }

        input,
        select {
            width: 95%;
            margin-top: 5px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 25px;
            background-color: transparent;
            color: white;
        }

        /* Keep the selected value the same color as inputs while focused */
        select:focus {
            color: var(--ctrl-fg) !important;
            -webkit-text-fill-color: var(--ctrl-fg);
        }

        input::placeholder {
            color: rgba(11,26,61,.55);
        }

        input[type="checkbox"]:checked {
            accent-color: #F05A28;
        }

        .conditional {
            display: none;
        }

        .lending-options {
            display: flex;
            justify-content: space-around;
            gap: 10px;
            margin-top: 10px;
            text-align: center;
        }

        .lending-options label {
            display: inline-block;
            font-weight: normal;
        }

        .lending-options input {
            margin-right: 5px;
        }

        .navbar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: rgba(11,26,61, 0.1);
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
        }

        .navbar a {
            color:#0B1A3D;
            text-decoration: none;
            padding: 15px 35px;
            border-radius: 5px;
            font-family: 'Montserrat', sans-serif;
            font-weight: bold;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .navbar a:hover {
            background-color: rgba(11,26,61, 0.2);
        }

        .navbar a.active {
            background-color: #ff9900;
            color: #000;
        }

        .lender-section {
            padding: 20px;
            border-radius: 15px;
        }

        .section-header {
            background-color: rgba(255, 217, 0, 0.2);
            color: #F05A28;
            font-family: 'Montserrat', sans-serif;
            text-align: center;
            font-size: 20px;
            padding: 10px;
            border-radius: 10px;
            margin-top: 20px;
        }

        .button-container {
            text-align: center;
            margin-top: 20px;
        }

        #clearFormButton {
            background-color: #F05A28;
            color:#0B1A3D;
            border: none;
            border-radius: 25px;
            padding: 10px 20px;
            font-family: 'Montserrat', sans-serif;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            display: inline-block;
        }

        #clearFormButton:hover {
            background-color: #ffcc66;
            transform: scale(1.05);
        }

        .info-icon {
            display: inline-block;
            background-color: #F05A28;
            color: white;
            font-size: 14px;
            font-weight: bold;
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            transition: transform 0.2s ease;
        }

        .info-icon:hover {
            transform: scale(1.1);
        }

        .info-box {
            display: none;
            position: absolute;
            background-color: #EAEEF6;
            color: white;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
            width: 400px;
            font-size: 14px;
            line-height: 1.5;
            z-index: 1000;
            top: 0;
            left: calc(100% + 10px);
            white-space: normal;
            transition: opacity 0.3s ease, transform 0.3s ease;
            pointer-events: none;
        }

        .info-box strong {
            color: #F05A28;
        }

        .info-box p {
            margin: 5px 0;
        }

        .info-icon:hover+.info-box,
        .info-icon:focus+.info-box {
            display: block;
            pointer-events: auto;
        }

        /* RESULTS: 2x2 grid, compact cards */
        .results-container {
            display: grid;
            grid-template-columns: repeat(2, minmax(260px, 1fr));
            gap: 16px 20px;
            max-width: 900px;
            /* match MAO panel width */
            margin: 0 auto 30px auto;
        }


        .result-card {
            background-color: #FFFFFF;
            color: white;
            padding: 12px;
            border-radius: 10px;
            border: 2px solid #F05A28;
            box-shadow: 0 0 8px 1.5px #F05A28 !important;
            min-height: 150px;
        }


        /* Titles slightly smaller to match compact look */
        .result-card h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 16px;
            color: #F05A28;
            margin: 0 0 8px 0;
            text-align: center;
        }


        /* List layout + tighter typography */
        .result-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .result-card ul li {
            font-size: 15px;
            margin: 6px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(11,26,61, 0.2);
            padding-bottom: 4px;
            font-family: 'Inter', system-ui, sans-serif;
            letter-spacing: 0.2px;
        }


        .result-card ul li strong {
            color: #F05A28;
            font-weight: 700;
        }

        .result-card ul li span {
            color:#0B1A3D;
            font-weight: 700;
        }

        /* Responsive: stack to one column on small screens */
        @media (max-width: 800px) {
            .results-container {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 900px) {
            .col-results {
                grid-template-columns: 1fr;
            }
        }

        .footer {
            background-color: rgba(11,26,61, 0.1);
            color: white;
            text-align: center;
            padding: 5px;
            margin-top: 20px;
            border-top: 1px solid rgba(11,26,61, 0.2);
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2) !important;
        }

        .footer .disclaimer {
            width: 70%;
            font-size: 14px;
            line-height: 1.6;
            margin: 10px auto;
            letter-spacing: 0.5px;
        }

        .disclaimer-label {
            color: #F05A28;
            font-size: 20px;
            line-height: 1.6;
            margin: 5px;
            font-weight: bold;
        }

        @media (max-width: 900px) {
            .result-card {
                width: 100%;
            }

            /* stack on smaller screens */
        }

        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
            }

            .navbar a {
                padding: 10px;
                width: 100%;
                text-align: center;
            }
        }


        /* =================== INPUT STYLING ================== */

        /* ===== Unified Control Theme (glass + gold) - from MAO ===== */
        :root {

            /* center column is 680px; its results use a 12px gap -> each card width */
            --center-col-width: 680px;
            --center-results-gap: 12px;
            --center-card-width: calc((var(--center-col-width) - var(--center-results-gap)) / 2);
        }


        .lf-control {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 100%;
            padding: var(--ctrl-pad-y) var(--ctrl-pad-x);
            border-radius: var(--ctrl-radius);
            border: 1px solid var(--ctrl-border);
            background:
                linear-gradient(180deg, var(--ctrl-bg1), var(--ctrl-bg2)),
                var(--ctrl-tint);
            color: var(--ctrl-fg);
            font-size: 16px;
            outline: none;
            transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
            backdrop-filter: blur(3px);
            box-sizing: border-box;
        }

        .lf-control:hover {
            background:
                linear-gradient(180deg, rgba(11,26,61, 0.10), rgba(11,26,61, 0.03)),
                rgba(11,26,61, 0.42);
            border-color: var(--ctrl-border-hover);
        }

        .lf-control:focus {
            border-color: #F05A28;
            box-shadow: inset 0 1px 0 rgba(11,26,61, 0.16), 0 0 0 3px var(--ctrl-ring) !important;
        }

        .lf-control::placeholder {
            color: #9fb2be;
        }

        .lf-control:disabled {
            opacity: var(--ctrl-disabled);
            cursor: not-allowed;
        }

        /* Layout helpers for rows/columns like MAO */
        .form-rows {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .two-col {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 20px;
        }

        .two-col .field {
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

        @media (max-width:900px) {
            .two-col {
                grid-template-columns: 1fr;
            }
        }


        /* ============================================================
           FIX-FLIP-LAYOUT-05: 3-col upper + 2-col lower board layout
           ============================================================ */

        /* Outer container */
        .ff-grid {
            max-width: 1400px;
            margin: 0 auto 24px;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        /* ── SECTION 1: 3-column upper area (FIX 8: wider center) ── */
        .ff-section1 {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 16px;
            align-items: stretch;
        }

        /* FIX 3: left/right columns fill full section height */
        .ff-col-left,
        .ff-col-right {
            display: flex;
            flex-direction: column;
            gap: 10px;
            height: 100%;
        }

        /* FIX 3: top cards hug their content */
        .ff-card-fixed {
            flex: 0 0 auto;
        }

        /* FIX 3: bottom cards grow to fill remaining space */
        .ff-card-grow {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        /* FIX 3: inner result-card inside ff-card-grow fills its wrapper */
        .ff-card-grow .ff-card-inner {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;         /* for overlay positioning */
        }

        .ff-card-grow .ff-card-inner .ff-card-body {
            flex: 1;
        }

        /* Card header row: title left, toggle button right */
        .ff-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
        }

        .ff-card-header h3 {
            margin: 0;
        }

        /* Inactive overlay — absolute over the card, hidden by default */
        .ff-inactive-overlay {
            display: none;
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            border-radius: inherit;
            pointer-events: none;
            z-index: 2;
        }

        .ff-inactive-overlay.ff-overlay-active {
            display: block;
        }

        /* Center column: Main Calculator only (no toggle bar) */
        .ff-col-center {
            display: flex;
            flex-direction: column;
            gap: 0;
            min-width: 0;
        }

        /* Main calculator panel */
        .ff-main-calc {
            min-width: 0;
        }

        /* Panel section headings (used in lender panels only now) */
        .ff-panel-heading {
            font-family: 'Montserrat', sans-serif;
            color: #F05A28;
            font-size: 15px;
            letter-spacing: 0.5px;
            text-align: center;
            padding: 8px 0 10px;
            border-bottom: 1px solid rgba(11,26,61,0.12);
            margin-bottom: 0;
        }

        /* FIX-FLIP-LAYOUT-07: Main calc 3-column internal grid */
        .ff-calc-grid {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 16px;
            padding: 16px;
        }

        .ff-empty-cell { pointer-events: none; }

        /* Inline toggle button (inside card header) */
        .ff-inline-toggle {
            cursor: pointer;
            padding: 5px 12px;
            border-radius: 999px;
            border: 1.5px solid rgba(240,90,40, 0.55);
            background: linear-gradient(180deg, rgba(11,26,61,.08), rgba(11,26,61,.03)),
                        rgba(11,26,61, .35);
            color:#0B1A3D;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
            flex-shrink: 0;
            transition: border-color .15s ease, background .15s ease, color .15s ease;
        }

        .ff-inline-toggle.ff-toggle-active {
            background: rgba(240,90,40, 0.18);
            border-color: #F05A28;
            color: #F05A28;
            font-weight: 700;
        }

        .ff-inline-toggle.ff-toggle-inactive {
            border-color: rgba(11,26,61,0.2);
            color: rgba(11,26,61,.55);
            background: rgba(11,26,61,0.04);
        }

        /* FIX 1: force bottom panels always visible */
        .ff-section3 .ff-hml-zone,
        .ff-section3 .ff-pml-zone {
            display: block !important;
            visibility: visible !important;
        }

        /* Zone inactive on bottom panels: opacity fade (not display:none) */
        .ff-section3 .ff-hml-zone.hml-inactive,
        .ff-section3 .ff-pml-zone.pml-inactive {
            opacity: 0.4;
            pointer-events: none;
        }

        /* ── SECTION 2: Divider ── */
        .ff-divider {
            height: 1px;
            background: rgba(240,90,40, 0.2);
            margin: 16px 0;
        }

        /* ── SECTION 3: 2-column lender panels ── */
        .ff-section3 {
            display: grid;
            grid-template-columns: 2fr 3fr;
            gap: 16px;
            align-items: start;
        }

        .ff-lender-panel {
            min-width: 0;
        }

        /* Internal lender input grids */
        .ff-lender-grid {
            display: grid;
            gap: 16px;
            padding: 16px;
        }

        .ff-lender-grid-2x2 { grid-template-columns: repeat(2, 1fr); }
        .ff-lender-grid-2x3 { grid-template-columns: repeat(3, 1fr); }

        /* ── Zone inactive states ── */
        /* Section 1 detail cards: overlay handles visual — no opacity here */
        /* Section 3 bottom panels: opacity fade (handled in the section above) */

        /* Mute result card borders when inactive */
        .ff-hml-zone.hml-inactive #hml-results {
            border-color: rgba(240,90,40,0.2) !important;
            box-shadow: none !important;
        }

        .ff-pml-zone.pml-inactive #pml-results {
            border-color: rgba(240,90,40,0.2) !important;
            box-shadow: none !important;
        }

        /* Keep .hidden class for JS toggleLender compatibility */
        .hidden {
            display: none !important;
        }

        /* ── Responsive: stack all to single column below 900px ── */
        @media (max-width: 900px) {
            .ff-section1 {
                grid-template-columns: 1fr;
                align-items: start;
            }

            .ff-col-left,
            .ff-col-right {
                height: auto;
            }

            .ff-card-grow {
                flex: 0 0 auto;
            }

            .ff-section3 {
                grid-template-columns: 1fr;
            }

            .ff-calc-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .ff-lender-grid-2x2,
            .ff-lender-grid-2x3 {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 600px) {
            .ff-calc-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ── FIX-FLIP-LAYOUT-05-REFINE: visual polish ──────────────────
           Targets only spacing, hierarchy, and visual weight.
           No layout columns, no IDs, no calc logic touched.
           ────────────────────────────────────────────────────────── */

        /* --- Outer grid: tighten section spacing --- */
        .ff-grid {
            padding: 0 20px 24px !important;
        }

        /* --- Section 1: remove top gap between title and upper grid --- */
        .ff-section1 {
            margin-top: 12px;
        }

        /* --- Column cards: consistent gap --- */
        .ff-col-left,
        .ff-col-right {
            gap: 10px;
        }

        .ff-col-center {
            gap: 8px;
        }

        /* --- Result cards: compact, no vertical stretch --- */
        .result-card {
            border-radius: 10px;
            border: 1.5px solid rgba(240,90,40, 0.5);
            box-shadow: 0 0 6px 1px rgba(240,90,40, 0.18) !important;
            padding: 12px 14px;
        }

        .result-card h3 {
            font-size: 13px;
            margin: 0 0 8px 0;
            letter-spacing: 0.3px;
            text-align: center;
        }

        .result-card ul li {
            font-size: 13px;
            margin: 5px 0;
            padding-bottom: 4px;
        }

        /* --- Main Calculator panel: panel depth --- */
        .ff-main-calc {
            border-radius: 12px;
            border: 1px solid rgba(11,26,61, 0.1);
            background: rgba(0, 0, 0, 0.12);
            overflow: hidden;
        }

        /* --- Lender panel headings: tighter --- */
        .ff-panel-heading {
            font-size: 13px;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            padding: 9px 16px 8px;
            background: rgba(0, 0, 0, 0.15);
        }

        /* --- Main calc grid: consistent rhythm --- */
        .ff-calc-grid {
            gap: 12px;
            padding: 14px;
        }

        /* --- Field labels: compact but readable --- */
        .ff-calc-grid .field label,
        .ff-lender-grid .field label {
            font-size: 12px;
            line-height: 1.3;
            margin-bottom: 4px;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* FIX-FLIP-FIX-04: labels containing a tooltip .info span must not clip the
           absolutely-positioned .help-text that drops below the label boundary */
        .ff-calc-grid .field label:has(.info),
        .ff-lender-grid .field label:has(.info) {
            overflow: visible;
        }

        /* --- Consistent input height across all fields --- */
        .ff-calc-grid .lf-control,
        .ff-lender-grid .lf-control {
            padding: 9px 14px;
            font-size: 14px;
        }

        /* Active zone: card gets a slightly brighter border when its toggle is on */
        .ff-hml-zone:not(.hml-inactive) #hml-results,
        .ff-pml-zone:not(.pml-inactive) #pml-results {
            border-color: rgba(240,90,40, 0.7);
            box-shadow: 0 0 8px 1px rgba(240,90,40, 0.22) !important;
        }

        /* --- Divider: tighter margins --- */
        .ff-divider {
            margin: 12px 0;
        }

        /* --- Section 3: lender panels with subtle background --- */
        .ff-section3 {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            border: 1px solid rgba(11,26,61, 0.07);
            padding: 14px;
            gap: 20px;
        }

        /* --- Lender panel headings: secondary hierarchy --- */
        .ff-lender-panel .ff-panel-heading {
            font-size: 12px;
            letter-spacing: 0.8px;
            padding: 7px 14px 7px;
            opacity: 0.85;
        }

        /* --- Lender grid: tighter internal spacing --- */
        .ff-lender-grid {
            gap: 12px;
            padding: 12px;
        }

        /* --- Loan card: remove old heavy shadow, keep transparent --- */
        .loan-card {
            background: transparent !important;
            border-radius: 8px !important;
            box-shadow: none !important;
        }

        /* Side loan calculator cards */
        .loan-card {
            background: rgba(11,26,61, 0.199);
            border-radius: 15px;
            padding: 0px;
            color:#0B1A3D;
            box-shadow: 0 5px 10px rgba(0, 0, 0, .8) !important;
            margin-top: 0;
            /* no extra gap under the title */

        }

        /* keep columns from overlapping by including padding/borders in width */
        #fixAndFlipForm,
        .loan-card,
        .result-card,
        .lender-section {
            box-sizing: border-box;
        }

        /* Results stack within lender cards */
        .col-results {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .col-results .result-card {
            width: 100%;
        }

        /* Clear Form button fixed on the top-right */
        #clearFormButton {
            position: fixed;
            top: 14px;
            right: 16px;
            z-index: 1000;
            background-color: #F05A28;
            color:#0B1A3D;
            border: none;
            border-radius: 999px;
            padding: 10px 18px;
            font-family: 'Montserrat', sans-serif;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important;
            transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
        }

        #clearFormButton:hover {
            background-color: #ffcc66;
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(0, 0, 0, .4) !important;
        }


        /* Titles ABOVE the loan cards */
        .col-title {
            font-family: 'Montserrat', sans-serif;
            color:#0B1A3D;
            font-size: 16px;
            letter-spacing: .5px;
            text-align: center;
            background: transparent;
            padding: 0 14px;
            border-radius: 12px;
            margin: 0 0 10px 0;
            /* drop title down a bit */
            max-width: 500px;

            .h3leyend {
                font-family: 'Inter', system-ui, sans-serif;
                transform-style: Italic !important;
                color:#0B1A3D;
                font-size: 16px;
                opacity: .45;
            }
        }



        /* ============== INFO ICON STYLE =========== */

        /* Info icons + overlays (MAO style) */
        .info-icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 14px;
            height: 14px;
            margin-left: 4px;
            border-radius: 50%;
            background: #ffffff4d;
            color: #EAEEF6;
            font-size: 13px;
            font-weight: 400;
            cursor: pointer;
            position: relative;
            transition: background-color .25s ease, color .25s ease, transform .2s ease;
        }

        .info-icon:hover {
            background: #F05A28;
            color:#0B1A3D;
            transform: translateY(-1px);
        }

        .info {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .help-text {
            position: absolute;
            top: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            width: 380px;
            max-width: min(90vw, 420px);
            background: #FFFFFF;
            color:#0B1A3D;
            padding: 8px 12px;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, .35) !important;
            z-index: 9999;
            font-size: 14px;
            line-height: 1.4;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            user-select: text;
            transition: opacity .2s ease, transform .2s ease;
        }

        .help-text::before {
            content: "";
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-bottom-color: #FFFFFF;
        }

        .info:hover .help-text,
        .info:focus-within .help-text,
        .help-text:hover,
        .help-text:focus-within {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }


        /* ========== INPUT AND HEADERS FONT STYLE ==============*/

        /* === Match MAO label + input typography === */
        #fixAndFlipForm label,
        #hardMoneyCard label,
        #privateMoneyCard label {
            margin-top: 0;
            font-weight: bold;
            color: white;
            position: relative;
            display: inline-block;
            font-family: 'Inter', system-ui, sans-serif;
        }

        .lf-control {
            font-family: inherit;
            /* MAO lets controls inherit */
            font-size: 16px;
            /* MAO control size */
            font-weight: normal;
            /* MAO default */
            letter-spacing: normal;
            /* neutral tracking like MAO */
            font-family: 'Inter', system-ui, sans-serif;

        }

        input::placeholder {
            color: #cccccc74;
        }

        /* MAO placeholder tone */



        /* Preserve glass background + text color on browser autofill */
        .lf-control:-webkit-autofill,
        .lf-control:-webkit-autofill:hover,
        .lf-control:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--ctrl-fg) !important;
            caret-color: var(--ctrl-fg) !important;

            /* keep your gradient/tint instead of white/yellow autofill */
            background:
                linear-gradient(180deg, var(--ctrl-bg1), var(--ctrl-bg2)),
                var(--ctrl-tint) !important;

            /* nuke WebKit's painted layer so our background shows through */
            box-shadow: 0 0 0 1000px transparent inset !important;

            /* fallback trick: defer autofill paint */

        }

        /* Firefox autofill */
        .lf-control:-moz-autofill {
            color: var(--ctrl-fg) !important;
            background:
                linear-gradient(180deg, var(--ctrl-bg1), var(--ctrl-bg2)),
                var(--ctrl-tint) !important;
            box-shadow: 0 0 0 1000px transparent inset !important;
        }

        /* Make sure controls always use the same text paint channel */
        .lf-control {
            -webkit-text-fill-color: var(--ctrl-fg);
        }


        /* === FIX-FLIP-LAYOUT-01: lender section headings === */
        /* Side results: full width within their column */
        #hmlResultsCell .result-card,
        #pmlResultsCell .result-card {
            max-width: 100%;
            width: 100%;
            margin: 0 auto;
        }

        @media (max-width: 1200px) {

            #hmlResultsCell .result-card,
            #pmlResultsCell .result-card {
                max-width: 100%;
            }
        }

/* === lf-disable-menus === */
        nav,
        .navbar,
        .menu,
        .tabs,
        .tab-nav,
        .topnav,
        #tabs {
            display: none !important;
        }

/* === lf-autofill-natural-reset === */
        /* === Natural look for autofill & instant reset on blur/tab change === */
        .lf-control:-webkit-autofill,
        .lf-control:-webkit-autofill:hover,
        .lf-control:-webkit-autofill:focus {
            transition: none !important;
            -webkit-text-fill-color: var(--ctrl-fg, #eaf2f7) !important;
            caret-color: var(--ctrl-fg, #eaf2f7) !important;
            background:
                linear-gradient(180deg, var(--ctrl-bg1, rgba(11,26,61, .06)), var(--ctrl-bg2, rgba(11,26,61, .02))),
                var(--ctrl-tint, rgba(11,26,61, .35)) !important;
            -webkit-background-clip: padding-box !important;
            background-clip: padding-box !important;
            -webkit-box-shadow: 0 0 0 1000px rgba(11,26,61, .35) inset !important;
            box-shadow: 0 0 0 1000px rgba(11,26,61, .35) inset !important;
        }

        .lf-control:-webkit-autofill:not(:focus) {
            -webkit-box-shadow: 0 0 0 1000px rgba(11,26,61, .35) inset !important;
            box-shadow: 0 0 0 1000px rgba(11,26,61, .35) inset !important;
            transition: none !important;
        }

        .lf-autofill-reset input:-webkit-autofill,
        .lf-autofill-reset .lf-control:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px rgba(11,26,61, .35) inset !important;
            box-shadow: 0 0 0 1000px rgba(11,26,61, .35) inset !important;
            transition: none !important;
        }

/* === lf-autofill-lastwins === */
        /* === LAST-WINS AUTOFILL/REPAINT NEUTRALIZER (tab switch / visibility repaint) === */
        .lf-control,
        .select-wrap select.lf-control {
            background:
                linear-gradient(180deg, rgba(11,26,61, 0.06), rgba(11,26,61, 0.02)),
                rgba(11,26,61, 0.35) !important;
        }

        /* Blink/WebKit autofill + preview repaint (keeps glass theme) */
        .lf-control:-webkit-autofill,
        .lf-control:-webkit-autofill:hover,
        .lf-control:-webkit-autofill:focus,
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        select:-webkit-autofill {
            -webkit-text-fill-color:#0B1A3D !important;
            caret-color:#0B1A3D !important;
            background-color: transparent !important;
            background-image: none !important;
            box-shadow: inset 0 1px 0 rgba(11,26,61, 0.12),
                0 0 0 1000px rgba(11,26,61, 0.35) inset !important;
            -webkit-box-shadow: inset 0 1px 0 rgba(11,26,61, 0.12),
                0 0 0 1000px rgba(11,26,61, 0.35) inset !important;
            transition: background-color 99999s linear 0s, color 0s !important;
        }

        /* Firefox */
        input.lf-control:-moz-autofill,
        textarea.lf-control:-moz-autofill {
            box-shadow: none !important;
            background: transparent !important;
            color:#0B1A3D !important;
        }

        /* Enforce glass on focus after return from hidden tab */
        .lf-control:focus {
            background:
                linear-gradient(180deg, rgba(11,26,61, 0.10), rgba(11,26,61, 0.03)),
                rgba(11,26,61, 0.42) !important;
        }

        /* ============================================================
           2C-F - Responsive: tablet & mobile polish
           All rules below are additive max-width overrides.
           Desktop rules above this block are untouched.
           The primary fix (minmax 520px → 0) is applied inline above.
           ============================================================ */

        /* --- 768px: result card text compression --- */
        @media (max-width: 768px) {

            /* Result cards: reduce padding and font on phone */
            .result-card {
                padding: 14px 12px;
            }

            .result-card h3 {
                font-size: .9rem;
            }

            .result-card ul li {
                font-size: .8rem;
            }

            /* side results already max-width: 100% at 1200px - ensure no centering gap */
            #hmlResultsCell .result-card,
            #pmlResultsCell .result-card {
                margin: 0;
            }
        }

        /* --- 480px: body padding + title font size --- */
        @media (max-width: 480px) {

            body {
                padding: 12px 10px;
            }

            h1 {
                font-size: 1.5rem;
            }
        }

/* ===== GLOBAL-LAYOUT-03: ARV-style outer container ===== */
body {
    padding: 20px 20px 40px;
    box-sizing: border-box;
}

.ff-grid {
    background: rgba(11,26,61,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(11,26,61,0.18);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
    overflow: visible;
    padding: 0 16px 16px;
    margin: 0 auto 24px;
}

.ff-grid > h1 {
    grid-column: 1 / -1;
    margin: 0;
    padding: 9px 0 7px;
    text-align: center;
    border-bottom: 1px solid rgba(11,26,61,0.12);
}

/* ===== GLOBAL-LAYOUT-04: remove inner card nesting ===== */
/* Strip .results-table and .loan-card wrapper card styling */
.results-table {
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}

.loan-card {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ===== GLOBAL-LAYOUT-05: solid bg, consistent spacing, normalized h1 ===== */
.ff-grid {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
}

.ff-grid > h1 {
    padding: 9px 0 7px !important;
}

/* ===== GLOBAL-LAYOUT-06: uniform topbar spacing, uniform h1 size ===== */
body {
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 40px !important;
}

.ff-grid {
    margin-top: 0 !important;
}

.ff-grid > h1 {
    font-size: 2rem !important;
    padding: 9px 0 7px !important;
    border-bottom: 1px solid rgba(11,26,61,0.12) !important;
}

/* ===== FIX-FLIP-JS-01: force HML/PML elements always visible =====
   Overrides any inline style.display or classList.hidden set by JS.
   The inactive overlay (position:absolute) handles disabled visual state.
   ================================================================= */
#hmlPanelCell,
#pmlPanelCell,
#hmlResultsCell,
#pmlResultsCell,
#hardMoneyCard,
#privateMoneyCard,
#hardMoneyLenderFields,
#generalPrivateLenderFields,
.ff-hml-zone,
.ff-pml-zone {
    display: block !important;
    visibility: visible !important;
}

.ff-section3 {
    display: grid !important;
}

/* ===== FIX-FLIP-LAYOUT-10 ===================================== */

/* FIX 1: main calc grid — increase row-gap */
.ff-calc-grid {
    row-gap: 20px !important;
}

/* FIX 2: result cards — reduce vertical padding by ~half */
.result-card {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* FIX 3: main calculator panel — transparent bg, shadow ring */
.ff-main-calc {
    background: rgba(11,26,61, 0.04) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,90,40,0.15) !important;
}

/* FIX 4: lender calculator panels — transparent bg, shadow ring */
.ff-section3 {
    background: rgba(11,26,61, 0.04) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,90,40,0.15) !important;
    border: none !important;
}

/* ============================================================== */

/* ===== FIX-FLIP-LAYOUT-11 ===================================== */

/* FIX 1: toggle buttons as lender calculator panel headers */
.ff-panel-toggle {
    display: block;
    width: 100%;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 10px 10px 0 0;
    border: none;
    border-bottom: 1px solid rgba(11,26,61,0.1);
    background: rgba(0, 0, 0, 0.18);
    color:#0B1A3D;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-align: center;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
}

.ff-panel-toggle.ff-toggle-active {
    background: rgba(240,90,40, 0.14);
    color: #F05A28;
    border-bottom-color: rgba(240,90,40, 0.3);
}

.ff-panel-toggle.ff-toggle-inactive {
    color: rgba(11,26,61, .55);
    background: rgba(0, 0, 0, 0.1);
}

/* FIX 2: main calculator panel — more top/bottom padding (~50% increase) */
.ff-calc-grid {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}

/* FIX 3: lender section — less top/bottom padding (~40% reduction) */
.ff-section3 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.ff-lender-grid {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* FIX 4: HML/PML Details result cards — tighter header, less top padding */
#hml-results,
#pml-results {
    padding-top: 6px !important;
}

#hml-results .ff-card-header h3,
#pml-results .ff-card-header h3 {
    margin-bottom: 4px !important;
}

/* ============================================================== */

/* ===== FIX-FLIP-LAYOUT-13: rental-style layout + cost/profit/return charts ===== */

/* ── Section 1: 3-col (1fr 2fr 1fr), equal heights ── */
.ff-section1 {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

/* Side columns (lender calculator panels): flex column, full height */
.ff-col-left,
.ff-col-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: 100% !important;
}

/* Center column */
.ff-col-center {
    display: flex !important;
    flex-direction: column !important;
}

.ff-col-center .ff-main-calc {
    flex: 1 !important;
}

/* Section 1 lender zones: always visible, inactive = fade */
.ff-section1 .ff-hml-zone,
.ff-section1 .ff-pml-zone {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
}

.ff-section1 .ff-hml-zone.hml-inactive,
.ff-section1 .ff-pml-zone.pml-inactive {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* ── KPI band — Section 2 ── */
.ff-kpi-band {
    margin: 8px 0;
    padding: 12px 0;
    border-top: 1px solid rgba(240,90,40,0.2);
    border-bottom: 1px solid rgba(240,90,40,0.2);
}

.ff-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.ff-kpi-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 76px;
    padding: 8px 10px;
    border: 1px solid rgba(11,26,61,.22);
    border-radius: 14px;
    text-align: center;
    background: linear-gradient(135deg, rgba(11,26,61,.14), rgba(11,26,61,.06));
    backdrop-filter: blur(8px);
    box-sizing: border-box;
}

.ff-kpi-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(240,90,40,.35), 0 0 22px rgba(240,90,40,.15) inset;
    pointer-events: none;
}

.ff-kpi-label {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(10px, 0.85vw, 12px);
    line-height: 1.15;
    letter-spacing: .4px;
    color: #F05A28;
    opacity: .95;
}

.ff-kpi-value {
    margin-top: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(14px, 1.25vw, 18px);
    font-weight: 800;
    line-height: 1;
    color:#0B1A3D;
    text-shadow: 0 2px 4px rgba(0,0,0,.35);
}

/* ── Section 3: Results row (1fr 1fr 1fr), equal heights ── */
.ff-section3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Section 3 cards: uniform result-card style */
.ff-sec3-card {
    position: relative;
    background: rgba(11,26,61,0.04) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,90,40,0.15) !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(240,90,40,0.5) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Section 3 card title (Key Metrics + HML/PML Details) */
.ff-sec3-card-title,
.ff-sec3-card h3 {
    display: block !important;
    width: 100% !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    border-bottom: 1px solid rgba(11,26,61,0.1) !important;
    background: rgba(0,0,0,0.18) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    color: #F05A28 !important;
    box-sizing: border-box !important;
}

/* Result list inside Section 3 cards */
.ff-sec3-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    list-style: none;
    margin: 0;
    padding: 8px 14px;
}

.ff-sec3-list li {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(11,26,61,0.12);
    padding: 5px 0;
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: 0.2px;
    color:#0B1A3D;
}

.ff-sec3-list li:last-child { border-bottom: none; }

.ff-sec3-list li strong { color: #F05A28; font-weight: 700; }
.ff-sec3-list li span   { color:#0B1A3D;    font-weight: 700; }

/* HML/PML Details cards: inactive = fade + overlay */
.ff-section3 .ff-hml-zone,
.ff-section3 .ff-pml-zone {
    display: flex !important;
    visibility: visible !important;
}

.ff-section3 .ff-hml-zone.hml-inactive,
.ff-section3 .ff-pml-zone.pml-inactive {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* Inactive overlay inside Section 3 cards */
.ff-sec3-card .ff-inactive-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.ff-sec3-card .ff-inactive-overlay.ff-overlay-active {
    display: block;
}

/* ── Section 4: Charts row (1fr 1fr 1fr) ── */
.ff-section4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: stretch;
    margin-top: 8px;
}

.ff-chart-panel {
    background: rgba(11,26,61,0.04);
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,90,40,0.12);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ff-chart-title {
    padding: 10px 16px 8px;
    background: rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(11,26,61,0.08);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-align: center;
    text-transform: uppercase;
    color: #F05A28;
}

.ff-chart-wrap {
    flex: 1;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.ff-chart-wrap canvas {
    max-width: 100%;
    max-height: 220px;
}

.ff-chart-legend {
    padding: 8px 12px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: center;
    border-top: 1px solid rgba(11,26,61,0.07);
}

.ff-leg-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-family: 'Inter', system-ui, sans-serif;
    color: #f2f2f2;
}

.ff-leg-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ff-leg-val {
    color: #F05A28;
    font-weight: 700;
    margin-left: 3px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .ff-section1 {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }
    .ff-col-left,
    .ff-col-right {
        height: auto !important;
    }
    .ff-kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ff-section3,
    .ff-section4 {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }
}

@media (max-width: 600px) {
    .ff-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== FIX-FLIP-LAYOUT-14: HML/PML 1-col layout, fix bidirectional toggle ===== */

/* FIX 1: force single-column layout for both lender input grids in Section 1 */
.ff-section1 .ff-lender-grid,
.ff-section1 .ff-lender-grid-2x2,
.ff-section1 .ff-lender-grid-2x3 {
    grid-template-columns: 1fr !important;
}

/* ===== FIX-FLIP-LAYOUT-15: main calc 2-col ARV full width, PML 2-col ===== */

/* FIX 1: main calculator — 2 columns, ARV spans full width */
.ff-calc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* FIX-FLIP: ARV no span *
.ff-calc-grid .field:first-child {
    grid-column: 1 / -1;
}

/* FIX 2: PML side panel — 2 columns (overrides LAYOUT-14 1-col for PML only) */
.ff-section1 .ff-pml-zone .ff-lender-grid,
.ff-section1 .ff-pml-zone .ff-lender-grid-2x3 {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ===== FIX-FLIP-LAYOUT-16: HML 2-col to reduce height, fix bidirectional toggle ===== */

/* FIX 1: HML side panel — 2 columns (overrides LAYOUT-14 1-col) */
.ff-section1 .ff-hml-zone .ff-lender-grid,
.ff-section1 .ff-hml-zone .ff-lender-grid-2x2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Reduce vertical padding on HML panel to match PML */
.ff-section1 .ff-hml-zone .lender-section {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* ===== FIX-FLIP-LAYOUT-17: HML/PML details under calculators, Key Metrics chips ===== */

/* FIX 1: left/right columns are flex-column containers stacking calc + details */
.ff-col-left,
.ff-col-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    align-self: start !important;
}

/* Details cards directly inside columns (not in section 3 anymore) */
.ff-details-card {
    position: relative;
    background: rgba(11,26,61,0.04) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,90,40,0.15) !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(240,90,40,0.5) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Section 3: full-width Key Metrics only */
.ff-section3 {
    display: block !important;
}

.ff-key-metrics-card {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* FIX 2: Key Metrics chip row */
.ff-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px 12px;
    justify-content: flex-start;
}

.ff-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(240,90,40,0.25);
    min-width: 120px;
}

.ff-chip-label {
    font-size: 11px;
    color: #bfd0da;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
}

.ff-chip-value {
    font-size: 16px;
    color: #FC5E1E;
    font-weight: 900;
    margin-top: 4px;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Inactive overlay for details cards in columns */
.ff-details-card .ff-inactive-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.ff-details-card .ff-inactive-overlay.ff-overlay-active {
    display: block;
}

/* Inactive fade for lender zones inside columns */
.ff-col-left .ff-hml-zone.hml-inactive,
.ff-col-right .ff-pml-zone.pml-inactive {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* ===== FIX-FLIP-LAYOUT-18: wider container, 3-col main calc, results below side panels ===== */

/* FIX 1: remove max-width cap on outer container */
.ff-grid {
    max-width: none !important;
    width: calc(100% - 40px) !important;
}

/* FIX 2: main calculator — 3 columns, ARV full width */
.ff-calc-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* FIX-FLIP: ARV no span *
.ff-calc-grid .field:first-child {
    grid-column: 1 / -1 !important;
}

/* FIX 3: Section 1 — 1fr 2fr 1fr, side columns flex-column with gap */
.ff-section1 {
    grid-template-columns: 1fr 2fr 1fr !important;
    align-items: start !important;
}

.ff-col-left,
.ff-col-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    align-self: start !important;
}

/* FIX-FLIP: true 3x3 grid, remove ARV span */
.ff-calc-grid .field:first-child {
    grid-column: auto !important;
}

/* FIX-FLIP: Closing Details header, shadows on HML/PML panels */

/* Static title for main calc panel (no toggle, same visual as ff-panel-toggle) */
.ff-panel-title {
    cursor: default !important;
    pointer-events: none !important;
    background: rgba(240,90,40, 0.14) !important;
    color: #F05A28 !important;
    border-bottom-color: rgba(240,90,40, 0.3) !important;
}

/* Shadow on HML and PML calculator side panels */
#hmlPanelCell,
#pmlPanelCell {
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,90,40,0.15) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* ===== FIX-FLIP-RESULTS-01: 4 styled result cards ===== */

/* Section 3: 2-col for Cards 1 & 2 */
.ff-section3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

/* Base result card */
.ff-result-card {
    position: relative;
    border: 2px solid #FC5E1E;
    border-radius: 12px;
    background: rgba(10,30,48,0.7);
    padding: 18px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ff-result-card .ff-inactive-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.ff-result-card .ff-inactive-overlay.ff-overlay-active {
    display: block;
}

/* Inactive fade for result cards in columns */
.ff-hml-zone.hml-inactive.ff-result-card,
.ff-pml-zone.pml-inactive.ff-result-card {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

.ff-result-card-header {
    color: #FC5E1E;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.ff-result-main-metric-label {
    font-size: 10px;
    color: #bfd0da;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Inter', system-ui, sans-serif;
    margin-bottom: 2px;
}

.ff-result-main-value {
    font-size: 28px;
    font-weight: 900;
    color:#0B1A3D;
    font-family: 'Inter', system-ui, sans-serif;
    margin-bottom: 14px;
}

.ff-result-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.ff-result-chip {
    background: rgba(11,26,61,0.07);
    border: 1px solid rgba(240,90,40,0.2);
    border-radius: 20px;
    padding: 6px 14px;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ff-result-chip .ff-chip-label {
    font-size: 10px;
    color: #bfd0da;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: 'Inter', system-ui, sans-serif;
}

.ff-result-chip .ff-chip-value {
    font-size: 14px;
    color: #FC5E1E;
    font-weight: 900;
    margin-top: 2px;
    font-family: 'Inter', system-ui, sans-serif;
}

@media (max-width: 900px) {
    .ff-section3 {
        grid-template-columns: 1fr !important;
    }
}

/* ===== FIX-FLIP-RESULTS-02: 4 cards 1 row, Rehab card style applied ===== */

/* Section 3: 4-col single row */
.ff-section3 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
}

/* Result card — exact rehab .results-panel style */
.ff-result-card {
    position: relative;
    box-shadow: 0 0 10px 2px #F05A28 !important;
    background-color: #FFFFFF !important;
    color: white !important;
    padding: 14px 12px !important;
    border: 2px solid #F05A28 !important;
    border-radius: 15px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Inactive overlay inside result cards */
.ff-result-card .ff-inactive-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.ff-result-card .ff-inactive-overlay.ff-overlay-active { display: block; }

/* Inactive fade for HML/PML result cards */
.ff-hml-zone.hml-inactive.ff-result-card,
.ff-pml-zone.pml-inactive.ff-result-card {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* Card header — alfarn, orange, bold */
.ff-result-card .ff-result-card-header {
    font-family: 'Montserrat', sans-serif !important;
    color: #F05A28 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 0 4px !important;
    text-align: center !important;
}

/* Sub-label above main value */
.ff-result-main-metric-label {
    font-size: 10px !important;
    color: rgba(11,26,61,0.6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    margin: 0 0 2px !important;
}

/* Main value — large, white, bold */
.ff-result-card .ff-result-main-value {
    font-size: 22px !important;
    font-weight: 900 !important;
    color:#0B1A3D !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    margin: 0 0 12px !important;
}

/* Chips row */
.ff-result-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Individual chip */
.ff-result-chip {
    background: rgba(11,26,61,0.07) !important;
    border: 1px solid rgba(240,90,40,0.3) !important;
    border-radius: 20px !important;
    padding: 5px 10px !important;
    min-width: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.ff-result-chip .ff-chip-label {
    font-size: 9px !important;
    color: rgba(11,26,61,0.65) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

.ff-result-chip .ff-chip-value {
    font-size: 13px !important;
    color: #F05A28 !important;
    font-weight: 900 !important;
    margin-top: 2px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

@media (max-width: 1100px) {
    .ff-section3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .ff-section3 { grid-template-columns: 1fr !important; }
}

/* ===== FIX-FLIP-RESULTS-03: remove KPI band, Rehab-style chips and main value ===== */

/* Hide KPI band (removed from HTML but guard against any residual) */
.ff-kpi-band { display: none !important; }

/* Main metric value — exact rehab .results-panel p / strong sizing */
.ff-result-card .ff-result-main-value {
    font-size: 25px !important;
    font-weight: bold !important;
    color: #F05A28 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    margin: 0 0 12px !important;
}

/* Chips — exact rehab .results-row-3 .result-item style */
.ff-result-chip {
    background: rgba(11,26,61,0.05) !important;
    border: 1px solid rgba(11,26,61,0.15) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    min-width: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: none !important;
}

/* Chip label — exact rehab .results-row-3 .result-item h4 */
.ff-result-chip .ff-chip-label {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #F05A28 !important;
    text-transform: uppercase !important;
    margin: 0 0 4px !important;
}

/* Chip value — exact rehab .results-row-3 .result-item p */
.ff-result-chip .ff-chip-value {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 1.1em !important;
    font-weight: 400 !important;
    color:#0B1A3D !important;
    margin-top: 0 !important;
}

/* ===== FIX-FLIP-RESULTS-04: margin above results, exact Rehab card style ===== */

/* FIX 1: margin above results row */
.ff-section3 {
    margin-top: 20px !important;
}

/* FIX 2: exact Rehab .results-panel outer wrapper */
.ff-result-card {
    box-shadow: 0 0 10px 2px #F05A28 !important;
    background-color: #FFFFFF !important;
    color: white !important;
    padding: 10px !important;
    border: 2px solid #F05A28 !important;
    border-radius: 15px !important;
    text-align: center !important;
}

/* Exact Rehab h2 (card header) */
.ff-result-card .ff-result-card-header {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #F05A28 !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    text-transform: none !important;
}

/* Sub-label above main value */
.ff-result-main-metric-label {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(11,26,61,0.6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 4px 0 2px !important;
}

/* Exact Rehab main value span (font-weight:bold; font-size:1.2em of h2≈21.6px; color:#0B1A3D) */
.ff-result-card .ff-result-main-value {
    font-size: 1.2em !important;
    font-weight: bold !important;
    color:#0B1A3D !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* Exact Rehab .results-row-3 chips container */
.ff-result-chips {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 15px !important;
    width: 100% !important;
}

/* Exact Rehab .results-row-3 .result-item individual chip */
.ff-result-chip {
    background: rgba(11,26,61,0.05) !important;
    border: 1px solid rgba(11,26,61,0.15) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: none !important;
}

/* Exact Rehab .result-item h4 chip label */
.ff-result-chip .ff-chip-label {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #F05A28 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin: 0 0 6px 0 !important;
}

/* Exact Rehab .result-item p chip value */
.ff-result-chip .ff-chip-value {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 1.1em !important;
    font-weight: 400 !important;
    color:#0B1A3D !important;
    margin-top: 0 !important;
}

/* ===== FIX-FLIP-RESULTS-05: card order, ARV chip style, proportional zoom ===== */

/* FIX 2: ARV .compact-metrics .metric-card chip style — exact values */
.ff-result-chip {
    background: rgba(11,26,61,0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 15px !important;
    padding: 15px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    border: 1px solid rgba(11,26,61,0.1) !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

/* ARV .metric-card h4 — chip label */
.ff-result-chip .ff-chip-label {
    color: #F05A28 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
}

/* ARV .metric-value — chip value */
.ff-result-chip .ff-chip-value {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: white !important;
    margin-top: 0 !important;
    font-family: inherit !important;
}

/* FIX 3: proportional zoom — outer container */
.ff-grid {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 0 20px 40px !important;
    margin: 0 auto !important;
}

/* Section 1: percentage-based, no fixed pixel widths */
.ff-section1 {
    width: 100% !important;
    grid-template-columns: 1fr 2fr 1fr !important;
    box-sizing: border-box !important;
}

.ff-col-left,
.ff-col-right,
.ff-col-center {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Section 3: proportional 4-col */
.ff-section3 {
    width: 100% !important;
    grid-template-columns: repeat(4, 1fr) !important;
    box-sizing: border-box !important;
}

/* ===== FIX-FLIP-RESULTS-06: fix HML/PML field overflow, ARV KPI chip style ===== */

/* FIX 1: HML/PML panel field labels — wrap instead of overflow */
#hmlPanelCell .field label,
#pmlPanelCell .field label,
#hardMoneyLenderFields .field label,
#generalPrivateLenderFields .field label {
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
}

/* HML/PML inputs never force column wider */
#hmlPanelCell .lf-control,
#pmlPanelCell .lf-control,
#hardMoneyLenderFields .lf-control,
#generalPrivateLenderFields .lf-control {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Panel wrappers: contain overflow */
#hmlPanelCell,
#pmlPanelCell {
    overflow: hidden !important;
}

/* FIX 2: ARV .kpi-card style applied to result chips */

/* Chip outer — exact ARV .kpi-card */
.ff-result-chip {
    position: relative !important;
    background: linear-gradient(135deg, rgba(11,26,61,.14), rgba(11,26,61,.06)) !important;
    border: 1px solid rgba(11,26,61,.22) !important;
    border-radius: 16px !important;
    padding: 9px 8px !important;
    text-align: center !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.30), 0 0 0 1px rgba(11,26,61,.06) inset !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: none !important;
}

/* Pseudo-element gold ring — exact ARV .kpi-card::before */
.ff-result-chip::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 16px !important;
    pointer-events: none !important;
    box-shadow: 0 0 0 1px rgba(240,90,40,.35), 0 0 22px rgba(240,90,40,.15) inset !important;
}

/* Chip label — exact ARV .kpi-label */
.ff-result-chip .ff-chip-label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    letter-spacing: .5px !important;
    color: #F05A28 !important;
    opacity: .95 !important;
    text-transform: none !important;
    font-weight: normal !important;
    margin-bottom: 0 !important;
}

/* Chip value — exact ARV .kpi-value */
.ff-result-chip .ff-chip-value {
    margin-top: 6px !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color:#0B1A3D !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}

/* ===== FIX-FLIP-RESPONSIVE-01: proportional clamp() scaling, min-width scroll ===== */

/* STEP 1: min-width so layout never reflows, horizontal scroll below threshold */
body {
    overflow-x: auto !important;
}

.ff-grid {
    min-width: 900px !important;
}

/* STEP 2: clamp() font sizes */

/* Page h1 */
.ff-grid > h1 {
    font-size: clamp(20px, 2.5vw, 36px) !important;
}

/* Field labels (calculator inputs) */
.ff-calc-grid .field label {
    font-size: clamp(9px, 1vw, 13px) !important;
}

/* Input/select values */
.ff-calc-grid .lf-control {
    font-size: clamp(12px, 1.2vw, 15px) !important;
}

/* HML/PML field labels */
#hmlPanelCell .field label,
#pmlPanelCell .field label,
#hardMoneyLenderFields .field label,
#generalPrivateLenderFields .field label {
    font-size: clamp(9px, 1vw, 11px) !important;
}

/* HML/PML inputs */
#hmlPanelCell .lf-control,
#pmlPanelCell .lf-control,
#hardMoneyLenderFields .lf-control,
#generalPrivateLenderFields .lf-control {
    font-size: clamp(11px, 1.1vw, 14px) !important;
}

/* Panel toggle/heading buttons */
.ff-panel-toggle {
    font-size: clamp(11px, 1.3vw, 15px) !important;
}

/* Result card title */
.ff-result-card .ff-result-card-header {
    font-size: clamp(14px, 1.5vw, 20px) !important;
}

/* Result card main value */
.ff-result-card .ff-result-main-value {
    font-size: clamp(18px, 2vw, 28px) !important;
}

/* Chip label */
.ff-result-chip .ff-chip-label {
    font-size: clamp(9px, 0.9vw, 12px) !important;
}

/* Chip value */
.ff-result-chip .ff-chip-value {
    font-size: clamp(12px, 1.2vw, 16px) !important;
}

/* STEP 3: clamp() padding and gaps */

.ff-section1 {
    gap: clamp(8px, 1vw, 16px) !important;
}

.ff-section3 {
    gap: clamp(8px, 1vw, 16px) !important;
}

/* Lender panel padding */
#hmlPanelCell .lender-section,
#pmlPanelCell .lender-section {
    padding: clamp(10px, 1.2vw, 20px) !important;
}

/* Calc grid internal padding */
.ff-calc-grid {
    padding: clamp(10px, 1.2vw, 20px) !important;
}

/* Result card padding */
.ff-result-card {
    padding: clamp(10px, 1.2vw, 18px) !important;
}

/* Chip padding */
.ff-result-chip {
    padding: clamp(4px, 0.5vw, 8px) clamp(8px, 1vw, 14px) !important;
}

/* STEP 4: chip min-width proportional */
.ff-result-chip {
    min-width: clamp(70px, 8vw, 120px) !important;
}

/* ===== FIX-FLIP-POLISH-01: uniform card titles, bigger main label white, Enable/Disable toggle btn ===== */

/* FIX 1: uniform result card header — all 4 cards identical */
.ff-result-card .ff-result-card-header,
.ff-result-card h2.ff-result-card-header {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(14px, 1.5vw, 20px) !important;
    font-weight: 500 !important;
    color: #F05A28 !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;
    text-transform: none !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 0 6px !important;
}

/* FIX 2: main metric sub-label — bigger and white */
.ff-result-main-metric-label {
    font-size: clamp(13px, 1.4vw, 17px) !important;
    color:#0B1A3D !important;
    font-weight: 700 !important;
}

/* FIX 3: panel header row — title + button side by side */
.ff-panel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: rgba(0,0,0,0.18);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid rgba(11,26,61,0.1);
    box-sizing: border-box;
}

/* Panel title text (static, not a button) */
.ff-panel-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(11px, 1.3vw, 15px);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #F05A28;
}

/* Enable/Disable pill button */
.ff-enable-btn {
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Active state: enabled → shows "Disable" */
.ff-enable-btn--active {
    background: rgba(240,90,40,0.15);
    border: 1px solid #FC5E1E;
    color: #FC5E1E;
}

/* Inactive state: disabled → shows "Enable" */
.ff-enable-btn--inactive {
    background: rgba(100,100,100,0.2);
    border: 1px solid rgba(11,26,61,0.2);
    color: #bfd0da;
}

/* Remove old ff-panel-toggle button styles from panel cells
   (the .ff-panel-title div replaces it) */
#hmlPanelCell .ff-panel-toggle,
#pmlPanelCell .ff-panel-toggle {
    display: none !important;
}

/* ===== FIX-FLIP-POLISH-02: fix toggle re-enable z-index, restore panel headers ===== */

/* FIX 1: header row always clickable above any opacity/pointer-events rule */
.ff-panel-header-row {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: all !important;
}

.ff-enable-btn {
    position: relative !important;
    z-index: 11 !important;
    pointer-events: all !important;
    cursor: pointer !important;
}

/* When zone is inactive, only suppress pointer-events on the fields, not the header */
.ff-hml-zone.hml-inactive .loan-card,
.ff-pml-zone.pml-inactive .loan-card {
    pointer-events: none !important;
    opacity: 0.4 !important;
}

/* Override the blanket pointer-events:none applied to inactive zones */
.ff-hml-zone.hml-inactive,
.ff-pml-zone.pml-inactive {
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* FIX 2+3: center panel header row — same visual as HML/PML header rows */
.ff-panel-header-row--center {
    justify-content: center !important;
}

.ff-panel-header-row--center .ff-panel-title {
    color: #F05A28 !important;
}

/* ===== FIX-FLIP-POLISH-03: uniform headers+borders, toggle always visible, recalc on toggle ===== */

/* FIX 1+2: uniform panel header and container style across all 3 panels */
#hmlPanelCell,
#pmlPanelCell,
#centerPanelCell {
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,90,40,0.15) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: rgba(11,26,61,0.04) !important;
}

/* All three panel header rows: identical style */
#hmlPanelCell .ff-panel-header-row,
#pmlPanelCell .ff-panel-header-row,
#centerPanelCell .ff-panel-header-row {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    background: rgba(0,0,0,0.18) !important;
    border-radius: 10px 10px 0 0 !important;
    border-bottom: 1px solid rgba(11,26,61,0.1) !important;
    box-sizing: border-box !important;
}

/* FIX 3: header row always on top, button always clickable */
.ff-panel-header-row {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: all !important;
}

.ff-enable-btn {
    position: relative !important;
    z-index: 21 !important;
    pointer-events: all !important;
    cursor: pointer !important;
}

/* Inactive scoped ONLY to loan-card (inputs), never header */
.ff-loancard-inactive {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* Remove the blanket inactive opacity from entire zone in calculator panels */
.ff-section1 .ff-hml-zone.hml-inactive,
.ff-section1 .ff-pml-zone.pml-inactive {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ===== FIX-FLIP-POLISH-04: charts margin, real-time toggle recalc ===== */

/* FIX 1: space above charts section */
.ff-section4 {
    margin-top: 24px !important;
}

/* FIX-FLIP: uniform border on all panels matching Fix & Flip Details */
#ffCostBreakdownPanel,
#ffProfitWaterfallPanel,
#ffReturnMetricsPanel {
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,90,40,0.15) !important;
    border-radius: 10px !important;
}

/* FIX-FLIP: force exact border from Fix & Flip Details to all 5 panels */
/* Source: .ff-main-calc border = 1px solid rgba(11,26,61,0.1)       */
/* Source: #centerPanelCell box-shadow = 0 4px 24px rgba(0,0,0,0.35),  */
/*         0 0 0 1px rgba(240,90,40,0.15)                              */
#hmlPanelCell,
#pmlPanelCell,
#ffCostBreakdownPanel,
#ffProfitWaterfallPanel,
#ffReturnMetricsPanel {
    border: 1px solid rgba(11,26,61,0.1) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,90,40,0.15) !important;
}

/* ===== FIX-FLIP-RESULTS-07: merge center cards, main metric chip, metrics list layout ===== */

/* Section 3: 1fr 2fr 1fr — HML | merged center | PML */
.ff-section3 {
    grid-template-columns: 1fr 2fr 1fr !important;
}

/* Split card container */
.ff-result-card--split {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

.ff-split-left,
.ff-split-right {
    flex: 1;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
}

.ff-split-divider {
    width: 1px;
    background: rgba(240,90,40, 0.25);
    align-self: stretch;
    flex-shrink: 0;
}

/* Main metric chip */
.ff-main-chip {
    background: rgba(240,90,40, 0.08);
    border: 1px solid rgba(240,90,40, 0.45);
    border-radius: 12px;
    padding: 10px 14px;
    text-align: center;
    margin: 8px 0 12px;
    box-shadow: 0 0 10px rgba(240,90,40, 0.12);
}

.ff-main-chip-value {
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 900;
    color:#0B1A3D;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Result main label (subtitle above chip) */
.ff-result-main-label {
    font-size: clamp(9px, 0.9vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(11,26,61,0.6);
    text-align: center;
    margin: 4px 0 0;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Metrics list */
.ff-metrics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ff-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(240,90,40, 0.10);
}

.ff-metric-row:last-child {
    border-bottom: none;
}

.ff-metric-label {
    font-size: clamp(9px, 0.9vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #FC5E1E;
    font-family: 'Inter', system-ui, sans-serif;
}

.ff-metric-value {
    font-size: clamp(11px, 1.1vw, 13px);
    font-weight: 700;
    color:#0B1A3D;
    font-family: 'Inter', system-ui, sans-serif;
}

/* HML/PML outer cards: flex-column for chip + list alignment */
.ff-hml-zone.ff-result-card,
.ff-pml-zone.ff-result-card {
    align-items: stretch !important;
}

/* Old chip/result styles kept for safety — commented out
.ff-result-chips { ... }
.ff-result-chip { ... }
.ff-chip-label { ... }
.ff-chip-value { ... }
.ff-result-main-value { ... }
.ff-result-main-metric-label { ... }
*/

@media (max-width: 1100px) {
    .ff-section3 {
        grid-template-columns: 1fr !important;
    }
    .ff-result-card--split {
        flex-direction: column !important;
    }
    .ff-split-divider {
        width: auto !important;
        height: 1px !important;
    }
}

/* ===== FIX-FLIP-RESULTS-08: center fields narrower, list no-caps, ARV glass main chip ===== */

/* FIX 1: Center panel inputs/selects — constrained width to match HML/PML visual size */
/* HML/PML inputs are width:100% within 1fr columns; center is 2fr so inputs are ~2x wider */
/* Cap center panel inputs at 220px to match HML/PML rendered width */
#centerPanelCell .lf-control,
.ff-col-center .ff-calc-grid .lf-control {
    max-width: 220px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* FIX 2: Metrics list labels — remove uppercase, refined style */
.ff-metric-label {
    text-transform: none !important;
    font-size: clamp(10px, 1vw, 12px) !important;
    font-weight: 600 !important;
    color: #FC5E1E !important;
    letter-spacing: 0.01em !important;
}

/* FIX 3: Main metric chip — ARV .kpi-card exact glass style */
/* Replaces the previous rgba(240,90,40,0.08) chip background */
.ff-main-chip {
    position: relative !important;
    background: linear-gradient(135deg, rgba(11,26,61, .14), rgba(11,26,61, .06)) !important;
    border: 1px solid rgba(11,26,61, .22) !important;
    border-radius: 16px !important;
    padding: 9px 8px !important;
    text-align: center !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .30), 0 0 0 1px rgba(11,26,61, .06) inset !important;
    margin: 8px 0 12px !important;
}

/* ARV .kpi-card::before — orange ring glow */
.ff-main-chip::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 16px !important;
    pointer-events: none !important;
    box-shadow: 0 0 0 1px rgba(240,90,40, .35), 0 0 22px rgba(240,90,40, .15) inset !important;
}

/* ARV .kpi-value — large white bold value */
.ff-main-chip-value {
    font-size: clamp(20px, 2.2vw, 30px) !important;
    font-weight: 800 !important;
    color:#0B1A3D !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .35) !important;
}

/* ===== FIX-FLIP-RESULTS-09: tighter center column, subtitle inside main chip ===== */

/* FIX 1: Section 1 — tighter center column (was 1fr 2fr 1fr) */
.ff-section1 {
    grid-template-columns: 1fr 1.4fr 1fr !important;
}

/* FIX 2: Main chip — flex column with subtitle label inside */
.ff-main-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}

/* Subtitle label inside the chip (orange uppercase) */
.ff-main-chip-label {
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FC5E1E;
    display: block;
    text-align: center;
    margin-bottom: 4px;
}

/* Standalone .ff-result-main-label no longer used — hide if any residual */
.ff-result-main-label {
    display: none !important;
}

/* ===== FIX-FLIP-LAYOUT-01: HML field reorder, row alignment, result cols match calculator cols ===== */

/* FIX 1: HML grid — 2-col, rows: LTV full | Fees full | Origination + Rate */
.ff-section1 .ff-hml-zone .ff-lender-grid,
.ff-section1 .ff-hml-zone .ff-lender-grid-2x2 {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 16px !important;
}

/* LTV and Additional Fees span full width (rows 1 and 2) */
.ff-hml-field-ltv,
.ff-hml-field-fees {
    grid-column: 1 / -1 !important;
}

/* Origination and Rate stay in their natural 2-col cells (row 3) */
.ff-hml-field-origination { grid-column: 1 !important; }
.ff-hml-field-rate         { grid-column: 2 !important; }

/* FIX 2: Unified row-gap across all 3 panel grids for row-by-row alignment */
.ff-calc-grid {
    row-gap: 16px !important;
}

.ff-section1 .ff-pml-zone .ff-lender-grid,
.ff-section1 .ff-pml-zone .ff-lender-grid-2x3 {
    row-gap: 16px !important;
}

/* Section 1: align-items start so panels don't stretch to equal height */
.ff-section1 {
    align-items: start !important;
}

/* FIX 3: Section 3 result cols mirror Section 1 calculator cols (1fr 1.4fr 1fr) */
.ff-section3 {
    grid-template-columns: 1fr 1.4fr 1fr !important;
}

/* ===== FIX-FLIP-POLISH-05: shrink chips/card height, uniform tight field labels matching Rehab ===== */

/* FIX 1: Shrink main metric chips and tighten card spacing */
.ff-main-chip {
    padding: 6px 12px !important;
    margin: 4px 0 8px !important;
    border-radius: 10px !important;
}

.ff-main-chip-label {
    font-size: clamp(8px, 0.75vw, 10px) !important;
    margin-bottom: 2px !important;
}

.ff-main-chip-value {
    font-size: clamp(16px, 1.8vw, 22px) !important;
}

.ff-result-card,
.ff-split-left,
.ff-split-right {
    padding: 10px 14px !important;
}

.ff-result-card-header {
    margin-bottom: 2px !important;
    font-size: clamp(12px, 1.2vw, 15px) !important;
}

.ff-metric-row {
    padding: 3px 0 !important;
}

.ff-metrics-list {
    gap: 0 !important;
}

/* FIX 2: Uniform tight field labels matching Rehab (margin-bottom: 3px, margin-top: 0) */
/* Rehab source: label { margin-bottom: 3px; } + #rehabForm label { margin-top: 0; } */
/* HTML uses plain <label> elements inside .field wrappers across all 3 panels */
.ff-hml-zone .field label,
.ff-pml-zone .field label,
.ff-col-center .field label,
.ff-calc-grid .field label,
.ff-lender-grid .field label {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
    display: block !important;
}

/* ===== FIX-FLIP-POLISH-07: wider center column, narrower sides, matched padding, larger HML/PML labels ===== */

/* FIX 1: Both grids updated together — 0.75fr 2fr 0.75fr */
/* Section 1: calculator panels */
.ff-section1 {
    grid-template-columns: 0.75fr 2fr 0.75fr !important;
}

/* Section 3: result cards — mirrors Section 1 exactly */
.ff-section3 {
    grid-template-columns: 0.75fr 2fr 0.75fr !important;
}

/* FIX 2: HML/PML lender-section padding matches center panel calc-grid padding */
/* Center panel inner padding: clamp(10px, 1.2vw, 20px) from .ff-calc-grid */
/* HML/PML wrapper: .lender-section inside #hardMoneyLenderFields / #generalPrivateLenderFields */
#hmlPanelCell .lender-section,
#pmlPanelCell .lender-section {
    padding-top: clamp(10px, 1.2vw, 20px) !important;
    padding-bottom: clamp(10px, 1.2vw, 20px) !important;
}

/* FIX 3: Larger HML/PML field labels (was clamp(9px, 1vw, 11px)) */
.ff-hml-zone .field label,
.ff-hml-zone .ff-field-label,
.ff-pml-zone .field label,
.ff-pml-zone .ff-field-label {
    font-size: clamp(11px, 1.05vw, 13px) !important;
}

/* ===== FIX-FLIP-POLISH-08: center fields full width, PML/HML label overflow fix, row alignment ===== */

/* FIX 1: Center panel inputs fill full column width — remove 220px cap from RESULTS-08 */
#centerPanelCell .lf-control,
.ff-col-center .ff-calc-grid .lf-control {
    max-width: 100% !important;
    width: 100% !important;
}

/* Center panel internal field grid: full width, 3 equal columns */
.ff-calc-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
}

/* FIX 2: HML label overflow — ellipsis, no wrap */
.ff-hml-zone label,
.ff-hml-zone .ff-field-label {
    font-size: clamp(9px, 0.85vw, 11px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
}

/* PML label overflow — ellipsis, no wrap */
.ff-pml-zone label,
.ff-pml-zone .ff-field-label {
    font-size: clamp(9px, 0.85vw, 11px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
}

/* FIX-FLIP-FIX-04: HML/PML labels containing a tooltip must not clip .help-text */
.ff-hml-zone label:has(.info),
.ff-pml-zone label:has(.info) {
    overflow: visible !important;
}

/* HML/PML inputs: never force column wider */
.ff-hml-zone input,
.ff-hml-zone select,
.ff-pml-zone input,
.ff-pml-zone select {
    width: 100% !important;
    min-width: 0 !important;
}

/* FIX 3: Section 1 align-items start (already set, reinforce) */
.ff-section1 {
    align-items: start !important;
}

/* Unified row-gap across all three panel internal grids */
/* Center: .ff-calc-grid | HML: .ff-lender-grid-2x2 | PML: .ff-lender-grid-2x3 */
.ff-calc-grid,
.ff-section1 .ff-hml-zone .ff-lender-grid,
.ff-section1 .ff-pml-zone .ff-lender-grid {
    row-gap: 14px !important;
}

/* ===== FIX-FLIP-POLISH-09: rebalance columns, cap center fields, fix PML label clamp ===== */

/* FIX 1: Both grids — 0.9fr 1.6fr 0.9fr */
.ff-section1 {
    grid-template-columns: 0.9fr 1.6fr 0.9fr !important;
}

.ff-section3 {
    grid-template-columns: 0.9fr 1.6fr 0.9fr !important;
}

/* FIX 2: Cap center panel inputs at 180px */
#centerPanelCell .lf-control,
.ff-col-center .ff-calc-grid .lf-control {
    max-width: 180px !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Center panel internal grid stays 3 columns */
.ff-calc-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* FIX 3: HML/PML labels — 2-line clamp, smaller font, tight spacing */
.ff-hml-zone label,
.ff-hml-zone .ff-field-label,
.ff-pml-zone label,
.ff-pml-zone .ff-field-label {
    font-size: clamp(8px, 0.78vw, 10px) !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

/* FIX-FLIP-FIX-04: re-assert tooltip labels are not clipped (overrides FIX 3 above) */
.ff-hml-zone label:has(.info),
.ff-pml-zone label:has(.info) {
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
}

/* HML/PML inputs: fully contained within column */
.ff-hml-zone input,
.ff-hml-zone select,
.ff-pml-zone input,
.ff-pml-zone select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ===== FIX-FLIP-POLISH-10: center fields full width, rename labels, remove colons ===== */

/* FIX 1: Remove 180px cap — center panel inputs fill their 1fr column */
#centerPanelCell .lf-control,
.ff-col-center .ff-calc-grid .lf-control {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* ===== FIX-FLIP: center panel fields box-sizing fix, no overflow ===== */
/* Center panel container: .ff-main-calc / #centerPanelCell */
/* Internal field grid: .ff-calc-grid */

/* Panel container: no clipping, border-box sizing */
.ff-main-calc,
#centerPanelCell {
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Internal grid: box-sizing so padding doesn't add to width */
.ff-calc-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow: hidden !important;
}

/* FIX-FLIP-FIX-04: allow tooltip .help-text to escape container clip boundaries */
.ff-main-calc:has(.info),
#centerPanelCell:has(.info),
.ff-calc-grid:has(.info),
#hmlPanelCell:has(.info),
#pmlPanelCell:has(.info),
.ff-hml-zone:has(.info),
.ff-pml-zone:has(.info) {
    overflow: visible !important;
}

/* Center panel inputs/selects: fully contained */
#centerPanelCell .lf-control,
.ff-col-center .ff-calc-grid .lf-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}