/* Reset defensiv — anulează stilurile globale ale temei (text-transform,
   letter-spacing, font, dimensiuni) care altfel se scurg peste configurator.
   Declarat primul, ca regulile specifice de mai jos (cu clase proprii) să
   câștige automat în cascadă. */
.csf-page, .csf-page *{
  text-transform:none !important;
  letter-spacing:normal !important;
  box-sizing:border-box !important;
  font-family:'Karla', ui-sans-serif, system-ui, sans-serif !important;
  line-height:1.5 !important;
  -webkit-font-smoothing:antialiased;
}

.csf-page{
  /* Paletă FireDesign — negru/antracit + portocaliu-flacără, fixă (nu se
     schimbă după modul de afișare al vizitatorului). */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F6F6F6;
  --surface-3:#EDEDED;
  --ink:#171514;
  --ink-soft:#4A4744;
  --ink-faint:#8A8682;
  --line:#E6E4E1;
  --line-strong:#D2CFCA;
  --ember:#FF5A1F;
  --ember-strong:#E3480F;
  --ember-deep:#C93D0E;
  --ember-soft:#FFF0E8;
  --ember-ink:#FFFFFF;
  --danger:#D63A2E;
  --danger-soft:#FBE7E4;
  --swatch-border: rgba(23,21,20,0.12);
  --ember-glow: rgba(255,90,31,0.35);
  --shadow: 0 1px 2px rgba(20,18,17,0.05), 0 20px 40px -24px rgba(20,18,17,0.22);

  /* dimensiune mărită — să fie clar vizibil pe pagină, nu doar un detaliu mic */
  max-width:600px !important;
  width:100%;
  margin:6px auto 28px !important;
  display:block;
  font-size:17px !important;
  color:var(--ink);
}

/* -----------------------------------------------------------------------
 * Teaser (stare închisă implicit) — un buton mare, atractiv, care
 * „vibrează” ușor ca să atragă atenția, și se deschide la click.
 * --------------------------------------------------------------------- */

.csf-teaser{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  background:linear-gradient(135deg, var(--surface) 45%, var(--ember-soft) 145%);
  border:2px solid rgba(255,90,31,0.38);
  border-radius:16px;
  padding:14px 22px 14px 14px;
  cursor:pointer;
  color:inherit;
  box-shadow:var(--shadow), 0 0 0 0 rgba(255,90,31,0.3);
  animation:csfTeaserGlow 2.6s ease-in-out infinite;
  transition:opacity .25s ease, transform .25s ease, max-height .3s ease, border-color .16s ease, box-shadow .16s ease;
}
.csf-teaser:hover{ border-color:var(--ember); transform:translateY(-2px) scale(1.008); animation-play-state:paused; }
@keyframes csfTeaserGlow{
  0%, 100%{ box-shadow:var(--shadow), 0 0 0 0 rgba(255,90,31,0.28); }
  50%{ box-shadow:var(--shadow), 0 0 0 9px rgba(255,90,31,0); }
}
.csf-teaser.is-hidden{
  opacity:0;
  transform:scale(.97);
  max-height:0;
  margin:0 !important;
  padding:0 !important;
  border-width:0;
  box-shadow:none;
  overflow:hidden;
  pointer-events:none;
}

.csf-teaser-icon-wrap{ position:relative; flex:none; width:54px; height:54px; }
.csf-teaser-icon{
  position:relative; z-index:1;
  width:100%; height:100%; border-radius:50%;
  background:linear-gradient(135deg, var(--ember), var(--ember-strong));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.csf-teaser-icon svg{ width:26px; height:26px; }
.csf-teaser-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--ember);
  animation:csfTeaserPulse 2.2s ease-out infinite;
}
@keyframes csfTeaserPulse{
  0%{ opacity:.6; transform:scale(.92); }
  70%{ opacity:0; transform:scale(1.35); }
  100%{ opacity:0; transform:scale(1.35); }
}

.csf-teaser-copy{ flex:1; min-width:0; text-align:left; display:flex; flex-direction:column; gap:2px; }
.csf-teaser-title{ font-size:16.5px !important; font-weight:700 !important; color:var(--ink); line-height:1.28 !important; }
.csf-teaser-sub{ font-size:13.5px !important; color:var(--ink-faint); line-height:1.28 !important; }
.csf-teaser-arrow{ flex:none; width:19px; height:19px; color:var(--ember); animation:csfArrowNudge 1.6s ease-in-out infinite; }
@keyframes csfArrowNudge{
  0%, 100%{ transform:translateX(0); }
  50%{ transform:translateX(4px); }
}

@media (prefers-reduced-motion: reduce){
  .csf-teaser-ring{ animation:none; opacity:.4; }
}

