/* ==========================================================================
   epozvanka.sk — svadobná stránka

   Paleta aj typografia sú prevzaté z ukážky na /svadba, nech je to zjavne
   ten istý produkt. Zvyšok webu je plagátový — tvrdé rámy, čierne tiene,
   Arial Black. Svadba je zámerne opak: papier, zlaté vlásočnice, serif.
   Kto si kupuje svadobný web, nechce krik.

   Písma sa nesťahujú z cudzieho servera. Cormorant a DM Sans by musel
   doniesť Google Fonts, čo je tretia strana v ceste k obsahu a údaj o tom,
   kto si pozvánku otvoril. Systémové serify vyzerajú takmer rovnako a sú
   tam okamžite.
   ========================================================================== */

.sv {
  --ivory: #f4eee1;
  --paper: #faf6eb;
  --paper2: #efe7d5;
  --oxblood: #5a1f2b;
  --oxblood-deep: #411521;
  --gold: #a8863d;
  --gold-soft: #c2a05a;
  --gold-pale: #d9c391;
  --charcoal: #2d2721;
  /* Tlmená farba nesie štítky dlaždíc („Dress code", „Parkovanie"), popisky
     odpočtu aj riadok nad menami — na krémovom podklade mala 3,8 : 1, kým
     norma žiada 4,5 : 1 pre text pod 24 px. A sú to texty s 10 až 12 px,
     teda tie najmenšie na celej stránke. Je to produkt za 79 €.

     Odtieň zostal ten istý kamenný teplý tón, len tmavší: 4,8 : 1. */
  --stone: #7a6c56;
  --vlas: rgba(168, 134, 61, 0.45);

  --serif: 'Cormorant Garamond', Cormorant, 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  display: block;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  /* text sa nesmie tiahnuť cez celú šírku monitora — čítanie sa tým láme */
  --stlpec: 62ch;
}

.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }

/* ── odkrývanie ────────────────────────────────────────────────────────
   Jemné a krátke. Svadobná stránka je dlhá a keby každý blok priletel,
   pôsobí to ako prezentácia, nie ako oznámenie. */
.sv-zjav {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.sv-zjav.je-tu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sv-zjav { opacity: 1; transform: none; transition: none; }
}

/* ── motív ──────────────────────────────────────────────────────────────
   Farby prichádzajú z motívu alebo z voľby človeka — JS ich nastaví ako
   premenné. Tu sú len záložné hodnoty pre prípad, že by motív chýbal. */
/* `--m-akcent` je farba, ktorú si vybral zákazník — kreslí motív, rám pečate
   a monogram. NEPREPISUJE sa. Text, ktorý ju niesol, berie `--m-akcent-text`:
   tú istú farbu dotiahnutú na normu čitateľnosti (počíta ju svadba-render.js).
   Kým išla cez dolaďovanie aj samotná `--m-akcent`, dostalo 28 zo 40
   kombinácií štýlu a farebnej zostavy inú farbu, než si človek vybral. */
