/*
 * Toast notifications — shared by seat-selection.js, cart.js and anything else that needs a
 * transient message.
 *
 * These rules used to live in seat-selection.css, which only the seat-selection page loads.
 * cart.js builds its container with `className = 'seat-toast-container'` and the comment
 * "Reuse seat-selection toast styles" — an intent the page composition never satisfied, because
 * the cart page loads shop.css and cart.css and nothing else. The result: every toast the cart
 * page raised (502 no-payment-method, 422 payment-start-failed, the 409 conflict messages and
 * the generic error) rendered as unstyled white-on-transparent text appended to the bottom of
 * the document — present in the DOM, invisible to the customer, and below the fold on a cart of
 * any length. "It just didn't go through and nothing happened" is what that looks like.
 *
 * Loaded globally from _Layout so the styles exist wherever a toast can be raised. The
 * `.seat-` prefix is kept deliberately: renaming it would mean touching every call site in
 * seat-selection.js, cart.js and their tests for no behavioural gain.
 */

.seat-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.seat-toast {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    max-width: 320px;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.seat-toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.seat-toast-error {
    background: #D64550;
}

/*
 * cart.js calls showToast(msg, 'danger') in five places, which produces .seat-toast-danger — a
 * class that existed in no stylesheet. Combined with the inherited `color: #fff` above that is
 * white text on a transparent background: worse than unstyled, actually unreadable. Aliased to
 * the error colour rather than renamed at the call sites, so the fix cannot miss one.
 */
.seat-toast-danger {
    background: #D64550;
}

.seat-toast-info {
    background: var(--vendor-primary, #1668C0);
}

.seat-toast-success {
    background: #2E8B57;
}

.seat-toast-warning {
    background: #B4790A;
}

/*
 * Links inside a toast (the "Ga naar mijn gegevens" affordance on a profile-incomplete refusal).
 * Underlined and inheriting the toast's white text: the toast backgrounds are saturated, and the
 * default link blue on #D64550 fails contrast badly.
 */
.seat-toast-link {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.seat-toast-link:hover,
.seat-toast-link:focus {
    color: #fff;
    text-decoration: none;
}

/*
 * 767.98px to match seat-selection.css's own toast override, which sits in a media query at that
 * breakpoint and raises `bottom` to 6rem so the toast clears the sticky seat bar. Same breakpoint
 * means the two never half-apply against each other in a band; seat-selection.css is loaded after
 * this file on that page, so its page-specific `bottom` wins where it matters.
 */
@media (max-width: 767.98px) {
    .seat-toast-container {
        top: auto;
        bottom: 1rem;
        left: 0.5rem;
        right: 0.5rem;
    }

    .seat-toast {
        max-width: 100%;
    }
}