/* PORIEŠI.ME — VLNA 2, časť zákazníka.
   ───────────────────────────────────────────────────────────────────────────────
   Načítava sa v index.html ZA ponuky-zakaznik.css. Nemení žiadne existujúce
   pravidlo — dopĺňa len nové triedy:
     .wz-*   sprievodca dopytom (fotky, rýchle zadanie, „Objednávam ako“)
     .med-*  náhľady fotiek a lightbox
     .zk-*   detail zákazky (pás stavov, konečná cena, presun, spor, dodatky)
     .rp-*   formulár nahlásenia podľa čl. 16 DSA
     .acc-docs / .acc-sup-list / .acc-rv-acts / .rev-reply  nové sekcie Účtu
     .pz-cmp-head / .pz-rank  odkaz „Ako určujeme poradie“ (B-8)
   Farby výhradne z tokens.css. Každé pravidlo je pre desktop aj mobil naraz,
   mobilné úpravy sú v @media(max-width:640px); dotykové ciele ≥ 44 px. */

/* ═══════════════ B-8 · odkaz na poradie ═══════════════ */
.pz-cmp-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px; margin:0 0 8px}
.pz-cmp-head>b{font-size:var(--fs-h3)}
.pz-rank{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 2px; font-size:var(--fs-small);
  color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px}
.pz-rank .ico{width:16px; height:16px; flex:none}
.pz-rank-row{margin:-6px 0 12px}

