/**
 * Formularz doboru systemu ESS - style wizarda 4-krokowego.
 * Wdrozone: 2026-09 (etap c). Paleta i typografia wyciagniete z zywej
 * strony es.systems (Lato, akcent #76B82A, zaokraglone pola 10px,
 * przyciski-pigulki 25px) - zaakceptowane wizualnie przez uzytkownika.
 */
:root{
  --ess-green:#76B82A;
  --ess-green-dark:#5c9422;
  --text-dark:#1a1a1a;
  --text-body:#6b6b6b;
  --text-en:#9a9a9a;
  --border:#e1e1e1;
  --bg-page:#f7f8f6;
  --bg-card:#ffffff;
}
.ess-fd-wrap *{box-sizing:border-box;}
.ess-fd-wrap{max-width:920px;margin:0 auto;padding:48px 24px 80px;font-family:'Lato',sans-serif;color:var(--text-dark);}
.ess-fd-wrap .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:var(--ess-green-dark);margin:0 0 8px;}
.ess-fd-wrap h1{font-size:32px;font-weight:900;margin:0 0 6px;letter-spacing:-.01em;text-transform:none;}
.ess-fd-wrap h1 em{font-style:normal;color:var(--text-en);font-weight:400;font-size:.6em;display:block;margin-top:2px;text-transform:none;}
.ess-fd-wrap .intro{color:var(--text-body);font-size:15px;line-height:1.6;margin:0 0 36px;max-width:640px;}

.ess-fd-wrap .steps{display:flex;list-style:none;margin:0 0 40px;padding:0;counter-reset:step;}
.ess-fd-wrap .steps li{flex:1;position:relative;text-align:center;font-size:12.5px;font-weight:700;color:var(--text-en);}
.ess-fd-wrap .steps li::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--border);color:var(--text-en);margin:0 auto 8px;font-size:14px;position:relative;z-index:1;}
.ess-fd-wrap .steps li::after{content:'';position:absolute;top:16px;left:calc(-50% + 16px);width:calc(100% - 32px);height:2px;background:var(--border);z-index:0;}
.ess-fd-wrap .steps li:first-child::after{display:none;}
.ess-fd-wrap .steps li.active{color:var(--text-dark);}
.ess-fd-wrap .steps li.active::before{background:var(--ess-green);border-color:var(--ess-green);color:#fff;}
.ess-fd-wrap .steps li.done::before{background:var(--ess-green);border-color:var(--ess-green);color:#fff;content:'✓';}
/* Polaczenie PRZED danym krokiem swieci sie na zielono juz w momencie
   wejscia na ten krok (stan .active), nie dopiero po jego ukonczeniu
   (.done) - odzwierciedla "przebyta droge", nie tylko "ukonczone kroki". */
.ess-fd-wrap .steps li.active::after,
.ess-fd-wrap .steps li.done::after{background:var(--ess-green);}

.ess-fd-wrap .card{background:var(--bg-card);border-radius:16px;padding:40px 44px;box-shadow:0 1px 3px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.10);}
.ess-fd-wrap .step-panel{display:none;}
.ess-fd-wrap .step-panel.is-active{display:block;}
.ess-fd-wrap .step-title{font-size:20px;font-weight:900;margin:0 0 2px;}
.ess-fd-wrap .step-title .en{display:block;font-weight:400;font-style:italic;color:var(--text-en);font-size:14px;margin-top:2px;}
.ess-fd-wrap .step-desc{color:var(--text-body);font-size:14px;margin:10px 0 32px;padding-bottom:24px;border-bottom:1px solid var(--border);}

.ess-fd-wrap .field-group{margin-bottom:26px;}
.ess-fd-wrap .field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;}
.ess-fd-wrap .field-row.three-col{grid-template-columns:1fr 1fr 1fr;}
.ess-fd-wrap .field-row .field{min-width:0;}

