/* Vzhľad „Ako mapy v mobile“ (Stitch „Urban Lumina Glass“, štýl Apple/Google Máp) – jediný vzhľad oboch appiek: mapa cez celú
   obrazovku, sklenené polopriesvitné panely (rozmazanie pozadia), plávajúce vyhľadávanie v tvare kapsuly, okrúhle tlačidlá,
   spodný hárok. Farby (svetlý aj tmavý režim podľa telefónu) sú v packages/vzhlad/palety.js. */
:root {
  --font-nadpis: var(--font);
  --r: 14px; --r-panel: 28px;
  --sklo: color-mix(in srgb, var(--bg) 76%, transparent);
  --sklo-okraj: color-mix(in srgb, var(--bg) 60%, transparent);
  --rozmaz: blur(24px) saturate(180%);
  --tien2: 0 4px 14px rgba(17, 24, 39, .14);
  --tien3: 0 8px 32px -4px rgba(17, 24, 39, .16), 0 2px 8px -2px rgba(17, 24, 39, .06);
}
:root .lista,
:root .ovladanie .skupina,
:root .ovladanie > .kruh:not(.hlavny),
:root .panel,
:root .harok,
:root .vysledky,
:root .hlaska {
  background: var(--sklo); border: 1px solid var(--sklo-okraj);
  -webkit-backdrop-filter: var(--rozmaz); backdrop-filter: var(--rozmaz);
}
:root .hlaska { color: var(--ink); }
/* vyhľadávanie: kapsula s okrúhlym logom */
:root .horna { padding: calc(var(--st) + 10px) 16px 0; }
:root .lista { border-radius: 999px; padding: 6px 6px 6px 6px; }
:root .logo { min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 13px; letter-spacing: 0; }
:root .logo.velke { width: 64px; height: 64px; font-size: 18px; }
:root .hladanie input { border-radius: 999px; font-size: 17px; }
:root .hladanie input:focus { background: color-mix(in srgb, var(--ink) 6%, transparent); }
:root .vysledky { border-radius: 20px; left: -56px; right: -54px; }
:root #info-otvor { background: color-mix(in srgb, var(--ink) 6%, transparent); width: 44px; height: 44px; }
/* ovládanie: malé okrúhle sklenené tlačidlá, +/− v jednej kapsule */
:root .ovladanie { right: 16px; gap: 10px; }
:root .ovladanie .kruh { width: 48px; height: 48px; }
:root .ovladanie .skupina { border-radius: 24px; }
:root .ovladanie .skupina .kruh + .kruh { border-top-color: color-mix(in srgb, var(--ink) 12%, transparent); }
:root .kruh.hlavny { width: 56px !important; height: 56px !important; box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--brand) 70%, transparent); }
/* spodný hárok ako v mapách */
:root .panel { left: 8px; right: 8px; bottom: 8px; border-radius: 28px; padding-bottom: calc(var(--sb) + 16px); }
:root .uchyt { width: 36px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
:root .zavriet { top: 14px; right: 14px; width: 36px; height: 36px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
:root .stitok { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
:root .cislo-sm { font-size: 34px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 2px; }
:root .miesto { font-size: 17px; font-weight: 400; color: var(--ink); }
:root .miesto svg { display: none; }
:root .hlavne { border-radius: 14px; min-height: 54px; font-size: 17px; font-weight: 600; box-shadow: none; }
:root .sprava-lampy { border: 0; background: color-mix(in srgb, var(--lamp) 18%, transparent); }
:root .harok { left: 0; right: 0; }
:root .clona { background: rgba(0, 0, 0, .25); }
:root .kroky li, :root .kontakty { background: color-mix(in srgb, var(--bg) 70%, transparent); border-color: color-mix(in srgb, var(--ink) 10%, transparent); }
:root .paticka { background: transparent; border-top-color: color-mix(in srgb, var(--ink) 8%, transparent); }
/* formulár: zoskupené polia ako v nastaveniach telefónu */
:root .obrazovka { background: var(--bg2); }
:root .obrazovka .paticka { background: var(--sklo); -webkit-backdrop-filter: var(--rozmaz); backdrop-filter: var(--rozmaz); }
:root .obr-hlavicka { background: var(--sklo); -webkit-backdrop-filter: var(--rozmaz); backdrop-filter: var(--rozmaz); border-bottom-color: color-mix(in srgb, var(--ink) 8%, transparent); }
:root .obr-hlavicka .kruh { color: var(--brandText); }
:root .karta-sm { background: var(--bg); }
:root .pole legend, :root .pole > label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-left: 16px; }
:root .pole .pomoc { padding-left: 16px; font-size: 13px; }
:root .moznosti { grid-template-columns: 1fr; gap: 0; background: var(--bg); border-radius: 14px; overflow: hidden; }
:root .moznost { border: 0; border-radius: 0; min-height: 52px; font-weight: 500; background: transparent; }
:root .moznost + .moznost { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent); }
:root .moznost .znak { order: 3; margin-left: auto; border: 0; width: 22px; height: 22px; }
:root .moznost:has(input:checked) { background: transparent; color: var(--ink); }
:root .moznost:has(input:checked) .znak { background: none; box-shadow: none; border: 0; }
:root .moznost:has(input:checked) .znak::after { content: ''; width: 12px; height: 7px; border-left: 3px solid var(--brandText); border-bottom: 3px solid var(--brandText); transform: translateY(-2px) rotate(-45deg); }
:root .pole.ma-chybu .moznosti { box-shadow: 0 0 0 2px var(--chyba); }
:root .pole textarea, :root .pole input[type="email"] { border: 0; border-radius: 14px; background: var(--bg); }
:root .pole [aria-invalid="true"] { box-shadow: 0 0 0 2px var(--chyba); }
:root .fotky-tlacidla label { border: 0; background: var(--bg); border-radius: 14px; }
/* poďakovanie */
:root .ok-znak { box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand) 14%, transparent), 0 12px 40px -6px color-mix(in srgb, var(--brand) 60%, transparent); }