/*
 * Message boxes (toast.info / toast.error in js/toasty.js).
 *
 * Centred over an anchor element (e.g. the booking calendar) or the viewport
 * so that they cannot be missed. Blue is information: the user picked
 * something the rules do not allow. Red is an error: something failed.
 * The success note in the top right corner uses Toastify (lib/toasty).
 */
.zenon-toast {
    position: fixed;
    z-index: 100000;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    max-width: min(480px, calc(100vw - 32px));
    padding: 18px 44px 18px 24px;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.zenon-toast.on {
    opacity: 1;
}

/* Information: Zenon blue */
.zenon-toast-info {
    background-color: #3788d8;
}

/* Error: same red as the app's negative buttons */
.zenon-toast-error {
    background-color: #bf1131;
}

/* Technical detail under an untranslated error */
.zenon-toast-detail {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
    word-break: break-word;
}

.zenon-toast .zenon-toast-close {
    position: absolute;
    top: 6px;
    right: 12px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.7;
}

.zenon-toast .zenon-toast-close:hover {
    opacity: 1;
}