.ump-mes-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.82);
  display:flex; align-items:center; justify-content:center;
  z-index:2147483000;
  padding:18px;
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .28s ease;
}
.ump-mes-overlay.is-open{ opacity: 1; }
.ump-mes-card{
  width:100%;
  max-width:620px;
  /* Never exceed the viewport so the mini overlay (inset:0) is also bounded. */
  max-height: calc(100vh - 36px);
  border-radius:18px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(10,10,10,0.96), rgba(25,0,0,0.96));
  box-shadow: 0 0 30px rgba(255,0,60,0.22), 0 0 90px rgba(0,0,0,0.7);
  border:1px solid rgba(255,255,255,0.08);
  color:#ffffff;
  position:relative;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .34s cubic-bezier(0.175, 0.885, 0.32, 1.1), opacity .34s ease;
  font-family: Arial, sans-serif;
}
.ump-mes-overlay.is-open .ump-mes-card{
  transform: translateY(0);
  opacity: 1;
}
.ump-mes-bg-image{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.88), rgba(0,0,0,0.55));
  background-size: cover;
  background-position: center;
  opacity:.72;
}

.ump-mes-content{
  position:relative;
  z-index:2;
  padding: 26px 28px;
}

.ump-mes-grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 16px;
  align-items: stretch;
}
.ump-mes-left{
  min-height: 0;
}
.ump-mes-right{
  display:flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
}
.ump-mes-hero-image{
  flex: 1 1 auto;
  align-self: stretch;
  width:100%;
  min-height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
  overflow:hidden;
}
.ump-mes-hero-image[data-fit="cover"]{ background-size: cover; }
.ump-mes-hero-image[data-fit="contain"]{ background-size: contain; }

.ump-mes-close{
  position:absolute;
  top:10px;
  right:12px;
  width:30px;
  height:30px;
  border-radius:50%;
  border:none;
  background: rgba(255,255,255,0.08);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  z-index:5;
  transition:.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.ump-mes-close:hover{
  background: rgba(255,255,255,0.16);
  transform: rotate(90deg);
}

.ump-mes-kicker{
  display:inline-block;
  padding:5px 12px;
  border-radius:999px;
  background: rgba(255,0,70,0.18);
  border: 1px solid rgba(255,0,70,0.35);
  color: #ff5b7f;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.ump-mes-title{
  font-size: clamp(20px, 2.6vw, 26px);
  line-height:1.18;
  font-weight:800;
  margin:0 0 12px;
  color:#fff;
  text-wrap: balance;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.ump-mes-title .ump-mes-highlight{
  color:#ff4b6e;
  text-shadow: 0 0 14px rgba(255,75,110,.35);
  white-space: nowrap;
}

.ump-mes-subtitle{
  font-size:13px;
  line-height:1.55;
  color: rgba(255,255,255,0.88);
  margin-bottom:16px;
}

.ump-mes-bullets{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  margin-bottom:16px;
}
.ump-mes-bullet{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  padding:9px 11px;
  border-radius:10px;
  font-size:11.5px;
  line-height:1.35;
  backdrop-filter: blur(3px);
}

.ump-mes-cta{
  display:inline-block;
  width:100%;
  padding:13px 20px;
  border-radius:10px;
  border:none;
  background: linear-gradient(135deg, #ff1f57, #b10034);
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  letter-spacing:.4px;
  box-shadow: 0 6px 18px rgba(255,0,70,0.32);
  transition:.25s ease;
  cursor:pointer;
  text-transform: uppercase;
}
.ump-mes-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255,0,70,0.45);
}

.ump-mes-small{
  margin-top:10px;
  color: rgba(255,255,255,0.58);
  font-size: 11px;
}

/* Inline quick signup (email + button), same pattern as blog category modal */
.ump-mes-signup-panel{
  position: relative;
  margin-top: 4px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
}
.ump-mes-signup-panel::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius: 16px;
  background: conic-gradient(
    from 0deg,
    #ff1493,
    #ff6b35,
    #ffd93d,
    #5fd89a,
    #4dabf7,
    #b197fc,
    #ff1493
  );
  animation: ump-mes-mini-spin 6s linear infinite;
  z-index: 0;
}
.ump-mes-signup-panel::after{
  content:'';
  position:absolute;
  inset: 2px;
  border-radius: 12px;
  background:
    radial-gradient(circle at top left, rgba(255,20,147,0.16), transparent 42%),
    linear-gradient(155deg, rgba(12,2,10,0.97), rgba(4,0,6,0.97));
  z-index: 0;
}
.ump-mes-signup-panel > *{
  position: relative;
  z-index: 1;
}
.ump-mes-signup-panel .ump-mes-google{
  margin-top: 0;
}
.ump-mes-signup-panel .ump-mes-google-shortcode{
  margin-top: 0;
}

