/* =========================================================
   Major Stone V3 — Subscribe popup ($10 off)
   Targets the ms-popup-* markup rendered by inc/subscribe-popup.php.
   ========================================================= */

#ms-popup-root .ms-popup-overlay{
  position:fixed;inset:0;z-index:99999;
  display:none;align-items:center;justify-content:center;
  padding:18px;
  background:rgba(10,6,3,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#ms-popup-root .ms-popup-overlay.is-open{display:flex;}

#ms-popup-root .ms-popup-box{
  position:relative;
  width:360px;max-width:90vw;max-height:88vh;
  overflow:hidden auto;
  background:linear-gradient(165deg,#241609 0%,#17100a 55%,#100b07 100%);
  border:1px solid rgba(255,176,46,.45);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4),0 0 44px rgba(255,176,46,.12);
  animation:msv3-pop-in .45s var(--ease,cubic-bezier(.22,.9,.28,1));
}
@keyframes msv3-pop-in{
  from{transform:translateY(18px) scale(.97);opacity:0;}
  to{transform:none;opacity:1;}
}

#ms-popup-root .ms-popup-bg{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  border-bottom:1px solid rgba(255,176,46,.22);
}
#ms-popup-root .ms-popup-bg-mobile{display:none;}
@media (max-width:640px){
  #ms-popup-root .ms-popup-bg-desktop{display:none;}
  #ms-popup-root .ms-popup-bg-mobile{display:block;aspect-ratio:1/1;}
  #ms-popup-root .ms-popup-box{width:min(88vw,330px);border-radius:16px;}
  #ms-popup-root .ms-popup-content{padding:20px 18px 22px;}
  #ms-popup-root .ms-popup-headline{font-size:clamp(20px,5.6vw,24px);}
  #ms-popup-root .ms-popup-headline-sm{font-size:clamp(18px,5vw,21px);}
  #ms-popup-root .ms-popup-btn{font-size:14.5px;padding:13px 18px;}
  #ms-popup-root .ms-popup-input.ms-subscribe-input{font-size:14px;padding:12px 16px;}
  #ms-popup-root .ms-popup-message{font-size:18px;}
  #ms-popup-root .ms-popup-close{padding:7px 12px;font-size:11px;}
}

#ms-popup-root .ms-popup-close{
  position:absolute;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#ffb02e,#e08a1e);
  color:#241203;font-size:12px;font-weight:800;letter-spacing:.06em;
  box-shadow:0 6px 18px rgba(0,0,0,.45),0 6px 18px rgba(255,176,46,.35);
  transition:transform .25s ease,filter .25s ease;
}
#ms-popup-root .ms-popup-close:hover{transform:translateY(-1px);filter:brightness(1.07);}
#ms-popup-root .ms-popup-close .ms-popup-close-x{font-size:14px;line-height:1;}

#ms-popup-root .ms-popup-content{
  padding:24px 26px 28px;text-align:center;
}
#ms-popup-root .ms-popup-headline{
  font-family:var(--font-d,"Fraunces",Georgia,serif);
  font-weight:600;font-size:clamp(21px,4.2vw,27px);line-height:1.15;
  color:#f8f4ec;margin:0 0 8px;
  text-wrap:balance;
}
#ms-popup-root .ms-popup-headline-sm{font-size:clamp(19px,3.8vw,23px);}
#ms-popup-root .ms-popup-step p{color:rgba(240,225,200,.75);font-size:15px;line-height:1.6;}

#ms-popup-root .ms-popup-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin:14px 0 6px;padding:13px 20px;
  border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,#ffb02e,#e08a1e);
  color:#241203;font-weight:800;font-size:15px;letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(255,176,46,.35);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
#ms-popup-root .ms-popup-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 32px rgba(255,176,46,.45);}
#ms-popup-root .ms-popup-btn:disabled{opacity:.6;cursor:wait;transform:none;}

#ms-popup-root .ms-popup-nothanks{
  display:inline-block;margin-top:10px;
  color:rgba(240,225,200,.55);font-size:13.5px;text-decoration:underline;
  text-underline-offset:3px;transition:color .2s ease;
}
#ms-popup-root .ms-popup-nothanks:hover{color:#f8f4ec;}

