/* ==========================================================================
   Fleet ROI Calculator page (page-templates/fleet-calculator.php)
   Builds on fleet.css (fleet-page, fleet-section__inner, fleet-btn)
   and the shared PDP design tokens (pdp.css :root custom properties).
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.fleet-calc-hero {
    border-top: 5px solid var(--pdp-accent);
    background: var(--exg-black, #0a0a0a);
    color: #fff;
}
.fleet-calc-hero .fleet-section__inner {
    width: min(1180px, calc(100% - 48px));
    padding: var(--exg-section-space-compact, clamp(48px, 4.5vw, 64px)) 0;
}
.fleet-calc-hero__title {
    margin: 0 0 var(--exg-stack-title-gap, 16px);
    font-family: var(--exg-display);
    font-size: var(--exg-type-hero-size, clamp(58px, 4.45vw, 64px));
    font-weight: var(--exg-weight-display);
    line-height: var(--exg-type-hero-line, 1);
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.fleet-calc-hero__subtitle {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: var(--exg-type-lede-size, 18px);
    font-weight: var(--exg-weight-regular);
    line-height: var(--exg-type-lede-line, 27px);
}

/* --- Calculator layout ------------------------------------------------------ */
.fleet-calc { background: #f7f7f7; }
.fleet-calc__inner {
    display: grid;
    grid-template-columns: minmax(300px, 420px) 1fr;
    gap: var(--exg-space-8, 40px);
    text-align: left;
    align-items: start;
}
.fleet-calc__col-title {
    margin: 0 0 var(--exg-space-5, 20px);
    font-family: var(--exg-display);
    font-size: var(--exg-type-card-md-size, 28px);
    font-weight: var(--exg-weight-display);
    line-height: var(--exg-type-card-md-line, 32px);
    text-transform: uppercase;
}

/* --- Inputs ------------------------------------------------------------------ */
.fleet-calc__inputs {
    background: #fff;
    border: 1px solid var(--pdp-line, #e0e0e0);
    border-top: 5px solid var(--pdp-accent);
    border-radius: 6px;
    padding: var(--exg-space-7, 32px);
}
.fleet-calc__field { margin: 0 0 18px; }
.fleet-calc__field label {
    display: block;
    margin: 0 0 6px;
    font-size: var(--exg-type-small-size, 14px);
    font-weight: var(--exg-weight-strong);
    line-height: var(--exg-type-small-line, 20px);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.fleet-calc__hint {
    font-weight: var(--exg-weight-regular);
    text-transform: none;
    letter-spacing: 0;
    color: var(--pdp-muted, #707072);
}
.fleet-calc__field input[type="number"],
.fleet-calc__field select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    font-size: var(--exg-type-body-size, 16px);
    font-family: inherit;
    border: 1px solid var(--pdp-line, #ccc);
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.fleet-calc__field input:focus,
.fleet-calc__field select:focus {
    outline: 2px solid var(--pdp-accent, #febc16);
    outline-offset: -1px;
}
.fleet-calc__money {
    display: flex;
    align-items: center;
    border: 1px solid var(--pdp-line, #ccc);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}
.fleet-calc__money .fleet-calc__prefix {
    padding: 10px 0 10px 12px;
    font-size: 16px;
    color: var(--pdp-muted, #707072);
}
.fleet-calc__money input[type="number"] {
    border: 0;
    flex: 1;
}
.fleet-calc__money:focus-within {
    outline: 2px solid var(--pdp-accent, #febc16);
    outline-offset: -1px;
}
.fleet-calc__money input:focus { outline: none; }
.fleet-calc__field-note {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--pdp-muted, #707072);
}

/* Advanced assumptions */
.fleet-calc__advanced {
    margin-top: 22px;
    border-top: 1px solid var(--pdp-line, #e0e0e0);
    padding-top: 16px;
}
.fleet-calc__advanced summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: var(--exg-weight-strong);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 16px;
}
.fleet-calc__advanced summary:hover { color: #e5a806; }

/* --- Results ------------------------------------------------------------------- */
.fleet-calc__headline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 0 18px;
}
.fleet-calc__headline-card {
    background: var(--exg-black, #0a0a0a);
    color: #fff;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
}
.fleet-calc__headline-label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--exg-display);
    font-size: var(--exg-type-utility-size, 13px);
    font-weight: var(--exg-weight-action);
    line-height: var(--exg-type-utility-line, 18px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #c9c9c9;
}
.fleet-calc__headline-value {
    display: block;
    font-family: var(--exg-display);
    font-size: var(--exg-type-card-size, 34px);
    font-weight: var(--exg-weight-display);
    line-height: var(--exg-type-card-line, 36px);
    color: var(--pdp-accent);
}
.fleet-calc__needs-price {
    margin: 0 0 18px;
    padding: 10px 14px;
    font-size: 14px;
    background: #fff8e6;
    border: 1px solid var(--pdp-accent, #febc16);
    border-radius: 4px;
}

.fleet-calc__list { margin: 0 0 8px; }
.fleet-calc__row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 9px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--pdp-line, #e0e0e0);
}
.fleet-calc__row dt { margin: 0; }
.fleet-calc__row dd {
    margin: 0;
    font-weight: var(--exg-weight-action);
    white-space: nowrap;
}
.fleet-calc__row--bad dd { color: #c0392b; }
.fleet-calc__row--good dd { color: #1e8e3e; }
.fleet-calc__row--total {
    border-bottom: 0;
    border-top: 2px solid #111;
    margin-top: 4px;
    padding-top: 14px;
    font-size: 19px;
}
.fleet-calc__row--total dd { color: #1e8e3e; }

.fleet-calc__savings-title {
    margin: 28px 0 8px;
    font-family: var(--exg-display);
    font-size: var(--exg-type-feature-size, 20px);
    font-weight: var(--exg-weight-action);
    line-height: var(--exg-type-feature-line, 24px);
    text-transform: uppercase;
}
.fleet-calc__disclaimer {
    margin: 24px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pdp-muted, #707072);
}

/* --- CTA --------------------------------------------------------------------------- */
.fleet-calc-cta {
    background: var(--exg-black, #0a0a0a);
    color: #fff;
}
.fleet-calc-cta__title {
    margin: 0 0 8px;
    font-family: var(--exg-display);
    font-size: var(--exg-type-section-size, clamp(44px, 3.34vw, 48px));
    font-weight: var(--exg-weight-display);
    line-height: var(--exg-type-section-line, 1.083);
    text-transform: uppercase;
    color: #fff;
}
.fleet-calc-cta__text {
    margin: 0 0 24px;
    font-size: 17px;
    color: #c9c9c9;
}
.fleet-calc-cta__text a { color: var(--pdp-accent, #febc16) !important; text-decoration: none; }

/* --- Responsive ---------------------------------------------------------------------- */
@media (max-width: 900px) {
    .fleet-calc__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .fleet-calc-hero .fleet-section__inner { width: min(100% - 32px, 1180px); }
    .fleet-calc__headline { grid-template-columns: 1fr; }
    .fleet-calc-hero__title { font-size: var(--exg-type-hero-size, 46px); line-height: var(--exg-type-hero-line, 46px); }
    .fleet-calc__inputs { padding: var(--exg-space-6, 24px); }
    .fleet-calc__row { font-size: 14px; }
}