.solar-wrapper{padding:10px}

.solar-container{
  /*background:#2f5b7c;*/
  border-radius:24px;
  padding:40px;
  display:flex;
  gap:40px;
}



.left{
  width:35%;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:20px;
  justify-content:center;
}

.left::before{
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  background:radial-gradient(circle,rgba(255,255,255,0.15),transparent);
  top:-50px;
  left:-50px;
  border-radius:50%;
}

.left h1{font-size:42px;font-weight:700}
.left p{opacity:0.9}

.toggle{
  display:flex;
  background:rgba(255,255,255,0.1);
  padding:6px;
  border-radius:40px;
}

.toggle button{
  flex:1;
  padding:10px;
  border:none;
  border-radius:30px;
  background:transparent;
  color:#fff;
  cursor:pointer;
}

.toggle .active{
  background:#e9967a;
  color:#fff;
  font-weight:600;
}

.bill-box{
  background:#fff;
  padding:18px;
  border-radius:12px;
  color:#000;
}

.bill-input{font-size:26px;font-weight:600}
.bill-input input{border:none;font-size:26px;width:120px;outline:none}

.right{width:65%}

.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.card{
  background:#fff;
  border-radius:16px;
  padding:20px;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.cost-box{
  margin-top:25px;
  background:#fff;
  border-radius:16px;
  padding:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

.cost-item{text-align:center}

.operator{
  font-size:28px;
  font-weight:bold;
  color:#2f5b7c;
}

.plus{font-size:22px;color:#666}

.final{
  flex:1 1 100%;
  text-align:center;
}

.highlight{
  background:linear-gradient(135deg,#e8f7ec,#d4f5dd);
  border-radius:14px;
  padding:20px;
}

.highlight h3{
  font-size:28px;
  color:#1f7a3f;
}

.note{font-size:12px;color:#666}

@media(max-width:900px){
  .solar-container{flex-direction:column}
  .left,.right{width:100%}
  .cost-box{flex-direction:column}
  .operator,.plus{display:none}
}