/* Stránka s dárkovými poukazy | šablona Studio Mech
   Neutrální rozložení. Barvy, písma a zaoblení jsou jen v proměnných,
   které nastavuje soubor motivu ve složce motivy/. Tady se u klienta
   nic měnit nemusí. */

:root {
  --sirka: 1180px;
  --okraj: clamp(20px, 5vw, 60px);
  --mezera: clamp(64px, 9vw, 120px);
  --chyba: #B4462B;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pozadi); color: var(--text); font: 400 1rem/1.65 var(--pismo-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--pismo-nadpis); font-weight: var(--nadpis-vaha); line-height: 1.12; letter-spacing: var(--nadpis-proklad); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.7rem); line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.15rem; letter-spacing: calc(var(--nadpis-proklad) * .4); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.obal { max-width: var(--sirka); margin: 0 auto; padding: 0 var(--okraj); }
.sekce { padding: var(--mezera) 0; }
.skryte { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; border: 0; }
[hidden] { display: none !important; }

/* Lišta */
.lista { background: var(--lista); color: var(--na-liste); border-bottom: 1px solid var(--linka); }
.lista .obal { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.znacka { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.znacka__mark { display: inline-flex; color: var(--znacka); }
.znacka__mark svg { width: 26px; height: 26px; }
.znacka__text { font: var(--nadpis-vaha) 1.25rem/1 var(--pismo-nadpis); letter-spacing: var(--nadpis-proklad); }
.znacka__text small { display: block; margin-top: 5px; font: 400 0.66rem/1 var(--pismo-text); letter-spacing: .2em; text-transform: uppercase; opacity: .65; }
.lista__info { font-size: 0.9rem; opacity: .75; }

/* Tlačítka a odkazy */
.tl { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border: 1px solid var(--akcent); border-radius: var(--zaobleni); background: var(--akcent); color: var(--na-akcentu); font: 500 0.94rem/1.2 var(--pismo-text); text-decoration: none; cursor: pointer; transition: opacity .2s, background-color .2s, color .2s; }
.tl:hover { opacity: .86; }
.tl:disabled { opacity: .6; cursor: progress; }
.tl--obrys { background: transparent; border-color: currentColor; color: inherit; }
.tl--obrys:hover { opacity: 1; background: var(--text); color: var(--pozadi); border-color: var(--text); }
.uvod .tl { background: var(--akcent-uvod); border-color: var(--akcent-uvod); color: var(--na-akcentu-uvod); }
.odk { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, var(--akcent) 70%, transparent); }

/* Úvod: úvodní fotka klienta přes celou šířku, text dole */
.uvod { position: relative; min-height: clamp(420px, 64vh, 600px); display: grid; align-items: end; color: #fff; background: var(--uvod-pozadi, var(--tmava)); overflow: hidden; }
.uvod__foto { position: absolute; inset: 0; }
.uvod__foto img { width: 100%; height: 100%; object-fit: cover; }
.uvod::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 45%, rgba(0,0,0,0) 65%), linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%); }
.uvod .obal { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(44px, 7vw, 80px); }
.uvod h1 { max-width: 16ch; }
.uvod p.uvod__text { max-width: 32rem; margin: 18px 0 28px; font-size: 1.05rem; color: rgba(255, 255, 255, .88); }

/* Objednávka: varianty a údaje vlevo, živý náhled poukazu vpravo */
.objednavka { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "varianty nahled" "udaje nahled"; gap: 44px clamp(40px, 6vw, 88px); align-items: start; }
.objednavka__varianty { grid-area: varianty; }
.objednavka__udaje { grid-area: udaje; }
.objednavka__nahled { grid-area: nahled; position: sticky; top: 24px; }
.krok-nadpis { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.krok-nadpis span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--akcent); color: var(--na-akcentu); font: 600 0.8rem/1 var(--pismo-text); }

/* Varianty jako karty s radiem */
.karty { display: grid; gap: 12px; }
/* .karta je <label> uvnitř .form, proto ruší jeho drobné písmo.
   Selektor .form .karta, jinak by vyhrálo .form label. */
