/* ==========================================================
   EICP MODAL SYSTEM
   ----------------------------------------------------------
   Single source of truth for ALL modals:
   • Prep Packet modal
   • Opt-in modal
   • Agreement modal
   Designed to survive aggressive theme CSS (Divi etc.)
========================================================== */


/* ==========================================================
   GLOBAL MODAL STATE
========================================================== */

html.vatg-modal-open,
body.vatg-modal-open {
  overflow: hidden !important;
}


/* ==========================================================
   PREP PACKET MODAL
========================================================== */

/* ---------- Overlay ---------- */

#vatg-prep-modal.vatg-prep-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: none !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 20px !important;
}

#vatg-prep-modal.vatg-prep-modal.is-open {
  display: flex !important;
}

#vatg-prep-modal .vatg-prep-modal__backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
}


/* ---------- Dialog ---------- */

#vatg-prep-modal .vatg-prep-modal__dialog {
  position: relative !important;

  width: min(920px, calc(100vw - 40px)) !important;
  height: min(820px, calc(100vh - 40px)) !important;
  max-height: calc(100vh - 40px) !important;

  background:#fff !important;
  border-radius:16px !important;
  overflow:hidden !important;

  display:flex !important;
  flex-direction:column !important;

  box-shadow:0 20px 60px rgba(0,0,0,.25) !important;
}


/* ---------- Header / Footer ---------- */

#vatg-prep-modal .vatg-prep-modal__header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:12px 14px!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
  background:#faf7ff!important;
}

#vatg-prep-modal .vatg-prep-modal__title{
  font-size:14px!important;
  font-weight:600!important;
}

#vatg-prep-modal .vatg-prep-modal__actions{
  display:flex!important;
  gap:8px!important;
}

#vatg-prep-modal .vatg-prep-modal__btn{
  border:1px solid rgba(0,0,0,.12)!important;
  background:#fff!important;
  border-radius:10px!important;
  padding:7px 10px!important;
  cursor:pointer!important;
  font-size:12px!important;
}

#vatg-prep-modal .vatg-prep-modal__footer{
  padding:10px 14px!important;
  border-top:1px solid rgba(0,0,0,.08)!important;
  background:#fff!important;
  font-size:12px!important;
  opacity:.8!important;
}


/* ---------- Scroll Body ---------- */

#vatg-prep-modal .vatg-prep-modal__body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}

#vatg-prep-modal .vatg-prep-modal__scroll{
  flex:1 1 auto!important;
  overflow:auto!important;
  padding:16px!important;
}

#vatg-prep-modal .vatg-prep-modal__scroll.is-guarded{
  user-select:none!important;
}


/* ---------- Print Mode ---------- */

@media print{

  body.vatg-print-prep *{
    display:none!important;
  }

  body.vatg-print-prep #vatg-prep-modal,
  body.vatg-print-prep #vatg-prep-modal *{
    display:block!important;
  }

  body.vatg-print-prep #vatg-prep-modal{
    position:static!important;
    width:100%!important;
    padding:0!important;
  }

  body.vatg-print-prep .vatg-prep-modal__backdrop{
    display:none!important;
  }

  body.vatg-print-prep .vatg-prep-modal__dialog{
    width:100%!important;
    box-shadow:none!important;
    border-radius:0!important;
  }

  body.vatg-print-prep .vatg-prep-modal__actions,
  body.vatg-print-prep .vatg-prep-modal__footer{
    display:none!important;
  }
}


/* ==========================================================
   PREP PACKET CONTENT VISIBILITY
========================================================== */

.vatg-prep-packet{
  display:none!important;
}

#vatg-prep-modal .vatg-prep-modal__scroll .vatg-prep-packet{
  display:block!important;
}


/* ==========================================================
   PREP PILL ICON
========================================================== */

.va-tg-prep-pill{ gap:8px; }

.va-tg-prep-pill__icon{
  width:16px;
  height:16px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(0,0,0,.04);
}


/* ==========================================================
   OPT-IN MODAL (EICP AGREEMENTS)
========================================================== */

.icp-modal-overlay{
  backdrop-filter:blur(6px);
  background:rgba(0,0,0,.45);
}

.icp-modal{
  max-width:760px;
  width:92%;
  padding:28px 32px;
  border-radius:10px;
  box-shadow:0 25px 70px rgba(0,0,0,.25);
}

.icp-modal h1,
.icp-modal h2{
  font-size:28px;
  font-weight:600;
  color:#6b2bd9;
  margin-bottom:14px;
}

.icp-modal p{
  font-size:15px;
  line-height:1.7;
  color:#333;
}

.icp-modal ul{
  margin:14px 0 20px 20px;
}

.icp-modal .icp-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:24px;
}

.icp-modal button{
  border-radius:6px;
  padding:10px 18px;
  font-weight:600;
}

.icp-modal button.primary{
  background:#6b2bd9;
  color:#fff;
}

.icp-modal button.primary:hover{
  background:#5520b3;
}


/* ==========================================================
   AGREEMENT MODAL (IFRAME VIEWER)
========================================================== */

.vatg-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2147483646;
}

/* Visible state */
.vatg-modal-overlay.is-open {
    display: flex;
}

/* Dialog tighter — less white waste */

.vatg-modal-dialog {
    position: relative;
    z-index: 10000001;
    width: min(900px, 92vw);
    height: 88vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    overflow: hidden;
}

/* iframe fills frame cleanly */

.vatg-modal-frame{
  width:100%;
  height:100%;
  border:none;
}


/* Close button attached to FRAME (not overlay) */

.vatg-modal-close{
  position:absolute;
  top:8px;
  right:10px;

  width:38px;
  height:38px;

  border-radius:999px;
  border:none;

  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:24px;

  cursor:pointer;
  z-index:50;

  transition:.15s ease;
}

.vatg-modal-close:hover{
  background:#6b2bd9;
  transform:scale(1.05);
}