/* BRRRR / Cash-Flow Estimator — tokens via clever-design-tokens (BIF theme). */

.clvr-brrrr-calc,
.clvr-brrrr-calc *,
.clvr-brrrr-calc *::before,
.clvr-brrrr-calc *::after {
    box-sizing: border-box;
}

.clvr-brrrr-calc {
    container-type: inline-size;
    width: 100%;
    margin: var(--clvr-sp-8, 2rem) auto;
    padding: var(--clvr-sp-6, 1.5rem);
    font-family: var(--clvr-font, "Poppins", arial, sans-serif);
    color: var(--clvr-text, #22293b);
    line-height: 1.5;
    background: var(--clvr-bg, #ffffff);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.08));
}

/* -- Header -- */
.clvr-brrrr-calc .brrrr-header {
    text-align: center;
    margin-bottom: var(--clvr-sp-6, 1.5rem);
}
.clvr-brrrr-calc .brrrr-heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--clvr-sp-2, 0.5rem);
    margin: 0;
    font-family: var(--clvr-font-heading, "Poppins", arial, sans-serif);
    font-size: 1.625rem;
    font-weight: var(--clvr-weight-bold, 700);
    color: var(--clvr-blue, #14244A);
}
.clvr-brrrr-calc .brrrr-heading-icon {
    color: var(--clvr-orange, #DBA450);
    flex-shrink: 0;
}
.clvr-brrrr-calc .brrrr-intro {
    max-width: 560px;
    margin: var(--clvr-sp-2, 0.5rem) auto 0;
    color: var(--clvr-text-secondary, #4b698b);
    font-size: 0.9375rem;
}

/* -- Grid: inputs | results in wide containers -- */
.clvr-brrrr-calc .brrrr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--clvr-sp-6, 1.5rem);
}
@container (min-width: 680px) {
    .clvr-brrrr-calc .brrrr-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--clvr-sp-8, 2rem);
    }
}

.clvr-brrrr-calc .brrrr-section-title {
    margin: 0 0 var(--clvr-sp-4, 1rem);
    font-size: 0.8125rem;
    font-weight: var(--clvr-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clvr-text-muted, #86a5c6);
}
.clvr-brrrr-calc .brrrr-section-title--gap {
    margin-top: var(--clvr-sp-6, 1.5rem);
}

/* ============================================================
   INPUTS
   ============================================================ */
.clvr-brrrr-calc .brrrr-field {
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-brrrr-calc .brrrr-field--inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--clvr-sp-3, 0.75rem);
    align-items: end;
}
.clvr-brrrr-calc .brrrr-inline-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.clvr-brrrr-calc .brrrr-inline-item .brrrr-select,
.clvr-brrrr-calc .brrrr-inline-item .brrrr-input-row {
    margin-top: auto;
}

