/* =========================================================
   REV SOLAR — Savings Calculator component (.rs-calc)
   Fully isolated: every selector is scoped under .rs-calc, all
   tokens are --rsc-* on the root, and the component forces a light
   color-scheme so dark-mode UAs don't wash out the text.
   ========================================================= */

.rs-calc {
    --rsc-navy: #14283F;
    --rsc-teal: #14524B;
    --rsc-gold: #C8891B;
    --rsc-ink: #1A1A1A;
    --rsc-slate: #5D6B7A;
    --rsc-line: #E2E6EA;
    --rsc-pale: #F5F8F7;
    --rsc-white: #FFFFFF;
    --rsc-pos: #0F5132;
    --rsc-warn: #9A6A00;
    --rsc-red: #B01515;

    color-scheme: light;
    color: var(--rsc-ink);
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

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

/* Optional hero */
.rs-calc .rsc-hero {
    background: linear-gradient(160deg, var(--rsc-navy), #0e1e30);
    color: #fff;
    padding: 32px 24px 44px;
    border-radius: 16px 16px 0 0;
}
.rs-calc .rsc-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: 2px;
    color: var(--rsc-gold); text-transform: uppercase; margin-bottom: 8px;
}
.rs-calc .rsc-h1 { font-size: 26px; margin: 0 0 8px; line-height: 1.25; color: #fff; }
.rs-calc .rsc-h1 em { color: var(--rsc-gold); font-style: normal; }
.rs-calc .rsc-sub { color: #C9D6DF; font-size: 15px; max-width: 560px; margin: 0; }
.rs-calc .rsc-hero + .rsc-card { margin-top: -20px; }

.rs-calc .rsc-card {
    background: var(--rsc-white);
    border: 1px solid var(--rsc-line);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(20,40,63,.08);
    padding: 26px;
    position: relative;
    z-index: 2;
}

/* Category selector */
.rs-calc .rsc-step-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.rs-calc .rsc-step-tab {
    flex: 1; min-width: 110px; text-align: center; padding: 10px 8px;
    border-radius: 10px; border: 1.5px solid var(--rsc-line);
    font-size: 13px; font-weight: 700; color: var(--rsc-slate);
    cursor: pointer; transition: .15s ease; background: #FAFBFC; font-family: inherit;
}
.rs-calc .rsc-step-tab:not(.rsc-active):hover {
    border-color: var(--rsc-teal); color: var(--rsc-teal); background: #fff;
}
.rs-calc .rsc-step-tab.rsc-active {
    border-color: var(--rsc-teal); background: var(--rsc-teal); color: #fff;
    box-shadow: 0 5px 14px rgba(20, 82, 75, .28);
}

.rs-calc .rsc-fl {
    display: block; font-size: 12.5px; font-weight: 700;
    color: var(--rsc-navy); margin: 14px 0 6px;
}
.rs-calc .rsc-fl--first { margin-top: 0; }

.rs-calc input[type=text],
.rs-calc input[type=number],
.rs-calc select {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--rsc-line);
    border-radius: 10px; font-size: 15px; font-family: inherit;
    color: var(--rsc-ink); background: #fff;
}
.rs-calc input:focus,
.rs-calc select:focus { outline: none; border-color: var(--rsc-teal); }

.rs-calc .rsc-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rs-calc .rsc-pill {
    padding: 9px 16px; border-radius: 20px; border: 1.5px solid var(--rsc-line);
    font-size: 13.5px; font-weight: 600; color: var(--rsc-ink);
    cursor: pointer; background: #fff; transition: .15s ease; font-family: inherit;
}
.rs-calc .rsc-pill:not(.rsc-sel):hover { border-color: var(--rsc-teal); color: var(--rsc-teal); }
.rs-calc .rsc-pill.rsc-sel {
    background: var(--rsc-teal); border-color: var(--rsc-teal); color: #fff;
    box-shadow: 0 4px 11px rgba(20, 82, 75, .24);
}

.rs-calc .rsc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .rs-calc .rsc-row2 { grid-template-columns: 1fr; } }

.rs-calc .rsc-btn {
    display: inline-block; width: 100%; text-align: center;
    padding: 15px 20px; border-radius: 11px; border: none;
    font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 20px;
    transition: .15s; font-family: inherit; text-decoration: none;
}
.rs-calc .rsc-btn-p {
    background: var(--rsc-gold);
    background-image: linear-gradient(180deg, #D79A2A 0%, var(--rsc-gold) 55%, #B4790F 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(60, 35, 0, .38);   /* keeps white crisp on the gold */
    box-shadow: 0 6px 16px rgba(200, 137, 27, .28);
}
.rs-calc .rsc-btn-p:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(200, 137, 27, .36);
    filter: brightness(1.03);
}
.rs-calc .rsc-btn-p:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(200, 137, 27, .3); }
.rs-calc .rsc-btn-w { background: #25D366; color: #fff; }
.rs-calc .rsc-btn-c { background: var(--rsc-teal); color: #fff; }

.rs-calc .rsc-err {
    color: var(--rsc-red); font-size: 12.5px; margin-top: 4px; font-weight: 600;
}

/* Results */
.rs-calc .rsc-results { margin-top: 26px; padding-top: 22px; border-top: 2px dashed var(--rsc-line); }
.rs-calc .rsc-urgency {
    background: #FFF7E6; border: 1px solid #E8C879; border-radius: 10px;
    padding: 12px 16px; font-size: 13.5px; color: #7A5A0F; margin-bottom: 18px; font-weight: 600;
}
.rs-calc .rsc-result-hero {
    background: linear-gradient(135deg, var(--rsc-teal), #0e3a34); color: #fff;
    border-radius: 14px; padding: 22px; text-align: center; margin-bottom: 16px;
}
.rs-calc .rsc-result-hero .rsc-big { font-size: 38px; font-weight: 800; color: var(--rsc-gold); line-height: 1; overflow-wrap: anywhere; }
.rs-calc .rsc-result-hero .rsc-lbl { font-size: 13px; color: #C9E6DF; margin-top: 4px; font-weight: 600; }
.rs-calc .rsc-hero-sub { font-size: 13.5px; color: #EAF6EF; margin-top: 8px; font-weight: 700; }

/* "How we calculated this" — secondary notes + disclaimer, collapsed by default */
.rs-calc .rsc-details { margin-top: 14px; border-top: 1px solid var(--rsc-line); padding-top: 10px; }
.rs-calc .rsc-details__sum {
    cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--rsc-teal);
    list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.rs-calc .rsc-details__sum::-webkit-details-marker { display: none; }
.rs-calc .rsc-details__sum::before { content: "▸"; font-size: 11px; transition: transform .15s; }
.rs-calc .rsc-details[open] .rsc-details__sum::before { transform: rotate(90deg); }
.rs-calc .rsc-details__body .rsc-disclaim { margin-top: 10px; }

.rs-calc .rsc-gridR { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 520px) { .rs-calc .rsc-gridR { grid-template-columns: 1fr; } }
.rs-calc .rsc-rcard { background: var(--rsc-pale); border-radius: 12px; padding: 16px; }
.rs-calc .rsc-rcard .rsc-v { font-size: 22px; font-weight: 800; color: var(--rsc-navy); overflow-wrap: anywhere; }
.rs-calc .rsc-rcard .rsc-l { font-size: 12px; color: var(--rsc-slate); font-weight: 600; margin-top: 2px; }
.rs-calc .rsc-rcard.rsc-pos .rsc-v { color: var(--rsc-pos); }

.rs-calc .rsc-bill-compare { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.rs-calc .rsc-bc-box { flex: 1; text-align: center; padding: 16px 10px; border-radius: 12px; }
.rs-calc .rsc-bc-box.rsc-before { background: #FDECEA; color: #9A3412; }
.rs-calc .rsc-bc-box.rsc-after { background: #EAF6EF; color: var(--rsc-pos); }
.rs-calc .rsc-bc-box .rsc-v { font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.rs-calc .rsc-bc-box .rsc-l { font-size: 11.5px; font-weight: 700; margin-top: 2px; }
.rs-calc .rsc-bc-arrow { font-size: 22px; color: var(--rsc-slate); }

.rs-calc .rsc-note { font-size: 12px; color: var(--rsc-slate); line-height: 1.6; margin-top: 6px; }
.rs-calc .rsc-disclaim {
    font-size: 11.5px; color: var(--rsc-slate); margin-top: 16px;
    padding-top: 12px; border-top: 1px solid var(--rsc-line);
}

.rs-calc .rsc-cta-box { margin-top: 20px; padding: 18px; background: var(--rsc-pale); border-radius: 12px; }
.rs-calc .rsc-cta-box h3 { margin: 0 0 4px; font-size: 16px; color: var(--rsc-navy); }
.rs-calc .rsc-cta-box p { margin: 0 0 12px; font-size: 13px; color: var(--rsc-slate); }
.rs-calc .rsc-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-calc .rsc-cta-row .rsc-btn { margin-top: 0; }
@media (max-width: 480px) { .rs-calc .rsc-cta-row { grid-template-columns: 1fr; } }

/* Lead-capture form (shown in results when lead-capture is on) */
.rs-calc .rsc-lead {
    margin-top: 20px; padding: 18px; background: var(--rsc-pale); border-radius: 12px;
}
.rs-calc .rsc-lead__title { margin: 0 0 4px; font-size: 16px; color: var(--rsc-navy); }
.rs-calc .rsc-lead__sub { margin: 0 0 12px; font-size: 13px; color: var(--rsc-slate); }
.rs-calc .rsc-consent {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; color: var(--rsc-slate); margin: 12px 0; line-height: 1.5;
}
.rs-calc .rsc-consent input { width: auto; margin-top: 2px; flex: 0 0 auto; }
.rs-calc .rsc-consent a { color: var(--rsc-teal); }
.rs-calc .rsc-lead .rsc-err { margin-bottom: 10px; }

/* Results popup (results-mode="modal") — fixed-height dialog with a pinned key
   header, a scrolling middle, and a pinned contact footer, so the headline
   numbers and the contact form are both always on screen (no long scroll). */
.rs-calc .rsc-modal {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px 16px;
}
.rs-calc .rsc-modal[hidden] { display: none; }
.rs-calc .rsc-modal__backdrop {
    position: fixed; inset: 0; background: rgba(10, 20, 35, .55);
}
.rs-calc .rsc-modal__dialog {
    position: relative; z-index: 1; width: 100%; max-width: 560px;
    max-height: 92vh;
    display: flex; flex-direction: column; overflow: hidden;   /* the regions scroll, not the dialog */
    background: var(--rsc-white); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(10, 20, 35, .35);
    padding: 0;
}
.rs-calc .rsc-modal__close {
    position: absolute; top: 8px; right: 10px; z-index: 3;
    width: 34px; height: 34px; border: none; background: rgba(255, 255, 255, .78);
    font-size: 24px; line-height: 1; color: var(--rsc-slate);
    cursor: pointer; border-radius: 8px;
}
.rs-calc .rsc-modal__close:hover { background: var(--rsc-pale); color: var(--rsc-ink); }
.rs-calc .rsc-modal__body {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden;
}

/* Inside the modal, lay the results out as header / scroll / footer. */
.rs-calc .rsc-modal .rsc-results {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    margin: 0; padding: 0; border-top: 0;
}
.rs-calc .rsc-modal .rsc-results__scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--rsc-line);
}
.rs-calc .rsc-modal .rsc-results__scroll > :first-child { margin-top: 0; }
.rs-calc .rsc-modal .rsc-lead,
.rs-calc .rsc-modal .rsc-cta-box {
    flex: 0 0 auto; margin: 0; border-radius: 0;
    border-top: 1px solid var(--rsc-line); background: #fff;
}

/* Compact spacing so the header + footer stay short and the middle rarely needs
   to scroll. Scoped to the modal — inline results keep their roomier spacing. */
.rs-calc .rsc-modal .rsc-results__key { flex: 0 0 auto; padding: 13px 20px 9px; }
.rs-calc .rsc-modal .rsc-results__key .rsc-urgency { padding: 8px 12px; font-size: 12px; margin-bottom: 9px; }
.rs-calc .rsc-modal .rsc-result-hero { margin-bottom: 0; padding: 13px 16px; }
.rs-calc .rsc-modal .rsc-result-hero .rsc-big { font-size: 29px; }
.rs-calc .rsc-modal .rsc-result-hero .rsc-lbl { font-size: 12px; margin-top: 2px; }
.rs-calc .rsc-modal .rsc-hero-sub { font-size: 13px; margin-top: 5px; }

.rs-calc .rsc-modal .rsc-results__scroll { padding: 11px 20px; }
.rs-calc .rsc-modal .rsc-bill-compare { margin-bottom: 11px; gap: 10px; }
.rs-calc .rsc-modal .rsc-bill-compare .rsc-bc-box { padding: 10px 8px; }
.rs-calc .rsc-modal .rsc-bill-compare .rsc-bc-box .rsc-v { font-size: 18px; }
.rs-calc .rsc-modal .rsc-gridR { gap: 9px; margin-bottom: 0; grid-template-columns: 1fr 1fr; }
.rs-calc .rsc-modal .rsc-gridR .rsc-rcard { padding: 11px 12px; }
.rs-calc .rsc-modal .rsc-gridR .rsc-rcard .rsc-v { font-size: 19px; }
.rs-calc .rsc-modal .rsc-details { margin-top: 10px; padding-top: 8px; }

.rs-calc .rsc-modal .rsc-lead,
.rs-calc .rsc-modal .rsc-cta-box { padding: 11px 20px calc(11px + env(safe-area-inset-bottom, 0px)); }
.rs-calc .rsc-modal .rsc-lead__sub { font-size: 12.5px; margin-bottom: 8px; }
.rs-calc .rsc-modal .rsc-lead .rsc-fl { margin: 7px 0 4px; }
.rs-calc .rsc-modal .rsc-lead input[type=text],
.rs-calc .rsc-modal .rsc-lead input[type=tel] { padding: 9px 12px; font-size: 14px; }
.rs-calc .rsc-modal .rsc-consent { margin: 8px 0; font-size: 11.5px; }
.rs-calc .rsc-modal .rsc-cta-row { gap: 8px; margin-top: 10px; }
.rs-calc .rsc-modal .rsc-cta-row .rsc-btn { padding: 10px 12px; font-size: 13.5px; }
/* keep name/phone and the two CTAs side-by-side even on phones, so the footer
   stays short (stacking them is what forced the middle to scroll) */
.rs-calc .rsc-modal .rsc-lead .rsc-row2,
.rs-calc .rsc-modal .rsc-cta-row { grid-template-columns: 1fr 1fr; }

@media (max-width: 400px) {
    .rs-calc .rsc-modal { padding: 0; }
    .rs-calc .rsc-modal__dialog { max-height: 100vh; max-height: 100dvh; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rs-calc .rsc-btn-p:hover,
    .rs-calc .rsc-btn-p:active { transform: none; }
}