/*
 * Registrace na webinář a stránka po registraci, styl Zápisník (papír s tečkami,
 * lepicí pásky, polaroid, ručně psané poznámky). Načítá se za web.css jen na
 * stránkách modulu Webináře. Barvy z brandu (web_* v klient/brand.php, jinak
 * barvy aplikace), písma jen z aplikace (assets/pisma, od 15. 9. 2026 i Oswald,
 * Work Sans a Kalam jako ve schváleném náhledu), nic z cizích serverů:
 * nadpisy Oswald, text Work Sans, ručně psané poznámky Kalam; když se písmo
 * nenačte, záloha je písmo značky (Manrope) a systémové ručně psané písmo.
 */
:root {
  --w-papir: var(--ground); --w-tecky: var(--border-strong); --w-list: var(--surface); --w-text: var(--ink); --w-text-jemny: var(--ink-soft);
  --w-akcent: var(--accent); --w-akcent-stin: var(--accent-2); --w-akcent-svetly: var(--accent-soft); --w-akcent-text: var(--accent-2);
  --w-doplnkova: var(--second-soft); --w-doplnkova-2: var(--warn-soft); --w-doplnkova-3: var(--accent-soft); --w-bez: var(--surface-2);
  --w-stin: 0 1px 1px rgba(70, 50, 20, .08), 0 14px 30px -14px rgba(70, 50, 20, .35);
  --w-nadpis: "Oswald", var(--font-head);
  --w-text-pismo: "Work Sans", var(--font);
  --w-ruka: "Kalam", "Segoe Print", "Chalkboard SE", "Bradley Hand", "Noteworthy", cursive;
}

body.v-webinar {
  color: var(--w-text); font-family: var(--w-text-pismo); font-size: 17px; line-height: 1.6; overflow-x: clip;
  background: var(--w-papir) radial-gradient(var(--w-tecky) 1.1px, transparent 1.3px) 0 0 / 22px 22px;
}
.v-webinar a { color: inherit; }
.v-webinar p { margin: 0 0 1em; }
.v-webinar img { max-width: 100%; display: block; }
.v-webinar h1, .v-webinar h2, .v-webinar h3 {
  margin: 0; font-family: var(--w-nadpis); font-weight: 600; text-transform: uppercase; line-height: 1.14; letter-spacing: .01em; color: var(--w-text);
}
.w-ruka { font-family: var(--w-ruka); font-weight: 400; line-height: 1.25; }

