/* ============================================================
   SITE MESSAGES / TOASTS
============================================================ */

.site_messages {
    width: 360px;
    max-width: calc(100vw - 28px);

    position: fixed;

    top: 115px;
    right: 28px;

    z-index: 1000000;

    display: flex;
    flex-direction: column;
    gap: 10px;

    pointer-events: none;
}

.site_message {
    width: 100%;

    position: relative;

    padding: 15px 44px 15px 16px;

    box-sizing: border-box;

    color: #4a3934;

    background:
        linear-gradient(
            145deg,
            #fffdfb 0%,
            #fff7f0 100%
        );

    border:
        1px solid #e6cfba;

    border-left:
        4px solid #8c151d;

    border-radius: 12px;

    box-shadow:
        0 12px 34px
        rgba(72, 13, 18, 0.16);

    font-size: 13px;
    line-height: 1.5;

    pointer-events: auto;

    animation:
        siteMessageIn
        0.28s
        ease
        both;
}


/* SUCCESS */

.site_message.success {
    border-left-color: #8c151d;
}


/* ERROR */

.site_message.error {
    border-left-color: #b3262e;

    background:
        linear-gradient(
            145deg,
            #fffafa 0%,
            #fff0f0 100%
        );
}


/* WARNING */

.site_message.warning {
    border-left-color: #c99a58;
}


/* INFO */

.site_message.info {
    border-left-color: #7e5f39;
}


/* CLOSE BUTTON */

.site_message_close {
    width: 28px;
    height: 28px;

    position: absolute;

    top: 50%;
    right: 10px;

    transform: translateY(-50%);

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

    padding: 0;

    color: #8c151d;

    background-color:
        rgba(140, 21, 29, 0.07);

    border: 0;
    border-radius: 50%;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.site_message_close:hover {
    color: white;

    background-color: #8c151d;

    transform:
        translateY(-50%)
        scale(1.04);
}


/* DISMISS */

.site_message.site_message_hide {
    animation:
        siteMessageOut
        0.25s
        ease
        forwards;
}


/* RTL */

.site_messages_mirror {
    right: auto;
    left: 28px;
}

.site_messages_mirror
.site_message {
    padding:
        15px
        16px
        15px
        44px;

    border-left:
        1px solid #e6cfba;

    border-right:
        4px solid #8c151d;

    text-align: right;
}

.site_messages_mirror
.site_message.error {
    border-right-color: #b3262e;
}

.site_messages_mirror
.site_message.warning {
    border-right-color: #c99a58;
}

.site_messages_mirror
.site_message.info {
    border-right-color: #7e5f39;
}

.site_messages_mirror
.site_message_close {
    right: auto;
    left: 10px;
}


/* ANIMATIONS */

@keyframes siteMessageIn {

    from {
        opacity: 0;
        transform:
            translateY(-10px)
            scale(0.98);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}

@keyframes siteMessageOut {

    from {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

    to {
        opacity: 0;
        transform:
            translateY(-8px)
            scale(0.98);
    }

}


/* <= 900px */

@media only screen and (max-width: 900px) {

    .site_messages {
        top: 78px;
        right: 18px;

        width: 340px;
    }

    .site_messages_mirror {
        right: auto;
        left: 18px;
    }

}


/* <= 720px */

@media only screen and (max-width: 720px) {

    .site_messages,
    .site_messages_mirror {
        width: auto;

        left: 10px;
        right: 10px;

        top: 70px;
    }

    .site_message {
        font-size: 12px;
    }

}