.sv { --m-tmava: #4a1f2b; --m-svetla: #f7eef0; --m-akcent: #c2455e; --m-akcent-text: #c2455e; }

/* Lietajúca vec v pozadí hlavičky.

   Je veľká, bledá a pomalá — má sa dať prehliadnuť. Keby bola výrazná,
   súperila by s menami, a mená sú to jediné, čo má byť na prvej obrazovke
   hlasné. Za kresbou nie je nič, takže nemôže prekryť žiadny text. */
.sv-let {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sv-let__kus {
  position: absolute;
  top: 7%; right: 5%;
  width: min(30%, 200px);
  height: auto;
  /* `stroke` je tu preto, že kolesá rušňa a okno búdky sú obruče
     (`fill="none"`). Kým sa tu nastavovala len výplň, kreslili sa
     neviditeľne. */
  fill: var(--m-akcent);
  stroke: var(--m-akcent);
  opacity: 0.15;
  animation: sv-plavba 19s ease-in-out infinite alternate;
}
/* Kresba sa už neplaví cez celú obrazovku. Predtým začínala na `left: -30%`
   a putovala 180vw doprava — v ktorýkoľvek okamih z nej bol vidieť len
   obrovský kus, nie tvar. Teraz stojí celá v rohu a iba sa nadýchne. */
@keyframes sv-plavba {
  from { transform: translate3d(0, 0, 0) rotate(-2.5deg); }
  to   { transform: translate3d(-12px, 10px, 0) rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  /* Kto má vypnuté animácie, kresbu vidí — len stojí. Vypnúť ju celkom
     by mu vzalo motív, ktorý si zaplatil. */
  .sv-let__kus { animation: none; }
}

/* ── hlavička ─────────────────────────────────────────────────────────── */

.sv-hlava {
  position: relative;   /* kotva pre lietajúcu kresbu */
  padding: clamp(56px, 12vh, 120px) clamp(20px, 6vw, 40px) clamp(40px, 8vh, 80px);
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--m-svetla) 0%, var(--paper) 68%);
  border-bottom: 1px solid var(--vlas);
}
.sv-hlava > *:not(.sv-let) { position: relative; z-index: 1; }

/* Hlavička si berie svetlú farbu MOTÍVU a tá je navrhnutá na krémový
   papier — na Nočnej svadbe z nej bola bledá hmla cez celý vrch stránky.
   Príznak `data-tmava` nastavuje svadba-render.js s komentárom „tmavý štýl
   potrebuje CSS vedieť, nie uhádnuť" — a doteraz ho NEČÍTALO NIČ. Toto je
   prvé pravidlo, ktoré ho naozaj používa. */
.sv[data-tmava="ano"] .sv-hlava {
  background: radial-gradient(120% 80% at 50% 0%, var(--paper2) 0%, var(--paper) 68%);
}

/* Pečať drží iniciály z mien — počítajú sa, nezadávajú.

   Rám je ozdoba a berie surovú vybranú farbu. INICIÁLY SÚ TEXT: 16,8 px
   nad menami novomanželov, prvá vec na stránke. Kým brali `--m-akcent`
   tiež, bolo 25 zo 40 kombinácií pod normou a najhoršie 1,90 : 1 (nočný
   štýl s čiernobielou zostavou) — na obrazovke z nich ostal fliačik.
   Vzniklo to vtedy, keď sa akcent prestal prepisovať: text sa vtedy prepol
   na `--m-akcent-text` na dvoch z troch miest a práve toto sa zabudlo. */
.sv-hlava__pecat {
  display: inline-grid; place-items: center;
  width: 74px; height: 74px;
  margin: 0 auto clamp(24px, 5vh, 40px);
  border: 1px solid var(--m-akcent);
  border-radius: 50%;
  color: var(--m-akcent-text);
  font-family: var(--serif);
  font-size: 1.05rem; letter-spacing: 0.08em;
}

.sv-hlava__nad {
  margin: 0 0 14px;
  color: var(--stone);
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
}

.sv-hlava__mena {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  /* Mená sú jediná vec, ktorá smie byť veľká. Spodná hranica drží dve
     dlhšie mená v riadku aj na 320 px displeji. */
  font-size: clamp(2.6rem, 13vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--m-tmava);
  text-wrap: balance;
}

.sv-hlava__kedy {
  margin: clamp(18px, 4vh, 30px) 0 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 4.4vw, 1.5rem);
  letter-spacing: 0.02em;
}
.sv-hlava__kde {
  margin: 6px 0 0;
  color: var(--stone);
  font-size: 0.95rem;
}

/* ── odpočet ──────────────────────────────────────────────────────────── */

.sv-odpocet {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(14px, 5vw, 34px);
  margin-top: clamp(28px, 6vh, 48px);
}
.sv-odpocet__kus { display: grid; gap: 4px; min-width: 62px; }
.sv-odpocet__cislo {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  line-height: 1;
  color: var(--m-tmava);
  /* aby čísla pri tikaní neposkakovali do strán */
  font-variant-numeric: tabular-nums;
}
.sv-odpocet__popis {
  color: var(--stone);
  font-size: 0.62rem; letter-spacing: 0.18em;
}
.sv-odpocet__dnes {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: var(--oxblood);
}

/* ── sekcie ───────────────────────────────────────────────────────────── */

.sv-sek {
  max-width: calc(var(--stlpec) + 2 * clamp(20px, 6vw, 40px));
  margin-inline: auto;
  padding: clamp(44px, 9vh, 86px) clamp(20px, 6vw, 40px);
  border-bottom: 1px solid var(--vlas);
}
.sv-sek:last-of-type { border-bottom: 0; }

.sv-sek__nad {
  margin: 0 0 10px;
  color: var(--stone);
  font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
}
.sv-sek__h {
  margin: 0 0 clamp(20px, 4vh, 32px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 6.5vw, 2.5rem);
  line-height: 1.1;
  color: var(--m-tmava);
}

.sv-text { margin: 0 0 1.1em; }
.sv-text:last-child { margin-bottom: 0; }