/* Legacy mini overlay (retained for cached HTML during deploys) */
.ump-mes-mini-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px;
  background: rgba(0,0,0,0.66);
  backdrop-filter: blur(5px);
  z-index: 50;
}
.ump-mes-mini{
  width:100%;
  max-width: 360px;
  /* Cap height to the parent card so the mini never extends beyond it.
     The inner form scrolls if there isn't enough room (see #umpMesSignupForm). */
  max-height: calc(100% - 16px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background:
    linear-gradient(155deg, rgba(20,5,15,0.96) 0%, rgba(8,0,8,0.96) 60%, rgba(35,0,30,0.96) 100%);
  box-shadow:
    0 25px 60px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 30px rgba(255,20,147,0.18);
  padding: 16px 18px 14px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color:#fff;
}
/* Direct children layout: pin the chrome, let the form take what's left and
   scroll internally (so the animated border + bloom never scroll). */
.ump-mes-mini > .ump-mes-google,
.ump-mes-mini > .ump-mes-google-shortcode,
.ump-mes-mini > .ump-mes-divider,
.ump-mes-mini > .ump-mes-login-row{
  flex: 0 0 auto;
}
.ump-mes-mini > #umpMesSignupForm{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,20,147,0.45) transparent;
}
.ump-mes-mini > #umpMesSignupForm::-webkit-scrollbar{ width: 6px; }
.ump-mes-mini > #umpMesSignupForm::-webkit-scrollbar-thumb{ background: rgba(255,20,147,0.45); border-radius: 4px; }
.ump-mes-mini > #umpMesSignupForm::-webkit-scrollbar-track{ background: transparent; }
/* Sexy animated gradient border highlight */
.ump-mes-mini::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from 140deg,
    rgba(255,20,147,0.65) 0%,
    rgba(255,75,110,0.85) 18%,
    rgba(255,255,255,0.18) 32%,
    rgba(177,0,52,0.85) 55%,
    rgba(255,20,147,0.55) 78%,
    rgba(255,255,255,0.18) 92%,
    rgba(255,20,147,0.65) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  z-index: 0;
  animation: ump-mes-mini-spin 6s linear infinite;
  opacity:.95;
}
/* Soft inner top-light bloom */
.ump-mes-mini::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,75,140,0.22), transparent 60%),
    radial-gradient(80% 60% at 100% 0%, rgba(255,20,147,0.10), transparent 65%);
  pointer-events:none;
  z-index: 0;
}
@keyframes ump-mes-mini-spin{
  to{ transform: rotate(1turn); }
}
.ump-mes-mini > *{ position: relative; z-index: 1; }

.ump-mes-mini-close{
  position:absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.08);
  color:#fff;
  font-size: 16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  z-index: 2;
}
.ump-mes-mini-close:hover{ background: rgba(255,255,255,0.18); transform: rotate(90deg); transition:.2s ease; }
.ump-mes-google{
  /* Base layout only — colors from om-smd-google-signin-unified.css */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:8px;
  text-decoration:none;
  transition:.2s ease;
}

/* When the admin supplies a UM social-login shortcode, the rendered HTML is
   placed inside #umpMesGoogleShortcode. Appearance is unified site-wide via
   Optimization Methods smd-google-signin-unified.css. */
