/*
 * Veřejná stránka prodeje dárkových poukazů.
 *
 * Statický soubor v public/ záměrně: nasazení nespouští npm, takže
 * sestavovaný asset by se na produkci neobnovil. Verzuje se přes ?v=
 * s časem změny souboru, aby prohlížeč nedržel starou verzi.
 */

:root { --navy:#142a4a; --peach:#e8a66c; --cream:#f0e3d6; --card:#f7ece1; --line:#e2d2c0; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Urbanist',sans-serif; color:var(--navy); background:var(--cream); }
.serif { font-family:'amandine',Georgia,serif; font-weight:400; }
.wrap { max-width:1160px; margin:0 auto; padding:0 20px; }

header { padding:34px 0 22px; display:flex; align-items:center; justify-content:center;
         gap:26px; flex-wrap:wrap; position:relative; }
.back { position:absolute; left:20px; top:38px; color:#5b6b80; text-decoration:none; font-size:14px; }
.back:hover { color:var(--navy); }
.brand { display:flex; align-items:center; gap:26px; }
.brand img { height:26px; }
.brand .sep { width:1px; height:44px; background:var(--line); }
h1 { margin:0; font-size:44px; line-height:1.1; letter-spacing:-.01em; }

.badges { display:flex; justify-content:center; gap:56px; flex-wrap:wrap; margin:6px 0 30px; }
.badge { display:flex; align-items:center; gap:10px; font-size:15px; color:#3d4d63; }
.badge .ico { width:38px; height:38px; border-radius:50%; background:#e7d8c6;
              display:flex; align-items:center; justify-content:center; }
.badge img { width:20px; height:20px; }

/*
 * height:auto je tu povinné. Obrázek má v HTML rozměry 725×360 (drží
 * místo, než se dotáhne) a bez tohohle by si prohlížeč nechal výšku
 * 360 px i po zúžení šířky – na mobilu se poukaz svisle roztáhl.
 */
.hero { max-width:600px; margin:0 auto -120px; display:block; width:100%; height:auto; }

/* Karta překrývá spodek fotky – proto vyšší vrstva než obrázek. */
form { position:relative; z-index:1; }

form { background:var(--card); border-radius:28px; padding:46px 60px; max-width:760px;
       margin:0 auto; box-shadow:0 20px 60px rgba(20,42,74,.07); }
/* S fotkou poukazu se formulář podsune pod ni jako v návrhu. */
.hero + form { padding-top:130px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; }
label { display:block; font-size:14px; color:#3d4d63; margin:0 0 6px; }
input[type=text], input[type=email], input[type=tel], input[type=number], textarea {
    width:100%; font-family:inherit; font-size:16px; color:var(--navy); background:transparent;
    border:1px solid var(--line); border-radius:12px; padding:13px 15px; }
input:focus, textarea:focus { outline:none; border-color:var(--peach); }
textarea { resize:vertical; min-height:56px; }

/*
 * Odsazení nadpisu musí být na fieldsetu, ne na legendě: prohlížeč
 * legendu vykresluje napevno na horní hraně fieldsetu a její margin-top
 * ani padding fieldsetu s ní nehnou. Nadpis odděluje osobní údaje od
 * výběru částky, tak ať kolem něj je vzduch.
 */
fieldset { border:none; margin:64px 0 0; padding:0; }
legend { display:block; width:100%; text-align:center; font-size:30px; margin:0 0 24px; padding:0; }

/* Viditelné zaměření klávesnicí – bez něj se formulář nedá projít Tabem. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline:2px solid var(--navy); outline-offset:2px; }
.amounts { display:flex; justify-content:center; gap:26px; flex-wrap:wrap; align-items:center; }
.amount { display:flex; align-items:center; gap:8px; font-size:16px; cursor:pointer; position:relative; }
.amount input { width:18px; height:18px; accent-color:var(--navy); }
.amount.on { font-weight:700; }
.tag { background:var(--navy); color:#fff; font-size:11px; font-weight:700; border-radius:999px;
       padding:2px 8px; position:absolute; left:50%; transform:translateX(-50%); top:26px; white-space:nowrap; }
.custom { background:none; border:none; font-family:inherit; font-size:16px; color:var(--navy);
          text-decoration:underline; cursor:pointer; padding:0; }
.custom-wrap { max-width:260px; margin:22px auto 0; display:none; }
.custom-wrap.on { display:block; }

.totals { display:flex; justify-content:center; gap:70px; align-items:flex-start; margin:34px 0 10px;
          text-align:center; }
.totals span { display:block; font-size:14px; color:#3d4d63; margin-bottom:10px; }
.qty { display:flex; align-items:center; gap:12px; justify-content:center; }
.qty button { width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
              background:transparent; color:var(--navy); font-size:20px; cursor:pointer; }
.qty b { min-width:22px; font-size:17px; }
.total { font-size:30px; }

.agree { display:flex; align-items:flex-start; gap:9px; justify-content:center; margin:26px 0 22px;
         font-size:14px; color:#3d4d63; }
.agree input { margin-top:3px; width:17px; height:17px; accent-color:var(--navy); }
.agree a { color:var(--navy); }

.turnstile { display:flex; justify-content:center; margin:0 0 18px; }

.submit { display:block; margin:0 auto; background:var(--peach); color:#3d2a12; border:none;
          border-radius:14px; padding:17px 42px; font-family:inherit; font-size:16px;
          font-weight:600; cursor:pointer; }
.submit:hover { filter:brightness(.97); }
.hint { text-align:center; font-size:13.5px; color:#7a8798; margin:12px 0 0; }
.note { font-size:13px; color:#7a8798; margin:8px 0 0; line-height:1.45; }
.err { background:#fdf1f0; border:1px solid #e8b6b1; color:#8c1d18; border-radius:12px;
       padding:12px 16px; font-size:14px; margin:0 0 20px; }
.err ul { margin:6px 0 0; padding-left:18px; }

.pay { display:flex; justify-content:center; margin:44px 0 80px; }
.pay img { height:36px; max-width:100%; }

footer { display:grid; grid-template-columns:repeat(4,1fr) 320px; gap:40px; padding:0 0 60px; }
footer h3 { font-size:15px; font-weight:600; margin:0 0 18px; }
footer ul { list-style:none; margin:0; padding:0; }
footer li { margin-bottom:11px; }
footer a { color:#3d4d63; text-decoration:none; font-size:14px; }
footer a:hover { color:var(--navy); text-decoration:underline; }
.contacts { background:var(--card); border-radius:22px; padding:26px 28px; }
.contacts .row { display:flex; align-items:flex-start; gap:11px; margin-bottom:15px; font-size:14px; }
.contacts .row:last-child { margin-bottom:0; }
.contacts svg { width:17px; height:17px; flex-shrink:0; margin-top:2px; stroke:#3d4d63; }
.hours { background:#e7d8c6; border-radius:999px; padding:2px 9px; font-size:12px; color:#3d4d63;
         white-space:nowrap; margin-left:6px; }
/* Popisek nad adresou – odlišuje, kam se jezdí, a kam chodí pošta. */
.place { display:block; font-size:12px; color:#8a95a4; letter-spacing:.04em; text-transform:uppercase; }

/* Vodoznak přes celou šířku, dole useknutý jako v návrhu. */
.watermark { overflow:hidden; height:12vw; user-select:none; pointer-events:none; }
.watermark div { font-size:15.4vw; line-height:1; color:#e6d1bb; text-align:center;
                 white-space:nowrap; margin-top:-.06em; }

@media (max-width:980px) {
    footer { grid-template-columns:1fr 1fr; gap:30px; }
    .contacts { grid-column:1 / -1; }
}

@media (max-width:760px) {
    h1 { font-size:32px; }
    .brand { gap:14px; }
    .badges { gap:24px; }
    form { padding:34px 22px; border-radius:22px; }
    /* Fotka je na mobilu nižší, tak i překryv menší – jinak by z poukazu
       zbyl proužek. Odsazení formuláře jde s ním ruku v ruce. */
    .hero { margin-bottom:-70px; }
    .hero + form { padding-top:96px; }
    fieldset { margin-top:48px; }
    legend { font-size:26px; margin-bottom:20px; }
    .grid { grid-template-columns:1fr; }
    .totals { gap:34px; }
    footer { grid-template-columns:1fr; }
    .back { position:static; display:block; text-align:center; margin-bottom:10px; }
}

@media (max-width:480px) {
    .hero { margin-bottom:-48px; }
    .hero + form { padding-top:76px; }
}

/* --- Vložení do cizí stránky (iframe) ------------------------------------
   V rámu nese pozadí i šířku nadřazená stránka; vlastní vodoznak a horní
   odsazení by uvnitř rámu jen vyrábělo prázdné pásy. */
body.embed { background:transparent; }
body.embed .wrap { padding-top:0; }
body.embed .watermark { display:none; }

/* Mezikrok před odchodem na platební bránu. */
.pay-bridge { max-width:520px; margin:0 auto; padding:48px 0; text-align:center; }
.pay-bridge h1 { font-size:26px; margin:0 0 12px; }
.pay-bridge p { margin:0 0 18px; }
.pay-bridge .btn {
    display:inline-block; padding:14px 28px; border-radius:999px;
    background:var(--navy); color:#fff; text-decoration:none; font-weight:600;
}
.pay-bridge .btn.ghost {
    background:transparent; color:var(--navy); border:1.5px solid rgba(20,42,74,.22); margin-left:8px;
}