/* ── program ──────────────────────────────────────────────────────────── */

.sv-program { margin: 0; padding: 0; list-style: none; display: grid; }
.sv-program__bod {
  display: grid;
  grid-template-columns: 5.2em 1fr;
  gap: 0 18px;
  padding: 14px 0;
  border-top: 1px solid var(--vlas);
  align-items: baseline;
}
.sv-program__bod:last-child { border-bottom: 1px solid var(--vlas); }
.sv-program__cas {
  font-family: var(--serif);
  font-size: 1.15rem;
  /* 18 px textu — tu je 4,5 : 1 povinné, tak ide dotiahnutá podoba. */
  color: var(--m-akcent-text);
  font-variant-numeric: tabular-nums;
}
.sv-program__text { color: var(--charcoal); }

@media (max-width: 400px) {
  /* Na úzkom displeji sa čas nad text — dve úzke bunky sa lámu horšie
     než dva riadky pod sebou. */
  .sv-program__bod { grid-template-columns: 1fr; gap: 2px; }
}

/* ── miesto ───────────────────────────────────────────────────────────── */

.sv-miesto__nazov {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--oxblood);
}
.sv-akcie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.sv-btn {
  display: inline-flex; align-items: center;
  /* 48 px, nie 44 — na svadobnej stránke sú tlačidlá vzácne a každé je dôležité */
  min-height: 48px;
  padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--oxblood);
  font-family: var(--sans);
  font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.sv-btn:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }
.sv-btn:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; }

/* ── dobré vedieť ─────────────────────────────────────────────────────── */

.sv-dlazdice {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .sv-dlazdice { grid-template-columns: repeat(2, 1fr); }
}
.sv-dlazdice > * { min-width: 0; }

.sv-dlazdica {
  padding: 20px 22px;
  background: var(--ivory);
  border: 1px solid var(--vlas);
}
.sv-dlazdica__stitok {
  margin: 0 0 6px;
  color: var(--stone);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.sv-dlazdica__hodnota {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.25;
  color: var(--oxblood);
}
.sv-dlazdica__popis {
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: var(--charcoal);
}

/* ── otázky ───────────────────────────────────────────────────────────── */

.sv-otazka { border-top: 1px solid var(--vlas); }
.sv-otazka:last-of-type { border-bottom: 1px solid var(--vlas); }
.sv-otazka > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  /* 52 px terč — otázky sa otvárajú prstom a sú tesne pod sebou */
  min-height: 52px;
  padding: 14px 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--oxblood);
}
.sv-otazka > summary::-webkit-details-marker { display: none; }
.sv-otazka > summary::after {
  content: '+';
  margin-left: auto;
  color: var(--gold);
  font-size: 1.4rem; line-height: 1;
}
.sv-otazka[open] > summary::after { content: '–'; }
.sv-otazka > summary:focus-visible { outline: 3px solid var(--oxblood); outline-offset: -3px; }
.sv-otazka > .sv-text { padding: 0 0 18px; }

/* ── potvrdenie účasti ────────────────────────────────────────────────── */

.sv-rsvp__do {
  margin: -8px 0 22px;
  /* Termín na potvrdenie účasti je ÚDAJ, nie ozdoba — hosť ho musí prečítať.
     Ozdobná zlatá mala na papieri 3,2 : 1; tá istá logika ako pri vstupnej
     animácii, kde sa výzva takisto nesmie brať z ozdobnej farby. Tlmená
     farba je prepočítaná na 4,8 : 1 a k štýlu patrí rovnako. */
  color: var(--stone);
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em;
}
.sv-rsvp { margin-top: 8px; }

/* ── potvrdenie účasti vo svadobnom jazyku ──────────────────────────────
   Formulár stavia js/rsvp.js, ktorý je spoločný pre celý web, a jeho štýly
   sú v css/invite.css — čiže plagátové: tvrdé čierne rámy, modré bloky,
   Arial Black veľkými, posunuté tiene. Vnútri tichej svadobnej stránky to
   vyzeralo, ako keby tam niekto omylom prilepil kus inej stránky. Presne
   to, čomu sa hlavička tohto súboru snaží vyhnúť: „kto si kupuje svadobný
   web, nechce krik."

   Prepisuje sa len vzhľad. Značky, mená polí ani správanie sa nemenia,
   takže formulár ostáva jeden a opravy v ňom platia pre obe stránky. */
