/* ============================================================
   Leadhub welcome popup – STŘEDOVÝ DVOUSLOUPCOVÝ MODAL (V2.3)
   Vzor: popup na blog.leadhub.co („Buďte v obraze!")
   ------------------------------------------------------------
   Changelog:
   V2.6 (2. 7. 2026 večer) — MOBIL: obě obrazovky ukotveny na
     STEJNÉ místo (6svh od horního okraje, jen translateX) →
     děkovná obrazovka už neskáče dolů; vertikální centrování
     na mobilu zrušeno. OVERLAY: zpět ::before na wrapperu
     (jeden selektor pro obě obrazovky, + pointer-events:none);
     outline NEfunguje — Chrome zakulacuje vnější okraj podle
     border-radius a při 1600 px nechá rohy viewportu nepokryté.
   V2.5 (2. 7. 2026 večer) — NADPIS = jen 1. vnořený řádek pole
     Nadpis, další řádky = běžný text. (Leadhub vkládá texty jako
     vnořené divy uvnitř jednoho elementu → dřívější pravidlo
     stylovalo celé pole jako nadpis.) Platí pro obě obrazovky,
     desktop i mobil. Texty v Leadhubu není nutné přeskládávat —
     stačí smazat duplicitní 2. blok („Nic nedorazilo?…").
   V2.4 (2. 7. 2026 večer) — OVERLAY přes outline na kartě
     (1600 px) místo ::before na wrapperu: SDK nechává v DOM
     skryté prvky s inputy → wrapper selektor :not(:has(input))
     naostro selhával (děkovná obrazovka bez ztmavení). Outline
     je nezávislý na okolním DOM; ověřeno živě (900 i 1600 px;
     pozor, extrémní hodnoty ~2500+ px Chrome nevykreslí).
     MOBIL: max-height v svh (iOS lišta Safaři ořezávala spodek)
     + odsazení obsahu přes min(..., svh).
   V2.3 (2. 7. 2026) — DĚKOVNÁ OBRAZOVKA: stejné středové
     dvousloupcové zobrazení jako Výzva k akci (pozná se podle
     obrázku a absence formulářových polí). PODMÍNKA: v Leadhubu
     přidat do Děkovné obrazovky obrázek a ODEBRAT zelené ✓
     (jinak selektor nechytí správný prvek). Po nasazení ověřit
     testovacím přihlášením.
   V2.2 (2. 7. 2026) — obrázek s bílým rámem 16 px (desktop);
     mobil: obrázek jako pozadí celého panelu s bílým přechodem
     pod formulářem (celý maskot viditelný, formulář čitelný).
   V2.1 — křížek 28px kolečko; mobilní výřez fotky.
   V2   — dvousloupcový grid, střed, overlay, mobilní varianta.

   Co dělá:
   - Rozbalená „Výzva k akci" se vycentruje jako dvousloupcový
     modal: FOTO vlevo (s rámem), obsah vpravo.
   - Celostránkový tmavý překryv (brand navy).
   - Souhlas GDPR pod tlačítkem, tlačítko #E8650D, nadpis #0F3A5F.
   - Mobil (≤640 px): jeden sloupec, foto jako pozadí panelu,
     obsah začíná ~210 px od shora, bílý gradient pro čitelnost.

   Živě ověřeno na topepoxy.eu 2. 7. 2026.
   Kam vložit: Shoptet administrace → Vzhled → Editor CSS.

   Jak to funguje / proč takhle:
   - Popup poznáváme strukturálně přes
     :has(> input[placeholder="Váš e-mail"]) — NE přes hashované
     třídy Leadhubu (mění se při deployi SDK). Rozbije to jen
     přejmenování pole „Váš e-mail" → popup spadne zpět do rohu.
   - Inline styly Leadhubu přebíjíme !important.
   - Překryv je ::before na WRAPPERU (popup má transform → fixed
     pseudo-element uvnitř popupu by se ořezal).
   - Obrázek = poslední prvek <p><img> z Leadhub editoru.
   - z-index: popup 2147483647 (Leadhub), překryv 2147483646.
   - :has() = Chrome 105+ / Safari 15.4+ / FF 121+; starší
     prohlížeče: popup zůstane v rohu (graceful degradation).

   Známá omezení:
   - Klik na překryv nezavírá (zavření křížkem ×).
   - Při změně počtu polí v Leadhubu zkontrolovat
     „grid-row: 1 / span 7" u fotky.
   ============================================================ */

/* ---- karta modalu: střed + grid 2 sloupce ---- */
body > div > div:has(> input[placeholder="Váš e-mail"]) {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(740px, 94vw) !important;
  max-height: 92vh;
  min-height: min(480px, 80vh);
  display: grid !important;
  grid-template-columns: 300px 1fr;
  grid-auto-rows: min-content;
  align-content: center;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(15, 58, 95, .4);
  background: #fff !important;
}

