/* =====================================================================
   CREATIVE-FINANCE-02 — creative-finance.css
   Full visual parity with Fix & Flip. All values copied verbatim
   from fix-and-flip.css where specified.
   ===================================================================== */

/* ── BASE ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh;
    background: #F6F8FB;
    color:#0B1A3D;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

/* ── OUTER CONTAINER — exact .ff-grid values ── */
.cf-outer {
    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;
    overflow-x: auto;
    padding: 0 16px 16px;
    margin: 20px auto;
    max-width: 1700px;
    width: 100%;
    box-sizing: border-box;
    min-width: 1100px;
}

/* ── TITLE BLOCK (replaces .header) ── */
.cf-title-block {
    text-align: center;
    margin-bottom: 20px;
}

/* h1 — exact .ff-grid > h1 + global h1 values from fix-and-flip.css */
.cf-title-block h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(20px, 2.5vw, 36px);
    color: #F05A28;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    margin: 0;
    padding: 9px 0 7px;
}

.cf-title-divider {
    width: 100%;
    height: 1px;
    background: rgba(240,90,40,0.25);
    margin: 12px 0;
}

/* ── TAB BAR ── */
.tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 20px;
}

.tab {
    background: rgba(240,90,40,0.06);
    border: 1px solid rgba(240,90,40,0.25);
    border-radius: 999px;
    color: #bfd0da;
    padding: 7px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.2s;
}

.tab:hover {
    background: rgba(240,90,40,0.12);
    color: #FC5E1E;
}

.tab.active {
    background: rgba(240,90,40,0.18);
    border-color: #FC5E1E;
    color: #FC5E1E;
    box-shadow: 0 0 10px rgba(240,90,40,0.2);
}

/* ── SUMMARY BAR ── */
.summary-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

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

/* .sum-label — exact .ff-result-main-label / ff-main-chip-label */
.sum-label {
    font-size: clamp(9px, 0.85vw, 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;
    display: block;
}

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

.sum-sub {
    font-size: clamp(8px, 0.75vw, 10px);
    color: #7aafc6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 3px;
    display: block;
}

/* ── INPUT GRID — 20/30/30/20 proportions ── */
.input-grid {
    display: grid;
    grid-template-columns: 20fr 30fr 30fr 20fr;
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
}

/* ── SECTION PANELS — exact FF panel container ── */
/* FF FIX 3: background rgba(11,26,61,0.04), shadow ring */
.sec {
    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.15);
    border: 1px solid rgba(11,26,61,0.1);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

/* .sec-title — exact .ff-panel-header-row + .ff-panel-title values ── */
.sec-title {
    /* .ff-panel-header-row layout */
    display: flex;
    align-items: center;
    justify-content: center;
    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;
    /* .ff-panel-title typography */
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(11px, 1.3vw, 15px);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #F05A28;
    margin-bottom: 0;
}

.cf-sec-body {
    padding: 14px;
}

/* ── INTERNAL FIELD GRIDS ── */
#sec-acquisition .cf-sec-body,
#sec-market-risk .cf-sec-body {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
}

#sec-existing-debt .cf-sec-body,
#sec-buyer-seller .cf-sec-body {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
}

/* Toggle button spans full width of its panel grid */
#toggle-seller-carry {
    grid-column: 1 / -1;
}

/* ── COMPACT PILL + LABEL SIZING IN SECTIONS ── */
.sec .pill,
.sec input.pill,
.sec select.pill {
    font-size: clamp(10px, 0.9vw, 12px);
    padding: 5px 10px;
    height: auto;
    min-height: 32px;
}

.sec .ig label {
    font-size: clamp(8px, 0.78vw, 10px);
    margin-bottom: 1px;
    line-height: 1.2;
}

/* ── INPUT PAIRS ── */
.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 7px;
}

.ig {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* .ig label — exact FF field label: .ff-calc-grid .field label */
.ig label {
    font-size: 12px;
    font-weight: 600;
    color: #bfd0da;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 4px;
    display: block;
    line-height: 1.3;
    font-family: 'Inter', system-ui, sans-serif;
}

/* .pill — exact FF .lf-control values ── */
.pill,
input.pill,
select.pill {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 9px 14px;
    border-radius: 20px;
    border: 1px solid rgba(240,90,40,0.18);
    background:
        linear-gradient(180deg, rgba(11,26,61,0.06), rgba(11,26,61,0.02)),
        rgba(11,26,61,0.35);
    color:#0B1A3D;
    font-size: 14px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: normal;
    outline: none;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    box-sizing: border-box;
}

.pill:hover,
input.pill:hover,
select.pill: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: rgba(240,90,40,0.35);
}

