/* ============================================================
   michalovytrubky-shop.cz — mt-popup-1.css — v1
   SECTION: Exit-intent popup „sleva za e-mail" (smluvní položka Premium).
   Pár k mt-popup-1.js (JS injektuje celý markup .mt-popup, CSS jen styluje).

   Architektura:
   - Overlay: fixed backdrop (tmavý wash) + centrovaná bílá karta
   - Karta: eyebrow + heading + lead + form (input + CTA) + disclaimer
   - Success stav: message + volitelný kupón box (dashed, letter-spacing)
   - Tokeny z style.css (:root --mt-*): primary #0052DA, radius-lg 16px,
     shadow-lg, display font Helvetica
   - CTA = SYTÁ modrá --mt-primary, hover --mt-primary-deep (zlaté pravidlo 3)
   - z-index 99500 = nad mt-header (max 9200) i Shoptet .messages (1003)
   - Selektory drženy nízko: 1 třída + :where() pro stavy → snadný override
   - Mobil: JS popup vůbec nespouští; CSS je přesto responsivní (pojistka)
   ============================================================ */

/* Overlay wrapper — celoplošný, fixed */
.mt-popup {
  position: fixed;
  inset: 0;
  z-index: 99500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: var(--mt-display, 'Helvetica', 'Helvetica Neue', Arial, sans-serif);
}

.mt-popup:where([hidden]) {
  display: none;
}

/* Backdrop — tmavý wash (accent-dark), klik = zavřít */
.mt-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 35, 51, .58);
  cursor: pointer;
}

/* Karta */
.mt-popup__card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--mt-bg, #FFFFFF);
  border-radius: var(--mt-radius-lg, 16px);
  box-shadow: var(--mt-shadow-lg, 0 16px 40px rgba(37, 48, 65, .14));
  padding: 48px 44px 40px;
  box-sizing: border-box;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .mt-popup__card {
    animation: mt-popup-in var(--mt-dur, .22s) var(--mt-ease, cubic-bezier(.4, 0, .2, 1));
  }
  @keyframes mt-popup-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
}

/* Křížek */
.mt-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--mt-radius, 8px);
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--mt-dur, .22s), background var(--mt-dur, .22s);
}

.mt-popup__close:hover,
.mt-popup__close:focus-visible {
  color: var(--mt-text, #253041);
  background: var(--mt-bg-soft, #F5F7FB);
}

/* Eyebrow */
.mt-popup__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--mt-primary, #0052DA);
  margin: 0 0 14px;
}

/* Heading */
.mt-popup__heading {
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--mt-text, #253041);
  margin: 0 0 12px;
}

/* Lead */
.mt-popup__lead {
  margin: 0 auto 26px;
  max-width: 400px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mt-text-2, #4C5165);
}

/* Form — input + CTA vedle sebe */
.mt-popup__form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0 0 14px;
}

/* [hidden] musí vyhrát nad display:flex (UA styl by prohrál se třídou) */
.mt-popup__form:where([hidden]),
.mt-popup__lead:where([hidden]),
.mt-popup__disclaimer:where([hidden]) {
  display: none;
}

.mt-popup__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  background: var(--mt-bg, #FFFFFF);
  color: var(--mt-text, #253041);
  border: 1px solid var(--mt-border, rgba(37, 48, 65, .14));
  border-radius: var(--mt-radius, 8px);
  font-family: inherit;
  font-size: 14px;
  outline: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--mt-dur, .22s), box-shadow var(--mt-dur, .22s);
}

.mt-popup__input::placeholder {
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
}

.mt-popup__input:focus {
  border-color: var(--mt-primary, #0052DA);
  box-shadow: 0 0 0 3px var(--mt-primary-bg, #DBEAFE);
}

/* CTA — SYTÁ modrá, nikdy pale (zlaté pravidlo 3) */
.mt-popup__btn {
  height: 48px;
  padding: 0 24px;
  background: var(--mt-primary, #0052DA);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--mt-radius, 8px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background var(--mt-dur, .22s), transform var(--mt-dur, .22s);
}

.mt-popup__btn:hover {
  background: var(--mt-primary-deep, #003BA8);
}

.mt-popup__btn:active {
  transform: scale(.98);
}

.mt-popup__btn:where([data-state="sending"]) {
  opacity: .65;
  cursor: wait;
}

/* Inline zpráva (chyba validace / chyba odeslání) */
.mt-popup__msg {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mt-text-2, #4C5165);
  min-height: 18px;
}

.mt-popup__msg:where([data-type="error"]) {
  color: var(--mt-danger, #EF4444);
}

.mt-popup__msg:where([hidden]) {
  display: none;
}

/* Disclaimer */
.mt-popup__disclaimer {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
}

/* Success stav */
.mt-popup__success {
  padding: 6px 0 2px;
}

.mt-popup__success:where([hidden]) {
  display: none;
}

.mt-popup__success-text {
  margin: 0 auto 18px;
  max-width: 400px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mt-text-2, #4C5165);
}

/* Kupón box — dashed rámeček, zvýrazněný kód */
.mt-popup__coupon {
  display: inline-block;
  margin: 0 0 16px;
  padding: 14px 28px;
  border: 2px dashed var(--mt-primary, #0052DA);
  border-radius: var(--mt-radius, 8px);
  background: var(--mt-bg-soft, #F5F7FB);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--mt-primary, #0052DA);
  user-select: all;
  -webkit-user-select: all;
}

.mt-popup__coupon:where([hidden]) {
  display: none;
}

.mt-popup__success-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--mt-text-hint, rgba(37, 48, 65, .55));
}

/* Scroll-lock když je popup otevřený (třídu dává/bere JS) */
html:where(.mt-popup-open),
html:where(.mt-popup-open) body {
  overflow: hidden;
}

/* Responsivní pojistka (JS na mobilu popup nespouští, ale kdyby) */
@media (max-width: 560px) {
  .mt-popup__card {
    padding: 40px 22px 30px;
  }
  .mt-popup__form {
    flex-direction: column;
  }
  .mt-popup__btn {
    width: 100%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mt-popup__btn,
  .mt-popup__btn:active,
  .mt-popup__close,
  .mt-popup__input {
    transition: none;
    transform: none;
  }
}