/**
 * Vantage ROI Calculator — styles.
 *
 * Phase 3: full input/headline/detail styling.
 * Phase 4 will add gate/blur/overlay styles.
 */

/* =========================================================
 * Variables — root scope
 * ========================================================= */

.vantage-roi {
    --vroi-accent: #e4ff00;
    --vroi-accent-dark: #c2d800;
    --vroi-accent-contrast: #000;

    --vroi-text-primary: #000;
    --vroi-text-muted: #575756;
    --vroi-text-subtle: #878786;
    --vroi-text-on-dark: #fff;

    --vroi-card-light-bg: #fff;
    --vroi-card-dark-bg: #000;
    --vroi-card-border: #e5e7eb;
    --vroi-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    --vroi-divider: rgba(0, 0, 0, 0.08);
    --vroi-divider-on-dark: rgba(255, 255, 255, 0.08);

    --vroi-success: #10b981;
    --vroi-success-bg: #d1fae5;
    --vroi-success-dark: #064e3b;
    --vroi-warning: #f59e0b;
    --vroi-danger: #ef4444;
    --vroi-danger-light: #fef2f2;

    --vroi-chart-baseline: #878786;
    --vroi-chart-edu: var(--vroi-accent-contrast);
    --vroi-chart-edu-fill-from: rgba(228, 255, 0, 0.20);
    --vroi-chart-edu-fill-to: rgba(228, 255, 0, 0);
    --vroi-chart-grid: rgba(0, 0, 0, 0.08);
    --vroi-chart-grid-on-dark: rgba(255, 255, 255, 0.08);
    --vroi-chart-marker-grad: var(--vroi-text-primary);

    --vroi-radius: 0;
    --vroi-radius-pill: 999px;

    --vroi-blur: 8px;
    --vroi-overlay-bg: rgba(255, 255, 255, 0.85);
    --vroi-transition: 250ms ease;

    --vroi-font: 'robotoregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 1.5em 0 2.5em;
    font-family: var(--vroi-font);
    color: var(--vroi-text-primary);
    line-height: 1.5;
}

/* Allow the host column to shrink to its allocated track width.
   Without this, the calculator's min-content can exceed col-md-8's 66.67%
   share, making the sibling .col-md sidebar wrap below and stack full-width. */
body.vroi-active .col-md-8 {
    min-width: 0;
}

.vantage-roi *,
.vantage-roi *::before,
.vantage-roi *::after {
    box-sizing: border-box;
}

/* Visually hidden, screen-reader accessible. Used for the live-region summary
   so animated value updates don't flood polite announcements. */
.vantage-roi .vroi-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
 * School scoping
 * ========================================================= */

/* SMA: defaults already on root. */

/* HSO override placeholder (registered when HSO migration ships):
.vantage-roi[data-vroi-school="hso"] {
    --vroi-accent: #e40521;
    --vroi-accent-dark: #c2041b;
    --vroi-accent-contrast: #fff;
    --vroi-radius: 16px;
    --vroi-card-dark-bg: linear-gradient(160deg, #111827 0%, #1f2937 100%);
}
*/

/* =========================================================
 * Card & header
 * ========================================================= */

.vantage-roi-card {
    background: var(--vroi-card-light-bg);
    border: 1px solid var(--vroi-card-border);
    border-radius: var(--vroi-radius);
    padding: clamp(20px, 3vw, 32px);
    box-shadow: var(--vroi-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vantage-roi-header {
    /* SMA theme paints all <header> elements yellow (desktop) / black (≤990px);
       we render as <div> but keep the transparent reset as defence-in-depth
       in case host themes apply card-style backgrounds to .vantage-roi-header. */
    background: transparent;
    color: var(--vroi-text-primary);
    text-align: left;
    padding: 0;
}

.vantage-roi-title {
    /* Reset SMA theme's global h2 transition + bottom margin so the title
       sits tight against the subtitle. */
    margin: 0 0 6px;
    padding: 0;
    background: transparent;
    color: var(--vroi-text-primary);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.15;
    transition: none;
}

/* Yellow accent underline — matches SMA theme's pattern of h2::after rules
   but uses our accent variable so HSO override flips it cleanly. */
.vantage-roi-title::after {
    content: '';
    display: block;
    width: 2.5em;
    height: 3px;
    margin-top: 6px;
    background: var(--vroi-accent);
}

.vantage-roi-subtitle {
    margin: 8px 0 0;
    background: transparent;
    color: var(--vroi-text-muted);
    font-size: 0.95rem;
    font-weight: 400;
}

/* =========================================================
 * Input area
 * ========================================================= */

.vantage-roi-input {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vantage-roi-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vantage-roi-label {
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vroi-text-muted);
    margin: 0;
}

/* Course select */

.vroi-select-wrap {
    position: relative;
}

.vroi-main-select {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 1px solid var(--vroi-card-border);
    border-radius: var(--vroi-radius);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    background: var(--vroi-card-light-bg);
    color: var(--vroi-text-primary);
    appearance: none;
    cursor: pointer;
    transition: border-color var(--vroi-transition), box-shadow var(--vroi-transition);
}

.vroi-main-select:hover {
    border-color: var(--vroi-text-subtle);
}

.vroi-main-select:focus {
    outline: none;
    border-color: var(--vroi-accent-contrast);
    box-shadow: 0 0 0 3px var(--vroi-accent);
}

.vroi-select-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--vroi-text-muted);
    pointer-events: none;
}

