.alert-message{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:14px;

    width:100%;

    margin-bottom:1rem;

    padding:16px 18px;

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

    background:var(--card);

    color:var(--text);

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

    border-left:5px solid transparent;

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

    overflow:hidden;

    animation:alertFade .25s ease;

    transition:var(--transition);

}

.alert-message svg{

    width:22px;

    height:22px;

    flex-shrink:0;

    margin-top:1px;

}

.alert-message p{

    margin:0;

    font-size:var(--font-sm);

    font-weight:600;

    line-height:1.55;

}

.alert-success{

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

    background:var(--success-soft);

    color:var(--success-dark);

}

.alert-success svg{

    color:var(--success);

}

.alert-error{

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

    background:var(--danger-soft);

    color:var(--danger-dark);

}

.alert-error svg{

    color:var(--danger);

}

.alert-warning{

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

    background:var(--warning-soft);

    color:var(--warning);

}

.alert-warning svg{

    color:var(--warning);

}

.alert-info{

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

    background:var(--info-soft);

    color:var(--info);

}

.alert-info svg{

    color:var(--info);

}

.alert-close{

    margin-left:auto;

    cursor:pointer;

    opacity:.65;

    transition:var(--transition);

}

.alert-close:hover{

    opacity:1;

}

@keyframes alertFade{

    from{

        opacity:0;

        transform:translateY(-8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes alertHide{

    from{

        opacity:1;

        transform:translateY(0);

    }

    to{

        opacity:0;

        transform:translateY(-8px);

    }

}

.alert-hide{

    animation:alertHide .22s ease forwards;

}

@media(max-width:768px){

    .alert-message{

        padding:14px;

        gap:12px;

    }

    .alert-message svg{

        width:20px;

        height:20px;

    }

    .alert-message p{

        font-size:.82rem;

    }

}