/* ============================================================
   Sun Pumps — Calculator Section Widget
   Exact design match to the original JSX implementation
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
.spc-wrap {
    --spc-red:          #ED1C2B;
    --spc-red-dark:     #C8101E;
    --spc-yellow:       #FFDC16;
    --spc-ink1:         #0F1A1F;
    --spc-ink2:         #1F2D34;
    --spc-ink3:         #37464E;
    --spc-ink4:         #5C6B73;
    --spc-ink5:         #8A969D;
    --spc-paper1:       #FFFFFF;
    --spc-paper2:       #FAFAF7;
    --spc-paper3:       #F2F1EB;
    --spc-paper4:       #E6E5DE;
    --spc-line1:        rgba(15, 26, 31, 0.08);
    --spc-line2:        rgba(15, 26, 31, 0.14);
    --spc-line3:        rgba(15, 26, 31, 0.24);
    --spc-gold-tint:    #FFF8D0;
    --spc-green:        #7AC97F;
    --spc-r-sm:         4px;
    --spc-r-md:         8px;
    --spc-r-lg:         14px;
    --spc-r-xl:         22px;
    --spc-font-display: 'Inter', system-ui, sans-serif;
    --spc-font-body:    'Inter', system-ui, sans-serif;
    --spc-font-mono:    'JetBrains Mono', ui-monospace, monospace;

    box-sizing: border-box;
    background: var(--spc-paper2);
    padding: 48px 24px 64px;
}

.spc-wrap *, .spc-wrap *::before, .spc-wrap *::after {
    box-sizing: inherit;
}

/* ── Container ───────────────────────────────────────────── */
.spc-container {
    max-width: 1200px;
    margin: 0 auto;
}


/* ── Hero ────────────────────────────────────────────────── */
.spc-hero {
    max-width: 760px;
    margin-bottom: 40px;
}

.spc-eyebrow {
    display: inline-block;
    font-family: var(--spc-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--spc-red);
    margin-bottom: 14px;
}

.spc-heading {
    font-family: var(--spc-font-display);
    font-size: clamp(40px, 5.4vw, 80px);
    font-weight: 700;
    color: var(--spc-ink1);
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0 0 18px;
}

.spc-accent { color: var(--spc-red); }

.spc-lede {
    font-family: var(--spc-font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--spc-ink3);
    margin: 0;
}

/* ── Tab Strip ───────────────────────────────────────────── */
.spc-tab-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--spc-line2);
    border-radius: var(--spc-r-lg);
    overflow: hidden;
    background: var(--spc-paper1);
    margin-bottom: 0;
}

.spc-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
    background: var(--spc-paper1);
    color: var(--spc-ink2);
    border: 0;
    border-right: 1px solid var(--spc-line1);
    cursor: pointer;
    text-align: left;
    transition: background 200ms ease;
    font-family: inherit;
}

.spc-tab:last-child { border-right: 0; }

.spc-tab.is-active {
    background: var(--spc-ink1) !important;
    color: #FFFFFF !important;
}

.spc-tab-num {
    font-family: var(--spc-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--spc-ink5);
    margin-bottom: 6px;
    transition: color 200ms;
}

.spc-tab.is-active .spc-tab-num { color: var(--spc-yellow); }

.spc-tab-label {
    font-family: var(--spc-font-display);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
    transition: font-weight 200ms;
}

.spc-tab.is-active .spc-tab-label { font-weight: 700; }

.spc-tab-sub {
    font-size: 12.5px;
    color: var(--spc-ink4);
    line-height: 1.4;
    transition: color 200ms;
}

.spc-tab.is-active .spc-tab-sub { color: rgba(255,255,255,0.7); }

/* ── Calc Body ───────────────────────────────────────────── */
.spc-calc-body {
    background: var(--spc-paper2);
    padding: 32px 0 0;
}

/* ── Panels ──────────────────────────────────────────────── */
.spc-panel {
    display: none;
}

.spc-panel.is-active {
    display: block;
    animation: spc-fade-in 220ms ease;
}

@keyframes spc-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Two-col layout ──────────────────────────────────────── */
.spc-two-col {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
}


@media (max-width: 768px) {
    .spc-two-col {
        display: block; /* grid unset */
        grid-template-columns: unset;
        gap: 0;
    }
}


/* ── Input Card ──────────────────────────────────────────── */
.spc-input-card {
    background: var(--spc-paper1);
    border: 1px solid var(--spc-line2);
    border-radius: var(--spc-r-lg);
    padding: 32px 36px;
}

