/* ============================================================
   FORM POPUP — one popup per site.
   1px black border, no chrome, floating white X, exact-fit iframe.
   ============================================================ */

.mm-popup[hidden] { display: none !important; }

.mm-popup {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 17, 20, .78);
  /* NO backdrop-filter: it creates a containing block for position:fixed
     descendants, which would anchor the close button to this element
     instead of the viewport. */
  opacity: 0;
  transition: opacity .16s ease;
}

.mm-popup.is-open { opacity: 1; }

/* the panel — nothing but a border around the form ------------- */
.mm-popup__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90vw;
  max-width: 1000px;
  height: 90vh;
  max-height: 90vh;
  background: #fff;
  border: 1px solid #000;      /* the only decoration */
  overflow: hidden;
  /* NO transform here either: transform makes this the containing block
     for any position:fixed descendant, so the close button would be
     clipped by the panel's overflow:hidden. */
}

.mm-popup.is-open .mm-popup__panel { }

/* the form fills the panel exactly ---------------------------- */
.mm-popup__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
  background: #fff;
}

.mm-popup__body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* floating close button ---------------------------------------
   White plate, black X, thin black ring. Sits ON the panel rather
   than inside it, so it is legible whatever the form's own
   background colour turns out to be. Works on any brand.

   `all: unset` first, then every property re-declared with
   !important. This popup ships to many sites and a host theme WILL
   have a generic `button {...}` / `[type="button"] {...}` rule --
   one real site styles every button pink. Without this reset the
   close button inherits that and stops being legible.
   ------------------------------------------------------------ */
.mm-popup .mm-popup__close {
  all: unset;

  /* Anchored INSIDE the panel, top-right, so it always sits on the
     form itself - not out at the edge of a wide monitor. Absolute
     within the panel (which is position:relative) and kept fully
     inside its bounds so overflow:hidden cannot clip it. */
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2147483000 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;

  border: 1px solid #000 !important;
  border-radius: 50% !important;
  background: #fff !important;
  background-color: #fff !important;
  color: #000 !important;

  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important;
  -webkit-tap-highlight-color: transparent;
}

/* Hover inverts. FOCUS does NOT — the button receives focus on open,
   so inverting on focus would make it look pressed the moment the
   popup appears. Focus gets a ring instead. */
.mm-popup .mm-popup__close:hover,
.mm-popup .mm-popup__close:active {
  background: #000 !important;
  background-color: #000 !important;
  color: #fff !important;
}

/* Focus must look IDENTICAL to the resting state. The button is focused
   programmatically when the popup opens, so any focus styling shows up as
   an unwanted second ring on first load and then vanishes once focus moves
   into the form. No outline, no ring, no shape change. */
.mm-popup .mm-popup__close:focus,
.mm-popup .mm-popup__close:focus-visible {
  background: #fff !important;
  background-color: #fff !important;
  color: #000 !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important;
}

.mm-popup .mm-popup__close svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* mobile: full screen, X tucked inside the corner --------------- */
@media (max-width: 640px) {
  .mm-popup { padding: 0; }

  /* On mobile the panel must equal the VISIBLE screen, exactly.
     Use 100dvh for BOTH height and max-height. Leaving max-height at
     100vh breaks it: on iOS/Chrome 100vh is the taller "toolbar hidden"
     viewport, so max-height lets the panel grow past the visible area and
     the form ends up taller than the phone screen. dvh tracks the real
     visible height as the browser toolbar appears and disappears. */
  .mm-popup__panel {
    width: 100vw;
    max-width: none;
    height: 100vh;      /* fallback for old browsers */
    height: 100dvh;
    max-height: 100vh;  /* fallback */
    max-height: 100dvh;
    border-width: 0;
    /* keep the form clear of the home indicator / toolbar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Same inset inside the panel on mobile; only the tap target grows. */
  .mm-popup .mm-popup__close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: 46px !important;
    height: 46px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
  }
  .mm-popup .mm-popup__close:focus,
  .mm-popup .mm-popup__close:focus-visible {
    outline: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
  }
}

/* scroll lock while open ------------------------------------- */
html.mm-popup-open,
body.mm-popup-open {
  overflow: hidden !important;
  touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
  .mm-popup,
  .mm-popup__panel { transition: none; }
}