/* ==========================================================================
   epozvanka.sk — samotná pozvánka a jej dvadsaťštyri dizajnov
   Kostra je spoločná, každá téma prepisuje tokeny + vlastnú dekoračnú vrstvu.
   ========================================================================== */

.invite {
  --paper: #ffffff;
  --on-paper: #0b0b14;
  --accent: #ff3d9a;
  --accent-2: #1b2cc1;
  /* Akcent v TEXTE a čas v programe majú vlastné tokeny.

     --accent a --accent-2 sú dekoračné: stuhy, linky, rámy, bodky. Tam sa
     smú vyberať okom. Lenže tie isté farby niesli aj drobný text — nadnadpis
     má 12 px a časy programu 15 px — a na svetlom papieri padali pod normu
     4,5 : 1. Namerané: ružová klasika 2,95 : 1, baby blue 1,98 : 1,
     zlatá linka 2,90 : 1.

     Preto sa text farbí cez --accent-text a --cas. Kým sa nenastavia, sú to
     pôvodné akcenty, takže dizajny, ktoré prechádzajú, ostávajú nedotknuté;
     prepisujú sa len tie, kde meranie ukázalo problém. */
  --accent-text: var(--accent);
  --cas: var(--accent-2);
  --muted: color-mix(in srgb, var(--on-paper) 62%, var(--paper));
  --line: color-mix(in srgb, var(--on-paper) 22%, var(--paper));
  --edge: 4px solid var(--on-paper);
  --shadow: 12px 12px 0 var(--on-paper);
  --radius: 0;
  --disp: var(--font-display);
  --disp-size: clamp(2.1rem, 8.4vw, 3.1rem);
  --disp-tracking: -0.02em;
  --disp-transform: uppercase;

  --pad-x: clamp(22px, 5vw, 38px);
  --pad-t: clamp(30px, 6vw, 46px);
  --pad-b: clamp(34px, 6vw, 48px);

  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  background: var(--paper);
  color: var(--on-paper);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  overflow: hidden;
}

.invite__inner > * { min-width: 0; max-width: 100%; }

.invite__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* text musí ležať nad dekoračnou vrstvou aj keby téma zmenila stacking context */
.invite__inner { position: relative; display: grid; gap: 16px; }