.spc-eyebrow-sm {
    display: block;
    font-family: var(--spc-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--spc-red);
    margin-bottom: 8px;
}

.spc-eyebrow-sm.invert { color: var(--spc-yellow); }

.spc-card-title {
    font-family: var(--spc-font-display);
    font-size: clamp(20px, 2.2vw, 48px);
    font-weight: 700;
    color: var(--spc-ink1);
    letter-spacing: -0.02em;
    margin: 10px 0 28px;
    line-height: 1.2;
}

/* ── Slider Row ──────────────────────────────────────────── */
.spc-slider-row {
    margin-bottom: 22px;
}

.spc-slider-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    gap: 12px;
}

.spc-slider-top label {
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--spc-ink2);
    cursor: default;
    line-height: 1.4;
    flex: 1;
}

.spc-slider-val {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.spc-num {
    font-family: var(--spc-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--spc-ink1);
    letter-spacing: -0.02em;
    line-height: 1;
}

.spc-prefix {
    font-family: var(--spc-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--spc-ink1);
    letter-spacing: -0.02em;
}

.spc-unit {
    font-family: var(--spc-font-mono);
    font-size: 12px;
    color: var(--spc-ink4);
}

/* ── Range Input ─────────────────────────────────────────── */
.spc-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px !important;
    background: var(--spc-paper4);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    accent-color: var(--spc-red);
}

.spc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--spc-red);
    cursor: pointer;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 4px rgba(237,28,43,0.35);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.spc-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--spc-red);
    cursor: pointer;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 4px rgba(237,28,43,0.35);
}

.spc-range:hover::-webkit-slider-thumb,
.spc-range:focus::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(237,28,43,0.45);
}

/* ── Divider ─────────────────────────────────────────────── */
.spc-divider {
    height: 1px;
    background: var(--spc-line1);
    border: 0;
    margin: 24px 0 20px;
}

/* ── Group Labels ────────────────────────────────────────── */
.spc-group-label {
    display: block;
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--spc-ink2);
    margin-bottom: 10px;
}

/* ── Option Buttons ──────────────────────────────────────── */
.spc-btn-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 768px) {
    .spc-btn-group {
        grid-template-columns: repeat(2, 1fr);
    }
}
.spc-btn-group--4 {
    grid-template-columns: repeat(4, 1fr);
}

.spc-opt-btn {
    padding: 11px 8px;
    border: 1.5px solid var(--spc-line2);
    border-radius: var(--spc-r-md);
    background: var(--spc-paper1);
    font-family: var(--spc-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--spc-ink1);
    cursor: pointer;
    transition: border-color 150ms, background 150ms, font-weight 150ms;
    text-align: center;
    line-height: 1.3;
}

.spc-opt-btn:hover {
    border-color: var(--spc-ink3);
    background: var(--spc-paper3);
}

.spc-opt-btn.is-active {
    border-color: var(--spc-ink1);
    background: var(--spc-paper3) !important;
    font-weight: 600;
}

/* ── Select Dropdown ─────────────────────────────────────── */
.spc-select-row { display: flex; flex-direction: column; }

.spc-select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--spc-line2);
    border-radius: var(--spc-r-md);
    background: var(--spc-paper1);
    font-family: var(--spc-font-body);
    font-size: 14px;
    color: var(--spc-ink1);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    outline: none;
    transition: border-color 150ms;
}

.spc-select:focus { border-color: var(--spc-ink1); }