/* ---- celostránkový překryv — jeden pro OBĚ obrazovky (formulář i děkovnou);
   obě mají obrázek p>img, teaser ne. pointer-events:none = nikdy neblokuje klik. ---- */
body > div:has(> div > p > img)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 58, 95, .5);
  z-index: 2147483646;
  pointer-events: none;
}

/* ---- foto vlevo: rám 16 px (vlevo/nahoře/dole) + zaoblení ---- */
body > div > div:has(> input[placeholder="Váš e-mail"]) > p {
  grid-column: 1;
  grid-row: 1 / span 7;
  margin: 16px 0 16px 16px !important;
  height: auto !important;
  align-self: stretch;
}
body > div > div:has(> input[placeholder="Váš e-mail"]) > p img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* ---- pravý sloupec ---- */
body > div > div:has(> input[placeholder="Váš e-mail"]) > :not(p):not(span) {
  grid-column: 2;
  margin-left: 30px !important;
  margin-right: 34px !important;
  width: auto !important;
  box-sizing: border-box;
}
body > div > div:has(> input[placeholder="Váš e-mail"]) > div:first-of-type {
  margin-top: 34px !important;
}

/* nadpis = jen 1. vnořený řádek pole Nadpis; další řádky = běžný text */
body > div > div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(1) {
  text-align: left !important;
}
body > div > div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(1) > div:first-child {
  font-size: 24px !important;
  line-height: 1.2 !important;
  color: #0F3A5F !important;
  text-align: left !important;
  font-weight: 800 !important;
}
body > div > div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(1) > div:not(:first-child) {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #2B3A44 !important;
  text-align: left !important;
  font-weight: 400 !important;
  margin-top: 10px;
}
/* text pod nadpisem */
body > div > div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(2) * {
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #2B3A44 !important;
  text-align: left !important;
}
/* souhlas GDPR → pod tlačítko */
body > div > div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(3) {
  order: 1;
  margin-top: 0 !important;
  margin-bottom: 30px !important;
}
body > div > div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(3) * {
  text-align: left !important;
}

/* pole */
body > div > div:has(> input[placeholder="Váš e-mail"]) > input {
  border-radius: 8px;
  margin-top: 10px !important;
}
/* tlačítko */
body > div > div:has(> input[placeholder="Váš e-mail"]) > button {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
  background: #E8650D !important;
  border: none;
  border-radius: 8px;
  padding: 12px 0 !important;
  font-weight: 700;
  font-size: 15px !important;
}
/* křížek — větší tap target + bílé kolečko (viditelný i nad fotkou) */
body > div > div:has(> input[placeholder="Váš e-mail"]) > span {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 28px;
  height: 28px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  z-index: 2;
}

/* překryv řeší outline na kartě (viz výše) — wrapper ::before odstraněn,
   protože SDK nechává v DOM skryté prvky a selektor selhával */

/* ---- mobil: foto jako pozadí celého panelu ---- */
@media (max-width: 640px) {
  body > div > div:has(> input[placeholder="Váš e-mail"]) {
    /* pevné kotvení nahoře — STEJNÉ místo pro formulář i děkovnou obrazovku */
    inset: 6vh auto auto 50% !important;
    inset: 6svh auto auto 50% !important;
    transform: translateX(-50%) !important;
    grid-template-columns: 1fr !important;
    width: min(400px, 94vw) !important;
    min-height: 0 !important;
    max-height: 86vh;
    max-height: 88svh; /* iOS: nepočítá lištu Safari (proti ořezu spodku) */
    overflow-y: auto !important;
  }
  /* obrázek přes celý panel, pod obsahem */
  body > div > div:has(> input[placeholder="Váš e-mail"]) > p {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    z-index: 0;
  }
  body > div > div:has(> input[placeholder="Váš e-mail"]) > p img {
    object-position: center top;
    border-radius: 0;
  }
  /* bílý přechod: nahoře vidět maskot, dole čitelný formulář */
  body > div > div:has(> input[placeholder="Váš e-mail"]) > p::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .25) 30%,
      rgba(255, 255, 255, .88) 46%,
      rgba(255, 255, 255, .96) 60%,
      #ffffff 100%);
  }
  /* obsah nad pozadím */
  body > div > div:has(> input[placeholder="Váš e-mail"]) > :not(p):not(span) {
    grid-column: 1 !important;
    position: relative;
    z-index: 1;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  body > div > div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(1) {
    margin-top: 210px !important;
    margin-top: min(210px, 30svh) !important; /* na malých displejích méně */
  }
  body > div > div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(1) > div:first-child {
    font-size: 20px !important;
  }
  body > div > div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(3) {
    margin-bottom: 18px !important;
  }
  /* pole s plným bílým pozadím kvůli čitelnosti nad fotkou */
  body > div > div:has(> input[placeholder="Váš e-mail"]) > input {
    background: #fff !important;
  }
}

