body.omco-popup-open {
  overflow: hidden;
}

.omco-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, var(--overlay-opacity, 0.44));
}

.omco-popup-overlay.is-open {
  display: flex;
}

.omco-popup-container {
  position: relative;
  width: var(--popup-size, 640px);
  min-width: var(--popup-min-width, 0);
  max-width: var(--popup-max-width, 92%);
  background: var(--popup-bg, #f9f9f9);
  border: var(--popup-border-width, 5px) solid var(--popup-border-color, #2d335b);
  border-radius: var(--popup-border-radius, 0);
  /* overflow: visible keeps the close button able to bleed outside the box */
  overflow: visible;
}

.omco-popup-content {
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 980px) {
  .omco-popup-container {
    width: var(--popup-size-tablet, var(--popup-size, 90%));
  }
}

@media (max-width: 767px) {
  .omco-popup-container {
    width: var(--popup-size-mobile, var(--popup-size, 100%));
  }
}

.omco-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  z-index: 9999;
}

/* ── Gravity Forms inside popups ──────────────────────────────────────────────
   GF's own stylesheet hides honeypot / validation-container fields, but that
   CSS may not be loaded on pages where a GF form only appears inside a popup.
   These rules mirror GF's own declarations so the popup is always correct,
   regardless of which page it appears on.
   --------------------------------------------------------------------------- */
.omco-popup-container .gform_validation_container,
.omco-popup-container .gform-validation-container {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9000px !important;
}

/* Prevent Divi's theme input CSS (dark navy backgrounds) from leaking into
   GF forms rendered inside our popup. GF's own stylesheet normally wins this
   specificity battle, but only when it is loaded. */
.omco-popup-container .gform_wrapper input[type="text"],
.omco-popup-container .gform_wrapper input[type="email"],
.omco-popup-container .gform_wrapper input[type="tel"],
.omco-popup-container .gform_wrapper input[type="number"],
.omco-popup-container .gform_wrapper input[type="url"],
.omco-popup-container .gform_wrapper textarea,
.omco-popup-container .gform_wrapper select {
  background-color: #fff;
  color: #112337;
  border: 1px solid #686e77;
}