/* OnlyTicket (2026-11-06): phone bottom menu (Views/Partials/_BottomNav.cshtml).
   Same width as the site's phone header (below 992px). On product pages the booking bar (#sticky-cta) runs behind it and shows above it.
   2026-11-06: floating rounded bar with a gap at the sides and bottom; the current page has a soft pill in the site's colours.
   --ot-botnav-h = all the screen height the menu takes, including its bottom gap. */
:root { --ot-botnav-gap: calc(6px + env(safe-area-inset-bottom, 0px)); --ot-botnav-h: calc(58px + var(--ot-botnav-gap)); }
@media (display-mode: standalone) { :root { --ot-botnav-gap: calc(10px + 2vh + env(safe-area-inset-bottom, 0px)); } }

.ot-botnav { display: none; }

@media (max-width: 991.98px) {
    body .ot-botnav {
        display: flex; position: fixed; left: calc(3px + 2vw); right: calc(3px + 2vw); bottom: var(--ot-botnav-gap); z-index: 1045;
        max-width: 560px; margin: 0 auto; height: 58px; padding: 4px; gap: 2px; border-radius: 29px;
        background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        border: 1px solid var(--ot-line, #e6e6e6); box-shadow: 0 8px 24px rgba(30, 33, 48, .16);
    }
    body .ot-botnav a, body .ot-botnav a:visited, body .ot-botnav a:hover {
        position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        border-radius: 25px; color: var(--ot-muted, #6b7280); font-size: 11px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
    }
    body .ot-botnav svg { width: 22px; height: 22px; flex: none; }
    body .ot-botnav a[aria-current="page"] { background: var(--ot-brand-light, #fdecec); color: var(--ot-brand, #e31e24); font-weight: 600; }
    body .ot-botnav a:focus-visible { outline: 2px solid var(--ot-brand, #e31e24); outline-offset: -2px; }

    /* The middle button (Passes) stands out: a round button rising above the bar. Current page: its label turns red, with no pill */
    body .ot-botnav a[data-nav="tickets"], body .ot-botnav a[data-nav="tickets"][aria-current="page"] { justify-content: flex-end; padding-bottom: 3px; background: none; overflow: visible; }
    body .ot-botnav a[data-nav="tickets"] svg {
        box-sizing: border-box; width: 56px; height: 56px; margin-top: -30px; padding: 12px; border-radius: 50%;
        background: var(--ot-grad, linear-gradient(135deg, #ff6a3d, #e31e24)); color: #fff;
        border: 4px solid #fff; box-shadow: 0 6px 16px rgba(227, 30, 36, .35);
    }
    body .ot-botnav a[data-nav="tickets"][aria-current="page"] svg { box-shadow: 0 0 0 3px var(--ot-brand-light, #fdecec), 0 6px 16px rgba(227, 30, 36, .35); }

    /* Product pages: the booking bar is right above the menu, so the button stays inside the bar and never covers the bar's text or button */
    body:has(#sticky-cta) .ot-botnav a[data-nav="tickets"] svg { width: 32px; height: 32px; margin-top: 0; padding: 6px; border-width: 0; box-shadow: none; }
    body:has(#sticky-cta) .ot-botnav a[data-nav="tickets"][aria-current="page"] svg { box-shadow: none; }

    /* The bottom menu replaces the hamburger; pages without it, such as checkout, keep the hamburger */
    body:has(.ot-botnav) .fm-nav .fm-hamburger { display: none !important; }

    /* Room for the menu (and the booking bar, about 62px of it above the menu): the end of the page and everything that floats at the bottom of the screen */
    body:has(.ot-botnav) { padding-bottom: calc(var(--ot-botnav-h) + 22px); --ot-float-bottom: calc(var(--ot-botnav-h) + 30px); }
    body:has(.ot-botnav):has(#sticky-cta) { padding-bottom: calc(var(--ot-botnav-h) + 72px); --ot-float-bottom: calc(var(--ot-botnav-h) + 72px); }
    body:has(.ot-botnav) #product .sticky-cta { bottom: 0; padding-bottom: calc(var(--ot-botnav-h) + 8px); }
    body:has(.ot-botnav) .ot-wa,
    body:has(.ot-botnav):has(#sticky-cta) .ot-wa,
    body:has(.ot-botnav) .ot-fav-toast,
    body:has(.ot-botnav) .lbpn-floating-popup,
    body:has(.ot-botnav) #toast-container[class*="toast-bottom"] { bottom: var(--ot-float-bottom); }
}

@media print { body .ot-botnav { display: none !important; } }