/* ===================== DANUSA árajánlat-kérő — wizard ===================== */
:root{
  --navy:#2e5a3c; --navy-dark:#1d231f; --green:#4a8c58; --green-soft:#e7f1e9;
  --gold:#c79a3e; --gold-soft:#f7efdc; --bg:#eef1f4; --card:#fff; --panel:#fff;
  --border:#e3e8ed; --text:#1d2b3a; --muted:#5d6e7e; --cta:#232b25; --cta-dark:#161b17;
  --rail-bg:#f4f7f5; --img-bg:#fff;
  --radius:14px; --radius-sm:10px;
  --shadow:0 14px 40px rgba(18,44,70,.10); --shadow-sm:0 4px 14px rgba(18,44,70,.07); --shadow-lg:0 30px 70px rgba(18,44,70,.16);
  --font:'Montserrat','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--text); line-height:1.6;
  background:radial-gradient(1200px 500px at 80% -10%,rgba(74,140,88,.10),transparent 60%),var(--bg);
  -webkit-font-smoothing:antialiased; min-height:100vh; padding:clamp(12px,3vw,34px) clamp(10px,3vw,20px);
}
button{font-family:inherit;cursor:pointer}
svg{display:block}
img{max-width:100%;display:block}
a{color:var(--green);font-weight:700}

/* ---------- wizard shell ---------- */
/* overflow:clip levágja a sarkokat, de — a hidden-nel ellentétben — NEM töri el a belső
   position:sticky-t (így a jobb oldali „Az Ön ajánlata" sáv a böngésző tetejéhez tapad görgetéskor) */
