/* =========================================================
   Taiwan Lotto — Mobile Menu Click Fix
   Loaded LAST after todaypools.css so declarations win.

   Bug: `.tw-topbar-main` has `position: sticky; z-index: 100`
   which creates a stacking context. The mobile drawer `.tw-nav`
   (z-index 200) lives inside it, so from the viewport root its
   effective layer is 100. Meanwhile `.tw-nav-scrim` sits outside
   the header at the root context with z-index 150 -> the scrim
   is painted ABOVE the drawer and swallows every tap on menu
   items, closing the menu instantly.

   Fix: raise scrim + drawer to root-level z-index tiers and
   ensure the drawer escapes the trapped context.
   ========================================================= */

@media (max-width: 991.98px) {

    /* 1. `position: sticky` ALWAYS creates a stacking context. On mobile,
          switch the topbar to non-sticky so the drawer's z-index competes
          at the true root and beats the scrim. Sticky topbar isn't
          critical on phones and often steals viewport height anyway. */
    .tw-topbar-main {
        position: static !important;
        z-index: auto !important;
    }
    .tw-topbar { z-index: auto !important; }
    .tw-topbar-main .tw-container { position: static !important; }

    /* 2. Scrim below drawer, above page. */
    .tw-nav-scrim {
        z-index: 1090 !important;
    }

    /* 3. Drawer top-most, always clickable. `isolation: isolate`
          forces its own stacking context at root level. */
    .tw-nav {
        z-index: 1100 !important;
        pointer-events: auto;
        isolation: isolate;
        will-change: transform;
    }
    body.tw-menu-open .tw-nav { right: 0 !important; }

    /* 4. Nav list + items - make them true tap targets. */
    .tw-nav .tw-nav-list {
        position: relative;
        z-index: 1;
        pointer-events: auto;
    }
    .tw-nav .tw-nav-list li { pointer-events: auto; }
    .tw-nav .tw-nav-link {
        position: relative;
        z-index: 1;
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        padding: 14px 18px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(206, 17, 38, .15);
        touch-action: manipulation;
    }
    .tw-nav .tw-nav-link:active { background: rgba(0,0,0,.04); }
    .tw-nav .tw-nav-link * { pointer-events: none; }

    /* 5. Toggle button always tappable above the scrim before open. */
    .tw-nav-toggle {
        position: relative;
        z-index: 1080;
    }

    /* 6. Body scroll-lock while drawer open, so the page underneath
          doesn't scroll and the drawer stays put. */
    body.tw-menu-open {
        overflow: hidden;
        touch-action: none;
    }

    /* 7. Bootstrap modal (Responsible) must still open above the
          drawer when triggered from inside the drawer. */
    .modal { z-index: 1200; }
    .modal-backdrop { z-index: 1150; }

    /* 8. Close (X) hint inside the drawer without touching HTML. */
    .tw-nav::after {
        content: "\00d7";
        position: absolute;
        top: 14px;
        right: 18px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Playfair Display', serif;
        font-size: 28px;
        font-weight: 700;
        color: #CE1126;
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0,0,0,.08);
        pointer-events: none;
        z-index: 2;
    }

    /* 9. Kill any leftover transform on ancestors that could create
          rogue stacking contexts on iOS Safari. */
    .tw-topbar,
    .tw-nav,
    .tw-nav-scrim { transform: none; }
}

@media (max-width: 480px) {
    .tw-nav {
        width: 88vw;
        max-width: 340px;
        padding: 72px 16px 20px;
    }
    .tw-nav .tw-nav-link {
        padding: 12px 14px;
    }
    .tw-nav::after {
        top: 12px;
        right: 14px;
        width: 36px;
        height: 36px;
        font-size: 24px;
    }
}