/* =========================================================================
   Eco Electric Estimator — styles
   All selectors are scoped under .ee-estimator so this cannot affect the
   rest of your theme. Brand colors come from CSS variables that the plugin
   prints inline from the Settings page (see the shortcode output).
   ========================================================================= */

.ee-estimator *{ box-sizing:border-box; }

.ee-estimator{
  font-family:"Nunito Sans",sans-serif;
  background:var(--ee-bg);
  color:var(--ee-text);
  line-height:1.5;
  border-radius:var(--radius);
  overflow:hidden;
}
.ee-estimator a{ color:var(--ee-green-dark); }

/* ---------- Header ---------- */
.ee-estimator .ee-header{
  background:var(--ee-navy);
  color:#fff;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.ee-estimator .ee-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.25rem;
}
.ee-estimator .ee-brand .dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--ee-green);
  display:inline-block;
}
.ee-estimator .ee-header-cta{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.ee-estimator .ee-phone-link{
  color:#fff;
  font-weight:700;
  text-decoration:none;
  font-size:1.05rem;
  display:flex;
  align-items:center;
  gap:6px;
}
.ee-estimator .ee-phone-link:hover{ text-decoration:underline; }
.ee-estimator .ee-btn{
  display:inline-block;
  background:var(--ee-green);
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  font-weight:700;
  font-size:0.95rem;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease;
}
.ee-estimator .ee-btn:hover{ background:var(--ee-green-dark); }
.ee-estimator .ee-btn.secondary{
  background:transparent;
  border:2px solid #fff;
  color:#fff;
}
.ee-estimator .ee-btn.secondary:hover{ background:rgba(255,255,255,.12); }
.ee-estimator .ee-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- Hero ---------- */
.ee-estimator .ee-hero{
  background:linear-gradient(135deg,var(--ee-navy) 0%,var(--ee-navy-dark) 100%);
  color:#fff;
  padding:44px 20px 60px;
  text-align:center;
}
.ee-estimator .ee-hero h1{
  margin:0 0 10px;
  font-size:2rem;
  color:#fff;
}
.ee-estimator .ee-hero p{
  margin:0 auto;
  max-width:640px;
  color:#D9E2E8;
  font-size:1.05rem;
}

/* ---------- Main container ---------- */
.ee-estimator .ee-wrap{
  max-width:760px;
  margin:-34px auto 40px;
  padding:0 20px;
}
.ee-estimator .ee-card{
  background:var(--ee-card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  margin-bottom:20px;
}

/* ---------- Progress / breadcrumb ---------- */
.ee-estimator .ee-crumb{
  font-size:.85rem;
  color:var(--ee-muted);
  margin-bottom:14px;
  min-height:1.2em;
}
.ee-estimator .ee-crumb button{
  background:none;border:none;color:var(--ee-green-dark);
  font-weight:600;cursor:pointer;padding:0;font-size:.85rem;
}

/* ---------- Job picker grid ---------- */
.ee-estimator .ee-job-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
}
.ee-estimator .ee-job-card{
  border:2px solid var(--ee-border);
  border-radius:var(--radius);
  padding:18px 16px;
  text-align:center;
  cursor:pointer;
  background:#fff;
  transition:border-color .15s ease, transform .1s ease;
}
.ee-estimator .ee-job-card:hover{
  border-color:var(--ee-green);
  transform:translateY(-2px);
}
.ee-estimator .ee-job-card .emoji{ font-size:1.8rem; display:block; margin-bottom:8px;}
.ee-estimator .ee-job-card .title{ font-weight:700; color:var(--ee-navy); }
.ee-estimator .ee-job-card .sub{ font-size:.82rem; color:var(--ee-muted); margin-top:4px;}

/* ---------- Question step ---------- */
.ee-estimator .ee-question h2{
  font-size:1.2rem;
  margin:0 0 16px;
  color:var(--ee-navy);
}
.ee-estimator .ee-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ee-estimator .ee-option{
  border:1.5px solid var(--ee-border);
  background:#fff;
  border-radius:10px;
  padding:14px 16px;
  text-align:left;
  cursor:pointer;
  font-size:.98rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  transition:border-color .15s ease, background .15s ease;
}
.ee-estimator .ee-option:hover{
  border-color:var(--ee-green);
  background:#F3FAF4;
}
.ee-estimator .ee-option .price-hint{
  color:var(--ee-green-dark);
  font-weight:700;
  white-space:nowrap;
  font-size:.9rem;
}

/* ---------- Range banner ---------- */
.ee-estimator .ee-range-banner{
  background:#EEF5EF;
  border:1px solid #CFE7D2;
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:18px;
  font-size:.95rem;
  color:var(--ee-navy);
}
.ee-estimator .ee-range-banner strong{ color:var(--ee-green-dark); font-size:1.05rem; }

/* ---------- Result / cart ---------- */
.ee-estimator .ee-result-price{
  font-size:2.1rem;
  font-weight:800;
  color:var(--ee-green-dark);
  margin:6px 0 2px;
}
.ee-estimator .ee-result-sub{ color:var(--ee-muted); font-size:.9rem; margin-bottom:18px;}
.ee-estimator .ee-cart-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--ee-border);
  font-size:.95rem;
}
.ee-estimator .ee-cart-item:last-child{ border-bottom:none; }
.ee-estimator .ee-cart-item .label{ flex:1; }
.ee-estimator .ee-cart-item .tag{
  display:inline-block;
  background:var(--ee-green);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  padding:2px 7px;
  border-radius:20px;
  margin-left:8px;
  vertical-align:middle;
}
.ee-estimator .ee-total-row{
  display:flex;
  justify-content:space-between;
  font-weight:800;
  font-size:1.15rem;
  padding-top:14px;
  margin-top:6px;
  border-top:2px solid var(--ee-navy);
  color:var(--ee-navy);
}
.ee-estimator .ee-disclaimer{
  font-size:.78rem;
  color:var(--ee-muted);
  margin-top:16px;
  line-height:1.4;
}

