/* ==================================================================
   Digital Assistant – kiosk 1080 × 1920

   Hodnoty (farby, hrúbky, stavy tlačidiel) vychádzajú z dizajn systému
   Orange – tmavý režim. Všetko cez premenné, žiadny akcent priamo v kóde.
   Rozmery a veľkosti písma sú kioskové (pohľad z 1,5 m), tie sa
   z webového systému nepreberajú.
   ================================================================== */

/* ── Značkové písmo (lokálne, bez CDN) ───────────────────────────── */
@font-face{
  font-family:"Helvetica Neue Orange";
  src:url("fonts/HelveticaNeue-Roman.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Helvetica Neue Orange";
  src:url("fonts/HelveticaNeue-Medium.otf") format("opentype");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Helvetica Neue Orange";
  src:url("fonts/HelveticaNeue-Bold.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  /* Akcent – oranžová téma */
  --accent:#FF7900;
  --accent-contrast:#000000;     /* text na oranžovej je čierny – pravidlo kontrastu Orange */

  /* Odvodené od akcentu (nastavuje ich téma, nie komponenty) */
  --accent-ink:#FF7900;          /* akcent ako text na tmavom pozadí */
  --primary-bg:var(--accent);    /* výplň hlavného tlačidla */
  --primary-fg:var(--accent-contrast);
  --primary-edge:var(--accent);
  /* stlačené tlačidlo = inverzia, nie zosvetlenie */
  --primary-active-bg:#000000;
  --primary-active-fg:#FFFFFF;
  --primary-active-edge:#FFFFFF;

  /* Neutrálna paleta – šedé tóny systému Orange */
  --bg:#141414;
  --well:#000000;                /* hlbšie plochy: zóna avatara, náhľady */
  --panel:#333333;
  --panel-2:#595959;
  --line:#666666;
  --line-2:#FFFFFF;
  --fg:#FFFFFF;
  --fg-dim:#CCCCCC;
  --fg-mute:#999999;
  --disabled-bg:#666666;
  --disabled-fg:#141414;
  --danger:#FF6666;              /* funkčná červená pre tmavý režim */

  /* Štvorec loga: oranžová plocha, biele slovo */
  --logo-bg:var(--accent);
  --logo-fg:#FFFFFF;

  /* zvolená dlaždica: oranžový obrys stačí, plocha ostáva čierna */
  --quick-active-bg:var(--well);

  --bw:2px;                      /* hrúbka rámu */
  --r-lg:16px;
  --r-md:14px;
  --r-sm:12px;
  /* priehľadnosť potrebuje zložky farby zvlášť */
  --accent-rgb:255,121,0;

  /* dvojité ohraničenie fokusu podľa prístupnostných pravidiel Orange */
  --focus-outer:#FFFFFF;
  --focus-inner:#000000;

  /* sklo dev-panela – neutrálne, aby držalo v oboch témach */
  --dev-edge:rgba(255,255,255,.18);
  --dev-surface:rgba(255,255,255,.07);
  --dev-surface-hi:rgba(255,255,255,.16);

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:260ms;
}

[data-theme="black"]{
  --accent:#000000;
  --accent-contrast:#FFFFFF;

  /* Čierny akcent na tmavom pozadí by zanikol, preto sú hlavné prvky
     biele s čiernym textom – zodpovedá sekundárnemu tlačidlu v tmavom režime. */
  --accent-ink:#FFFFFF;
  --primary-bg:#FFFFFF;
  --primary-fg:#000000;
  --primary-edge:#FFFFFF;
  --primary-active-bg:#000000;
  --primary-active-fg:#FFFFFF;
  --primary-active-edge:#FFFFFF;
  --accent-rgb:255,255,255;
  /* čierny štvorec by na tmavom pozadí zanikol – monochrómna inverzia */
  --logo-bg:#FFFFFF;
  --logo-fg:#000000;
  /* v monochrómnej téme je obrys aj popis biely, voľbu odlíši plocha */
  --quick-active-bg:var(--panel);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Fokus: vonkajší prstenec + vnútorný kontrastný lem */
:focus-visible{
  outline:3px solid var(--focus-outer);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--focus-inner);
}

html,body{
  height:100%;
  background:#000;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

body{
  font-family:"Helvetica Neue Orange","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-synthesis:none;              /* žiadne dopočítavané rezy – iba dodané váhy */
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--fg);
  user-select:none;
  cursor:default;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Škálovanie holstu ────────────────────────────────────────────── */
#viewport{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:#000;
}

#stage{
  position:absolute;
  left:50%;top:50%;
  width:1080px;
  height:1920px;
  transform-origin:center center;
  overflow:hidden;
  background:var(--bg);            /* plochá farba, bez efektov */
}

/* ── Hlavička ─────────────────────────────────────────────────────── */
#topbar{
  position:absolute;
  top:0;left:0;
  width:1080px;height:120px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 56px;
  z-index:60;
}