.invite__kicker {
  margin: 0;
  /* 0,74rem = 11,84 px pri rozstupe až 4 px medzi písmenami. */
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.invite__title {
  margin: 0;
  font-family: var(--disp);
  /* --disp-fit dopočíta JS, keď sa dlhý text nezmestí; bez neho platí téma */
  font-size: var(--disp-fit, var(--disp-size));
  line-height: 0.94;
  letter-spacing: var(--disp-tracking);
  text-transform: var(--disp-transform);
  text-wrap: balance;
  /* Delenie slov vo veľkom nadpise vyzerá zle — „Test celej cesty" sa lámalo
     na „TEST CE-LEJ CESTY". Zalomíme teda medzi slovami a zmenšovanie písma
     necháme na doladNadpis(). Vnútri slova lámeme len vtedy, keď je jediné
     slovo dlhšie než celá karta a inak by pretieklo von. */
  overflow-wrap: break-word;
  hyphens: manual;
}

.invite__sub { margin: -6px 0 0; font-size: 0.98rem; color: var(--muted); overflow-wrap: anywhere; }

.invite__rule { height: 3px; width: 84px; margin: 6px auto; background: var(--accent); border: 0; }

.invite__when {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px;
  overflow-wrap: anywhere;
  font-family: var(--disp);
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.invite__when i { font-style: normal; color: var(--accent-2); }

.invite__place { margin: 0; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.invite__place small { display: block; margin-top: 4px; font-size: 0.86rem; font-weight: 500; color: var(--muted); }

.invite__msg { margin: 6px 0 0; font-size: 0.97rem; line-height: 1.65; overflow-wrap: anywhere; hyphens: auto; }

.invite__program { display: grid; gap: 8px; margin: 8px 0 0; text-align: left; }
.invite__program li {
  display: grid; grid-template-columns: minmax(0, 4.4em) minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.invite__program li:last-child { border-bottom: 0; padding-bottom: 0; }
.invite__program b { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--cas); overflow-wrap: anywhere; }

.invite__dress {
  margin: 4px 0 0;
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}

.invite:empty { display: none; }

/* ── 1. Ružová klasika — krémový papier, stuha, dvojlinka ──────────────── */

.invite[data-theme="ruzova-klasika"] {
  --paper: #fff1dc;
  --accent: #ff3d9a;
  /* Ružová stuha ostáva ružová, len text sa stmaví: 2,95 → 5,31 : 1. */
  --accent-text: #c2185b;
  --accent-2: #1b2cc1;
  --disp-size: clamp(2.2rem, 9vw, 3.2rem);
}
.invite[data-theme="ruzova-klasika"] .invite__decor {
  background:
    linear-gradient(var(--accent) 0 0) top / 100% 18px no-repeat,
    linear-gradient(var(--on-paper) 0 0) 0 18px / 100% 4px no-repeat;
}
.invite[data-theme="ruzova-klasika"] .invite__inner { padding-top: 18px; }
.invite[data-theme="ruzova-klasika"] .invite__title { color: var(--accent-2); text-shadow: 3px 3px 0 var(--accent); }

/* ── 2. Konfety — žltý podklad, rozsypané papieriky ────────────────────── */

.invite[data-theme="konfety"] {
  --paper: #ffd400;
  --accent: #ff3d9a;
  --accent-2: #1b2cc1;
  --disp-size: clamp(2.4rem, 10vw, 3.6rem);
}
.invite[data-theme="konfety"] .invite__decor {
  background-image:
    linear-gradient(38deg, var(--accent) 50%, transparent 0),
    linear-gradient(-24deg, var(--accent-2) 50%, transparent 0),
    linear-gradient(70deg, #ffffff 50%, transparent 0),
    linear-gradient(-52deg, var(--on-paper) 50%, transparent 0),
    linear-gradient(15deg, var(--accent) 50%, transparent 0),
    linear-gradient(-70deg, var(--accent-2) 50%, transparent 0);
  background-size: 16px 10px, 13px 9px, 18px 11px, 12px 8px, 15px 10px, 14px 9px;
  /* Konfety patria do okrajov, nie na text.

     Pri pôvodných polohách padali kúsky priamo na riadky: modrý pred slovo
     „Darčeky", čierny cez „22:00 DJ" a biely na „DRESS CODE". Ležia síce
     POD textom (decor má z-index -1), ale opticky sa s ním bili — grafička
     v porote to našla ako prvú vec. Nové polohy držia kúsky v rohoch a pri
     okrajoch, teda v odsadení kartičky, kde text nie je. */
  background-position: 3% 3%, 95% 5%, 4% 96%, 96% 94%, 97% 26%, 2% 74%;
  background-repeat: no-repeat;
}
/* Ružová na žltej mala 2,30 : 1 pri norme 3 pre veľké písmo. Tmavšia
   ružová dá 4,13 : 1 a v konfetách sa farebne nestratí. */
.invite[data-theme="konfety"] .invite__title { color: #c2185b; text-shadow: 4px 4px 0 var(--on-paper); }
.invite[data-theme="konfety"] .invite__kicker { color: var(--on-paper); }
.invite[data-theme="konfety"] .invite__sub { --muted: color-mix(in srgb, var(--on-paper) 70%, var(--paper)); }

/* ── 3. Neon Deck — tmavý technický panel ──────────────────────────────── */

.invite[data-theme="neon-deck"] {
  --paper: #0a1152;
  --on-paper: #eaf0ff;
  --accent: #3d5bff;
  --accent-2: #ff3d9a;
  /* Modrá na tmavomodrej mala 3,41 : 1. Svetlejší odtieň dá 7,36 : 1. */
  --accent-text: #8fa4ff;
  --line: rgba(234, 240, 255, 0.18);
  --muted: rgba(234, 240, 255, 0.66);
  --edge: 2px solid var(--accent);
  --shadow: 0 0 0 1px rgba(61, 91, 255, 0.5), 0 24px 60px rgba(61, 91, 255, 0.28);
  --radius: 4px;
  --disp: var(--font-mono);
  --disp-size: clamp(1.7rem, 6.6vw, 2.4rem);
  --disp-tracking: -0.01em;
  text-align: left;
}
.invite[data-theme="neon-deck"] .invite__decor {
  background-image:
    linear-gradient(rgba(61, 91, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 91, 255, 0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
}
.invite[data-theme="neon-deck"] .invite__rule { margin: 6px 0; width: 100%; height: 1px; background: var(--line); }
.invite[data-theme="neon-deck"] .invite__when { justify-content: flex-start; font-family: var(--font-mono); }
.invite[data-theme="neon-deck"] .invite__title { text-shadow: 0 0 22px rgba(61, 91, 255, 0.7); }
.invite[data-theme="neon-deck"] .invite__dress { color: var(--accent-2); }

/* ── 4. Baby Blue — mäkká, bez tvrdých hrán ────────────────────────────── */

.invite[data-theme="baby-blue"] {
  --paper: #e8f3ff;
  --accent: #3d5bff;
  --accent-2: #ff86c0;
  /* Pastelová ružová je pekná na ozdoby, ale časy programu na nej mali
     1,98 : 1 — najhorší nameraný text v celej sade. */
  --cas: #c2185b;
  --edge: 0;
  --shadow: 0 18px 44px rgba(27, 44, 193, 0.16);
  --radius: 26px;
  --disp: var(--font-body);
  --disp-size: clamp(2rem, 8vw, 2.8rem);
  --disp-transform: none;
  --disp-tracking: -0.03em;
}
.invite[data-theme="baby-blue"] .invite__decor {
  background:
    radial-gradient(46% 30% at 18% 6%, #ffffff 0 60%, transparent 61%),
    radial-gradient(38% 24% at 84% 14%, #ffffff 0 60%, transparent 61%),
    radial-gradient(60% 30% at 50% 104%, rgba(255, 134, 192, 0.4) 0 60%, transparent 61%);
}
.invite[data-theme="baby-blue"] .invite__title { font-weight: 800; color: var(--accent); }
.invite[data-theme="baby-blue"] .invite__rule { width: 46px; height: 6px; border-radius: 999px; background: var(--accent-2); }
.invite[data-theme="baby-blue"] .invite__program li { border-bottom-color: rgba(27, 44, 193, 0.14); }

/* ── 5. Hot Pink — celoplošná, nadpis našikmo ──────────────────────────── */

.invite[data-theme="hot-pink"] {
  --paper: #ff3d9a;
  --on-paper: #0b0b14;
  --accent: #ffd400;
  --accent-2: #ffffff;
  /* Žltá na ružovej mala 2,30 : 1, priesvitný atrament 3,86 : 1 a biele
     časy 3,29 : 1. Plný atrament dá na tejto ružovej 5,96 : 1 — papier
     sa teda meniť nemusí, stačí prestať text zosvetľovať. */
  --accent-text: var(--on-paper);
  --cas: var(--on-paper);
  --muted: #0b0b14;
  --line: rgba(11, 11, 20, 0.24);
  --edge: 5px solid var(--on-paper);
  --shadow: 14px 14px 0 var(--on-paper);
  --disp-size: clamp(2.2rem, 9.4vw, 3.3rem);
}
.invite[data-theme="hot-pink"] .invite__decor {
  background-image: radial-gradient(rgba(11, 11, 20, 0.26) 26%, transparent 27%);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(200deg, #000 8%, transparent 58%);
  mask-image: linear-gradient(200deg, #000 8%, transparent 58%);
}
.invite[data-theme="hot-pink"] .invite__title {
  display: inline-block;
  transform: rotate(-3.5deg);
  color: #ffffff;
  text-shadow: 4px 4px 0 var(--on-paper);
}
.invite[data-theme="hot-pink"] .invite__kicker { color: var(--accent-text); }
.invite[data-theme="hot-pink"] .invite__when i { color: var(--accent-2); }
.invite[data-theme="hot-pink"] .invite__program b { color: var(--cas); }

/* ── 6. Retro Pop — sunburst a halftone ────────────────────────────────── */

.invite[data-theme="retro-pop"] {
  --paper: #1b2cc1;
  --on-paper: #ffffff;
  --accent: #ffd400;
  --accent-2: #ff3d9a;
  --muted: rgba(255, 255, 255, 0.76);
  --line: rgba(255, 255, 255, 0.24);
  --edge: 5px solid #0b0b14;
  --shadow: 14px 14px 0 #0b0b14;
  --disp-size: clamp(2.2rem, 9.2vw, 3.3rem);
}
.invite[data-theme="retro-pop"] .invite__decor {
  background:
    radial-gradient(#ff3d9a 26%, transparent 27%) 0 0 / 15px 15px,
    repeating-conic-gradient(from 0deg at 50% 34%, rgba(255, 255, 255, 0.13) 0deg 7deg, transparent 7deg 15deg);
  /* raster necháme silný hore pri nadpise a stlmíme ho tam, kde beží bežný text */
  -webkit-mask-image: radial-gradient(130% 74% at 50% 0%, #000 26%, rgba(0, 0, 0, 0.28) 66%, transparent 100%);
  mask-image: radial-gradient(130% 74% at 50% 0%, #000 26%, rgba(0, 0, 0, 0.28) 66%, transparent 100%);
}
.invite[data-theme="retro-pop"] .invite__title { color: #ffffff; text-shadow: 4px 4px 0 #0b0b14, 8px 8px 0 var(--accent-2); }
.invite[data-theme="retro-pop"] .invite__when i { color: var(--accent); }
.invite[data-theme="retro-pop"] .invite__program b { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   Formálna rada — tichá typografia, vlasové linky, žiadne tvrdé tiene
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Zlatá linka — slonovina a zlatá dvojlinka ─────────────────────────── */

.invite[data-theme="zlata-linka"] {
  --paper: #fbf7ef;
  --on-paper: #2c2a26;
  --accent: #b08d4f;
  --accent-2: #8a6f3d;
  /* Zlatá drží ako linka a rám, ale ako text mala 2,90 : 1; sivá mala
     4,38 : 1, čo je tesne pod normou. Obe o odtieň tmavšie. */
  --cas: #8a6d2f;
  --muted: #6b655c;
  --line: rgba(44, 42, 38, 0.16);
  --edge: 1px solid var(--accent);
  --shadow: 0 14px 40px rgba(44, 42, 38, 0.12);
  --radius: 0;
  --disp: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --disp-size: clamp(1.9rem, 7vw, 2.7rem);
  --disp-tracking: 0.02em;
  --disp-transform: none;
}
.invite[data-theme="zlata-linka"] .invite__decor {
  border: 1px solid var(--accent);
  margin: 7px;
  inset: 0;
  position: absolute;
}
.invite[data-theme="zlata-linka"] .invite__kicker { font-weight: 600; letter-spacing: 0.26em; color: var(--muted); }
.invite[data-theme="zlata-linka"] .invite__rule { width: 46px; height: 1px; background: var(--accent); }
.invite[data-theme="zlata-linka"] .invite__when {
  font-family: var(--disp); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem;
}
.invite[data-theme="zlata-linka"] .invite__when i { color: var(--accent); }
.invite[data-theme="zlata-linka"] .invite__program b { color: var(--cas); font-weight: 600; }
.invite[data-theme="zlata-linka"] .invite__dress { letter-spacing: 0.2em; }

/* ── Čierna kravata — grafit, slonovina, vlasová zlatá ─────────────────── */

.invite[data-theme="cierna-kravata"] {
  --paper: #1c1b19;
  --on-paper: #f4efe6;
  --accent: #c9a227;
  --accent-2: #f4efe6;
  --muted: rgba(244, 239, 230, 0.66);
  --line: rgba(244, 239, 230, 0.18);
  --edge: 1px solid rgba(201, 162, 39, 0.55);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --radius: 0;
  --disp: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --disp-size: clamp(1.9rem, 7vw, 2.7rem);
  --disp-tracking: 0.03em;
  --disp-transform: uppercase;
}
.invite[data-theme="cierna-kravata"] .invite__decor {
  background: radial-gradient(120% 80% at 50% 0%, rgba(201, 162, 39, 0.12) 0%, transparent 62%);
}
.invite[data-theme="cierna-kravata"] .invite__kicker { letter-spacing: 0.28em; color: var(--accent); font-weight: 500; }
.invite[data-theme="cierna-kravata"] .invite__rule { width: 40px; height: 1px; background: var(--accent); }
.invite[data-theme="cierna-kravata"] .invite__when {
  font-family: var(--disp); font-weight: 400; letter-spacing: 0.14em; font-size: 0.95rem;
}
.invite[data-theme="cierna-kravata"] .invite__program b { color: var(--accent); font-weight: 600; }

/* ── Šalvia — zeleň, krém, mäkké okraje ────────────────────────────────── */

.invite[data-theme="salvia"] {
  --paper: #f2f0e6;
  --on-paper: #3f4a39;
  --accent: #7d8f6f;
  --accent-2: #5c6b50;
  /* Podnadpis, adresa a dress code mali 3,59 : 1. */
  --muted: #5d6455;
  --line: rgba(63, 74, 57, 0.16);
  --edge: 0;
  --shadow: 0 16px 40px rgba(63, 74, 57, 0.14);
  --radius: 14px;
  --disp: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --disp-size: clamp(1.95rem, 7.4vw, 2.8rem);
  --disp-tracking: -0.005em;
  --disp-transform: none;
}
.invite[data-theme="salvia"] .invite__decor {
  background:
    radial-gradient(60% 34% at 12% 4%, rgba(125, 143, 111, 0.24) 0 60%, transparent 61%),
    radial-gradient(54% 30% at 92% 96%, rgba(125, 143, 111, 0.2) 0 60%, transparent 61%);
}
.invite[data-theme="salvia"] .invite__kicker { letter-spacing: 0.2em; color: var(--accent-2); font-weight: 600; }
.invite[data-theme="salvia"] .invite__rule { width: 34px; height: 2px; border-radius: 999px; background: var(--accent); }
.invite[data-theme="salvia"] .invite__when { font-family: var(--disp); font-weight: 500; text-transform: none; letter-spacing: 0.02em; }
.invite[data-theme="salvia"] .invite__program b { color: var(--accent-2); }

/* ── Mramor a zlato — kamenné žilkovanie a zlatý oblúk ─────────────────── */

.invite[data-theme="mramor-zlato"] {
  --paper: #f6f4f0;
  --on-paper: #2b2724;          /* kontrast na papieri 13,48 : 1 */
  --accent: #8a6a1e;
  --accent-2: #7a5e18;
  --muted: #6b645d;
  --line: rgba(43, 39, 36, 0.14);
  --edge: 1px solid rgba(138, 106, 30, 0.55);
  --shadow: 0 18px 48px rgba(43, 39, 36, 0.16);
  --radius: 2px;
  --disp: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --disp-size: clamp(1.7rem, 6.2vw, 2.45rem);
  --disp-tracking: 0.1em;
  --disp-transform: uppercase;
}
.invite[data-theme="mramor-zlato"] .invite__decor {
  background:
    radial-gradient(120% 44% at 50% -8%, rgba(138, 106, 30, 0.16) 0 62%, transparent 63%),
    /* tri sady vlasových šikmých pruhov v rôznych uhloch dajú kamenné žilkovanie */
    repeating-linear-gradient(64deg, rgba(43, 39, 36, 0.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-38deg, rgba(43, 39, 36, 0.05) 0 1px, transparent 1px 41px),
    repeating-linear-gradient(12deg, rgba(138, 106, 30, 0.1) 0 1px, transparent 1px 63px),
    linear-gradient(158deg, #ffffff 0%, #efece5 56%, #f8f6f2 100%);
}
.invite[data-theme="mramor-zlato"] .invite__kicker { font-weight: 500; letter-spacing: 0.3em; }
.invite[data-theme="mramor-zlato"] .invite__rule {
  width: 130px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.invite[data-theme="mramor-zlato"] .invite__when {
  font-family: var(--disp); font-weight: 400; font-size: 0.94rem; letter-spacing: 0.16em;
}
.invite[data-theme="mramor-zlato"] .invite__program b { color: var(--accent); font-weight: 600; }
.invite[data-theme="mramor-zlato"] .invite__dress { letter-spacing: 0.22em; }

/* ── Smaragd a krém — dvojitý zlatý rám a damaškový raster ─────────────── */

.invite[data-theme="smaragd-krem"] {
  --paper: #0f3b2e;
  --on-paper: #f3ead7;          /* kontrast na papieri 10,42 : 1 */
  --accent: #d9b45b;
  --accent-2: #f3ead7;
  --muted: rgba(243, 234, 215, 0.72);
  --line: rgba(243, 234, 215, 0.2);
  --edge: 3px double rgba(217, 180, 91, 0.7);
  --shadow: 0 22px 52px rgba(8, 32, 24, 0.5);
  --radius: 0;
  --disp: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --disp-size: clamp(1.55rem, 5.6vw, 2.15rem);
  --disp-tracking: 0.16em;
  --disp-transform: uppercase;
}
.invite[data-theme="smaragd-krem"] .invite__decor {
  background:
    repeating-linear-gradient(45deg, rgba(243, 234, 215, 0.05) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(-45deg, rgba(243, 234, 215, 0.05) 0 2px, transparent 2px 15px),
    radial-gradient(90% 66% at 50% 0%, rgba(217, 180, 91, 0.16) 0%, transparent 62%),
    radial-gradient(130% 100% at 50% 124%, rgba(0, 0, 0, 0.4) 0%, transparent 60%);
}
.invite[data-theme="smaragd-krem"] .invite__kicker { font-weight: 500; letter-spacing: 0.3em; }
.invite[data-theme="smaragd-krem"] .invite__rule { width: 64px; height: 1px; background: var(--accent); }
.invite[data-theme="smaragd-krem"] .invite__when {
  font-family: var(--disp); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.16em;
}
.invite[data-theme="smaragd-krem"] .invite__when i { color: var(--accent); }
.invite[data-theme="smaragd-krem"] .invite__program b { color: var(--accent); font-weight: 600; }

/* ── Terakota a piesok — oblúkový papier a terakotové slnko ────────────── */

.invite[data-theme="terakota"] {
  --paper: #f4e7d8;
  --on-paper: #4a2318;          /* kontrast na papieri 11,18 : 1 */
  --accent: #a8442a;
  --accent-2: #7b4a2c;
  --muted: #7a604f;
  --line: rgba(74, 35, 24, 0.16);
  --edge: 0;
  --shadow: 0 20px 46px rgba(74, 35, 24, 0.18);
  --radius: 190px 190px 16px 16px;
  --pad-t: clamp(72px, 16vw, 106px);  /* oblúk hore ukrojí z plochy, text potrebuje odstup */
  --disp: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --disp-size: clamp(1.95rem, 7.4vw, 2.8rem);
  --disp-tracking: -0.005em;
  --disp-transform: none;
}
.invite[data-theme="terakota"] .invite__decor {
  background:
    radial-gradient(circle at 50% 12%, transparent 0 88px, rgba(168, 68, 42, 0.16) 88px 90px, transparent 91px),
    radial-gradient(circle at 50% 12%, transparent 0 118px, rgba(168, 68, 42, 0.12) 118px 120px, transparent 121px),
    radial-gradient(circle at 50% 12%, rgba(168, 68, 42, 0.14) 0 58px, transparent 59px),
    linear-gradient(180deg, #f9f0e5 0%, #f2e2d0 62%, #eddac4 100%);
}
.invite[data-theme="terakota"] .invite__kicker { letter-spacing: 0.18em; color: var(--accent); }
.invite[data-theme="terakota"] .invite__rule { width: 26px; height: 3px; border-radius: 999px; background: var(--accent); }
.invite[data-theme="terakota"] .invite__when {
  font-family: var(--disp); font-weight: 500; text-transform: none; letter-spacing: 0.01em;
}
.invite[data-theme="terakota"] .invite__program b { color: var(--accent-2); font-weight: 700; }

/* ── Art deco — vejáre, chevrony a extrémne prestrkaný serif ───────────── */

.invite[data-theme="art-deco"] {
  --paper: #12161f;
  --on-paper: #ece3cf;          /* kontrast na papieri 14,18 : 1 */
  --accent: #c8a24a;
  --accent-2: #9fb6c6;
  --muted: rgba(236, 227, 207, 0.68);
  --line: rgba(200, 162, 74, 0.3);
  --edge: 2px solid var(--accent);
  --shadow: 0 0 0 4px #12161f, 0 0 0 5px rgba(200, 162, 74, 0.5), 0 24px 54px rgba(0, 0, 0, 0.5);
  --radius: 0;
  --disp: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --disp-size: clamp(1.4rem, 5vw, 1.95rem);
  --disp-tracking: 0.3em;
  --disp-transform: uppercase;
}
.invite[data-theme="art-deco"] .invite__decor {
  background:
    repeating-conic-gradient(from 200deg at 50% 0%, rgba(200, 162, 74, 0.2) 0deg 3deg, transparent 3deg 10deg),
    repeating-conic-gradient(from 20deg at 50% 100%, rgba(200, 162, 74, 0.14) 0deg 3deg, transparent 3deg 10deg),
    repeating-linear-gradient(90deg, rgba(159, 182, 198, 0.09) 0 1px, transparent 1px 13px);
  /* vejáre nechávame silné pri hranách a stlmíme ich pod behom textu */
  -webkit-mask-image: linear-gradient(#000 0 20%, rgba(0, 0, 0, 0.22) 40% 62%, #000 82% 100%);
  mask-image: linear-gradient(#000 0 20%, rgba(0, 0, 0, 0.22) 40% 62%, #000 82% 100%);
}
.invite[data-theme="art-deco"] .invite__kicker { font-weight: 500; letter-spacing: 0.34em; }
.invite[data-theme="art-deco"] .invite__rule {
  width: 96px; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0 30%, transparent 30% 38%, var(--accent) 38% 62%, transparent 62% 70%, var(--accent) 70%);
}
.invite[data-theme="art-deco"] .invite__when {
  font-family: var(--disp); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.24em;
}
.invite[data-theme="art-deco"] .invite__program b { color: var(--accent); font-weight: 600; }
.invite[data-theme="art-deco"] .invite__dress { letter-spacing: 0.24em; color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   Divoká rada — hlučná typografia, tvrdé rámy, hustá dekorácia
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Neón 90s — dvojrám v zelenej a ružovej, memphis kľukatice ─────────── */

.invite[data-theme="neon-90"] {
  --paper: #120a2e;
  --on-paper: #efe6ff;          /* kontrast na papieri 15,73 : 1 */
  --accent: #39ff88;
  --accent-2: #ff2fb9;
  --muted: rgba(239, 230, 255, 0.74);
  --line: rgba(239, 230, 255, 0.22);
  --edge: 3px solid var(--accent-2);
  --shadow: 0 0 0 6px #120a2e, 0 0 0 9px var(--accent), 0 0 46px rgba(255, 47, 185, 0.5);
  --radius: 20px;
  --disp-size: clamp(2.3rem, 9.8vw, 3.5rem);
  --disp-tracking: 0.03em;
}
.invite[data-theme="neon-90"] .invite__decor {
  background:
    repeating-linear-gradient(135deg, rgba(57, 255, 136, 0.24) 0 6px, transparent 6px 20px) 0 0 / 100% 44px no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 47, 185, 0.24) 0 6px, transparent 6px 20px) 0 100% / 100% 44px no-repeat,
    radial-gradient(circle at 11% 28%, rgba(0, 225, 255, 0.32) 0 7px, transparent 8px),
    radial-gradient(circle at 89% 60%, rgba(255, 214, 0, 0.3) 0 9px, transparent 10px),
    conic-gradient(from 0deg at 50% 120%, rgba(57, 255, 136, 0.16) 0deg 4deg, transparent 4deg 12deg);
}
.invite[data-theme="neon-90"] .invite__title {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 47, 185, 0.9), 0 0 26px rgba(57, 255, 136, 0.6);
}
.invite[data-theme="neon-90"] .invite__rule { width: 120px; height: 4px; border-radius: 999px; background: var(--accent); }
.invite[data-theme="neon-90"] .invite__when i { color: var(--accent); }
.invite[data-theme="neon-90"] .invite__program b { color: var(--accent); }

/* ── Vaporwave — pásikované slnko a perspektívna mriežka ───────────────── */

.invite[data-theme="vaporwave"] {
  --paper: #241046;
  --on-paper: #ffe9fb;          /* kontrast na papieri 14,79 : 1 */
  --accent: #ff71ce;
  --accent-2: #01cdfe;
  --muted: rgba(255, 233, 251, 0.74);
  --line: rgba(1, 205, 254, 0.32);
  --edge: 0;
  --shadow: 0 0 0 2px rgba(255, 113, 206, 0.55), 9px 9px 0 rgba(1, 205, 254, 0.45), 0 26px 60px rgba(1, 205, 254, 0.26);
  --radius: 0;
  --disp-size: clamp(1.75rem, 6.8vw, 2.5rem);
  --disp-tracking: 0.2em;
}
.invite[data-theme="vaporwave"] .invite__decor {
  background:
    /* pásiky cez slnko ho zároveň stmavia, takže text nad ním zostáva čitateľný */
    repeating-linear-gradient(180deg, rgba(36, 16, 70, 0.9) 0 4px, transparent 4px 13px) 50% 4% / 210px 150px no-repeat,
    radial-gradient(circle at 50% 15%, rgba(255, 113, 206, 0.34) 0 104px, transparent 105px),
    conic-gradient(from 200deg at 50% 128%, rgba(1, 205, 254, 0.45) 0deg 0.6deg, transparent 0.6deg 5deg),
    repeating-linear-gradient(0deg, rgba(1, 205, 254, 0.3) 0 1px, transparent 1px 17px) 0 100% / 100% 26% no-repeat,
    linear-gradient(180deg, #2f1359 0%, #241046 54%, #150a2c 100%);
}
.invite[data-theme="vaporwave"] .invite__kicker { color: var(--accent-2); letter-spacing: 0.3em; }
.invite[data-theme="vaporwave"] .invite__title { text-shadow: 3px 0 0 rgba(1, 205, 254, 0.75), -3px 0 0 rgba(255, 113, 206, 0.75); }
.invite[data-theme="vaporwave"] .invite__rule { width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.invite[data-theme="vaporwave"] .invite__when { letter-spacing: 0.12em; }
.invite[data-theme="vaporwave"] .invite__program b { color: var(--accent-2); }

/* ── Komiks — bublina, akčné čiary, ben-day raster ─────────────────────── */

.invite[data-theme="komiks"] {
  --paper: #fff8e7;
  --on-paper: #10131a;          /* kontrast na papieri 17,55 : 1 */
  --accent: #d21422;
  --accent-2: #1546a8;
  --muted: #4b4f58;
  --line: rgba(16, 19, 26, 0.24);
  --edge: 6px solid var(--on-paper);
  --shadow: 10px 10px 0 var(--accent), 10px 10px 0 6px var(--on-paper);
  --radius: 0;
  --disp-size: clamp(2.4rem, 10.2vw, 3.6rem);
  --disp-tracking: -0.01em;
}
.invite[data-theme="komiks"] .invite__decor {
  background:
    /* biela výplň bubliny leží nad jej čiernym obrysom */
    radial-gradient(circle at 79% 15%, #ffffff 0 38px, transparent 39px),
    radial-gradient(circle at 79% 15%, rgba(16, 19, 26, 0.85) 0 42px, transparent 43px),
    repeating-conic-gradient(from 0deg at 10% 94%, rgba(16, 19, 26, 0.16) 0deg 4deg, transparent 4deg 11deg),
    radial-gradient(rgba(210, 20, 34, 0.3) 28%, transparent 29%) 0 0 / 11px 11px;
  -webkit-mask-image: linear-gradient(#000 0 28%, rgba(0, 0, 0, 0.26) 44% 72%, #000 88% 100%);
  mask-image: linear-gradient(#000 0 28%, rgba(0, 0, 0, 0.26) 44% 72%, #000 88% 100%);
}
.invite[data-theme="komiks"] .invite__title { color: var(--accent); text-shadow: 4px 4px 0 var(--on-paper); }
.invite[data-theme="komiks"] .invite__kicker { letter-spacing: 0.14em; }
.invite[data-theme="komiks"] .invite__rule { width: 100%; height: 5px; background: var(--on-paper); }
.invite[data-theme="komiks"] .invite__when i { color: var(--accent); }
.invite[data-theme="komiks"] .invite__program b { color: var(--accent-2); }

/* ── Disco guľa — conic fazetky a zrkadlová krížová šrafúra ────────────── */

.invite[data-theme="disco"] {
  --paper: #0d0d14;
  --on-paper: #f4f4ff;          /* kontrast na papieri 17,73 : 1 */
  --accent: #c0c6d8;
  --accent-2: #ffd166;
  --muted: rgba(244, 244, 255, 0.7);
  --line: rgba(244, 244, 255, 0.18);
  --edge: 1px solid rgba(244, 244, 255, 0.35);
  --shadow: 0 0 70px rgba(192, 198, 216, 0.26), 0 26px 60px rgba(0, 0, 0, 0.6);
  --radius: 28px;
  --disp-size: clamp(1.95rem, 7.8vw, 2.85rem);
  --disp-tracking: 0.14em;
}
.invite[data-theme="disco"] .invite__decor {
  background:
    conic-gradient(from 30deg at 50% 6%,
      rgba(255, 209, 102, 0.22) 0deg 14deg, transparent 14deg 30deg,
      rgba(1, 205, 254, 0.18) 30deg 44deg, transparent 44deg 60deg),
    radial-gradient(circle at 50% 6%, rgba(244, 244, 255, 0.28) 0 54px, transparent 56px),
    repeating-linear-gradient(58deg, rgba(244, 244, 255, 0.1) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-58deg, rgba(244, 244, 255, 0.1) 0 1px, transparent 1px 13px),
    radial-gradient(120% 88% at 50% 0%, rgba(120, 140, 200, 0.22) 0%, transparent 64%);
}
.invite[data-theme="disco"] .invite__kicker { color: var(--accent-2); letter-spacing: 0.3em; }
.invite[data-theme="disco"] .invite__rule { width: 70px; height: 1px; background: var(--accent); }
.invite[data-theme="disco"] .invite__when { letter-spacing: 0.1em; }
.invite[data-theme="disco"] .invite__program b { color: var(--accent-2); }

/* ── Tropické listy — monsterové listy a mangové akcenty ───────────────── */

.invite[data-theme="tropic"] {
  --paper: #06403a;
  --on-paper: #f6fff2;          /* kontrast na papieri 11,38 : 1 */
  --accent: #ffb703;
  --accent-2: #7ef2a5;
  --muted: rgba(246, 255, 242, 0.76);
  --line: rgba(126, 242, 165, 0.26);
  --edge: 0;
  --shadow: 0 24px 54px rgba(3, 30, 27, 0.5);
  --radius: 34px 6px 34px 6px;
  --disp: var(--font-body);
  --disp-size: clamp(2.05rem, 8.4vw, 2.95rem);
  --disp-tracking: -0.025em;
  --disp-transform: none;
}
.invite[data-theme="tropic"] .invite__decor {
  background:
    radial-gradient(70% 32% at -8% 5%, rgba(126, 242, 165, 0.34) 0 58%, transparent 59%),
    radial-gradient(56% 24% at 108% 21%, rgba(126, 242, 165, 0.22) 0 58%, transparent 59%),
    radial-gradient(64% 28% at 104% 97%, rgba(255, 183, 3, 0.24) 0 58%, transparent 59%),
    /* žilky listu — lúče z toho istého bodu ako prvý radiál */
    repeating-conic-gradient(from 118deg at -8% 5%, rgba(3, 50, 44, 0.34) 0deg 2deg, transparent 2deg 7deg),
    linear-gradient(200deg, #075049 0%, #06403a 60%, #042e2a 100%);
}
.invite[data-theme="tropic"] .invite__title { font-weight: 800; }
.invite[data-theme="tropic"] .invite__kicker { color: var(--accent); letter-spacing: 0.16em; }
.invite[data-theme="tropic"] .invite__rule { width: 54px; height: 5px; border-radius: 999px; background: var(--accent); }
.invite[data-theme="tropic"] .invite__when { font-family: var(--font-body); font-weight: 700; text-transform: none; }
.invite[data-theme="tropic"] .invite__program b { color: var(--accent-2); }

/* ══════════════════════════════════════════════════════════════════════════
   Minimalistická rada — málo prvkov, veľa vzduchu, žiadny ornament navyše
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Švajčiarska mriežka — dvanásť stĺpcov, červený pás, doľava ────────── */

.invite[data-theme="svajciarska-mriezka"] {
  --paper: #ffffff;
  --on-paper: #111111;          /* kontrast na papieri 18,88 : 1 */
  --accent: #d40016;
  --accent-2: #111111;
  --muted: #5c5c5c;
  --line: rgba(17, 17, 17, 0.18);
  --edge: 0;
  --shadow: none;
  --radius: 0;
  --disp: var(--font-body);
  --disp-size: clamp(2.15rem, 9vw, 3.15rem);
  --disp-tracking: -0.045em;
  --disp-transform: none;
  --pad-t: clamp(36px, 8vw, 56px);
  text-align: left;
}
.invite[data-theme="svajciarska-mriezka"] .invite__decor {
  background:
    linear-gradient(var(--accent) 0 0) 0 0 / 100% 10px no-repeat,
    /* dvanásťstĺpcová sadzobná mriežka priznaná vlasovými linkami */
    repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.07) 0 1px, transparent 1px 8.3333%);
}
.invite[data-theme="svajciarska-mriezka"] .invite__inner { padding-top: 14px; }
.invite[data-theme="svajciarska-mriezka"] .invite__title { font-weight: 800; line-height: 0.9; }
.invite[data-theme="svajciarska-mriezka"] .invite__kicker { font-weight: 700; letter-spacing: 0.14em; }
.invite[data-theme="svajciarska-mriezka"] .invite__rule { margin: 4px 0; width: 100%; height: 2px; background: var(--on-paper); }
.invite[data-theme="svajciarska-mriezka"] .invite__when {
  justify-content: flex-start;
  font-family: var(--font-body); font-weight: 700; text-transform: none; letter-spacing: 0;
}
.invite[data-theme="svajciarska-mriezka"] .invite__program li { grid-template-columns: 3.6em 1fr; }

/* ── Čistá typografia — papier, písmo a jedna vlasová zvislica ─────────── */

.invite[data-theme="cista-typo"] {
  --paper: #faf9f7;
  --on-paper: #1a1a1a;          /* kontrast na papieri 16,54 : 1 */
  --accent: #6b6b6b;
  --accent-2: #4a4a4a;
  --muted: #6b6b6b;
  --line: rgba(26, 26, 26, 0.14);
  --edge: 0;
  --shadow: none;
  --radius: 0;
  --disp: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --disp-size: clamp(2.4rem, 10.4vw, 3.7rem);
  --disp-tracking: -0.028em;
  --disp-transform: none;
  --pad-t: clamp(52px, 11vw, 82px);
  --pad-b: clamp(52px, 11vw, 82px);
}
.invite[data-theme="cista-typo"] .invite__decor {
  /* jediná dekorácia je nádych papiera a vlasová zvislica pod kickerom */
  background:
    linear-gradient(var(--line) 0 0) 50% clamp(30px, 6.5vw, 48px) / 1px clamp(16px, 3.4vw, 24px) no-repeat,
    linear-gradient(180deg, #ffffff 0%, #f4f2ee 100%);
}
.invite[data-theme="cista-typo"] .invite__kicker { font-weight: 500; letter-spacing: 0.34em; color: var(--muted); }
.invite[data-theme="cista-typo"] .invite__title { line-height: 1.02; }
.invite[data-theme="cista-typo"] .invite__rule { width: 1px; height: 38px; margin: 12px auto; background: var(--line); }
.invite[data-theme="cista-typo"] .invite__when {
  font-family: var(--disp); font-weight: 400; text-transform: none; letter-spacing: 0.03em;
}
.invite[data-theme="cista-typo"] .invite__program b { color: var(--accent-2); font-weight: 600; }

/* ── Obrí dátum — jednofarebne, hierarchia otočená naruby ──────────────── */

.invite[data-theme="obri-datum"] {
  --paper: #e9e6df;
  --on-paper: #1c1c17;          /* kontrast na papieri 13,72 : 1 */
  --accent: #5c5c50;
  --accent-2: #1c1c17;
  --muted: #5c5c50;
  --line: rgba(28, 28, 23, 0.16);
  --edge: 0;
  --shadow: none;
  --radius: 0;
  --disp: var(--font-body);
  --disp-size: clamp(0.98rem, 3.4vw, 1.2rem);   /* nadpis je zámerne drobný */
  --disp-tracking: 0.34em;
  --disp-transform: uppercase;
  --pad-b: clamp(54px, 10vw, 76px);
}
.invite[data-theme="obri-datum"] .invite__decor {
  background:
    linear-gradient(var(--on-paper) 0 0) 0 100% / 100% 14px no-repeat,
    linear-gradient(var(--on-paper) 0 0) 0 0 / 100% 2px no-repeat,
    linear-gradient(180deg, #efece5 0%, #e4e1d8 100%);
}
.invite[data-theme="obri-datum"] .invite__title { font-weight: 700; }
.invite[data-theme="obri-datum"] .invite__rule { width: 100%; height: 1px; background: var(--line); }
/* dátum preberá rolu nadpisu — každý riadok samostatne, oddeľovač je zbytočný */
.invite[data-theme="obri-datum"] .invite__when {
  display: grid; justify-items: center; gap: 2px;
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(1.95rem, 8.8vw, 2.95rem);
  line-height: 0.98; letter-spacing: -0.035em; text-transform: none;
  text-wrap: balance;
}
.invite[data-theme="obri-datum"] .invite__when i { display: none; }
.invite[data-theme="obri-datum"] .invite__program b { color: var(--accent); }

/* ── Vlasová linka — vnútorný rám z vlasových čiar ─────────────────────── */

.invite[data-theme="vlasova-linka"] {
  --paper: #fffefb;
  --on-paper: #2f2f2c;          /* kontrast na papieri 13,31 : 1 */
  --accent: #6f6f67;
  --accent-2: #55554e;
  --muted: #67675f;
  --line: rgba(47, 47, 44, 0.14);
  --edge: 1px solid rgba(47, 47, 44, 0.22);
  --shadow: none;
  --radius: 0;
  --disp: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --disp-size: clamp(1.8rem, 6.8vw, 2.5rem);
  --disp-tracking: 0.015em;
  --disp-transform: none;
}
.invite[data-theme="vlasova-linka"] .invite__decor {
  /* štyri jednopixelové ťahy odsadené od okraja — vnútorný rám bez border */
  background:
    linear-gradient(rgba(47, 47, 44, 0.28) 0 0) 13px 13px / calc(100% - 26px) 1px no-repeat,
    linear-gradient(rgba(47, 47, 44, 0.28) 0 0) 13px calc(100% - 13px) / calc(100% - 26px) 1px no-repeat,
    linear-gradient(rgba(47, 47, 44, 0.28) 0 0) 13px 13px / 1px calc(100% - 26px) no-repeat,
    linear-gradient(rgba(47, 47, 44, 0.28) 0 0) calc(100% - 13px) 13px / 1px calc(100% - 26px) no-repeat;
}
.invite[data-theme="vlasova-linka"] .invite__inner { padding: 12px 8px; }
.invite[data-theme="vlasova-linka"] .invite__kicker { font-weight: 500; letter-spacing: 0.24em; color: var(--accent); }
.invite[data-theme="vlasova-linka"] .invite__rule { width: 28px; height: 1px; background: var(--accent-2); }
.invite[data-theme="vlasova-linka"] .invite__when {
  font-family: var(--disp); font-weight: 400; text-transform: none; letter-spacing: 0.06em; font-size: 0.98rem;
}
.invite[data-theme="vlasova-linka"] .invite__program b { color: var(--accent-2); font-weight: 600; }

/* ── Monochróm — ateliérové pozadie, zrno a biely fotografický okraj ───── */

.invite[data-theme="mono-foto"] {
  --paper: #1b1b1b;
  --on-paper: #ededed;          /* kontrast na papieri 14,71 : 1 */
  --accent: #b9b9b9;
  --accent-2: #ffffff;
  --muted: rgba(237, 237, 237, 0.7);
  --line: rgba(237, 237, 237, 0.2);
  --edge: 14px solid #f4f4f4;
  --shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  --radius: 0;
  --disp: var(--font-body);
  --disp-size: clamp(1.2rem, 4.6vw, 1.6rem);
  --disp-tracking: 0.34em;
  --disp-transform: uppercase;
}
.invite[data-theme="mono-foto"] .invite__decor {
  background:
    /* dva nesúrodé rastre bodiek dajú filmové zrno bez obrázka */
    radial-gradient(rgba(255, 255, 255, 0.07) 0.5px, transparent 1px) 0 0 / 3px 3px,
    radial-gradient(rgba(0, 0, 0, 0.24) 0.5px, transparent 1px) 1px 2px / 4px 4px,
    radial-gradient(120% 58% at 50% 16%, rgba(255, 255, 255, 0.16) 0%, transparent 64%),
    linear-gradient(180deg, #2b2b2b 0%, #1b1b1b 46%, #0f0f0f 100%);
}
.invite[data-theme="mono-foto"] .invite__title { font-weight: 400; }
.invite[data-theme="mono-foto"] .invite__kicker { color: var(--accent); letter-spacing: 0.34em; font-weight: 600; }
.invite[data-theme="mono-foto"] .invite__rule { width: 40px; height: 1px; background: var(--accent); }
.invite[data-theme="mono-foto"] .invite__when {
  font-family: var(--font-body); font-weight: 500; letter-spacing: 0.16em; font-size: 0.92rem;
}
.invite[data-theme="mono-foto"] .invite__program b { color: var(--accent-2); }

/* ── Brutalizmus — betón, monospace a oranžový posunutý blok ───────────── */

.invite[data-theme="brutal"] {
  --paper: #d9d9d9;
  --on-paper: #000000;          /* kontrast na papieri 14,88 : 1 */
  --accent: #ff4d00;
  --accent-2: #000000;
  --muted: #3d3d3d;
  --line: rgba(0, 0, 0, 0.32);
  --edge: 3px solid #000000;
  --shadow: 12px 12px 0 #ff4d00, 12px 12px 0 3px #000000;
  --radius: 0;
  --disp: var(--font-mono);
  --disp-size: clamp(1.85rem, 7.6vw, 2.7rem);
  --disp-tracking: -0.03em;
  --disp-transform: uppercase;
  text-align: left;
}
.invite[data-theme="brutal"] .invite__decor {
  background:
    repeating-linear-gradient(90deg, #000000 0 14px, transparent 14px 28px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, #000000 0 14px, transparent 14px 28px) 0 100% / 100% 12px no-repeat,
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 9px);
}
.invite[data-theme="brutal"] .invite__inner { padding: 16px 0; }
/* oranžová je na betóne slabá pod textom, preto ide ako podklad štítku */
.invite[data-theme="brutal"] .invite__kicker {
  justify-self: start;
  padding: 5px 9px;
  background: var(--accent);
  color: #0b0b0b;
  letter-spacing: 0.12em;
}
.invite[data-theme="brutal"] .invite__title { line-height: 1; }
.invite[data-theme="brutal"] .invite__rule {
  margin: 2px 0; width: 100%; height: 6px;
  background: repeating-linear-gradient(90deg, #000000 0 10px, transparent 10px 20px);
}
.invite[data-theme="brutal"] .invite__when { justify-content: flex-start; font-family: var(--font-mono); letter-spacing: -0.01em; }
.invite[data-theme="brutal"] .invite__place small { font-family: var(--font-mono); }
.invite[data-theme="brutal"] .invite__program li { grid-template-columns: 4em 1fr; border-bottom-width: 2px; }
.invite[data-theme="brutal"] .invite__program b { font-family: var(--font-mono); }

/* ══════════════════════════════════════════════════════════════════════════
   Vlastný dizajn — tokeny nastavuje editor, nie stylesheet
   ══════════════════════════════════════════════════════════════════════════ */

.invite[data-theme="vlastny"] {
  --muted: color-mix(in srgb, var(--on-paper) 62%, var(--paper));
  --line: color-mix(in srgb, var(--on-paper) 24%, var(--paper));
}

.invite[data-align="left"] { text-align: left; }
.invite[data-align="left"] .invite__when { justify-content: flex-start; }
.invite[data-align="left"] .invite__rule { margin-inline: 0; }

.invite[data-frame="hard"] { --edge: 4px solid var(--on-paper); --shadow: 12px 12px 0 var(--on-paper); --radius: 0; }
.invite[data-frame="thin"] { --edge: 2px solid var(--on-paper); --shadow: none; --radius: 3px; }
.invite[data-frame="soft"] { --edge: 0; --shadow: 0 18px 44px rgba(0, 0, 0, 0.2); --radius: 24px; }
.invite[data-frame="none"] { --edge: 0; --shadow: none; --radius: 0; }

.invite[data-font="serif"] { --disp-transform: none; --disp-tracking: -0.01em; }
.invite[data-font="sans"] { --disp-transform: none; --disp-tracking: -0.03em; }
.invite[data-font="mono"] { --disp-size: clamp(1.6rem, 6.4vw, 2.3rem); }

/* dekoračné vrstvy */
.invite[data-decor="none"] .invite__decor { background: none; }

.invite[data-decor="halftone"] .invite__decor {
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 72%, transparent) 26%, transparent 27%);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(126% 72% at 50% 0%, #000 24%, rgba(0, 0, 0, 0.24) 64%, transparent 100%);
  mask-image: radial-gradient(126% 72% at 50% 0%, #000 24%, rgba(0, 0, 0, 0.24) 64%, transparent 100%);
}

.invite[data-decor="sunburst"] .invite__decor {
  background: repeating-conic-gradient(from 0deg at 50% 32%,
    color-mix(in srgb, var(--accent) 24%, transparent) 0deg 7deg, transparent 7deg 15deg);
}

.invite[data-decor="konfety"] .invite__decor {
  background-image:
    linear-gradient(38deg, var(--accent) 50%, transparent 0),
    linear-gradient(-24deg, var(--accent-2) 50%, transparent 0),
    linear-gradient(70deg, var(--accent) 50%, transparent 0),
    linear-gradient(-52deg, var(--accent-2) 50%, transparent 0),
    linear-gradient(15deg, var(--accent) 50%, transparent 0),
    linear-gradient(-70deg, var(--accent-2) 50%, transparent 0);
  background-size: 16px 10px, 13px 9px, 18px 11px, 12px 8px, 15px 10px, 14px 9px;
  /* rovnaké polohy ako pri téme konfety — viď komentár vyššie */
  background-position: 3% 3%, 95% 5%, 4% 96%, 96% 94%, 97% 26%, 2% 74%;
  background-repeat: no-repeat;
}

.invite[data-decor="grid"] .invite__decor {
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 26%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}

.invite[data-decor="stuha"] .invite__decor {
  background:
    linear-gradient(var(--accent) 0 0) top / 100% 16px no-repeat,
    linear-gradient(var(--on-paper) 0 0) 0 16px / 100% 3px no-repeat;
}
.invite[data-decor="stuha"] .invite__inner { padding-top: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   Fotka od zákazníka — štyri spôsoby umiestnenia
   ══════════════════════════════════════════════════════════════════════════ */

.invite__photo { display: block; width: 100%; }

.invite[data-photo="banner"] .invite__photo {
  width: calc(100% + 2 * var(--pad-x));
  max-width: none;
  margin: calc(-1 * var(--pad-t)) calc(-1 * var(--pad-x)) clamp(18px, 4vw, 26px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.invite[data-photo="plagat"] { padding: 0; }
.invite[data-photo="plagat"] .invite__inner { padding: var(--pad-t) var(--pad-x) var(--pad-b); }

.invite[data-photo="portret"] .invite__photo {
  width: clamp(112px, 36%, 152px);
  aspect-ratio: 1;
  margin-inline: auto;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--on-paper);
}
.invite[data-align="left"][data-photo="portret"] .invite__photo { margin-inline: 0; }

.invite[data-photo="pozadie"] {
  --muted: rgba(255, 255, 255, 0.82);
  --line: rgba(255, 255, 255, 0.32);
}
.invite[data-photo="pozadie"] .invite__decor::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(8, 8, 16, var(--scrim, 0.5));
}
.invite[data-photo="pozadie"] .invite__inner { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.invite[data-photo="pozadie"] .invite__program li { border-bottom-color: var(--line); }

/* ── RSVP blok pod pozvánkou ───────────────────────────────────────────── */

.rsvp {
  width: 100%;
  max-width: 460px;
  margin: clamp(22px, 4vw, 32px) auto 0;
  padding: clamp(22px, 5vw, 30px);
  background: var(--cream);
  border: 4px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.rsvp h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.3rem; text-transform: uppercase;
}
.rsvp__note { margin: 0 0 20px; font-size: 0.88rem; color: #4a4a58; }
/* Riadok o spracúvaní údajov pod tlačidlom. Tichý, ale čitateľný —
   4,6 : 1 na papieri pozvánky. Nie je to ozdoba, je to povinnosť. */
.rsvp__pravne {
  margin: 12px 0 0;
  font-size: 0.76rem; line-height: 1.5;
  /* Napísaná farba, nie --muted. Blok potvrdenia účasti stojí MIMO .invite,
     takže tam premenné dizajnu nie sú definované a text by sa vrátil na
     dedenú, teda rovnakú ako hlavný text. Tento riadok má byť tichý. */
  color: #4a4a58;
}
.rsvp__pravne a { color: inherit; text-underline-offset: 2px; }

.field { display: grid; gap: 6px; margin-bottom: 16px; text-align: left; }
.field > span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  font: inherit;
  /* Nikdy pod 16 px.

     Safari na iPhone si pri ťuknutí do políčka s menším písmom priblíži
     celú stránku — a späť ju neoddiali. Hosť tak dopisoval meno do
     formulára, z ktorého mu polovica vytiekla za okraj obrazovky, a jediné,
     čo s tým vedel spraviť, bolo pozvánku zavrieť. Bolo tu 0.95rem, čiže
     15.2 px; chýbalo 0.8 px. */
  font-size: 1rem;
}
.field textarea { resize: vertical; min-height: 84px; }

.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice label {
  flex: 1 1 120px;
  position: relative;
  padding: 12px 10px;
  background: #fff;
  border: 3px solid var(--ink);
  font-weight: 800; font-size: 0.9rem; text-align: center;
  cursor: pointer;
}
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice input:checked + span { color: #fff; }
.choice label:has(input:checked) { background: var(--blue); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.choice label:has(input:focus-visible) { outline: 4px solid var(--yellow); outline-offset: 3px; }

.rsvp__done {
  display: grid; gap: 10px; text-align: center;
}
.rsvp__done strong { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; }
.rsvp__done button { background: none; border: 0; text-decoration: underline; cursor: pointer; font-size: 0.86rem; }
.rsvp__done .btn { justify-self: center; }
.rsvp__fine { margin: 0; font-size: 0.8rem; color: #55555f; }

/* ── kartička po potvrdení účasti ──────────────────────────────────────────
   Ukážka `/svadba` ju ukazovala od začiatku a editor ju nevyrábal. Farby si
   berie z palety dizajnu, aby nevyzerala ako prilepená z inej stránky —
   `--paper` a `--ink` nastavuje `pozvanka.html` z `EP.vstupFarby`.
   Perforácia po stranách je gradient, nie obrázok: kartička sa tlačí aj
   fotí a obrázok by pri zväčšení zmäkol. */
.rsvpKarta {
  --karta-papier: var(--paper, #fffdf7);
  --karta-atrament: var(--ink, #1d1d24);
  justify-self: center; width: min(100%, 300px); margin: 6px 0 2px;
  background: var(--karta-papier); color: var(--karta-atrament);
  border-radius: 10px; padding: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 24px -14px rgba(0, 0, 0, .5);
  background-image:
    radial-gradient(circle at 0 50%, transparent 7px, var(--karta-papier) 8px),
    radial-gradient(circle at 100% 50%, transparent 7px, var(--karta-papier) 8px);
  background-size: 51% 100%, 51% 100%;
  background-position: left, right;
  background-repeat: no-repeat;
}
.rsvpKarta__telo {
  border: 1px dashed color-mix(in srgb, var(--karta-atrament) 35%, transparent);
  border-radius: 7px; padding: 16px 14px 12px; display: grid; gap: 6px; justify-items: center;
}
.rsvpKarta__cislo {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: .6; font-variant-numeric: tabular-nums;
}
.rsvpKarta__hlava {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .75;
  text-align: center; text-wrap: balance;
}
.rsvpKarta__meno {
  font-family: var(--font-display, inherit); font-size: 1.32rem; line-height: 1.15;
  text-align: center; text-wrap: balance; margin-top: 2px;
}
.rsvpKarta__pod { font-size: .74rem; opacity: .6; }
.rsvpKarta__ciara {
  width: 100%; height: 1px; margin: 8px 0 2px;
  background: color-mix(in srgb, var(--karta-atrament) 22%, transparent);
}
.rsvpKarta__info { display: grid; gap: 7px; width: 100%; font-size: .8rem; }
.rsvpKarta__info > div { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; justify-content: center; text-align: center; }
.rsvpKarta__info b { font-weight: 700; }
.rsvpKarta__info span { opacity: .65; }
/* Miesto na QR má výšku dopredu, aby sa kartička po dokreslení nepohla —
   `qr.js` sa načítava lenivo a hosť by inak videl skok.

   ROZMER JE ZMERANÝ, nie odhadnutý. Kód nesie krátku adresu `?id=…` a vyjde
   z neho 41 modulov; pri deväťdesiatich pixeloch pripadá na modul 1,9 pixela
   a taký kód neprečíta žiadny telefón — bol by to obrázok, ktorý sa tvári,
   že funguje. Pri 124 px sú to 2,5 pixela na modul. Stráži to
   `nastroje/test-karta-hosta.cjs`. */
.rsvpKarta__qrMiesto { min-height: 124px; display: grid; place-items: center; }
.rsvpKarta__qr { width: 124px; height: 124px; margin-top: 4px; border-radius: 3px; }
.rsvpKarta__pata { font-size: .66rem; opacity: .55; text-align: center; text-wrap: balance; }

@media print {
  /* Na papieri je tieň špinavý fliačik a perforácia sa nevytlačí. */
  .rsvpKarta { box-shadow: none; background-image: none; }
}

/* ── kalendár pod pozvánkou ────────────────────────────────────────────── */

/* Odkaz do máp pod adresou. Farbu si berie z akcentu dizajnu, takže sedí
   ku každej pozvánke; podčiarknutie ho odlíši od okolitého textu aj tam,
   kde je akcent podobný atramentu. */
.invite__mapa {
  display: inline-block;
  /* currentColor, nie akcent dizajnu.

     S akcentom vyšiel odkaz v štyroch z dvadsiatich štyroch dizajnov pod
     4,5 : 1 (Konfety 2,30, Zlatá linka 2,90, Šalvia 3,05, Brutalizmus 2,36)
     — teda nečitateľný. Farba okolitého textu je čitateľná v každom dizajne
     už z definície; odkaz odlíši podčiarknutie a verzálky. */
  color: currentColor;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 3px;
  /* Dotykový terč aspoň 44 px na výšku — samotný riadok textu má 20 px
     a palcom sa naň mieri ťažko. Odsadenie sa preto pridá zvislo a horný
     okraj sa o toľko istého ubere, aby sa sadzba nepohla. */
  padding: 12px 6px;
  margin-top: 0;
}

.cal { width: 100%; max-width: 460px; margin: 18px auto 0; text-align: center; }
.cal__label {
  margin: 0 0 10px;
  /* Leží priamo na farbe stránky, nie na kartičke. Tá farba sa prispôsobuje
     dizajnu, takže natvrdo biela bola na svetlých podkladoch neviditeľná. */
  /* Zhrnutie toho, čo sa naozaj zapísalo — hosť si má vedieť všimnúť preklep. */
.rsvp__suhrn { font-weight: 700; }

/* Voľba pri zhode mien: dve tlačidlá pod otázkou, na mobile pod sebou. */
.rsvp__volby { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rsvp__volby .btn { flex: 0 1 auto; }

/* 0,74rem vychádza na 11,8 px — spodok je 12 px. */
  color: var(--ep-strana-text, #fff); font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.cal__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ── animovaný vstup pre hosťa ─────────────────────────────────────────── */

/* Prehrávač Spotify. Vlastný vzhľad si nesie sám, my mu dáme len miesto
   a rám v jazyku pozvánky. */
.invite__spotify {
  margin-top: 18px;
  border: var(--edge);
  box-shadow: var(--shadow);
  background: var(--paper);
  line-height: 0;
}
.invite__spotify iframe { display: block; width: 100%; }
/* Výzva pred načítaním Spotify (click-to-load). Rovnaká výška ako prehrávač,
   aby sa po ťuknutí nič neposunulo. */
.invite__spotify:has(.invite__spotifyVyzva) { line-height: 1.5; }
.invite__spotifyVyzva {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px;
  background: var(--paper); border: 0; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
}
.invite__spotifyIkona {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: var(--accent-2, #1db954); color: #fff;
}
.invite__spotifyText { display: grid; gap: 3px; font-size: 0.9rem; }
.invite__spotifyText strong { font-size: 0.98rem; }
.invite__spotifyVyzva:hover { filter: brightness(0.97); }

@media (prefers-reduced-motion: reduce) {
  .invite[data-theme="hot-pink"] .invite__title { transform: none; }
}

/* ── Hudba na pozadí ──────────────────────────────────────────────────────
   Malý krúžok v rohu pozvánky. Hudba, ktorú sa nedá vypnúť, je otrava —
   tlačidlo preto musí byť viditeľné hneď, ako hudba zaznie. */

.invite__hudba {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 38px; height: 38px;
  /* Krúžok ostáva 38 px, ale ťuká sa doň v ploche 44×44 — to je najmenšia
     veľkosť, akú odporúča norma prístupnosti (WCAG 2.5.8). Rieši sa to
     neviditeľným presahom, nie zväčšením krúžku: väčší krúžok by na malej
     kartičke prekrýval nadpis. */
  display: grid; place-items: center;
  background: var(--accent); color: var(--paper);
  border: 3px solid var(--on-paper);
  border-radius: 50%;
  font-size: 1rem; line-height: 1; cursor: pointer;
  opacity: 0.85;
}

/* Neviditeľný presah dotykovej plochy. Nemá vlastný vzhľad ani pozadie,
   takže na obrazovke nie je po ňom stopa. */
.invite__hudba::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
}
.invite__hudba:hover { opacity: 1; }
.invite__hudba[data-stav="ticho"] { background: var(--paper); color: var(--on-paper); opacity: 0.6; }
.invite__hudba[data-stav="ticho"]::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%;
  height: 3px; background: currentColor; transform: rotate(-45deg);
}
.invite__hudba:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }

/* ── Hlasový odkaz ────────────────────────────────────────────────────────
   Nespúšťa sa sám. Tlačidlo drží farby pozvánky, nech nevyzerá ako cudzí
   prvok prilepený navrch. */

.invite__zvuk { margin: 14px 0 0; display: flex; justify-content: center; }

.invite__hrat {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; min-height: 44px;
  background: var(--accent); color: var(--paper);
  border: 3px solid var(--on-paper);
  font: inherit; font-size: 0.86rem; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase;
  cursor: pointer;
}
.invite__hrat:hover { background: var(--accent-2); }

/* trojuholník = prehrať, dva pásiky = práve hrá */
.invite__hratIkona {
  width: 0; height: 0;
  border-left: 13px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.invite__hrat[data-stav="hra"] .invite__hratIkona {
  width: 13px; height: 15px;
  border: 0;
  background: linear-gradient(currentColor 0 0) 0 0 / 4px 100% no-repeat,
              linear-gradient(currentColor 0 0) 100% 0 / 4px 100% no-repeat;
}
.invite__hrat[data-stav="nacitava"] { opacity: 0.6; }
.invite__hrat[data-stav="chyba"] { background: transparent; color: var(--on-paper); }

/* Kým prehliadač čaká na dotyk, tlačidlo naň jemne upozorní. */
.invite__hrat[data-stav="caka"] { animation: zvukPulz 1.8s ease-in-out infinite; }
@keyframes zvukPulz {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .invite__hrat[data-stav="caka"] { animation: none; }
}

/* V náhľade sa zvuk nespúšťa, ale organizátor musí vidieť, že tam je. */
.invite__zvukInfo {
  margin: 10px 0 0; padding: 7px 11px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 2px dashed var(--on-paper);
  font-size: 0.76rem; font-weight: 700; text-align: center;
}

/* Odkaz na nás pod poďakovaním hosťovi.

   Zámerne drobné a bez farby. Je to cudzia svadba — nemáme právo si v nej
   robiť výklad. Kto si to prečíta, prečíta; ostatným to neprekáža. */
.rsvp__nasa {
  margin: 20px 0 0; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--on-paper) 22%, transparent);
  font-size: 0.78rem; line-height: 1.5;
  color: color-mix(in srgb, var(--on-paper) 62%, transparent);
  text-align: center;
}
.rsvp__nasa a {
  color: inherit; font-weight: 800;
  text-decoration: underline; text-underline-offset: 2px;
}
.rsvp__nasa a:hover { color: var(--accent); }

/* ── Vstupenky ─────────────────────────────────────────────────────────────
   Blok visí NAD potvrdením účasti a je jeho súrodenec, nie dieťa — po
   odoslaní odpovede sa `#rsvp` celé prepíše a ponuka lístkov by zmizla
   presne vtedy, keď hosť potvrdil, že príde.

   Farby sú napísané, nie z premenných dizajnu: blok stojí MIMO `.invite`,
   takže tam paleta kartičky nie je definovaná — rovnaká pasca, ako pri
   `.rsvp__pravne` o pár riadkov vyššie. */
.vstupenky {
  width: 100%;
  max-width: 460px;
  margin: clamp(22px, 4vw, 32px) auto 0;
  padding: clamp(20px, 4.5vw, 28px);
  background: var(--cream);
  border: 4px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}
.vstupenky__nadpis {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.3rem; text-transform: uppercase;
}
.vstupenky__zoznam { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.vstupenky__typ {
  padding: 12px 14px;
  border: 2px solid var(--ink);
  background: #fff;
}
/* Vypredané sa neskrýva — hosť má vedieť, že to existovalo a je preč. */
.vstupenky__typ[data-vypredane] { opacity: 0.62; }
.vstupenky__hlava { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.vstupenky__nazovTypu { font-weight: 700; }
.vstupenky__cena { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.vstupenky__popis { margin: 4px 0 0; font-size: 0.86rem; color: #4a4a58; }
.vstupenky__volne { margin: 6px 0 0; font-size: 0.8rem; color: #4a4a58; }
.vstupenky__veta { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.55; }
.vstupenky__coskoro { font-weight: 700; }
.vstupenky__predajca { margin: 10px 0 0; font-size: 0.82rem; line-height: 1.55; color: #4a4a58; }
/* Kontakt na predávajúceho — telefón a e-mail. Odkazy musia byť viditeľne
   odkazmi: človek, ktorý nedostal lístky, ich hľadá očami, nie čítaním. */
.vstupenky__kontakt { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.55; color: #4a4a58; }
.vstupenky__kontakt a { color: inherit; text-decoration: underline; }
.vstupenky__podmienky { margin: 10px 0 0; font-size: 0.84rem; }
.vstupenky__podmienky summary { cursor: pointer; }
.vstupenky__podmienky p { margin: 6px 0 0; line-height: 1.55; color: #4a4a58; }
.vstupenky__pravne { margin: 10px 0 0; font-size: 0.76rem; line-height: 1.5; color: #4a4a58; }

/* Výber počtu, e-mail a tlačidlo — pribudlo, keď sa lístky začali dať kúpiť. */
.vstupenky__pocet { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.84rem; }
.vstupenky__pocet select {
  min-height: 44px; min-width: 72px; padding: 6px 8px;
  border: 2px solid var(--ink); background: #fff; font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.vstupenky__pole { display: grid; gap: 4px; margin: 12px 0 0; font-size: 0.84rem; }
.vstupenky__pole input {
  min-height: 44px; padding: 10px 12px;
  border: 2px solid var(--ink); background: #fff; font-size: 1rem;
}
.vstupenky__suma { margin: 14px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.vstupenky__kupit {
  margin: 16px 0 0; width: 100%; min-height: 52px; padding: 14px 18px;
  font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--pink, #ff3d9a); color: #fff;
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); cursor: pointer;
}
.vstupenky__kupit:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
/* Chybová veta má byť čitateľná, nie len červená — 5,9 : 1 na krémovom papieri. */
.vstupenky__chyba:empty { display: none; }
.vstupenky__chyba { margin: 10px 0 0; font-size: 0.88rem; line-height: 1.5; font-weight: 700; color: #a3121a; }