/*======================================
EIVOX ALERTS CSS
Version: 1.0
======================================*/


/*======================================
ALERT
======================================*/

.alert{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 20px;

    margin-bottom:20px;

    border:1px solid transparent;

    border-radius:var(--radius-lg);

    background:var(--card);

    box-shadow:var(--shadow-sm);

}

.alert:last-child{

    margin-bottom:0;

}


/*======================================
ICON
======================================*/

.alert-icon{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    flex-shrink:0;

}

.alert-icon i,
.alert-icon svg{

    width:22px;

    height:22px;

}


/*======================================
CONTENT
======================================*/

.alert-content{

    flex:1;

}

.alert-title{

    margin-bottom:6px;

    font-size:1rem;

    font-weight:var(--weight-bold);

    color:var(--text);

}

.alert-text{

    color:var(--text-muted);

    line-height:1.7;

}


/*======================================
CLOSE BUTTON
======================================*/

.alert-close{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    background:none;

    color:var(--text-muted);

    border-radius:50%;

    cursor:pointer;

    transition:var(--transition);

}

.alert-close:hover{

    background:var(--surface);

    color:var(--danger);

}


/*======================================
SUCCESS
======================================*/

.alert-success{

    border-color:rgba(34,197,94,.25);

    background:rgba(34,197,94,.08);

}

.alert-success .alert-icon{

    background:rgba(34,197,94,.18);

    color:var(--success);

}


/*======================================
ERROR
======================================*/

.alert-danger{

    border-color:rgba(239,68,68,.25);

    background:rgba(239,68,68,.08);

}

.alert-danger .alert-icon{

    background:rgba(239,68,68,.18);

    color:var(--danger);

}


/*======================================
WARNING
======================================*/

.alert-warning{

    border-color:rgba(245,158,11,.25);

    background:rgba(245,158,11,.08);

}

.alert-warning .alert-icon{

    background:rgba(245,158,11,.18);

    color:var(--warning);

}


/*======================================
INFO
======================================*/

.alert-info{

    border-color:rgba(59,130,246,.25);

    background:rgba(59,130,246,.08);

}

.alert-info .alert-icon{

    background:rgba(59,130,246,.18);

    color:var(--primary);

}


/*======================================
TOAST CONTAINER
======================================*/

.toast-container{

    position:fixed;

    top:25px;

    right:25px;

    width:360px;

    display:flex;

    flex-direction:column;

    gap:16px;

    z-index:var(--z-toast);

}


/*======================================
TOAST
======================================*/

.toast{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    background:var(--card);

    border:1px solid var(--border);

    border-left:5px solid var(--primary);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

    animation:toastIn .35s ease;

}

.toast.success{

    border-left-color:var(--success);

}

.toast.error{

    border-left-color:var(--danger);

}

.toast.warning{

    border-left-color:var(--warning);

}

.toast.info{

    border-left-color:var(--primary);

}


/*======================================
LOADING ALERT
======================================*/

.alert-loading{

    display:flex;

    align-items:center;

    gap:16px;

}

.alert-spinner{

    width:24px;

    height:24px;

    border:3px solid var(--border);

    border-top-color:var(--primary);

    border-radius:50%;

    animation:spin .8s linear infinite;

}


/*======================================
ANIMATIONS
======================================*/

@keyframes toastIn{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


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

@media(max-width:767px){

    .toast-container{

        left:15px;

        right:15px;

        width:auto;

        top:15px;

    }

    .alert{

        padding:16px;

    }

    .alert-title{

        font-size:.95rem;

    }

    .alert-text{

        font-size:.9rem;

    }

}