/* Navigation v2: header, desktop left rail, mobile menu sheet and mobile bottom bar.
   Loaded by _Layout only when AppSettings:NavigationV2Enabled is not "false".
   Live site colours (red primary, phase 1): header #E1251B with #B81D14 controls, gold #E6BC75 with
   #032A44 text for every call to action, links and icons #C21E15, white pages and a white bottom bar.

   The old header was fixed at 52px and every page clears it with its own 52px offset, so the new
   header stays fixed and the body is padded by only the extra height it adds. */

:root {
    --pgnav-navy: #00263E;
    --pgnav-ink: #032742;
    --pgnav-blue: #C21E15;
    --pgnav-gold: #E6BC75;
    --pgnav-gold-ink: #032A44;
    /* Icons and markers on the red header: gold is only for calls to action (Grant, 5 Oct), so
       they are white. */
    --pgnav-sky: #FFFFFF;
    --pgnav-muted: #6E7075;
    --pgnav-body: #3C3E41;
    --pgnav-line: #DCDDDF;
    --pgnav-soft: #F7F7F8;
    --pgnav-active: #FDECEA;
    --pgnav-rail-w: 280px;
    --pgnav-font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pgnav-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pgnav-mono { font-family: var(--pgnav-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.pgnav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #E1251B;
    font-family: var(--pgnav-font);
    color: #ffffff;
}

.pgnav-header-row {
    height: 56px;
    padding: 0 12px 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pgnav-logo { display: flex; align-items: center; min-height: 44px; min-width: 0; margin-right: auto; }
.pgnav-logo img { height: 32px; width: auto; max-width: 100%; object-fit: contain; display: block; }

.pgnav-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    border: 0;
    cursor: pointer;
}

    .pgnav-btn:focus-visible, .pgnav-icon-btn:focus-visible, .pgnav-balance:focus-visible, .pgnav-tab:focus-visible,
    .pgnav-rail a:focus-visible, .pgnav-sheet a:focus-visible, .pgnav-sheet button:focus-visible {
        outline: 3px solid var(--pgnav-gold);
        outline-offset: 2px;
    }

.pgnav-btn-gold, .pgnav-btn-gold:hover { background: var(--pgnav-gold); color: var(--pgnav-gold-ink); }
.pgnav-btn-outline, .pgnav-btn-outline:hover { background: #FFFFFF; color: #E1251B; border: 0; }

.pgnav-balance {
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: #B81D14;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    box-sizing: border-box;
    flex-shrink: 0;
}

    .pgnav-balance:hover { color: #ffffff; background: #A51A12; }

/* site.css hides #lblTotBal (the old header showed it only on hover); the new header always shows it. */
.pgnav-balance #lblTotBal { display: inline; }

.pgnav-balance-label { font-size: 12px; color: rgba(255, 255, 255, .75); font-weight: 600; }

.pgnav-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: #B81D14;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    padding: 0;
    cursor: pointer;
    position: relative;
}

    .pgnav-icon-btn:hover { color: #ffffff; background: #A51A12; }

/* site.css pulls the old cart button left with margin-left: -1rem. */
.pgnav-header #cart-menu-item-menu { margin-left: 0; }
/* lotto-checkout.js hides an empty cart with visibility: hidden, which keeps its space and left the
   balance floating mid-header; take it out of the row instead. */
.pgnav-header #cart-menu-item-menu[style*="visibility: hidden"] { display: none; }

.pgnav-cart .cart-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--pgnav-gold);
    color: var(--pgnav-gold-ink);
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* Product pills under the logo row on phones; they tuck away once the page scrolls. */
.pgnav-pills {
    height: 48px;
    padding: 0 16px 4px;
    display: flex;
    gap: 8px;
    transition: height .18s ease, padding .18s ease, opacity .18s ease;
    overflow: hidden;
}

    .pgnav-pills a {
        flex: 1 1 0;
        height: 40px;
        border-radius: 999px;
        background: #FFFFFF;
        border: 1px solid #FFFFFF;
        color: var(--pgnav-navy);
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

        .pgnav-pills a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E1251B; }
        .pgnav-pills a[aria-current="page"] { background: var(--pgnav-navy); color: #FFFFFF; }

body.pgnav-scrolled .pgnav-pills { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

/* Desktop header tabs: Lottery, Casino, Sports and Winning numbers, beside the logo. The logo
   gives up its auto margin to them so the account controls stay right-aligned. */
.pgnav-dtabs { margin: 0 auto 0 16px; display: flex; align-items: center; gap: 6px; min-width: 0; }
    .pgnav-dtabs a {
        height: 38px;
        padding: 0 16px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .22);
        background: #B81D14;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

        .pgnav-dtabs a:hover { background: #A51A12; color: #ffffff; }
        .pgnav-dtabs a:focus-visible { outline: 3px solid var(--pgnav-gold); outline-offset: 2px; }
        .pgnav-dtabs a[aria-current="page"] { background: #ffffff; border-color: #ffffff; color: #C21E15; }
        /* Icons as in the rail, from 1366px; below that the five tabs need the room. */
        .pgnav-dtabs a i { display: none; margin-right: 8px; font-size: 14px; color: var(--pgnav-sky); }
        .pgnav-dtabs a[aria-current="page"] i { color: #C21E15; }

@media (min-width: 1366px) {
    .pgnav-dtabs a i { display: inline-block; }
}

@media (min-width: 992px) {
    .pgnav-header-row .pgnav-logo { margin-right: 0; }
}

/* Narrower desktops (five tabs, Grant 5 Oct). Up to 1365px the balance drops its "Balance" label and
   the tabs may be clipped rather than run under the balance (measured with a seven-figure balance);
   the balance and account controls never shrink. Up to 1199px the tabs tighten, and up to 1099px
   Promotions shows as its gift icon only (the label stays for screen readers), as five labelled tabs
   do not fit there. */
@media (min-width: 992px) and (max-width: 1365.98px) {
    .pgnav-dtabs { flex: 0 1 auto; overflow: hidden; }
    .pgnav-dtabs a { flex-shrink: 0; }
    .pgnav-header-row .pgnav-balance-label { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .pgnav-dtabs { margin-left: 10px; gap: 4px; }
    .pgnav-dtabs a { padding: 0 11px; font-size: 13px; }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
    /* Tighter still, so the five tabs fit beside a six-figure balance at 992px (measured). */
    .pgnav-dtabs { gap: 3px; }
        .pgnav-dtabs a { padding: 0 8px; }
    .pgnav-dtabs .pgnav-dtab-promos { padding: 0 9px; }
        .pgnav-dtabs .pgnav-dtab-promos i { display: inline-block; margin-right: 0; }
    .pgnav-dtab-promos .pgnav-dtab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.pgnav-header-row > .pgnav-balance, .pgnav-header-row > .pgnav-btn, .pgnav-header-row > .pgnav-icon-btn, .pgnav-header-row > .dropdown { flex-shrink: 0; }

/* Desktop account menu (Bootstrap dropdown). */
.pgnav-account-btn {
    height: 44px;
    padding: 0 10px 0 4px;
    border-radius: 999px;
    border: 0;
    background: #B81D14;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

    .pgnav-account-btn .pgnav-avatar { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }

.pgnav-account-menu {
    width: 380px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--pgnav-line);
    box-shadow: 0 20px 48px rgba(0, 23, 36, .22);
    font-family: var(--pgnav-font);
    color: var(--pgnav-navy);
}

/* ---------- shared menu content (account menu and mobile sheet) ---------- */
.pgnav-who { padding: 6px 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pgnav-who-name { font-size: 16px; font-weight: 700; }
.pgnav-who-no { font-size: 13px; color: var(--pgnav-muted); }

.pgnav-balances {
    padding: 14px;
    border-radius: 10px;
    background: var(--pgnav-soft);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .pgnav-balances div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .pgnav-balances span:first-child { font-size: 12px; color: var(--pgnav-muted); }
    .pgnav-balances .pgnav-mono { font-size: 17px; color: var(--pgnav-navy); }

.pgnav-label {
    padding: 14px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pgnav-muted);
}

.pgnav-row {
    min-height: 52px;
    padding: 6px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--pgnav-navy);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

    .pgnav-row:hover { background: var(--pgnav-soft); color: var(--pgnav-navy); }
    .pgnav-row > i { width: 22px; text-align: center; color: var(--pgnav-blue); font-size: 17px; }
    .pgnav-row-text { flex-grow: 1; display: flex; flex-direction: column; gap: 1px; }
    .pgnav-row-title { font-size: 15px; font-weight: 600; }
    .pgnav-row-sub { font-size: 12px; color: var(--pgnav-muted); }
    .pgnav-row .fa-chevron-right { color: var(--pgnav-muted); font-size: 13px; }

.pgnav-plain {
    min-height: 44px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--pgnav-navy);
    text-decoration: none;
}

    .pgnav-plain:hover { color: var(--pgnav-blue); }

.pgnav-divider { height: 1px; background: var(--pgnav-line); margin: 6px 0; }

.pgnav-deposit { width: 100%; margin: 4px 0 6px; }

.pgnav-logout {
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--pgnav-navy);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.pgnav-legal { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 4px 10px; }
    .pgnav-legal a { min-height: 40px; display: flex; align-items: center; font-size: 13px; color: var(--pgnav-body); text-decoration: none; }

/* ---------- mobile menu sheet ---------- */
.pgnav-sheet {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    background: #ffffff;
    font-family: var(--pgnav-font);
    color: var(--pgnav-navy);
    display: flex;
    flex-direction: column;
}

    .pgnav-sheet[hidden] { display: none; }

.pgnav-sheet-head {
    height: 56px;
    flex-shrink: 0;
    padding: 0 8px 0 16px;
    display: flex;
    align-items: center;
    background: #E1251B;
    color: #ffffff;
}

    .pgnav-sheet-head h2 { margin: 0; flex-grow: 1; font-size: 18px; font-weight: 700; font-family: var(--pgnav-font); }

.pgnav-sheet-body { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 12px 8px 24px; -webkit-overflow-scrolling: touch; }

.pgnav-welcome { margin: 4px 8px 8px; padding: 16px; border-radius: 12px; background: var(--pgnav-soft); border: 1px solid var(--pgnav-line); display: flex; flex-direction: column; gap: 10px; }
    .pgnav-welcome h3 { margin: 0; font-size: 17px; font-weight: 700; font-family: var(--pgnav-font); color: var(--pgnav-navy); }
    .pgnav-welcome p { margin: 0; font-size: 14px; color: var(--pgnav-body); }
    .pgnav-welcome-actions { display: flex; gap: 8px; }
        .pgnav-welcome-actions .pgnav-btn { flex: 1 1 0; }
    .pgnav-welcome .pgnav-btn-outline { background: transparent; color: var(--pgnav-navy); border: 1px solid var(--pgnav-navy); }

body.pgnav-sheet-open { overflow: hidden; }

/* ---------- mobile bottom bar ---------- */
.pgnav-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid var(--pgnav-line);
    box-shadow: 0 -6px 18px rgba(0, 38, 62, .06);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    font-family: var(--pgnav-font);
}

.pgnav-tab {
    height: 64px;
    border: 0;
    background: transparent;
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: var(--pgnav-muted);
    cursor: pointer;
}

    .pgnav-tab > i { font-size: 20px; }
    .pgnav-tab:hover { color: var(--pgnav-navy); }
    .pgnav-tab[aria-current="page"], .pgnav-tab[aria-expanded="true"] { color: #C21E15; }

/* Sign up is the one raised, gold tab when logged out. */
.pgnav-tab-raised { color: var(--pgnav-navy); }
    .pgnav-tab-raised .pgnav-raise {
        width: 52px;
        height: 52px;
        margin-top: -22px;
        border-radius: 50%;
        background: var(--pgnav-gold);
        color: var(--pgnav-gold-ink);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        box-shadow: 0 6px 16px rgba(0, 38, 62, .2);
        border: 3px solid #ffffff;
    }

/* ---------- site footer: one footer at every width under navigation v2 (Grant, 8 Oct: the grey phone
   footer replaces the red desktop one). _Footer renders the old footer only when v2 is off. ---------- */
.pgnav-mfooter {
    margin-top: 28px;
    padding: 20px 16px 24px;
    background: var(--pgnav-soft);
    border-top: 1px solid var(--pgnav-line);
    font-family: var(--pgnav-font);
    color: var(--pgnav-navy);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pgnav-rg {
    padding: 12px 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid var(--pgnav-line);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--pgnav-navy);
    font-size: 13px;
    line-height: 1.4;
}

    .pgnav-rg b { color: var(--pgnav-navy); }
    .pgnav-rg span { flex-grow: 1; color: var(--pgnav-body); }

.pgnav-mfooter-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
    .pgnav-mfooter-links a { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--pgnav-navy); text-decoration: none; }

.pgnav-licence { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--pgnav-body); }
    .pgnav-licence p { margin: 0 0 6px; }
    .pgnav-licence a { color: var(--pgnav-blue); font-weight: 600; }
    .pgnav-version { font-size: 12px; color: var(--pgnav-muted); }
.pgnav-18 { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--pgnav-navy); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--pgnav-navy); }

/* ---------- desktop left rail ----------
   Hidden until the menu button at the top left opens it (Grant, 2 Oct: like Island Luck, most
   people do not want it showing all the time). It slides in over the page, so the page keeps its
   full width; the button, a click outside, Escape or following a link closes it (nav-v2.js). */
.pgnav-rail {
    position: fixed;
    top: 72px;
    left: 0;
    bottom: 0;
    width: var(--pgnav-rail-w);
    z-index: 1035;
    box-sizing: border-box;
    padding: 20px 16px;
    background: #ffffff;
    border-right: 1px solid var(--pgnav-line);
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    font-family: var(--pgnav-font);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
}

body.pgnav-rail-open .pgnav-rail {
    transform: none;
    visibility: visible;
    box-shadow: 16px 0 48px rgba(0, 23, 36, .2);
    transition: transform .22s ease, visibility 0s;
}

.pgnav-rail-scrim { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 1034; background: rgba(0, 23, 36, .45); }
    .pgnav-rail-scrim[hidden] { display: none; }

.pgnav-railtoggle { margin-left: -6px; }
    .pgnav-railtoggle[aria-expanded="true"] { background: #A51A12; }

.pgnav-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-bottom: 10px; }

.pgnav-tile {
    height: 76px;
    border-radius: 12px;
    background: var(--pgnav-soft);
    border: 1px solid var(--pgnav-line);
    color: var(--pgnav-navy);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

    .pgnav-tile > i { color: var(--pgnav-navy); font-size: 20px; }
    .pgnav-tile:hover { color: var(--pgnav-navy); border-color: var(--pgnav-blue); }
    .pgnav-tile[aria-current="page"] { background: var(--pgnav-navy); border-color: var(--pgnav-navy); color: #ffffff; }
        .pgnav-tile[aria-current="page"] > i { color: var(--pgnav-sky); }

.pgnav-link {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--pgnav-navy);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

    .pgnav-link > i { width: 20px; text-align: center; color: var(--pgnav-blue); font-size: 16px; }
    .pgnav-link:hover { background: var(--pgnav-soft); color: var(--pgnav-navy); }
    .pgnav-link[aria-current="page"] { background: var(--pgnav-active); color: #C21E15; font-weight: 700; }

.pgnav-rail .pgnav-label { padding: 18px 12px 6px; }

/* ---------- breakpoints ---------- */
/* Narrow phones (360px) with a seven-figure balance: the logo gives way, never the balance. */
@media (max-width: 379.98px) {
    .pgnav-header-row { gap: 6px; padding: 0 8px 0 12px; }
    .pgnav-logo img { height: 28px; }
    .pgnav-balance { padding: 0 10px; font-size: 13px; }
}

@media (max-width: 991.98px) {
    body.pgnav-on { padding-top: 52px; }
    body.pgnav-on.pgnav-scrolled { padding-top: 52px; }
    /* Room for the fixed bottom bar. */
    body.pgnav-on .pggames-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    /* The closed chat bubble (Front sets it to 86px) sits above the bottom bar, and steps aside
       while the menu sheet is open so it does not cover the menu's rows. */
    body.pgnav-on #front-chat-iframe[style*="height: 86px"] { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
    body.pgnav-on.pgnav-sheet-open #front-chat-iframe[style*="height: 86px"] { display: none !important; }
}

@media (min-width: 992px) {
    .pgnav-header-row { height: 72px; padding: 0 32px 0 24px; gap: 10px; }
    .pgnav-logo img { height: 40px; }
    .pgnav-balance { height: 44px; padding: 0 16px; font-size: 15px; }
    body.pgnav-on { padding-top: 20px; }
}

/* The footer wrapper keeps the old footer's red for when navigation v2 is off; behind the v2 footer
   it must not show (on phones its bottom padding sits under the bottom bar). */
body.pgnav-on .pggames-footer { background: transparent; }

/* Desktop footer (Grant, 8 Oct): centred like the old desktop footer, on the same 1152px column as
   the page sections above (.pgh: 1200px with 24px padding), so the edges line up. The Play
   responsibly card sizes to its text on the Sign up button's axis; the secondary links get their own
   row so both rows stay on one line from 992px up. */
@media (min-width: 992px) {
    .pgnav-mfooter {
        padding: 32px max(24px, calc((100% - 1200px) / 2 + 24px)) 28px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "rg" "links" "legal" "divider" "licence";
        gap: 12px 40px;
        justify-items: center;
        align-items: center;
    }
    .pgnav-mfooter > .pgnav-rg { grid-area: rg; max-width: 100%; }
    .pgnav-mfooter > .pgnav-mfooter-links { grid-area: links; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; }
    .pgnav-mfooter > .pgnav-legal { grid-area: legal; justify-content: center; }
    .pgnav-mfooter > .pgnav-divider { grid-area: divider; width: 100%; margin: 0; }
    .pgnav-mfooter > .pgnav-licence { grid-area: licence; max-width: 760px; }
}

@media (prefers-reduced-motion: reduce) {
    .pgnav-pills, .pgnav-rail, body.pgnav-rail-open .pgnav-rail { transition: none; }
}