/* ============================================================
   components.css — znovupoužiteľné prvky nezávislé od kroku
   (tlačidlá, voľby, textové pole, karty, bannery, spinner)
   ============================================================ */

/* ---------- nadpisy krokov ---------- */
/* Nadpisy nesie kontrastná antikva, text bezpätkové písmo. Rozdiel medzi
   nimi je zámerne veľký — na ňom stojí celý redakčný dojem. */
/* Úvodný nadpis smie siahnuť o 4 % ďalej doprava než ostatný obsah. Pri
   29 px sa tak zmestí na dva riadky (na širokom paneli); vo vnútri stĺpca by
   pri tej istej veľkosti mal štyri. Do pruhu fotografie zasahuje len o ten
   kúsok — oko na fotke ostáva voľné. Na užšom paneli sa nadpis zalomí tak či
   tak, tam ide o stupeň nižšie (pozri médiá na konci screens.css). */
h1.intro-title{
  font-family:var(--font-display);font-weight:400;
  font-size:29px;margin:2px -4% 18px 0;line-height:1.14;letter-spacing:-.012em;
}
/* Nadpis kroku — spoločný pre otázku, súhlas, fotku aj kameru. Odstup pod ním
   je väčší než pôvodných 6 px: nadpis má mať okolo seba vzduch aj vtedy, keď
   je krok stiesnený. */
h2.q-title{
  font-family:var(--font-display);font-weight:400;
  font-size:22px;margin:0 0 11px;line-height:1.24;letter-spacing:-.012em;
}
/* Vysvetlivky stoja priamo na fotografii, nie na doske. Nad najtmavším
   miestom by --ink-soft mal 2,11:1, preto nesú hlavný atrament — hierarchiu
   drží veľkosť a váha, nie tón. */
p.q-hint{color:var(--ink);font-size:12px;margin:0 0 16px;line-height:1.55;}
p.intro-text{color:var(--ink);font-size:12.5px;line-height:1.65;margin:0 0 18px;}

/* ---------- voľby (radio / checkbox) ---------- */
.options{
  display:flex;flex-direction:column;gap:6px;
  margin-bottom:8px;
}
/* Obrys je rovnaký ako na informačných doskách — políčka majú jednotný rám
   bez ohľadu na to, či sa na ne kliká. Rozpoznateľnosť ovládacieho prvku
   nesie značka nižšie, ktorá si tmavý obrys ponecháva: WCAG 1.4.11 žiada
   3:1 pre prvok, ktorý zákazníčka ovláda, a to je krúžok či štvorček,
   nie rámik okolo celého riadku. */
/* Riadok je nižší než pôvodne (13/14) — pri otázke s ôsmimi možnosťami je to
   rozdiel medzi krokom, ktorý sa zmestí, a krokom, ktorý sa roluje. Značka
   vľavo naopak narástla: terč kliknutia sa zmenšovať nemá. */