.form .karta { gap: 2px 18px; font-size: 0.97rem; color: var(--text); }
.karta { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 20px 22px; border: 1px solid var(--linka); border-radius: var(--zaobleni); background: var(--plocha); cursor: pointer; transition: border-color .2s, background-color .2s; }
.karta:hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.karta input { position: absolute; opacity: 0; pointer-events: none; }
.karta__kolecko { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 45%, transparent); display: grid; place-items: center; }
.karta__kolecko::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--akcent); transform: scale(0); transition: transform .2s; }
.karta strong { display: block; font-weight: 500; line-height: 1.4; }
.karta small { display: block; color: var(--text-2); font-size: 0.86rem; line-height: 1.45; }
.karta__cena { font: var(--nadpis-vaha) 1.15rem/1 var(--pismo-nadpis); font-variant-numeric: tabular-nums; white-space: nowrap; }
.karta:has(input:checked) { border-color: var(--akcent); background: color-mix(in srgb, var(--akcent) 7%, var(--plocha)); }
.karta:has(input:checked) .karta__kolecko { border-color: var(--akcent); }
.karta:has(input:checked) .karta__kolecko::after { transform: scale(1); }
.karta:has(input:focus-visible) { outline: 2px solid var(--akcent); outline-offset: 2px; }
.vlastni { display: grid; gap: 10px; margin-top: 12px; padding: 18px 22px 20px; border: 1px solid var(--akcent); border-radius: var(--zaobleni); background: color-mix(in srgb, var(--akcent) 7%, var(--plocha)); }
.vlastni__pole { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; }
.vlastni #castka { width: 200px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); border-radius: calc(var(--zaobleni) * .75); background: var(--plocha); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.vlastni #castka:focus { border-color: var(--akcent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 22%, transparent); }

/* Formulář */
.form { display: grid; gap: 22px; }
.form__radek { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form label { display: grid; gap: 5px; font-size: 0.88rem; color: var(--text-2); }
.form label .nepovinne { opacity: .8; }
.form input:not([type="radio"]):not([type="checkbox"]), .form textarea { width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--linka); border-radius: 0; background: transparent; color: var(--text); font: 400 1rem/1.5 var(--pismo-text); }
.form textarea { min-height: 84px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--akcent); }
.form [aria-invalid="true"] { border-bottom-color: var(--chyba) !important; }
.vlastni #castka[aria-invalid="true"] { border-color: var(--chyba) !important; }
.form .tl { justify-self: start; }
.form__pozn { font-size: 0.86rem; color: var(--text-2); margin: 0; }
.pocitadlo { justify-self: end; margin-top: -16px; font-size: 0.78rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.chyba { margin: 0; padding: 14px 16px; border-radius: var(--zaobleni); background: color-mix(in srgb, var(--chyba) 10%, transparent); border: 1px solid var(--chyba); font-size: 0.95rem; }

/* Náhled poukazu: jednoduchá karta na světlém podkladu */
.podklad { padding: clamp(24px, 3.6vw, 44px); border-radius: var(--zaobleni); background: var(--plocha-2); }
.listek { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: var(--zaobleni); background: var(--plocha); color: var(--text); box-shadow: 0 1px 0 var(--linka), 0 22px 40px -28px rgba(0, 0, 0, .45); }
.listek::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--linka); border-radius: calc(var(--zaobleni) * .6); pointer-events: none; }
.listek__hlava { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; font: 500 0.7rem/1 var(--pismo-text); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.listek__hlava span:first-child { color: var(--akcent); }
.listek h3 { font-size: clamp(1.3rem, 1.9vw, 1.55rem); margin: 16px 0 6px; }
.listek__pro { margin: 0 0 4px; font-size: 0.95rem; color: var(--text-2); }
.listek__pro b { color: var(--text); font-weight: 500; }
.listek__venovani { min-height: 1.6em; margin: 12px 0 16px; font: italic 400 1.02rem/1.5 var(--pismo-nadpis); }
.listek__venovani:empty::before { content: "Sem přijde vaše věnování"; color: color-mix(in srgb, var(--text) 35%, transparent); }
.listek__spod { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--linka); font-size: 0.84rem; color: var(--text-2); }
.listek__spod b { display: block; color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nahled__pozn { margin-top: 14px; font-size: 0.86rem; color: var(--text-2); }

/* Děkovná obrazovka s platebními údaji a QR kódem */
.dekujeme { max-width: 880px; margin: 0 auto; }
.dekujeme__hlava { text-align: center; margin-bottom: clamp(30px, 4vw, 44px); }
.dekujeme__hlava p { margin-top: 14px; color: var(--text-2); }
.cislo { display: block; margin-top: 18px; font: var(--nadpis-vaha) clamp(2.4rem, 6vw, 3.6rem)/1 var(--pismo-nadpis); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cislo-popis { display: block; margin-top: 10px; font-size: 0.9rem; color: var(--text-2); }
.platba { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px clamp(32px, 5vw, 64px); align-items: center; padding: clamp(24px, 3.4vw, 40px); border-radius: var(--zaobleni); background: var(--plocha); border: 1px solid var(--linka); }
.platba dl { margin: 0; display: grid; gap: 0; }
.platba dl div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--linka); }
.platba dl div:first-child { border-top: 1px solid var(--linka); }
.platba dt { color: var(--text-2); font-size: 0.92rem; }
.platba dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.qr { text-align: center; }
.qr__obr { width: 216px; height: 216px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px var(--linka); }
.qr__obr svg { display: block; width: 100%; height: 100%; }
.qr p { margin-top: 10px; font-size: 0.82rem; color: var(--text-2); }
.dekujeme__dal { margin-top: 26px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.dekujeme__dal p { max-width: 36rem; color: var(--text-2); }
.upozorneni { padding: 12px 16px; border-radius: var(--zaobleni); background: color-mix(in srgb, var(--akcent) 12%, transparent); border: 1px solid var(--akcent); font-size: 0.92rem; color: var(--text) !important; }

/* Jak to funguje: tři karty */
.svetla { background: var(--plocha-2); }
.kroky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(30px, 4vw, 44px); }
.kroky li { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 32px); background: var(--plocha); border-radius: var(--zaobleni); box-shadow: 0 1px 0 var(--linka), 0 18px 30px -26px rgba(0, 0, 0, .4); }
.kroky__cislo { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 50%; border: 1px solid var(--akcent); color: var(--akcent); font: 500 1.05rem/1 var(--pismo-text); }
.kroky li:last-child .kroky__cislo { background: var(--akcent); color: var(--na-akcentu); }
.kroky h3 { font-size: 1.1rem; margin-bottom: 8px; }
.kroky p { color: var(--text-2); font-size: 0.94rem; }