.logo{
  display:flex;align-items:center;
  color:var(--fg);
}
.logo img{height:96px;width:auto;display:block}

/* Štvorec značky: slovo v ľavom dolnom rohu, ™ nad jeho koncom */
.logo-tile{
  width:96px;height:96px;
  background:var(--logo-bg);
  position:relative;
  flex:none;
}
.logo-word{
  position:absolute;left:8%;bottom:7%;
  font-size:32px;font-weight:700;line-height:1;
  letter-spacing:-.03em;
  color:var(--logo-fg);
}
.logo-tm{
  font-size:12px;font-weight:500;
  vertical-align:super;
  letter-spacing:0;
}

/* len text s bodkou – bez rámu a bez podkladu */
.ai-badge{
  display:flex;align-items:center;gap:14px;
  height:64px;
  font-size:26px;font-weight:500;letter-spacing:-.01em;
  color:var(--fg);
  white-space:nowrap;
}
.ai-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--accent-ink);
  box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55);
  animation:pulseDot 2.4s var(--ease) infinite;
}
@keyframes pulseDot{
  0%  {box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}
  70% {box-shadow:0 0 0 16px rgba(var(--accent-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
}

/* ── Vrstva avatara ───────────────────────────────────────────────── */
#avatarLayer{
  position:absolute;
  z-index:20;
  overflow:hidden;
  background:var(--well);
  border:var(--bw) solid var(--line);
  transition:
    left var(--t) var(--ease), top var(--t) var(--ease),
    width var(--t) var(--ease), height var(--t) var(--ease),
    border-radius var(--t) var(--ease), opacity 200ms linear;
}
#avatarLayer.is-hidden{opacity:0;pointer-events:none}

#avatarInner{position:absolute;inset:0}
#avatarFrame{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:none;background:var(--well);
}
#avatarFrame.is-on{display:block}

/* Hostiteľ widgetu anam.ai – vlastný element si nesie shadow DOM,
   zvonku mu dávame len rozmer zóny avatara. */
/* z-index drží widget vo vlastnom kontexte – vnútri má 9999 a bez toho by
   sa dostal nad prekrytie výpadku spojenia. */
#avatarWidget{position:absolute;inset:0;z-index:1;display:none;background:var(--well)}
#avatarWidget.is-on{display:block}
#avatarWidget anam-agent{display:block;width:100%;height:100%}

/* Vizuálna náhrada avatara (ukážkový režim) */
.stub{
  position:absolute;inset:0;
  overflow:hidden;
  display:grid;place-items:center;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(var(--accent-rgb),.16), transparent 70%),
    var(--well);
}

/* Zacyklene medialne slucky - iba IDLE. Zivy avatar tam nema bezat. */
.stub-media-wrap{position:absolute;inset:0;display:none}
.stub-media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 260ms linear;
}
.stub-media.is-on{opacity:1}

/* V IDLE prekryva slucka orb aj popis, inde plati opak. */
#stage[data-state="IDLE"] .stub-media-wrap{display:block}
#stage[data-state="IDLE"] .stub .orb,
#stage[data-state="IDLE"] .stub-label{display:none}

.stub .orb{
  position:relative;
  width:46%;aspect-ratio:1;
  display:grid;place-items:center;
}
.stub .core{
  width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.92), rgba(var(--accent-rgb),.85) 42%, rgba(var(--accent-rgb),.25) 70%, transparent 76%);
  filter:blur(.4px);
  animation:breathe 5.5s var(--ease) infinite;
  transform:scale(var(--lvl,1));
  transition:transform 90ms linear;
}
.stub .ring{
  position:absolute;inset:0;border-radius:50%;
  border:var(--bw) solid rgba(var(--accent-rgb),.35);
  animation:ripple 4.2s var(--ease) infinite;
}
.stub .ring.r2{animation-delay:1.4s}
.stub .ring.r3{animation-delay:2.8s}
@keyframes ripple{
  0%  {transform:scale(.55);opacity:.0}
  25% {opacity:.55}
  100%{transform:scale(1.25);opacity:0}
}
@keyframes breathe{
  0%,100%{filter:brightness(1)}
  50%    {filter:brightness(1.18)}
}
.stub-label{
  position:absolute;bottom:44px;left:0;right:0;
  text-align:center;font-size:24px;color:var(--fg-mute);letter-spacing:.01em;
}
#avatarLayer.is-band .stub-label{display:none}
#avatarLayer.is-band .stub .orb{width:22%}

