/* ============================================================
   WP Promo Popup — Frontend CSS v1.0.3
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Mono:wght@500;700&display=swap');

:root {
    --ppu-bg:              #FFFFFF;
    --ppu-text:            #1E293B;
    --ppu-btn:             #6366F1;
    --ppu-btn-text:        #FFFFFF;
    --ppu-accent:          #6366F1;
    --ppu-coupon-bg:       #F0F1FF;
    --ppu-coupon-border:   #6366F1;
    --ppu-coupon-style:    dashed;
    --ppu-popup-radius:    20px;
    --ppu-popup-width:     460px;
    --ppu-popup-max-height:0px;
    --ppu-btn-radius:      10px;
    --ppu-title-size:      22px;
    --ppu-desc-size:       14px;
    --ppu-code-size:       22px;
    --ppu-overlay:         rgba(0,0,0,.55);
    --ppu-shadow:          0 20px 60px rgba(0,0,0,.16),0 4px 16px rgba(0,0,0,.07);
}

/* ── Overlay ─────────────────────────────────── */
.wppp-overlay { position:fixed; inset:0; z-index:999990; font-family:'Outfit',sans-serif; pointer-events:none; }
.wppp-overlay.wppp-visible { pointer-events:auto; }

/* ── Backdrop ────────────────────────────────── */
.wppp-backdrop { position:absolute; inset:0; background:var(--ppu-overlay); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; transition:opacity .25s ease; }
.wppp-overlay.wppp-visible .wppp-backdrop { opacity:1; }

/* ── Popup card ──────────────────────────────── */
.wppp-popup {
    position:absolute;
    background:var(--ppu-bg);
    color:var(--ppu-text);
    border-radius:var(--ppu-popup-radius);
    box-shadow:var(--ppu-shadow);
    width:min(var(--ppu-popup-width),calc(100vw - 24px));
    border:1px solid rgba(0,0,0,.05);
    overflow:hidden;
}

/* ── LAYOUTS ─────────────────────────────────── */
.wppp-layout-center .wppp-popup { top:50%;left:50%;transform:translate(-50%,-50%);overflow-y:auto; max-height:90vh; }
.wppp-layout-bottom-right .wppp-popup { bottom:20px;right:20px;border-radius:16px;max-height:calc(100vh - 40px);overflow-y:auto; }
.wppp-layout-bottom-left  .wppp-popup { bottom:20px;left:20px; border-radius:16px;max-height:calc(100vh - 40px);overflow-y:auto; }

/* ── ANIMATIONS (hidden → visible) ──────────── */
/* Fade */
.wppp-anim-fade .wppp-popup { opacity:0; transition:opacity .26s ease; }
.wppp-anim-fade.wppp-visible .wppp-popup { opacity:1; }

/* Slide Up — center */
.wppp-anim-slide.wppp-layout-center .wppp-popup { opacity:0;transform:translate(-50%,calc(-50% + 36px));transition:opacity .26s ease,transform .32s cubic-bezier(.34,1.08,.64,1); }
.wppp-anim-slide.wppp-layout-center.wppp-visible .wppp-popup { opacity:1;transform:translate(-50%,-50%); }
/* Slide Up — corners */
.wppp-anim-slide.wppp-layout-bottom-right .wppp-popup,
.wppp-anim-slide.wppp-layout-bottom-left  .wppp-popup { opacity:0;transform:translateY(48px);transition:opacity .26s ease,transform .32s cubic-bezier(.34,1.08,.64,1); }
.wppp-anim-slide.wppp-layout-bottom-right.wppp-visible .wppp-popup,
.wppp-anim-slide.wppp-layout-bottom-left.wppp-visible  .wppp-popup { opacity:1;transform:translateY(0); }

/* Zoom — center */
.wppp-anim-zoom.wppp-layout-center .wppp-popup { opacity:0;transform:translate(-50%,-50%) scale(.88);transition:opacity .24s ease,transform .28s cubic-bezier(.34,1.08,.64,1); }
.wppp-anim-zoom.wppp-layout-center.wppp-visible .wppp-popup { opacity:1;transform:translate(-50%,-50%) scale(1); }
/* Zoom — corners */
.wppp-anim-zoom.wppp-layout-bottom-right .wppp-popup { opacity:0;transform:scale(.82);transform-origin:bottom right;transition:opacity .24s ease,transform .28s cubic-bezier(.34,1.08,.64,1); }
.wppp-anim-zoom.wppp-layout-bottom-left  .wppp-popup { opacity:0;transform:scale(.82);transform-origin:bottom left; transition:opacity .24s ease,transform .28s cubic-bezier(.34,1.08,.64,1); }
.wppp-anim-zoom.wppp-layout-bottom-right.wppp-visible .wppp-popup,
.wppp-anim-zoom.wppp-layout-bottom-left.wppp-visible  .wppp-popup { opacity:1;transform:scale(1); }