.option{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  display:flex;align-items:center;gap:11px;
  cursor:pointer;background:var(--surface-thin);
  font-size:12px;
  transition:border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
/* Kurzor na políčku a stlačenie sa hlásia stmavením výplne. Bez toho
   nemá políčko žiadnu spätnú väzbu — kliknuteľnosť by niesol len tvar. */
.option:hover{background:var(--surface-hover);border-color:var(--line-strong);}
.option:active{background:var(--surface-active);border-color:var(--gold-ink);}
.option:focus-visible{outline:2px solid var(--espresso);outline-offset:2px;}
.option .mark{
  flex:none;width:var(--icon-xs);height:var(--icon-xs);
  border:1px solid var(--line-strong);
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:var(--on-espresso);font-size:10px;
  transition:all var(--motion-fast) ease;
}
.option.radio .mark{border-radius:50%;}
.option.checkbox .mark{border-radius:4px;}
.option.selected{
  border-color:var(--gold-ink);
  background:var(--wash);
}
/* Výplň značky ide tmavšou zlatou, nie svetlou: je v nej biely glyf ✓ / ●
   a na svetlej zlatej by mal kontrast 2,4:1. Na --gold-ink má 5,01:1. */
.option.selected .mark{
  background:var(--gold-ink);
  border-color:var(--gold-ink);
}
.option .label{flex:1;}
.option .label a{color:var(--gold-ink);text-decoration:underline;}

/* Riadok má na každej otázke rovnakú výšku, aj keď má otázka dvanásť
   možností a nezmestí sa na jednu obrazovku. Hustejší riadok pre dlhé
   zoznamy sme skúšali a zamietli: rozdiel medzi otázkami je viditeľný pri
   prechode z jednej na druhú a terč pod prstom sa zmenší práve tam, kde sa
   klikať bude najviac. Dlhý zoznam sa preto doroluje. */

/* ---------- tlačidlá ---------- */
/* Základ je zámerne .btn (nie button.btn): pri element+trieda by mal základ
   vyššiu špecificitu než modifikátory .btn-secondary a .btn-ghost a prebil by
   im orámovanie aj šírku. Modifikátory stoja nižšie, takže pri rovnakej
   špecificite vyhrávajú. */
.btn{
  border:none;border-radius:var(--radius-btn);
  font-family:var(--font-ui);
  font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  padding:13px 16px;cursor:pointer;
  flex:1;
  transition:opacity var(--motion-fast) ease, transform .1s ease;
}
.btn:active{transform:scale(.98);}
.btn:focus-visible{outline:2px solid var(--espresso);outline-offset:2px;}
/* Takmer čierne tlačidlo je najvýraznejší prvok na obrazovke (14,78:1 voči
   ploche), preto smie byť na jednom kroku práve jedno. Späť aj „vyplniť
   znova" sú preto len obrysy. */
.btn-primary{
  background:var(--espresso);
  color:var(--on-espresso);
}
/* Neaktívne tlačidlo na kurzor nereaguje — inak by sľubovalo akciu,
   ktorú nevykoná. */
.btn-primary:hover:not(:disabled){background:var(--espresso-lift);}
.btn-primary:active:not(:disabled){background:var(--espresso-press);}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;}
.btn-secondary{
  background:transparent;color:var(--ink);
  border:1px solid var(--line-strong);
  flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
  padding:0;font-size:14px;letter-spacing:normal;
}
.btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--line-strong);
}
/* Obrysové tlačidlá reagujú rovnako ako políčka: stmavením výplne.
   Bez toho by šípka späť a „zrušiť“ boli jediné klikacie prvky
   v celom widgete bez spätnej väzby. */
.btn-secondary:hover,
.btn-ghost:hover{background:var(--surface-hover);}
.btn-secondary:active,
.btn-ghost:active{background:var(--surface-active);border-color:var(--gold-ink);}
.skip-link{
  display:block;text-align:center;margin-top:14px;
  font-size:12px;color:var(--ink);
  text-decoration:underline;cursor:pointer;background:none;border:none;
}


/* ---------- textové pole ---------- */
/* Prvé vstupné pole vo widgete — dotazník inak zbiera len voľby. Preberá
   rozmery aj rám políčka voľby (.option), aby pôsobilo ako ten istý typ
   ovládania. Obrys ide --line-strong: WCAG 1.4.11 žiada 3:1 na prvok,
   ktorý zákazníčka ovláda, a --line má voči ploche 1,2:1. */
