/* cost-comparison.css */

/* =========================
   BASE
========================= */
:root{
    --bg:#FAFBFC;
    --text: rgba(7, 21, 41, 0.65);
    --muted:#5A6B7B;
    --muted2:#8B99A8;
    --border:#E1E5EB;

    --blue:#0066FF;
    --blueDark:#0052CC;
    --green:#00D4AA;
    --amber:#F59E0B;

    --r3:24px;

    --shadow: 0 10px 28px rgba(10,22,40,.06);
    --shadow2: 0 18px 44px rgba(10,22,40,.10);
}

*{ box-sizing:border-box; }

.page{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    background:var(--bg);
    color:var(--text);
}

.layout{
    padding:48px 24px;
}
@media (min-width:768px){ .layout{ padding:64px 48px; } }
@media (min-width:1024px){ .layout{ padding:64px 80px; } }

.wrap{
    max-width:896px;
    margin:0 auto;
    padding-top: 100px;
}

/* =========================
   INTRO
========================= */
.introCard{
    background:#fff;
    border-radius:var(--r3);
    padding:32px;
    box-shadow:var(--shadow);
    margin-bottom:24px;
}

.introTitle{
    margin:0 0 12px 0;
    font-size:32px;
    font-weight:800;
    letter-spacing:-.02em;
}
@media (min-width:768px){ .introTitle{ font-size:40px; } }

.introLead{
    margin:0;
    color:var(--muted);
    font-size:18px;
}

/* =========================
   AREA
========================= */
.areaCard{
    background:#fff;
    border-radius:var(--r3);
    padding:32px;
    box-shadow:var(--shadow);
    margin-bottom:24px;
}

.areaHead{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

.areaBadge{
    width:52px;
    height:52px;
    border-radius:16px;
    background:rgba(0,102,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--blue);
    flex-shrink:0;
}

.areaBadgeIcon{
    width:24px;
    height:24px;
}

.areaTitle{
    margin:0;
    font-size:20px;
    font-weight:800;
}

.areaSelectWrap{ }

.areaSelect{
    width:100%;
    height:58px;
    border-radius:16px;
    border:1px solid var(--border);
    padding:0 18px;
    font-size:18px;
    box-shadow:0 1px 0 rgba(10,22,40,0.02);
    outline:none;
}

.areaSelect:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,102,255,0.12);
}

.areaHelp{
    margin:12px 0 0 0;
    color:var(--muted2);
    font-size:14px;
    line-height:1.5;
}

.areaReset{
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    gap:10px;

    /* hard reset (beats Milligram) */
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    height:auto !important;
    min-height:0 !important;
    line-height:1.1 !important;

    color:var(--blue) !important;
    font-weight:700;
    font-size:14px;
    cursor:pointer;

    -webkit-appearance:none;
    appearance:none;
}

.areaResetIcon{
    width:18px;
    height:18px;
}

.areaReset:hover,
.areaReset:focus,
.areaReset:active {
    color: #0066FF !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

/* =========================
   DISTANCE
========================= */
.distanceCard{
    background:#fff;
    border-radius:var(--r3);
    padding:32px;
    box-shadow:var(--shadow);
    margin-bottom:24px;
}

.distanceLabel{
    display:block;
    font-size:18px;
    font-weight:700;
    margin-bottom:14px;
}

.distanceRow{
    display:flex;
    align-items:center;
    gap:12px;
}

.distanceInput{
    width:100%;
    height:56px;
    border-radius:14px;
    border:1px solid var(--border);
    padding:0 14px;
    font-size:18px;
    outline:none;
}

.distanceInput:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,102,255,.12);
}

.distanceUnit{
    width:160px;
    height:56px;
    border-radius:14px;
    border:1px solid var(--border);
    padding:0 14px;
    font-size:18px;
}

.distanceHelp{
    margin:10px 0 0 0;
    font-size:12px;
    color:var(--muted2);
}

