
/* ===== FLEXA POPUP ===== */
.flexa-popup-wrapper{ position:relative; }

/* Overlay + blur van pagina */
.flexa-overlay{
  position:fixed !important;
  inset:0 !important;
  display:none !important;
  background: rgba(0,0,0,0.10) !important; /* licht dimmen */
  backdrop-filter: blur(4px) !important;   /* blur achtergrond */
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 1000000 !important;             /* boven Divi */
  cursor:pointer !important;
}

/* Popup venster */
.flexa-modal{
  position:fixed !important;
  top:50% !important; left:50% !important;
  transform: translate(-50%,-50%) scale(.98) !important;
  opacity:0 !important; visibility:hidden !important;
  transition: transform .2s ease, opacity .2s ease, visibility .2s !important;
  z-index: 1000001 !important;
  width:min(90vw, var(--flexa-popup-maxw, 720px)) !important;
  max-height:85vh !important; overflow:auto !important;
  border-radius:16px !important;
  box-shadow:0 20px 50px rgba(0,0,0,.20) !important;
}

/* Inhoud */
.flexa-modal-inner{ padding:22px 22px 18px !important; }

/* Sluitknop (X) */
.flexa-close{
  position:absolute !important; top:10px !important; right:10px !important;
  width:36px !important; height:36px !important; border:0 !important;
  border-radius:999px !important; background: rgba(0,0,0,.35) !important;
  color:#fff !important; font-size:22px !important; line-height:36px !important;
  text-align:center !important; cursor:pointer !important;
  transition: background .2s ease, transform .2s ease !important;
}
.flexa-close:hover{ background: rgba(0,0,0,.45) !important; transform: translateY(-1px) !important; }

/* Actieve staat (JS zet .is-open op wrapper) */
.flexa-popup-wrapper.is-open .flexa-overlay{ display:block !important; }
.flexa-popup-wrapper.is-open .flexa-modal{
  opacity:1 !important; visibility:visible !important;
  transform: translate(-50%,-50%) scale(1) !important;
}

/* Scrol blokkeren als open */
html.flexa-noscroll, body.flexa-noscroll{ overflow:hidden !important; }

@media (max-width:767px){
  .flexa-modal-inner{ padding:18px 16px 14px !important; }
  .flexa-close{ top:8px !important; right:8px !important; }
}