/* Podmínky a údaje o prodávajícím */
.podminky { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--linka); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(32px, 5vw, 72px); }
.podminky h3 { font-size: 1.1rem; }
.podminky ul { display: grid; gap: 8px; color: var(--text-2); }
.podminky li { position: relative; padding-left: 18px; }
.podminky li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--akcent); }
.podminky__text { display: grid; gap: 10px; color: var(--text-2); }
.podminky ul + h3, .podminky ul + h3 + .podminky__text { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--linka); }

/* Patička */
.paticka { background: var(--tmava); color: color-mix(in srgb, var(--na-tmave) 72%, transparent); padding: 36px 0; font-size: 0.9rem; }
.paticka .obal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; }
.paticka a { color: var(--na-tmave); }

@media (max-width: 900px) {
  .objednavka { grid-template-columns: 1fr; grid-template-areas: "varianty" "nahled" "udaje"; gap: 36px; }
  .objednavka__nahled { position: static; }
  .platba { grid-template-columns: 1fr; justify-items: center; }
  .platba dl { width: 100%; }
  .kroky, .podminky { grid-template-columns: 1fr; }
  .podminky ul + h3 + .podminky__text { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 560px) {
  .form__radek { grid-template-columns: 1fr; }
  .karta { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 18px; }
  .vlastni { padding: 16px 18px 18px; }
  .vlastni #castka { width: 100%; max-width: 220px; }
  .karta__cena { grid-column: 2; }
  .platba dl div { grid-template-columns: 1fr; gap: 0; }
  .lista__info { display: none; }
  .listek__hlava { letter-spacing: .14em; }
}

/* Tisk: jen údaje k platbě */
@media print {
  body { background: #fff; font-size: 11pt; }
  .ukazka-pruh, .lista, .uvod, #objednat, .svetla, .paticka, .dekujeme__dal .tl, .upozorneni { display: none !important; }
  .sekce { padding: 0; }
  .platba { border: 1px solid #999; background: #fff; break-inside: avoid; }
  .qr__obr { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .karta, .karta__kolecko::after, .tl { transition: none; } }
.vlastni #castka { -moz-appearance: textfield; appearance: textfield; }
.vlastni #castka::-webkit-outer-spin-button, .vlastni #castka::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }