/* ==========================================================================
   Objednávkový formulár — stavy
   Chyba, odosielanie, potvrdenie. Farby berie z tokenov návrhu, takže na
   svetlom aj tmavom podklade sedí bez ďalšieho zásahu.
   ========================================================================== */

[data-objednavka] {
  --f-chyba: #B4442F;
  --f-ok: var(--br-akcent, #0B6F68);
}
/* Na tmavom podklade je bordová nečitateľná — zosvetlíme ju. */
[data-objednavka][style*="rgb(11, 43, 42)"],
[data-objednavka][style*="rgb(10, 39, 36)"],
.ref--tmavy [data-objednavka] {
  --f-chyba: #F0917C;
  --f-ok: #4FC3B5;
}

/* Po odoslani zmiznu polia aj tlacidlo. Trieda, nie [hidden] — tlacidla maju
   v navrhoch display nastaveny selektorom s vyssou specificitou.
   23. 9.: .br-f-suhlas nizsie ma display: flex !important s rovnakou vahou
   a v subore je neskor — suhlas po odoslani ostaval nad potvrdenim. Preto
   zdvojena trieda (0,2,0). */
.br-f-skryte, .br-f-skryte.br-f-skryte { display: none !important; }

/* ------------------------------------------------------------------ chyba */

.br-f-chyba {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--f-chyba);
  /* Prázdna hláška nesmie držať miesto, inak formulár skáče. */
  min-height: 0;
}
.br-f-chyba:empty { display: none; }

/* Polia vyzerajú v každom návrhu inak — raz pilulka s bielym podkladom, raz
   holý riadok s linkou pod ním. Obrys ide po zaoblení, takže funguje na
   oboch; keď je pole zaostrené, prednosť má fokusový prstenec. */
:is(input, select, textarea).je-chybne:not(:focus-visible) {
  /* Polia maju z exportu inline `outline: none`, preto !important. */
  outline: 1.5px solid var(--f-chyba) !important;
  outline-offset: 2px !important;
  border-color: var(--f-chyba) !important;
}
:is(input, select, textarea).je-chybne::placeholder {
  color: color-mix(in oklab, var(--f-chyba) 55%, transparent);
}
label.je-chybne .clab,
label.je-chybne .cno { color: var(--f-chyba) !important; }
/* Zaškrtávacie políčko nemá čo obkresliť — príznak nesie jeho rámik. */
label.je-chybne input[type="checkbox"] {
  outline: 1.5px solid var(--f-chyba) !important;
  outline-offset: 2px !important;
}
/* Pole s chybou, na ktoré formulár po kliknutí na Odoslať skočí (23. 9.):
   hrubší prstenec v chybovej farbe, nech je jasné, kde pokračovať. :focus,
   nie :focus-visible — zaškrtávacie políčko zaostrené skriptom po kliknutí
   myšou :focus-visible nespĺňa a nemalo by žiadny prstenec. */
:is(input, select, textarea).je-chybne:focus,
label.je-chybne input[type="checkbox"]:focus {
  outline: 2.5px solid var(--f-chyba) !important;
  outline-offset: 3px !important;
}

/* Súhrnná hláška je štandardne len pre čítačku obrazovky. Chyby stoja pri
   poliach a druhý text pod tlačidlom by robil zmätok. Vidieť ju treba len
   vtedy, keď zlyhá samotné odoslanie — vtedy sa nemá o čo oprieť inde. */
