/* TV Popup v23.1 */
:root{--tvp-bg:#1B3B34;--tvp-card:#F5F0E1;--tvp-accent:#FBE973;--tvp-gold:#D4AF37;--tvp-text:#1B3B34;--tvp-muted:rgba(27,59,52,.6);--tvp-success:#22c55e;--tvp-error:#ef4444;--tvp-warning:#f59e0b;--tvp-ease:cubic-bezier(.34,1.56,.64,1);--tvp-ease-out:cubic-bezier(.22,1,.36,1)}
/* Hide WC error notices immediately — popup will show them instead (prevents flash) */
.woocommerce-error,ul.woocommerce-error,.wc-block-components-notice-banner.is-error{display:none!important}
#tvp-wrap{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);z-index:99999999;pointer-events:none;font-family:'Manrope',system-ui,sans-serif;display:flex;flex-direction:column-reverse;align-items:center;gap:12px}
.tvp-toast{pointer-events:all;position:relative;width:380px;max-width:90vw}
.tvp-origin{position:absolute;bottom:0;left:50%;width:56px;height:56px;transform:translate(-50%,50%) scale(0);border-radius:50%;background:linear-gradient(135deg,var(--tvp-bg),#2a5249);box-shadow:0 4px 20px rgba(27,59,52,.4),0 0 0 3px rgba(251,233,115,.3),inset 0 2px 4px rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--tvp-ease),opacity .2s ease;z-index:2}
.tvp-origin svg{width:24px;height:24px;stroke:var(--tvp-accent);stroke-width:2.5;fill:none;opacity:0;transform:scale(0) rotate(-180deg);transition:all .3s var(--tvp-ease) .1s}
.tvp-toast.phase1 .tvp-origin{transform:translate(-50%,50%) scale(1)}.tvp-toast.phase1 .tvp-origin svg{opacity:1;transform:scale(1) rotate(0)}
.tvp-toast.success .tvp-origin{background:linear-gradient(135deg,var(--tvp-success),#16a34a);box-shadow:0 4px 20px rgba(34,197,94,.4),0 0 0 3px rgba(34,197,94,.2)}.tvp-toast.success .tvp-origin svg{stroke:#fff}
.tvp-toast.remove .tvp-origin{background:linear-gradient(135deg,var(--tvp-error),#dc2626);box-shadow:0 4px 20px rgba(239,68,68,.4),0 0 0 3px rgba(239,68,68,.2)}.tvp-toast.remove .tvp-origin svg{stroke:#fff}
.tvp-toast.warning .tvp-origin{background:linear-gradient(135deg,var(--tvp-warning),#d97706);box-shadow:0 4px 20px rgba(245,158,11,.4),0 0 0 3px rgba(245,158,11,.2)}.tvp-toast.warning .tvp-origin svg{stroke:#fff}
.tvp-toast.hello .tvp-origin,.tvp-toast.bye .tvp-origin{background:linear-gradient(135deg,var(--tvp-accent),var(--tvp-gold));box-shadow:0 4px 20px rgba(251,233,115,.4),0 0 0 3px rgba(251,233,115,.3)}.tvp-toast.hello .tvp-origin svg,.tvp-toast.bye .tvp-origin svg{stroke:var(--tvp-bg)}
.tvp-frame{position:relative;background:var(--tvp-bg);border-radius:24px;padding:4px;opacity:0;transform:scaleX(0) scaleY(.3);transform-origin:center bottom;transition:transform .4s var(--tvp-ease-out) .15s,opacity .25s ease .15s,box-shadow .3s ease .2s;box-shadow:0 25px 50px -12px rgba(0,0,0,.25),0 0 0 1px rgba(251,233,115,.1)}
.tvp-toast.phase2 .tvp-frame{opacity:1;transform:scaleX(1) scaleY(1);box-shadow:0 25px 50px -12px rgba(0,0,0,.25),0 0 0 1px rgba(251,233,115,.2),0 0 40px rgba(251,233,115,.1)}
.tvp-toast.phase2 .tvp-origin{transform:translate(-50%,50%) scale(.85);opacity:0;transition:transform .25s ease,opacity .2s ease}
.tvp-card{background:var(--tvp-card);border-radius:20px;padding:20px;position:relative;overflow:hidden}
.tvp-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(251,233,115,.15),transparent);opacity:0}
.tvp-toast.phase2 .tvp-card::before{animation:tvpShimmer .8s ease .35s forwards}
@keyframes tvpShimmer{0%{left:-100%;opacity:1}100%{left:100%;opacity:0}}
.tvp-content{display:flex;gap:16px;align-items:center;opacity:0;transform:translateY(10px);transition:all .35s var(--tvp-ease-out) .25s}
.tvp-toast.phase2 .tvp-content{opacity:1;transform:translateY(0)}
.tvp-img-wrap{position:relative;flex-shrink:0}
.tvp-img{width:64px;height:64px;border-radius:14px;object-fit:cover;background:rgba(27,59,52,.06);border:2px solid rgba(27,59,52,.08);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.tvp-badge{position:absolute;bottom:-6px;right:-6px;width:26px;height:26px;border-radius:50%;background:var(--tvp-success);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(34,197,94,.4);transform:scale(0);transition:transform .35s var(--tvp-ease) .4s;border:2px solid var(--tvp-card)}
.tvp-toast.phase2 .tvp-badge{transform:scale(1)}.tvp-toast.remove .tvp-badge{background:var(--tvp-error);box-shadow:0 3px 8px rgba(239,68,68,.4)}.tvp-toast.warning .tvp-badge{background:var(--tvp-warning);box-shadow:0 3px 8px rgba(245,158,11,.4)}
.tvp-badge svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none}
.tvp-auth-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--tvp-bg),#2a5249);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 16px rgba(27,59,52,.2);position:relative;overflow:hidden}
.tvp-auth-icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(251,233,115,.15) 50%,transparent 60%);transform:translateX(-100%)}
.tvp-toast.phase2 .tvp-auth-icon::before{animation:tvpIconShine .6s ease .5s forwards}
@keyframes tvpIconShine{to{transform:translateX(100%)}}
.tvp-auth-icon svg{width:28px;height:28px;stroke:var(--tvp-accent);stroke-width:2;fill:none}
.tvp-toast.bye .tvp-auth-icon{background:rgba(27,59,52,.1);box-shadow:none}.tvp-toast.bye .tvp-auth-icon svg{stroke:var(--tvp-muted)}
.tvp-body{flex:1;min-width:0;padding-right:32px}
.tvp-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tvp-type-icon{width:22px;height:22px;border-radius:6px;background:var(--tvp-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tvp-type-icon svg{width:12px;height:12px;stroke:var(--tvp-accent);stroke-width:2.5;fill:none}
.tvp-toast.remove .tvp-type-icon{background:var(--tvp-error)}.tvp-toast.remove .tvp-type-icon svg{stroke:#fff}
.tvp-toast.warning .tvp-type-icon{background:var(--tvp-warning)}.tvp-toast.warning .tvp-type-icon svg{stroke:#fff}
.tvp-title{font-size:10px;font-weight:800;color:var(--tvp-bg);text-transform:uppercase;letter-spacing:1px;opacity:.5}
.tvp-name{font-size:15px;font-weight:700;color:var(--tvp-text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tvp-var,.tvp-msg{font-size:12px;color:var(--tvp-muted);font-weight:600;margin-top:4px}
.tvp-meta{display:flex;align-items:center;gap:8px;margin-top:8px}
.tvp-qty{font-size:11px;font-weight:700;color:#fff;background:var(--tvp-bg);padding:4px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:5px}
.tvp-qty svg{width:11px;height:11px;stroke:var(--tvp-accent);stroke-width:2;fill:none}
.tvp-progress{height:3px;background:rgba(27,59,52,.08);border-radius:0 0 20px 20px;margin:16px -20px -20px;overflow:hidden}
.tvp-bar{height:100%;background:linear-gradient(90deg,var(--tvp-bg),#3d6b5f);border-radius:3px;transform-origin:right;transform:scaleX(0)}
.tvp-toast.phase2 .tvp-bar{animation:tvpBar 3s linear .3s forwards}
.tvp-toast.remove .tvp-bar{background:linear-gradient(90deg,var(--tvp-error),#f87171)}
.tvp-toast.warning .tvp-bar{background:linear-gradient(90deg,var(--tvp-warning),#fbbf24)}
.tvp-toast.hello .tvp-bar,.tvp-toast.bye .tvp-bar{background:linear-gradient(90deg,var(--tvp-gold),var(--tvp-accent))}
@keyframes tvpBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.tvp-toast.out .tvp-frame{transform:scaleX(.3) scaleY(.3);opacity:0;transition:all .3s var(--tvp-ease-out)}
.tvp-toast.out .tvp-content{opacity:0;transform:translateY(-10px);transition:all .2s ease}
@media(max-width:600px){
#tvp-wrap{bottom:auto;top:16px;left:50%;transform:translateX(-50%);flex-direction:column}
.tvp-toast{width:calc(100vw - 32px);max-width:380px}
.tvp-origin{bottom:auto;top:0;transform:translate(-50%,-50%) scale(0)}
.tvp-toast.phase1 .tvp-origin{transform:translate(-50%,-50%) scale(1)}
.tvp-toast.phase2 .tvp-origin{transform:translate(-50%,-50%) scale(.85)}
.tvp-frame{transform-origin:center top;border-radius:20px}
.tvp-card{padding:16px;border-radius:16px}
.tvp-img,.tvp-auth-icon{width:54px;height:54px;border-radius:12px}
.tvp-auth-icon svg{width:24px;height:24px}
.tvp-badge{width:22px;height:22px;bottom:-4px;right:-4px}.tvp-badge svg{width:10px;height:10px}
.tvp-content{gap:12px}.tvp-name{font-size:14px}
.tvp-progress{margin:12px -16px -16px}
}
@media(prefers-reduced-motion:reduce){
.tvp-toast,.tvp-origin,.tvp-frame,.tvp-content,.tvp-badge,.tvp-card::before,.tvp-auth-icon::before{transition:opacity .2s ease!important;animation:none!important}
.tvp-origin{transform:translate(-50%,50%) scale(0)!important}
.tvp-toast.phase1 .tvp-origin{display:none}
.tvp-toast.phase2 .tvp-frame{transform:none!important}.tvp-toast.phase2 .tvp-content{transform:none!important}
}