#ms-popup-root .ms-popup-form.ms-subscribe-form{
  display:flex;flex-direction:column;gap:12px;
  margin:18px 0 4px;
}
#ms-popup-root .ms-popup-input.ms-subscribe-input{
  width:100%;padding:14px 18px;border-radius:999px;
  border:1px solid rgba(255,176,46,.35);
  background:rgba(0,0,0,.35);color:#f8f4ec;
  font-size:15px;text-align:center;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
#ms-popup-root .ms-popup-input.ms-subscribe-input::placeholder{color:rgba(240,225,200,.4);}
#ms-popup-root .ms-popup-input.ms-subscribe-input:focus{
  border-color:#ffb02e;box-shadow:0 0 0 3px rgba(255,176,46,.18);
}
#ms-popup-root .ms-popup-form .ms-popup-btn{margin:0;}

#ms-popup-root .ms-popup-error{
  margin:12px 0 0;color:#f0a09a;font-size:14px;
}
#ms-popup-root .ms-popup-message{
  font-family:var(--font-d,"Fraunces",Georgia,serif);
  font-size:19px;line-height:1.4;color:#f8f4ec;margin:6px 0 4px;
}
#ms-popup-root .ms-popup-login-link{
  display:inline-block;margin-top:8px;color:rgba(240,225,200,.6);
  font-size:14px;text-decoration:underline;text-underline-offset:3px;
}
#ms-popup-root .ms-popup-login-link:hover{color:#ffb02e;}

/* Admin preview mode: overlay behaves as a static block, not fixed. */
#ms-popup-root.ms-popup-preview-mode .ms-popup-overlay{
  position:static;display:flex;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;padding:8px;
}

/* Admin "Preview Popup" — force the phone styling regardless of the actual
   viewport width, so the Desktop/Mobile toggle is a true preview. These
   mirror the phone media-query rules above; the extra class gives them
   higher specificity so they win on wide screens too. */
.ms-popup-force-mobile #ms-popup-root .ms-popup-bg-desktop{display:none;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-bg-mobile{display:block;aspect-ratio:1/1;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-box{width:min(88vw,330px);border-radius:16px;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-content{padding:20px 18px 22px;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-headline{font-size:clamp(20px,5.6vw,24px);}
.ms-popup-force-mobile #ms-popup-root .ms-popup-headline-sm{font-size:clamp(18px,5vw,21px);}
.ms-popup-force-mobile #ms-popup-root .ms-popup-btn{font-size:14.5px;padding:13px 18px;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-input.ms-subscribe-input{font-size:14px;padding:12px 16px;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-message{font-size:18px;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-close{padding:7px 12px;font-size:11px;}

/* ============ GAMES (pick a game → win a prize) ============ */
#ms-popup-root .ms-game-sub{color:rgba(240,225,200,.7);font-size:14px;margin:0 0 14px;}
#ms-popup-root .ms-game-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 6px;}
#ms-popup-root .ms-game-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:14px;border:1px solid rgba(255,176,46,.35);background:rgba(255,176,46,.06);cursor:pointer;color:#f8f4ec;transition:transform .2s,background .2s;}
#ms-popup-root .ms-game-card:hover{transform:translateY(-2px);background:rgba(255,176,46,.14);}
#ms-popup-root .ms-game-icon{font-size:32px;line-height:1;}
#ms-popup-root .ms-game-name{font-size:13px;font-weight:700;}
#ms-popup-root .ms-game-back{display:inline-block;background:none;border:0;color:rgba(240,225,200,.55);font-size:13px;font-weight:700;cursor:pointer;padding:5px 10px;margin:0 0 6px;border-radius:8px;}
#ms-popup-root .ms-game-back:hover{color:#ffcf7a;background:rgba(255,176,46,.08);}
#ms-popup-root .ms-game-hint{color:rgba(240,225,200,.55);font-size:13px;margin:10px 0 0;}
#ms-popup-root .ms-game-prize-banner{background:linear-gradient(135deg,#ffb02e,#e08a1e);color:#241203;font-weight:700;border-radius:12px;padding:10px 14px;margin:0 0 10px;font-size:14.5px;line-height:1.4;}
#ms-popup-root .ms-game-prize-banner strong{font-weight:800;}