/* -----------------------------------------------------------------------
 * Acordeon — containerul se deschide cu o tranziție de înălțime (grid
 * trick), fără să fie nevoie de JS să calculeze înălțimi.
 * --------------------------------------------------------------------- */

.csf-collapse{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}
.csf-collapse.is-open{ grid-template-rows:1fr; }
.csf-collapse-inner{
  overflow:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:16px;
}

.csf-brand{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px;
  background:var(--ink) !important;
  border-radius:14px !important;
  padding:12px 14px 12px 18px !important;
}
.csf-brand-logo{
  display:block !important;
  height:24px !important;
  width:auto !important;
  max-width:150px;
  border:0 !important;
  margin:0 !important;
}
.csf-brand-right{ display:flex !important; align-items:center !important; gap:8px; }
.csf-collapse-btn{
  flex:none !important; width:30px !important; height:30px !important; border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,0.22) !important;
  background:rgba(255,255,255,0.1) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}
.csf-collapse-btn svg{ display:block !important; width:14px !important; height:14px !important; }
.csf-collapse-btn:hover{ border-color:var(--ember) !important; background:var(--ember) !important; }

.csf-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}

.csf-progress-zone{ padding:22px 28px 0 !important; }
.csf-progress-top{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;
}
.csf-progress-label{
  font-size:11.5px !important; font-weight:700 !important; letter-spacing:0.09em !important; text-transform:uppercase !important;
  color:var(--ember);
}
.csf-progress-count{
  font-size:12.5px !important; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.csf-progress-track{
  height:4px; border-radius:99px; background:var(--surface-3); overflow:hidden;
}
.csf-progress-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--ember-deep), var(--ember));
  box-shadow:0 0 8px var(--ember-glow);
  transition:width .4s cubic-bezier(.4,0,.2,1);
}

.csf-panel-outer{ padding:26px 28px 28px !important; overflow:hidden; position:relative; }

/* subsol de încredere — pictograme discrete, pe fiecare pas */
.csf-trust-footer{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:8px 20px;
  padding:15px 20px 19px !important;
  border-top:1px solid var(--line);
  background:var(--surface-2);
}
.csf-trust-item{
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--ink-faint);
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.csf-trust-item svg{ flex:none !important; display:block !important; width:16px !important; height:16px !important; color:var(--ember) !important; }

.csf-step-panel{
  transition:opacity .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1);
}
.csf-step-panel.enter-fwd{ opacity:0; transform:translateX(24px); }
.csf-step-panel.enter-back{ opacity:0; transform:translateX(-24px); }
.csf-step-panel.enter-in{ opacity:1; transform:translateX(0); }

.csf-page .step-head{ margin-bottom:20px !important; }
.csf-page .step-kicker{
  font-size:11.5px !important; font-weight:700 !important; letter-spacing:0.08em !important; text-transform:uppercase !important;
  color:var(--ember); margin:0 0 7px !important;
}
.csf-page .step-heading{
  font-family:'Big Shoulders Display', sans-serif !important;
  font-weight:700 !important;
  font-size:26px !important;
  letter-spacing:0.005em !important;
  line-height:1.2 !important;
  margin:0 0 6px !important;
  color:var(--ink);
}
.csf-page .step-sub{
  font-size:14.5px !important; color:var(--ink-soft); margin:0; max-width:50ch;
}

.csf-page .field-group{ margin-bottom:20px !important; }
.csf-page .field-group:last-child{ margin-bottom:0 !important; }
.csf-page .field-label{
  display:block;
  font-size:13.5px !important; font-weight:700 !important; color:var(--ink);
  margin-bottom:9px !important;
}
.csf-page .field-error{ font-size:12.5px !important; color:var(--danger); margin:8px 0 0 !important; display:none; }
.csf-page .field-group.has-error .field-error{ display:block; }

