/* =========================
   ROOT (SCOPED ONLY)
========================= */
.zx_wrap{
    all: initial;
    position:fixed;
    top:20px;
    left:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
    width:340px;
    max-width:90%;
    z-index:9999;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
}

.zx_wrap *{
    all: unset;
    box-sizing:border-box;
    font-family:inherit;
}

/* =========================
   ALERT CARD
========================= */
.zx_alert{
    display:flex;
    gap:12px;
    padding:14px 16px;
    width:100%;

    border-radius:12px;
    border:1px solid #e6e8eb;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);

    opacity:0;
    transform:translateX(-100%);
    animation:zx_slideIn 0.4s ease forwards;

    overflow:hidden;
    position:relative;
}

/* SLIDE IN */
@keyframes zx_slideIn{
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* FADE OUT */
.zx_fade_out{
    animation:zx_fadeOut 0.4s ease forwards;
}

@keyframes zx_fadeOut{
    to{
        opacity:0;
        transform:translateX(-100%);
    }
}

/* =========================
   ICON
========================= */
.zx_alert .icon{
    width:36px;
    height:36px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

/* TEXT */
.zx_alert .content{
    flex:1;
    min-width:0;
}

.zx_alert .title{
    font-size:14px;
    font-weight:600;
    margin-bottom:4px;
}

.zx_alert .message{
    font-size:13px;
    color:#425466;
    line-height:1.4;
    word-wrap:break-word;
}

/* CLOSE */
.zx_close{
    position:absolute;
    top:8px;
    right:10px;
    font-size:14px;
    cursor:pointer;
    opacity:0.6;
}
.zx_close:hover{opacity:1;}

/* =========================
   THEMES (UNCHANGED)
========================= */
.zx_success{
    background:#f0fbf6;
    border-left:4px solid #1f9d55;
}
.zx_success .icon{background:#d9f7e9;color:#1f9d55;}

.zx_error{
    background:#fff5f5;
    border-left:4px solid #d64545;
}
.zx_error .icon{background:#ffe1e1;color:#d64545;}

.zx_warning{
    background:#fffbf0;
    border-left:4px solid #d9822b;
}
.zx_warning .icon{background:#fff0cc;color:#d9822b;}

.zx_info{
    background:#f3f8ff;
    border-left:4px solid #2f6fed;
}
.zx_info .icon{background:#e1efff;color:#2f6fed;}

.zx_security{
    background:#f6f8fb;
    border-left:4px solid #0a2540;
}
.zx_security .icon{background:#0a2540;color:#fff;}

.zx_loading{
    background:#f7f9fc;
    border-left:4px solid #425466;
}
.zx_loading .icon{background:#eef2f7;color:#425466;}

/* =========================
   MOBILE
========================= */
@media (max-width:468px){
    .zx_wrap{
        left:50%;
        transform:translateX(-50%);
        width:92%;
    }
}



/* ===== SPINNER (for loading) ===== */
.spinner{
    width:16px;
    height:16px;
    border:2px solid darkblue;
    border-top:2px solid white;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
    margin-top:3px;
}

@keyframes spin{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}