/*
  Exit Popup — componente Reconecta
  Sistema visual: NOVO LP_SE (creme #F6F3EE + Inter + #D3111A)
  Inspirado em: Sabri Suby Sell Like Crazy (exit popup)

  Estrutura BEM:
    .exit-popup                      ← bloco raiz (fixed, z-index alto)
    .exit-popup__overlay             ← backdrop escuro
    .exit-popup__wrapper             ← centralizador
    .exit-popup__box                 ← modal container
    .exit-popup__close               ← X no canto superior direito
    .exit-popup__content             ← área de conteúdo com padding
    .exit-popup__progress            ← progress bar track
    .exit-popup__progress-fill       ← progress bar fill (animado)
    .exit-popup__title               ← headline
    .exit-popup__subtitle            ← parágrafo descritivo
    .exit-popup__image               ← container da imagem
    .exit-popup__cta                 ← botão grande

  Estados:
    .exit-popup[aria-hidden="false"] ← popup aberto (com animação de entrada)
*/

.exit-popup,
.exit-popup *,
.exit-popup *::before,
.exit-popup *::after {
  box-sizing: border-box;
}

.exit-popup {
  /* TOKENS — sobrescrevíveis pelo site host */
  --ep-overlay-bg:        rgba(11, 2, 2, 0.62);
  --ep-modal-bg:          var(--color-cream-2,  #EFEDE0);
  --ep-content-bg:        var(--color-cream-3,  #DEDAC3);
  --ep-text:              var(--color-black,    #0B0202);
  --ep-text-muted:        rgba(11, 2, 2, 0.72);

  --ep-progress-track:    rgba(11, 2, 2, 0.18);
  --ep-progress-fill:     var(--color-red-light, #D3111A);

  --ep-cta-bg:            var(--color-red-light, #D3111A);
  --ep-cta-bg-hover:      var(--color-red-dark,  #4C000D);
  --ep-cta-text:          #ffffff;

  --ep-close-color:       var(--color-black,    #0B0202);
  --ep-close-bg:          transparent;

  --ep-font-body:         var(--font-body, 'Inter', system-ui, -apple-system, sans-serif);

  /* DIMENSÕES */
  --ep-modal-max-width:   720px;
  --ep-modal-radius:      24px;
  --ep-content-radius:    16px;
  --ep-content-padding-mobile:  18px;
  --ep-content-padding-desktop: 40px;
  --ep-modal-padding:     12px;

  --ep-progress-height:   20px;
  --ep-progress-width:    80%;
  --ep-progress-radius:   100px;

  --ep-close-size:        40px;

  /* ANIMATION */
  --ep-fade-duration:     300ms;
  --ep-slide-duration:    400ms;
  --ep-easing:            cubic-bezier(0.22, 1, 0.36, 1);
  --ep-progress-cycle:    10s;

  /* LAYOUT */
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  font-family: var(--ep-font-body);
  color: var(--ep-text);
}

/* ============ OPEN STATE ============ */
.exit-popup[aria-hidden="false"] {
  display: block;
}

/* ============ OVERLAY ============ */
.exit-popup__overlay {
  position: absolute;
  inset: 0;
  background: var(--ep-overlay-bg);
  opacity: 0;
  transition: opacity var(--ep-fade-duration) ease;
}
.exit-popup[aria-hidden="false"] .exit-popup__overlay {
  opacity: 1;
}

/* ============ WRAPPER (centraliza) ============ */
.exit-popup__wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

/* ============ MODAL BOX ============ */
.exit-popup__box {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: var(--ep-modal-max-width);
  background: var(--ep-modal-bg);
  border-radius: var(--ep-modal-radius);
  padding: var(--ep-modal-padding);
  overflow: hidden;
  box-shadow:
    0 12px 13px rgba(11, 2, 2, 0.15),
    0 47px 24px rgba(11, 2, 2, 0.10),
    0 107px 32px rgba(11, 2, 2, 0.06),
    0 190px 38px rgba(11, 2, 2, 0.02);
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--ep-slide-duration) var(--ep-easing),
    transform var(--ep-slide-duration) var(--ep-easing);
}
.exit-popup[aria-hidden="false"] .exit-popup__box {
  opacity: 1;
  transform: translateY(0);
}

/* ============ CLOSE BUTTON ============ */
.exit-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: var(--ep-close-size);
  height: var(--ep-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ep-close-bg);
  color: var(--ep-close-color);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background-color 200ms ease, transform 200ms ease;
}
.exit-popup__close:hover,
.exit-popup__close:focus-visible {
  background: rgba(11, 2, 2, 0.08);
  transform: scale(1.08);
  outline: none;
}
.exit-popup__close svg {
  display: block;
}

/* ============ CONTENT ============ */
.exit-popup__content {
  background: var(--ep-content-bg);
  border-radius: var(--ep-content-radius);
  padding: var(--ep-content-padding-mobile);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  min-width: 0;
}

.exit-popup__content > * {
  max-width: 100%;
  min-width: 0;
}

/* ============ PROGRESS BAR ============ */
.exit-popup__progress {
  position: relative;
  width: var(--ep-progress-width);
  max-width: 480px;
  height: var(--ep-progress-height);
  margin: 0 auto;
  background: var(--ep-progress-track);
  border-radius: var(--ep-progress-radius);
  overflow: hidden;
}
.exit-popup__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ep-progress-fill);
  border-radius: var(--ep-progress-radius);
  transform: translateX(-100%);
  animation: exit-popup-loading var(--ep-progress-cycle) linear infinite;
}

@keyframes exit-popup-loading {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ============ TITLE ============ */
.exit-popup__title {
  margin: 4px 0 0;
  max-width: 100%;
  font-family: var(--ep-font-body);
  font-weight: 900;
  font-size: clamp(20px, 5.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ep-text);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============ SUBTITLE ============ */
.exit-popup__subtitle {
  margin: 0;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.35;
  color: var(--ep-text-muted);
}

/* ============ IMAGE ============ */
.exit-popup__image {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
.exit-popup__image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  background: #ffffff;
}
.exit-popup__image-caption {
  font-size: 12px;
  font-weight: 600;
  color: var(--ep-text-muted);
  letter-spacing: 0.02em;
}

/* ============ CTA ============ */
.exit-popup__cta {
  display: inline-block;
  width: 100%;
  padding: 18px 24px;
  margin-top: 4px;
  background: var(--ep-cta-bg);
  color: var(--ep-cta-text);
  border: none;
  border-radius: 0;
  font-family: var(--ep-font-body);
  font-weight: 800;
  font-size: clamp(18px, 4vw, 32px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(211, 17, 26, 0.28);
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.exit-popup__cta:hover,
.exit-popup__cta:focus-visible {
  background: var(--ep-cta-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(211, 17, 26, 0.36);
  outline: none;
}
.exit-popup__cta:active {
  transform: translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (min-width: 768px) {
  .exit-popup {
    --ep-modal-padding: 16px;
    --ep-progress-height: 26px;
    --ep-close-size: 44px;
  }
  .exit-popup__content {
    padding: var(--ep-content-padding-desktop);
    gap: 24px;
  }
  .exit-popup__cta {
    padding: 22px 32px;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .exit-popup__overlay,
  .exit-popup__box {
    transition: none;
  }
  .exit-popup__progress-fill {
    animation: none;
    transform: translateX(0);
  }
}