/* ── Prekrytie pri výpadku spojenia ───────────────────────────────── */
#offlineOverlay{
  position:absolute;inset:0;
  z-index:9;
  display:grid;place-items:center;
  background:var(--bg);
  padding:60px;
  animation:fadeIn 200ms var(--ease);
}
#offlineOverlay[hidden]{display:none}
.offline-card{text-align:center;max-width:820px}
.offline-icon{color:var(--accent-ink);opacity:.9;margin-bottom:40px}
.offline-card h2{font-size:64px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.offline-card p{margin-top:24px;font-size:36px;color:var(--fg-dim);line-height:1.35}
.offline-retry{
  margin-top:56px;
  display:flex;align-items:center;justify-content:center;gap:18px;
  font-size:26px;color:var(--fg-mute);
}
/* v páse 16:9 sa plné veľkosti nezmestia – celá karta ide o stupeň nižšie */
#avatarLayer.is-band #offlineOverlay{padding:28px}
#avatarLayer.is-band .offline-icon{margin-bottom:16px}
#avatarLayer.is-band .offline-icon svg{width:56px;height:56px}
#avatarLayer.is-band .offline-card h2{font-size:38px}
#avatarLayer.is-band .offline-card p{margin-top:12px;font-size:24px}
#avatarLayer.is-band .offline-retry{margin-top:18px;font-size:20px;gap:12px}
#avatarLayer.is-band .spinner{width:20px;height:20px;border-width:2px}

.spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid var(--line-2);
  border-top-color:var(--accent-ink);
  animation:spin 900ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Obrazovky ────────────────────────────────────────────────────── */
#screens{position:absolute;inset:0;z-index:30}

.screen{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transform:translateY(18px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
  pointer-events:none;
}
.screen.is-active{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s;
}

/* obrazovky, ktoré prekrývajú avatar celou plochou */
.screen[data-screen="GENDER_SELECT"],
.screen[data-screen="LEAD_CAPTURE"],
.screen[data-screen="SELLER"],
.screen[data-screen="FEEDBACK"]{
  background:var(--bg);
}

.avatar-slot{position:absolute;pointer-events:none}

.screen-pad{
  position:absolute;
  left:60px;right:60px;top:170px;bottom:70px;
  display:flex;flex-direction:column;
}
.screen-pad.tight{top:150px}
.screen-pad.center{align-items:center;justify-content:center;text-align:center;gap:0}

/* ── Typografia ───────────────────────────────────────────────────── */
.h1{
  font-size:76px;line-height:1.06;font-weight:700;letter-spacing:-.03em;
}
.h1.sm{font-size:64px}
.lead-note{font-size:36px;color:var(--fg-dim);margin-top:24px}

/* ── Tlačidlá ─────────────────────────────────────────────────────────
   Model stavov podľa systému Orange: plná výplň, žiadny prechod ani tieň,
   stlačenie = inverzia farieb, nie zosvetlenie.                          */
.btn{
  font:inherit;
  font-size:36px;font-weight:700;letter-spacing:-.015em;
  color:var(--fg);
  min-height:130px;
  padding:0 48px;
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-md);
  background:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:20px;
  cursor:pointer;
  transition:background 160ms var(--ease), color 160ms var(--ease),
             border-color 160ms var(--ease);
}
/* sekundárne tlačidlo: obrys, po stlačení akcentná výplň */
.btn:active{
  background:var(--primary-bg);
  color:var(--primary-fg);
  border-color:var(--primary-edge);
}

.btn-primary{
  background:var(--primary-bg);
  color:var(--primary-fg);
  border-color:var(--primary-edge);
}
.btn-primary:active{
  background:var(--primary-active-bg);
  color:var(--primary-active-fg);
  border-color:var(--primary-active-edge);
}

.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn-soft{background:var(--panel);color:var(--fg);border-color:var(--line);min-height:110px;font-size:32px}
.btn-wide{width:100%}
.btn-tall{min-height:190px;font-size:42px}
.btn-xl{min-height:160px;font-size:44px;padding:0 68px;border-radius:var(--r-lg)}

/* neaktívne prvky sa nezosvetľujú priehľadnosťou, ale majú vlastnú farbu */
.btn:disabled,.key:disabled{
  background:var(--disabled-bg);
  color:var(--disabled-fg);
  border-color:var(--disabled-bg);
  opacity:1;
  pointer-events:none;
}

/* ── IDLE ─────────────────────────────────────────────────────────── */
.screen[data-screen="IDLE"] .avatar-slot{left:0;top:120px;width:1080px;height:1180px}

.idle-body{
  position:absolute;left:70px;right:70px;top:1340px;bottom:80px;
  display:flex;flex-direction:column;align-items:center;
}
.idle-ticker{
  height:260px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-size:66px;line-height:1.14;font-weight:700;letter-spacing:-.03em;
}
.idle-ticker span{display:block;animation:tickerIn 520ms var(--ease)}
@keyframes tickerIn{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:none}
}
.idle-dots{display:flex;gap:14px;margin:6px 0 44px}
.idle-dots i{
  width:12px;height:12px;border-radius:50%;
  background:var(--line-2);
  transition:background 300ms var(--ease), width 300ms var(--ease);
}
.idle-dots i.on{width:44px;border-radius:999px;background:var(--accent-ink)}