.pill:focus,
input.pill:focus,
select.pill:focus {
    border-color: #F05A28;
    box-shadow: inset 0 1px 0 rgba(11,26,61,0.16), 0 0 0 3px rgba(240,90,40,0.18);
    background:
        linear-gradient(180deg, rgba(11,26,61,0.10), rgba(11,26,61,0.03)),
        rgba(11,26,61,0.42);
}

select.pill {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23ffa72a' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 26px;
}

/* ── RESULTS AREA ── */
#results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

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

/* .res-title — exact .ff-result-card-header (FIX-FLIP-POLISH-01 canonical) */
.res-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 500;
    color: #F05A28;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: none;
    margin: 0 0 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* ── METRIC BOX GRID ── */
.mbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    width: 100%;
}

/* .mbox — exact .ff-main-chip */
.mbox {
    background: rgba(240,90,40,0.08);
    border: 1px solid rgba(240,90,40,0.45);
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    box-shadow: 0 0 10px rgba(240,90,40,0.12);
}

/* .mbox-lbl — exact .ff-main-chip-label */
.mbox-lbl {
    font-size: clamp(8px, 0.75vw, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(11,26,61,0.6);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.25;
}

/* .mbox-val — .ff-main-chip-value (scaled for 4-up grid) */
.mbox-val {
    font-size: clamp(13px, 1.3vw, 16px);
    font-weight: 900;
    color:#0B1A3D;
    font-family: 'Inter', system-ui, sans-serif;
}

.mbox-val.g { color: #6fd46d; }
.mbox-val.r { color: #ff7b6e; }

.mbox-sub {
    font-size: clamp(7px, 0.65vw, 9px);
    color: #7aafc6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── PAYMENT FLOW ── */
.pflow {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 12px 0 10px;
    width: 100%;
}

/* .pf-box — exact .ff-main-chip */
.pf-box {
    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;
    flex: 1;
    box-shadow: 0 0 10px rgba(240,90,40,0.12);
}

/* .pf-lbl — .ff-main-chip-label */
.pf-lbl {
    font-size: clamp(8px, 0.75vw, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(11,26,61,0.6);
    font-family: 'Inter', system-ui, sans-serif;
    margin-bottom: 3px;
    line-height: 1.3;
}

.pf-val {
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 800;
    color:#0B1A3D;
    font-family: 'Inter', system-ui, sans-serif;
}

.pf-sub {
    font-size: clamp(7px, 0.65vw, 9px);
    color: #7aafc6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}

.pf-arrow {
    color: rgba(240,90,40,0.4);
    font-size: 18px;
    flex-shrink: 0;
}

/* ── DEAL STACK ── */
.stack-title {
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #FC5E1E;
    font-family: 'Inter', system-ui, sans-serif;
    margin: 12px 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(240,90,40,0.15);
    width: 100%;
    text-align: left;
}

/* .srow — exact .ff-metric-row */
.srow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(240,90,40,0.10);
    font-size: 11px;
    width: 100%;
}

.srow:last-child { border-bottom: none; }

/* .srow .sl — exact .ff-metric-label */
.srow .sl {
    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;
}

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

.srow.hi {
    margin-top: 6px;
    border-top: 1px solid rgba(240,90,40,0.3);
    border-bottom: none;
    padding-top: 6px;
}

.srow.hi .sl { color:#0B1A3D; font-weight: 700; }
.srow.hi .sv { color: #FC5E1E; font-size: clamp(12px, 1.2vw, 15px); }

/* ── BADGE ── */
.badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    background: rgba(111,212,109,0.15);
    border: 1px solid rgba(111,212,109,0.4);
    color: #6fd46d;
}

.badge.yellow {
    background: rgba(255,214,84,0.12);
    border-color: rgba(255,214,84,0.4);
    color: #ffd654;
}

.badge.red {
    background: rgba(255,123,110,0.12);
    border-color: rgba(255,123,110,0.4);
    color: #ff7b6e;
}

/* ── COLOR HELPERS ── */
.c-green  { color: #6fd46d; }
.c-red    { color: #ff7b6e; }
.c-orange { color: #FC5E1E; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .input-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .summary-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    #sec-existing-debt .cf-sec-body,
    #sec-buyer-seller .cf-sec-body {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .input-grid {
        grid-template-columns: 1fr;
    }
    .summary-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    #results {
        grid-template-columns: 1fr;
    }
    .mbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tabs .tab {
        padding: 8px 14px;
        font-size: 11px;
    }
}