/* ═══════════════════════════════════════════════════════════════
   home-loan.css — Home Loan specific styles ONLY
   Requires: calc-global.css
═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────
   LTV TAG
────────────────────────────────────── */

.hl-ltv{
    background:#dcfce7;
    color:#15803d;
    border:1px solid #bbf7d0;
}


/* ──────────────────────────────────────
   DOWN PAYMENT ROW
────────────────────────────────────── */

.hl-dp-row{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin-bottom:.65rem;
}

.hl-dp-col{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:.35rem;
    min-width:0;
}

.hl-dp-col--pct{
    flex:0 0 90px;
}

.hl-dp-sublbl{
    font-size:.72rem;
    font-weight:600;
    color:var(--slate,#64748b);
}

.hl-dp-sep{
    font-size:.72rem;
    font-weight:600;
    color:var(--slate,#64748b);
    padding-bottom:.55rem;
    flex-shrink:0;
}


/* ──────────────────────────────────────
   DOWN PAYMENT FIELD
────────────────────────────────────── */

.hl-dp-field{
    display:flex;
    align-items:center;

    height:38px;

    background:var(--slate-light,#f1f5f9);

    border:1.5px solid var(--slate-line,#e2e8f0);
    border-radius:var(--r-sm,10px);

    overflow:hidden;

    transition:
        border-color .2s,
        box-shadow .2s,
        background .2s;
}

.hl-dp-field:focus-within{
    border-color:var(--navy,#0D2545);

    background:#fff;

    box-shadow:0 0 0 3px rgba(13,37,69,.08);
}

.hl-dp-pfx,
.hl-dp-sfx{
    padding:0 .45rem 0 .6rem;

    font-size:.75rem;
    font-weight:700;

    color:var(--slate,#64748b);

    user-select:none;
    white-space:nowrap;

    flex-shrink:0;
}

.hl-dp-sfx{
    padding:0 .6rem 0 .3rem;
}

.hl-dp-inp{
    flex:1;

    width:0;
    min-width:0;

    border:none;
    outline:none;

    background:transparent;

    color:var(--ink,#0f172a);

    font-size:.83rem;
    font-weight:600;

    text-align:center;

    font-family:var(--font-body,'Inter',sans-serif);

    padding:0 .25rem;
}

.hl-dp-inp::-webkit-inner-spin-button{
    display:none;
}


/* ──────────────────────────────────────
   LTV BAR
────────────────────────────────────── */

.hl-ltv-track{
    height:6px;

    margin-bottom:4px;

    background:var(--slate-line,#e2e8f0);

    border-radius:3px;

    overflow:hidden;
}

.hl-ltv-fill{
    height:100%;

    border-radius:3px;

    background:linear-gradient(
        90deg,
        #15803d,
        #22c55e
    );

    transition:width .4s cubic-bezier(.4,0,.2,1);
}

.hl-ltv-labels{
    display:flex;
    justify-content:space-between;

    margin-bottom:.1rem;

    font-size:.61rem;
    font-weight:600;

    color:var(--slate,#64748b);

    opacity:.7;
}


/* ──────────────────────────────────────
   FEES GRID
────────────────────────────────────── */

.hl-fees-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}


/* ──────────────────────────────────────
   FEE INPUTS
────────────────────────────────────── */

.hl-fee-inp{
    width:100%;

    padding:.48rem .6rem;

    background:var(--slate-light,#f1f5f9);

    border:1.5px solid var(--slate-line,#e2e8f0);
    border-radius:var(--r-sm,10px);

    color:var(--ink,#0f172a);

    font-size:.83rem;
    font-weight:600;

    text-align:center;

    outline:none;

    font-family:var(--font-body,'Inter',sans-serif);

    transition:
        border-color .2s,
        background .2s,
        box-shadow .2s;

    -moz-appearance:textfield;
}

.hl-fee-inp::-webkit-inner-spin-button{
    display:none;
}

.hl-fee-inp:focus{
    border-color:var(--navy,#0D2545);

    background:#fff;

    box-shadow:0 0 0 3px rgba(13,37,69,.08);
}


/* ──────────────────────────────────────
   RESPONSIVE
────────────────────────────────────── */

@media(max-width:600px){

    .hl-dp-row{
        flex-wrap:wrap;
    }

    .hl-dp-col--pct{
        flex:1;
        min-width:80px;
    }

    .hl-fees-grid{
        grid-template-columns:1fr;
    }
}
/* ──────────────────────────────────────
   V2 NEW FEATURES (Prepayment & LTV)
────────────────────────────────────── */

/* Quick preset buttons for prepayment amounts */
/*.pp-amt-presets {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 6px;*/
/*    margin: 6px 0 10px;*/
/*}*/

/*.pp-preset-btn {*/
/*    font-size: .72rem;*/
/*    font-weight: 600;*/
/*    padding: 3px 10px;*/
/*    border-radius: 20px;*/
/*    border: 1.5px solid var(--navy, #0D2545);*/
/*    background: transparent;*/
/*    color: var(--navy, #0D2545);*/
/*    cursor: pointer;*/
/*    transition: background .15s, color .15s;*/
/*    line-height: 1.6;*/
/*}*/

/*.pp-preset-btn:hover,*/
/*.pp-preset-btn.active {*/
/*    background: var(--navy, #0D2545);*/
/*    color: #fff;*/
/*}*/

/* Lumpsum "loan closed" error */
#ppOnetimeLoanClosedErr {
    display: none;
    background: #FEF3C7;
    border: 1px solid #F59E0B;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: .75rem;
    color: #92400E;
    margin-top: 6px;
    line-height: 1.5;
}

/* Invalid lumpsum table row */
.lumpsum-invalid-row td { 
    opacity: .6; 
}

.ls-closed-tag {
    font-size: .68rem;
    color: #B45309;
    background: #FEF3C7;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
}

/* LTV fill color transitions */
.hl-ltv-fill { 
    transition: width .3s, background .3s; 
}

/* LTV max note */
.ltv-max-note {
    font-size: .68rem;
    color: var(--slate, #64748b);
    margin-top: 3px;
}