/* =====================================================================
   WEBDUO ÁRKALKULÁTOR — felugró ablak
   Minden osztály wdc- előtagú, és a saját színeit hozza magával,
   így bármelyik oldalon (a főoldalon is) ugyanúgy néz ki.
   ===================================================================== */
.wdc-ov{
  --c-ink:#0D0614; --c-ink2:#3B3450; --c-mut:#6E6688;
  --c-paper:#F2F0FE; --c-card:#FFFFFF; --c-lav:#DCD5FA; --c-lav2:#E7E2FC; --c-mintbg:#DBF3E9;
  --c-vi:#6528F7; --c-vilt:#9B72FF; --c-mint:#4FD3A5; --c-sun:#FFD166; --c-err:#D93A3A;
  --bd:2.5px;
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
  background:rgba(13,6,20,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease;
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5; color:var(--c-ink2);
  -webkit-font-smoothing:antialiased;
}
.wdc-ov[hidden]{display:none!important;}
.wdc-ov.wdc-on{opacity:1;}
.wdc-ov *,.wdc-ov *::before,.wdc-ov *::after{box-sizing:border-box;}
html.wdc-lock,html.wdc-lock body{overflow:hidden!important;}

.wdc{
  position:relative; width:100%; max-width:780px; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  display:flex; flex-direction:column;
  background:var(--c-card); border:3px solid var(--c-ink); border-radius:18px;
  box-shadow:12px 12px 0 0 var(--c-mint);
  transform:translateY(26px) scale(.97); transition:transform .32s cubic-bezier(.3,1.35,.5,1);
  overflow:hidden;
}
.wdc-ov.wdc-on .wdc{transform:none;}

/* --- fejléc --- */
.wdc-head{
  display:flex; align-items:center; gap:16px; padding:16px 18px 16px 24px; flex:none;
  background:var(--c-ink); color:var(--c-paper);
}
.wdc-tag{font-family:"Space Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-mint);}
.wdc-ticks{display:flex; gap:6px; margin-left:auto;}
.wdc-ticks i{display:block; width:26px; height:8px; border-radius:999px; border:2px solid rgba(242,240,254,.5); transition:background-color .25s ease,width .25s ease,border-color .25s ease;}
.wdc-ticks i.wdc-done{background:var(--c-mint); border-color:var(--c-mint);}
.wdc-ticks i.wdc-cur{width:42px; background:var(--c-mint); border-color:var(--c-mint);}
.wdc-x{
  flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  border:2px solid var(--c-paper); border-radius:10px; background:transparent; color:var(--c-paper);
  font:700 18px/1 "Figtree",sans-serif; transition:background-color .15s ease,color .15s ease;
}
.wdc-x:hover{background:var(--c-paper); color:var(--c-ink);}

/* --- törzs --- */
.wdc-body{position:relative; flex:1 1 auto; overflow:auto; padding:28px 30px 30px; overscroll-behavior:contain;}
.wdc-step{animation:wdc-in .34s cubic-bezier(.22,.8,.3,1) both;}
.wdc-step.wdc-back{animation-name:wdc-in-back;}
@keyframes wdc-in{from{opacity:0; transform:translateX(26px);}to{opacity:1; transform:none;}}
@keyframes wdc-in-back{from{opacity:0; transform:translateX(-26px);}to{opacity:1; transform:none;}}
.wdc-num{font-family:"Space Mono",monospace; font-size:13px; letter-spacing:.08em; color:var(--c-vi);}
.wdc-q{
  margin:6px 0 22px; color:var(--c-ink);
  font-family:"Archivo","Figtree",sans-serif; font-weight:800; font-stretch:112%;
  font-size:clamp(26px,4vw,40px); line-height:.95; letter-spacing:-.03em; text-transform:uppercase;
  text-wrap:balance;
}
.wdc-hint{margin:16px 0 0; font-size:14px; color:var(--c-mut);}

/* --- választható kártyák --- */
.wdc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.wdc-grid.wdc-g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.wdc-opt{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  min-height:92px; padding:16px 18px; cursor:pointer;
  border:var(--bd) solid var(--c-ink); border-radius:12px; background:var(--c-card); color:var(--c-ink);
  font:inherit; box-shadow:0 0 0 0 var(--c-ink);
  transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease;
}
.wdc-opt b{font-family:"Archivo",sans-serif; font-weight:800; font-stretch:112%; font-size:17px; line-height:1.05; letter-spacing:-.02em; text-transform:uppercase;}
.wdc-opt span{font-family:"Space Mono",monospace; font-size:12px; line-height:1.45; color:var(--c-mut);}
.wdc-opt:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 0 var(--c-ink); background:var(--c-lav2);}
.wdc-opt[aria-pressed="true"],.wdc-opt[aria-checked="true"]{background:var(--c-mintbg); transform:translate(-2px,-2px); box-shadow:4px 4px 0 0 var(--c-ink);}
.wdc-opt:focus-visible,.wdc-chip:focus-visible,.wdc-btn:focus-visible,.wdc-x:focus-visible,.wdc-input:focus-visible,.wdc-link:focus-visible{outline:3px solid var(--c-vi); outline-offset:3px;}
/* egyválasztós: pipa a sarokban, ha kijelölt */
.wdc-opt.wdc-one[aria-pressed="true"]::after{
  content:"✓"; position:absolute; right:12px; top:12px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--c-ink); background:var(--c-mint);
  font:800 14px/1 "Figtree",sans-serif; color:var(--c-ink);
}
/* többválasztós: négyzet a felirat előtt */
.wdc-opt.wdc-multi{flex-direction:row; align-items:center; gap:12px; min-height:62px;}
.wdc-opt.wdc-multi i{flex:none; width:24px; height:24px; border:2px solid var(--c-ink); border-radius:6px; background:var(--c-card);
  display:flex; align-items:center; justify-content:center; font:800 14px/1 "Figtree",sans-serif; font-style:normal; color:transparent; transition:background-color .14s ease;}
