@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.ev-calculator-wrapper{
	font-family:'Poppins',sans-serif;
	margin-bottom: 40px;
}

/* ==========================
Heading
========================== */

.ev-calculator-wrapper .heading{
    padding-bottom: 40px;

    border-bottom:1px solid #ececec;

}

.ev-calculator-wrapper .heading p{
    color:var(--neu-grey);
    font-size:15px;
	margin-bottom: 0px;

}

/* ==========================
Vehicle Type
========================== */

.ev-calculator-wrapper .vehicle-selection{

    padding:35px 10px;

    text-align:center;

}

.ev-calculator-wrapper .vehicle-selection h2{

    margin-bottom:25px;

    font-size:24px;

}

.ev-calculator-wrapper .vehicle-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}

.ev-calculator-wrapper .vehicle-btn{

    width:150px;

    border:2px solid #ddd;

    background:#fff;
	color: #000;

    border-radius:15px;

    cursor:pointer;

    transition:.3s;

    padding:20px;

}

.ev-calculator-wrapper .vehicle-btn i{

    font-size:42px;

    color:#999;

    margin-bottom:10px;

}

.ev-calculator-wrapper .vehicle-btn span{

    display:block;

    font-weight:600;

}

.ev-calculator-wrapper .vehicle-btn:hover{

    transform:translateY(-4px);

}

.ev-calculator-wrapper .vehicle-btn.active{

    border-color:#10894b;

}

.ev-calculator-wrapper .vehicle-btn.active i{

    color:#10894b;

}

/* ==========================
Grid
========================== */

.ev-calculator-wrapper .calculator-grid{

    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:40px;

    padding:40px 16px;

}

.ev-calculator-wrapper .column{

    border:1px solid #ececec;

    border-radius:16px;

    padding:30px;

    background:#fff;

}

.ev-calculator-wrapper .column h2{

    margin-bottom:30px;

    color:#10894b;

    font-size:24px;

}

/* ==========================
Inputs
========================== */

.ev-calculator-wrapper .input-group{

    margin-bottom:30px;

}

.ev-calculator-wrapper .input-group label{

    font-weight:600;

    color:#000;

}

.ev-calculator-wrapper .label-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.ev-calculator-wrapper .label-row span{

    background:#10894b;

    color:#fff;

    padding:6px 12px;

    border-radius:8px;

    font-size:14px;

    font-weight:600;

}

/* ==========================
Range Slider
========================== */

.ev-calculator-wrapper input[type=range]{

    width:100%;

    appearance:none;

    height:7px;

    background:#d8d8d8;

    border-radius:10px;

    outline:none;

}

.ev-calculator-wrapper input[type=range]::-webkit-slider-thumb{

    appearance:none;

    width:22px;

    height:22px;

    background:#10894b;

    border-radius:50%;

    cursor:pointer;

    border:4px solid white;

    box-shadow:0 0 10px rgba(18,118,240,.4);

}

.ev-calculator-wrapper input[type=range]::-moz-range-thumb{

    width:22px;

    height:22px;

    border-radius:50%;

    background:#10894b;

    border:none;

}

/* ==========================
Select
========================== */

.ev-calculator-wrapper select{

    width:100%;

    padding:14px;
	margin-top: 12px;

    border-radius:10px;

    border:1px solid #ddd;

    font-family:Poppins;

    font-size:15px;

    background:white;

}

/* ==========================
Fuel Buttons
========================== */

.ev-calculator-wrapper .fuel-switch{

    display:flex;
margin-top: 12px;
    gap:10px;

}

.ev-calculator-wrapper .fuel-btn{

    flex:1;

    border:none;
	color: #000;

    padding:13px;

    cursor:pointer;

    border-radius:10px;

    background:#ececec;

    font-weight:600;

    transition:.3s;

}

.ev-calculator-wrapper .fuel-btn.active{

    background:#10894b;

    color:#fff;

}

/* ==========================
Button
========================== */

.ev-calculator-wrapper .calculate-section{

    text-align:center;

    padding:10px 40px 45px;

}

.ev-calculator-wrapper #calculateBtn{

    padding:18px 55px;

    border:none;

    cursor:pointer;

    border-radius:12px;

    font-size:18px;

    font-weight:600;

    color:white;

    background:linear-gradient(135deg,#1276f0,#18bf6a);

    transition:.35s;

    box-shadow:0 12px 25px rgba(18,118,240,.25);

}

.ev-calculator-wrapper #calculateBtn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(18,118,240,.35);

}

/* ==========================
Results
========================== */

.ev-calculator-wrapper .results{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px, 1fr));

    gap:20px;

}

.ev-calculator-wrapper .result-card{

    background:#fff;

    border-radius:16px;

    padding:25px;

    text-align:center;

    border:1px solid #ececec;

    transition:.3s;

}

.ev-calculator-wrapper .result-card:hover{

    transform:translateY(-5px);

}

.ev-calculator-wrapper .result-card h3{

    color:#666;

    font-size:15px;

    margin-bottom:10px;

    font-weight:500;

}

.ev-calculator-wrapper .result-card h2{

    font-size:30px;
	margin-bottom: 0px !important;

    color:#10894b;

}

.ev-calculator-wrapper .highlight{

    background:linear-gradient(135deg,#1276f0,#18bf6a);

    color:white;

}

.ev-calculator-wrapper .highlight h3{

    color:white;

}

.ev-calculator-wrapper .highlight h2{

    color:white;

}

/* ==========================
Responsive
========================== */

@media(max-width:992px){

.ev-calculator-wrapper .calculator-grid{

grid-template-columns: 1fr;
	padding: 40px 10px;

}

}

@media(max-width:768px){

.ev-calculator-wrapper .heading{

padding:25px 10px;

}

.ev-calculator-wrapper .heading h1{

font-size:28px;

}

.ev-calculator-wrapper .vehicle-buttons{

flex-direction:column;

align-items:center;

}

.ev-calculator-wrapper .vehicle-btn{

width:220px;

}

.ev-calculator-wrapper .column{

padding:22px;

}

.ev-calculator-wrapper .results{

padding:25px;

}

.ev-calculator-wrapper #calculateBtn{

width:100%;
	padding: 18px 30px;

}

}

@media(max-width:480px){

.ev-calculator-wrapper .heading h1{

font-size:24px;

}

.ev-calculator-wrapper .column h2{

font-size:20px;

}

.ev-calculator-wrapper .label-row{

flex-direction:column;

align-items:flex-start;

gap:8px;

}

.ev-calculator-wrapper .label-row span{

align-self:flex-start;

}

}