.clvr-brrrr-calc .brrrr-label {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--clvr-weight-semibold, 600);
    color: var(--clvr-text, #22293b);
    margin-bottom: var(--clvr-sp-2, 0.5rem);
}
.clvr-brrrr-calc .brrrr-label-note {
    display: block;
    font-weight: var(--clvr-weight-normal, 400);
    color: var(--clvr-text-muted, #86a5c6);
    font-size: 0.75rem;
}

.clvr-brrrr-calc .brrrr-input-row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--clvr-border, #bfcbde);
    border-radius: var(--clvr-radius-sm, 4px);
    background: var(--clvr-bg, #ffffff);
    overflow: hidden;
    transition: box-shadow var(--clvr-transition, 200ms ease),
                border-color var(--clvr-transition, 200ms ease);
}
.clvr-brrrr-calc .brrrr-input-row:hover {
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.08));
}
.clvr-brrrr-calc .brrrr-input-row:focus-within {
    border-color: var(--clvr-orange, #DBA450);
    outline: 2px solid var(--clvr-orange, #DBA450);
    outline-offset: -2px;
    box-shadow: none;
}
.clvr-brrrr-calc .brrrr-input-prefix,
.clvr-brrrr-calc .brrrr-input-suffix {
    display: flex;
    align-items: center;
    padding: 0 var(--clvr-sp-3, 0.75rem);
    background: var(--clvr-bg-subtle, #f5f8fc);
    color: var(--clvr-text-secondary, #4b698b);
    font-weight: var(--clvr-weight-semibold, 600);
    font-size: 0.9375rem;
}
.clvr-brrrr-calc .brrrr-number {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: var(--clvr-sp-3, 0.75rem);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    color: var(--clvr-text, #22293b);
    background: transparent;
    min-height: 44px;
}
.clvr-brrrr-calc .brrrr-number:focus { outline: none; }
.clvr-brrrr-calc .brrrr-number::-webkit-outer-spin-button,
.clvr-brrrr-calc .brrrr-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.clvr-brrrr-calc .brrrr-number[type=number] { -moz-appearance: textfield; }

.clvr-brrrr-calc .brrrr-select {
    width: 100%;
    border: 1px solid var(--clvr-border, #bfcbde);
    border-radius: var(--clvr-radius-sm, 4px);
    padding: var(--clvr-sp-3, 0.75rem);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    background: var(--clvr-bg, #ffffff);
    color: var(--clvr-text, #22293b);
    min-height: 44px;
    cursor: pointer;
    transition: box-shadow var(--clvr-transition, 200ms ease),
                border-color var(--clvr-transition, 200ms ease);
}
.clvr-brrrr-calc .brrrr-select:hover {
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.08));
}
.clvr-brrrr-calc .brrrr-select:focus {
    border-color: var(--clvr-orange, #DBA450);
    outline: 2px solid var(--clvr-orange, #DBA450);
    outline-offset: -2px;
    box-shadow: none;
}

/* Sliders — orange fill up to the thumb via --clvr-slider-fill (set by JS). */
.clvr-brrrr-calc .brrrr-slider {
    --clvr-slider-fill: 50%;
    display: block;
    width: 100%;
    margin-top: var(--clvr-sp-3, 0.75rem);
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: linear-gradient(
        to right,
        var(--clvr-orange, #DBA450) 0%,
        var(--clvr-orange, #DBA450) var(--clvr-slider-fill),
        var(--clvr-bg-tint, #F0F5FA) var(--clvr-slider-fill),
        var(--clvr-bg-tint, #F0F5FA) 100%
    );
    border-radius: var(--clvr-radius-pill, 9999px);
    outline: none;
}
.clvr-brrrr-calc .brrrr-slider::-moz-range-track {
    height: 6px;
    background: var(--clvr-bg-tint, #F0F5FA);
    border-radius: var(--clvr-radius-pill, 9999px);
}
.clvr-brrrr-calc .brrrr-slider::-moz-range-progress {
    height: 6px;
    background: var(--clvr-orange, #DBA450);
    border-radius: var(--clvr-radius-pill, 9999px);
}
.clvr-brrrr-calc .brrrr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clvr-blue, #14244A);
    border: 2px solid var(--clvr-bg, #ffffff);
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.25));
    cursor: pointer;
}
.clvr-brrrr-calc .brrrr-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--clvr-blue, #14244A);
    border: 2px solid var(--clvr-bg, #ffffff);
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.25));
    cursor: pointer;
}
.clvr-brrrr-calc .brrrr-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--clvr-orange, #DBA450);
    outline-offset: 2px;
}
.clvr-brrrr-calc .brrrr-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--clvr-orange, #DBA450);
    outline-offset: 2px;
}

/* Advanced disclosure — full-width drawer header so the row reads balanced. */
.clvr-brrrr-calc .brrrr-advanced { margin-top: var(--clvr-sp-3, 0.75rem); }
.clvr-brrrr-calc .brrrr-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--clvr-sp-2, 0.5rem);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
    background: var(--clvr-bg, #ffffff);
    padding: var(--clvr-sp-3, 0.75rem) var(--clvr-sp-4, 1rem);
    color: var(--clvr-blue, #14244A);
    font-family: inherit;
    font-weight: var(--clvr-weight-semibold, 600);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color var(--clvr-transition, 200ms ease),
                box-shadow var(--clvr-transition, 200ms ease),
                border-color var(--clvr-transition, 200ms ease);
}
.clvr-brrrr-calc .brrrr-advanced-toggle:hover {
    border-color: var(--clvr-border, #bfcbde);
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12, 20, 42, 0.08));
}
.clvr-brrrr-calc .brrrr-advanced-toggle:focus-visible {
    outline: 2px solid var(--clvr-orange, #DBA450);
    outline-offset: 2px;
}
.clvr-brrrr-calc .brrrr-advanced-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: var(--clvr-sp-2, 0.5rem);
}
.clvr-brrrr-calc .brrrr-advanced-icon { width: 1em; height: 1em; }
.clvr-brrrr-calc .brrrr-advanced-chevron {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    color: var(--clvr-text-secondary, #4b698b);
    transition: transform var(--clvr-transition, 200ms ease);
}
.clvr-brrrr-calc .brrrr-advanced-toggle[aria-expanded="true"] .brrrr-advanced-chevron {
    transform: rotate(180deg);
}
.clvr-brrrr-calc .brrrr-advanced-panel {
    margin-top: var(--clvr-sp-3, 0.75rem);
    padding: var(--clvr-sp-4, 1rem);
    background: var(--clvr-bg-subtle, #f5f8fc);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
}
.clvr-brrrr-calc .brrrr-advanced-panel .brrrr-field:last-child { margin-bottom: 0; }
.clvr-brrrr-calc .brrrr-advanced-panel .brrrr-input-row {
    background: var(--clvr-bg, #ffffff);
}

/* Rate-cost callout — full width below the input/results grid. */
.clvr-brrrr-calc .brrrr-rate-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--clvr-sp-3, 0.75rem);
    margin-top: var(--clvr-sp-6, 1.5rem);
    padding: var(--clvr-sp-3, 0.75rem) var(--clvr-sp-4, 1rem);
    background: var(--clvr-bg-tint, #F0F5FA);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-left: 3px solid var(--clvr-orange, #DBA450);
    border-radius: var(--clvr-radius, 8px);
    font-size: 0.875rem;
    color: var(--clvr-text-secondary, #4b698b);
}
.clvr-brrrr-calc .brrrr-rate-callout-text a {
    color: var(--clvr-orange-dark, #C3862A);
    font-weight: var(--clvr-weight-semibold, 600);
}
.clvr-brrrr-calc .brrrr-rate-callout-text a:hover {
    color: var(--clvr-blue, #14244A);
}
.clvr-brrrr-calc .brrrr-rate-callout-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    margin-top: 2px;
    color: var(--clvr-orange-dark, #C3862A);
}
.clvr-brrrr-calc .brrrr-rate-callout-text p { margin: 0 0 var(--clvr-sp-2, 0.5rem); }
.clvr-brrrr-calc .brrrr-rate-callout-text p:last-child { margin: 0; }

/* ============================================================
   RESULTS
   ============================================================ */
/* Author display values above would defeat the [hidden] attribute the JS toggles. */
.clvr-brrrr-calc [hidden] {
    display: none !important;
}

.clvr-brrrr-calc .brrrr-validation {
    padding: var(--clvr-sp-3, 0.75rem) var(--clvr-sp-4, 1rem);
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid var(--clvr-warning, #ff9800);
    border-radius: var(--clvr-radius, 8px);
    color: var(--clvr-text, #22293b);
    font-size: 0.9375rem;
    margin-bottom: var(--clvr-sp-4, 1rem);
}

.clvr-brrrr-calc .brrrr-infinite {
    display: flex;
    align-items: flex-start;
    gap: var(--clvr-sp-3, 0.75rem);
    padding: var(--clvr-sp-4, 1rem);
    background: rgba(14, 193, 143, 0.08);
    border: 1px solid var(--clvr-success, #0ec18f);
    border-radius: var(--clvr-radius, 8px);
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-brrrr-calc .brrrr-infinite-icon {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
    margin-top: 2px;
    color: var(--clvr-success, #0ec18f);
}
.clvr-brrrr-calc .brrrr-infinite-heading {
    font-weight: var(--clvr-weight-bold, 700);
    margin-bottom: 2px;
}
.clvr-brrrr-calc .brrrr-infinite-body {
    font-size: 0.9375rem;
    color: var(--clvr-text-secondary, #4b698b);
}

.clvr-brrrr-calc .brrrr-primary {
    padding: var(--clvr-sp-4, 1rem) var(--clvr-sp-6, 1.5rem);
    background: var(--clvr-blue, #14244A);
    color: var(--clvr-text-inverse, #ffffff);
    border-radius: var(--clvr-radius, 8px);
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-brrrr-calc .brrrr-primary-figure { margin-bottom: var(--clvr-sp-3, 0.75rem); }
.clvr-brrrr-calc .brrrr-primary-value {
    font-size: 2.5rem;
    font-weight: var(--clvr-weight-bold, 700);
    line-height: 1.1;
    /* White on navy (13:1). Accent text on navy fails contrast — never use it here. */
    color: var(--clvr-text-inverse, #ffffff);
}
.clvr-brrrr-calc .brrrr-primary-label {
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-top: var(--clvr-sp-1, 0.25rem);
}
.clvr-brrrr-calc .brrrr-primary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--clvr-sp-4, 1rem);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: var(--clvr-sp-3, 0.75rem);
    font-size: 0.875rem;
}
.clvr-brrrr-calc .brrrr-meta-label { color: rgba(255, 255, 255, 0.7); margin-right: var(--clvr-sp-1, 0.25rem); }
.clvr-brrrr-calc .brrrr-meta-value { font-weight: var(--clvr-weight-semibold, 600); color: var(--clvr-text-inverse, #ffffff); }

/* Stat rows — label left, value right, so any digit count fits and values align. */
.clvr-brrrr-calc .brrrr-stat-cards {
    display: flex;
    flex-direction: column;
    gap: var(--clvr-sp-2, 0.5rem);
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-brrrr-calc .brrrr-stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--clvr-sp-3, 0.75rem);
    padding: var(--clvr-sp-3, 0.75rem) var(--clvr-sp-4, 1rem);
    background: var(--clvr-bg-subtle, #f5f8fc);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
}
.clvr-brrrr-calc .brrrr-stat-name {
    display: inline-flex;
    align-items: center;
    gap: var(--clvr-sp-2, 0.5rem);
    min-width: 0;
}
.clvr-brrrr-calc .brrrr-stat-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--clvr-text-muted, #86a5c6);
}
.clvr-brrrr-calc .brrrr-stat-svg { width: 1.1em; height: 1.1em; }
.clvr-brrrr-calc .brrrr-stat-value {
    font-size: 1.25rem;
    font-weight: var(--clvr-weight-bold, 700);
    color: var(--clvr-blue, #14244A);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.clvr-brrrr-calc .brrrr-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--clvr-text-secondary, #4b698b);
}
/* Cash-flow state: color + the sign carried in the value (never color alone). */
.clvr-brrrr-calc .brrrr-stat-card.is-positive .brrrr-stat-value { color: #0a7a5b; }
.clvr-brrrr-calc .brrrr-stat-card.is-negative .brrrr-stat-value { color: var(--clvr-error, #f44336); }
.clvr-brrrr-calc .brrrr-stat-card.is-negative {
    border-color: var(--clvr-error, #f44336);
}

/* Secondary rows */
.clvr-brrrr-calc .brrrr-secondary { margin: 0; }
.clvr-brrrr-calc .brrrr-secondary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--clvr-sp-3, 0.75rem);
    padding: var(--clvr-sp-3, 0.75rem) 0;
    border-bottom: 1px solid var(--clvr-border-light, #e2e8f0);
    font-size: 0.9375rem;
}
.clvr-brrrr-calc .brrrr-secondary-row:last-child { border-bottom: 0; }
.clvr-brrrr-calc .brrrr-secondary-row dt { color: var(--clvr-text-secondary, #4b698b); }
.clvr-brrrr-calc .brrrr-secondary-row dd {
    margin: 0;
    font-weight: var(--clvr-weight-semibold, 600);
    color: var(--clvr-text, #22293b);
    text-align: right;
}

.clvr-brrrr-calc .brrrr-seasoning-note {
    display: flex;
    align-items: flex-start;
    gap: var(--clvr-sp-2, 0.5rem);
    margin: var(--clvr-sp-4, 1rem) 0 0;
    font-size: 0.8125rem;
    color: var(--clvr-text-muted, #86a5c6);
}
.clvr-brrrr-calc .brrrr-note-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    margin-top: 2px;
}

/* ============================================================
   CTA + DISCLAIMER
   ============================================================ */
.clvr-brrrr-calc .brrrr-cta {
    margin-top: var(--clvr-sp-6, 1.5rem);
    padding: var(--clvr-sp-6, 1.5rem);
    background: var(--clvr-bg-subtle, #f5f8fc);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
    text-align: center;
}
.clvr-brrrr-calc .brrrr-cta-heading {
    font-size: 1.125rem;
    font-weight: var(--clvr-weight-bold, 700);
    color: var(--clvr-blue, #14244A);
    margin-bottom: var(--clvr-sp-2, 0.5rem);
}
.clvr-brrrr-calc .brrrr-cta-text {
    font-size: 0.9375rem;
    color: var(--clvr-text-secondary, #4b698b);
    margin-bottom: var(--clvr-sp-4, 1rem);
}
.clvr-brrrr-calc .brrrr-cta-text p { margin: 0 0 var(--clvr-sp-2, 0.5rem); }
.clvr-brrrr-calc .brrrr-cta-text p:last-child { margin: 0; }

.clvr-brrrr-calc a.brrrr-cta-button {
    display: inline-flex;
    align-items: center;
    gap: var(--clvr-sp-2, 0.5rem);
    padding: var(--clvr-sp-3, 0.75rem) var(--clvr-sp-6, 1.5rem);
    background: var(--clvr-orange, #DBA450);
    border-radius: var(--clvr-btn-radius, 9999px);
    font-weight: var(--clvr-weight-bold, 700);
    font-size: 1rem;
    text-decoration: none;
    min-height: 44px;
    transition: background var(--clvr-transition, 200ms ease);
}
/* Defend the label color against the theme's global link color. */
.clvr-brrrr-calc a.brrrr-cta-button,
.clvr-brrrr-calc a.brrrr-cta-button:link,
.clvr-brrrr-calc a.brrrr-cta-button:visited,
.clvr-brrrr-calc a.brrrr-cta-button:hover,
.clvr-brrrr-calc a.brrrr-cta-button:focus,
.clvr-brrrr-calc a.brrrr-cta-button:active {
    color: var(--clvr-on-accent, #14244A) !important;
}
.clvr-brrrr-calc a.brrrr-cta-button:hover {
    background: var(--clvr-orange-dark, #C3862A);
}
.clvr-brrrr-calc a.brrrr-cta-button:focus-visible {
    outline: 2px solid var(--clvr-blue, #14244A);
    outline-offset: 2px;
}
.clvr-brrrr-calc .brrrr-cta-icon { width: 1em; height: 1em; }

.clvr-brrrr-calc .brrrr-disclaimer {
    margin: var(--clvr-sp-4, 1rem) 0 0;
    font-size: 0.75rem;
    color: var(--clvr-text-muted, #86a5c6);
    line-height: 1.5;
}

@container (max-width: 420px) {
    .clvr-brrrr-calc { padding: var(--clvr-sp-4, 1rem); }
    .clvr-brrrr-calc .brrrr-primary-value { font-size: 2rem; }
    .clvr-brrrr-calc .brrrr-field--inline { grid-template-columns: 1fr; }
}

/* Narrow containers: smaller heading so the icon stays beside the text. */
@container (max-width: 480px) {
    .clvr-brrrr-calc .brrrr-heading { font-size: 1.25rem; }
}