/* ==========================================
SUNLIGHT SOLAR CALCULATOR PRO
PREMIUM UI CSS
File: assets/style.css
========================================== */

:root{
  --ssc-orange:#EE7426;
  --ssc-orange2:#ff944d;
  --ssc-navy:#0b1f46;
  --ssc-light:#f7f9fc;
  --ssc-text:#23324f;
  --ssc-white:#ffffff;
}

/* WRAP */

.ssc-wrap{
  max-width:1380px;
  margin:40px auto;
  padding:30px;
  font-family:Arial,Helvetica,sans-serif;
}

/* TOP */

.ssc-top{
  text-align:center;
  margin-bottom:28px;
}

.ssc-badge{
  display:inline-block;
  padding:10px 18px;
  border-radius:40px;
  background:rgba(238,116,38,.10);
  color:var(--ssc-orange);
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px;
  margin-bottom:18px;
}

.ssc-title{
  margin:0;
  font-size:48px;
  line-height:1.12;
  color:var(--ssc-navy);
  font-weight:800;
}

.ssc-title span{
  background:linear-gradient(90deg,var(--ssc-orange),#ff5a00,var(--ssc-navy));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ssc-subtitle{
  max-width:760px;
  margin:16px auto 0;
  color:#56657e;
  font-size:17px;
  line-height:1.8;
}

/* PROGRESS */

.ssc-progress{
  width:220px;
  height:10px;
  background:#e9edf5;
  border-radius:40px;
  margin:22px auto 0;
  overflow:hidden;
}

.ssc-progress-bar{
  display:block;
  width:33.33%;
  height:100%;
  border-radius:40px;
  background:linear-gradient(90deg,var(--ssc-orange),var(--ssc-navy));
  transition:.5s ease;
}

/* MAIN BOX */

.ssc-main-box{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:30px;
}

/* FORM SIDE */

.ssc-form-side{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.05);
  border-radius:28px;
  padding:34px;
  box-shadow:0 25px 60px rgba(0,0,0,.08);
  backdrop-filter:blur(16px);
}

.ssc-step{
  display:none;
  animation:sscFade .45s ease;
}

.ssc-step.active{
  display:block;
}

.ssc-step h3{
  margin:0 0 22px;
  color:var(--ssc-navy);
  font-size:28px;
}

/* GRID */

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

.ssc-option{
  border:none;
  padding:22px;
  border-radius:22px;
  background:#fff;
  color:var(--ssc-navy);
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 12px 25px rgba(0,0,0,.05);
  transition:.35s ease;
}

.ssc-option span{
  display:block;
  font-size:28px;
  margin-bottom:10px;
}

.ssc-option:hover{
  transform:translateY(-7px);
  background:linear-gradient(135deg,var(--ssc-orange),#ff8a3c);
  color:#fff;
  box-shadow:0 22px 40px rgba(238,116,38,.22);
}

.ssc-option.active{
  background:linear-gradient(135deg,var(--ssc-orange),var(--ssc-navy));
  color:#fff;
}

/* RANGE */

.ssc-input-wrap{
  background:#fff;
  padding:24px;
  border-radius:22px;
  box-shadow:0 12px 25px rgba(0,0,0,.04);
}

.ssc-input-wrap label,
.ssc-field label{
  display:block;
  margin-bottom:10px;
  color:#53627b;
  font-size:14px;
  font-weight:700;
}

#sscBillRange{
  width:100%;
  accent-color:var(--ssc-orange);
}

.ssc-range-output{
  margin-top:18px;
  font-size:26px;
  font-weight:800;
  color:var(--ssc-navy);
}

.ssc-range-output span{
  color:var(--ssc-orange);
}

.ssc-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:20px;
}

.ssc-field{
  background:#fff;
  padding:18px;
  border-radius:18px;
}

.ssc-field select,
.ssc-field input{
  width:100%;
  border:1px solid #dde3ee;
  border-radius:14px;
  padding:12px 14px;
  font-size:15px;
  outline:none;
}

/* RESULTS */

.ssc-results{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.ssc-result-card{
  background:#fff;
  border-radius:20px;
  padding:20px;
  box-shadow:0 12px 25px rgba(0,0,0,.04);
  transition:.35s ease;
}

.ssc-result-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 40px rgba(238,116,38,.14);
}

.ssc-result-card small{
  display:block;
  color:#64738a;
  margin-bottom:8px;
}

.ssc-result-card strong{
  color:var(--ssc-navy);
  font-size:24px;
}

/* CTA BOX */

.ssc-cta-box{
  margin-top:22px;
  padding:24px;
  border-radius:24px;
  background:linear-gradient(135deg,var(--ssc-navy),#10295f);
  color:#fff;
}

.ssc-cta-box h4{
  margin:0 0 8px;
  font-size:24px;
}

.ssc-cta-box p{
  margin:0 0 16px;
  opacity:.9;
}

.ssc-lead-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}

.ssc-lead-grid input{
  border:none;
  border-radius:14px;
  padding:13px 14px;
  outline:none;
}