.wdc-opt.wdc-multi[aria-pressed="true"] i{background:var(--c-mint); color:var(--c-ink);}
.wdc-opt.wdc-multi b{font-size:15px;}

/* --- csoportos kérdések (4–5. lépés) --- */
.wdc-group + .wdc-group{margin-top:24px; padding-top:22px; border-top:2px dashed rgba(13,6,20,.18);}
.wdc-gq{display:block; margin-bottom:12px; font-family:"Space Mono",monospace; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink);}
.wdc-chips{display:flex; flex-wrap:wrap; gap:10px;}
.wdc-chip{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; cursor:pointer; text-align:left;
  padding:11px 16px; border:var(--bd) solid var(--c-ink); border-radius:12px; background:var(--c-card); color:var(--c-ink);
  font:700 15px/1.2 "Figtree",sans-serif; transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease;
}
.wdc-chip small{font:400 11.5px/1.35 "Space Mono",monospace; color:var(--c-mut);}
.wdc-chip:hover{transform:translate(-2px,-2px); box-shadow:3px 3px 0 0 var(--c-ink);}
.wdc-chip[aria-checked="true"]{background:var(--c-mintbg); transform:translate(-2px,-2px); box-shadow:3px 3px 0 0 var(--c-ink);}
.wdc-group.wdc-miss .wdc-gq{color:var(--c-err);}
.wdc-group.wdc-miss .wdc-chip{border-color:var(--c-err);}