.ump-mes-google-shortcode{
  display:block;
  margin-top:4px;
}
.ump-mes-google-shortcode .um, .ump-mes-google-shortcode form{
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.ump-mes-divider{
  margin:8px 0;
  display:flex; align-items:center; gap:10px;
  color:rgba(255,255,255,0.55);
}
.ump-mes-divider:before,.ump-mes-divider:after{
  content:''; height:1px; flex:1;
  background: rgba(255,255,255,0.14);
}
.ump-mes-divider span{ font-size:11px; text-transform:uppercase; letter-spacing:1.2px; }
.ump-mes-label{ display:block; font-size:11.5px; color:rgba(255,255,255,0.85); margin-bottom:6px; }
.ump-mes-input{
  width:100%; margin-top:4px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:10px;
  padding:8px 11px;
  color:#fff;
  font-size:13px;
  box-sizing: border-box;
}
.ump-mes-input:focus{ outline:none; border-color: rgba(255,20,147,0.55); box-shadow:0 0 0 3px rgba(255,20,147,0.15); }
.ump-mes-honeypot{ position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; }

.ump-mes-pwd-wrap{
  position: relative;
  display: block;
  margin-top: 4px;
}
.ump-mes-pwd-wrap .ump-mes-input{
  margin-top: 0;
  padding-right: 40px;
}
.ump-mes-pwd-toggle{
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  transition: .15s ease;
}
.ump-mes-pwd-toggle:hover{ background: rgba(255,255,255,0.14); color: #fff; }
.ump-mes-pwd-toggle[aria-pressed="true"]{
  background: rgba(255,20,147,0.22);
  color: #ffc1df;
}
.ump-mes-pwd-toggle__eye{ display: inline-block; }
.ump-mes-pwd-hint{
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: .2px;
  line-height: 1.35;
}

/* Password strength meter (weak / fair / strong) */
.ump-mes-pwd-meter{
  margin-top: 6px;
}
.ump-mes-pwd-meter__segs{
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.ump-mes-pwd-meter__seg{
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  transition: background .18s ease;
}
.ump-mes-pwd-meter__label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.ump-mes-pwd-meter[data-tier="weak"] .ump-mes-pwd-meter__seg:nth-child(1){
  background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
}
.ump-mes-pwd-meter[data-tier="weak"] .ump-mes-pwd-meter__label{ color: #ff9ab0; }

.ump-mes-pwd-meter[data-tier="fair"] .ump-mes-pwd-meter__seg:nth-child(-n+2){
  background: linear-gradient(90deg, #ffd93d, #ffe566);
}
.ump-mes-pwd-meter[data-tier="fair"] .ump-mes-pwd-meter__label{ color: #ffe566; }

.ump-mes-pwd-meter[data-tier="strong"] .ump-mes-pwd-meter__seg{
  background: linear-gradient(90deg, #5fd89a, #8bf0b6);
}
.ump-mes-pwd-meter[data-tier="strong"] .ump-mes-pwd-meter__label{ color: #8bf0b6; }

/* Inline live-validation status under email + confirm-email fields.
   Hidden when empty so it doesn't reserve vertical space the user paid for. */
.ump-mes-field-status{
  display: block;
  font-size: 11px;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.55);
  line-height: 1.3;
}
.ump-mes-field-status:empty{ display: none; }
.ump-mes-field-status:not(:empty){ margin-top: 4px; }
.ump-mes-field-status.is-checking{ color: rgba(255,255,255,0.7); }
.ump-mes-field-status.is-checking::before{
  content: ''; display: inline-block; width: 10px; height: 10px;
  margin-right: 6px; vertical-align: -1px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: rgba(255,255,255,0.85);
  border-radius: 50%;
  animation: ump-mes-spin 0.6s linear infinite;
}
.ump-mes-field-status.is-success{ color: #8bf0b6; }
.ump-mes-field-status.is-success::before{
  content: '✓ '; font-weight: 700;
}
.ump-mes-field-status.is-error{ color: #ff9ab0; }
.ump-mes-field-status.is-error::before{
  content: '⚠ '; font-weight: 700;
}
@keyframes ump-mes-spin{ to { transform: rotate(360deg); } }
.ump-mes-submit{
  margin-top:8px;
  width:100%;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  background: linear-gradient(135deg, #ff1493, #ff2d78);
  color:#fff;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.4px;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(255,20,147,0.28);
  transition:.2s ease;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.ump-mes-submit:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255,20,147,0.4); }
.ump-mes-submit[disabled]{ opacity:.7; cursor:not-allowed; transform:none; box-shadow:none; }
.ump-mes-submit.is-loading::before{
  content:'';
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.38);
  border-top-color:#fff;
  animation: ump-mes-spin 0.65s linear infinite;
}
.ump-mes-msg{ font-size:12px; color:rgba(255,255,255,0.78); line-height:1.3; }
.ump-mes-msg:empty{ display:none; }
.ump-mes-msg:not(:empty){ margin-top:6px; }
.ump-mes-msg.is-error{ color:#ff9ab0; }
.ump-mes-msg.is-success{ color:#8bf0b6; }
.ump-mes-msg.is-submitting{
  color:#ff4b4b;
  font-weight:800;
  text-shadow:0 0 12px rgba(255,75,75,0.35);
}
.ump-mes-exit-confirm{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
  z-index:2147483647;
  opacity:0;
  transition:opacity .16s ease;
}
.ump-mes-exit-confirm.is-open{ opacity:1; }
.ump-mes-exit-confirm__dialog{
  width:100%;
  max-width:330px;
  border-radius:18px;
  padding:22px;
  background:
    radial-gradient(circle at top left, rgba(255,20,147,0.20), transparent 42%),
    linear-gradient(155deg, rgba(18,4,14,0.98), rgba(6,0,8,0.98));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 28px 80px rgba(0,0,0,0.75), 0 0 32px rgba(255,20,147,0.18);
  color:#fff;
  text-align:center;
  transform:translateY(10px) scale(.98);
  transition:transform .16s ease;
}
.ump-mes-exit-confirm.is-open .ump-mes-exit-confirm__dialog{
  transform:translateY(0) scale(1);
}
.ump-mes-exit-confirm__dialog h3{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.2;
  font-weight:800;
}
.ump-mes-exit-confirm__dialog p{
  margin:0;
  color:rgba(255,255,255,0.72);
  font-size:13px;
  line-height:1.45;
}
.ump-mes-exit-confirm__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.ump-mes-exit-confirm__btn{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}
.ump-mes-exit-confirm__btn:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,0.18);
}
.ump-mes-exit-confirm__btn.is-secondary{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
}
.ump-mes-exit-confirm__btn.is-primary{
  background:linear-gradient(135deg, #ff1493, #ff2d78);
  box-shadow:0 8px 22px rgba(255,20,147,0.30);
}
.ump-mes-exit-confirm__btn:hover{
  transform:translateY(-1px);
}
.ump-mes-login-row{
  margin-top:8px;
  color:rgba(255,255,255,0.7);
  font-size:12px;
  text-align:center;
}
.ump-mes-login-row a{ color:#ffc1df; text-decoration:underline; text-underline-offset:2px; }
.ump-mes-login-row a:hover{ color:#ffd9ea; }

html.ump-mes-modal-open, html.ump-mes-modal-open body{
  overflow:hidden;
}

@media(max-width:768px){
  .ump-mes-card{ max-width: 420px; }
  .ump-mes-content{ padding:20px 18px; }
  .ump-mes-title{ font-size: clamp(18px, 5.5vw, 22px); }
  .ump-mes-subtitle{ font-size:12.5px; }
  .ump-mes-bullets{ grid-template-columns:1fr 1fr; gap:6px; }
  .ump-mes-bullet{ font-size:11px; padding:8px 10px; }
  .ump-mes-grid{ grid-template-columns: 1fr; gap:12px; }
  .ump-mes-right{ display:none; }
  .ump-mes-cta{ font-size:13px; padding:12px 16px; }
  /* Mini sits over the (now narrower) card; trim a bit more so the form
     comfortably fits without internal scrolling on most phones. */
  .ump-mes-mini{ padding: 14px 16px 12px; max-width: 340px; }
  .ump-mes-mini-overlay{ padding: 10px; }
}

/* ==========================================================================
   Admin live-preview stage (renders the modal in a scaled, non-overlay frame)
   ========================================================================== */
.ump-mes-stage{
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,75,140,0.10), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 6px, transparent 6px 12px),
    #0d0d0d;
  border:1px solid #2d3748;
  border-radius: 14px;
  padding: 22px;
  min-height: 460px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ump-mes-stage__shell{
  width:100%;
  max-width:560px;
  margin:0 auto;
  position:relative;
}
.ump-mes-stage__bar{
  display:flex; gap:6px; align-items:center; justify-content:flex-end;
  margin-bottom: 10px; flex-wrap:wrap;
}
.ump-mes-stage__pill{
  font-size:11px; font-weight:700; letter-spacing:.4px;
  padding:5px 9px; border-radius:999px;
  background: rgba(255,255,255,0.08); color:#cbd5e0;
  border:1px solid rgba(255,255,255,0.12); cursor:pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ump-mes-stage__pill.is-active{
  background: linear-gradient(135deg, #ff1493, #ff2d78);
  color:#fff; border-color: transparent;
  box-shadow: 0 2px 6px rgba(255,20,147,0.3);
}
.ump-mes-stage[data-view="mobile"] .ump-mes-stage__shell{ max-width: 380px; }
.ump-mes-stage[data-view="mobile"] .ump-mes-card{ max-width: 360px; }
.ump-mes-stage[data-view="mobile"] .ump-mes-grid{ grid-template-columns: 1fr; gap:12px; }
.ump-mes-stage[data-view="mobile"] .ump-mes-right{ display:none; }

/* Inside the stage, the modal renders inline (not as fixed overlay). */
.ump-mes-stage .ump-mes-card{ position: relative; transform:none; opacity:1; }
.ump-mes-stage .ump-mes-mini-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center;
  border-radius: 18px;
  z-index: 5;
}
.ump-mes-stage .ump-mes-mini{ max-width: 380px; width: 92%; }

/* Tighter padding when the preview lives inside an admin tab. */
.ump-mes-stage .ump-mes-content{ padding: 22px 22px; }
.ump-mes-stage .ump-mes-title{ font-size: clamp(18px, 2.4vw, 24px); }

@media(max-width:640px){
  .ump-mes-stage{ padding: 14px; min-height: 420px; }
  .ump-mes-stage__bar{ justify-content:center; }
}

/* Disable form submit visually inside the preview stage. */
.ump-mes-stage form, .ump-mes-stage button[type="submit"]{ pointer-events: none; }