/* Hejzel Mandatsanfrage. Ported from the draft (site.css, form section) and
   scoped to .hza so it does not touch the theme. Colours are custom
   properties: a theme can override them on .hza. */

.hza{
  --hza-ink:#00194A; --hza-ink-deep:#00112F;
  --hza-paper-2:#F4F1EB; --hza-paper-3:#E9E4DA;
  --hza-acc:#14598F; --hza-acc-deep:#0C3F6C; --hza-acc-soft:rgba(20,89,143,.09);
  --hza-text:#10233F; --hza-soft:#4D6076; --hza-faint:#8291A3;
  --hza-line:rgba(16,35,63,.12);
  --hza-r-sm:8px; --hza-pill:999px;
  --hza-sh:0 1px 12px rgba(0,0,0,.06); --hza-sh-md:0 8px 30px rgba(0,0,0,.07);
  --hza-ease:cubic-bezier(.22,.61,.36,1);
  color:var(--hza-text);
}
.hza *,.hza *::before,.hza *::after{ box-sizing:border-box; }
.hza .form-wrap{ max-width:820px; }

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.hza .hza-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* buttons */
.hza-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font:inherit; font-size:.95rem; font-weight:600; line-height:1.2;
  padding:.95rem 1.7rem; border-radius:var(--hza-pill); border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .25s var(--hza-ease), color .25s var(--hza-ease),
             border-color .25s var(--hza-ease), box-shadow .25s var(--hza-ease), opacity .2s;
}
.hza-btn .arw{ transition:transform .3s var(--hza-ease); }
.hza-btn:hover .arw{ transform:translateX(4px); }
.hza-btn-primary{ background:var(--hza-ink); color:#fff; }
.hza-btn-primary:hover{ background:var(--hza-ink-deep); box-shadow:var(--hza-sh-md); }
.hza-btn-acc{ background:var(--hza-acc); color:#fff; }
.hza-btn-acc:hover{ background:#1A6DAB; box-shadow:0 10px 28px rgba(0,25,74,.35); }
.hza-btn-ghost{ background:transparent; color:var(--hza-ink); border-color:var(--hza-line); }
.hza-btn-ghost:hover{ border-color:var(--hza-ink); }
.hza-btn:focus-visible{ outline:2px solid var(--hza-acc); outline-offset:3px; }
.hza-btn[disabled]{ opacity:.6; cursor:progress; }

/* step 1: list of types, follow-up opens under the chosen one */
.hza .tlist{ display:grid; gap:.5rem; }
.hza .tpick .opt{ width:100%; }
.hza .tpop{
  display:grid; grid-template-rows:0fr; opacity:0; margin:0 0 0 2.2rem;
  transition:grid-template-rows .35s var(--hza-ease), opacity .25s var(--hza-ease), margin .35s var(--hza-ease);
}
.hza .tpop-in{ min-height:0; overflow:hidden; }
.hza .tpick:has(input[name="type"]:checked) .tpop{
  grid-template-rows:1fr; opacity:1; margin:.6rem 0 .5rem 2.2rem;
}
.hza .tpop-q{ font-size:.9rem; font-weight:600; margin:0 0 .5rem; }

/* chips: legal form, turnover, timing */
.hza .fchips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.hza .fchip{ position:relative; cursor:pointer; }
.hza .fchip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.hza .fchip span{
  display:inline-block; padding:.55rem .95rem; border-radius:var(--hza-pill);
  border:1px solid var(--hza-line); background:#fff; font-size:.92rem; line-height:1.2;
  transition:border-color .2s var(--hza-ease), background .2s var(--hza-ease), color .2s var(--hza-ease);
}
.hza .fchip:hover span{ border-color:rgba(16,35,63,.35); }
.hza .fchip input:checked + span{ background:var(--hza-ink); border-color:var(--hza-ink); color:#fff; }
.hza .fchip input:focus-visible + span{ outline:2px solid var(--hza-acc); outline-offset:2px; }

/* step 2 shows only the groups of the chosen type (form.js sets .on). Without
   JS everything stays visible. Works for any type key set up in wp-admin. */
.hza.js form [data-for]:not(.on){ display:none; }

/* steps, only with JS. Without it all steps show at once and the rail hides. */
.hza:not(.js) .frail{ display:none; }
.hza.js form .fstep{ display:none; }
.hza.js form .fstep.active{ display:block; animation:hza-fade .4s var(--hza-ease); }
.hza:not(.js) form .fstep + .fstep{ margin-top:2.5rem; }
.hza:not(.js) form .fstep:not(:last-child) .fnav{ display:none; }
@keyframes hza-fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.hza .frail{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
             margin:0 0 clamp(1.8rem,3vw,2.6rem); padding:0; }
.hza .frail li{ list-style:none; margin:0; }
.hza .frail .bar{ display:block; height:3px; border-radius:3px; background:var(--hza-paper-3);
                  position:relative; overflow:hidden; }
.hza .frail .bar::after{ content:""; position:absolute; inset:0; background:var(--hza-acc);
                         transform:scaleX(0); transform-origin:left; transition:transform .5s var(--hza-ease); }
.hza .frail li.done .bar::after,.hza .frail li.now .bar::after{ transform:scaleX(1); }
.hza .frail .lbl{ display:block; margin-top:.55rem; font-size:.78rem; color:var(--hza-faint);
                  min-height:2.6em; line-height:1.35; }
.hza .frail li.now .lbl{ color:var(--hza-ink); font-weight:500; }

.hza fieldset{ border:0; margin:0 0 2rem; padding:0; min-width:0; }
.hza legend{ font-size:clamp(1.3rem,1.9vw,1.65rem); font-weight:600; line-height:1.25;
             margin-bottom:.45rem; padding:0; color:var(--hza-text); }
.hza legend:focus{ outline:none; }
.hza .fhint{ font-size:.98rem; color:var(--hza-soft); margin:0 0 1.5rem; max-width:56ch; }

.hza .fgroup{ margin-bottom:1.4rem; }
.hza .fgroup > .flabel{ display:block; font-size:.88rem; font-weight:600; margin-bottom:.55rem; }
.hza .fsub{ font-size:.84rem; color:var(--hza-faint); font-weight:400; }
.hza .frow{ display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .hza .frow.two{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.hza input[type=text],.hza input[type=email],.hza input[type=tel],.hza textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--hza-text);
  background:#fff; border:1px solid var(--hza-line); border-radius:var(--hza-r-sm);
  padding:.85rem 1rem; transition:border-color .2s var(--hza-ease), box-shadow .2s var(--hza-ease);
}
.hza textarea{ resize:vertical; min-height:7rem; line-height:1.5; }
.hza input:focus,.hza textarea:focus{ outline:none; border-color:var(--hza-acc); box-shadow:0 0 0 3px rgba(20,89,143,.16); }

.hza .opts{ display:grid; gap:.55rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,195px),1fr)); }
@media (min-width:560px){ .hza .opts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hza .opt{
  position:relative; display:flex; align-items:flex-start; gap:.65rem;
  padding:.85rem 1rem; border:1px solid var(--hza-line); border-radius:var(--hza-r-sm);
  background:#fff; cursor:pointer; font-size:.97rem; line-height:1.4;
  transition:border-color .2s var(--hza-ease), background .2s var(--hza-ease), box-shadow .2s var(--hza-ease);
}
.hza .opt:hover{ border-color:rgba(16,35,63,.3); box-shadow:var(--hza-sh); }
.hza .opt input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.hza .opt .box{
  flex:none; width:18px; height:18px; margin-top:.1rem;
  border:1.5px solid rgba(16,35,63,.3); border-radius:5px; display:grid; place-items:center;
  transition:border-color .2s var(--hza-ease);
}
.hza .opt.radio .box{ border-radius:50%; }
.hza .opt .box::after{ content:""; width:9px; height:9px; border-radius:2px; background:var(--hza-acc);
                       transform:scale(0); transition:transform .18s var(--hza-ease); }
.hza .opt.radio .box::after{ border-radius:50%; width:8px; height:8px; }
.hza .opt input:checked ~ .box{ border-color:var(--hza-acc-deep); }
.hza .opt input:checked ~ .box::after{ transform:scale(1); }
.hza .opt:has(input:checked){ border-color:var(--hza-acc-deep); background:var(--hza-acc-soft); }
.hza .opt input:focus-visible ~ .box{ outline:2px solid var(--hza-acc); outline-offset:2px; }
.hza .opt .t{ display:block; }
.hza .opt .d{ display:block; font-size:.84rem; color:var(--hza-faint); margin-top:.1rem; }

.hza .consent{ display:flex; gap:.75rem; align-items:flex-start; font-size:.92rem;
               color:var(--hza-soft); line-height:1.6; padding:1.1rem;
               border:1px solid var(--hza-line); border-radius:var(--hza-r-sm); background:var(--hza-paper-2); }
.hza .consent input{ margin-top:.3rem; flex:none; }
.hza .consent a{ color:var(--hza-acc-deep); }

.hza .ferr{ margin:0 0 .6rem; min-height:1.2em; font-size:.9rem; font-weight:500; color:#A3322A; }
.hza .fstep.has-err .fnav .hza-btn-primary,.hza .fstep.has-err .fnav .hza-btn-acc{ animation:hza-shake .35s var(--hza-ease); }
@keyframes hza-shake{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

.hza .fnav{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
            padding-top:1.5rem; border-top:1px solid var(--hza-line); }
.hza .fnav .spacer{ margin-left:auto; }

.hza .fdone{ display:none; }
.hza .fdone.show{ display:block; animation:hza-fade .45s var(--hza-ease); }
.hza .fdone:focus{ outline:none; }
.hza .fdone h2{ font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.2; margin:0 0 .8rem; }
.hza .fdone .lede{ color:var(--hza-soft); font-size:1.06rem; line-height:1.6; margin:0; max-width:52ch; }
.hza .fdone .tick{ width:56px; height:56px; border-radius:50%; background:var(--hza-acc);
                   display:grid; place-items:center; margin-bottom:1.5rem; }

.hza .anf-note{ max-width:820px; margin-top:clamp(2rem,3.5vw,2.8rem);
                background:var(--hza-paper-2); border-radius:var(--hza-r-sm); padding:1rem 1.2rem; }
.hza .anf-note p{ margin:0; font-size:.88rem; line-height:1.6; color:var(--hza-soft); }
.hza .anf-note strong{ color:var(--hza-text); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  .hza .tpop,.hza .frail .bar::after{ transition:none; }
  .hza.js form .fstep.active,.hza .fdone.show,.hza .fstep.has-err .fnav .hza-btn{ animation:none; }
}