/* SLAVKOF_DIZAJN_MANUAL_v4.5.33_2026.11.10_KOPIA-040 | kópia pre: web designmanual.slavkof.sk a interná kópia | vlastník SLAVKOF a.s. */
/* ===== Vizitky a vloženie do CARDERA ===== */
#vizitky .vz-wrap{display:grid; grid-template-columns:minmax(0,1fr) 340px; grid-template-areas:'prev form' 'howto form'; grid-template-rows:auto 1fr; gap:1.2rem; align-items:start; margin-bottom:1.2rem}
#vizitky .vz-prev{grid-area:prev} #vizitky .vz-form{grid-area:form} #vizitky .vz-howto{grid-area:howto; min-width:0}
#vizitky .vz-prev{display:flex; flex-wrap:wrap; gap:1rem; align-content:start; min-width:0}
#vizitky .vz-face{margin:0; flex:1 1 260px; min-width:0}
#vizitky .vz-face canvas{display:block; width:100%; height:auto; aspect-ratio:85/55; border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(27,27,27,.10); background:#fff}
#vizitky .vz-face figcaption{font-size:.72rem; color:var(--muted); margin-top:.35rem; letter-spacing:.04em; text-transform:uppercase}
#vizitky .vz-actions{display:flex; flex-wrap:wrap; gap:.5rem; width:100%}
#vizitky .vz-actions .btn{min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none}
#vizitky .vz-status{width:100%; margin:0; min-height:1.2em}
#vizitky .vz-form{background:var(--panel); border:1px solid var(--line); padding:1rem; min-width:0}
#vizitky .vz-form .grp{margin-top:.9rem; padding-top:.6rem; border-top:1px solid var(--line); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--emerald); font-weight:700}
#vizitky .vz-form .grp:first-child{margin-top:0; padding-top:0; border-top:0}
#vizitky .vz-form label.f{display:block; font-size:.78rem; font-weight:700; color:var(--ink); margin:.6rem 0 .2rem}
#vizitky .vz-form input:not([type=checkbox]), #vizitky .vz-form select{width:100%; font:inherit; font-size:16px; min-height:44px;
  padding:.4rem .55rem; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:0; box-sizing:border-box}
#vizitky .vz-form input:focus, #vizitky .vz-form select:focus{outline:2px solid var(--sage); outline-offset:1px}
#vizitky .vz-form [aria-invalid="true"]{border-color:#B42318; background:#FFF6F5}
#vizitky .vz-tel{display:grid; grid-template-columns:minmax(132px,42%) minmax(0,1fr); gap:.4rem}
#vizitky .vz-err{margin:.25rem 0 0; font-size:.78rem; line-height:1.35; color:#B42318}
#vizitky .vz-err.ok{color:var(--emerald)}
#vizitky .vz-err button{font:inherit; color:inherit; text-decoration:underline; background:none; border:0; padding:0; cursor:pointer}
#vizitky .vz-check{display:flex; gap:.5rem; align-items:flex-start; font-size:.82rem; line-height:1.4; margin-top:.4rem; cursor:pointer}
#vizitky .vz-check input{width:20px; height:20px; flex:0 0 20px; margin:.1rem 0 0}
#vizitky .vz-h{margin:.4rem 0 .6rem}
#vizitky .vz-steps{margin:0; padding-left:1.3rem; display:grid; gap:.55rem}
#vizitky .vz-steps li{line-height:1.5}
@media (max-width:900px){ #vizitky .vz-wrap{grid-template-columns:1fr; grid-template-areas:'prev' 'form' 'howto'; grid-template-rows:auto} }
@media (max-width:480px){ #vizitky .vz-actions .btn{flex:1 1 100%} #vizitky .vz-tel{grid-template-columns:1fr} }
@media (max-width:600px){ #vizitky .chips{flex-wrap:wrap; overflow:visible} }
@media (max-width:1024px){ #vizitky .chip{min-height:44px; display:inline-flex; align-items:center} }
@media (max-width:900px){
  #vizitky table{display:block; white-space:normal; overflow:visible; border-radius:14px}
  #vizitky table tbody{display:block}
  #vizitky table tr{display:grid; grid-template-columns:minmax(0,1fr); border-bottom:1px solid var(--line)}
  #vizitky table tr:first-child{display:none}
  #vizitky table tr:last-child{border-bottom:0}
  #vizitky table td{border-bottom:0; padding:.55rem .8rem .1rem}
  #vizitky table td + td{padding:.1rem .8rem .6rem}
  #vizitky table td:first-child{font-weight:700}
}