/* ── ROZLOŽENIE formulára, nie iba jeho šat ────────────────────────────────

   Toto tu chýbalo a bola to najdrahšia chyba, akú porota našla: dve
   porotkyne si vyrobili skutočný svadobný web, pozreli sa naň ako hosť a
   OBE povedali nie. „To je jediná vec, ktorú 120 ľudí naozaj otvorí — a
   vyzerá to ako pokazená stránka."

   Príčina: `nasa-svadba.html` nenačítava `css/invite.css`, a práve tam
   žije `.field { display: grid }`. Bez nej sa popisky vysypali VEDĽA
   políčok — namerané na 390 px: „Počet osôb" na x 31–119 a políčko na
   x 124–223, teda vedľa seba na jednom riadku, hneď za ním nápis „E-mail".
   Políčka mali 230 px z dostupných 327.

   Svadobná stránka si preto rozloženie nesie sama. Sú to tie isté hodnoty
   ako v `invite.css`; šat (farby, rámy, písmo) prepisuje kód nižšie.
   Kto sem raz pridá pole navyše, nemusí riešiť, ktorý súbor je načítaný. */
.sv-rsvp .field { display: grid; gap: 6px; margin-bottom: 16px; text-align: left; }
.sv-rsvp .field input,
.sv-rsvp .field select,
.sv-rsvp .field textarea {
  width: 100%;
  /* Nikdy pod 16 px — Safari na iPhone si pri ťuknutí do menšieho písma
     priblíži celú stránku a späť ju neoddiali. Rovnaký dôvod ako
     v invite.css. */
  font: inherit;
  font-size: 1rem;
}
.sv-rsvp .field textarea { resize: vertical; min-height: 84px; }
.sv-rsvp .choice { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-rsvp .choice label { flex: 1 1 120px; position: relative; text-align: center; cursor: pointer; }
.sv-rsvp .choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }

.sv-rsvp .field > span {
  font-family: var(--sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  /* Farba MUSÍ ísť zo štýlu. Kým tu bola natvrdo tmavá zlatá `#7a5f22`,
     na Nočnej svadbe mali menovky „Meno", „Odpoveď" či „Počet osôb"
     pomer 3,00 : 1 — a je to formulár, ktorý otvorí každý jeden hosť.

     Odmerané na všetkých piatich štýloch (na podklade `--paper2`):
       zlatá #7a5f22   4,89 · 4,44 · 2,51 · 5,18 · 4,65
       --stone         4,80 · 4,81 · 5,03 · 4,82 · 4,82
     Na papieri a minimale je to o kúsok horšie, na hline a noci oveľa
     lepšie — a hlina bola so zlatou POD normou, čo nikto nevidel, lebo
     sa meral len papier. Najhorší prípad išiel z 2,51 na 4,80. */
  color: var(--stone);
}

.sv-rsvp input[type="text"],
.sv-rsvp input[type="email"],
.sv-rsvp input[type="number"],
.sv-rsvp textarea {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--vlas);
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--sans); font-size: 1rem;
  color: var(--charcoal);
}
.sv-rsvp input::placeholder,
.sv-rsvp textarea::placeholder { color: var(--stone); }
.sv-rsvp input:focus-visible,
.sv-rsvp textarea:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 1px;
  border-color: var(--oxblood);
}

/* Voľby „Prídem / Neprídem / Ešte neviem" — pilulky, nie plagátové bloky. */
.sv-rsvp .choice label {
  padding: 11px 18px;
  background: var(--paper);
  border: 1px solid var(--vlas);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--sans); font-size: 0.94rem; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--charcoal);
}
.sv-rsvp .choice label:has(input:checked) {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--paper);
  /* invite.css sem pri zaškrtnutí vracia plagátový tieň 4px 4px — bez tohto
     riadku ostal na jedinej pilulke a vyzeral ako chyba vykreslenia. */
  box-shadow: none;
}

.sv-rsvp button[type="submit"] {
  padding: 14px 30px;
  background: var(--oxblood);
  border: 1px solid var(--oxblood);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--sans); font-size: 0.94rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: none;
  color: var(--paper);
}
.sv-rsvp button[type="submit"]:hover {
  background: var(--oxblood-deep);
  transform: none;
  box-shadow: none;
}

.sv-rsvp .rsvp__pravne { color: var(--stone); }
/* Odkaz „ako s nimi zaobchádzame" si bez tohto riadku vzal predvolenú modrú
   prehliadača a na tmavom štýle mal 1,92 : 1. `invite.css` má to isté
   pravidlo na riadku 1032, ale svadobná stránka ho NENAČÍTAVA — to je tá
   istá mína, kvôli ktorej sa tu vysypali popisky vedľa políčok. */
