/* UX1 (M13b): vyskakovacie okná z web/popup.js. Poloha ide cez CSS premenné --ui-x, --ui-y a --ui-max-h nastavené cez CSSOM (T58),
   farby a rozmery z tokenov portálu (design.css). Spodný panel nesie trieda is-sheet (okno po kliknutí pod 700 px), nie media query,
   aby náhľad pri prechode myšou na úzkom okne ostal kartou. Pohyb je iba v bloku prefers-reduced-motion:no-preference. */
.ui-popup-root{position:static}
.ui-tip{position:fixed;z-index:210;left:var(--ui-x,0);top:var(--ui-y,0);max-width:min(300px,calc(100vw - 16px));padding:6px 9px;
 border:1px solid var(--navy-raised);border-radius:var(--radius-sm);background:var(--navy);color:#fff;font-size:var(--text-xs);font-weight:500;
 line-height:1.45;box-shadow:var(--shadow);pointer-events:none;overflow-wrap:anywhere}
.ui-tip[hidden],.ui-pop[hidden]{display:none}
[data-tip][tabindex]:not(button):not(a):not(.ui-info){cursor:help}
/* Náhľad (UX3): krátky text v riadku je podčiarknutý bodkami, blok ceny a povrchov iba mení kurzor; fokus je viditeľný. */
[data-preview][role="button"]{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
[data-preview]:not([role]):not(a):not(button){cursor:help}
[data-preview][tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
.ui-pop-scrim{position:fixed;inset:0;z-index:165;width:100%;height:100%;border:0;padding:0;background:rgba(10,24,48,.38)}
.ui-pop-card{position:fixed;z-index:170;left:var(--ui-x,8px);top:var(--ui-y,8px);display:flex;flex-direction:column;width:min(340px,calc(100vw - 16px));
 max-height:var(--ui-max-h,calc(100dvh - 16px));overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
 color:var(--ink);box-shadow:var(--shadow),0 12px 32px rgba(16,42,84,.18);text-align:left}
.ui-pop-card.is-wide{width:min(400px,calc(100vw - 16px))}
.ui-pop-card:focus{outline:none}
.ui-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 14px;border-bottom:1px solid var(--line)}
.ui-pop-head h2{margin:0;min-width:0;font-size:var(--text-md);font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.ui-pop-close{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto}
.ui-pop-body{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 14px;font-size:var(--text-sm);line-height:1.45}
.ui-pop-body p{margin:0}
.ui-pop-body .ui-kv{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:6px 12px;margin:0}
.ui-pop-body .ui-kv dt{color:var(--muted);font-weight:600}
.ui-pop-body .ui-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ui-pop-body .ui-sum{display:grid;gap:4px;margin:0}
.ui-pop-body .ui-sum>div{display:flex;justify-content:space-between;gap:12px}
.ui-pop-body .ui-sum dt{color:var(--muted)}
.ui-pop-body .ui-sum dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-pop-body .ui-sum .is-total{padding-top:6px;border-top:1px solid var(--line);font-weight:650}
.ui-pop-body .ui-sum .is-total dt{color:var(--ink)}
.ui-pop-body .ui-note{color:var(--muted);font-size:var(--text-xs)}
.ui-pop-foot{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid var(--line)}
/* Spodný panel na telefóne: celá šírka, závoj, zaoblený horný okraj, bezpečná oblasť. */
.ui-pop.is-sheet .ui-pop-card{left:0;right:0;top:auto;bottom:0;width:100%;max-height:82dvh;border-bottom:0;border-radius:14px 14px 0 0;
 padding-bottom:env(safe-area-inset-bottom,0px)}
/* Ikonka i pri poli (UX2): 20 px, dotyková plocha 34 px cez ::before, na dotyku 24 px. */
.ui-info{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;margin-left:4px;padding:0;border:0;border-radius:50%;
 background:transparent;color:var(--subtle);vertical-align:middle;cursor:pointer;flex:0 0 auto}
.ui-info::before{content:"";position:absolute;inset:-7px -7px 0}
.ui-info svg{width:15px;height:15px}
.ui-info:hover,.ui-info[aria-expanded="true"]{background:var(--surface-2);color:var(--accent)}
.ui-info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.ui-info{width:24px;height:24px}}
/* Ikonka je posledné dieťa <label class="field"> (za vstupom), preto ide do pravého horného rohu vedľa textu štítku. */
label:is(.field,.customer-profile-field):has(>.ui-info){position:relative}
label:is(.field,.customer-profile-field)>.ui-info{position:absolute;top:0;right:0;margin:0}
label:is(.field,.customer-profile-field):has(>.ui-info)>span:first-child{padding-right:28px}
.check-row>.ui-info{margin-left:6px}
/* UX2 presun: vety „kde sa prejaví“ z panelov sú v ikonke i a pri ikonke sa na stránke skryjú. Veta o hodinách ostáva čítačke cez
   aria-describedby polí (admin-business-hours.js); vety registrácie a pripojení číta čítačka v ikonke. */
[data-settings-business-hours]:has(.ui-info) #business-hours-help,
.panel:has(.ui-info[data-popup-arg="registration"]) .settings-registration-effect,
.integration-connections:has(.ui-info)>.panel-body>p.muted:first-child{display:none}
/* UX3: tlačidlo i rozpisu ceny vpravo hore v bloku kusov a ceny karty kalkulačky (mimo ostrovov, mriežku neposunie). */
.calculator-quantity-price:has(>.ui-info-price){position:relative}
.calculator-quantity-price>.ui-info-price{position:absolute;top:6px;right:0;margin:0}
/* Úzka karta: ceny idú celou šírkou hore, kusy pod ne vľavo (calculator-quick.css), tlačidlo i ide do voľného rohu vpravo dole. */
@container calc-parts (max-width:440px){.calculator-quantity-price>.ui-info-price{top:auto;bottom:22px}}
@media (prefers-reduced-motion:no-preference){
 .ui-tip:not([hidden]){animation:ui-tip-in .12s ease-out}
 .ui-pop:not(.is-sheet) .ui-pop-card{animation:ui-pop-in .14s ease-out}
 .ui-pop.is-sheet .ui-pop-card{animation:ui-sheet-in .2s ease-out}
}
@keyframes ui-tip-in{from{opacity:0}to{opacity:1}}
@keyframes ui-pop-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ui-sheet-in{from{opacity:.4;transform:translateY(24px)}to{opacity:1;transform:none}}