/* wheel */
#ms-popup-root .ms-wheel-wrap{position:relative;width:250px;max-width:72vw;margin:8px auto 4px;}
#ms-popup-root .ms-wheel-canvas{width:100%;height:auto;display:block;}
#ms-popup-root .ms-wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:26px;color:#ffb02e;text-shadow:0 2px 6px rgba(0,0,0,.6);z-index:2;}
#ms-popup-root .ms-wheel-spin{margin-top:12px;width:auto;padding:12px 44px;}
#ms-popup-root .ms-wheel-spin:disabled{opacity:.6;cursor:default;}

/* jars */
#ms-popup-root .ms-jars{display:flex;justify-content:center;gap:14px;margin:14px 0 6px;}
#ms-popup-root .ms-jar{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(255,176,46,.06);border:1px solid rgba(255,176,46,.35);border-radius:14px;padding:16px 14px;cursor:pointer;min-width:86px;transition:transform .2s,background .2s;}
#ms-popup-root .ms-jar:hover:not(:disabled){transform:translateY(-3px);}
#ms-popup-root .ms-jar:disabled{cursor:default;opacity:.55;}
#ms-popup-root .ms-jar.picked{background:rgba(255,176,46,.18);border-color:#ffb02e;opacity:1;}
#ms-popup-root .ms-jar-emoji{font-size:44px;line-height:1;transition:transform .3s;}
#ms-popup-root .ms-jar-prize{font-size:13px;font-weight:800;color:#ffb02e;}

/* scratch */
#ms-popup-root .ms-scratch-wrap{position:relative;width:100%;max-width:280px;margin:10px auto;}
#ms-popup-root .ms-scratch-prize{display:flex;align-items:center;justify-content:center;height:120px;border-radius:14px;background:rgba(255,176,46,.08);border:1px dashed rgba(255,176,46,.5);}
#ms-popup-root .ms-scratch-prize span{font-size:30px;font-weight:800;color:#ffcf7a;font-family:var(--font-d,"Fraunces",Georgia,serif);}
#ms-popup-root .ms-scratch-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;touch-action:none;cursor:crosshair;}

/* bee */
#ms-popup-root .ms-bee-timer{font-size:15px;font-weight:700;color:#ffcf7a;margin:6px 0;}
#ms-popup-root .ms-bee-arena{position:relative;height:170px;border:1px dashed rgba(255,176,46,.4);border-radius:14px;background:rgba(0,0,0,.25);margin:6px 0;overflow:hidden;}
#ms-popup-root .ms-bee{position:absolute;font-size:36px;background:none;border:0;cursor:pointer;transition:left .55s ease,top .55s ease;line-height:1;padding:4px;}

/* quiz */
#ms-popup-root .ms-quiz-opt{display:block;width:100%;margin:8px 0;padding:13px 16px;border-radius:12px;border:1px solid rgba(255,176,46,.35);background:rgba(255,176,46,.06);color:#f8f4ec;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s;}
#ms-popup-root .ms-quiz-opt:hover{background:rgba(255,176,46,.16);transform:translateY(-1px);}
#ms-popup-root .ms-quiz-title{font-family:var(--font-d,"Fraunces",Georgia,serif);font-size:22px;color:#ffcf7a;margin:14px 0 4px;}

@media (max-width:640px){
  #ms-popup-root .ms-wheel-wrap{width:210px;}
  #ms-popup-root .ms-game-grid{gap:8px;}
  #ms-popup-root .ms-game-icon{font-size:28px;}
  #ms-popup-root .ms-jar-emoji{font-size:38px;}
  #ms-popup-root .ms-bee-arena{height:150px;}
}

/* ============ GAMES 2-COLUMN MODE (desktop) ============ */
/* Desktop: two equal SQUARE columns — left = banner image edge to edge,
   right = picker / games / content, vertically centered, never scrolls.
   Phone (<=640px) keeps the 2-row layout untouched (see media query below).
   The image shows on the picker only — JS adds .ms-game-active to the box
   while a game is played or the prize/email step is up, and the content
   then takes the full box. */