.idle-cta{
  width:100%;
  animation:ctaFloat 3.6s var(--ease) infinite;
}
@keyframes ctaFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-10px)}
}
.touch-icon{display:grid;place-items:center;opacity:.95}

/* ── GENDER_SELECT ────────────────────────────────────────────────── */
.screen[data-screen="GENDER_SELECT"] .h1{text-align:center;margin-top:60px}
.gender-grid{
  flex:1;
  display:grid;grid-template-columns:1fr 1fr;gap:44px;
  align-content:center;
  margin:100px 0 80px;
  max-height:1060px;
}
/* dlaždica s fotkou, popis pod ňou */
.gender-option{display:flex;flex-direction:column;align-items:center;gap:36px}
.gender-card{
  font:inherit;color:var(--fg);
  width:100%;aspect-ratio:1;
  padding:0;overflow:hidden;
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--well);
  display:block;
  cursor:pointer;
  transition:border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.gender-art{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.gender-name{
  font-size:56px;font-weight:700;letter-spacing:-.02em;
  transition:color 200ms var(--ease);
}
/* zvolená karta = akcentný rám, fotka ostáva čitateľná */
.gender-card:active,
.gender-card.is-picked{
  border-color:var(--primary-edge);
  box-shadow:inset 0 0 0 10px var(--primary-bg);
}
.gender-card:active + .gender-name,
.gender-card.is-picked + .gender-name{color:var(--accent-ink)}

/* ── CONVERSATION ─────────────────────────────────────────────────── */
.screen[data-screen="CONVERSATION"] .avatar-slot{left:0;top:120px;width:1080px;height:920px}

.subtitles{
  position:absolute;left:56px;right:56px;top:1060px;height:230px;
  display:flex;align-items:center;
  padding:0 8px;
}
.sub-text{
  font-size:46px;line-height:1.24;font-weight:500;letter-spacing:-.02em;
  color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sub-text .cursor{
  display:inline-block;width:4px;height:44px;vertical-align:-6px;
  margin-left:8px;background:var(--accent-ink);
  animation:blink 1s steps(2,start) infinite;
}
@keyframes blink{50%{opacity:0}}

.quick-grid{
  position:absolute;left:56px;right:56px;top:1310px;height:300px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.quick{
  font:inherit;font-size:34px;font-weight:700;letter-spacing:-.02em;
  color:var(--fg);
  border:var(--bw) solid var(--line);
  border-radius:var(--r-lg);
  background:var(--well);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:0 12px;
  text-align:center;
  cursor:pointer;
  transition:background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.quick-ico{
  flex:none;
  display:grid;place-items:center;
  color:var(--accent-ink);
}
/* zvolená dlaždica: akcentný obrys aj popis, ikona ostáva akcentná */
.quick:active,
.quick.is-active{
  border-color:var(--accent-ink);
  color:var(--accent-ink);
  background:var(--quick-active-bg);
}

.conv-footer{
  position:absolute;left:56px;right:56px;top:1640px;bottom:24px;
  display:flex;flex-direction:column;gap:16px;
}
.conv-footer .btn-wide{min-height:124px;flex:none}
.foot-row{display:flex;align-items:stretch;justify-content:space-between;gap:20px;flex:1;min-height:120px}
.foot-row .btn-ghost{min-height:120px;padding:0 44px;font-size:30px;flex:none}

.mic{
  display:flex;align-items:center;gap:18px;
  padding:0 30px;
  border-radius:var(--r-sm);
  background:var(--panel);
  border:var(--bw) solid var(--line);
  color:var(--fg-dim);
  flex:1;
}
.mic-ico{color:var(--accent-ink);display:grid;place-items:center}
.mic.is-off .mic-ico{color:var(--fg-mute)}
.mic-label{font-size:26px;white-space:nowrap}
.mic-bars{display:flex;align-items:center;gap:5px;height:46px;flex:1}
.mic-bars i{
  width:6px;border-radius:3px;height:8px;
  background:var(--accent-ink);opacity:.85;
  transition:height 80ms linear;
}
.mic.is-off .mic-bars{display:none}

/* ── DEVICE_3D ────────────────────────────────────────────────────── */
/* pás drží pomer 16:9 a je na stred (800×450), rovnaký ako pri balíkoch */
.screen[data-screen="DEVICE_3D"] .avatar-slot{left:140px;top:120px;width:800px;height:450px}

.dev3d-body{position:absolute;left:56px;right:56px;top:606px;bottom:48px}

.dev-strip{
  display:flex;gap:20px;height:160px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
  padding-bottom:4px;
}
.dev-strip::-webkit-scrollbar{display:none}
.dev-card{
  flex:none;width:300px;
  border:var(--bw) solid var(--line);
  border-radius:var(--r-md);
  background:transparent;
  color:var(--fg);font:inherit;text-align:left;
  padding:22px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  cursor:pointer;
  transition:background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.dev-card.is-active{
  background:var(--primary-bg);
  color:var(--primary-fg);
  border-color:var(--primary-edge);
}
.dev-card .dc-name{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
/* rozsah uhlopriečky – samostatný riadok pod názvom */
.dev-card .dc-size{font-size:24px;font-weight:700;color:var(--accent-ink)}
.dev-card.is-active .dc-size{color:var(--primary-fg)}

/* hostiteľ iframu – bez rámu a podkladu, stránka kiosku si nesie vlastné */
.viewer-host{
  position:absolute;left:0;right:0;top:192px;height:912px;
}
.totem-frame{width:100%;height:100%;border:0;display:block}

.row-2{
  position:absolute;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:1fr 1.35fr;gap:22px;
}
.row-2.gap-lg{gap:32px;grid-template-columns:1fr 1fr}
.screen-pad > .row-2{position:static;margin-top:auto}

/* ── PLANS – karusel ponuky ───────────────────────────────────────── */
/* rovnaký pás ako pri zariadeniach (800×450 = 16:9) */
.screen[data-screen="PLANS"] .avatar-slot{left:140px;top:120px;width:800px;height:450px}

/* odsadenia sú utiahnuté tak, aby pás karusela ostal presne 1010 px */
.plans-body{position:absolute;left:56px;right:56px;top:598px;bottom:44px}
.plans-title{position:absolute;top:0;left:0;right:0}

.plan-strip{
  position:absolute;left:-56px;right:-56px;top:92px;height:1010px;
  display:flex;gap:24px;
  padding:0 56px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.plan-strip::-webkit-scrollbar{display:none}
.plan-strip.is-dragging{scroll-snap-type:none;cursor:grabbing}

.plan{
  flex:none;width:460px;
  scroll-snap-align:center;
  border:var(--bw) solid var(--line);
  border-radius:var(--r-lg);
  background:var(--well);
  padding:34px 32px 48px;      /* zospodu viac – posledný benefit sa nesmie lepiť na okraj */
  display:flex;flex-direction:column;
  text-align:left;
}
.plan.is-recommended{border-color:var(--accent-ink)}
/* zvolený paušál sa od odporúčaného odlíši výplňou, nielen obrysom */
.plan.is-picked{border-color:var(--accent-ink);background:var(--panel)}

.plan-flag{
  font-size:24px;font-weight:700;color:var(--accent-ink);
  letter-spacing:-.01em;margin-bottom:14px;
  min-height:30px;
}
.plan-name{font-size:38px;font-weight:700;letter-spacing:-.02em}
/* hlavička karty má rezervovanú výšku, aby sa bloky pod ňou
   zarovnali naprieč kartami bez ohľadu na dĺžku údaja */
.plan-top{min-height:140px}
.plan-head{
  font-size:62px;font-weight:700;letter-spacing:-.03em;line-height:1.05;
  color:var(--accent-ink);margin-top:6px;
}
.plan-sub{font-size:26px;color:var(--fg-mute);margin-top:8px}

.plan-note{
  font-size:29px;line-height:1.3;color:var(--fg-dim);
  margin-top:26px;
  border-top:var(--bw) solid var(--line);
  padding-top:26px;
}

.plan-price{margin-top:26px}
.plan-old{font-size:26px;color:var(--fg-mute);text-decoration:line-through;min-height:32px}
.plan-now{display:flex;align-items:baseline;gap:12px;margin-top:6px}
.plan-now b{font-size:58px;font-weight:700;letter-spacing:-.03em}
.plan-now span{font-size:30px;font-weight:500}
.plan-term{font-size:24px;color:var(--fg-mute);margin-top:8px}

.plan .btn{margin-top:26px;min-height:120px;font-size:32px;width:100%;flex:none}

.plan-benefits{
  margin-top:auto;padding-top:24px;
  border-top:var(--bw) solid var(--line);
  display:flex;flex-direction:column;gap:14px;
}
.plan-benefits li{
  list-style:none;
  display:flex;align-items:flex-start;gap:14px;
  font-size:25px;line-height:1.25;color:var(--fg-dim);
}
.plan-benefits .bx{flex:none;color:var(--accent-ink);margin-top:2px}

/* ukazovateľ posunu – nahrádza posuvník, ktorý na dotyk nie je vidieť */
.plan-bar{
  position:absolute;left:0;right:0;bottom:150px;height:6px;
  background:var(--panel);border-radius:3px;overflow:hidden;
}
.plan-bar span{
  display:block;height:100%;width:30%;
  background:var(--accent-ink);border-radius:3px;
  transition:transform 90ms linear;
}

/* ── COVERAGE_CHECK ───────────────────────────────────────────────── */
.field{
  margin-top:56px;height:150px;flex:none;
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--panel);
  display:flex;align-items:center;
  padding:0 36px;
  font-size:44px;font-weight:500;letter-spacing:-.01em;
  overflow:hidden;white-space:nowrap;
}
.field:empty::before{content:""}
.field-value{color:var(--fg)}
.field-value:empty::before{
  content:"Napíšte ulicu a číslo";
  color:var(--fg-mute);font-weight:500;
}
.caret{
  display:inline-block;width:3px;height:52px;margin-left:6px;
  background:var(--accent-ink);animation:blink 1s steps(2,start) infinite;
  flex:none;
}

.suggests{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.suggests:empty{display:none}
.suggest{
  font:inherit;text-align:left;color:var(--fg);
  min-height:96px;padding:0 32px;
  display:flex;align-items:center;gap:18px;
  border:var(--bw) solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);
  font-size:32px;cursor:pointer;
  animation:fadeUp 220ms var(--ease) backwards;
}
.suggest:active{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-edge)}
.suggest:active .s-ico{color:var(--primary-fg)}
.suggest .s-ico{color:var(--accent-ink);display:grid;place-items:center;flex:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.result{
  margin-top:26px;
  display:flex;flex-direction:column;gap:16px;
  animation:fadeUp 260ms var(--ease);
}
.result[hidden]{display:none}
.res-addr{font-size:30px;color:var(--fg-dim);margin-bottom:4px}
.res-row{
  display:flex;align-items:center;gap:22px;
  min-height:110px;padding:0 32px;
  border-radius:var(--r-sm);
  border:var(--bw) solid var(--line);
  background:var(--panel);
  font-size:36px;font-weight:700;
}
.res-row .dot{width:16px;height:16px;border-radius:50%;flex:none}
.res-row.ok .dot{background:var(--accent-ink)}
.res-row.no .dot{background:var(--fg-mute)}
.res-row.no{color:var(--fg-dim)}

/* ── Klávesnice ───────────────────────────────────────────────────── */
.keyboard{
  position:absolute;left:0;right:0;bottom:190px;
  display:flex;flex-direction:column;gap:12px;
}
.kb-row{display:flex;gap:10px;justify-content:center}
.key{
  font:inherit;color:var(--fg);
  flex:1;min-width:0;height:100px;
  border:var(--bw) solid var(--line);
  border-radius:var(--r-sm);
  background:var(--panel);
  font-size:38px;font-weight:500;
  cursor:pointer;
  transition:background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
.key:active{background:var(--primary-bg);color:var(--primary-fg);border-color:var(--primary-edge)}
.key.k-wide{flex:2.4}
.key.k-space{flex:5}
.key.k-fn{font-size:28px;color:var(--fg-dim);flex:2}
.key.k-dia{font-size:32px;height:84px}

/* číselná klávesnica */
.numpad{
  margin:40px auto 0;
  display:grid;grid-template-columns:repeat(3,300px);gap:22px;
}
.numpad .key{
  height:150px;flex:none;
  font-size:52px;font-weight:700;
  border-radius:var(--r-sm);
}
.numpad .key.k-fn{font-size:30px}
.numpad .key-send{
  background:var(--primary-bg);
  color:var(--primary-fg);border-color:var(--primary-edge);font-weight:700;
}
.numpad .key-send:disabled{
  background:var(--disabled-bg);
  color:var(--disabled-fg);
  border-color:var(--disabled-bg);
}
.numpad .key-send:active{
  background:var(--primary-active-bg);
  color:var(--primary-active-fg);
  border-color:var(--primary-active-edge);
}
.row-2.one{grid-template-columns:1fr}
/* značkový rez je širší – dlhé popisky v dvojici tlačidiel držíme na jednom riadku */
.row-2 .btn{padding:0 26px;font-size:33px}
.row-2.gap-lg .btn{font-size:42px}

/* ── LEAD_CAPTURE ─────────────────────────────────────────────────── */
.lead-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-bottom:200px}
.lead-step > .row-2{position:absolute;left:0;right:0;bottom:0}
.lead-step[hidden]{display:none}
.lead-step.center{align-items:center;justify-content:center;text-align:center;gap:60px}
.lead-step .h1{text-align:center}
.step-art{margin:40px auto 60px;color:var(--accent-ink)}

.privacy-card{
  margin:60px 0 50px;
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-lg);
  background:var(--well);
  padding:56px 48px;
  display:flex;flex-direction:column;gap:34px;
}
.privacy-card p{font-size:38px;line-height:1.34;color:var(--fg)}
.privacy-card p + p{color:var(--fg-dim)}

.check{
  font:inherit;color:var(--fg);
  display:flex;align-items:center;gap:28px;
  min-height:140px;padding:0 40px;
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--panel);
  font-size:38px;font-weight:500;
  cursor:pointer;text-align:left;
  transition:border-color 200ms var(--ease), background 200ms var(--ease);
}
.check-box{
  flex:none;width:64px;height:64px;border-radius:var(--r-sm);
  border:var(--bw) solid var(--line-2);
  background:transparent;
  position:relative;
  transition:background 180ms var(--ease), border-color 180ms var(--ease);
}
.check-box::after{
  content:"";position:absolute;left:19px;top:9px;
  width:20px;height:34px;
  border:solid var(--primary-fg);border-width:0 5px 5px 0;
  border-radius:2px;
  transform:rotate(45deg) scale(.4);opacity:0;
  transition:transform 180ms var(--ease), opacity 140ms var(--ease);
}
.check[aria-pressed="true"]{border-color:var(--accent-ink)}
.check[aria-pressed="true"] .check-box{background:var(--primary-bg);border-color:var(--primary-bg)}
.check[aria-pressed="true"] .check-box::after{transform:rotate(45deg) scale(1);opacity:1}

.phone-field{
  margin:70px 0 18px;
  height:170px;flex:none;
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--panel);
  display:flex;align-items:center;gap:22px;
  padding:0 44px;
}
.prefix{
  font-size:52px;font-weight:700;color:var(--fg-dim);
  padding-right:22px;border-right:var(--bw) solid var(--line);
}
.phone-digits{font-size:56px;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.phone-hint{font-size:28px;color:var(--fg-mute);padding-left:8px}
.phone-hint.is-ok{color:var(--accent-ink)}

.ok-mark{color:var(--accent-ink);animation:okPop 420ms var(--ease) backwards}
.ok-circle{opacity:.55}
.ok-check{stroke-width:2}
@keyframes okPop{
  from{opacity:0;transform:scale(.82)}
  to  {opacity:1;transform:none}
}

/* ── SELLER ───────────────────────────────────────────────────────── */
.pulse-art{
  position:relative;width:420px;height:420px;
  display:grid;place-items:center;margin-bottom:70px;
}
.pulse-core{
  width:200px;height:200px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--primary-bg);
  color:var(--primary-fg);
}
.pw{
  position:absolute;width:200px;height:200px;border-radius:50%;
  border:var(--bw) solid rgba(var(--accent-rgb),.45);
  animation:ripple 3s var(--ease) infinite;
}
.pw.p2{animation-delay:1s}
.pw.p3{animation-delay:2s}
.screen[data-screen="SELLER"] .btn-wide{max-width:760px;margin-top:80px}

/* ── FEEDBACK ─────────────────────────────────────────────────────── */
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:110px}
.fb-btn{
  width:400px;height:400px;
  border:var(--bw) solid var(--line-2);border-radius:var(--r-lg);
  background:transparent;color:var(--fg);
  display:grid;place-items:center;cursor:pointer;
  transition:background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.fb-btn:active,
.fb-btn.is-picked{
  background:var(--primary-bg);
  color:var(--primary-fg);
  border-color:var(--primary-edge);
}
.fb-thanks[hidden],.fb-ask[hidden]{display:none}
.fb-thanks{animation:fadeIn 300ms var(--ease)}

/* ── Dev ──────────────────────────────────────────────────────────── */
#devHotspot{position:absolute;right:0;top:0;width:190px;height:190px;z-index:80}

/* Priesvitný panel – leží nad scénou, preto sklo a nie plná farba. */
#devPanel{
  position:absolute;right:28px;top:28px;width:620px;
  z-index:90;
  border:var(--bw) solid var(--dev-edge);
  border-radius:var(--r-md);
  background:rgba(20,20,20,.72);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  padding:26px;
  display:flex;flex-direction:column;gap:20px;
  animation:fadeUp 220ms var(--ease);
}
#devPanel[hidden]{display:none}
.dev-head{display:flex;align-items:center;justify-content:space-between;
  font-size:24px;font-weight:700;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase}
.dev-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dev-row.col{flex-direction:column;align-items:stretch;gap:12px}
.dev-label{font-size:24px;color:var(--fg-dim)}

/* Jednotný povrch pre všetky ovládače panela */
.dev-x,.dev-btn,.dev-switch{
  font:inherit;color:var(--fg);
  border:var(--bw) solid var(--dev-edge);
  background:var(--dev-surface);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background 180ms var(--ease), border-color 180ms var(--ease);
}
.dev-x:active,.dev-btn:active{background:var(--dev-surface-hi)}
.dev-x{width:56px;height:56px;font-size:24px}
.dev-btn{font-size:24px;min-height:76px}
.dev-btn.on{background:var(--primary-bg);color:var(--primary-fg);border-color:transparent}

/* Prepínač témy – dráha s posuvným kolieskom, koliesko nesie akcent */
.dev-switch{
  position:relative;flex:none;
  width:104px;height:56px;border-radius:999px;
  padding:0;
}
.dev-switch::after{
  content:"";position:absolute;top:50%;left:5px;
  width:38px;height:38px;border-radius:50%;
  background:var(--accent-ink);
  transform:translateY(-50%);
  transition:transform 180ms var(--ease), background 180ms var(--ease);
}
.dev-switch[aria-checked="true"]{background:var(--dev-surface-hi)}
.dev-switch[aria-checked="true"]::after{transform:translate(48px,-50%)}

.dev-stats{
  font-size:22px;line-height:1.6;color:var(--fg-dim);
  border-top:var(--bw) solid var(--dev-edge);padding-top:18px;
  display:grid;grid-template-columns:1fr auto;gap:4px 20px;
}
.dev-stats b{color:var(--fg);font-weight:700;text-align:right}
.dev-stats .st-on{color:var(--accent-ink)}
.dev-stats .st-off{color:var(--danger)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}