/* Mode toggle (Jährlich / Monatlich) */

.vroi-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.vroi-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--vroi-card-border);
    border-radius: var(--vroi-radius);
    padding: 2px;
    background: var(--vroi-card-light-bg);
}

.vroi-mode-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vroi-text-muted);
    cursor: pointer;
    border-radius: calc(var(--vroi-radius) - 1px);
    transition: background var(--vroi-transition), color var(--vroi-transition);
}

.vroi-mode-btn:hover {
    color: var(--vroi-text-primary);
}

.vroi-mode-btn.is-active {
    background: var(--vroi-accent-contrast);
    color: var(--vroi-text-on-dark);
}

.vroi-mode-btn:focus-visible {
    outline: 2px solid var(--vroi-accent-contrast);
    outline-offset: 2px;
}

/* Salary input + qty buttons */

.vroi-salary-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.vroi-input-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    flex: 1;
}

.vroi-currency {
    font-size: 1rem;
    font-weight: 600;
    color: var(--vroi-text-muted);
}

.vroi-salary-input {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    color: var(--vroi-text-primary);
    /* 9ch comfortably fits 6-digit salaries with apostrophe (e.g. 999'999). */
    width: 9ch;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    border-bottom: 2px solid transparent;
    transition: border-color var(--vroi-transition);
    padding: 0;
    margin: 0;
}

.vroi-salary-input:focus {
    outline: none;
    border-bottom-color: var(--vroi-accent-contrast);
}

.vroi-qty-btn {
    appearance: none;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--vroi-card-border);
    background: var(--vroi-card-light-bg);
    color: var(--vroi-text-primary);
    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--vroi-transition), border-color var(--vroi-transition);
    border-radius: var(--vroi-radius);
}

.vroi-qty-btn:hover {
    background: #f3f4f6;
    border-color: var(--vroi-text-subtle);
}

.vroi-qty-btn:focus-visible {
    outline: 2px solid var(--vroi-accent-contrast);
    outline-offset: 2px;
}

/* Slider */

.vroi-slider-wrap {
    position: relative;
    width: 100%;
    height: 22px;
    display: flex;
    align-items: center;
}

.vroi-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: transparent;
    outline: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.vroi-slider-track {
    position: absolute;
    inset-block: 50%;
    inset-inline: 0;
    height: 6px;
    background: var(--vroi-card-border);
    border-radius: 3px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.vroi-slider-fill {
    position: absolute;
    inset-block: 50%;
    inset-inline-start: 0;
    height: 6px;
    width: 0;
    background: var(--vroi-accent);
    border-radius: 3px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    transition: width var(--vroi-transition);
}

.vroi-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: var(--vroi-accent-contrast);
    border: 3px solid var(--vroi-accent);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    margin-top: 0;
}

.vroi-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--vroi-accent-contrast);
    border: 3px solid var(--vroi-accent);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.vroi-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--vroi-accent-contrast);
    outline-offset: 2px;
}

/* =========================================================
 * Headline (always-visible numbers)
 * ========================================================= */

.vantage-roi-headline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid var(--vroi-card-border);
    border-radius: var(--vroi-radius);
}

@media (min-width: 720px) {
    .vantage-roi-headline {
        grid-template-columns: 1.3fr 1fr;
        align-items: center;
    }
}

