/**
 * .ww-compare-tray — the sticky bar that appears once 2+ casinos are
 * ticked in the Casino Directory (assets/js/pages/casino-directory.js).
 *
 * Was an inline style pinned to `bottom: 1rem` with no stacking context.
 * On a phone that put it underneath the fixed mobile bottom nav (64px
 * tall, z-index 300) — the tray would appear, then be covered by the nav
 * exactly when a thumb reached for it. It now clears the nav's height and
 * sits above it, and the whole bar is the tap target rather than just the
 * button.
 */

.ww-compare-tray {
    position: sticky;
    bottom: 1rem;
    z-index: calc(var(--ww-z-sticky-nav) - 1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: var(--ww-shadow-raised);
    border-color: var(--wp--preset--color--accent);
}

.ww-compare-tray__count {
    font-weight: 600;
    color: var(--wp--preset--color--ink);
}

@media (max-width: 768px) {
    .ww-compare-tray {
        /* Clear the fixed mobile bottom nav (64px + safe area). */
        bottom: calc(64px + env(safe-area-inset-bottom, 0) + 0.75rem);
        z-index: calc(var(--ww-z-mobile-bottom-nav) + 1);
    }
}