/* ============================================================
   v2 exit-intent modal (components/v2/exit-intent.html.twig).
   No maquette: the legacy #exit-intent-popup (title, texts, CTA, team photo at the bottom)
   in the v2 look. White dialog with black text like the v2 contact modal (css/v2/contact.css).
   The inline yellow-text span of the exit_intent_popup.description translations is restyled
   to the v2 highlight (black text on a yellow background, as .bf-home-mission__mark).
   Loaded on every v2 page with the modal (base_v2.html.twig): it is opened from GTM / VWO,
   on any page, at any time.
   ============================================================ */

/* UIkit caps the dialog with max-width: calc(100% - .01px) !important: the width is the knob. */
#exit-intent-popup .bf-exit__dialog {
  width: 480px;
  overflow: hidden;
  border-radius: var(--bf-radius-btn);
  background: var(--bf-c-white);
  font-family: var(--bf-font-body);
  color: var(--bf-c-black);
  text-align: center;
}

#exit-intent-popup .bf-exit__close {
  color: var(--bf-c-black);
}

#exit-intent-popup .bf-exit__close:focus-visible {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 2px;
}

#exit-intent-popup .bf-exit__body {
  padding: 40px 24px 0;
}

#exit-intent-popup .bf-exit__title {
  margin: 0;
  padding: 0 16px; /* clear of the close button */
  font: 400 40px/1 var(--bf-font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bf-c-black);
}

#exit-intent-popup .bf-exit__subtitle {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bf-c-black);
}

#exit-intent-popup .bf-exit__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--bf-c-ink-idle);
}

/* The translations highlight a phrase with an inline <span style="color: #FFCC00">, unreadable
   on white: turned into the v2 highlight. !important is the only way past the inline colour. */
#exit-intent-popup .bf-exit__text span[style] {
  padding: 0 4px;
  background: var(--bf-c-yellow);
  color: var(--bf-c-black) !important;
  -webkit-box-decoration-break: clone; /* a wrapped highlight keeps its padding on each line */
  box-decoration-break: clone;
}

#exit-intent-popup .bf-exit__cta {
  margin-top: 24px;
  height: 48px;
  font-size: 18px;
  white-space: normal; /* long labels wrap instead of overflowing the dialog */
}

/* Photo flush with the dialog's bottom edge. */
#exit-intent-popup .bf-exit__img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
}

/* ---- Desktop (UIkit @m) ---- */

@media (min-width: 960px) {
  #exit-intent-popup .bf-exit__body {
    padding: 48px 40px 0;
  }

  #exit-intent-popup .bf-exit__title {
    font-size: 52px;
  }
}