/* Bounce — center */
.wppp-anim-bounce.wppp-layout-center .wppp-popup { opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s ease,transform .55s cubic-bezier(.34,1.56,.64,1); }
.wppp-anim-bounce.wppp-layout-center.wppp-visible .wppp-popup { opacity:1;transform:translate(-50%,-50%) scale(1); }
/* Bounce — corners */
.wppp-anim-bounce.wppp-layout-bottom-right .wppp-popup { opacity:0;transform:translateY(70px) scale(.8);transform-origin:bottom right;transition:opacity .2s ease,transform .55s cubic-bezier(.34,1.56,.64,1); }
.wppp-anim-bounce.wppp-layout-bottom-left  .wppp-popup { opacity:0;transform:translateY(70px) scale(.8);transform-origin:bottom left; transition:opacity .2s ease,transform .55s cubic-bezier(.34,1.56,.64,1); }
.wppp-anim-bounce.wppp-layout-bottom-right.wppp-visible .wppp-popup,
.wppp-anim-bounce.wppp-layout-bottom-left.wppp-visible  .wppp-popup { opacity:1;transform:translateY(0) scale(1); }

/* ── Closing ─────────────────────────────────── */
.wppp-overlay.wppp-closing .wppp-popup          { opacity:0!important;transform:translateY(14px) scale(.95)!important;transition:opacity .18s ease,transform .2s ease!important; }
.wppp-layout-center.wppp-closing .wppp-popup    { transform:translate(-50%,calc(-50% + 16px)) scale(.95)!important; }
.wppp-overlay.wppp-closing .wppp-backdrop       { opacity:0!important; }

/* ── Banner ──────────────────────────────────── */
.wppp-banner { background-size:cover;background-position:center;position:relative; }
.wppp-banner::after { content:'';position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(to bottom,transparent,var(--ppu-bg));pointer-events:none; }

/* ── Close button ────────────────────────────── */
.wppp-close { position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.07);color:var(--ppu-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s,transform .14s;padding:0;opacity:.65; }
.wppp-close:hover { background:rgba(0,0,0,.15);transform:rotate(90deg);opacity:1; }

/* ── Body ────────────────────────────────────── */
.wppp-body { padding:22px 20px 20px;display:flex;flex-direction:column;gap:10px; }
.wppp-title { margin:0;font-size:var(--ppu-title-size);font-weight:800;line-height:1.25;color:var(--ppu-text);padding-right:24px; }
.wppp-desc  { margin:0;font-size:var(--ppu-desc-size);line-height:1.65;color:var(--ppu-text);opacity:.65; }

/* ── Multi-coupon list ───────────────────────── */
.wppp-coupon-list { display:flex;flex-direction:column;gap:10px; }
.wppp-coupon-item { border-radius:10px;background:var(--ppu-coupon-bg);border:2px var(--ppu-coupon-style) var(--ppu-coupon-border);overflow:hidden; }
.wppp-coupon-main { display:flex;align-items:center;justify-content:space-between;padding:12px 14px;gap:10px; }
.wppp-coupon-info { display:flex;flex-direction:column;gap:2px;min-width:0; }
.wppp-coupon-label { font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ppu-text);opacity:.55; }
.wppp-code { font-family:'DM Mono',monospace;font-size:var(--ppu-code-size);font-weight:700;letter-spacing:.1em;color:var(--ppu-accent);line-height:1.1;user-select:all; }
.wppp-coupon-tag { font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--ppu-accent);color:var(--ppu-btn-text);padding:3px 9px;border-radius:5px;white-space:nowrap;flex-shrink:0; }

/* ── Copy button ─────────────────────────────── */
.wppp-copy-btn {
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:11px 16px;border:none;
    background:var(--ppu-btn);color:var(--ppu-btn-text);
    font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;
    cursor:pointer;letter-spacing:.01em;
    border-radius:0 0 calc(var(--ppu-btn-radius) - 2px) calc(var(--ppu-btn-radius) - 2px);
    position:relative;overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:filter .14s,transform .14s;
}
.wppp-copy-icon { flex-shrink:0; }

/* ── COPY BUTTON EFFECTS ─────────────────────── */