#ms-popup-root .ms-popup-box.ms-games-on{
  display:flex;flex-direction:row;align-items:stretch;
  width:min(720px,94vw);aspect-ratio:2/1;max-height:86vh;
  padding:0;overflow:hidden;
}
#ms-popup-root .ms-popup-box.ms-games-on .ms-popup-bg{display:none !important;}
#ms-popup-root .ms-popup-box.ms-games-on:not(.ms-game-active) .ms-popup-bg-desktop{
  display:block !important;flex:0 0 50%;width:50%;height:100%;object-fit:cover;margin:0;
}
#ms-popup-root .ms-popup-box.ms-games-on .ms-popup-content{
  flex:1 1 50%;min-width:0;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding:24px 26px;
}
#ms-popup-root .ms-popup-box.ms-games-on.ms-game-active .ms-popup-content{flex-basis:100%;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-popup-step{width:100%;margin:0;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-popup-headline{font-size:21px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-game-sub{margin:0 0 8px;font-size:13.5px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-game-grid{display:flex;justify-content:center;gap:6px;margin:2px 0;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-game-card{flex:0 0 56px;padding:10px 2px;gap:5px;border-radius:12px;overflow:hidden;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-game-icon{font-size:24px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-game-name{font-size:10.5px;line-height:1.25;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-game-hint{margin:8px 0 0;font-size:12.5px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-wheel-wrap{width:190px;margin:6px auto 2px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-jars{margin:10px 0 4px;gap:10px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-jar{min-width:78px;padding:14px 10px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-jar-emoji{font-size:38px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-scratch-wrap{margin:8px auto;max-width:270px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-scratch-prize{height:110px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-bee-arena{height:140px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-quiz-title{font-size:20px;margin:10px 0 4px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-quiz-opt{margin:6px 0;padding:10px 12px;font-size:13.5px;}
#ms-popup-root .ms-popup-box.ms-games-on .ms-game-prize-banner{font-size:13.5px;}

/* Phone: 2-row layout, unchanged. */
@media (max-width:640px){
  #ms-popup-root .ms-popup-box.ms-games-on{
    flex-direction:column;width:40vh;height:80vh;aspect-ratio:auto;max-width:94vw;min-width:260px;
  }
  #ms-popup-root .ms-popup-box.ms-games-on:not(.ms-game-active) .ms-popup-bg-desktop{display:none !important;}
  #ms-popup-root .ms-popup-box.ms-games-on:not(.ms-game-active) .ms-popup-bg-mobile{
    display:block !important;flex:0 0 auto;height:50%;width:100%;object-fit:cover;
    border-bottom:1px solid rgba(255,176,46,.22);
  }
  #ms-popup-root .ms-popup-box.ms-games-on .ms-popup-content{flex:1 1 auto;width:100%;height:auto;padding:14px 16px;}
  #ms-popup-root .ms-popup-box.ms-games-on .ms-popup-headline{font-size:20px;}
  #ms-popup-root .ms-popup-box.ms-games-on .ms-game-grid{flex-wrap:wrap;}
  #ms-popup-root .ms-popup-box.ms-games-on .ms-game-card{flex:0 0 30%;padding:11px 4px;}
  #ms-popup-root .ms-popup-box.ms-games-on .ms-game-icon{font-size:24px;}
  #ms-popup-root .ms-popup-box.ms-games-on .ms-game-name{font-size:12px;}
  #ms-popup-root .ms-popup-box.ms-games-on .ms-game-sub{font-size:13px;}
  #ms-popup-root .ms-popup-box.ms-games-on .ms-game-hint{font-size:12.5px;}
}

/* Admin preview: desktop preview fits the frame; force-mobile mirrors the phone rules. */
#ms-popup-preview-frame-wrap:not(.ms-popup-force-mobile) #ms-popup-root .ms-popup-box.ms-games-on{width:100%;max-width:360px;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-box.ms-games-on{
  flex-direction:column;width:min(88vw,330px);height:80vh;aspect-ratio:auto;
}
.ms-popup-force-mobile #ms-popup-root .ms-popup-box.ms-games-on:not(.ms-game-active) .ms-popup-bg-desktop{display:none !important;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-box.ms-games-on:not(.ms-game-active) .ms-popup-bg-mobile{
  display:block !important;flex:0 0 auto;height:50%;width:100%;object-fit:cover;
  border-bottom:1px solid rgba(255,176,46,.22);
}
.ms-popup-force-mobile #ms-popup-root .ms-popup-box.ms-games-on .ms-popup-content{flex:1 1 auto;width:100%;height:auto;padding:14px 16px;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-box.ms-games-on .ms-game-grid{flex-wrap:wrap;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-box.ms-games-on .ms-game-card{flex:0 0 30%;padding:11px 4px;}
.ms-popup-force-mobile #ms-popup-root .ms-popup-box.ms-games-on .ms-game-icon{font-size:24px;}