/* ═══════════════ SPRIEVODCA — fotky a rýchle zadanie ═══════════════ */
.wz-photos{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.wz-ph-row{align-items:center; gap:10px; flex-wrap:wrap}
.wz-ph-cnt{white-space:nowrap}
.wz-ph-busy{color:var(--accent-dark)}
.wz-ph-note{margin:8px 0 0; line-height:1.45}
.wz-ph-err{margin:8px 0 0}
.wz-ph-off{margin-top:14px; display:flex; align-items:flex-start; gap:8px}
.wz-ph-off .ico{flex:none; margin-top:2px}

.wz-ph-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:10px}
.wz-ph{position:relative; display:block; border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface2); aspect-ratio:1/1}
.wz-ph img{width:100%; height:100%; object-fit:cover; display:block}
/* fotka na výšku sa v mriežke nesmie roztiahnuť cez celý stĺpec */
.wz-ph{max-height:220px}
.wz-ph-x{position:absolute; top:2px; right:2px; width:32px; height:32px; display:grid; place-items:center;
  border:0; border-radius:var(--r-pill); background:rgba(27,36,48,.72); color:#fff; cursor:pointer}
.wz-ph-x .ico{width:18px; height:18px}
.wz-ph-x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.wz-quick{margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
.wz-mode{margin:10px 0 0}
.wz-no{margin:2px 0 0}

.wz-kind{border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:14px 0 0}
.wz-kind legend{padding:0 6px}
.wz-kind-o{display:flex; align-items:center; gap:10px; min-height:44px; font-weight:400; cursor:pointer}
.wz-kind-o input{width:auto; margin:0; flex:none}
/* Vlastný prepínač: mobilný blok v style.css dáva každému <input> výšku 48 px a rámik, natívny vzhľad
   sa na Androide/iOS líši — preto kreslíme kruh sami (rovnaké pre „Objednávam ako“ aj „Stavebné povolenie“). */
.wz-kind-o input[type=radio]{-webkit-appearance:none !important; appearance:none !important; width:22px !important; height:22px !important; min-height:0 !important; min-width:0 !important; max-width:22px; padding:0 !important; margin:0 !important;
  border:2px solid var(--line,#B9C6D2) !important; border-radius:50% !important; background:#fff; box-shadow:none !important; flex:none; display:inline-block; position:relative; cursor:pointer; line-height:1}
.wz-kind-o input[type=radio]:checked{border-color:var(--o2,#EE7B1C) !important}
.wz-kind-o input[type=radio]:checked{border-color:var(--o2,#EE7B1C); background:radial-gradient(circle, var(--o2,#EE7B1C) 0 5px, #fff 6px)}
.wz-kind-o input[type=radio]:focus-visible{outline:2px solid var(--o2,#EE7B1C); outline-offset:2px}

/* ═══════════════ FOTKY — náhľady a lightbox ═══════════════ */
.med-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin:10px 0}
.med-th{padding:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface2); aspect-ratio:1/1; cursor:zoom-in; min-height:44px}
.med-th img{width:100%; height:100%; object-fit:cover; display:block}
.med-th:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.med-lb-img{background:var(--surface2); border-radius:var(--r); overflow:hidden; margin:8px 0}
.med-lb-img img{width:100%; height:auto; max-height:70vh; object-fit:contain; display:block}
.med-lb-nav{align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}

/* Príloha, ktorá sa nenačítala (019_prilohy.sql) — vecný oznam namiesto prázdneho rámčeka. */
.med-th.med-miss, .wz-ph.med-miss{display:grid; place-items:center; padding:6px; text-align:center;
  cursor:default; border-style:dashed; background:var(--surface2)}
.med-lb-img.med-miss{display:grid; place-items:center; min-height:160px; padding:16px; text-align:center}
.med-miss-t{color:var(--ink-soft); line-height:1.3; font-size:.72rem}
.med-lb-img .med-miss-t{font-size:var(--fs-small)}
.acc-sup-photos{margin:6px 0 10px}
@media (max-width:640px){ .med-miss-t{font-size:.7rem} }

/* ═══════════════ C2 · obhliadka ═══════════════ */
.pz-visit{margin:8px 0 0; display:flex; align-items:flex-start; gap:8px; line-height:1.45}
.pz-visit .ico{flex:none; margin-top:2px}
.pz-badge.visit{background:var(--blue-bg); color:var(--blue)}
.pz-badge.visit .ico{width:14px; height:14px; vertical-align:-2px}
.vz-lead{display:flex; align-items:flex-start; gap:8px; line-height:1.45}
.vz-lead .ico{flex:none; margin-top:2px}
.vz-form input[type=datetime-local]{margin-bottom:8px}
.bd-visit-free{display:flex; align-items:flex-start; gap:6px; margin:6px 0 0; color:var(--blue)}
.bd-visit-free .ico{flex:none; width:16px; height:16px; margin-top:2px}

/* ═══════════════ B1 / B3 · detail zákazky ═══════════════ */
.zk-head{margin-bottom:12px}
.zk-back{display:inline-block; margin-bottom:8px; min-height:44px}
.zk-h1{font-size:1.4rem; margin:0; display:flex; align-items:center; gap:8px; min-width:0}
.zk-t{margin:6px 0 0; font-weight:600}
.zk-steps{margin:0 0 12px}
/* Pás stavov v detaile zákazky. Pravidlá pre .acc-steps v profil-zakaznik.css sú
   zámerne obmedzené na #moje-root, preto ich sem pre #zakazka-root nekopírujeme,
   ale píšeme rovnaký vzhľad pod vlastným selektorom. */
#zakazka-root .zk-steps{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0}
#zakazka-root .zk-steps li{display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:99px;
  background:var(--surface2); color:var(--muted); font-size:.76rem; font-weight:600}
#zakazka-root .zk-steps li.on{background:var(--accent-soft); color:var(--accent-dark)}
#zakazka-root .zk-steps li.on::before{content:"✓"; font-weight:800}
.zk-facts{margin-bottom:12px}
.zk-safe{display:flex; align-items:flex-start; gap:8px; line-height:1.45; margin-top:12px}
.zk-safe .ico{flex:none; margin-top:2px}
.zk-acts{gap:8px; flex-wrap:wrap; margin:12px 0}
.zk-acts .btn{min-height:44px}
.zk-act-row{margin:8px 0}
.zk-act-row .btn{min-height:44px}

.zk-price,.zk-res,.zk-dispute,.zk-noshow{display:flex; align-items:flex-start; gap:10px; margin:12px 0; line-height:1.45}
.zk-price>.ico,.zk-res>.ico,.zk-dispute>.ico,.zk-noshow>.ico,.zk-price>span>.ico{flex:none; margin-top:2px}
.zk-price p,.zk-res p,.zk-dispute p,.zk-noshow p{margin:6px 0 0}
.zk-price .bd-acts,.zk-res .bd-acts,.zk-noshow .bd-acts{margin-top:10px; gap:8px; flex-wrap:wrap}
.zk-price .btn,.zk-res .btn,.zk-noshow .btn{min-height:44px}
/* Rozhodovacie tlačidlá nesú dlhý povinný text („…objednávka s povinnosťou platby“).
   Ako inline-flex by sa jeho časti zalomili do stĺpcov — necháme ich tiecť ako vetu. */
.zk-price .btn,.zk-noshow .btn{display:inline-block; text-align:center; white-space:normal; line-height:1.35; padding:12px 16px}
.zk-price .btn>*,.zk-noshow .btn>*{display:inline}
.zk-dis-resp{margin-top:10px; padding:10px; border-radius:var(--r-sm); background:var(--surface2)}
.zk-dis-photos{margin-top:8px}
.zk-ars{display:flex; align-items:flex-start; gap:6px; margin-top:10px}
.zk-ars .ico{flex:none; width:16px; height:16px; margin-top:2px}
.zk-wd-tip{display:flex; align-items:flex-start; gap:8px; line-height:1.45}
.zk-wd-tip .ico{flex:none; margin-top:2px}
.zk-hr{border:0; border-top:1px solid var(--line); margin:14px 0}

.zk-amend{margin-top:14px}
.zk-am-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px}
.zk-am-list li{border-left:3px solid var(--line); padding:0 0 0 10px}
.zk-am-list p{margin:4px 0 0; line-height:1.5; overflow-wrap:anywhere}

/* ═══════════════ DSA · formulár nahlásenia ═══════════════ */
.rp-form input[readonly]{background:var(--surface2); color:var(--muted)}

/* ═══════════════ ÚČET · dokumenty, podpora, nahlásenia, recenzie ═══════════════ */
.acc-docs{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px}
.acc-docs li{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px; border:1px solid var(--line); border-radius:var(--r-sm)}
.acc-docs li>div{min-width:0}
.acc-docs p{margin:2px 0 0}
.acc-docs .btn{flex:none; min-height:44px}

.acc-sup-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:12px}
.acc-sup-list li{padding:10px; border:1px solid var(--line); border-radius:var(--r-sm)}
.acc-sup-list p{margin:4px 0 0; line-height:1.5; overflow-wrap:anywhere}

.acc-rv-acts{margin-top:10px; gap:8px; flex-wrap:wrap}
.acc-rv-acts .btn{min-height:44px}
.rev-reply{margin-top:10px; padding:10px; border-radius:var(--r-sm); background:var(--surface2)}
.rev-reply p{margin:4px 0 0; line-height:1.5; overflow-wrap:anywhere}
.rev-rep{margin:8px 0 0}

/* fotky vo feede a v karte dopytu */
.req-photos{margin:10px 0}
.fc-photos{margin:8px 0 10px}

/* ═══════════════ MOBIL ═══════════════ */
@media (max-width:640px){
  .pz-cmp-head{margin-bottom:6px}
  .wz-ph-grid{grid-template-columns:repeat(3,1fr)}
  .wz-ph-x{width:36px; height:36px}
  .med-grid{grid-template-columns:repeat(3,1fr)}
  .zk-h1{font-size:1.2rem}
  .zk-acts .btn,.zk-res .btn,.zk-act-row .btn{width:100%; justify-content:center}
  .zk-price .btn,.zk-noshow .btn{display:block; width:100%}
  .zk-price .bd-acts,.zk-noshow .bd-acts{flex-direction:column; align-items:stretch}
  .zk-price,.zk-res,.zk-dispute,.zk-noshow{flex-direction:row}
  .acc-docs li{flex-direction:column; align-items:flex-start}
  .acc-docs .btn{width:100%; justify-content:center}
  .med-lb-nav .btn{flex:1 1 auto; justify-content:center}
}

/* Bez animácií, keď si to používateľ vypol v systéme. */
@media (prefers-reduced-motion:reduce){
  .wz-ph img,.med-th img{transition:none}
}

/* Tlač: zmluva sa tlačí sama (bd-print v ponuky-zakaznik.css) — detail zákazky
   netlačíme s tlačidlami. */
@media print{
  .zk-acts,.zk-back,.zk-act-row{display:none !important}
}

/* Stavebné povolenie (len stavebné kategórie, DB.PERMIT_CATS) — rovnaký vzhľad ako „Objednávam ako“ */
.wz-permit{border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:14px 0 0}
.wz-permit legend{padding:0 6px}
.wz-permit .small{margin:8px 0 2px}

/* ── PARTIA (021) — „Koho hľadáš“ v dopyte ─────────────────────────────────────
   Rovnaký tvar ako „Objednávam ako“ (.wz-kind) — je to tá istá otázka o zákazke,
   nie nová vizuálna hračka. Vysvetlenie stojí POD voľbami, aby si človek nemusel
   nič otvárať, keď mu stačí jedna veta; „Čo je partia?“ otvára celé znenie. */
.wz-crew{border:1px solid var(--line); border-radius:var(--r); padding:12px; margin:14px 0 0}
.wz-crew legend{padding:0 6px}
.wz-crew .wz-kind-o{align-items:flex-start}
.wz-crew .wz-kind-o span{padding-top:2px}
.wz-crew-n{margin:8px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.wz-crew-n>span{flex:1 1 220px; min-width:0}
.wz-crew-n2{margin:8px 0 0; padding:8px 10px; border-radius:10px; background:var(--blue-bg); color:var(--blue)}
@media (max-width:640px){
  .wz-crew{padding:10px}
  .wz-crew-q{margin-left:-8px}
}