/* ============================================================
   Automationsguiden med kundportalens onboarding-UI (ChatGPT-stil):
   pillformade fält och knappar, kort med radie 16 och 1 px kant,
   förlagans typografi. Färgerna, popupformatet och layouten är
   guidens egna (lila accent, gradientmärken, samma skal).
   Förlaga: ~/ZAAI Kundportal/experiment/onboarding (localhost:4340).
   Används av båda guiderna: bestall-automation.html och bestall-hemsida.html.
   Bara datorversionen — mobil och surfplatta behåller sin stil.
   ============================================================ */
@media (min-width:1025px){

:root{--pill:99999px}
body{letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ── Huvud ── */
.wz-close{border:0;border-radius:50%}

/* ── Steglistan: förlagans rader, guidens färger ── */
.wz-nav-row{border-radius:8px;font-size:14px;font-variation-settings:'wght' 500;color:var(--text);
  transition:background-color 220ms var(--ez),color 220ms var(--ez)}
.wz-nav-row:hover{transform:none}
.wz-nav-row.done{font-variation-settings:'wght' 500}
.wz-nav-row.active{font-variation-settings:'wght' 500}
.wz-nav-mark .ring{border:0;box-shadow:inset 0 0 0 1px var(--line-ctrl);font:500 10px/1 var(--font);
  transition:background-color 220ms var(--ez),color 220ms var(--ez),box-shadow 220ms var(--ez)}
.wz-nav-row.active .ring{border:0;background:var(--primary);color:#fff;font-size:10px;box-shadow:none}
.wz-nav-row.active .ring::after{display:none}
.wz-nav-row.done .ring{box-shadow:none;position:relative}
/* Bocken låg en bit för lågt: den osynliga siffran tog en egen rad i rutnätet. Nu centreras den fritt. */
.wz-nav-row.done .ring::after{position:absolute;left:50%;top:50%;margin:-4.5px 0 0 -4.5px}
.wz-nav-count{font-size:12px}
.wz-sub-item{font-size:13px}
.wz-sub-item.active{font-weight:500;background:none}
.wz-sub-item.active::before{width:5px;height:5px}

/* ── Stegraden: ringarna är täckande, linjen syns aldrig igenom ── */
.wz-step{background:linear-gradient(rgba(107,83,145,.05),rgba(107,83,145,.05)),#fff}
.wz-step.done{background:var(--grad-mark),#fff}

/* ── Typografi enligt förlagan ── */
.wz-h:focus,.wz-h:focus-visible{outline:none}
.wz-lead{font-size:14px;line-height:20px;margin-top:8px}
.wz-glabel{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
.wz-label{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0}
.wz-help{font-size:14px;line-height:20px}

/* ── Fält: pill, ingen fyllning, tunn kant ── */
.wz-in,.wz-sel,.wz-datebtn{height:52px;padding:0 20px;border:1px solid var(--line-ctrl);border-radius:var(--pill);
  background:transparent;font:400 16px/24px var(--font);letter-spacing:-.01em}
.wz-ta{border:1px solid var(--line-ctrl);border-radius:20px;padding:14px 20px;background:transparent;
  font:400 16px/24px var(--font);letter-spacing:-.01em}
.wz-in.sm{height:48px;font-size:16px}
.wz-in:hover,.wz-ta:hover,.wz-sel:hover,.wz-datebtn:hover{border-color:var(--line-hover)}
.wz-in:focus,.wz-ta:focus,.wz-sel:focus,.wz-datebtn[aria-expanded="true"],.wz-datebtn:focus-visible{border-color:var(--primary);box-shadow:none}
.wz-suffix .u{right:20px;font-size:14px}
.wz-search input{height:40px;padding-left:38px;border:1px solid var(--line-ctrl);border-radius:var(--pill);font-size:14px}
.wz-search input:focus{box-shadow:none}
.wz-search svg{left:15px}
.wz-aiwrap{border:1px solid var(--line-ctrl);border-radius:20px}
.wz-aiwrap:focus-within{box-shadow:none}

/* ── Val: chips, alternativ, tider ── */
.wz-chip,.wz-qopt,.wz-slot{border-width:1px;border-radius:var(--pill);font-weight:400}
.wz-chip:hover,.wz-qopt:hover,.wz-slot:hover{transform:none}
.wz-chip.sel,.wz-qopt.sel{font-weight:500}
.wz-seg{border-radius:var(--pill);padding:3px}
.wz-seg-pill,.wz-seg.sm .wz-seg-pill{top:3px;bottom:3px;left:3px;border-radius:var(--pill)}
.wz-seg button{font-size:14px;border-radius:var(--pill)}

/* ── Kort och brickor: radie 16, 1 px kant, ingen lyftskugga ── */
.wz-acard,.wz-sacard,.wz-tile,.wz-nxt,.wz-meetmode,.wz-sum,.wz-q,.wz-frow{border-width:1px;border-radius:16px;box-shadow:none}
.wz-tile{border-radius:12px}
.wz-acard:hover,.wz-nxt:hover,.wz-sum:hover{transform:none;box-shadow:none}
.wz-sacard:hover,.wz-tile:hover,.wz-meetmode:hover{transform:none}
.wz-acard-n{font-size:15px;font-weight:600}
.wz-acard-ck,.wz-cbbox{border-width:1px}
.wz-sacard.own{border-width:1px}
.wz-tag{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;height:22px}
.wz-buildgrp,.wz-exflow,.wz-aipanel,.wz-kpi,.wz-sumbox,.wz-consent,.wz-empty,.wz-meet{border-radius:16px}
.wz-more,.wz-airestart{border-radius:var(--pill)}
.wz-kpi .l{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}
.wz-meetmode .r{border-width:1px}
.wz-cal-wd span{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}

/* ── Knappar: pill i förlagans mått, guidens färger ── */
.wz-btn{border-radius:var(--pill);height:48px;padding:0 24px;font:400 16px/24px var(--font);letter-spacing:-.01em}
.wz-btn-text{height:36px;padding:0 14px;border-radius:var(--pill);font-size:14px;font-weight:400}
.wz-btn-sm{height:36px;padding:0 14px;font-size:14px}
.wz-send{height:52px;border-radius:var(--pill)}

/* ── Fel och dialog ── */
.wz-errside-card,.wz-gate{border-width:1px;border-radius:16px}

/* ── Bara hemsideguiden: paketkort, prisbricka, tips ── */
.wz-pkg:hover,.wz-pkg.sel,.wz-pkg.sel:hover{transform:none}
.wz-pkg:active{transform:none}
.wz-pkg-radio{border-width:1px}
.wz-pkg.sel .wz-pkg-radio{border-width:1px}
.wz-pkg-pick{font-weight:500}
.wz-badge-l{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}
.wz-upsell-x,.wz-pagetip-x{border-radius:50%}

}