/* ──────────────────────────────────────────────
   CGP Gifts V2 — Frontend Popup CSS
   Version: 2.5.0
   ────────────────────────────────────────────── */

/* Overlay */
.cgp2-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:2147483647;align-items:center;justify-content:center;animation:cgp2fi .3s ease-out}
@keyframes cgp2fi{from{opacity:0}to{opacity:1}}
html.cgp2-lk,body.cgp2-lk{overflow:hidden!important;touch-action:none}

/* Panel */
.cgp2-p{background:#161616;border:1px solid rgba(255,255,255,.06);border-radius:18px;width:94%;max-width:840px;max-height:88vh;overflow-y:auto;position:relative;animation:cgp2su .35s cubic-bezier(.16,1,.3,1);box-shadow:0 24px 64px rgba(0,0,0,.55)}
.cgp2-p::-webkit-scrollbar{width:3px}
.cgp2-p::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
@keyframes cgp2su{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}

/* Top spacer */
.cgp2-spacer{height:24px;background:#161616;flex-shrink:0}

/* Close: plain X */
.cgp2-x{position:absolute;top:18px;right:18px;width:28px;height:28px;background:none;border:none;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;padding:0;opacity:.4;transition:opacity .2s}
.cgp2-x:hover{opacity:.9}
.cgp2-x::before,.cgp2-x::after{content:'';position:absolute;width:18px;height:1.5px;background:#fff}
.cgp2-x::before{transform:rotate(45deg)}
.cgp2-x::after{transform:rotate(-45deg)}

/* Header */
.cgp2-hd{padding:0 24px;text-align:center}
.cgp2-ti{font-size:20px;font-weight:800;color:#f5f5f5;line-height:1.2}
.cgp2-sub{color:#777;font-size:12px;margin-top:4px;font-weight:500}
.cgp2-sub strong{color:#FBBF24}

/* Progress bar */
.cgp2-pg{padding:16px 24px 0}
.cgp2-trk{height:4px;background:rgba(255,255,255,.06);border-radius:10px;position:relative}
.cgp2-fl{height:100%;border-radius:10px;background:linear-gradient(90deg,#6366F1,#818CF8);transition:width .7s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 0 8px rgba(129,140,248,.3);animation:cgp2neon 2s ease-in-out infinite}
@keyframes cgp2neon{0%,100%{box-shadow:0 0 6px rgba(129,140,248,.3),0 0 12px rgba(129,140,248,.15)}50%{box-shadow:0 0 12px rgba(129,140,248,.6),0 0 24px rgba(129,140,248,.3),0 0 36px rgba(129,140,248,.1)}}
.cgp2-fl::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:#818CF8;border-radius:50%;border:2px solid #161616;box-shadow:0 0 6px rgba(129,140,248,.25);animation:cgp2dot 2s ease-in-out infinite}
@keyframes cgp2dot{0%,100%{box-shadow:0 0 4px rgba(129,140,248,.3)}50%{box-shadow:0 0 10px rgba(129,140,248,.7),0 0 20px rgba(129,140,248,.3)}}
.cgp2-mk{display:flex;justify-content:space-between;margin-top:6px}
.cgp2-mk>div{flex:1;font-size:10px;font-weight:700;color:#444;transition:color .3s}
.cgp2-mk>div:first-child{text-align:left}
.cgp2-mk>div:nth-child(2){text-align:center}
.cgp2-mk>div:last-child{text-align:right}
.cgp2-mk>div.hit{color:#818CF8}

/* Tiers: 3-col desktop */
.cgp2-ts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 18px 20px}

/* Tier block */
.cgp2-t{border:1px solid rgba(255,255,255,.05);border-radius:14px;background:rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column;transition:all .3s cubic-bezier(.4,0,.2,1)}
.cgp2-t.act{border-color:#818CF8;box-shadow:0 0 0 1px #818CF8,0 4px 20px rgba(129,140,248,.08)}
.cgp2-t.lk{opacity:.5;filter:saturate(.3)}
.cgp2-t.dn{border-color:rgba(129,140,248,.15);opacity:.8;padding:0}
.cgp2-t.dn .cgp2-th{border-bottom:none;padding:10px 12px}
/* Done tier: compact with chosen gift chip */
.cgp2-th-done{flex-wrap:nowrap;gap:6px}
.cgp2-th-done .cgp2-th-ic{font-size:14px;flex-shrink:0}
.cgp2-th-done .cgp2-th-n{flex:0 0 auto;min-width:0;white-space:nowrap;font-size:12px;opacity:.7}
.cgp2-th-done .cgp2-th-a{font-size:11px;opacity:.5}
.cgp2-done-pick{display:flex;align-items:center;gap:6px;flex:1;min-width:0;background:rgba(129,140,248,.08);border:1px solid rgba(129,140,248,.15);border-radius:20px;padding:3px 10px 3px 3px;margin-left:auto}
.cgp2-done-pick::after{content:'✓';font-size:9px;color:#818CF8;flex-shrink:0;margin-left:2px}
.cgp2-done-img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid rgba(129,140,248,.2)}
.cgp2-done-name{font-size:11px;color:#A5B4FC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:500}

/* Tier header */
.cgp2-th{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.03);background:rgba(255,255,255,.01)}
.cgp2-th-ic{font-size:14px;flex-shrink:0}
.cgp2-th-n{font-size:10px;font-weight:700;color:#f5f5f5;display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.cgp2-tag{font-size:7px;padding:1px 5px;border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.cgp2-t.act .cgp2-tag{background:#818CF8;color:#000}
.cgp2-t.lk .cgp2-tag{background:rgba(255,255,255,.05);color:#777}
.cgp2-t.dn .cgp2-tag{color:#818CF8;border:1px solid rgba(129,140,248,.25);font-size:8px;padding:1px 5px}
.cgp2-th-a{font-size:10px;font-weight:700;color:#555;white-space:nowrap}
.cgp2-t.act .cgp2-th-a{color:#818CF8}

/* Gift grid */
.cgp2-tg{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:8px;flex:1}

/* Gift card */
.cgp2-g{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid transparent;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}
.cgp2-t.act .cgp2-g:hover{border-color:#818CF8;background:rgba(129,140,248,.04);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.cgp2-t.lk .cgp2-g,.cgp2-t.dn .cgp2-g{cursor:default;pointer-events:none}

/* Gift image */
.cgp2-gi{width:52px;height:52px;border-radius:8px;object-fit:contain;background:#F9F9F9;padding:2px;transition:transform .2s}
.cgp2-t.act .cgp2-g:hover .cgp2-gi{transform:scale(1.08)}

/* Gift name */
.cgp2-gn{font-size:9px;font-weight:600;color:#aaa;text-align:center;line-height:1.2;max-height:22px;overflow:hidden}
.cgp2-t.lk .cgp2-gn{color:#444}

/* Lock overlay */
.cgp2-lo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);border-radius:10px;font-size:12px;opacity:.5}

/* Locked tier CTA */
.cgp2-ct{padding:0 8px 8px}
.cgp2-cb{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;padding:5px;border-radius:6px;border:1px dashed rgba(255,255,255,.08);color:#777;font-size:9px;font-weight:600}
.cgp2-cb .amt{color:#FBBF24;font-weight:700}

/* Loading state */
.cgp2-g.ld{pointer-events:none}
.cgp2-g.ld .cgp2-gi{animation:cgp2lf 1s infinite ease-in-out}
@keyframes cgp2lf{0%,100%{opacity:.3}50%{opacity:1}}

/* Confetti */
.cgp2-cf{position:absolute;top:0;left:0;right:0;height:120px;overflow:hidden;pointer-events:none;z-index:2}
.cgp2-cf i{position:absolute;border-radius:2px;animation:cgp2cf linear forwards;opacity:0}
@keyframes cgp2cf{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(120px) rotate(720deg);opacity:0}}

/* Mobile swipe indicator */
.cgp2-sw{display:none;width:28px;height:3px;border-radius:3px;background:#444;margin:6px auto 0}

/* Loading spinner compat (from global CSS) */
.cgp-gift.loading{position:relative;pointer-events:none;opacity:.7}
.cgp-gift.loading::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;background:url('https://spliff.es/wp-content/uploads/2025/03/Logo_Noir_SPLIFF.svg') no-repeat center center;background-size:contain;transform:translate(-50%,-50%);animation:cgpFade 1.5s infinite ease-in-out;z-index:10;border:none}
.cgp-gift.loading img,.cgp-gift.loading p{opacity:.3}
@keyframes cgpFade{0%,100%{opacity:.4}50%{opacity:1}}

/* === MOBILE (< 768px) === */
@media(max-width:767px){
  .cgp2-ov{align-items:flex-end}
  .cgp2-p{border-radius:18px 18px 0 0;width:100%;max-width:none;max-height:92vh;animation:cgp2sum .3s cubic-bezier(.16,1,.3,1);overflow-y:auto}
  @keyframes cgp2sum{from{transform:translateY(100%)}to{transform:none}}
  .cgp2-sw{display:block}
  .cgp2-spacer{height:16px}
  .cgp2-hd{padding:0 18px;position:sticky;top:0;background:#161616;z-index:3;padding-top:8px;padding-bottom:8px}
  .cgp2-ti{font-size:17px}
  .cgp2-pg{padding:8px 18px 0}
  .cgp2-ts{grid-template-columns:1fr;padding:10px 12px 24px;gap:6px}
  .cgp2-t.lk .cgp2-tg{grid-template-columns:repeat(4,1fr)}
  .cgp2-t.lk .cgp2-gi{width:30px;height:30px}
  .cgp2-t.lk .cgp2-gn{font-size:7px}
  .cgp2-t.lk .cgp2-g{padding:5px 3px}
  .cgp2-x{top:10px;right:12px;width:24px;height:24px}
  .cgp2-x::before,.cgp2-x::after{width:15px}
  /* Done tiers: extra compact on mobile */
  .cgp2-t.dn{margin:0;border-radius:10px}
  .cgp2-t.dn .cgp2-th{padding:8px 10px}
  .cgp2-th-done .cgp2-th-ic{font-size:13px}
  .cgp2-th-done .cgp2-th-n{font-size:11px}
  .cgp2-done-pick{padding:2px 8px 2px 2px;gap:5px}
  .cgp2-done-img{width:22px;height:22px}
  .cgp2-done-name{font-size:10px}
}