#sportsbook-launcher[hidden],
#sportsbook-frame[hidden] {
    display: none !important;
}

/* Hide the website footer and the mobile bottom nav on the Sports page (this stylesheet is only
   linked on /Sports). */
.webcafe-footer,
.pgnav-bar {
    display: none !important;
}

#sportsbook-launcher {
    display: none !important;
}

#sportsbook-back {
    display: none !important;
}

/* Fill the viewport below the fixed 52px navbar. */
.sportsbook-frame {
    position: relative;
    margin-top: 75px;
    min-height: calc(100vh - 75px);
    background: #fff;
}

#sportsbook-container {
    width: 100%;
    box-sizing: border-box;
}

/* While the sportsbook is open, hide the mobile bottom footer nav so it doesn't cover the WSDK's
   own bet slip (which is fixed to the bottom of the viewport). The WSDK provides its own navigation
   and the top burger menu still works. */
body.sportsbook-active .mobile-footer {
    display: none !important;
}

.sportsbook-back {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
}

/* Loading overlay shown while the token is fetched and the WSDK mounts, so the operator picker
   never flashes when we auto-launch straight into the book. Fills the viewport below the navbar,
   matching the sportsbook frame. */
.sportsbook-loading {
    position: fixed;
    top: 75px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #fff;
}

.sportsbook-loading-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(0, 0, 0, 0.15);
    border-top-color: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    animation: sportsbook-spin 0.8s linear infinite;
}

.sportsbook-loading-text {
    color: #333;
    font-size: 0.95rem;
}

/* Mobile mode (below 992px): start the frame and its loading overlay lower. */
@media (max-width: 991.98px) {
    .sportsbook-frame {
        margin-top: 110px;
        min-height: calc(100vh - 110px);
    }

    .sportsbook-loading {
        top: 110px;
    }

    /* Navigation v2: the fixed header is 104px on phones (56px logo row + 48px product bar) and
       the body already pads 52px for it, so the frame needs only the other 52px to sit flush. */
    body.pgnav-on .sportsbook-frame {
        margin-top: 52px;
        min-height: calc(100vh - 104px);
    }

    body.pgnav-on .sportsbook-loading {
        top: 104px;
    }

    /* Keep the Lottery / Casino / Sports bar showing on the sportsbook. Elsewhere it tucks away
       on scroll (nav-v2.js), but here the page scrolls the whole book and customers lose the bar. */
    body.pgnav-on.pgnav-scrolled .pgnav-pills {
        height: 48px;
        padding: 0 16px 4px;
        opacity: 1;
    }
}

@keyframes sportsbook-spin {
    to {
        transform: rotate(360deg);
    }
}