.field{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  font-family:var(--font-ui);
  font-size:12.5px;
  color:var(--ink);
  transition:border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
/* Zástupný text nesmie vyzerať ako vyplnená hodnota — nesie tlmený
   atrament, ktorý má na doske 5,92:1. */
.field::placeholder{color:var(--ink-soft);}
.field:hover{background:var(--surface-hover);}
/* Pole je jediný prvok, do ktorého sa píše. Zameranie preto hlási aj rámom,
   nielen prstencom — kurzor v kréme je na telefóne sotva vidieť. */
.field:focus{
  outline:2px solid var(--espresso);outline-offset:1px;
  border-color:var(--espresso);
  background:var(--surface);
}
.field[aria-invalid="true"]{border-color:var(--error-ink);background:var(--error-bg);}
/* Počas odosielania sa do poľa písať nedá. Farby si drží vlastné (nie
   systémové sivé), aby rozpísaná adresa ostala čitateľná — že je pole
   dočasne mimo hry, hovorí kurzor a tlačidlo s nápisom „Odosielam…“. */
.field:disabled{cursor:default;background:var(--surface);color:var(--ink);}

/* ---------- bannery ---------- */
.error-banner{
  background:var(--error-bg);border:1px solid var(--error-line);color:var(--error-ink);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:12px;
  margin-top:12px;line-height:1.55;
}

/* Chyba pri odoslaní e-mailu patrí k poľu, nie k celej obrazovke. Červená
   doska (.error-banner vyššie) je na to príliš ťažká — v úzkej karte zaberie
   tri riadky a vyzerá ako porucha widgetu, hoci stačí opraviť preklep
   v adrese. Hláška preto ide ako riadok tesne pod pole: rovnaká šírka, žiadna
   výplň, len výstražný glyf a text v --error-ink (6,23:1 na doske).
   Pole si červený rám ponecháva — ukazuje, kam siahnuť. */
.field-error{
  display:flex;gap:7px;align-items:flex-start;
  margin:-2px 0 0;
  font-size:11.5px;line-height:1.5;
  color:var(--error-ink);
}
/* Glyf je ozdobný, text hlášky nesie celé znenie. Pre čítačku obrazovky je
   skrytý, inak by ohlásila „výkričník“ pred každou chybou. */
.field-error-icon{flex:none;margin-top:1px;}

/* ---------- spinner ---------- */
.spinner{
  width:42px;height:42px;border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--espresso);
  animation:spin 0.9s linear infinite;
  margin-bottom:20px;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Pruh pod nápisom na kroku čakania. Naplní sa za bežný čas analýzy
   (--loading-duration, nastavuje loading-screen.js), takže zákazníčka vidí,
   koľko ešte zostáva. --loading-elapsed posúva animáciu dopredu, keď sa
   obrazovka prekreslí uprostred čakania. Ak backend počíta dlhšie, plný
   pruh pulzuje — nesmie pôsobiť ako hotovo-a-zaseknuté. */
.loading-bar{
  --loading-duration:30s;--loading-elapsed:0ms;
  width:min(220px,72%);height:4px;margin-top:20px;
  border-radius:4px;background:var(--line);overflow:hidden;
}
.loading-bar::after{
  content:"";display:block;width:100%;height:100%;
  border-radius:inherit;background:var(--espresso);
  transform:scaleX(0);transform-origin:left center;
  animation:
    loading-fill var(--loading-duration) linear calc(-1 * var(--loading-elapsed)) forwards,
    loading-pulse 1.6s ease-in-out calc(var(--loading-duration) - var(--loading-elapsed)) infinite;
}
@keyframes loading-fill{
  from{transform:scaleX(0);}
  to{transform:scaleX(1);}
}
@keyframes loading-pulse{
  50%{opacity:.45;}
}
/* tokens.css pri „obmedziť pohyb“ skráti každú animáciu na nulu — pruh by
   tak bol plný hneď od začiatku a klamal by. Pomalé plnenie nie je pohyb,
   ktorý by vadil, a nesie informáciu, preto ho tu vraciame; pulz ostáva
   vypnutý. */
@media (prefers-reduced-motion: reduce){
  .loading-bar::after{animation-duration:var(--loading-duration),.001ms !important;}
}

/* ---------- karty ---------- */
/* Karty sa z plochy vydvihujú obrysom, nie tieňom — tieň pôsobí aplikačne
   a v tejto palete špiní. */
.summary-card{
  background:var(--surface-panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 16px;
  margin-bottom:14px;
}
.summary-card h3{
  margin:0 0 8px;font-size:9px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);
}
.summary-card p{margin:0;font-size:12.5px;line-height:1.65;}

/* Riadok produktu v paneli rutiny (.routine v screens.css). Sám nemá rám ani
   plochu — tie nesie panel a riadky od seba delí len linka. Klikateľný nie je,
   do e-shopu vedie tlačidlo .product-buy v spodnom riadku. Celý riadok ako
   odkaz by tlačidlo nezniesol: interaktívny prvok vnorený v odkaze nie je
   platné HTML a čítačka obrazovky by na tom istom mieste ohlásila dva
   prekryté ciele.

   Obrázok je zarovnaný hore, nie na stred: riadky majú rôznu výšku a obrázky
   na stred skákali každý inam. Hore stoja všetky na tej istej línii ako typ
   kroku vedľa nich. */
.product-card{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;
  align-items:start;
  padding:14px;
}
.product-card + .product-card{border-top:1px solid var(--line);}
.product-media{position:relative;}
/* Rámik okolo packshotu a object-fit:contain s odsadením: každý produkt sedí
   v rovnakom bielom okne celý, nič sa neoreže. Packshoty z e-shopu sú raz
   na bielom, raz na krémovom — v jednotnom rámiku spolu aj tak ladia. */
.product-card img{
  display:block;
  width:52px;height:52px;padding:3px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  object-fit:contain;background:var(--packshot);
}
/* Poradie nanášania v krúžku na rohu obrázka. Espresso ako číslované krúžky
   v úvode; obrys vo farbe plochy ho vystrihne z rámika obrázka. Krémové
   číslo má na espresse 14,78:1. */
.product-step{
  position:absolute;top:-6px;left:-6px;
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--surface);
  background:var(--espresso);color:var(--on-espresso);
  font-size:9.5px;font-weight:700;line-height:1;
}
.product-body{min-width:0;}
/* Na karte sú len tri hlasy písma: zlaté verzálky na typ kroku (a tlačidlo),
   tučný Manrope na názov a tlmený text na značku. Antikva ostáva cene.
   Značka preto nie je vo verzálkach — vedľa typu kroku by s ním splývala. */