.vroi-bridge-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vroi-bridge-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--vroi-text-muted);
}

.vroi-bridge-val {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 800;
    color: var(--vroi-text-primary);
}

.vroi-bridge-sign {
    font-size: 1.1rem;
}

.vroi-bridge-currency {
    font-size: 0.95rem;
    color: var(--vroi-text-muted);
}

.vroi-bridge-amount {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    line-height: 1;
}

.vroi-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--vroi-success-bg);
    color: var(--vroi-success-dark);
    border-radius: var(--vroi-radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
    justify-self: start;
}

@media (min-width: 720px) {
    .vroi-pill {
        justify-self: end;
    }
}

.vroi-pill svg {
    flex-shrink: 0;
}

.vroi-pill-label {
    font-weight: 500;
}

.vroi-pill-val {
    font-weight: 700;
}

/* State-driven hides — when the calculator classifies the scenario as
   no_uplift / current_exceeds_target, the +CHF 0 value and "Nie" break-even
   read as malfunction. Hide them; the bridge-label and pill-label texts are
   already swapped by JS to the no-uplift framing. */
.vantage-roi[data-vroi-state="no_uplift"] [data-vroi-role="bridge-val"],
.vantage-roi[data-vroi-state="current_exceeds_target"] [data-vroi-role="bridge-val"] {
    display: none;
}

.vantage-roi[data-vroi-state="no_uplift"] .vroi-pill-val,
.vantage-roi[data-vroi-state="current_exceeds_target"] .vroi-pill-val {
    display: none;
}

/* Pill colour shifts to a neutral tone when there's no direct Lohnsprung. */
.vantage-roi[data-vroi-state="no_uplift"] .vroi-pill,
.vantage-roi[data-vroi-state="current_exceeds_target"] .vroi-pill {
    background: #f3f4f6;
    color: var(--vroi-text-muted);
}

.vroi-state-explain {
    margin: 0;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--vroi-card-border);
    font-size: 0.8rem;
    color: var(--vroi-text-muted);
    line-height: 1.5;
    font-style: italic;
}

.vroi-state-explain[hidden] {
    display: none;
}

/* =========================================================
 * Detail card + gate
 * ========================================================= */

.vantage-roi-detail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vantage-roi-detail-blur {
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: filter var(--vroi-transition), opacity var(--vroi-transition);
}

/* Locked state — pattern B (default): blur the detail, gate sits absolute over it. */
.vantage-roi[data-vroi-locked="true"][data-vroi-gate-pattern="absolute"] .vantage-roi-detail-blur {
    filter: blur(var(--vroi-blur));
    opacity: 0.6;
    pointer-events: none;
    user-select: none;
}

.vantage-roi[data-vroi-locked="true"][data-vroi-gate-pattern="absolute"] .vantage-roi-gate {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vroi-overlay-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 2;
    padding: 20px;
}

/* Locked state — pattern A (fallback): hide blurred detail, gate inline below. */
.vantage-roi[data-vroi-locked="true"][data-vroi-gate-pattern="below"] .vantage-roi-detail-blur {
    display: none;
}

.vantage-roi[data-vroi-locked="true"][data-vroi-gate-pattern="below"] .vantage-roi-gate {
    position: relative;
    background: #fafafa;
    border: 1px solid var(--vroi-card-border);
    padding: 24px;
}

/* Pattern A reveal button: shown when locked + below + not yet revealed. */
.vantage-roi[data-vroi-locked="true"][data-vroi-gate-pattern="below"][data-vroi-gate-revealed="false"] .vroi-gate-form {
    display: none;
}

.vantage-roi[data-vroi-locked="true"][data-vroi-gate-pattern="below"][data-vroi-gate-revealed="false"] .vroi-gate-reveal-btn {
    display: inline-flex !important;
}

/* Unlocked state: gate hidden, detail unblurred. */
.vantage-roi[data-vroi-locked="false"] .vantage-roi-gate {
    display: none;
}

/* Gate content layout */

.vroi-gate-content {
    width: 100%;
    max-width: 480px;
    background: var(--vroi-card-light-bg);
    border: 1px solid var(--vroi-card-border);
    border-radius: var(--vroi-radius);
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vroi-gate-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--vroi-text-primary);
}

.vroi-gate-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--vroi-text-muted);
}

