/* ==========================================================================
   stolnik.cz, veřejná část. Vzhled „Tmavý chrám": noční modř, zlato,
   Athénská škola jako ztlumený podklad.
   Barvy a poloměry jsou tokeny na :root. V komponentách se nepíše konkrétní hodnota.
   ========================================================================== */

@font-face { font-family: "Instrument Sans"; src: url("../fonts/ins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/ins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/ins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --noc:          #0E1A2B;
  --noc-hluboka:  #08111D;
  --panel:        rgba(14, 26, 43, .86);
  --panel-pevny:  #13233A;
  --pole:         #0B1626;
  --pole-hover:   #0F1D31;
  --linka:        rgba(200, 167, 90, .26);
  --linka-jemna:  rgba(236, 230, 216, .10);
  --zlato:        #C8A75A;
  --zlato-svetle: #E6CF94;
  --zlato-tmave:  #A88A43;
  --text:         #ECE6D8;
  --text-2:       #BDB6A6;
  --text-3:       #8F8A7C;
  --chyba:        #F0A090;
  --chyba-pozadi: rgba(190, 80, 60, .16);
  --ok:           #9FD3B0;
  --ok-pozadi:    rgba(80, 160, 110, .16);
  --r:            6px;
  --r-velky:      14px;
  --stin:         0 30px 80px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .02) inset;
  --sans:         "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--noc);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--zlato-svetle); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--zlato); outline-offset: 3px; border-radius: 3px; }

/* Podklad: Athénská škola v duotónu, nahoře viditelná, dolů se noří do noci. */
.pozadi {
  position: fixed; inset: 0; z-index: 0;
  /* Obraz je vidět víc než dřív (přání Martina z 15. 10. 2026): překryv nahoře skoro
     žádný, k dolnímu okraji houstne jen tolik, aby patička zůstala čitelná. */
  background:
    radial-gradient(ellipse 85% 65% at 50% 30%, rgba(14, 26, 43, 0), rgba(8, 17, 29, .5) 80%),
    linear-gradient(180deg, rgba(8, 17, 29, .05) 0%, rgba(8, 17, 29, .25) 50%, rgba(8, 17, 29, .8) 100%),
    url("../img/athenska-skola.jpg?v=2") center 20% / cover no-repeat;
  background:
    radial-gradient(ellipse 85% 65% at 50% 30%, rgba(14, 26, 43, 0), rgba(8, 17, 29, .5) 80%),
    linear-gradient(180deg, rgba(8, 17, 29, .05) 0%, rgba(8, 17, 29, .25) 50%, rgba(8, 17, 29, .8) 100%),
    image-set(url("../img/athenska-skola.webp?v=2") type("image/webp"), url("../img/athenska-skola.jpg?v=2") type("image/jpeg")) center 20% / cover no-repeat;
}

.ram {
  position: relative; z-index: 1;
  width: 100%; max-width: 680px;
  margin: 0 auto;
  padding: 40px 16px 32px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}

/* ---------- Hlavička ---------- */
.hlava { text-align: center; margin-bottom: 26px; }
.hlava__znak { display: inline-block; padding: 6px; border-radius: 50%; }
.hlava__znak img { width: 64px; height: auto; margin: 0 auto; filter: drop-shadow(0 4px 18px rgba(200, 167, 90, .25)); }
.hlava__nazev {
  margin: 12px 0 0;
  font: 600 13px/1.2 var(--sans);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--zlato);
}
.hlava__nazev span { letter-spacing: 0; opacity: .8; }

.obsah { flex: 1; }

/* ---------- Karta ---------- */
.karta {
  position: relative;
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid var(--linka);
  border-radius: var(--r-velky);
  box-shadow: var(--stin);
  padding: 40px 44px 38px;
}
.karta::before {
  /* jemná vnitřní zlatá linka, dojem rámu obrazu */
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(200, 167, 90, .08);
  border-radius: calc(var(--r-velky) - 5px);
  pointer-events: none;
}
.karta--prazdna { text-align: center; padding-top: 46px; padding-bottom: 46px; }
.karta--prazdna p { color: var(--text-2); margin: 0 auto 1em; max-width: 30em; }