.product-slot{
  font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:3px;
}
.product-name{font-size:12.5px;font-weight:600;line-height:1.32;}
.product-brand{font-size:11px;color:var(--ink-soft);margin-top:2px;}
/* Štítky „na čo je“ (Hydratácia, Pre citlivú pleť…). Zelené, lebo hovoria
   „toto rieši vašu pleť“ — sú dôvodom, prečo produkt v rutine je, a majú byť
   vidieť hneď po názve. Zelenú widget už používa pri potvrdeniach, takže do
   palety nevnáša cudziu farbu, a zlato ostáva typu kroku a tlačidlu, s ktorým
   si štítky nekonkurujú. Bez verzálok: popisy sú celé slovné spojenia.
   --ok-ink na --ok-bg má 5,26:1. */
.product-tags{
  display:flex;flex-wrap:wrap;gap:5px;
  list-style:none;margin:8px 0 0;padding:0;
}
.product-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px 2px 6px;border-radius:999px;
  border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok-ink);
  font-size:10px;font-weight:600;line-height:1.5;
}
.product-tag-check{flex:none;}
/* Spodný riadok: cena na začiatku, pod textom, tlačidlo vpravo. Zalomiť sa smie
   — nemecké „Hier erhältlich“ vedľa dlhšej ceny sa na telefóne nemusí zmestiť;
   tlačidlo potom zosadne pod cenu a margin-left:auto ho drží vpravo. Rovnako
   vpravo stojí, aj keď produkt cenu nemá. */
.product-foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:10px;
}
.product-price{
  font-family:var(--font-display);font-weight:400;
  font-size:15px;line-height:1.2;white-space:nowrap;
}
/* Tlačidlo do e-shopu. Zlatý obrys namiesto tmavej výplne: v rutine je
   takýchto tlačidiel aj päť pod sebou a tmavé by prekričali pätičku —
   tá smie mať na kroku jediné výrazné tlačidlo. Text je --gold-ink,
   teda 5,32:1 na karte. */
.product-buy{
  position:relative;
  display:inline-flex;align-items:center;gap:5px;
  margin-left:auto;
  padding:6px 11px;
  border:1px solid var(--gold);border-radius:999px;
  background:transparent;color:var(--gold-ink);
  font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;text-decoration:none;
  transition:background var(--motion-fast) ease, border-color var(--motion-fast) ease,
    color var(--motion-fast) ease, transform .1s ease;
}
/* Samotná pilulka je vysoká ~25 px — na oko akurát, na prst málo. Neviditeľná
   vrstva jej rozšíri citlivú plochu na 44 px, čo je najmenší terč, ktorý sa dá
   spoľahlivo trafiť palcom. Vizuál sa nemení, rastie len to, čo počúva dotyk.
   Pod tlačidlom je 14 px odsadenie riadku, takže presah (~10 px hore a dole)
   ostáva vnútri riadku a neprekrýva terč susedného produktu. */
.product-buy::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:50%;transform:translateY(-50%);
  height:44px;
}
/* Zvýraznenie pod kurzorom bez podmienky (hover:hover) či (any-hover:hover),
   rovnako ako ostatné tlačidlá widgetu. Notebook s dotykovou obrazovkou
   hlási „bez kurzora“ aj vtedy, keď zákazníčka hýbe myšou, a tlačidlo
   potom reagovalo až na kliknutie. Na telefóne môže zvýraznenie po ťuknutí
   chvíľu ostať — vyzerá rovnako ako stlačenie, takže nemätie.
   Výplň ide o stupeň tmavšie než --wash — ten na krémovej karte splynul a
   prejdenie nebolo vidieť. Na tmavšej výplni potrebuje písmo --gold-deep. */
