/* ============================================================
   DRIP CLIENT — Homepage Discord invitation popup
   Loaded only on index.php (see includes/discord_popup.php).
   Uses the site's design tokens (--pink, --purple, --cyan, --font-display …)
   with fallbacks. Never locks page scroll and never intercepts clicks
   outside the card, so header, search, cart and the rest of the homepage
   stay fully usable. All selectors are prefixed .dp- (no collisions).
   Layout: artwork on the LEFT, text on the RIGHT (also on phones), then the
   perks row and the big JOIN NOW button.
   ============================================================ */
.dp-root{
  position:fixed;z-index:8800;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  padding:max(14px,env(safe-area-inset-top,0px)) 12px max(14px,env(safe-area-inset-bottom,0px));
  font-family:var(--font-body,'Inter',sans-serif);
}
.dp-root[hidden]{display:none}
/* soft dim + neon haze behind the card (decorative only; never intercepts clicks) */
.dp-root::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(60% 50% at 50% 50%,rgba(157,61,240,.26),transparent 72%),rgba(5,2,12,.5)}
.dp-root.dp-open::before{opacity:1}

/* ── card = animated wrapper ── */
.dp-card{
  --c:22px;                                  /* size of the cut corners */
  position:relative;pointer-events:auto;width:100%;max-width:430px;color:#fff;outline:none;
  opacity:0;transform:translateY(22px) scale(.95);
}
.dp-root.dp-open .dp-card{animation:dpIn .5s cubic-bezier(.22,.9,.3,1.12) both}
.dp-root.dp-closing .dp-card{animation:dpOut .24s ease both}
.dp-root.dp-closing::before{opacity:0}
@keyframes dpIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes dpOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px) scale(.96)}}