/* =========================
   DIESEL
========================= */
.dieselCard{
    border-radius:var(--r3);
    padding:32px;
    margin-bottom:24px;
    border:1px solid rgba(245,158,11,.20);
    background:linear-gradient(135deg, rgba(245,158,11,.05), rgba(245,158,11,.10));
}

.dieselHead{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.dieselIcon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(245,158,11,.18);
    display:flex;
    align-items:center;
    justify-content:center;
}

.dieselTitle{
    margin:0;
    font-size:24px;
    font-weight:700;
}

.dieselStack{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.dieselField{ }

.dieselFieldLabel{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:8px;
}

.dieselRow{
    display:flex;
    align-items:center;
    gap:10px;
}

.dieselUnitDollar{
    width:24px;
    text-align:center;
    font-weight:700;
    color:var(--muted);
    padding-bottom: 10px;
}

.dieselUnitRight{
    font-weight:700;
    color:var(--muted);
    white-space:nowrap;
}

.dieselInput{
    width:100%;
    height:48px;
    border-radius:14px;
    border:1px solid var(--border);
    padding:0 14px;
    font-size:16px;
    outline:none;
    background:#fff;
}

.dieselHelp{
    margin:8px 0 0 0;
    font-size:12px;
    color:var(--muted2);
}

/* =========================
   ELECTRIC
========================= */
.electricCard{
    border-radius:var(--r3);
    padding:32px;
    margin-bottom:24px;
    border:1px solid rgba(0,212,170,.20);
    background:linear-gradient(135deg, rgba(0,212,170,.05), rgba(0,212,170,.10));
}

.electricHead{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.electricIcon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(0,212,170,.15);
    display:flex;
    align-items:center;
    justify-content:center;
}

.electricTitle{
    margin:0;
    font-size:24px;
    font-weight:700;
}

.electricStack{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.electricField{ }

.electricFieldLabel{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:8px;
}

.electricRow{
    display:flex;
    align-items:center;
    gap:10px;
}

.electricUnitDollar{
    width:24px;
    text-align:center;
    font-weight:700;
    color:var(--muted);
    padding-bottom: 10px;
}

.electricUnitRight{
    font-weight:700;
    color:var(--muted);
    white-space:nowrap;
}

.electricInput{
    width:100%;
    height:48px;
    border-radius:14px;
    border:1px solid var(--border);
    padding:0 14px;
    font-size:16px;
    outline:none;
    background:#fff;
}

.electricHelp{
    margin:8px 0 0 0;
    font-size:12px;
    color:var(--muted2);
}

/* =========================
   MAINTENANCE
========================= */
.maintenanceCard{
    background:#fff;
    border-radius:var(--r3);
    padding:32px;
    box-shadow:var(--shadow);
    margin-bottom:24px;
}

.maintenanceTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.maintenanceLeft{
    display:flex;
    align-items:center;
    gap:10px;
}

.maintenanceMiniIcon{ font-size:18px; }

.maintenanceTitle{
    font-size:18px;
    font-weight:700;
}

.maintenanceHelp{
    margin:10px 0 0 0;
    font-size:12px;
    color:var(--muted2);
}

.maintenanceGrid{
    margin-top:14px;
    display:grid;
    gap:16px;
}

@media (min-width:768px){
    .maintenanceGrid{ grid-template-columns:1fr 1fr; }
}

.maintenanceRow{
    display:flex;
    align-items:center;
    gap:10px;
}

.maintenanceUnitDollar{
    width:24px;
    text-align:center;
    font-weight:700;
    color:var(--muted);
    padding-bottom: 10px;
}

.maintenanceUnitRight{
    font-weight:700;
    color:var(--muted);
    white-space:nowrap;
}

.maintenanceInput{
    width:100%;
    height:48px;
    border-radius:14px;
    border:1px solid var(--border);
    padding:0 14px;
    font-size:16px;
    outline:none;
}

.maintenanceFieldLabel{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:8px;
}

.maintenanceNote{
    margin:10px 0 0 0;
    font-size:12px;
    color:var(--muted2);
}

.maintenanceHidden{ display:none !important; }

/* Switch */
.maintenanceSwitch{
    position:relative;
    display:inline-block;
    width:52px;
    height:30px;
}
.maintenanceSwitch input{ display:none; }
.maintenanceSlider{
    position:absolute; inset:0;
    background:#D6DDE6;
    border-radius:999px;
    transition:.2s;
}
.maintenanceSlider:before{
    content:"";
    position:absolute;
    height:24px; width:24px;
    left:3px; top:3px;
    background:#fff;
    border-radius:999px;
    transition:.2s;
}
.maintenanceSwitch input:checked + .maintenanceSlider{
    background:rgba(0,102,255,.75);
}
.maintenanceSwitch input:checked + .maintenanceSlider:before{
    transform:translateX(22px);
}

/* =========================
   COMPARE BUTTON
========================= */
.compareWrap{
    display:flex;
    justify-content:center;
    margin: 0 0 48px 0;
}

.compareBtn{
    height:56px;
    padding:0 40px;
    border:none;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    box-shadow: 0 16px 30px rgba(0,102,255,.25);
}
.compareBtn:hover{ background:var(--blueDark); }

/* =========================
   RESULTS VISIBILITY
========================= */
.resultsHidden{ display:none; }

/* =========================
   TABLE
========================= */
.tableCard{
    background:#fff;
    border-radius:var(--r3);
    padding:32px;
    box-shadow:var(--shadow2);
    margin-bottom:24px;
}

.tableTitle{
    margin:0 0 18px 0;
    font-size:24px;
    font-weight:700;
}

.tableWrap{ overflow-x:auto; }

.tableMain{
    width:100%;
    border-collapse:collapse;
}

.tableMain thead tr{ border-bottom:2px solid var(--border); }
.tableMain tbody tr{ border-bottom:1px solid var(--border); }

.tableMain th, .tableMain td{ padding:14px 0; }
.tableMain th{ color:var(--muted); font-weight:700; }

.tableCenter{ text-align:center; }

.tableRowHidden{ display:none; }

.tableTotalRow{
    background:#F5F7FA;
    font-weight:900;
    color:var(--text);
}

/* =========================
   SAVINGS
========================= */
.savingsBox{
    border-radius:var(--r3);
    padding:20px 24px;
    border:2px solid rgba(139,153,168,.30);
    background:linear-gradient(135deg, rgba(139,153,168,.10), rgba(139,153,168,.20));
    box-shadow:var(--shadow);
    margin-bottom:24px;
}

.savingsLayout{
    display:grid;
    grid-template-columns:80px 1fr;
    gap:16px;
}

.savingsIconBox{
    width:70px;
    height:70px;
    border-radius:20px;
    background:rgba(0,212,170,.14);
    display:flex;
    align-items:center;
    justify-content:center;
}

.savingsIcon{
    width:28px;
    height:28px;
    object-fit:contain;
}

.savingsTitle{
    margin:0 0 10px 0;
    font-size:24px;
    font-weight:800;
}

.savingsValue{
    margin:0 0 10px 0;
    font-size:28px;
    font-weight:900;
    color:rgb(13,212,166);
}

.savingsBig{
    margin:0 0 10px 0;
    font-size:40px;
    font-weight:900;
    color:rgb(13,212,166);
}

.savingsNote{
    margin:0;
    font-size:13px;
    color:var(--muted);
}

/* =========================
   EMISSIONS
========================= */
.emissionsSection{
    border-radius:var(--r3);
    padding:24px;
    border:1px solid rgba(0,102,255,.20);
    background:linear-gradient(135deg, rgba(0,102,255,.05), rgba(0,102,255,.10));
    margin-bottom:24px;
}

.emissionsHeader{
    display:flex;
    align-items:center;
    gap:12px;
}

.emissionsHeaderIcon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:rgba(0,102,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
}

.emissionsTitle{
    margin:0;
    font-size:24px;
    font-weight:700;
}

.emissionsSub{
    margin:8px 0 0 0;
    font-size:12px;
    color:var(--muted2);
}

.emissionsGrid{
    display:grid;
    gap:24px;
    margin:16px auto;
    justify-items:center;
    grid-template-columns:1fr;
}

@media (min-width:768px){
    .emissionsGrid{
        grid-template-columns:repeat(3, minmax(140px, 1fr));
        max-width:720px;
        gap:48px;
    }
}

.emissionsItem{ text-align:center; }

.emissionsLabel{
    font-size:13px;
    color:var(--muted);
}

.emissionsNumber{
    font-size:28px;
    font-weight:900;
    margin-top:6px;
    color:var(--text);
}

.emissionsGreen{ color:var(--green); }

.emissionsUnit{
    font-size:13px;
    color:var(--muted);
    margin-top:6px;
}

.emissionsBadge{
    background:rgba(0,212,170,.10);
    border-radius:20px;
    padding:14px;
    font-size:22px;
    font-weight:900;
    color:var(--green);
    text-align:center;
    margin:14px 0;
}

.emissionsInner{
    border-radius:20px;
    background:#fff;
    padding:14px;
}

.emissionsInnerTitle{
    font-size:13px;
    font-weight:700;
}

.emissionsList{
    list-style:none;
    padding:0;
    margin:10px 0 0 0;
}

.emissionsList li{
    padding:6px 0;
    color:var(--muted);
}

.emissionsFootnote{
    margin:10px auto 0 auto;
    max-width:620px;
    font-size:12px;
    color:var(--muted);
    text-align:center;
}

/* =========================
   INTERPRETATION
========================= */
.interpretationCard{
    background:var(--text);
    color:#fff;
    border-radius:var(--r3);
    padding:32px;
    margin-bottom:24px;
}

.interpretationText{
    margin:0;
    font-size:18px;
    line-height:1.55;
}

/* =========================
   CTA
========================= */
.ctaWrap{
    display:flex;
    justify-content:center;
    margin-bottom:24px;
}

.ctaBtn{
    height:56px;
    padding:0 40px;
    border:none;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    box-shadow: 0 16px 30px rgba(0,102,255,.25);
}
.ctaBtn:hover{ background:var(--blueDark); }

/* =========================
   EMAIL
========================= */
.emailSection{
    text-align:center;
    margin-bottom:24px;
}

.emailToggleRow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.emailToggleLabel{
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}

.emailRow{
    max-width:520px;
    margin:16px auto 0 auto;
    display:flex;
    gap:12px;
}

.emailHidden{ display:none; }

.emailInput{
    width:100%;
    height:48px;
    border-radius:14px;
    border:1px solid var(--border);
    padding:0 14px;
    font-size:16px;
    outline:none;
}

.emailInput:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,102,255,.12);
}

