/* ── Reset & scope ───────────────────────────────────────── */
.lc-wrap *            { box-sizing: border-box; margin: 0; padding: 0; }
.lc-wrap              { font-family: var(--font-head, system-ui, sans-serif);
                        font-size: var(--text-sm, .875rem);
                        color: var(--clr-text-primary, #111);
                        max-width: 100%; overflow-x: hidden; }

/* ── Top bar ─────────────────────────────────────────────── */
.lc-top-bar           { display: flex; align-items: center; gap: .5rem;
                        padding: .55rem var(--sp-4, 1rem);
                        background: var(--clr-accent, #2563eb); color: #fff;
                        border-radius: var(--r-lg, 8px) var(--r-lg, 8px) 0 0;
                        margin-bottom: var(--sp-4, 1rem);
                        font-size: var(--text-xs, .75rem);
                        font-weight: var(--fw-medium, 500); }
.lc-top-bar svg       { flex-shrink: 0; opacity: .85; }

/* ── Main grid ───────────────────────────────────────────── */
.lc-grid              { display: grid;
                        grid-template-columns: minmax(280px,320px) 1fr;
                        gap: var(--sp-5, 1.25rem);
                        align-items: start; }
@media (max-width: 768px) { .lc-grid { grid-template-columns: 1fr; } 
.calc-widget-section {
    box-sizing: border-box; /* This keeps padding INSIDE the width */
    width: 320px;
    margin-bottom: var(--sp-8);
margin-left: auto;
    margin-right: auto;
}
}

/* ── Card ────────────────────────────────────────────────── */
.lc-card              { background: var(--clr-bg, #fff);
                        border: 1px solid var(--clr-border, #e2e8f0);
                        border-radius: var(--r-xl, 12px);
                        overflow: hidden; }

/* ── Input panel ─────────────────────────────────────────── */
.lc-input-panel       { display: flex; flex-direction: column; }

.lc-field             { display: flex; align-items: center; flex-wrap: wrap;
                        padding: .4rem .75rem;
                        border-bottom: 1px solid var(--clr-border-soft, #f1f5f9);
                        gap: .4rem; }

.lc-lbl               { flex-shrink: 0; width: 88px;
                        font-size: 11px;
                        font-weight: var(--fw-medium, 500);
                        color: var(--clr-text-secondary, #475569);
                        line-height: 1.3; }

.lc-inp               { padding: .28rem .45rem; min-width: 0;
                        border: 1.5px solid var(--clr-border, #e2e8f0);
                        border-radius: var(--r-md, 6px);
                        background: var(--clr-bg, #fff);
                        font-family: var(--font-head, system-ui);
                        font-size: var(--text-sm, .875rem);
                        font-weight: var(--fw-semibold, 600);
                        color: var(--clr-text-primary, #111);
                        outline: none;
                        -moz-appearance: textfield; appearance: textfield;
                        transition: border-color .15s, box-shadow .15s; }
.lc-inp::-webkit-outer-spin-button,
.lc-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
.lc-inp:focus         { border-color: var(--clr-accent, #2563eb);
                        box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.lc-inp.w-full        { flex: 1; min-width: 80px; }
.lc-inp.w-lg          { width: 110px; }
.lc-inp.w-md          { width: 72px; }
.lc-inp.w-sm          { width: 56px; }

.lc-badge             { font-size: 10px;
                        color: var(--clr-text-muted, #94a3b8);
                        background: var(--clr-bg-muted, #f1f5f9);
                        border: 1px solid var(--clr-border, #e2e8f0);
                        border-radius: var(--r-sm, 4px);
                        padding: .15rem .38rem; white-space: nowrap; flex-shrink: 0; }

.lc-select            { padding: .26rem .24rem;
                        border: 1.5px solid var(--clr-border, #e2e8f0);
                        border-radius: var(--r-md, 6px);
                        background: var(--clr-bg, #fff);
                        font-family: var(--font-head, system-ui);
                        font-size: 11px;
                        font-weight: var(--fw-medium, 500);
                        color: var(--clr-text-primary, #111);
                        cursor: pointer; outline: none;
                        transition: border-color .15s; }
.lc-select:focus      { border-color: var(--clr-accent, #2563eb); }

/* ── Term row ────────────────────────────────────────────── */
.lc-term-row          { display: flex; align-items: center; gap: .3rem; flex: 1;
                        flex-wrap: wrap; }

/* ── Extra payments toggle ───────────────────────────────── */
.lc-extra-toggle      { display: flex; align-items: center; gap: .5rem;
                        padding: .5rem .75rem;
                        border-bottom: 1px solid var(--clr-border-soft);
                        cursor: pointer; user-select: none; }
.lc-extra-toggle input[type=checkbox] {
                        accent-color: var(--clr-accent, #2563eb);
                        width: 13px; height: 13px; cursor: pointer; flex-shrink: 0; }
.lc-extra-toggle span { font-size: 11px;
                        font-weight: var(--fw-bold, 700);
                        color: var(--clr-text-primary); }

/* extra body */
.lc-extra-body        { overflow: hidden; max-height: 0; opacity: 0;
                        transition: max-height .3s ease, opacity .3s ease; }
.lc-extra-body.open   { max-height: 500px; opacity: 1; }
.lc-extra-section     { background: var(--clr-bg-soft, #f8fafc);
                        border-bottom: 1px solid var(--clr-border-soft); }

.lc-extra-field       { display: flex; align-items: center; flex-wrap: wrap;
                        gap: .3rem; padding: .38rem .75rem; }
.lc-extra-lbl         { font-size: 11px; font-weight: var(--fw-medium, 500);
                        color: var(--clr-text-secondary); width: 100%;
                        margin-bottom: .05rem; }

.lc-more-otp-btn      { background: transparent; border: none;
                        color: var(--clr-accent, #2563eb);
                        font-size: 11px; font-weight: var(--fw-semibold, 600);
                        cursor: pointer; padding: .28rem .75rem .45rem;
                        display: block; transition: opacity .15s; }
.lc-more-otp-btn:hover { opacity: .7; }
.lc-otp-list          { display: flex; flex-direction: column; }

/* ── Actions ─────────────────────────────────────────────── */
.lc-actions           { padding: .6rem .75rem;
                        border-top: 1px solid var(--clr-border-soft); }
.lc-clear-btn         { width: 100%; padding: .46rem;
                        background: transparent;
                        border: 1.5px solid var(--clr-border, #e2e8f0);
                        border-radius: var(--r-md, 6px);
                        font-family: var(--font-head, system-ui);
                        font-size: var(--text-sm, .875rem);
                        font-weight: var(--fw-medium, 500);
                        color: var(--clr-text-muted, #94a3b8);
                        cursor: pointer;
                        transition: background .15s, color .15s; }
.lc-clear-btn:hover   { background: var(--clr-bg-soft);
                        color: var(--clr-text-secondary); }

/* ── Results panel ───────────────────────────────────────── */
.lc-result-panel      { display: flex; flex-direction: column;
                        gap: var(--sp-4, 1rem); }

/* monthly header */
.lc-monthly-hdr       { background: var(--clr-accent, #2563eb); color: #fff;
                        padding: .65rem 1rem;
                        border-radius: var(--r-xl, 12px) var(--r-xl, 12px) 0 0;
                        display: flex; align-items: center;
                        justify-content: space-between; }
.lc-monthly-label     { font-size: var(--text-xs, .75rem);
                        font-weight: var(--fw-medium); opacity: .85; }
.lc-monthly-value     { font-size: 1.4rem; font-weight: var(--fw-bold, 700);
                        letter-spacing: -.02em; }
.lc-print-btn         { display: inline-flex; align-items: center; gap: .3rem;
                        background: rgba(255,255,255,.18);
                        border: 1px solid rgba(255,255,255,.35);
                        border-radius: var(--r-sm, 4px); color: #fff;
                        padding: .2rem .5rem; font-size: 11px;
                        font-weight: var(--fw-medium); cursor: pointer;
                        transition: background .15s; white-space: nowrap; }
.lc-print-btn:hover   { background: rgba(255,255,255,.3); }

/* result body */
.lc-result-body       { border: 1px solid var(--clr-border); border-top: none;
                        border-radius: 0 0 var(--r-xl) var(--r-xl);
                        background: var(--clr-bg); }

/* pie chart area */
.lc-charts-row        { padding: .75rem 1rem;
                        display: flex; align-items: center;
                        gap: 1rem; flex-wrap: wrap; }
.lc-pie-wrap          { display: flex; align-items: center; gap: .75rem;
                        flex-wrap: wrap; }
.lc-pie-legend        { display: flex; flex-direction: column; gap: .2rem; }
.lc-legend-item       { display: flex; align-items: center; gap: .35rem;
                        font-size: 11px; color: var(--clr-text-secondary);
                        white-space: nowrap; }
.lc-legend-dot        { width: 10px; height: 10px; border-radius: 2px;
                        flex-shrink: 0; }

/* summary rows */
.lc-summary           { border-top: 1px solid var(--clr-border-soft); }
.lc-summary-row       { display: flex; justify-content: space-between;
                        align-items: center;
                        padding: .4rem 1rem;
                        border-bottom: 1px solid var(--clr-border-soft);
                        gap: .5rem; flex-wrap: wrap; }
.lc-summary-row:last-child { border-bottom: none; }
.lc-summary-lbl       { font-size: 11px; color: var(--clr-text-secondary); }
.lc-summary-val       { font-size: var(--text-sm, .875rem);
                        font-weight: var(--fw-semibold, 600);
                        color: var(--clr-text-primary); white-space: nowrap; }

/* ── Amortization section ────────────────────────────────── */
.lc-amort-section     { margin-top: var(--sp-3, .75rem); }
.lc-amort-hdr         { display: flex; align-items: center;
                        justify-content: space-between;
                        padding: .55rem .8rem;
                        background: var(--clr-bg-soft);
                        border: 1px solid var(--clr-border);
                        border-radius: var(--r-lg, 8px);
                        cursor: pointer; user-select: none;
                        transition: background .15s; }
.lc-amort-hdr:hover   { background: var(--clr-accent-light, #eff6ff); }
.lc-amort-title       { font-size: var(--text-base, 1rem);
                        font-weight: var(--fw-bold, 700);
                        color: var(--clr-text-primary); }
.lc-amort-chev        { color: var(--clr-text-muted);
                        transition: transform .25s ease; flex-shrink: 0; }
.lc-amort-chev.open   { transform: rotate(180deg); }

.lc-amort-body        { overflow: hidden; max-height: 0;
                        transition: max-height .35s ease; }
.lc-amort-body.open   { max-height: 9999px; }

.lc-amort-inner       { padding-top: var(--sp-3, .75rem); }

/* chart above table */
.lc-amort-chart-wrap  { background: var(--clr-bg, #fff);
                        border: 1px solid var(--clr-border);
                        border-radius: var(--r-lg, 8px);
                        padding: .5rem .5rem .3rem;
                        margin-bottom: var(--sp-3, .75rem);
                        overflow: hidden; }

/* tab bar */
.lc-tab-bar           { display: flex; margin-bottom: var(--sp-3, .75rem);
                        border-bottom: 2px solid var(--clr-border-soft); }
.lc-tab               { padding: .35rem .75rem;
                        font-size: var(--text-sm, .875rem);
                        font-weight: var(--fw-semibold);
                        color: var(--clr-text-muted);
                        background: transparent; border: none;
                        border-bottom: 2px solid transparent;
                        margin-bottom: -2px; cursor: pointer;
                        transition: color .15s, border-color .15s;
                        white-space: nowrap; }
.lc-tab.active        { color: var(--clr-accent, #2563eb);
                        border-bottom-color: var(--clr-accent, #2563eb); }
.lc-tab:hover         { color: var(--clr-text-primary); }

/* ── Amort table — compact & mobile-friendly ─────────────── */
.lc-table-wrap        { overflow-x: auto;
                        border: 1px solid var(--clr-border);
                        border-radius: var(--r-lg, 8px);
                        -webkit-overflow-scrolling: touch; }
.lc-table             { width: 100%; border-collapse: collapse;
                        font-size: 11px; min-width: 320px; }
.lc-table th          { background: var(--clr-accent, #2563eb); color: #fff;
                        padding: .32rem .5rem; text-align: right;
                        font-weight: var(--fw-semibold); font-size: 10px;
                        text-transform: uppercase; letter-spacing: .03em;
                        white-space: nowrap; position: sticky; top: 0; }
.lc-table th:first-child  { text-align: center; }
.lc-table th:nth-child(2) { text-align: left; }
.lc-table td          { padding: .28rem .5rem; text-align: right;
                        border-bottom: 1px solid var(--clr-border-soft);
                        color: var(--clr-text-secondary); line-height: 1.4; }
.lc-table td:first-child  { text-align: center; font-weight: var(--fw-semibold);
                             color: var(--clr-text-primary); }
.lc-table td:nth-child(2) { text-align: left; color: var(--clr-text-muted);
                             font-size: 10px; }
.lc-table td:last-child   { font-weight: var(--fw-semibold);
                             color: var(--clr-accent-dark, #1e40af); }
.lc-table tr:last-child td { border-bottom: none; }
.lc-table tr:nth-child(even) td { background: var(--clr-bg-soft, #f8fafc); }
.lc-table tr:hover td     { background: var(--clr-accent-light, #eff6ff) !important; }

/* ── Mobile tweaks ───────────────────────────────────────── */
@media (max-width: 480px) {
  .lc-top-bar          { font-size: 10px; padding: .45rem .75rem; }
  .lc-monthly-value    { font-size: 1.2rem; }
  .lc-summary-row      { padding: .35rem .75rem; }
  .lc-charts-row       { padding: .6rem .75rem; }
  .lc-amort-inner      { padding-top: .5rem; }
}

/* ── Mobile overrides ────────────────────────────────────── */
@media (max-width: 768px) { 
    .lc-grid { 
        grid-template-columns: 1fr; /* Stacks columns */
    } 

    .calc-widget-section {
        box-sizing: border-box;
        width: 360px;
        margin: 0 auto var(--sp-8) auto; /* Centers the section */
        padding: 0 10px; /* Prevents edge-bleeding */
    }

    /* Fix the Label width conflict */
    .lc-lbl {
        width: 100%; /* Labels stack on top of inputs for better mobile UX */
        margin-bottom: 4px;
    }

    .lc-field {
        flex-direction: column;
        align-items: flex-start;
    }

    .lc-inp, .lc-inp.w-lg, .lc-inp.w-md, .lc-inp.w-sm {
        width: 100% !important; /* Force inputs to full width */
    }
}
.lc-grid {
        grid-template-columns: 1fr;  /* stacks input and results */
    }
    .calc-widget-section {
        max-width: 100%;    /* optional: let it fill the width on mobile */
        padding: 0 12px;
    }