.ssc-submit-btn{
  width:100%;
  margin-top:14px;
  border:none;
  border-radius:16px;
  padding:16px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(90deg,var(--ssc-orange),#ff944d,var(--ssc-orange));
  background-size:200% auto;
  transition:.4s ease;
}

.ssc-submit-btn:hover{
  background-position:right center;
  transform:translateY(-4px);
}

/* NAV */

.ssc-nav{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:26px;
}

.ssc-prev,
.ssc-next{
  flex:1;
  border:none;
  border-radius:16px;
  padding:16px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:.35s ease;
}

.ssc-prev{
  background:#eef2f8;
  color:var(--ssc-navy);
}

.ssc-next{
  color:#fff;
  background:linear-gradient(90deg,var(--ssc-orange),var(--ssc-navy));
}

.ssc-prev:hover,
.ssc-next:hover{
  transform:translateY(-4px);
}

/* VISUAL */

.ssc-visual-card{
  position:sticky;
  top:30px;
  background:linear-gradient(135deg,#081632,#0b1f46,#132d67);
  border-radius:28px;
  padding:34px;
  color:#fff;
  min-height:100%;
  overflow:hidden;
}

.ssc-glow{
  position:absolute;
  top:-60px;
  right:-60px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(238,116,38,.22);
  filter:blur(35px);
}

.ssc-house{
  font-size:70px;
  margin-bottom:12px;
}

.ssc-visual-card h4{
  margin:0 0 14px;
  font-size:30px;
}

.ssc-visual-card ul{
  padding-left:18px;
  line-height:2;
  opacity:.95;
}

.ssc-live-saving{
  margin-top:24px;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
}

.ssc-live-saving small{
  display:block;
  margin-bottom:6px;
  opacity:.8;
}

.ssc-live-saving strong{
  font-size:34px;
  color:#ffb58a;
}

/* ANIMATION */

@keyframes sscFade{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* MOBILE */

@media(max-width:1024px){
  .ssc-main-box{
    grid-template-columns:1fr;
  }

  .ssc-visual-card{
    position:relative;
    top:auto;
  }
}

@media(max-width:768px){

  .ssc-wrap{
    padding:16px;
    margin:20px auto;
  }

  .ssc-title{
    font-size:34px;
  }

  .ssc-grid,
  .ssc-mini-grid,
  .ssc-results,
  .ssc-lead-grid{
    grid-template-columns:1fr;
  }

  .ssc-form-side,
  .ssc-visual-card{
    padding:22px;
    border-radius:22px;
  }

  .ssc-step h3{
    font-size:24px;
  }

  .ssc-nav{
    flex-direction:column;
  }

}
/* ===== FIXES ===== */

.ssc-step{
display:none;
}
.ssc-step.active{
display:block;
}

.ssc-prev{
display:none;
}

/* blue card white text */

.ssc-visual-card,
.ssc-visual-card h4,
.ssc-visual-card li,
.ssc-live-saving,
.ssc-live-saving small{
color:#fff !important;
}

/* annual savings orange */

#r_annual{
color:#ffb184 !important;
}

/* dropdown visible */

#sscSolarType,
#sscRoof{
height:52px !important;
line-height:52px !important;
padding:0 16px !important;
font-size:16px !important;
border-radius:14px !important;
}

/* results cards */

.ssc-result-card strong{
display:block;
font-size:20px;
margin-top:8px;
}

/* congrats */

.ssc-congrats{
margin-top:18px;
padding:16px 18px;
border-radius:14px;
background:linear-gradient(135deg,#EE7426,#0b1f46);
color:#fff;
font-weight:700;
font-size:17px;
box-shadow:0 10px 24px rgba(0,0,0,.12);
}

#r_trees{
color:#24c96b;
font-weight:800;
}

/* mobile */

@media(max-width:767px){

#sscSolarType,
#sscRoof{
width:100%;
}

.ssc-congrats{
font-size:15px;
line-height:1.5;
}

}
/* =====================================
NEW PREMIUM RESULT UPDATES
Paste at END of style.css
===================================== */

/* green eco card */

.green-card{
background:linear-gradient(135deg,#eafff1,#d9ffe8) !important;
border:1px solid rgba(36,201,107,.15);
}

.green-card small{
color:#16924d !important;
}

.green-card strong{
color:#0f8a44 !important;
}

/* congratulations bar */

.ssc-congrats{
margin-top:22px;
padding:18px 20px;
border-radius:18px;
font-size:18px;
font-weight:700;
color:#fff;

background:linear-gradient(
135deg,
#EE7426 0%,
#ff8c42 35%,
#0b1f46 100%
);

box-shadow:
0 18px 30px rgba(0,0,0,.12),
0 0 18px rgba(238,116,38,.18);

animation:blinkCongrats 1.2s infinite alternate;
}

/* live trees */

#r_trees_live{
color:#7dffaf;
font-size:22px;
font-weight:900;
padding:0 4px;
display:inline-block;
animation:pulseTree 1s infinite;
}

/* right second card */

.second-box{
margin-top:18px;
background:rgba(255,255,255,.10) !important;
}

.second-box small,
.second-box strong{
color:#fff !important;
}

/* right blue card text white */

.ssc-visual-card,
.ssc-visual-card h4,
.ssc-visual-card li,
.ssc-live-saving small,
.ssc-live-saving strong{
color:#fff !important;
}

/* step fields fix */

#sscSolarType,
#sscRoof{
height:54px !important;
line-height:54px !important;
padding:0 16px !important;
font-size:16px !important;
border-radius:14px !important;
}

/* cards stronger */

.ssc-result-card{
transition:.35s ease;
}

.ssc-result-card:hover{
transform:translateY(-5px);
box-shadow:0 16px 28px rgba(0,0,0,.08);
}

/* animations */

@keyframes blinkCongrats{
0%{
transform:scale(1);
filter:brightness(1);
}
100%{
transform:scale(1.015);
filter:brightness(1.08);
}
}

@keyframes pulseTree{
0%{
transform:scale(1);
}
50%{
transform:scale(1.12);
}
100%{
transform:scale(1);
}
}

/* mobile */

@media(max-width:767px){

.ssc-congrats{
font-size:15px;
line-height:1.6;
padding:15px;
}

#r_trees_live{
font-size:18px;
display:block;
margin-top:6px;
}

}