/* overlay */
.client_message {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(10px);
}

/* sections (same idea as default_form) */
.client_message__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--color-bg-level-2);
    box-shadow: var(--shadow-inset-soft);
}

.client_message__header svg {
    width: 48px;
    height: 48px;
}

.client_message__body {
    padding: 16px;
}

/* icon */
.client_message__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.client_message--success svg {
    fill: var(--color-status-success);
}

.client_message--error svg {
    fill: var(--color-status-error);
}

/* title & text */
.client_message__title {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .2px;
}

.client_message__text {
    color: var(--color-text-primary);
    font-size: 1.2em;
}

/* closing */
.client_message.is-closing .client_message__card {
    animation: cm-out .22s ease both;
}

.client_message.is-closing {
    animation: cm-fade-out .22s ease both;
    pointer-events: none;
}

/* animations */
@keyframes cm-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cm-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
}

@keyframes cm-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client_message__card {
        animation: none;
    }

    .client_message.is-closing .client_message__card {
        animation: none;
    }

    .client_message {
        backdrop-filter: none;
    }
}