/* ========================= */
/* SISTEMA DE ALERTAS ASCENT */
/* ========================= */

/* OVERLAY (para modales) */
.alert-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
    z-index: 9998;
}

.alert-overlay.show {
    opacity: 1;
    pointer-events: all;
}

/* CAJA */
.alert-box {
    background: #fff;
    padding: 25px;
    width: 320px;

    border-radius: 12px;
    text-align: center;

    box-shadow: 0 20px 40px rgba(0,0,0,0.15);

    transform: translateY(20px);
    opacity: 0;
    transition: 0.25s ease;
}

.alert-overlay.show .alert-box {
    transform: translateY(0);
    opacity: 1;
}

/* TEXTO */
.alert-box p {
    margin-bottom: 18px;
    font-size: 0.9rem;
    color: var(--text);
}

/* BOTÓN */
.alert-box button {
    padding: 10px 22px;
    border: none;
    background: var(--accent);
    cursor: pointer;
    transition: 0.2s;
}

.alert-box button:hover {
    opacity: 0.85;
}

/* TIPOS */
.alert-success .alert-box {
    border-top: 4px solid #2ecc71;
}

.alert-error .alert-box {
    border-top: 4px solid #e74c3c;
}

.alert-info .alert-box {
    border-top: 4px solid #3498db;
}

/* ========================================= */
/* NORTH LEGACY TOAST */
/* ========================================= */

.cart-alert{

    position:fixed;

    right:28px;
    bottom:28px;

    display:flex;
    align-items:center;
    gap:16px;

    width:360px;
    max-width:calc(100vw - 30px);

    padding:16px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    border:1px solid rgba(0,0,0,.06);

    border-radius:22px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.12);

    opacity:0;

    transform:
        translateY(40px)
        scale(.97);

    transition:
        opacity .35s,
        transform .35s;

    overflow:hidden;

    z-index:99999;

}

/* ========================================= */
/* SHOW */
/* ========================================= */

.cart-alert.show{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}

/* ========================================= */
/* BARRA INFERIOR */
/* ========================================= */

.cart-alert::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:3px;

    background:#111;

    transform-origin:left;

    animation:toastProgress 2.5s linear forwards;

}

/* ========================================= */
/* IMAGEN */
/* ========================================= */

.cart-alert img,
.alert-placeholder{

    width:62px;

    height:62px;

    border-radius:16px;

    object-fit:cover;

    flex-shrink:0;

}

.alert-placeholder{

    background:#f5f5f5;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#999;

    font-size:.7rem;

    letter-spacing:2px;

}

/* ========================================= */
/* CONTENIDO */
/* ========================================= */

.alert-content{

    display:flex;

    flex-direction:column;

    gap:4px;

    flex:1;

}

/* TITULO */

.alert-content strong{

    font-size:.95rem;

    font-weight:700;

    color:#111;

}

/* PRODUCTO */

.alert-content span{

    color:#666;

    font-size:.82rem;

    line-height:1.5;

}

/* ========================================= */
/* ICONO CHECK */
/* ========================================= */

.cart-alert::before{

    content:"✓";

    position:absolute;

    top:14px;

    right:16px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#111;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:.8rem;

    font-weight:700;

}

/* ========================================= */
/* HOVER */
/* ========================================= */

.cart-alert:hover{

    transform:
        translateY(-3px)
        scale(1.01);

}

/* ========================================= */
/* ANIMACIONES */
/* ========================================= */

@keyframes toastProgress{

    from{

        transform:scaleX(1);

    }

    to{

        transform:scaleX(0);

    }

}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media(max-width:600px){

    .cart-alert{

        left:15px;
        right:15px;

        width:auto;

        bottom:18px;

    }

}

/* ========================= */
/* ALERTAS ASCENT */
/* ========================= */

.custom-alert {
    position: fixed;

    top: 25px;
    right: 25px;

    z-index: 9999;

    min-width: 280px;
    max-width: 380px;

    padding: 16px 18px;

    background: #111;
    color: #fff;

    border: 1px solid rgba(255,255,255,0.08);

    font-size: 0.9rem;
    letter-spacing: 0.3px;
    line-height: 1.5;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.18);

    transform:
        translateX(120%);

    opacity: 0;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}

/* SHOW */
.custom-alert.show {
    transform: translateX(0);
    opacity: 1;
}

/* ========================= */
/* TIPOS */
/* ========================= */

.custom-alert.error {
    border-left: 4px solid #ff3b30;
}

.custom-alert.success {
    border-left: 4px solid #00c853;
}

.custom-alert.warning {
    border-left: 4px solid #ffb300;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 600px) {

    .custom-alert {

        top: 15px;
        right: 15px;
        left: 15px;

        min-width: unset;
        max-width: unset;

        font-size: 0.85rem;
    }
}