/* ---------- Typografie ---------- */
.nadpis {
  margin: 0 0 12px;
  font: 600 clamp(27px, 5.4vw, 36px)/1.15 var(--sans);
  color: var(--text);
  letter-spacing: -.02em;
}
.nadpis--uvod { text-align: center; margin-bottom: 22px; }
.podnadpis { margin: 0; font: 600 21px/1.2 var(--sans); letter-spacing: -.01em; color: var(--text); }
.slabe { color: var(--text-2); }
.drobne { font-size: 14px; }

/* ---------- Akce ---------- */
.akce { text-align: center; padding-bottom: 26px; border-bottom: 1px solid var(--linka-jemna); }
.akce__druh {
  display: block;
  margin: 0 0 10px;
  font: 500 13px/1.3 var(--sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--zlato);
}
.akce__datum {
  margin: 0;
  font: 600 clamp(29px, 6.4vw, 42px)/1.1 var(--sans);
  letter-spacing: -.025em;
  color: var(--text);
}
.akce__datum::first-letter { text-transform: uppercase; }
.akce__meta { margin: 12px 0 0; font-size: 18px; color: var(--text-2); }
.tecka { color: var(--zlato); padding: 0 .35em; }
.akce__popis { margin: 14px auto 0; max-width: 32em; color: var(--text-2); font: 400 17px/1.55 var(--sans); }

/* Cenovka: zlatý nápis CENA mezi dvěma linkami, pod ním částka. */
.cena { margin: 26px 0 0; text-align: center; }
.cena p { margin: 0; }
.cena__popisek {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font: 600 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: var(--zlato);
}
.cena__popisek::before, .cena__popisek::after {
  content: ""; width: 56px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 167, 90, .75));
}
.cena__popisek::after { transform: scaleX(-1); }
.cena__castka {
  margin-top: 10px !important;
  font: 600 40px/1.05 var(--sans); letter-spacing: -.025em;
  color: var(--zlato-svetle);
  font-variant-numeric: lining-nums;
}
.cena__pozn { margin-top: 6px !important; font-size: 14px; letter-spacing: .04em; color: var(--text-2); }
.fakta-mezera { height: 26px; }

.fakta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0;
  margin: 22px 0 28px; padding: 0;
}
.fakta__polozka { padding: 0 22px; text-align: center; }
.fakta__polozka + .fakta__polozka { border-left: 1px solid var(--linka-jemna); }
.fakta dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.fakta dd { margin: 4px 0 0; font: 600 18px/1.3 var(--sans); color: var(--zlato-svetle); }
.fakta small { font: 400 14px var(--sans); color: var(--text-2); }

.zavreno { text-align: center; padding: 18px 10px 4px; }
.zavreno h2 { margin: 0 0 8px; font: 600 23px/1.2 var(--sans); letter-spacing: -.01em; color: var(--zlato-svetle); }
.zavreno p { margin: 0 auto; max-width: 30em; color: var(--text-2); }

/* ---------- Formulář ---------- */
.formular { display: grid; gap: 18px; }
.radek { display: grid; grid-template-columns: 1fr 140px; gap: 16px; }
.radek > .pole:only-child { grid-column: 1 / -1; }
.pole { display: grid; gap: 7px; min-width: 0; align-content: start; } /* v .radek se buňka s chybou nesmí roztáhnout do sousedního pole */
.pole label { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--text-2); }
.pole__nepovinne { font-weight: 400; color: var(--text-3); }
.pole input, .pole select, .pole textarea {
  width: 100%;
  font: 400 18px/1.4 var(--sans);
  color: var(--text);
  background: var(--pole);
  border: 1px solid rgba(236, 230, 216, .16);
  border-radius: var(--r);
  padding: 14px 16px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.pole textarea { resize: vertical; min-height: 92px; }
.pole select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--zlato) 50%), linear-gradient(135deg, var(--zlato) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.pole input:hover, .pole select:hover, .pole textarea:hover { background-color: var(--pole-hover); }
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: none;
  border-color: var(--zlato);
  box-shadow: 0 0 0 3px rgba(200, 167, 90, .22);
}
.pole input::placeholder, .pole textarea::placeholder { color: var(--text-3); }
.pole--chyba input, .pole--chyba select, .pole--chyba textarea { border-color: var(--chyba); }
.pole__chyba { margin: 0; font-size: 14px; color: var(--chyba); }
.pole__napoveda { margin: 0; font-size: 13px; color: var(--text-3); }