/* neon glow behind the frame */
.dp-halo{position:absolute;inset:-4px;border-radius:26px;pointer-events:none;filter:blur(22px);opacity:.55;
  background:linear-gradient(135deg,var(--pink,#ff2da8),var(--purple,#9d3df0) 50%,#5865f2)}

/* ── frame: gradient neon border with cut TL + BR corners ── */
.dp-frame{
  position:relative;display:flex;padding:2px;border-radius:0 14px 0 14px;
  max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);
  background:linear-gradient(135deg,var(--pink,#ff2da8),var(--purple,#9d3df0) 45%,#5865f2 75%,var(--cyan,#00e5ff));
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
}
/* bright diagonal edges on the two cut corners */
.dp-frame::before,.dp-frame::after{content:"";position:absolute;width:var(--c);height:var(--c);pointer-events:none;z-index:3}
.dp-frame::before{left:0;top:0;background:linear-gradient(to bottom right,transparent 50%,var(--pink,#ff2da8) 50% calc(50% + 3px),transparent calc(50% + 3px))}
.dp-frame::after{right:0;bottom:0;background:linear-gradient(to bottom right,transparent calc(50% - 3px),#7d5cff calc(50% - 3px) 50%,transparent 50%)}

.dp-inner{
  position:relative;flex:1;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  border-radius:0 12px 0 12px;padding:22px 16px 16px;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;
  grid-template-areas:"art body" "feat feat" "join join" "note note";
  background:
    radial-gradient(120% 70% at 100% 0%,rgba(255,45,168,.18),transparent 60%),
    radial-gradient(110% 70% at 0% 100%,rgba(88,101,242,.26),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 22px),
    linear-gradient(160deg,rgba(38,15,82,.94),rgba(10,5,26,.97));
}
.dp-inner::-webkit-scrollbar{display:none}

/* ── close (×): chamfered neon square, always visible, 40px tap target ── */
.dp-close-wrap{position:absolute;top:9px;right:9px;z-index:4;filter:drop-shadow(0 0 6px rgba(255,45,168,.75))}
.dp-close{
  position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;cursor:pointer;color:#fff;
  background:var(--pink,#ff2da8);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:transform .2s;
}
.dp-close::before{content:"";position:absolute;inset:1.5px;background:#1b0a33;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .2s}
.dp-close-x{position:relative;font-size:28px;line-height:1;font-weight:300;display:block;margin-top:-2px}
.dp-close:hover::before{background:#5a1550}
.dp-close:active{transform:scale(.92)}
.dp-close:focus-visible{background:var(--cyan,#00e5ff);outline:none}
.dp-close:focus-visible::before{background:#0b3a4a}

/* ── artwork (everything sized in em; font-size scales it) ── */
.dp-art{grid-area:art;position:relative;font-size:11px;width:11em;height:12.6em;flex:none}
.dp-panel{position:absolute;left:0;top:3.4em;width:6.3em;height:5em;padding:.7em .6em;border-radius:.7em;transform:rotate(-9deg);
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(150deg,rgba(60,50,150,.7),rgba(20,14,60,.8));border:1px solid rgba(110,130,255,.7);box-shadow:0 0 1.2em rgba(88,101,242,.5)}
.dp-panel-row{display:flex;align-items:center;gap:.5em}
.dp-dot{width:.95em;height:.95em;border-radius:50%;background:linear-gradient(135deg,#8ea2ff,#c04cff);flex:none}
.dp-bar{height:.45em;flex:1;border-radius:1em;background:rgba(160,170,255,.45)}
.dp-bar:last-child{max-width:70%}
.dp-mascot{position:absolute;left:2.2em;top:1.3em;width:8.3em;height:8em;display:flex;align-items:center;justify-content:center;animation:dpFloat 4.5s ease-in-out infinite}
.dp-glyph{font-size:7.6em;line-height:1;
  background:linear-gradient(150deg,#a3b0ff 0%,#5865f2 50%,#7d3df0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 .35em rgba(88,101,242,.9)) drop-shadow(0 .2em .3em rgba(0,0,0,.5))}
.dp-mascot.dp-has-logo{left:2.35em;top:1.5em;width:7.6em;height:7.6em}
.dp-mascot img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 .5em rgba(157,61,240,.8)) drop-shadow(0 .3em .5em rgba(0,0,0,.5))}
.dp-crown{position:absolute;left:2.05em;top:-.1em;font-size:2.5em;line-height:1;color:#ff4db8;transform:rotate(-6deg);filter:drop-shadow(0 0 .35em rgba(255,45,168,.9));animation:dpFloat 4.5s ease-in-out infinite}
.dp-plane{position:absolute;right:.1em;bottom:2.3em;width:3.3em;height:3.3em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1em;
  color:#9fb0ff;background:radial-gradient(circle at 35% 30%,rgba(120,135,255,.4),rgba(30,20,90,.85));border:1px solid rgba(120,135,255,.7);box-shadow:0 0 1em rgba(88,101,242,.55)}
.dp-plane i{font-size:1.5em}
.dp-ribbon{position:absolute;left:0;bottom:.3em;display:flex;align-items:center;gap:.5em;padding:.5em 1em .5em .65em;border-radius:.5em;transform:rotate(-11deg);transform-origin:left bottom;
  background:linear-gradient(135deg,#5b2bd6,#c026d3);border:1px solid #ff6fd0;box-shadow:0 .5em 1.2em rgba(0,0,0,.5),0 0 1.2em rgba(255,45,168,.55)}
.dp-ribbon i{font-size:1.6em;color:#fff}
.dp-ribbon-text{display:flex;flex-direction:column;font-family:var(--font-display,'Sora',sans-serif);font-weight:800;font-size:1.02em;line-height:1.1;letter-spacing:.07em;text-transform:uppercase}
@keyframes dpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-.35em)}}

/* ── text column ── */
.dp-body{grid-area:body;min-width:0;text-align:left}
.dp-eyebrow{display:flex;align-items:center;gap:7px;margin-bottom:7px;min-width:0;
  font-family:var(--font-display,'Sora',sans-serif);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#a4adff}
.dp-eyebrow-ic{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:#5865f2;box-shadow:0 0 10px rgba(88,101,242,.75)}
.dp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dp-heading{margin:0 0 8px;font-family:var(--font-display,'Sora',sans-serif);font-weight:800;text-transform:uppercase;line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere}
.dp-heading span{display:block}
.dp-h-top{font-size:clamp(15px,5vw,22px);color:#fff}
.dp-h-hot,.dp-h-plain{font-size:clamp(23px,7.4vw,34px);background:linear-gradient(90deg,var(--pink,#ff2da8),#c04cff 60%,#9d6dff);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 12px rgba(255,45,168,.5))}
.dp-h-plain{font-size:clamp(18px,6vw,26px)}
.dp-h-sub{font-size:clamp(15px,4.9vw,21px);background:linear-gradient(90deg,#8fa0ff,#7fd8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.dp-desc{margin:0;font-size:11.5px;line-height:1.45;color:var(--text-soft,#d3c8e6)}

/* ── perks row ── */
.dp-features{grid-area:feat;list-style:none;margin:14px 0 14px;padding:12px 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08)}
.dp-feat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 3px;min-width:0;text-align:center}
.dp-feat+.dp-feat{border-left:1px solid rgba(255,255,255,.08)}
.dp-feat-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#e9b6ff;
  background:linear-gradient(145deg,rgba(157,61,240,.3),rgba(88,101,242,.16));border:1px solid rgba(157,61,240,.6);box-shadow:0 0 14px rgba(157,61,240,.35),inset 0 0 10px rgba(157,61,240,.18)}
.dp-feat-label{font-size:10.5px;line-height:1.25;color:var(--text-soft,#d3c8e6);overflow-wrap:anywhere}

/* ── JOIN NOW: arrow-shaped neon button ── */
.dp-join-wrap{grid-area:join;filter:drop-shadow(0 6px 14px rgba(255,45,168,.5)) drop-shadow(0 0 10px rgba(157,61,240,.55))}
.dp-join{
  --p:18px;display:block;padding:2px;text-decoration:none;color:#fff;cursor:pointer;
  background:linear-gradient(90deg,#ff7ad1,#8b5cff 55%,#5ad7ff);
  clip-path:polygon(var(--p) 0,calc(100% - var(--p)) 0,100% 50%,calc(100% - var(--p)) 100%,var(--p) 100%,0 50%);
}
.dp-join-in{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 30px;
  font-family:var(--font-display,'Sora',sans-serif);font-size:17px;font-weight:800;letter-spacing:.07em;
  background:linear-gradient(135deg,#ff2da8 0%,#b53df0 55%,#7d5cff 100%);
  clip-path:polygon(calc(var(--p) - 1px) 0,calc(100% - var(--p) + 1px) 0,100% 50%,calc(100% - var(--p) + 1px) 100%,calc(var(--p) - 1px) 100%,0 50%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:filter .2s ease;
}
.dp-join-in i{font-size:22px}
.dp-join-in .dp-join-arrow{font-size:16px;transition:transform .2s ease}
.dp-join-in::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:dpShine 3.4s ease-in-out 1s infinite}
@keyframes dpShine{0%{left:-60%}55%,100%{left:130%}}
.dp-join:hover .dp-join-in{filter:brightness(1.12)}
.dp-join:hover .dp-join-arrow{transform:translateX(4px)}
.dp-join:active .dp-join-in{filter:brightness(.95)}
.dp-join:focus-visible{outline:none;background:var(--cyan,#00e5ff)}
.dp-join[aria-disabled="true"]{filter:grayscale(.75) brightness(.75);cursor:not-allowed;pointer-events:none}
.dp-join[aria-disabled="true"] .dp-join-in::after{display:none}
.dp-note{grid-area:note;margin:10px 0 0;text-align:center;font-size:11.5px;color:#ffb3d9}

/* ── very narrow phones ── */
@media (max-width:350px){
  .dp-card{--c:18px}
  .dp-inner{padding:20px 12px 14px;column-gap:8px}
  .dp-art{font-size:8.8px}
  .dp-features{grid-template-columns:repeat(2,1fr);row-gap:12px}
  .dp-feat:nth-child(3){border-left:0}
  .dp-join-in{font-size:15px;padding:10px 22px}
}

/* ── tablet / desktop: bigger artwork + type ── */
@media (min-width:680px){
  .dp-card{--c:30px;max-width:700px}
  .dp-inner{padding:34px 40px 26px;column-gap:34px}
  .dp-art{font-size:17px}
  .dp-body{padding-right:30px}
  .dp-eyebrow{font-size:15px;margin-bottom:10px}
  .dp-eyebrow-ic{width:34px;height:34px;font-size:18px}
  .dp-h-top,.dp-h-sub{font-size:31px}
  .dp-h-hot{font-size:48px}.dp-h-plain{font-size:36px}
  .dp-desc{font-size:15px;line-height:1.5}
  .dp-features{margin:22px 0 18px;padding-top:16px}
  .dp-feat-ic{width:46px;height:46px;font-size:19px}
  .dp-feat-label{font-size:13px}
  .dp-join-wrap{justify-self:center;width:100%;max-width:440px}
  .dp-join{--p:26px}
  .dp-join-in{min-height:58px;font-size:20px}
  .dp-close-wrap{top:14px;right:14px}
}
/* short viewports (landscape phones): tighten vertical rhythm */
@media (max-height:540px){
  .dp-inner{padding-top:18px;padding-bottom:12px}
  .dp-features{margin:10px 0 10px;padding-top:8px}.dp-feat-ic{width:32px;height:32px;font-size:14px}
  .dp-join-in{min-height:42px;padding:8px 24px}
}
@media (min-width:680px) and (max-height:540px){
  .dp-inner{padding:20px 36px 14px;column-gap:20px}
  .dp-art{font-size:11px}
  .dp-h-top,.dp-h-sub{font-size:21px}.dp-h-hot{font-size:31px}
  .dp-desc{font-size:12.5px}
  .dp-features{margin:12px 0 14px}
}

@media (prefers-reduced-motion:reduce){
  .dp-root.dp-open .dp-card,.dp-root.dp-closing .dp-card{animation-duration:.01s}
  .dp-mascot,.dp-crown,.dp-join-in::after{animation:none}
  .dp-join:hover .dp-join-arrow{transform:none}
}