.product-buy:hover{
  background:var(--surface-active);border-color:var(--gold-ink);color:var(--gold-deep);
}
.product-buy:hover .product-go{transform:translate(2px,-2px);}
/* Stlačenie má tú istú výplň ako prejdenie, myš by preto kliknutie necítila —
   tlačidlo sa pri ňom preto mierne zmenší ako ostatné tlačidlá widgetu. */
.product-buy:active{
  background:var(--surface-active);border-color:var(--gold-ink);color:var(--gold-deep);
  transform:scale(.97);
}
.product-buy:focus-visible{outline:2px solid var(--espresso);outline-offset:2px;}
/* Šípka „otvorí sa v e-shope“. Čisto ozdobná — popis odkazu nesie text
   tlačidla aj názov produktu, takže je pre čítačku obrazovky skrytá.
   Pod kurzorom poodskočí smerom, kam ukazuje. */
.product-buy .product-go{
  font-size:10px;line-height:1;letter-spacing:normal;
  transition:transform var(--motion-fast) ease;
}

/* ---------- prepínač jazyka ---------- */
/* Gulička stojí v hlavičke vedľa tlačidiel panela a ukazuje sa len na úvode
   (js/ui/language-switch.js). Tvar aj reakcie kopírujú ostatné obrysové
   ovládanie widgetu: svetlá doska, tmavý obrys, stmavenie výplne pod
   kurzorom — nie zmena obrysu, aby mal prvok vo všetkých stavoch rovnakú
   siluetu. Hlavný atrament má na oboch stavoch nad 12:1. */
.lang{position:relative;flex:none;}
.lang-pill{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 10px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--surface-panel);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  line-height:1;cursor:pointer;
  transition:background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.lang-pill:hover{background:var(--surface-hover);}
.lang-pill:active,
.lang-pill[aria-expanded="true"]{
  background:var(--surface-active);
  border-color:var(--gold-ink);
}
.lang-pill:focus-visible{outline:2px solid var(--espresso);outline-offset:2px;}
/* Glóbus je dekoratívny (jazyk nesie kód vedľa neho), preto smie ísť zlatou:
   --gold-ink má na doske 5,32:1, teda aj nad hranicou 3:1 pre grafiku. */
.lang-globe{flex:none;color:var(--gold-ink);}
.lang-code{display:block;}
.lang-chev{
  font-size:8px;color:var(--ink-soft);line-height:1;
  transition:transform var(--motion-fast) ease;
}
.lang-pill[aria-expanded="true"] .lang-chev{transform:rotate(180deg);}

/* Ponuka sa rozbaľuje pod guličkou a zarovnáva sa napravo — vedľa sú už len
   dve malé tlačidlá, takže doľava má vždy dosť miesta aj v úzkom stĺpci widgetu. */
.lang-menu{
  position:absolute;top:calc(100% + 7px);right:0;z-index:6;
  min-width:178px;padding:5px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
}
.lang-option{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 9px;border:none;border-radius:9px;background:none;
  font-family:var(--font-ui);font-size:11.5px;color:var(--ink);
  text-align:left;cursor:pointer;
  transition:background var(--motion-fast) ease, color var(--motion-fast) ease;
}
/* Riadok reaguje na kurzor celou plochou, nielen textom: stmavne výplň,
   popis ide do plného atramentu a kód jazyka do zlatej — aby bolo aj bez
   fajky vidieť, ktorý riadok sa práve chystá prepnúť. Klávesnica dostáva
   ten istý stav, nech sa myš a Tab nelíšia. */
.lang-option:hover,
.lang-option:focus-visible{background:var(--surface-hover);color:var(--espresso);}
.lang-option:hover .lang-option-code,
.lang-option:focus-visible .lang-option-code{color:var(--gold-ink);}
.lang-option:active{background:var(--surface-active);}
.lang-option:focus-visible{outline:2px solid var(--espresso);outline-offset:-2px;}
.lang-option-code{
  flex:none;width:24px;
  font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft);
  transition:color var(--motion-fast) ease;
}
.lang-option-name{flex:1;}
/* Zvolený jazyk nesie fajku aj tmavšie písmo — samotná farba kódu by pre
   farbosleposť nestačila. Fajka je stále v toku (len priehľadná), takže
   riadky pri prepnutí neposkakujú. */
.lang-option-tick{flex:none;color:var(--gold-ink);font-size:11px;opacity:0;}
.lang-option[aria-checked="true"] .lang-option-code{color:var(--gold-ink);}
.lang-option[aria-checked="true"] .lang-option-name{font-weight:600;}
.lang-option[aria-checked="true"] .lang-option-tick{opacity:1;}