/* hlavička a obsah přes celou šířku (sekce si šířku hlídají samy) */
.v-webinar .v-hlava { max-width: 1040px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; }
.v-webinar .v-logo-cele { height: auto; width: 146px; }
.v-hlava-pozn { font-family: var(--w-ruka); font-size: 17px; color: var(--w-akcent-text); text-align: right; line-height: 1.2; }
.v-webinar .v-obsah { max-width: none; padding: 0; }
.w-obal { width: min(1040px, 100% - 36px); margin-inline: auto; }
.w-uzke { width: min(620px, 100% - 36px); margin-inline: auto; }
.w-nahled { width: min(1040px, 100% - 36px); margin: 0 auto 14px; background: var(--w-text); color: #fff; border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 650; }

/* tlačítka */
.w-tl { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 14px; font-weight: 700; font-size: 16.5px;
  text-decoration: none; border: 0; cursor: pointer; font-family: inherit; text-align: center; line-height: 1.25; }
.v-webinar .w-tl-o { background: var(--w-akcent); color: var(--w-text); box-shadow: 0 3px 0 var(--w-akcent-stin); }
.w-tl-o:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--w-akcent-stin); }
.w-tl-o:disabled { opacity: .55; cursor: not-allowed; }
.v-webinar .w-tl-c { background: var(--w-text); color: #fff; }
.w-tl-cely { width: 100%; }

/* list papíru, pásky, polaroid */
.w-list { position: relative; background: var(--w-list); border-radius: 18px; box-shadow: var(--w-stin); padding: 30px 22px 26px; }
.w-naklon-l { transform: rotate(-1deg); }
.w-naklon-p { transform: rotate(.8deg); }
.w-paska { position: absolute; width: 110px; height: 30px; background: color-mix(in srgb, var(--w-doplnkova) 82%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  z-index: 3; top: -14px; left: 50%; margin-left: -55px; transform: rotate(-3deg); }
.w-paska.w-p2 { background: color-mix(in srgb, var(--w-doplnkova-2) 80%, transparent); }
.w-paska.w-p3 { background: color-mix(in srgb, var(--w-doplnkova-3) 80%, transparent); }
.w-paska.w-p4 { background: color-mix(in srgb, var(--w-akcent-svetly) 90%, transparent); }
.w-paska.w-paska-bila { background: rgba(255, 255, 255, .55); }
.w-polaroid { position: relative; background: #fff; padding: 12px 12px 0; box-shadow: var(--w-stin); border-radius: 6px; margin: 0; }
.w-polaroid img { border-radius: 3px; aspect-ratio: 1 / 1.1; object-fit: cover; width: 100%; height: auto; }
.w-polaroid figcaption { font-family: var(--w-ruka); font-size: 19px; text-align: center; padding: 8px 0 10px; }

/* úvod: název, termín, odpočet */
.w-uvod { padding: 6px 0 40px; }
.w-uvod .w-list { padding: 34px 22px 26px; }
.w-kicker { font-size: 22px; color: var(--w-akcent-text); transform: rotate(-2deg); display: inline-block; }
.w-uvod h1 { font-size: clamp(36px, 10.6vw, 78px); line-height: 1.06; margin: 4px 0 10px; overflow-wrap: anywhere; }
.w-zv { position: relative; white-space: nowrap; }
.w-zv svg { position: absolute; left: -4%; bottom: -8px; width: 108%; height: 20px; color: var(--w-akcent); }
.w-perex { font-size: 18px; margin: 18px 0; max-width: 40ch; }
/* tah fixy pod názvem sahá 25 px pod nadpis a s Oswaldem zasahoval do perexu (15. 9. 2026);
   dvě třídy, aby pravidlo přebilo obecné .v-webinar p { margin: 0 0 1em } */
.w-uvod .w-perex { margin-top: 42px; }
.w-termin { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: var(--w-akcent-svetly); border-radius: 12px; padding: 8px 14px; font-weight: 600; font-size: 15px; }
.w-termin b { font-family: var(--w-nadpis); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.w-odpocet { display: flex; gap: 8px; margin: 12px 0 0; }
.w-odpocet[hidden] { display: none; }
.w-odpocet div { background: var(--w-text); color: #fff; border-radius: 12px; padding: 8px 0 6px; min-width: 62px; text-align: center; }
.w-odpocet b { display: block; font-family: var(--w-nadpis); font-weight: 800; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.w-odpocet span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
/* nepovinný souhlas s novinkami pod polem e-mail (nezaškrtnutý) */
.w-souhlas { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 14px; line-height: 1.45; color: var(--w-text-jemny); cursor: pointer; }
.w-souhlas input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--w-akcent-stin); cursor: pointer; }
/* stránka po registraci s nabídkou: nahoře jen krátké potvrzení, hned pod ním nabídka, kroky až pod ní
   (Jana 15. 9. 2026: „upsell přehlédnutelný … někdo nesjede dolů“) */
.w-potvrzeno { padding: 10px 0 0; }
.w-potvrzeno-radek { display: flex; gap: 12px; align-items: flex-start; margin: 0; background: var(--w-list); border: 1px solid var(--w-tecky);
  border-left: 5px solid #4C7A45; border-radius: 10px; padding: 12px 16px; font-size: 15.5px; line-height: 1.45; box-shadow: var(--w-stin); }
.w-fajfka { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #4C7A45; position: relative; margin-top: 1px; }
.w-fajfka::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.w-nabidka-nahore { padding-top: 14px; }
.w-nabidka-nahore .w-nad { font-size: 21px; }
.w-nabidka-nahore .w-odpocet-nabidka div { min-width: 76px; padding: 10px 0 8px; }
.w-nabidka-nahore .w-odpocet-nabidka b { font-size: 34px; }
.w-hotovo-kroky .w-list { padding-top: 26px; }
.w-kroky-nadpis { font-size: clamp(24px, 6vw, 34px); margin-bottom: 4px; }
/* odpočet krátké nabídky po registraci (30 minut): v rohu karty nabídky, meruňkový */
.w-odpocet-nabidka { justify-content: center; margin: 4px 0 14px; }
.w-odpocet-nabidka div { background: var(--w-akcent); color: var(--w-text); box-shadow: 0 3px 0 var(--w-akcent-stin); }
.w-nabidka[hidden] { display: none; }
.w-zaznam { display: block; margin-top: 12px; font-size: 19px; color: var(--w-akcent-text); }

/* registrace: ústřižek s nůžkami */
.w-registrace { padding: 34px 0 50px; scroll-margin-top: 12px; }
.w-ustrizek { position: relative; border: 2.5px dashed color-mix(in srgb, var(--w-text) 45%, var(--w-papir)); border-radius: 22px; padding: 28px 20px 22px;
  background: color-mix(in srgb, var(--w-list) 85%, transparent); }
.w-nuzky { position: absolute; top: -17px; left: 24px; width: 34px; height: 34px; background: var(--w-papir); padding: 3px; color: var(--w-text); }
.w-registrace h2 { font-size: clamp(28px, 8vw, 42px); margin: 4px 0 6px; }
.w-pod { font-size: 15.5px; color: var(--w-text-jemny); margin: 0 0 10px; }
.w-pole { margin: 0 0 6px; }
.w-pole label { position: absolute; left: -9999px; }
.w-pole input { width: 100%; height: 54px; border: 0; border-bottom: 2px solid var(--w-text); background: transparent; padding: 0 4px; font: inherit; font-size: 17px; border-radius: 0; color: var(--w-text); }
.w-pole input::placeholder { font-family: var(--w-ruka); font-size: 20px; color: color-mix(in srgb, var(--w-text) 50%, var(--w-papir)); }
.w-pole input:focus { outline: none; border-bottom-color: var(--w-akcent-text); background: color-mix(in srgb, var(--w-akcent-svetly) 35%, transparent); }
.w-ustrizek .w-tl { margin-top: 18px; }
.w-drobne { display: block; font-size: 13.5px; color: var(--w-text-jemny); margin-top: 12px; line-height: 1.5; }
.w-drobne a { text-decoration: underline; text-underline-offset: 3px; }
.w-pozn { display: block; text-align: center; margin-top: 14px; font-size: 19px; color: var(--w-akcent-text); }
.w-chyby { background: var(--crit-soft); color: var(--crit); border-radius: 12px; padding: 10px 14px; margin: 4px 0 10px; font-weight: 650; font-size: 14.5px; }
.w-chyby p { margin: 0; }
.w-chyby p + p { margin-top: 6px; }
.w-zavreno h2 { font-size: clamp(24px, 6.5vw, 34px); }
.w-zavreno p { margin: 10px 0 0; color: var(--w-text-jemny); }
.w-zavreno a { text-decoration: underline; }

/* co zjistí, o mně, reference, závěr */
.w-titulek .w-ruka { display: block; font-size: 21px; color: var(--w-akcent-text); }
.w-co, .w-omne, .w-reference { padding: 30px 0 50px; }
.w-co h2, .w-omne h2, .w-reference h2 { font-size: clamp(30px, 8.6vw, 50px); margin: 2px 0 18px; }
.w-fajfky { list-style: none; margin: 0 0 6px; padding: 0; }
.w-fajfky li { position: relative; padding: 5px 0 5px 34px; }
.w-fajfky li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--w-akcent-text); transform: rotate(-8deg); }
.w-fajfky li::after { content: ""; position: absolute; left: 7px; top: 15px; width: 10px; height: 6px; border-left: 2px solid var(--w-akcent-text); border-bottom: 2px solid var(--w-akcent-text); transform: rotate(-50deg); }
.w-pro-koho { margin-top: 14px; color: var(--w-text-jemny); }
.w-pro-koho p:last-child { margin-bottom: 0; }
.w-omne .w-polaroid { width: 72%; margin: 0 auto 26px; transform: rotate(-3deg); }
.w-cisla { display: flex; gap: 10px; margin-top: 16px; }
.w-cisla div { flex: 1; background: var(--w-list); border-radius: 14px; padding: 12px 8px; text-align: center; box-shadow: var(--w-stin); }
.w-cisla b { display: block; font-family: var(--w-nadpis); font-weight: 800; font-size: 22px; line-height: 1.05; }
.w-cisla span { font-size: 12.5px; color: var(--w-text-jemny); line-height: 1.3; display: block; margin-top: 4px; }
.w-seznam { display: grid; gap: 22px; }
.w-listecek { position: relative; background: var(--w-doplnkova-2); padding: 28px 22px 22px; box-shadow: var(--w-stin); border-radius: 4px 4px 22px 4px; transform: rotate(-1.5deg); }
.w-listecek.w-pudr { background: color-mix(in srgb, var(--w-doplnkova-3) 42%, #fff); transform: rotate(1.2deg); }
.w-listecek p { font-size: 16.5px; }
.w-kdo { display: flex; align-items: center; gap: 12px; }
.w-kdo b { display: block; line-height: 1.2; }
.w-kdo small { color: color-mix(in srgb, var(--w-text) 70%, var(--w-doplnkova-2)); font-size: 13.5px; }
.w-ini { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .65); display: grid; place-items: center; font-family: var(--w-nadpis); font-weight: 800; font-size: 20px; }
.w-zaver { padding: 20px 0 30px; }
.w-zaver .w-list { text-align: center; }
.w-zaver p { font-size: 18px; max-width: 34ch; margin: 0 auto 18px; }

/* stránka po registraci */
.w-hotovo { padding: 6px 0 34px; }
.w-hotovo .w-list { padding: 34px 22px 26px; }
.w-velka { font-size: 24px; color: var(--w-akcent-text); display: block; transform: rotate(-2deg); }
.w-hotovo h1 { font-size: clamp(34px, 9.6vw, 66px); line-height: 1.08; margin: 6px 0 12px; }
.w-hotovo .w-perex { margin: 0 0 16px; max-width: none; }
.w-kroky { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: k; }
.w-kroky li { counter-increment: k; position: relative; background: var(--w-bez); border-radius: 16px; padding: 16px 16px 16px 62px; }
.w-kroky li::before { content: counter(k); position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--w-text); color: #fff;
  display: grid; place-items: center; font-family: var(--w-nadpis); font-weight: 800; font-size: 18px; }
.w-kroky b { display: block; font-size: 17px; margin-bottom: 2px; }
.w-kroky p { margin: 0 0 10px; font-size: 15.5px; color: var(--w-text-jemny); }
.w-kroky .w-tl { min-height: 46px; padding: 0 18px; font-size: 15px; }
.w-dvoje { display: flex; flex-wrap: wrap; gap: 8px; }
.w-nowrap { white-space: nowrap; }

/* stránka se záznamem */
.w-zaznam .w-hotovo h1 { font-size: clamp(30px, 8.4vw, 54px); }
.w-zaznam .w-velka { font-size: 21px; }
.w-prehravac { position: relative; aspect-ratio: 16 / 9; margin: 18px 0 16px; border-radius: 14px; overflow: hidden; background: var(--w-text); box-shadow: var(--w-stin); }
.w-prehravac iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.w-zaznam .w-odpocet { margin: 4px 0 6px; }
.w-nabidka { padding: 26px 0 50px; }
.w-nad { display: block; font-size: 22px; color: var(--w-akcent-text); margin: 0 0 22px; text-align: center; }
.w-karta { position: relative; background: var(--w-doplnkova); border-radius: 18px; box-shadow: var(--w-stin); padding: 32px 22px 24px; transform: rotate(-.6deg); }
.w-tab { position: absolute; top: -16px; left: 22px; padding: 4px 14px 6px; border-radius: 10px 10px 0 0; background: var(--w-text); color: #fff;
  font-family: var(--w-nadpis); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.w-karta h2 { font-size: clamp(30px, 8.6vw, 48px); line-height: 1.08; margin: 0 0 10px; }
.w-cena { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.w-cena b { font-family: var(--w-nadpis); font-weight: 800; font-size: 44px; line-height: 1; }
.w-cena s { font-size: 20px; color: color-mix(in srgb, var(--w-text) 62%, var(--w-doplnkova)); }
.w-cena .w-ruka { font-size: 19px; color: var(--w-akcent-text); }
.w-karta p { color: color-mix(in srgb, var(--w-text) 82%, var(--w-doplnkova)); }
.w-karta .w-fajfky li::before, .w-karta .w-fajfky li::after { border-color: var(--w-text); }
.w-karta .w-listecek { margin: 18px 0 20px; transform: rotate(1deg); }
.w-stred { text-align: center; }
.w-karta .w-drobne { margin-top: 12px; }

/* patička */
.v-webinar .v-pata { padding: 36px 16px 44px; font-size: 14px; color: var(--w-text-jemny); }
.v-webinar .v-pata a { color: var(--w-text-jemny); }

@media (min-width: 900px) {
  .w-obal { width: min(1040px, 100% - 80px); }
  .v-webinar .v-hlava { padding: 18px 40px; }
  .v-webinar .v-logo-cele { width: 170px; }
  .w-uvod .w-obal { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
  .w-uvod .w-list { padding: 50px 46px 40px; }
  .w-registrace { padding-top: 24px; }
  .w-omne .w-obal { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
  .w-omne .w-obal.w-bez-fota { grid-template-columns: 1fr; max-width: 720px; }
  .w-omne .w-polaroid { width: 100%; }
  .w-seznam { grid-template-columns: 1fr 1fr; }
  .w-hotovo .w-list { padding: 48px 46px 38px; }
  .w-karta { padding: 44px 44px 34px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* menu webu ve stylu Zápisník (prodejky, které jsou v menu) */
.v-webinar .v-menu { max-width: 1040px; padding: 0 18px 8px; }
.v-webinar .v-menu a { font-family: var(--w-nadpis); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--w-text); }
.v-webinar .v-menu a[aria-current="page"] { background: var(--w-text); color: #fff; }
@media (min-width: 768px) { .v-webinar .v-menu { padding: 0 40px 10px; } .v-webinar .v-menu ul { justify-content: flex-start; } .v-webinar .v-menu li:first-child { margin-left: auto; } }
/* fotka klientky u psané reference místo počátečního písmene (Míša 11. 10. 2026) */
img.w-ini-foto { width: 64px; height: 64px; object-fit: cover; padding: 0; background: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
/* stránka se záznamem: na počítači nabídka vedle videa, ať ji nikdo nepřehlédne (Míša 13. 10. 2026), na mobilu pod ním */
@media (min-width: 1100px) {
  .w-zaznam-mrizka.s-nabidkou { display: grid; grid-template-columns: minmax(0, 640px) 400px; justify-content: center; column-gap: 32px; align-items: start; padding: 0 24px; }
  .w-zaznam-mrizka.s-nabidkou .w-uzke { width: auto; margin: 0; }
  .w-zaznam-mrizka.s-nabidkou .w-nabidka { padding: 0; }
  .w-zaznam-mrizka.s-nabidkou .w-nabidka .w-nad { margin-top: 0; }
  .w-zaznam-mrizka.s-nabidkou .w-karta { padding: 34px 32px 28px; }
  .w-zaznam-mrizka.s-nabidkou .w-karta h2 { font-size: 38px; }
}