.zaskrtavatko { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); cursor: pointer; }
.zaskrtavatko input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--zlato); flex: none; }

/* Past na roboty: mimo obrazovku, ne display:none (některé roboty skryté pole vynechají). */
.past { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.odeslat { display: grid; gap: 12px; justify-items: center; margin-top: 6px; text-align: center; }
.odeslat__pozn { margin: 0; font-size: 15px; color: var(--text-2); }
.odeslat__pozn strong { color: var(--zlato-svetle); font-weight: 600; }

/* ---------- Tlačítka ---------- */
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  padding: 13px 26px;
  font: 600 16px/1.2 var(--sans);
  letter-spacing: .03em;
  text-decoration: none;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s, background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.tlacitko--zlate {
  width: 100%;
  min-height: 56px;
  font-size: 18px;
  color: var(--noc-hluboka);
  background: linear-gradient(180deg, #E2C77F 0%, var(--zlato) 55%, var(--zlato-tmave) 100%);
  border-color: rgba(255, 236, 180, .35);
  box-shadow: 0 10px 30px rgba(200, 167, 90, .22), 0 1px 0 rgba(255, 255, 255, .35) inset;
}
.tlacitko--zlate:hover { color: var(--noc-hluboka); filter: brightness(1.06); box-shadow: 0 14px 36px rgba(200, 167, 90, .32), 0 1px 0 rgba(255, 255, 255, .35) inset; }
.tlacitko--zlate:active { transform: translateY(1px); }
.tlacitko--zlate[disabled] { opacity: .7; cursor: progress; }
.tlacitko--obrys { color: var(--zlato-svetle); border-color: var(--zlato); background: rgba(200, 167, 90, .06); }
.tlacitko--obrys:hover { color: var(--noc-hluboka); background: var(--zlato); }
.tlacitko--tiche { min-height: 42px; padding: 9px 16px; font-weight: 500; font-size: 15px; color: var(--text-2); background: rgba(236, 230, 216, .05); border-color: var(--linka-jemna); }
.tlacitko--tiche:hover { color: var(--text); border-color: var(--linka); }

/* ---------- Hlášky a štítky ---------- */
.hlaska { padding: 12px 16px; border-radius: var(--r); font-size: 15px; }
.hlaska--chyba { background: var(--chyba-pozadi); border: 1px solid rgba(240, 160, 144, .35); color: var(--chyba); }
.stitek {
  display: inline-block;
  padding: 5px 11px;
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  border-radius: 999px;
  color: var(--zlato-svetle);
  background: rgba(200, 167, 90, .12);
  border: 1px solid var(--linka);
}
.stitek--ok { color: var(--ok); background: var(--ok-pozadi); border-color: rgba(159, 211, 176, .35); }

/* ---------- Výběr z více akcí ---------- */
.vyber { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.karta--odkaz {
  display: grid; gap: 4px;
  padding: 26px 30px;
  text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .15s;
}
.karta--odkaz:hover { color: var(--text); border-color: var(--zlato); transform: translateY(-2px); }
.karta--odkaz .akce__druh { margin-bottom: 2px; }
.vyber__datum { font: 600 25px/1.15 var(--sans); letter-spacing: -.02em; }
.vyber__datum::first-letter { text-transform: uppercase; }
.vyber__meta { color: var(--text-2); }
.vyber__stav { margin-top: 8px; font-weight: 600; color: var(--zlato-svetle); }
.vyber__stav--zavreno { color: var(--text-3); font-weight: 500; }

/* ---------- Potvrzení a platba ---------- */
.potvrzeni { text-align: center; padding-bottom: 22px; border-bottom: 1px solid var(--linka-jemna); }
.potvrzeni > p:not(.potvrzeni__znak) { margin: 0 auto; max-width: 32em; color: var(--text-2); } /* znak má vlastní tmavou barvu na zlatém kolečku */
.potvrzeni .adresa { display: inline-block; max-width: 100%; overflow-wrap: anywhere; } /* e-mail celý na jeden řádek, ne „test-“ / „revize@…“ */
.potvrzeni__znak {
  width: 58px; height: 58px; margin: 0 auto 16px !important;
  display: grid; place-items: center;
  font: 600 28px/1 var(--sans);
  color: var(--noc-hluboka);
  background: linear-gradient(180deg, #E2C77F, var(--zlato-tmave));
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(200, 167, 90, .12);
}
.potvrzeni__znak--zrus { background: rgba(236, 230, 216, .12); color: var(--text-2); box-shadow: none; }

.souhrn { margin: 22px 0 6px; display: grid; gap: 0; }
.souhrn > div {
  display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linka-jemna);
}
.souhrn dt { color: var(--text-3); font-size: 14px; letter-spacing: .03em; padding-top: 2px; }
.souhrn dd { margin: 0; color: var(--text); }
.souhrn dd::first-letter { text-transform: uppercase; }

.platba { margin-top: 30px; }
.platba__hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.platba__telo { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }

.qr { margin: 0; text-align: center; }
.qr svg {
  width: 220px; height: 220px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(200, 167, 90, .45), 0 12px 32px rgba(0, 0, 0, .35);
}
.qr figcaption { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.jen-telefon { display: none; }

.udaje { margin: 0; display: grid; }
.udaje__radek { padding: 10px 0; border-bottom: 1px solid var(--linka-jemna); }
.udaje__radek:first-child { padding-top: 0; }
.udaje dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.udaje dd { margin: 3px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.udaje__hodnota { font: 500 19px/1.35 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; word-break: break-word; }
.udaje__radek--castka .udaje__hodnota, .udaje__radek--castka dd { font: 600 32px/1.1 var(--sans); letter-spacing: -.02em; color: var(--zlato-svetle); }
.udaje__radek--iban .udaje__hodnota { font-size: 15px; color: var(--text-2); letter-spacing: .02em; }
.udaje__pozn { flex-basis: 100%; font-size: 13px; color: var(--text-3); }

.kopirovat {
  font: 500 12px/1 var(--sans);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--zlato);
  background: transparent;
  border: 1px solid var(--linka);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}
.kopirovat:hover { color: var(--noc-hluboka); background: var(--zlato); border-color: var(--zlato); }
.kopirovat.je-hotovo { color: var(--ok); border-color: rgba(159, 211, 176, .5); background: transparent; }

.karta-platba { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linka-jemna); text-align: center; }
.karta-platba__pozn { margin: 10px 0 0; font-size: 13px; color: var(--text-3); }

.akce-odkazy { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px 0 12px; }
.karta--platba > .drobne { text-align: center; margin: 0; }

/* Text jen pro čtečku obrazovky (hlášení o zkopírování). */
.jen-ctecka { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Patička ---------- */
.pata { padding: 26px 0 0; text-align: center; font-size: 13px; color: var(--text-3); }
.pata p { margin: 0; }

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .ram { padding-top: 26px; }
  .hlava { margin-bottom: 18px; }
  .hlava__znak img { width: 52px; }
  .karta { padding: 30px 20px 28px; border-radius: 12px; }
  .karta::before { inset: 5px; }
  /* Na telefonu se pruh faktů láme nehezky, proto seznam: popisek vlevo, hodnota vpravo. */
  .fakta { display: grid; gap: 0; margin: 18px 0 24px; }
  .fakta__polozka { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; text-align: right; border-bottom: 1px solid var(--linka-jemna); }
  .fakta__polozka + .fakta__polozka { border-left: 0; }
  .fakta dt { flex: none; text-align: left; }
  .fakta dd { margin: 0; font-size: 18px; }
  .radek { grid-template-columns: 1fr 110px; gap: 12px; }
  .platba__telo { grid-template-columns: 1fr; gap: 22px; }
  /* Na telefonu jdou nejdřív údaje ke zkopírování, QR kód tímtéž telefonem nenaskenuješ. */
  .platba__telo .qr { order: 2; }
  .jen-pocitac { display: none; }
  .jen-telefon { display: block; max-width: 26em; margin: 0 auto; }
  .qr svg { width: 240px; height: 240px; margin: 0 auto; }
  .souhrn > div { grid-template-columns: 1fr; gap: 2px; }
  /* Kopírování je na telefonu hlavní akce, tlačítko musí jít pohodlně trefit prstem. */
  .kopirovat { min-height: 44px; padding: 0 16px; }
}
@media (max-width: 380px) {
  .radek { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  .pozadi, .akce-odkazy, .kopirovat, .karta-platba { display: none !important; }
  body { background: #fff; color: #000; }
  .karta { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .karta::before { display: none; }
  .nadpis, .souhrn dd, .udaje__hodnota, .akce__datum { color: #000; }
}