/* Shrink */
.wppp-effect-shrink:active,
.wppp-effect-shrink:hover { transform:scale(.96); }

/* Pulse */
@keyframes wppp-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(var(--ppu-btn-rgb,.5))} 50%{box-shadow:0 0 0 8px rgba(0,0,0,0)} }
.wppp-effect-pulse { animation:none; }
.wppp-effect-pulse:hover { animation:wppp-pulse-kf .7s; }
@keyframes wppp-pulse-kf { 0%{transform:scale(1)} 50%{transform:scale(1.04)} 100%{transform:scale(1)} }
.wppp-effect-pulse:hover { animation:wppp-pulse-kf .5s ease; }

/* Glow */
.wppp-effect-glow:hover { filter:brightness(1.12);box-shadow:0 0 18px 4px var(--ppu-btn); }
.wppp-effect-glow { transition:filter .2s,box-shadow .2s; }

/* Shake */
@keyframes wppp-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.wppp-effect-shake:active { animation:wppp-shake .4s ease; }

/* Ripple — handled by JS */
.wppp-effect-ripple { overflow:hidden; }
.wppp-ripple-wave { position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:wppp-ripple-anim .55s linear; pointer-events:none; }
@keyframes wppp-ripple-anim { to { transform:scale(4);opacity:0; } }

/* Bounce */
@keyframes wppp-bounce-btn { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} 60%{transform:translateY(-3px)} }
.wppp-effect-bounce:hover { animation:wppp-bounce-btn .5s ease; }

/* ── Toast ───────────────────────────────────── */
.wppp-toast { margin:0;text-align:center;font-size:13px;font-weight:600;min-height:1em;color:var(--ppu-accent);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s; }
.wppp-toast.wppp-show { opacity:1;transform:translateY(0); }

/* ══════════════════════════════════════════════
   TRIGGER BUTTON EFFECTS
══════════════════════════════════════════════ */
.wppp-trigbtn { -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .15s,box-shadow .15s; }

/* None — just hover lift */
.wppp-trigbtn-effect-none:hover   { transform:translateY(-2px) !important; }
.wppp-trigbtn-effect-none:active  { transform:scale(.97) !important; }

/* Shrink */
.wppp-trigbtn-effect-shrink:hover  { transform:scale(.95) !important; }
.wppp-trigbtn-effect-shrink:active { transform:scale(.92) !important; }

/* Pulse */
@keyframes wppp-trigbtn-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
.wppp-trigbtn-effect-pulse { animation:wppp-trigbtn-pulse 2s ease-in-out infinite; }
.wppp-trigbtn-effect-pulse:hover  { animation:none;transform:translateY(-2px) scale(1.04) !important; }
.wppp-trigbtn-effect-pulse:active { transform:scale(.96) !important; }

/* Glow */
@keyframes wppp-trigbtn-glow { 0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.22)} 50%{box-shadow:0 4px 28px rgba(0,0,0,.4),0 0 20px rgba(255,255,255,.25)} }
.wppp-trigbtn-effect-glow { animation:wppp-trigbtn-glow 2.5s ease-in-out infinite; }
.wppp-trigbtn-effect-glow:hover  { animation:none;filter:brightness(1.12);transform:translateY(-2px) !important; }

/* Bounce */
@keyframes wppp-trigbtn-bounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-10px)} 60%{transform:translateY(-5px)} }
.wppp-trigbtn-effect-bounce { animation:wppp-trigbtn-bounce 2s ease-in-out infinite; }
.wppp-trigbtn-effect-bounce:hover  { animation:none;transform:translateY(-4px) !important; }

/* Wiggle */
@keyframes wppp-trigbtn-wiggle { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-5deg)} 40%{transform:rotate(5deg)} 60%{transform:rotate(-4deg)} 80%{transform:rotate(4deg)} }
.wppp-trigbtn-effect-wiggle { animation:wppp-trigbtn-wiggle 3s ease-in-out infinite; }
.wppp-trigbtn-effect-wiggle:hover  { animation:none;transform:scale(1.05) !important; }

/* ── Reduced motion ──────────────────────────── */
@media (prefers-reduced-motion:reduce) {
    .wppp-popup,.wppp-backdrop,.wppp-copy-btn,.wppp-trigbtn { transition:none!important;animation:none!important; }
}

/* ── Mobile ──────────────────────────────────── */
@media (max-width:480px) {
    .wppp-layout-bottom-right .wppp-popup,
    .wppp-layout-bottom-left  .wppp-popup { left:10px!important;right:10px!important;bottom:10px!important;width:auto; }
}