.sv-rsvp .rsvp__pravne a { color: inherit; text-underline-offset: 2px; }
.sv-rsvp .rsvp__done strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
/* Kartička po potvrdení účasti. Svadobná stránka nenačítava invite.css, takže
   si paletu aj písmo musí nastaviť sama — tá istá mína ako pri rozložení
   formulára, kvôli ktorej sa popisky vysypali vedľa políčok. */
.sv-rsvp .rsvpKarta { --karta-papier: var(--paper); --karta-atrament: var(--charcoal); }
.sv-rsvp .rsvpKarta__meno { font-family: var(--serif); font-weight: 400; }
.sv-rsvp .rsvpKarta__hlava,
.sv-rsvp .rsvpKarta__cislo { font-family: var(--sans, inherit); }

/* ── päta ─────────────────────────────────────────────────────────────── */

.sv-pata {
  padding: clamp(44px, 9vh, 80px) clamp(20px, 6vw, 40px) clamp(56px, 10vh, 96px);
  text-align: center;
  background: var(--ivory);
  border-top: 1px solid var(--vlas);
}
.sv-pata .sv-text {
  max-width: var(--stlpec);
  margin-inline: auto;
  color: var(--stone);
  font-family: var(--serif);
  font-size: 1.15rem;
}
.sv-pata__pecat {
  margin: 26px 0 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.1rem; letter-spacing: 0.1em;
}

/* ── galéria ──────────────────────────────────────────────────────────
   Mriežka, ktorá sa prispôsobí počtu fotiek. Štvorcový výrez preto, že
   svadobné fotky prídu na výšku aj na šírku a striedanie by rozbilo rytmus;
   celá fotka sa ukáže po kliknutí. */
.sv-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.sv-galeria__kus {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper2);
  border: 1px solid var(--vlas);
}
.sv-galeria__kus img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}
.sv-galeria__kus:hover img { transform: scale(1.04); }
/* Zaostrenie musí byť VIDIEŤ — inak sa po galérii klávesnicou pohybuje naslepo. */
.sv-galeria__kus:focus-visible { outline: 3px solid var(--m-akcent-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sv-galeria__kus img { transition: none; }
  .sv-galeria__kus:hover img { transform: none; }
}

/* Vstupenky na svadobnej stránke. Blok je ten istý ako pri pozvánke, ale
   rám s tieňom je tu cudzí prvok — svadobná stránka je z papiera a nemá
   ani jeden hrubý čierny rám. Prekresľuje sa preto na tichú kartu v palete
   štýlu; obsah aj poradie ostávajú rovnaké, mení sa len šat. */
.sv-sek .vstupenky {
  max-width: none;
  margin: 0 0 18px;
  /* Mieša sa s `--paper`, NIE s bielou.

     Pri bielej vyšiel v tmavom štýle „noc" z tmavého `--paper2` stredne sivý
     podklad rgb(101,103,110), na ktorom má tlmený text `--stone` kontrast
     1,88 : 1 — teda pod normou, a to celý blok vrátane kontaktu na
     predávajúceho a poučenia o odstúpení. So `--paper` ostane podklad
     v palete štýlu a text na ňom sedí. Zmerané vo všetkých piatich štýloch,
     `nastroje/test-kontrast.cjs`. */
  background: color-mix(in srgb, var(--paper2) 70%, var(--paper));
  border: 1px solid var(--vlas);
  box-shadow: none;
  border-radius: 4px;
}
.sv-sek .vstupenky__nadpis {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sv-sek .vstupenky__typ {
  border: 1px solid var(--vlas);
  background: transparent;
}
.sv-sek .vstupenky__popis,
.sv-sek .vstupenky__volne,
.sv-sek .vstupenky__predajca,
.sv-sek .vstupenky__kontakt,
.sv-sek .vstupenky__podmienky p,
.sv-sek .vstupenky__pravne { color: var(--stone); }
.sv-sek .vstupenky__kontakt a { color: inherit; }
.sv-sek .vstupenky__pocet select,
.sv-sek .vstupenky__pole input { border: 1px solid var(--vlas); }
.sv-sek .vstupenky__kupit {
  font-family: var(--serif); text-transform: none; letter-spacing: 0.04em;
  background: var(--charcoal); color: var(--paper);
  border: 1px solid var(--charcoal); box-shadow: none; border-radius: 3px;
}