/* ============================================================
   skinspecialist.cz — ss-popup-3.css — v3
   SECTION: Restyle 3rd-party newsletter popupu do brandu (2 kroky: teaser + formulář)
   Doplněk: lhinsights "agent-plugin-popup.js" (newsletter / sleva za odběr)

   PROČ TAKHLE:
   - Popup je ve SVĚTLÉM DOM (ne iframe, ne shadow) → stylovatelný.
   - Má ale HASHOVANÉ třídy (_3QFqK-…) + INLINE styly → nelze kotvit na třídy
     (změní se při update doplňku) a obyčejné CSS prohraje s inline.
   - Řešení: kotva přes STABILNÍ placeholder e-mailu + struktura
     `div:has(> input[placeholder="Váš e-mail"])` = samotný box (přímý rodič
     inputů). Vše přes !important (přebije inline). Žádná závislost na doplňku.

   STRUKTURA boxu (přímé děti, v pořadí):
     span(×) · div(nadpis) · div(podtext) · input(jméno) · input(e-mail)
     · button · div(disclaimer)

   Ref: Záhlaví HTML kódy (po style.css).
   POZN.: kdyby doplněk změnil text placeholderu „Váš e-mail", uprav kotvu.
   ============================================================ */

/* ============================================================
   KROK 1 — teaser „Sleva 5% na první nákup?" + ANO / NE
   Kotva: stabilní třída .LEAD_GENERATION (ne hashe). Řádek table-cell
   [otázka | ANO | NE], 300px. Neměníme layout, jen barvy/font/rohy.
   ============================================================ */
.LEAD_GENERATION {
  background-color: var(--ss-sage, #6B8B85) !important;
  color: #fff !important;
  font-family: var(--ss-sans, "Manrope", sans-serif) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 40px rgba(15, 15, 15, .22) !important;
}
.LEAD_GENERATION > span:nth-of-type(1) {   /* otázka */
  font-family: var(--ss-sans, "Manrope", sans-serif) !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important;
  color: #fff !important;
}
.LEAD_GENERATION > span:nth-of-type(2) {   /* ANO — primární (zvýrazněné typograficky) */
  font-family: var(--ss-sans, "Manrope", sans-serif) !important;
  font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; color: #fff !important;
  border-left: 1px solid rgba(255, 255, 255, .22) !important;
}
.LEAD_GENERATION > span:nth-of-type(3) {   /* NE — sekundární */
  font-family: var(--ss-sans, "Manrope", sans-serif) !important;
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; color: rgba(255, 255, 255, .7) !important;
  border-left: 1px solid rgba(255, 255, 255, .16) !important;
  transition: color .2s cubic-bezier(.4, 0, .2, 1) !important;
}
.LEAD_GENERATION > span:nth-of-type(3):hover { color: #fff !important; }

/* ============================================================
   KROK 2 — formulář „Stačí se přihlásit…" (jméno + e-mail)
   ============================================================ */
/* ---- BOX (position/left řeší doplněk; v3: ŠÍŘKU přebíjíme — default ~252px
   byl moc úzký, nadpis se lámal do 5 řádků a vše se mačkalo) ---- */
div:has(> input[placeholder="Váš e-mail"]) {
  width: 460px !important;
  max-width: calc(100vw - 40px) !important;     /* mobil: nepřeteče vlevo+vpravo */
  max-height: calc(100vh - 105px) !important;   /* vysoký obsah (mobil) → scroll místo přetečení */
  overflow-y: auto !important;
  background-color: var(--ss-white, #FFFEFB) !important;
  color: var(--ss-dark, #2A2520) !important;
  font-family: var(--ss-sans, "Manrope", sans-serif) !important;
  border: 1px solid rgba(15, 15, 15, .06) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(15, 15, 15, .24) !important;
  padding: clamp(28px, 4vw, 42px) !important;
  line-height: 1.5 !important;
}

/* ---- zavírací × ---- */
div:has(> input[placeholder="Váš e-mail"]) > span {
  color: var(--ss-muted, rgba(15, 15, 15, .5)) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: color .2s cubic-bezier(.4, 0, .2, 1) !important;
}
div:has(> input[placeholder="Váš e-mail"]) > span:hover {
  color: var(--ss-dark, #2A2520) !important;
}

/* ---- NADPIS (1. div) — brand serif italic ---- */
div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(1),
div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(1) > div {
  font-family: var(--ss-serif, Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: var(--ss-dark, #2A2520) !important;
  margin: 0 0 14px !important;
}

/* ---- PODTEXT (2. div) ---- */
div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(2),
div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(2) > div {
  font-family: var(--ss-sans, "Manrope", sans-serif) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
}

/* ---- INPUTY (jméno + e-mail) ---- */
div:has(> input[placeholder="Váš e-mail"]) > input {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--ss-sans, "Manrope", sans-serif) !important;
  font-size: 15px !important;
  color: var(--ss-dark, #2A2520) !important;
  background: var(--ss-canvas, #FAF6EE) !important;
  border: 1px solid rgba(15, 15, 15, .12) !important;
  border-radius: 8px !important;
  padding: 13px 15px !important;
  margin: 10px 0 0 !important;
  transition: border-color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1) !important;
}
div:has(> input[placeholder="Váš e-mail"]) > input[placeholder="Křestní jméno"] {
  margin-top: 18px !important;   /* první input — odsazení od podtextu */
}
div:has(> input[placeholder="Váš e-mail"]) > input::placeholder {
  color: var(--ss-muted, rgba(15, 15, 15, .45)) !important;
  font-style: normal !important;
}
div:has(> input[placeholder="Váš e-mail"]) > input:focus {
  outline: 0 !important;
  border-color: var(--ss-sage, #6B8B85) !important;
  background: #fff !important;
}

/* ---- TLAČÍTKO = brand sage CTA ---- */
div:has(> input[placeholder="Váš e-mail"]) > button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 18px 0 0 !important;
  background-color: var(--ss-sage, #6B8B85) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-family: var(--ss-sans, "Manrope", sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1.35 !important;
  padding: 15px 22px !important;
  cursor: pointer !important;
  transition: background-color .25s cubic-bezier(.4, 0, .2, 1) !important;
}
div:has(> input[placeholder="Váš e-mail"]) > button:hover {
  background-color: var(--ss-sage-deep, #5C7A74) !important;
}

/* ---- DISCLAIMER (3. div) ---- */
div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(3),
div:has(> input[placeholder="Váš e-mail"]) > div:nth-of-type(3) > div {
  font-family: var(--ss-sans, "Manrope", sans-serif) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--ss-muted-light, rgba(15, 15, 15, .42)) !important;
  margin-top: 14px !important;
}