/* ── Output Column ───────────────────────────────────────── */
.spc-output-col {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Dark Result Card ────────────────────────────────────── */
.spc-result-dark {
    background: var(--spc-ink1);
    color: #FFFFFF;
    padding: 32px 36px;
    border-radius: var(--spc-r-lg);
}

.spc-result-big {
    margin: 14px 0 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.spc-big-num {
    font-family: var(--spc-font-display);
    font-size: clamp(44px, 5.5vw, 64px);
    font-weight: 700;
    color: var(--spc-yellow);
    letter-spacing: -0.025em;
    line-height: 1;
}

.spc-big-unit {
    font-family: var(--spc-font-mono);
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 100%;
    margin-top: 6px;
}

/* ── Breakdown Table ─────────────────────────────────────── */
.spc-breakdown-table {
    width: 100%;
    font-family: var(--spc-font-mono);
    font-size: 13px;
    border-collapse: collapse;
}

.spc-breakdown-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.spc-breakdown-table tbody tr.last {
    border-bottom: 0;
}

.spc-bt-label {
    padding: 10px 0;
    color: rgba(255,255,255,0.6);
}

.spc-bt-val {
    padding: 10px 0;
    text-align: right;
    color: #FFFFFF;
}
table td, table th{
	border: none !important;
}
table tbody>tr:nth-child(odd)>td, 
table tbody>tr:nth-child(odd)>th {
    background-color: transparent !important;
}

/* Hover remove */
table tbody tr:hover td,
table tbody tr:hover th {
    background-color: transparent !important;
}
.spc-bt-val.spc-green { color: var(--spc-green); }

/* ── Pump Recommendation Card ────────────────────────────── */
.spc-pump-card {
    background: var(--spc-paper1);
    border: 1px solid var(--spc-line2);
    border-radius: var(--spc-r-lg);
    padding: 24px 28px;
}

.spc-pump-name {
    font-family: var(--spc-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--spc-ink1);
    letter-spacing: -0.02em;
    margin: 8px 0 4px;
}

.spc-pump-desc {
    color: var(--spc-ink4);
    font-size: 13.5px;
    margin: 0 0 18px;
    line-height: 1.5;
}

/* ── View Pump Button ────────────────────────────────────── */
.spc-view-btn {
    display: block;
    width: 100%;
    padding: 14px 18px;
    background: var(--spc-red);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--spc-r-md);
    font-family: var(--spc-font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    letter-spacing: -0.01em;
    transition: background 150ms ease, transform 150ms ease;
    text-decoration: none;
}

.spc-view-btn:hover {
    background: var(--spc-red-dark, #C8101E) !important;
    transform: translateY(-1px);
	color:white !important;
}

.spc-view-btn:active { transform: translateY(0); }

/* ── Tip Box ─────────────────────────────────────────────── */
.spc-tip-box {
    padding: 18px 22px;
    background: var(--spc-gold-tint);
    border-radius: var(--spc-r-md);
    font-size: 13.5px;
    line-height: 1.55;
    color: #5C4502;
}

.spc-tip-box strong { color: var(--spc-ink1); }

/* ── Payback Card ────────────────────────────────────────── */
.spc-payback-card {
    background: var(--spc-paper1);
    border: 1x solid var(--spc-red);
    border-radius: var(--spc-r-lg);
    padding: 24px 28px;
}

.spc-payback-num {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 10px 0;
}

.spc-payback-num #spc-payback {
    font-family: var(--spc-font-display);
    font-size: 48px;
    font-weight: 700;
    color: var(--spc-red);
    letter-spacing: -0.025em;
    line-height: 1;
}

.spc-payback-unit {
    font-size: 18px;
    color: var(--spc-ink4);
    font-weight: 500;
}

.spc-payback-desc {
    margin: 0;
    color: var(--spc-ink4);
    font-size: 13.5px;
    line-height: 1.55;
}

/* ── Array Stats ─────────────────────────────────────────── */
.spc-arr-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin: 14px 0;
}

.spc-arr-stat-num {
    display: block;
    font-family: var(--spc-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--spc-yellow);
    letter-spacing: -0.02em;
}

.spc-arr-stat-label {
    display: block;
    font-family: var(--spc-font-mono);
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 3px;
}

.spc-arr-note {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .spc-tab-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .spc-tab:nth-child(2) { border-right: 0; }
    .spc-tab:nth-child(3) { border-top: 1px solid var(--spc-line1); }
    .spc-tab:nth-child(4) { border-top: 1px solid var(--spc-line1); border-right: 0; }
}

@media (max-width: 768px) {
    .spc-two-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .spc-output-col {
        position: static;
    }

    .spc-input-card {
        padding: 24px 20px;
    }

    .spc-result-dark {
        padding: 24px 20px;
		margin-top:20px;
    }

    .spc-slider-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .spc-slider-top label { font-size: 13px; }

    .spc-big-num {
        font-size: clamp(40px, 10vw, 56px);
    }
}

@media (max-width: 600px) {
    .spc-tab-strip {
        grid-template-columns: 1fr 1fr;
    }

    .spc-lede { font-size: 16px; }

    .spc-btn-group--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .spc-tab { padding: 16px 14px; }
    .spc-tab-label { font-size: 14px; }
    .spc-tab-sub { display: none; }

    .spc-arr-stats { grid-template-columns: 1fr 1fr; }
}