/* ╔══════════════════════════════════════════════╗
   ║  JJW NOTIFICATION DRAWER  v3.0 — Playful       ║
   ╚══════════════════════════════════════════════╝ */

#jjw-notification-drawer {
    position:fixed; top:80px; right:16px;
    z-index:999999;
    display:flex; flex-direction:column; gap:10px;
    pointer-events:none;
    max-width:380px; width:calc(100vw - 32px);
}

.jjw-notice {
    position:relative;
    display:flex; align-items:flex-start; gap:12px;
    padding:14px 40px 14px 14px;
    background:var(--jj-white, #fff);
    border:1px solid var(--jj-border, rgba(0,0,0,0.06));
    border-radius:var(--jj-radius, 14px);
    box-shadow:0 8px 32px rgba(0,0,0,0.12);
    pointer-events:auto;
    transform:translateX(110%); opacity:0;
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
}
.jjw-notice.is-visible { transform:translateX(0); opacity:1; }
.jjw-notice.is-exiting { transform:translateX(110%); opacity:0; }

.jjw-notice__icon {
    flex-shrink:0; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
}
.jjw-notice__icon svg { display:block; width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }

.jjw-notice__content {
    flex:1; min-width:0;
    font-family:var(--jj-font, 'Play', sans-serif);
    font-size:13px; font-weight:400;
    color:var(--jj-text, #2a2a2a); line-height:1.5;
}
.jjw-notice__content a { color:var(--jj-blue, #2296D0); text-decoration:underline; }

.jjw-notice__close {
    position:absolute; top:10px; right:10px;
    width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer;
    color:var(--jj-text-faint, #b0b0b0); padding:0; outline:none;
    border-radius:50%; transition:all 0.25s ease;
}
.jjw-notice__close:hover { background:rgba(0,0,0,0.05); color:var(--jj-text-mid, #5a5a5a); }
.jjw-notice__close svg { display:block; width:10px; height:10px; stroke:currentColor; fill:none; }

.jjw-notice__progress {
    position:absolute; bottom:0; left:0;
    height:3px; border-radius:0 0 var(--jj-radius, 14px) var(--jj-radius, 14px);
}
.jjw-notice__progress.is-running { animation:jjw-countdown 4s linear forwards; }
@keyframes jjw-countdown { from{width:100%} to{width:0%} }

/* Success */
.jjw-notice--success { border-color:rgba(34,150,208,0.2); }
.jjw-notice--success .jjw-notice__icon { background:var(--jj-blue-light, #e8f4fb); color:var(--jj-blue, #2296D0); }
.jjw-notice--success .jjw-notice__progress { background:var(--jj-blue, #2296D0); }

/* Error */
.jjw-notice--error { border-color:rgba(210,23,118,0.15); }
.jjw-notice--error .jjw-notice__icon { background:var(--jj-pink-light, #fce8f1); color:var(--jj-pink, #D21776); }
.jjw-notice--error .jjw-notice__progress { background:var(--jj-pink, #D21776); }

/* Info */
.jjw-notice--info { border-color:rgba(0,0,0,0.06); }
.jjw-notice--info .jjw-notice__icon { background:#f0f0f0; color:#666; }
.jjw-notice--info .jjw-notice__progress { background:#999; }

/* Hide WC notices */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info { display:none !important; }

@media (max-width:480px) {
    #jjw-notification-drawer { top:66px; right:8px; max-width:calc(100vw - 16px); }
}