/* carduri mari — pasul 1 / mărime spațiu */
.csf-page .big-grid{ display:flex; flex-direction:column; gap:10px; }
.csf-page .big-card{
  display:flex; align-items:center; gap:15px;
  border:1.5px solid var(--line);
  background:var(--surface-2);
  border-radius:13px;
  padding:16px 17px !important;
  cursor:pointer;
  text-align:left;
  color:inherit;
  width:100%;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.csf-page .big-card:hover{ border-color:var(--line-strong); }
.csf-page .big-card.is-selected{
  border-color:var(--ember);
  background:var(--ember-soft);
  box-shadow:0 0 0 1px var(--ember) inset, 0 10px 22px -14px var(--ember-glow);
}
.csf-page .big-icon{
  flex:none; width:42px; height:42px; border-radius:10px;
  background:var(--surface-3); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition:background .16s ease, color .16s ease;
}
.csf-page .big-card.is-selected .big-icon{ background:var(--ember); color:var(--ember-ink); }
.csf-page .big-icon svg{ width:21px; height:21px; }
.csf-page .big-copy{ flex:1; min-width:0; }
.csf-page .big-name{ font-size:16.5px !important; font-weight:700 !important; margin:0 0 2px !important; }
.csf-page .big-desc{ font-size:13px !important; color:var(--ink-faint); margin:0; }
.csf-page .big-arrow{ flex:none; width:18px; height:18px; color:var(--ink-faint); }
.csf-page .big-card.is-selected .big-arrow{ color:var(--ember); }

/* recomandare dinamică (ex: kW) — apare la selectarea unei mărimi de casă */
.csf-page .csf-kw-note{
  display:flex; align-items:center; gap:11px;
  margin-top:14px !important;
  padding:14px 15px !important;
  border-radius:12px;
  background:var(--ember-soft);
  border:1px solid rgba(255,90,31,0.25);
  color:var(--ember-strong);
}
.csf-page .csf-kw-note svg{ flex:none; width:22px; height:22px; }
.csf-page .csf-kw-note span{ font-size:14px !important; line-height:1.4 !important; color:var(--ember-strong); }
.csf-page .csf-kw-note strong{ font-weight:800 !important; }

/* carduri medii — stil / material coș */
.csf-page .choice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:560px){ .csf-page .choice-grid{ grid-template-columns:1fr; } }
.csf-page .choice-card{
  border:1.5px solid var(--line);
  background:var(--surface-2);
  border-radius:11px;
  padding:15px 14px !important;
  cursor:pointer;
  text-align:left;
  display:flex; flex-direction:column; gap:8px;
  color:inherit;
  width:100%;
  transition:border-color .14s ease, background .14s ease;
}
.csf-page .choice-card:hover{ border-color:var(--line-strong); }
.csf-page .choice-card.is-selected{ border-color:var(--ember); background:var(--ember-soft); }
.csf-page .choice-icon{ width:23px; height:23px; color:var(--ink-faint); }
.csf-page .choice-card.is-selected .choice-icon{ color:var(--ember); }
.csf-page .choice-icon svg{ width:100%; height:100%; }
.csf-page .choice-name{ font-size:15px !important; font-weight:700 !important; }
.csf-page .choice-desc{ font-size:12.5px !important; color:var(--ink-faint); line-height:1.35 !important; }

.csf-page .swatch-row{ display:flex; flex-direction:column; gap:9px; }
.csf-page .swatch-card{
  display:flex; align-items:center; gap:14px;
  border:1.5px solid var(--line);
  background:var(--surface-2);
  border-radius:11px;
  padding:14px 16px !important;
  cursor:pointer;
  color:inherit; text-align:left;
  width:100%;
  transition:border-color .14s ease, background .14s ease;
}
.csf-page .swatch-card:hover{ border-color:var(--line-strong); }
.csf-page .swatch-card.is-selected{ border-color:var(--ember); background:var(--ember-soft); }
.csf-page .swatch-chip{ flex:none; width:28px; height:28px; border-radius:7px; border:1px solid var(--swatch-border); }
.csf-page .swatch-label{ font-size:15px !important; font-weight:600 !important; flex:1; }
.csf-page .swatch-check{ flex:none; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line-strong); position:relative; }
.csf-page .swatch-card.is-selected .swatch-check{ border-color:var(--ember); background:var(--ember); }
.csf-page .swatch-card.is-selected .swatch-check::after{
  content:''; position:absolute; left:4.5px; top:2.5px; width:5px; height:8px;
  border:solid var(--ember-ink); border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}

/* carduri late, doar text — pentru opțiuni cu propoziții lungi
   (înălțime casă / coș de fum existent / ferestre-izolare) */
.csf-page .choice-wide-grid{ display:flex; flex-direction:column; gap:10px; }
.csf-page .choice-card-wide{
  display:flex; align-items:center; gap:14px;
  border:1.5px solid var(--line);
  background:var(--surface-2);
  border-radius:13px;
  padding:16px 17px !important;
  cursor:pointer;
  text-align:left;
  color:inherit;
  width:100%;
  transition:border-color .14s ease, background .14s ease;
}
.csf-page .choice-card-wide:hover{ border-color:var(--line-strong); }
.csf-page .choice-card-wide.is-selected{ border-color:var(--ember); background:var(--ember-soft); }
.csf-page .choice-wide-copy{ flex:1; display:flex; flex-direction:column; gap:3px; }
.csf-page .choice-wide-label{ font-size:15px !important; font-weight:600 !important; line-height:1.4 !important; }
.csf-page .choice-wide-hint{ font-size:12.5px !important; color:var(--ink-faint); }
.csf-page .choice-card-wide.is-selected .choice-wide-hint{ color:var(--ember-strong); }

