/*
 |--------------------------------------------------------------------------
 | PWA / app-mode styles
 |--------------------------------------------------------------------------
 |
 | Everything here is scoped to `html.pwa-mode`, which pwa.js adds only when
 | the site is running as an installed app (or in the browser's standalone
 | display mode). In a normal browser tab nothing below applies, so the
 | public website keeps its full marketing layout untouched.
 |
 | The `@media (display-mode: standalone)` block repeats the class so the
 | trimmed layout is already correct on the very first paint, before any
 | JavaScript has run.
 |
 */

/* ==========================================================================
   1. Hide the website-only chrome
   ========================================================================== */

/* The CMS / marketing menu in the top bar and its hamburger.
   In the app the bottom nav replaces it. */
.pwa-mode .navbar #navbarNav,
.pwa-mode .navbar .navbar-toggler {
    display: none !important;
}

/* Footer: quick links, our services, newsletter signup, socials,
   copyright and the language row. */
.pwa-mode .footer-section {
    display: none !important;
}

/* The breadcrumb / page-title hero image on inner pages. */
.pwa-mode .banner-section {
    display: none !important;
}

/* The theme's own bottom bar only appears on a few routes; the app has its
   own bar on every page, so drop this one to avoid two stacked bars. */
.pwa-mode .bottom-bar {
    display: none !important;
}

/* The install banner is pointless once you're already inside the app. */
.pwa-mode #pwaInstallBanner {
    display: none !important;
}

/* ==========================================================================
   2. App shell adjustments
   ========================================================================== */

.pwa-mode,
.pwa-mode body {
    overscroll-behavior-y: none; /* no rubber-band / pull-to-refresh bounce */
}

.pwa-mode body {
    /* Clear the fixed bottom nav, plus the iOS home indicator. */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Sit the fixed top bar below the status bar / notch. */
.pwa-mode .navbar {
    padding-top: env(safe-area-inset-top, 0px);
}

.pwa-mode .navbar .container-fluid {
    justify-content: space-between;
}

.pwa-mode .navbar .navbar-brand img {
    max-width: 92px;
}

/* No text selection or tap-flash on navigation chrome -- reads as native.
   Page content stays selectable so users can still copy transaction IDs. */
.pwa-mode .navbar,
.pwa-mode .pwa-bottom-nav {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* The sports list, bet slip and account panels are fixed and taller than the
   viewport, so their last entries would sit behind the bottom nav. End them
   above it instead and let the panel scroll. */
.pwa-mode .leftbar,
.pwa-mode .rightbar,
.pwa-mode #userPanelSideBar {
    height: calc(100vh - 46px - 64px - env(safe-area-inset-bottom, 0px));
    padding-bottom: 8px;
    overflow-y: auto;
}

.pwa-mode .leftbar ul.main {
    height: auto;
}

/* Keep the support chat bubble and cookie notice above the bottom nav. */
.pwa-mode .cookies-alert {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

.pwa-mode iframe[title*="chat" i],
.pwa-mode .widget-visible iframe {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ==========================================================================
   3. The app bottom navigation
   ========================================================================== */

.pwa-bottom-nav {
    display: none; /* only shown in app mode, see below */
    position: fixed;
    z-index: 1030;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--white, #fff);
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.18);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}

.pwa-mode .pwa-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}

.pwa-bottom-nav .pwa-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--bgDark, #233645);
    transition: color 0.2s;
}

.pwa-bottom-nav .pwa-nav-item i {
    font-size: 19px;
    line-height: 1;
}

.pwa-bottom-nav .pwa-nav-item span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-bottom-nav .pwa-nav-item.active,
.pwa-bottom-nav .pwa-nav-item:hover {
    color: var(--primary, #8fb568);
}

.dark-mode .pwa-bottom-nav {
    background: var(--bgDark2, #294056);
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.5);
}

.dark-mode .pwa-bottom-nav .pwa-nav-item {
    color: #fff;
}

.dark-mode .pwa-bottom-nav .pwa-nav-item.active,
.dark-mode .pwa-bottom-nav .pwa-nav-item:hover {
    color: var(--primary, #8fb568);
}

/* ==========================================================================
   4. "Add to home screen" banner (website only)
   ========================================================================== */

#pwaInstallBanner {
    display: none;
    position: fixed;
    z-index: 1040;
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: 460px;
    margin: 0 auto;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--white, #fff);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    align-items: center;
    gap: 12px;
}

#pwaInstallBanner.is-visible {
    display: flex;
}

#pwaInstallBanner img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
}

#pwaInstallBanner .pwa-install-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--bgDark, #233645);
}

#pwaInstallBanner .pwa-install-text strong {
    display: block;
    font-size: 14px;
}

#pwaInstallBanner button {
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    padding: 9px 14px;
    background: var(--primary, #8fb568);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

#pwaInstallBanner .pwa-install-close {
    background: transparent;
    color: var(--bgDark, #233645);
    padding: 6px 8px;
    font-size: 16px;
}

.dark-mode #pwaInstallBanner {
    background: var(--bgDark2, #294056);
}

.dark-mode #pwaInstallBanner .pwa-install-text,
.dark-mode #pwaInstallBanner .pwa-install-close {
    color: #fff;
}

/* When the bottom bar of a betting page is on screen, lift the banner. */
.bottom-bar ~ #pwaInstallBanner {
    bottom: 74px;
}

/* ==========================================================================
   5. First-paint fallback
   ========================================================================== */

@media (display-mode: standalone) {
    .navbar #navbarNav,
    .navbar .navbar-toggler,
    .footer-section,
    .banner-section,
    .bottom-bar,
    #pwaInstallBanner {
        display: none !important;
    }

    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .pwa-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }
}