.vroi-gate-reveal-btn {
    appearance: none;
    align-self: flex-start;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--vroi-accent);
    color: var(--vroi-accent-contrast);
    border: 2px solid var(--vroi-accent);
    border-radius: var(--vroi-radius);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--vroi-transition), border-color var(--vroi-transition);
}

.vroi-gate-reveal-btn:hover {
    background: var(--vroi-accent-dark);
    border-color: var(--vroi-accent-dark);
}

.vroi-gate-reveal-btn:focus-visible {
    outline: 2px solid var(--vroi-accent-contrast);
    outline-offset: 2px;
}

.vroi-gate-form {
    display: block;
}

/* Mock unlock (dev only) */

.vroi-gate-mock {
    padding: 14px;
    background: #fff8d6;
    border: 1px dashed var(--vroi-warning);
    font-size: 0.85rem;
    color: var(--vroi-text-primary);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vroi-gate-mock code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background: rgba(0, 0, 0, 0.06);
    padding: 0 4px;
}

.vroi-gate-mock-btn {
    appearance: none;
    align-self: flex-start;
    padding: 8px 14px;
    background: var(--vroi-warning);
    color: var(--vroi-text-primary);
    border: 0;
    border-radius: var(--vroi-radius);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Mobile: pattern-B overlay can crowd; lift gate vertical alignment */
@media (max-width: 480px) {
    .vantage-roi[data-vroi-locked="true"][data-vroi-gate-pattern="absolute"] .vantage-roi-gate {
        padding: 12px;
        align-items: flex-start;
    }
    .vroi-gate-content {
        padding: 18px;
    }
}

/* Chart */

.vroi-chart-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vroi-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.vroi-chart-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vroi-text-muted);
}

.vroi-chart-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--vroi-text-muted);
}

.vroi-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vroi-legend-line {
    display: inline-block;
    width: 22px;
    height: 3px;
}

.vroi-legend-line-baseline {
    background: var(--vroi-chart-baseline);
}

.vroi-legend-line-edu {
    background: var(--vroi-chart-edu);
}

.vroi-chart-area {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 4px;
    /* Height is driven by the SVG's 2:1 aspect ratio so the chart stays
       balanced across viewports instead of getting flattened by the host
       column's width. max-height caps it on very wide displays. */
    align-items: stretch;
    max-height: 320px;
}

@media (max-width: 480px) {
    .vroi-chart-area {
        grid-template-columns: 36px 1fr;
        max-height: 220px;
    }
    .vroi-xaxis {
        padding-left: 40px;
    }
}

.vroi-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.7rem;
    color: var(--vroi-text-muted);
    padding: 4px 0;
    line-height: 1;
}

.vroi-chart-svg {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    max-height: 100%;
    overflow: hidden;
}

.vroi-xaxis {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--vroi-text-muted);
    padding-left: 54px;
    padding-right: 4px;
}

/* Chart stroke classes — declared on the root for inheritance */