/* chip-uri */
.csf-page .chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.csf-page .chip{
  border:1.5px solid var(--line);
  background:var(--surface-2);
  color:var(--ink);
  border-radius:999px;
  padding:11px 18px !important;
  font-size:14px !important;
  font-weight:600 !important;
  cursor:pointer;
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.csf-page .chip:hover{ border-color:var(--line-strong); }
.csf-page .chip.is-selected{ border-color:var(--ember); background:var(--ember); color:var(--ember-ink); }

/* carduri servicii */
.csf-page .service-grid{ display:flex; flex-direction:column; gap:10px; }
.csf-page .service-card{
  display:flex; align-items:flex-start; gap:14px;
  border:1.5px solid var(--line);
  background:var(--surface-2);
  border-radius:13px;
  padding:16px 17px !important;
  cursor:pointer;
  text-align:left;
  color:inherit;
  width:100%;
  transition:border-color .14s ease, background .14s ease;
}
.csf-page .service-card:hover{ border-color:var(--line-strong); }
.csf-page .service-card.is-selected{ border-color:var(--ember); background:var(--ember-soft); }
.csf-page .service-icon{ flex:none; width:22px; height:22px; color:var(--ink-faint); margin-top:1px; }
.csf-page .service-card.is-selected .service-icon{ color:var(--ember); }
.csf-page .service-icon svg{ width:100%; height:100%; }
.csf-page .service-name{ font-size:15.5px !important; font-weight:700 !important; margin:0 0 2px !important; }
.csf-page .service-desc{ font-size:13px !important; color:var(--ink-faint); margin:0; }

/* inputuri */
.csf-page .input{
  width:100%;
  padding:13px 14px !important;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--ink);
  font-size:15px !important;
}
.csf-page .input::placeholder{ color:var(--ink-faint); }
.csf-page .input:focus, .csf-page .chip:focus-visible, .csf-page .big-card:focus-visible, .csf-page .choice-card:focus-visible,
.csf-page .swatch-card:focus-visible, .csf-page .service-card:focus-visible, .csf-page .choice-card-wide:focus-visible,
.csf-page .btn:focus-visible, .csf-teaser:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
}
.csf-page .field-group.has-error .input{ border-color:var(--danger); }

/* încărcare fișier (poză coș / schiță casă) */
.csf-page .csf-file-input{
  display:block;
  width:100%;
  padding:13px 14px !important;
  border:1.5px dashed var(--line-strong);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--ink-soft);
  font-size:13.5px !important;
  cursor:pointer;
}
.csf-page .csf-file-input::file-selector-button{
  font-size:13px !important; font-weight:700 !important;
  border:none; border-radius:8px;
  padding:9px 15px !important;
  margin-right:12px;
  background:var(--ember); color:var(--ember-ink);
  cursor:pointer;
}
.csf-page .csf-file-input:hover::file-selector-button{ background:var(--ember-strong); }
.csf-page .csf-file-name{
  font-size:12.5px !important; color:var(--ink-faint);
  margin:8px 0 0 !important;
  word-break:break-all;
}

/* navigare */
.csf-page .step-nav{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:22px !important; padding-top:18px !important; border-top:1px solid var(--line);
}
.csf-page .btn{
  font-size:14.5px !important; font-weight:700 !important;
  border-radius:10px; padding:13px 24px !important; cursor:pointer; border:none;
}
.csf-page .btn-primary{
  background:var(--ember); color:var(--ember-ink);
  box-shadow:0 8px 18px -10px var(--ember-glow);
}
.csf-page .btn-primary:hover{ background:var(--ember-strong); }
.csf-page .btn-primary:disabled{ opacity:0.4; cursor:not-allowed; box-shadow:none; }
.csf-page .btn-ghost{ background:none; color:var(--ink-soft); padding:13px 4px !important; white-space:nowrap; flex:none; }
.csf-page .btn-ghost:hover{ color:var(--ink); }
.csf-page .nav-spacer{ font-size:12.5px !important; color:var(--ink-faint); }

@media (max-width:340px){
  .csf-page .btn-primary{ font-size:13px !important; padding:12px 16px !important; }
}

/* succes */
.csf-page .success-icon{
  width:46px; height:46px; border-radius:50%;
  background:var(--ember-soft); color:var(--ember);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.csf-page .success-icon svg{ width:22px; height:22px; }
.csf-page .recap-list{ display:flex; flex-direction:column; margin:20px 0 4px; }
.csf-page .recap-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line);
  font-size:13.5px !important;
}
.csf-page .recap-row:last-child{ border-bottom:none; }
.csf-page .recap-k{ color:var(--ink-faint); }
.csf-page .recap-v{ color:var(--ink); font-weight:700 !important; text-align:right; }

@media (prefers-reduced-motion: reduce){
  .csf-page *, .csf-page *::before, .csf-page *::after{ animation:none !important; transition:none !important; }
  .csf-teaser-ring{ animation:none !important; opacity:.4; }
}