.br-f-hlaska {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.br-f-hlaska.je-viditelna {
  position: static;
  width: auto; height: auto;
  margin: 14px 0 0;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  flex-basis: 100%;
  font-size: 14px;
  line-height: 1.5;
}
.br-f-hlaska.je-chybna { color: var(--f-chyba); }
.br-f-hlaska a { color: inherit; text-underline-offset: 3px; }

/* ------------------------------------------------------------ odosielanie */

[data-odoslat] { position: relative; }
[data-odoslat][disabled] { cursor: progress; }

[data-odoslat].je-zaneprazdnene > * { opacity: .25; }
[data-odoslat].je-zaneprazdnene::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: br-toci .7s linear infinite;
}
@keyframes br-toci { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------- potvrdenie */

.br-f-hotovo {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: clamp(24px, 3.2vw, 38px);
  border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
  border-radius: 20px;
  background: color-mix(in oklab, currentColor 4%, transparent);
  animation: br-prichod .55s cubic-bezier(.16, 1, .3, 1) both;
  /* focus() potvrdenie posunie do okna — bez odstupu by jeho vrch s fajkou
     zakryla pevná hlavička (na HP 23. 9. vrch 14 px nad oknom) */
  scroll-margin-top: 110px;
}
.br-f-hotovo:focus-visible { outline: 2px solid var(--f-ok); outline-offset: 4px; }

.br-f-fajka {
  width: 44px;
  height: 44px;
  color: var(--f-ok);
}
.br-f-fajka path {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: br-fajka .5s cubic-bezier(.16, 1, .3, 1) .18s forwards;
}
@keyframes br-fajka { to { stroke-dashoffset: 0; } }

.br-f-hotovo h3 {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.14;
  letter-spacing: -.02em;
}
.br-f-hotovo p {
  margin: 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.62;
  opacity: .82;
}
.br-f-hotovo b { font-weight: 600; opacity: 1; }

.br-f-suhrn {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 6px 0 0;
  padding-top: 14px;
  width: 100%;
  border-top: 1px solid color-mix(in oklab, currentColor 14%, transparent);
}
.br-f-suhrn div { display: grid; gap: 3px; }
.br-f-suhrn dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
}
.br-f-suhrn dd { margin: 0; font-size: 14.5px; }

.br-f-skor { font-size: 14px; }
.br-f-skor a {
  color: var(--f-ok);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes br-prichod {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .br-f-hotovo,
  .br-f-fajka path,
  [data-odoslat].je-zaneprazdnene::after { animation: none; }
  .br-f-fajka path { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------- súhlas so spracovaním

   Štyri návrhy prišli z exportu bez zaškrtávacieho políčka — formulár tam
   zbieral meno a telefón na zdravotnú službu bez akéhokoľvek súhlasu.
   zloz.py ho teraz doplní, keď v sekcii žiadne nie je, a berie tento vzhľad.
   Farby idú cez tokeny sekcie, aby to sadlo na papier aj na tmavý podklad.  */

.br-f-suhlas {
  /* Ked je formular mriezka, suhlas ide cez vsetky stlpce — inak spadne do
     polovice riadku a vedla neho zostane prazdne miesto. Mimo mriezky
     prehliadac tuto deklaraciu ignoruje. */
  grid-column: 1 / -1;
  /* Sadzbu si drzi sam. V niektorych navrhoch su popisky formulara male
     versalky s prestrkom a suhlas si ich zdedil — dva riadky kapitalok
     vedla policka vyzerali ako varovanie, nie ako veta na precitanie.
     Je to vkladany komponent, ma vyzerat rovnako vsade. */
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 14px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  /* Farbu sem dopisuje formular.js podla susedneho popisku — dedenie tu
     nefunguje, export ma kazdy popisok zafarbeny inline. Toto je len
     bezpecna vychodzia hodnota, kym skript nezbehne. */
  color: inherit;
}

/* Kazde policko v objednavke, nielen to nase doplnene. Export ma vlastny
   suhlas na jednom navrhu a bez tychto pravidiel sa v riadku roztiahol. */
[data-objednavka] input[type="checkbox"],
.br-f-suhlas input[type="checkbox"] {
  /* 20 px je vizuálna veľkosť; dotykový cieľ dvíhame odsadením nižšie. */
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--f-ok);
  cursor: pointer;
}

/* Na dotykových displejoch musí byť cieľ aspoň 44 px. Zväčšujeme ho
   pseudoprvkom, aby políčko opticky zostalo malé. */
@media (pointer: coarse) {
  [data-objednavka] input[type="checkbox"],
  .br-f-suhlas input[type="checkbox"] { position: relative; }
  [data-objednavka] input[type="checkbox"]::after,
  .br-f-suhlas input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* Text v span-e dedi to iste, co riadok — musi sa prepisat aj tu. */
.br-f-suhlas > span {
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.br-f-suhlas input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--f-ok) !important;
  outline-offset: 3px !important;
}

/* Neodškrtnuté pri pokuse o odoslanie — hláška sedí pod riadkom.
   23. 9.: formular.js dáva popisu triedu je-chybne, tu bolo je-chybny —
   text súhlasu preto pri chybe nikdy nesčervenel. Platia obe. !important,
   lebo farbu popisu nastavuje formular.js inline podľa podkladu. */
.br-f-suhlas:is(.je-chybne, .je-chybny) { color: var(--f-chyba) !important; }
.br-f-suhlas:is(.je-chybne, .je-chybny) input[type="checkbox"] { accent-color: var(--f-chyba); }