.wiz{max-width:1120px;margin:0 auto;background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;overflow:clip}
.wz-top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);background:var(--card)}
.wz-brand{display:flex;align-items:center;gap:11px}
.wz-logo{display:flex}
.wz-name{font-weight:800;letter-spacing:.3px;color:var(--navy);font-size:16px}
.wz-name small{font-weight:600;color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-left:2px}
.wz-meta{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.wz-meta svg{width:16px;height:16px}

/* ---------- stepper ---------- */
.stepper{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:16px 18px 18px;background:var(--card);border-bottom:1px solid var(--border)}
.stp{display:flex;align-items:center;gap:10px;justify-content:center;background:transparent;border:0;padding:8px 6px;border-radius:10px;color:var(--muted);font-weight:600;font-size:13.5px;transition:.15s}
.stp-n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--bg);border:1.5px solid var(--border);font-size:12.5px;font-weight:800;color:var(--muted);transition:.15s}
.stp:hover{color:var(--text)}
.stp.is-active{color:var(--navy)}
.stp.is-active .stp-n{background:var(--navy);border-color:var(--navy);color:#fff}
.stp.is-done .stp-n{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.stp-fill{position:absolute;left:18px;bottom:0;height:3px;border-radius:3px;background:var(--green);width:25%;transition:width .35s cubic-bezier(.4,0,.2,1)}
@media (max-width:640px){.stp-t{display:none}}

/* ---------- body layout ---------- */
.wz-body{display:grid;grid-template-columns:1fr 300px}
@media (max-width:860px){.wz-body{grid-template-columns:1fr}}
.wz-main{padding:clamp(20px,3vw,34px);min-height:440px}
.panel{display:none;animation:fadeUp .3s ease both}
.panel.is-shown{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}
.p-h{font-size:clamp(19px,2.4vw,24px);font-weight:800;color:var(--navy);margin:0 0 4px;letter-spacing:-.4px}
.p-sub{font-size:14px;color:var(--muted);margin:0 0 24px}

/* ===== SEO / bevezető blokk (1. lépés teteje) ===== */
.intro{margin:0 0 28px}
.intro-eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy);background:var(--green-soft);padding:6px 13px;border-radius:999px;margin-bottom:14px}
.intro-h{font-size:clamp(23px,3.4vw,34px);font-weight:800;color:var(--navy);letter-spacing:-.7px;line-height:1.12;margin:0 0 12px}
.intro-p{font-size:15px;color:var(--muted);line-height:1.7;max-width:780px;margin:0 0 22px}
.how-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:none}
@media(max-width:720px){.how-steps{grid-template-columns:1fr}}
.how-step{display:flex;gap:13px;align-items:flex-start;background:linear-gradient(135deg,var(--green-soft),#fbfdfb);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.how-step .how-n{flex:none;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--green),var(--navy));color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(46,90,60,.28)}
.how-step>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.how-step b{font-size:14px;color:var(--text);font-weight:800;line-height:1.25}
.how-step span{font-size:12.5px;color:var(--muted);line-height:1.5}
.trust-bar{display:flex;align-items:flex-start;gap:10px;background:var(--gold-soft);border:1px solid #ecdcb4;border-radius:var(--radius);padding:13px 16px;font-size:13px;color:#7a5e22;line-height:1.6;margin:0}
.trust-bar svg{flex:none;width:18px;height:18px;color:var(--gold);margin-top:1px}

/* ===== Lábléc + diszkrét belső belépő (a linket JS injektálja, botok elől rejtve) ===== */
.site-foot{max-width:1120px;margin:16px auto 2px;padding:0 8px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--muted);opacity:.72;text-align:center}
.af-slot{display:inline-flex}
.af-link{display:inline-flex;align-items:center;color:var(--muted);opacity:.4;transition:opacity .15s,color .15s}
.af-link:hover{opacity:1;color:var(--navy)}
.af-link svg{width:15px;height:15px}
@media(max-width:520px){.site-foot{flex-direction:column;gap:6px}}
.field{margin-bottom:26px}
.f-lab{display:block;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.f-hint{font-weight:700;color:var(--green);text-transform:none;letter-spacing:0;font-size:11.5px}
.err-msg{display:block;color:#c0392b;font-weight:700;font-size:13px;margin-top:10px}

/* ---------- tervrajz gyorsút ---------- */
.plan-cta{background:linear-gradient(135deg,var(--green-soft),#fff);border:1.5px solid var(--green);border-radius:var(--radius);padding:20px;margin-bottom:22px}
.plan-cta-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.plan-ic{width:46px;height:46px;flex:none;border-radius:11px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center}
.plan-ic svg{width:24px;height:24px}
.plan-txt{display:flex;flex-direction:column;gap:4px}
.plan-title{font-size:15.5px;font-weight:800;color:var(--navy)}
.plan-sub{font-size:13px;color:var(--muted);line-height:1.5}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;border:2px dashed var(--green);border-radius:12px;background:#fff;padding:24px 16px;cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone.drag{background:var(--green-soft);border-color:var(--navy)}
.dz-ic{width:30px;height:30px;color:var(--green)}
.dz-main{font-size:14px;font-weight:600;color:var(--text)}
.dz-main b{color:var(--navy)}
.dz-sub{font-size:12px;color:var(--muted)}
.plan-files{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.plan-file{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 12px}
.plan-file>svg{width:18px;height:18px;color:var(--green);flex:none}
.plan-file-name{flex:1;font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-file-size{font-size:11.5px;color:var(--muted);flex:none}
.plan-file-x{flex:none;width:24px;height:24px;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;border-radius:6px}
.plan-file-x:hover{background:var(--bg);color:#c0392b}
.plan-skip{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:14px;background:var(--cta);color:#fff;border:0;border-radius:10px;padding:14px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.plan-skip:hover{background:var(--cta-dark);transform:translateY(-2px)}
.plan-skip[hidden]{display:none}
.plan-skip svg{width:18px;height:18px}
.or-div{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--muted)}
.or-div::before,.or-div::after{content:"";flex:1;height:1px;background:var(--border)}
.or-div span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.config-reveal[hidden]{display:none}
.config-reveal:not([hidden]){animation:fadeUp .32s ease both}

/* ---------- material tiles ---------- */
.mat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.mat-tiles{grid-template-columns:1fr}}
.mat{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:16px 12px;transition:.16s}
.mat-img{width:100%;aspect-ratio:16/11;background:var(--img-bg);border-radius:9px;display:flex;align-items:center;justify-content:center;padding:8px}
.mat-img img{width:100%;height:100%;object-fit:contain}
.mat-t{font-weight:700;font-size:14px;color:var(--text);text-align:center}
.mat-t em{font-style:normal;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-top:2px}
.mat:hover:not(.is-off){border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.mat.is-on{border-color:var(--navy);box-shadow:0 0 0 3px var(--green-soft),var(--shadow-sm)}
.mat.is-off{opacity:.5;cursor:not-allowed}
/* ---------- anyag: tömör sor + modal ---------- */
.mat-chosen{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s}
.mat-chosen:hover{border-color:var(--green)}
.mat-chosen.is-set{border-color:var(--navy);box-shadow:0 0 0 3px var(--green-soft)}
.mat-chosen-val{font-weight:700;color:var(--text);font-size:15px}
.mat-chosen-edit{font-size:12.5px;font-weight:700;color:var(--green);white-space:nowrap}
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(18,44,70,.55)}
.modal-card{position:relative;z-index:1;background:var(--card);border-radius:18px;box-shadow:var(--shadow-lg);max-width:560px;width:100%;padding:28px;animation:matIn .24s ease both}
@keyframes matIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal-card{animation:none}}
.modal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;background:var(--bg);border-radius:9px;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;transition:.12s}
.modal-x:hover{background:var(--border);color:var(--text)}
.modal-h{font-size:20px;font-weight:800;color:var(--navy);margin:0 4px 4px 0;letter-spacing:-.3px}
.modal-sub{font-size:14px;color:var(--muted);margin:0 0 20px}

/* ---------- figyelmeztető (notice) modal ---------- */
.notice-card{max-width:440px;text-align:center;padding:34px 30px 26px}
.notice-ico{width:58px;height:58px;margin:2px auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fbeaea;color:#c0392b}
.notice-ico svg{width:30px;height:30px}
.notice-card .modal-h{margin:0 0 6px}
.notice-card .modal-sub{margin:0 0 18px;line-height:1.5}
.notice-list{list-style:none;margin:0 0 22px;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}
.notice-list[hidden]{display:none}
.notice-list li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);background:#fbeaea;border:1px solid #f2d6d6;border-radius:10px;padding:9px 13px}
.notice-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:#c0392b;flex:none}
.notice-ok{width:100%;cursor:pointer}

/* ---------- brand tiles ---------- */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:560px){.brands{grid-template-columns:repeat(2,1fr)}}
.brand{display:flex;align-items:center;justify-content:center;height:92px;background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:16px 18px;transition:.15s}
.brand:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.brand.is-on{border-color:var(--navy);box-shadow:0 0 0 3px var(--green-soft),var(--shadow-sm)}
.brand-logo{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.brand-logo img{max-width:100%;max-height:56px;object-fit:contain}

/* ---------- profile groups & cards ---------- */
.profiles{display:none}
.profiles.is-shown{display:block;animation:fadeUp .28s ease both}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.cards{grid-template-columns:1fr}}
.pc{position:relative;text-align:left;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:0;display:flex;flex-direction:column;overflow:hidden;transition:.16s;width:100%;cursor:pointer}
.pc:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow)}
.pc.is-pick{border-color:var(--navy);box-shadow:0 0 0 3px var(--green-soft),var(--shadow-sm)}
.pc-img{position:relative;display:block;aspect-ratio:1/1;background:#fff;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.pc:hover .pc-img img{transform:scale(1.05)}
.pc-chip{position:absolute;left:10px;bottom:10px;background:rgba(29,35,31,.85);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.6px;padding:4px 9px;border-radius:6px}
.pc-body{display:flex;flex-direction:column;gap:7px;padding:14px 15px 16px}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc-name{font-weight:800;color:var(--navy);font-size:15px}
.pc-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);white-space:nowrap}
.pc-spec{font-size:12.5px;font-weight:700;color:var(--text)}
.pc-note{font-size:12.5px;color:var(--muted);line-height:1.45}
/* „Tovább" gomb a kiválasztott profil-kártyán (csak is-pick esetén látszik) */
.pc-next{display:none;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;background:var(--cta);color:#fff;border:0;border-radius:10px;padding:11px;font-weight:700;font-size:13.5px;cursor:pointer;transition:.15s}
.pc-next:hover{background:var(--cta-dark);transform:translateY(-1px)}
.pc-next svg{width:16px;height:16px}
.pc.is-pick .pc-next{display:flex}
.pc-badge{position:absolute;top:11px;right:11px;z-index:2;background:var(--gold);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:5px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.22)}
/* üvegréteg-kapcsoló a kártyán (balra || = 2 rétegű, jobbra ||| = 3 rétegű) */
.glz{position:relative;display:inline-flex;align-items:center;flex:none;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px;cursor:pointer;transition:.15s}
.glz:hover{border-color:var(--green)}
.glz-ico{position:relative;z-index:1;display:inline-flex;gap:3px;align-items:flex-end;justify-content:center;height:16px;width:34px}
.glz-ico i{width:3px;height:16px;border-radius:1px;background:#c2ccd4;transition:.15s}
.glz-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:34px;border-radius:999px;background:#fff;box-shadow:var(--shadow-sm);transition:left .2s ease}
.glz[data-glaze="3"] .glz-thumb{left:37px}
.glz[data-glaze="2"] .glz-2 i{background:linear-gradient(180deg,#9cc3d8,#5f93b3)}
.glz[data-glaze="3"] .glz-3 i{background:linear-gradient(180deg,#9cc3d8,#5f93b3)}

/* ---------- swatches ---------- */
.swatches{display:flex;flex-wrap:wrap;gap:9px}
.sw{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--border);border-radius:999px;padding:7px 15px 7px 8px;font-weight:600;font-size:13.5px;color:var(--text);transition:.15s}
.sw:hover{border-color:var(--green)}
.sw.is-pick{border-color:var(--navy);box-shadow:0 0 0 3px var(--green-soft)}
.sw-c{width:22px;height:22px;border-radius:50%;border:1.5px solid transparent;flex:none}

/* ---------- product builder ---------- */
.prod{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.prod-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.prod-ix{font-weight:800;color:var(--navy);font-size:14px}
.prod-x{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--border);background:var(--card);color:var(--muted);display:flex;align-items:center;justify-content:center}
.prod-x:hover{border-color:#c0392b;color:#c0392b}
.prod-x svg{width:16px;height:16px}
.pf{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.pf label{font-size:11.5px;font-weight:700;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}
.type-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tt{display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:16px 10px;transition:.15s}
.tt-img{width:100%;height:84px;background:var(--img-bg);border-radius:9px;display:flex;align-items:center;justify-content:center;padding:8px}
.tt-img img{max-width:100%;max-height:100%;object-fit:contain}
.tt span{font-size:12.5px;font-weight:700;color:var(--text);text-align:center}
.tt:hover{border-color:var(--green)}
.tt.is-on{border-color:var(--navy);background:var(--green-soft)}
.tt.is-on span{color:var(--navy)}
/* lépcsős kivitel-választó */
.kv-steps{display:flex;flex-direction:column;gap:20px;margin-bottom:16px}
.kv-lab{font-size:11.5px;font-weight:700;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;margin-bottom:11px}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
@media (max-width:520px){.kv-grid{grid-template-columns:1fr}}
.kv-card{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:18px 14px;transition:.15s;text-align:center}
.kv-img{width:100%;height:190px;background:var(--img-bg);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:12px}
.kv-img img{max-width:100%;max-height:100%;object-fit:contain}
.kv-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.kv-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.kv-card.is-on{border-color:var(--navy);background:var(--green-soft)}
.kv-card.is-on .kv-name{color:var(--navy);font-weight:700}
/* összecsukott szint */
.kv-summary{display:none;align-items:center;gap:14px;width:100%;background:var(--green-soft);border:1.5px solid var(--navy);border-radius:12px;padding:10px 14px;text-align:left;cursor:pointer;transition:.15s}
.kv-summary:hover{box-shadow:var(--shadow-sm)}
.kv-level.is-collapsed .kv-summary{display:flex}
.kv-level.is-collapsed .kv-grid{display:none}
.kv-level.is-collapsed .kv-lab{display:none}
.kvs-thumb{width:52px;height:52px;flex:none;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:5px;border:1px solid var(--border)}
.kvs-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.kvs-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.kvs-lab{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.kvs-name{font-size:14px;font-weight:700;color:var(--navy)}
.kvs-edit{font-size:12px;font-weight:700;color:var(--green);flex:none;display:inline-flex;align-items:center;gap:5px}
.kvs-edit::before{content:"\270E"}
.prod-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:560px){.prod-grid{grid-template-columns:1fr 1fr}}
.pf-sm{margin-bottom:16px}
.inp{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);background:var(--panel);border-radius:10px;padding:0 13px;min-height:46px}
.inp input{border:0;outline:0;background:transparent;font-size:15px;font-weight:600;color:var(--text);width:100%;font-family:inherit}
.inp .unit{color:var(--muted);font-weight:600;font-size:12.5px}
.inp.err{border-color:#c0392b}
textarea.ta{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;font-family:inherit;font-size:14px;color:var(--text);resize:vertical;min-height:60px}
.stepn{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;min-height:46px}
.stepn button{flex:none;width:40px;height:44px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:var(--green);background:var(--card);border:0}
.stepn input{flex:1;text-align:center;font-size:15px;font-weight:800;color:var(--text);border:0;outline:0;width:100%;font-family:inherit}
.chips-pick{display:flex;flex-wrap:wrap;gap:8px}
.cp{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);background:var(--card);border:1.5px solid var(--border);border-radius:999px;padding:8px 15px;transition:.15s;user-select:none}
.cp:hover{border-color:var(--green)}
.cp.is-on{border-color:var(--navy);background:var(--green-soft);color:var(--navy)}
.cp.is-on::before{content:"✓";font-weight:800}
.add-prod{display:inline-flex;align-items:center;gap:9px;width:100%;justify-content:center;border:1.6px dashed var(--green);background:var(--green-soft);color:var(--navy);border-radius:var(--radius);padding:14px;font-weight:700;font-size:14px;transition:.15s}
.add-prod:hover{background:transparent}
.add-prod svg{width:18px;height:18px}

/* ---------- services ---------- */
.svc-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
@media (max-width:560px){.svc-2{grid-template-columns:1fr}}
.svc{text-align:left;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px;transition:.16s}
.svc:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.svc.is-pick{border-color:var(--navy);box-shadow:0 0 0 3px var(--green-soft),var(--shadow-sm)}
.svc-img{width:100%;height:96px;background:var(--img-bg);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:10px}
.svc-img img{max-width:100%;max-height:100%;object-fit:contain}
.svc-t{font-weight:800;color:var(--navy);font-size:15px}
.svc-d{font-size:13px;color:var(--muted);line-height:1.45}
.extras{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.extras-h{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:14px}
.ex{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:14px;font-weight:500;color:var(--text);cursor:pointer}
.ex input{width:18px;height:18px;accent-color:var(--navy);flex:none}

/* ---------- contact form ---------- */
.frm{display:flex;flex-direction:column;gap:16px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}
.frm .pf{margin-bottom:0}
.frm input,.frm textarea{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:12px 13px;font-family:inherit;font-size:14px;color:var(--text)}
.frm input:focus,.frm textarea:focus{outline:0;border-color:var(--green)}
.frm input.err{border-color:#c0392b}
.gdpr{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--muted);margin-top:4px}
.gdpr input{width:18px;height:18px;accent-color:var(--navy);flex:none}
.gdpr.err{color:#c0392b}
.gdpr.err input{accent-color:#c0392b;outline:2px solid #c0392b;outline-offset:2px;border-radius:3px}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- piszkozat-sáv ---------- */
.draft-bar{display:flex;align-items:center;gap:11px;background:var(--green-soft);border:1px solid #cfe6d5;color:var(--navy);border-radius:11px;padding:10px 14px;font-size:13.5px;font-weight:600;margin:0 0 18px}
.draft-bar[hidden]{display:none}
.draft-bar svg{width:18px;height:18px;flex:none;color:var(--green)}
.draft-bar span{flex:1;min-width:0}
.draft-bar button{flex:none;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline;padding:2px 4px}
.draft-bar button:hover{color:#c0392b}

/* ---------- live rail ---------- */
.rail{border-left:1px solid var(--border);background:var(--rail-bg)}
@media (max-width:860px){.rail{border-left:0;border-top:1px solid var(--border)}}
.rail-in{position:sticky;top:12px;padding:24px 22px}
.rail-h{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--navy);font-size:15px;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--border);letter-spacing:-.2px}
.rail-h svg{width:18px;height:18px;color:var(--green)}
.rail-list{display:flex;flex-direction:column;margin:0;padding:0}
.rl{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px dashed var(--border)}
.rl dt{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);flex:none;padding-top:2px}
.rl dd{margin:0;font-size:13.5px;font-weight:700;color:var(--text);text-align:right}
.rl-prod dd{display:flex;flex-direction:column;gap:4px;align-items:flex-end;font-weight:600}
.rl-q{color:var(--green);font-weight:800}
.rail-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 0 4px}
.rf-cap{font-size:12px;font-weight:600;color:var(--muted)}
.rf-count{font-size:14px;font-weight:800;color:var(--navy);background:var(--green-soft);padding:5px 12px;border-radius:999px}
.rail-fine{font-size:11.5px;color:var(--muted);line-height:1.5;margin:10px 0 0}

/* ---------- actions ---------- */
.wz-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;border-top:1px solid var(--border);background:var(--card);position:sticky;bottom:0}
.wz-progress-txt{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.btn{border:1.6px solid transparent;border-radius:10px;padding:13px 26px;font-weight:700;font-size:14px;letter-spacing:.3px;transition:.16s}
.btn-back{background:transparent;border-color:var(--border);color:var(--text)}
.btn-back:hover:not(:disabled){border-color:var(--muted)}
.btn-back:disabled{opacity:.4;cursor:not-allowed}
.btn-next{background:var(--cta);color:#fff;border-color:var(--cta);box-shadow:var(--shadow-sm)}
.btn-next:hover{background:var(--cta-dark);border-color:var(--cta-dark);transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:8px}