/* „Ako to prebieha“ - interaktívne kroky po balíkoch ([polnozem_priebeh]) */
.pzp{margin:72px 0 0}
.pzp__head{max-width:780px;margin-bottom:14px}
.pzp__head h2{margin:0 0 12px}

/* prepínač balíkov */
.pzp__baliky{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:6px;background:var(--pz-bg,#FAFBFC);border:1px solid var(--pz-line,#E3E0DC);border-radius:var(--pz-radius,6px)}
.pzp__balik{flex:1 1 180px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 16px;border:1px solid transparent;border-radius:var(--pz-radius,6px);background:transparent;font:inherit;color:var(--pz-ink,#23201e);cursor:pointer;text-align:left;transition:background .18s,border-color .18s,box-shadow .18s}
.pzp__balik:hover{background:#fff}
.pzp__balik.je-aktivny{background:#fff;border-color:var(--pz-line,#E3E0DC);box-shadow:inset 0 -3px 0 var(--pz-brick,#A95D42)}
.pzp__balik-nazov{font-weight:700;font-size:15px;letter-spacing:.02em}
.pzp__balik-cas{font-size:12px;color:var(--pz-muted,#8a827d)}
.pzp__balik.je-aktivny .pzp__balik-cas{color:var(--pz-brick,#A95D42)}

.pzp__balik-obsah[hidden]{display:none}
.pzp__popis{margin:0 0 22px;max-width:none;color:var(--pz-body,#5C5752)}

/* kroky - bez JS pod sebou, s JS ako pás */
.pzp__kroky{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pzp__krok-tl{display:flex;align-items:center;gap:14px;width:100%;padding:0;border:0;background:none;font:inherit;color:var(--pz-ink,#23201e);text-align:left;cursor:pointer}
.pzp__cislo{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--pz-line,#E3E0DC);font-weight:700;font-size:14px;color:var(--pz-muted,#8a827d);transition:background .18s,border-color .18s,color .18s}
.pzp__kratko{font-weight:600;font-size:15px;line-height:1.3}
.pzp__cas{font-size:12px;color:var(--pz-muted,#8a827d)}
.pzp__detail{background:#fff;border:1px solid var(--pz-line,#E3E0DC);border-radius:var(--pz-radius,6px);padding:26px 30px;margin-top:12px}
.pzp__detail h3{margin:0 0 10px;font-size:24px;line-height:1.2}
.pzp__detail > p{margin:0 0 18px;max-width:66ch;color:var(--pz-body,#5C5752)}
.pzp__detail .pz-tabs__list{margin-bottom:18px}
.pzp__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--pz-line,#E3E0DC)}
.pzp__dalej{padding:8px 14px;border:1px solid var(--pz-line,#E3E0DC);border-radius:var(--pz-radius,6px);background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--pz-brick,#A95D42);cursor:pointer;transition:background .18s,border-color .18s}
.pzp__dalej:hover{border-color:var(--pz-brick,#A95D42);background:var(--pz-brick-soft,#F1DDD4)}
.pzp__dalej[disabled]{opacity:.35;cursor:default;background:#fff;border-color:var(--pz-line,#E3E0DC)}
.pzp__pocet{font-size:13px;color:var(--pz-muted,#8a827d)}
.pzp__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px}
.pzp__foot .pz-tabs__note{flex-basis:100%}

/* s JS: vodorovný pás krokov + jeden detail */
.pzp.je-js .pzp__kroky{grid-template-columns:repeat(var(--pzp-n,5),1fr);gap:0;position:relative;padding-top:6px}
.pzp.je-js .pzp__kroky::before{content:"";position:absolute;left:calc(100% / var(--pzp-n,5) / 2);right:calc(100% / var(--pzp-n,5) / 2);top:25px;height:2px;background:var(--pz-line,#E3E0DC)}
.pzp.je-js .pzp__krok{position:relative}
.pzp.je-js .pzp__krok-tl{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 8px 14px}
.pzp.je-js .pzp__krok-tl:hover .pzp__cislo{border-color:var(--pz-brick,#A95D42);color:var(--pz-brick,#A95D42)}
.pzp.je-js .pzp__krok.je-hotovy .pzp__cislo{border-color:var(--pz-brick,#A95D42);background:var(--pz-brick-soft,#F1DDD4);color:var(--pz-brick,#A95D42)}
.pzp.je-js .pzp__krok.je-aktivny .pzp__cislo{border-color:var(--pz-brick,#A95D42);background:var(--pz-brick,#A95D42);color:#fff;box-shadow:0 0 0 5px var(--pz-brick-soft,#F1DDD4)}
.pzp.je-js .pzp__krok.je-aktivny .pzp__kratko{color:var(--pz-brick,#A95D42)}
.pzp.je-js .pzp__krok::after{content:"";position:absolute;left:50%;bottom:-1px;width:14px;height:14px;background:#fff;border-left:1px solid var(--pz-line,#E3E0DC);border-top:1px solid var(--pz-line,#E3E0DC);transform:translate(-50%,50%) rotate(45deg);opacity:0;transition:opacity .18s;z-index:1}
.pzp.je-js .pzp__krok.je-aktivny::after{opacity:1}
.pzp.je-js .pzp__detail{display:none;position:relative;grid-column:1 / -1;margin-top:0;animation:pzp-in .22s ease}
.pzp.je-js .pzp__krok.je-aktivny .pzp__detail{display:block}
/* detail je v <li>, ale má sa roztiahnuť cez celý riadok - preto ho JS presunie pod zoznam */
.pzp__detaily{margin-top:-1px}
.pzp.je-js .pzp__detaily .pzp__detail{display:none;grid-column:auto}
.pzp.je-js .pzp__detaily .pzp__detail.je-aktivny{display:block}
@keyframes pzp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:720px){
	.pzp.je-js .pzp__kroky{grid-template-columns:1fr;gap:10px;padding-top:0}
	.pzp.je-js .pzp__kroky::before{display:none}
	.pzp.je-js .pzp__krok-tl{flex-direction:row;align-items:center;text-align:left;padding:0}
	.pzp.je-js .pzp__krok::after{display:none}
	.pzp.je-js .pzp__detaily .pzp__detail.je-aktivny{margin-top:12px}
	.pzp__detail{padding:20px 18px}
	.pzp__detail h3{font-size:20px}
	.pzp__balik{flex-basis:100%}
	.pzp__nav{flex-wrap:wrap}
}