/* ---------- Phone banner ---------- */
.ee-estimator .ee-phone-banner{
  background:var(--ee-green);
  color:#fff;
  border-radius:var(--radius);
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:20px;
}
.ee-estimator .ee-phone-banner .big-phone{
  font-size:1.4rem;
  font-weight:800;
  color:#fff;
  text-decoration:none;
}
.ee-estimator .ee-phone-banner .label{ font-size:.85rem; opacity:.9; }

/* ---------- Form rows (used by EV/permit wizard steps) ---------- */
.ee-estimator .ee-form-row{ margin-bottom:14px; }
.ee-estimator .ee-form-row label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  color:var(--ee-navy);
  margin-bottom:5px;
}
.ee-estimator .ee-form-row input,
.ee-estimator .ee-form-row select,
.ee-estimator .ee-form-row textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--ee-border);
  border-radius:8px;
  font-size:.95rem;
  font-family:inherit;
  background:#fff;
  color:var(--ee-text);
}
.ee-estimator .ee-form-row textarea{ resize:vertical; min-height:110px; }
.ee-estimator .ee-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:520px){ .ee-estimator .ee-form-grid{ grid-template-columns:1fr; } }
.ee-estimator .ee-form-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.ee-estimator .ee-form-note{
  font-size:.78rem;
  color:var(--ee-muted);
  margin-top:10px;
}

/* ---------- Gravity Forms wrapper on the summary step ---------- */
.ee-estimator .ee-gf-wrap{
  max-width:760px;
  margin:0 auto 40px;
  padding:0 20px;
}
.ee-estimator .ee-gf-wrap .ee-card{ margin-bottom:0; }
.ee-estimator .ee-gf-wrap h2{
  font-size:1.2rem;
  margin:0 0 16px;
  color:var(--ee-navy);
}

/* ---------- Footer ---------- */
.ee-estimator .ee-footer{
  text-align:center;
  padding:24px 20px 40px;
  color:var(--ee-muted);
  font-size:.85rem;
}

.ee-estimator .ee-nav-buttons{
  display:flex;
  justify-content:space-between;
  margin-top:18px;
}
.ee-estimator .ee-link-btn{
  background:none;border:none;color:var(--ee-muted);
  font-size:.88rem;cursor:pointer;text-decoration:underline;padding:6px 0;
}