.emailBtn{
    height:48px;
    padding:0 18px;
    border:none;
    border-radius:14px;
    background:var(--blue);
    color:#fff;
    font-weight:700;
    cursor:pointer;
}
.emailBtn:hover{ background:var(--blueDark); }

/* Switch */
.emailSwitch{
    position:relative;
    display:inline-block;
    width:52px;
    height:30px;
}
.emailSwitch input{ display:none; }
.emailSlider{
    position:absolute; inset:0;
    background:#D6DDE6;
    border-radius:999px;
    transition:.2s;
}
.emailSlider:before{
    content:"";
    position:absolute;
    height:24px; width:24px;
    left:3px; top:3px;
    background:#fff;
    border-radius:999px;
    transition:.2s;
}
.emailSwitch input:checked + .emailSlider{
    background:rgba(0,102,255,.75);
}
.emailSwitch input:checked + .emailSlider:before{
    transform:translateX(22px);
}

/* Loading overlay */
.loadingOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.loadingBox{
    background:#fff;
    padding:24px 32px;
    border-radius:16px;
    font-weight:700;
    font-size:16px;
}

/* Popup */
.toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    background:#111;
    color:#fff;
    padding:14px 20px;
    border-radius:999px;
    font-size:14px;
    opacity:0;
    transition:.3s;
    z-index:9999;
}
.toast.show{ opacity:1; }

.toast.success{ background:#00D4AA; }
.toast.error{ background:#FF4D4F; }