/* --- mezők --- */
.wdc-fields{display:grid; gap:12px;}
.wdc-f2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.wdc-lbl{display:block; margin-bottom:5px; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-mut);}
.wdc-lbl em{font-style:normal; color:var(--c-vi);}
.wdc-input{
  width:100%; padding:13px 14px; border:2px solid var(--c-ink); border-radius:10px; background:var(--c-paper);
  font:500 16px/1.3 "Figtree",sans-serif; color:var(--c-ink); transition:background-color .15s ease,box-shadow .15s ease;
}
.wdc-input::placeholder{color:#9A93B0;}
.wdc-input:focus{outline:none; background:#fff; box-shadow:3px 3px 0 0 var(--c-vi);}
.wdc-input[aria-invalid="true"]{border-color:var(--c-err); background:#FFF0F0;}
.wdc-url{margin-top:14px;}
.wdc-consent{display:flex; gap:10px; align-items:flex-start; margin-top:4px; font-size:14px; line-height:1.45; color:var(--c-ink2); cursor:pointer;}
.wdc-consent input{flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--c-vi); cursor:pointer;}
.wdc-consent a{color:var(--c-vi); text-decoration:underline;}
.wdc-consent.wdc-miss{color:var(--c-err);}
.wdc-hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important;}
.wdc-err{margin:14px 0 0; padding:11px 14px; border:2px solid var(--c-err); border-radius:10px; background:#FFF0F0; color:#8E1F1F; font-size:14.5px; font-weight:600;}
.wdc-err:empty{display:none;}
.wdc-link{display:inline-flex; gap:6px; margin-top:16px; padding:0; border:0; background:none; cursor:pointer; font:600 14.5px/1.4 "Figtree",sans-serif; color:var(--c-vi); text-decoration:underline; text-underline-offset:3px;}

/* --- árkártya (elmosva → kiélesedik) --- */
.wdc-price{
  margin:0 0 20px; padding:18px 20px; border:var(--bd) solid var(--c-ink); border-radius:14px;
  background:var(--c-ink); color:var(--c-paper);
}
.wdc-pkg{font-family:"Space Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-mint);}
.wdc-prow{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 14px; margin-top:10px;}
.wdc-pk{font-family:"Space Mono",monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,240,254,.6);}
.wdc-pv{font-family:"Archivo",sans-serif; font-weight:800; font-stretch:112%; font-size:clamp(24px,3.6vw,34px); letter-spacing:-.03em; line-height:1.05; color:#fff;}
.wdc-pv.wdc-small{font-size:20px;}
.wdc-pv i{font-style:normal; font-size:15px; font-weight:600; color:rgba(242,240,254,.7);}
.wdc-price.wdc-locked .wdc-pv{filter:blur(7px); user-select:none; opacity:.85;}
.wdc-lock{display:flex; gap:8px; align-items:center; margin:12px 0 0; padding-top:12px; border-top:1px solid rgba(242,240,254,.18); font-size:13.5px; color:rgba(242,240,254,.75);}
.wdc-lock svg{flex:none; width:16px; height:16px;}
.wdc-price.wdc-reveal .wdc-pv{animation:wdc-unblur .9s cubic-bezier(.3,.8,.3,1) both;}
@keyframes wdc-unblur{from{filter:blur(8px); opacity:.6;}to{filter:blur(0); opacity:1;}}
.wdc-note{margin:10px 0 0; font-size:12.5px; color:rgba(242,240,254,.6);}
.wdc-lines{margin:0 0 18px; border:2px solid var(--c-ink); border-radius:12px; overflow:hidden;}
.wdc-lines summary{cursor:pointer; padding:12px 16px; font-weight:700; color:var(--c-ink); list-style:none; display:flex; justify-content:space-between;}
.wdc-lines summary::-webkit-details-marker{display:none;}
.wdc-lines summary::after{content:"+"; font-weight:800;}
.wdc-lines[open] summary::after{content:"–";}
.wdc-lines table{width:100%; border-collapse:collapse; font-size:14px;}
.wdc-lines td{padding:9px 16px; border-top:1px solid var(--c-lav2); vertical-align:top;}
.wdc-lines td:last-child{text-align:right; font-weight:700; color:var(--c-ink); white-space:nowrap; font-variant-numeric:tabular-nums;}
.wdc-ok{display:flex; gap:12px; align-items:flex-start; margin:0 0 18px; padding:13px 15px; border:2px solid var(--c-ink); border-radius:12px; background:var(--c-mintbg); color:var(--c-ink); font-size:15px;}
.wdc-ok b{word-break:break-all;}
.wdc-ok.wdc-warn{background:#FFF4D6;}
.wdc-ok svg{flex:none; width:22px; height:22px; margin-top:1px;}

/* --- lábléc és gombok --- */
.wdc-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; padding:16px 24px; border-top:var(--bd) solid var(--c-ink); background:var(--c-paper);}
.wdc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:13px 24px; border:3px solid var(--c-ink); border-radius:999px; background:var(--c-card); color:var(--c-ink);
  font:700 16px/1.1 "Figtree",sans-serif; box-shadow:4px 4px 0 0 var(--c-ink); text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,opacity .15s ease;
}
.wdc-btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--c-ink);}
.wdc-btn:active{transform:translate(4px,4px); box-shadow:0 0 0 0 var(--c-ink);}
.wdc-btn.wdc-go{background:var(--c-vi); color:#fff;}
.wdc-btn.wdc-mint{background:var(--c-mint); color:var(--c-ink);}
.wdc-btn.wdc-ghost{box-shadow:none; background:transparent;}
.wdc-btn.wdc-ghost:hover{background:var(--c-lav2); transform:none;}
.wdc-btn[disabled]{opacity:.38; cursor:not-allowed; transform:none!important; box-shadow:none!important;}
.wdc-btn.wdc-busy{pointer-events:none;}
.wdc-btn.wdc-busy::after{content:""; width:16px; height:16px; border:3px solid currentColor; border-right-color:transparent; border-radius:50%; animation:wdc-spin .7s linear infinite;}
@keyframes wdc-spin{to{transform:rotate(360deg);}}
.wdc-foot-r{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}

/* --- telefon: teljes képernyő --- */
@media (max-width:640px){
  .wdc-ov{padding:0; align-items:stretch;}
  .wdc{max-width:none; max-height:none; height:100%; border-radius:0; border:0; box-shadow:none;}
  .wdc-head{padding:12px 12px 12px 18px; padding-top:calc(12px + env(safe-area-inset-top,0px));}
  .wdc-ticks i{width:16px;}
  .wdc-ticks i.wdc-cur{width:26px;}
  .wdc-tag{font-size:11px;}
  .wdc-body{padding:22px 18px 24px;}
  .wdc-grid,.wdc-grid.wdc-g3,.wdc-f2{grid-template-columns:1fr;}
  .wdc-opt{min-height:0;}
  .wdc-foot{padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
  .wdc-btn{padding:12px 20px; font-size:15px;}
}
@media (max-width:380px){.wdc-ticks{display:none;}}

@media (prefers-reduced-motion:reduce){
  .wdc-ov,.wdc,.wdc-step,.wdc-opt,.wdc-chip,.wdc-btn,.wdc-ticks i{transition:none!important; animation:none!important;}
  .wdc-price.wdc-reveal .wdc-pv{animation:none!important;}
}