.vantage-roi .vroi-chart-line-baseline {
    stroke: var(--vroi-chart-baseline);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Dashed baseline in no-uplift / current-exceeds states. The path is drawn
   on top of the educated line in those states (see renderChart), so the dash
   gaps reveal the solid educated stroke beneath — honest visual signal that
   the alternative ("status quo") trajectory currently overlaps the educated
   one rather than implying a non-existent separation. */
.vantage-roi[data-vroi-state="no_uplift"] .vroi-chart-line-baseline,
.vantage-roi[data-vroi-state="current_exceeds_target"] .vroi-chart-line-baseline {
    stroke-dasharray: 5 3;
}

/* Keep the legend's baseline swatch consistent with the chart stroke — when
   the chart line goes dashed, the legend sample should too. */
.vantage-roi[data-vroi-state="no_uplift"] .vroi-legend-line-baseline,
.vantage-roi[data-vroi-state="current_exceeds_target"] .vroi-legend-line-baseline {
    background: repeating-linear-gradient(
        to right,
        var(--vroi-chart-baseline) 0 5px,
        transparent 5px 8px
    );
}

.vantage-roi .vroi-chart-line-edu {
    stroke: var(--vroi-chart-edu);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.vantage-roi .vroi-chart-area-edu {
    fill: var(--vroi-chart-edu-fill-from);
    stroke: none;
}

.vantage-roi .vroi-chart-grid-line {
    stroke: var(--vroi-chart-grid);
    fill: none;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.vantage-roi .vroi-chart-grid-line.is-dashed {
    stroke-dasharray: 4 3;
}

.vantage-roi .vroi-chart-marker-grad-line {
    stroke: var(--vroi-chart-marker-grad);
    stroke-dasharray: 4 3;
    stroke-width: 1;
    opacity: 0.5;
    vector-effect: non-scaling-stroke;
}

.vantage-roi .vroi-chart-marker-grad-dot {
    fill: var(--vroi-accent);
    stroke: var(--vroi-accent-contrast);
    stroke-width: 2;
}

.vantage-roi .vroi-chart-marker-grad-label {
    fill: var(--vroi-accent-contrast);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Cost grid */

.vroi-cost-grid {
    background: #fafafa;
    border: 1px solid var(--vroi-card-border);
    border-radius: var(--vroi-radius);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vroi-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--vroi-text-muted);
}

.vroi-cost-row[hidden] {
    display: none;
}

.vroi-cost-row-refund {
    color: var(--vroi-success);
}

.vroi-cost-row-refund .vroi-cost-val-refund {
    color: var(--vroi-success);
    font-weight: 600;
}

.vroi-cost-divider {
    border: 0;
    border-top: 1px solid var(--vroi-card-border);
    margin: 4px 0;
}

.vroi-cost-row-total {
    color: var(--vroi-text-primary);
    font-weight: 700;
    font-size: 0.95rem;
}

.vroi-cost-row-total .vroi-cost-val {
    color: var(--vroi-text-primary);
}

/* Profit block */

.vroi-profit-block {
    background: var(--vroi-card-dark-bg);
    color: var(--vroi-text-on-dark);
    border-radius: var(--vroi-radius);
    padding: 22px;
    text-align: center;
}

.vroi-profit-block.is-negative .vroi-profit-amount {
    color: var(--vroi-danger);
}

.vroi-profit-block.is-positive .vroi-profit-amount {
    color: var(--vroi-accent);
}

.vroi-profit-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 8px;
}

.vroi-profit-val-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}

.vroi-profit-sign {
    font-size: 1.4rem;
    font-weight: 500;
}

.vroi-profit-block.is-positive .vroi-profit-sign {
    color: var(--vroi-accent);
}

.vroi-profit-block.is-negative .vroi-profit-sign {
    color: var(--vroi-danger);
}

.vroi-profit-currency {
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.vroi-profit-amount {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    color: var(--vroi-accent);
    letter-spacing: -0.02em;
}

.vroi-profit-sub {
    margin-top: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* CTA */

.vroi-cta-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vroi-cta {
    appearance: none;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: var(--vroi-accent);
    color: var(--vroi-accent-contrast);
    text-decoration: none;
    border: 2px solid var(--vroi-accent);
    border-radius: var(--vroi-radius);
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--vroi-transition), border-color var(--vroi-transition), transform var(--vroi-transition);
}

.vroi-cta:hover {
    background: var(--vroi-accent-dark);
    border-color: var(--vroi-accent-dark);
    color: var(--vroi-accent-contrast);
    transform: translateY(-1px);
}

.vroi-cta:focus-visible {
    outline: 2px solid var(--vroi-accent-contrast);
    outline-offset: 2px;
}

/* Secondary CTA — smaller outlined button below the primary. Keeps the
   primary as the visual anchor; secondary is a scroll-to-enrollment shortcut.
   Schools that don't ship a secondary CTA simply omit the markup. */
.vroi-cta-secondary {
    background: transparent;
    color: var(--vroi-text-primary);
    border-color: var(--vroi-card-border);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 18px;
    letter-spacing: 0.01em;
}

.vroi-cta-secondary:hover {
    background: #f3f4f6;
    border-color: var(--vroi-text-subtle);
    color: var(--vroi-text-primary);
    transform: none;
}

/* =========================================================
 * Disclaimer
 * ========================================================= */

.vantage-roi-disclaimer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--vroi-card-border);
    padding-top: 14px;
}

.vroi-disclaimer-course,
.vroi-disclaimer-general {
    margin: 0;
    font-size: 0.7rem;
    color: var(--vroi-text-muted);
    line-height: 1.5;
}

.vroi-disclaimer-course[hidden] {
    display: none;
}

/* =========================================================
 * Reduced-motion guard
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .vantage-roi {
        --vroi-transition: 0s;
    }

    .vantage-roi *,
    .vantage-roi *::before,
    .vantage-roi *::after {
        transition: none !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
    }
}