/* ============================================================
   DĚKOVNÁ OBRAZOVKA (V2.3) — stejný modal jako Výzva k akci
   Selektor: má obrázek (p>img), NEMÁ formulářová pole.
   V Leadhubu: přidat obrázek (děkovací vizuál s maskotem)
   a odebrat zelené ✓ (redundantní, mohlo by kolidovat).
   ============================================================ */

body > div > div:has(> p > img):not(:has(> input)) {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(740px, 94vw) !important;
  max-height: 92vh;
  min-height: min(480px, 80vh);
  display: grid !important;
  grid-template-columns: 300px 1fr;
  grid-auto-rows: min-content;
  align-content: center;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(15, 58, 95, .4);
  background: #fff !important;
}
/* obrázek vlevo s rámem */
body > div > div:has(> p > img):not(:has(> input)) > p {
  grid-column: 1;
  grid-row: 1 / span 7;
  margin: 16px 0 16px 16px !important;
  height: auto !important;
  align-self: stretch;
}
body > div > div:has(> p > img):not(:has(> input)) > p img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
/* texty vpravo */
body > div > div:has(> p > img):not(:has(> input)) > :not(p):not(span) {
  grid-column: 2;
  margin-left: 30px !important;
  margin-right: 34px !important;
  width: auto !important;
  box-sizing: border-box;
}
body > div > div:has(> p > img):not(:has(> input)) > div:first-of-type {
  margin-top: 34px !important;
}
body > div > div:has(> p > img):not(:has(> input)) > div:nth-of-type(1) {
  text-align: left !important;
}
body > div > div:has(> p > img):not(:has(> input)) > div:nth-of-type(1) > div:first-child {
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: #0F3A5F !important;
  text-align: left !important;
  font-weight: 800 !important;
}
body > div > div:has(> p > img):not(:has(> input)) > div:nth-of-type(1) > div:not(:first-child) {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #2B3A44 !important;
  text-align: left !important;
  font-weight: 400 !important;
  margin-top: 10px;
}
body > div > div:has(> p > img):not(:has(> input)) > div:nth-of-type(2) * {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #2B3A44 !important;
  text-align: left !important;
}
body > div > div:has(> p > img):not(:has(> input)) > div:last-of-type {
  margin-bottom: 30px !important;
}
/* křížek */
body > div > div:has(> p > img):not(:has(> input)) > span {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 28px;
  height: 28px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  border-radius: 50%;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  z-index: 2;
}
/* překryv řeší outline na kartě (viz výše) */

/* mobil: obrázek jako pozadí (stejně jako Výzva k akci) */
@media (max-width: 640px) {
  body > div > div:has(> p > img):not(:has(> input)) {
    /* pevné kotvení nahoře — STEJNÉ místo jako formulář (žádný skok dolů) */
    inset: 6vh auto auto 50% !important;
    inset: 6svh auto auto 50% !important;
    transform: translateX(-50%) !important;
    grid-template-columns: 1fr !important;
    width: min(400px, 94vw) !important;
    min-height: 0 !important;
    max-height: 86vh;
    max-height: 88svh; /* iOS: nepočítá lištu Safari (proti ořezu spodku) */
    overflow-y: auto !important;
  }
  body > div > div:has(> p > img):not(:has(> input)) > p {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    z-index: 0;
  }
  body > div > div:has(> p > img):not(:has(> input)) > p img {
    object-position: center top;
    border-radius: 0;
  }
  body > div > div:has(> p > img):not(:has(> input)) > p::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .25) 30%,
      rgba(255, 255, 255, .88) 46%,
      rgba(255, 255, 255, .96) 60%,
      #ffffff 100%);
  }
  body > div > div:has(> p > img):not(:has(> input)) > :not(p):not(span) {
    grid-column: 1 !important;
    position: relative;
    z-index: 1;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  body > div > div:has(> p > img):not(:has(> input)) > div:nth-of-type(1) {
    margin-top: 210px !important;
    margin-top: min(210px, 30svh) !important; /* na malých displejích méně */
  }
  body > div > div:has(> p > img):not(:has(> input)) > div:nth-of-type(1) > div:first-child {
    font-size: 20px !important;
  }
  body > div > div:has(> p > img):not(:has(> input)) > div:last-of-type {
    margin-bottom: 18px !important;
  }
}

/* pomocný druhý blok děkovné obrazovky (než ho majitel smaže) — decentně */
body > div > div:has(> p > img):not(:has(> input)) > div:nth-of-type(2) * {
  font-size: 12px !important;
  color: #8a949e !important;
  text-align: left !important;
}