.ess-fd-wrap label.field-label{display:block;font-weight:700;font-size:14.5px;color:var(--text-dark);margin-bottom:2px;}
.ess-fd-wrap label.field-label .en{display:block;font-weight:400;font-style:italic;color:var(--text-en);font-size:12.5px;margin-top:1px;}
.ess-fd-wrap label.field-label .unit{font-weight:400;color:var(--text-en);font-size:12.5px;}
.ess-fd-wrap label.field-label .required-mark{color:#d9534f;font-weight:700;margin-left:2px;}

.ess-fd-wrap input[type=text],.ess-fd-wrap input[type=tel],.ess-fd-wrap input[type=number],.ess-fd-wrap input[type=email],.ess-fd-wrap textarea,.ess-fd-wrap select{
  width:100%;font-family:'Lato',sans-serif;font-size:14.5px;color:var(--text-dark);
  border:1px solid var(--border);border-radius:10px;padding:11px 14px;margin-top:8px;
  background:#fff;transition:border-color .15s, opacity .15s, background .15s;
}
.ess-fd-wrap textarea{resize:vertical;min-height:76px;font-family:inherit;}
.ess-fd-wrap input:focus,.ess-fd-wrap textarea:focus,.ess-fd-wrap select:focus{outline:none;border-color:var(--ess-green);box-shadow:0 0 0 3px rgba(118,184,42,.15);}
.ess-fd-wrap input:disabled{background:#f2f2f2;color:#b3b3b3;cursor:not-allowed;border-color:var(--border);}
.ess-fd-wrap input:invalid:not(:placeholder-shown){border-color:#d9534f;}
.ess-fd-wrap select{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%236b6b6b" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>');background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}

.ess-fd-wrap .radio-pill-group{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;}
.ess-fd-wrap .radio-pill{position:relative;}
.ess-fd-wrap .radio-pill input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;}
.ess-fd-wrap .radio-pill span{display:block;padding:11px 20px;border:1px solid var(--border);border-radius:25px;font-size:14px;font-weight:700;color:var(--text-body);transition:.15s;}
.ess-fd-wrap .radio-pill span small{display:block;font-weight:400;font-style:italic;color:var(--text-en);font-size:11.5px;}
.ess-fd-wrap .radio-pill input:checked + span{background:var(--ess-green);border-color:var(--ess-green);color:#fff;}
.ess-fd-wrap .radio-pill input:checked + span small{color:rgba(255,255,255,.85);}
.ess-fd-wrap .radio-pill input:focus-visible + span{box-shadow:0 0 0 3px rgba(118,184,42,.25);}

.ess-fd-wrap .section-divider{border:none;border-top:1px solid var(--border);margin:32px 0;}
.ess-fd-wrap .section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ess-green-dark);margin:0 0 18px;}

.ess-fd-wrap .motor-block{border:1px solid var(--border);border-radius:12px;padding:20px 22px;margin-bottom:16px;}
.ess-fd-wrap .motor-block .field-row{margin-top:0;}
.ess-fd-wrap .motor-block-title{font-size:13px;font-weight:700;color:var(--text-body);margin:0 0 14px;}
.ess-fd-wrap .motor-block-title .optional{font-weight:400;font-style:italic;color:var(--text-en);}

.ess-fd-wrap .actions{display:flex;justify-content:space-between;margin-top:36px;padding-top:24px;border-top:1px solid var(--border);}
.ess-fd-wrap .actions.is-first{justify-content:flex-end;}
.ess-fd-wrap .btn{font-family:'Lato',sans-serif;font-size:15px;font-weight:700;border-radius:25px;padding:14px 34px;border:none;cursor:pointer;transition:.15s;}
.ess-fd-wrap .btn-primary{background:var(--ess-green);color:#fff;}
.ess-fd-wrap .btn-primary:hover{background:var(--ess-green-dark);}
.ess-fd-wrap .btn-primary:disabled{background:#c9c9c9;cursor:not-allowed;}
.ess-fd-wrap .btn-primary.js-next::after{content:' →';}
.ess-fd-wrap .btn-ghost{background:transparent;color:var(--text-body);border:1px solid var(--border);}
.ess-fd-wrap .btn-ghost::before{content:'← ';}
.ess-fd-wrap .btn-ghost:hover{border-color:#c9c9c9;color:var(--text-dark);}

.ess-fd-wrap .price-widget{border:1px solid var(--border);border-radius:12px;padding:22px 24px;background:#fbfcfa;}
.ess-fd-wrap .price-widget .currency-row{display:flex;gap:10px;margin:10px 0 18px;}
.ess-fd-wrap .price-inputs{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.ess-fd-wrap .price-inputs .field.is-inactive label{color:#b3b3b3;}
.ess-fd-wrap .price-inputs .field.is-inactive .en{color:#cfcfcf;}
.ess-fd-wrap .price-suffix{position:relative;}
.ess-fd-wrap .price-suffix input{padding-right:78px;}
.ess-fd-wrap .price-suffix .unit-badge{position:absolute;right:6px;top:32px;font-size:12px;font-weight:700;color:var(--text-en);background:#f2f3f0;border-radius:7px;padding:6px 10px;pointer-events:none;}
.ess-fd-wrap .field.is-inactive .unit-badge{color:#cccccc;background:#f7f7f7;}

.ess-fd-wrap .diagram-wrap{position:relative;width:100%;aspect-ratio:2104/896;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:8px 0 28px;}
.ess-fd-wrap .diagram-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}
.ess-fd-wrap .diagram-field{position:absolute;transform:translateY(-2px);}
.ess-fd-wrap .diagram-field input{width:100%;height:100%;text-align:center;padding:2px 4px;font-size:13px;font-weight:700;border-radius:6px;margin-top:0;}
.ess-fd-wrap .diagram-field.field-a{left:67.66%;width:6.32%;top:85.58%;height:11.69%;}
.ess-fd-wrap .diagram-field.field-b{left:86.90%;width:6.32%;top:41.85%;height:11.69%;}
.ess-fd-wrap .diagram-field.field-c{left:70.50%;width:6.23%;top:1.66%;height:11.69%;}
.ess-fd-wrap .diagram-field.field-d{left:55.79%;width:6.33%;top:1.62%;height:11.69%;}

.ess-fd-wrap .or-divider{display:flex;align-items:center;gap:16px;margin:8px 0 20px;}
.ess-fd-wrap .or-divider .tag{background:var(--ess-green);color:#fff;font-weight:700;font-size:13px;border-radius:8px;padding:6px 14px;white-space:nowrap;}
.ess-fd-wrap .or-divider hr{flex:1;border:none;border-top:2px solid var(--border);margin:0;}

.ess-fd-wrap .checkbox-row{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border:1px solid var(--border);border-radius:12px;cursor:pointer;}
.ess-fd-wrap .checkbox-row input{width:22px;height:22px;flex:0 0 22px;margin-top:2px;accent-color:var(--ess-green);cursor:pointer;}
.ess-fd-wrap .checkbox-row .label-text{font-weight:700;font-size:14.5px;}
.ess-fd-wrap .checkbox-row .label-text .en{display:block;font-weight:400;font-style:italic;color:var(--text-en);font-size:12.5px;margin-top:3px;}
.ess-fd-wrap .checkbox-row:has(input:checked){border-color:var(--ess-green);background:#f5faf0;}

.ess-fd-wrap fieldset.abcd-fieldset{border:none;margin:0;padding:0;}
.ess-fd-wrap fieldset.abcd-fieldset:disabled .diagram-field input{background:#f2f2f2;color:#c2c2c2;border-color:var(--border);}

.ess-fd-wrap .summary-section{margin-bottom:28px;}
.ess-fd-wrap .summary-section h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ess-green-dark);font-weight:700;margin:0 0 4px;display:flex;align-items:center;justify-content:space-between;}
.ess-fd-wrap .summary-section h3 button{font-size:12px;text-transform:none;letter-spacing:0;color:var(--text-body);font-weight:700;text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;padding:0;}
.ess-fd-wrap .summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;border-top:1px solid var(--border);padding-top:14px;}
.ess-fd-wrap .summary-grid dt{font-size:13px;color:var(--text-body);padding:7px 0;}
.ess-fd-wrap .summary-grid dd{font-size:13px;font-weight:700;margin:0;padding:7px 0;text-align:right;}
.ess-fd-wrap .summary-empty{font-size:13px;color:var(--text-en);font-style:italic;padding:10px 0;}
.ess-fd-wrap .summary-note{display:flex;gap:12px;align-items:flex-start;background:#f5faf0;border:1px solid #d9ecc4;border-radius:12px;padding:16px 20px;font-size:13.5px;color:#3f5c22;margin-top:8px;}
.ess-fd-wrap .summary-note b{color:#2c4116;}

.ess-fd-wrap .turnstile-row{display:flex;justify-content:center;margin-top:24px;min-height:65px;}

.ess-fd-wrap .submit-status{margin-top:20px;padding:16px 20px;border-radius:12px;font-size:14px;display:none;}
.ess-fd-wrap .submit-status.is-visible{display:block;}
.ess-fd-wrap .submit-status.is-loading{background:#f0f4fb;color:#2c4a7c;border:1px solid #cbdaf0;}
.ess-fd-wrap .submit-status.is-success{background:#f5faf0;color:#2c4116;border:1px solid #d9ecc4;}
.ess-fd-wrap .submit-status.is-error{background:#fdf1f0;color:#7a2b23;border:1px solid #f3c6c0;}

@media(max-width:640px){
  .ess-fd-wrap .card{padding:28px 22px;}
  .ess-fd-wrap .field-row,.ess-fd-wrap .field-row.three-col,.ess-fd-wrap .price-inputs,.ess-fd-wrap .summary-grid{grid-template-columns:1fr;}
  .ess-fd-wrap .steps li{font-size:0;}
  .ess-fd-wrap{padding:32px 16px 60px;}
}