/* ──────────────────────────────────────────────────────────
   Announcement Bar — Happy Hour / Bonus Hour countdown

   POSITIONING STRATEGY (2026-06-14 — proper version):
   - Bar is `position: fixed; top: 0` with z-index ABOVE the header,
     so it sits visibly above the header even when the header is
     also `position: fixed` (.menu-fixed pages).
   - The header gets pushed DOWN by `var(--gp-ann-bar-h)` via JS-set
     CSS variable — only when the bar is actually visible (body has
     `has-gp-ann-bar` class).
   - The body gets padding-top so content clears bar+header stack.
     The padding uses the JS-measured `--gp-ann-bar-h` PLUS the
     JS-measured `--gp-header-h` so it works at any breakpoint.
   - On mobile when the hamburger opens, the bar hides and the
     drawer takes over the whole viewport top.
   ────────────────────────────────────────────────────────── */
.gp-ann-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    overflow: hidden;
    background: linear-gradient(90deg, #007D49 0%, #00A862 50%, #007D49 100%);
    color: #FFFFFF;
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
}

/* IMPORTANT discovery (2026-06-14): main.css line 1918 sets `.header` to
   `position: fixed; top: 0; z-index: 99` on ALL pages — not just
   `.menu-fixed`. The .menu-fixed modifier is just an additional class for
   sportsbook/exchange-style pages with compact header. So we need to use
   `top:` (not margin-top) on every header, and the body always needs
   padding-top to clear the bar+header stack.

   The 44px fallback covers the unmeasured-yet-during-page-load case so the
   bar doesn't cover the header before JS finishes measuring. Once JS runs,
   --gp-ann-bar-h gets set to the actual rendered bar height (usually
   42-48px on desktop, 56-80px on mobile when the message wraps). */
body.has-gp-ann-bar .header,
body.has-gp-ann-bar .header.menu-fixed,
body.has-gp-ann-bar .header.active {
    top: var(--gp-ann-bar-h, 44px) !important;
}

/* Body padding-top = bar height + header height. Always needed because
   `.header` is `position: fixed` site-wide. JS measures both at runtime. */
body.has-gp-ann-bar {
    padding-top: calc(var(--gp-ann-bar-h, 44px) + var(--gp-header-h, 80px)) !important;
}

/* Section-level top-padding utilities (.pt-120, .pt-60) were sized assuming
   no announcement bar. When the bar shows, these add ANOTHER 44px on top
   of the body's bar+header padding, leaving an awkward black gap below the
   header. Shrink these utility paddings when the bar is present.
   (Used by 150+ views — dashboards, casino sections, exchange pages, etc.) */
body.has-gp-ann-bar .pt-120 { padding-top: 60px !important; }
body.has-gp-ann-bar .pt-100 { padding-top: 50px !important; }
body.has-gp-ann-bar .pt-80  { padding-top: 40px !important; }
body.has-gp-ann-bar .pt-60  { padding-top: 30px !important; }
@media (max-width: 991px) {
    body.has-gp-ann-bar .pt-120 { padding-top: 45px !important; }
    body.has-gp-ann-bar .pt-100 { padding-top: 35px !important; }
    body.has-gp-ann-bar .pt-80  { padding-top: 30px !important; }
    body.has-gp-ann-bar .pt-60  { padding-top: 24px !important; }
}
@media (max-width: 575px) {
    body.has-gp-ann-bar .pt-120 { padding-top: 36px !important; }
    body.has-gp-ann-bar .pt-100 { padding-top: 28px !important; }
    body.has-gp-ann-bar .pt-80  { padding-top: 24px !important; }
    body.has-gp-ann-bar .pt-60  { padding-top: 20px !important; }
}

/* Iframe containers (BTI sportsbook, exchange embed, asian sportsbook
   integrated frame, exchange widget) apply `padding-top: var(--header-h)`
   or `padding-top: var(--header-height)` to clear the fixed header.
   When the announcement bar is showing, the body ALREADY has
   padding-top = bar-h + header-h, so this extra inner padding
   double-counts and leaves a black gap above the iframe content. Zero
   it out when the bar is present. Covers:
   - .bti-container             (gamting_sports_card.blade.php — /sportsbook)
   - .exchange-embed            (exchange_card.blade.php — /betting-exchange)
   - .sportsbook-container.integrated  (sports-frame-card.blade.php — /asian-sportsbook)
   - .exchange-container        (legacy/fallback) */
body.has-gp-ann-bar .bti-container,
body.has-gp-ann-bar .exchange-embed,
body.has-gp-ann-bar .exchange-container,
body.has-gp-ann-bar .sportsbook-container.integrated,
body.has-gp-ann-bar [class$="-iframe-container"] {
    padding-top: 0 !important;
}
/* The asian-sportsbook integrated frame also positions its iframe with
   `top: var(--header-height)` — zero that out too so the iframe starts
   flush against the container top edge. */
body.has-gp-ann-bar .sportsbook-container.integrated iframe {
    top: 0 !important;
    height: 100% !important;
}
body.has-gp-ann-bar .sportsbook-container.integrated .sportsbook-loading {
    inset: 0 !important;
}

/* Hamburger open behavior — SIMPLEST POSSIBLE rule (2026-06-15):
   On hamburger open: bar hides. Header pops back to top:0 (no offset
   needed since bar is gone). Body padding drops to just header height.
   On hamburger close: bar reappears. Header goes back to top:bar-height.
   Body padding goes back to bar+header.

   The drawer keeps its own native top:78px positioning from
   partials/header.blade.php — we don't touch it. */
@media (max-width: 1199.98px) {
    body.gp-nav-open .gp-ann-bar {
        display: none !important;
    }
    body.gp-nav-open .header,
    body.gp-nav-open .header.menu-fixed,
    body.gp-nav-open .header.active {
        top: 0 !important;
    }
    body.gp-nav-open {
        padding-top: var(--gp-header-h, 80px) !important;
    }
}
.gp-ann-bar--upcoming {
    background: linear-gradient(90deg, #1A2840 0%, #243C5C 50%, #1A2840 100%);
}
.gp-ann-bar--custom {
    background: linear-gradient(90deg, #1A1A2A 0%, #2A1A3A 50%, #1A1A2A 100%);
}
.gp-ann-bar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.gp-ann-bar__pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
    animation: gp-ann-pulse 1.6s ease-in-out infinite;
}
@keyframes gp-ann-pulse {
    0%, 100% { opacity: 0.6; transform: scale(0.85); }
    50%      { opacity: 1.0; transform: scale(1.15); }
}
.gp-ann-bar__tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 11px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.gp-ann-bar__h {
    color: #FFFFFF;
    font-weight: 700;
}
.gp-ann-bar__sep {
    opacity: 0.45;
    font-weight: 700;
}
.gp-ann-bar__bonus {
    color: #FFFFFF;
    font-weight: 600;
}
.gp-ann-bar__cd {
    background: rgba(0, 0, 0, 0.25);
    padding: 3px 11px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.gp-ann-bar__cd [data-countdown] {
    font-weight: 700;
    margin-left: 3px;
}
.gp-ann-bar__cta {
    color: #0A0B0E;
    background: #FFFFFF;
    padding: 5px 14px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 12.5px;
    text-decoration: none;
    margin-left: 4px;
    transition: transform 0.15s ease;
}
.gp-ann-bar__cta:hover {
    background: #FFFFFF;
    color: #007D49;
    transform: translateX(2px);
    text-decoration: none;
}
.gp-ann-bar__custom {
    color: #FFFFFF;
    font-weight: 600;
}
.gp-ann-bar__close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    margin-left: auto;
    transition: color 0.15s ease;
}
.gp-ann-bar__close:hover { color: #FFFFFF; }

@media (max-width: 720px) {
    .gp-ann-bar__inner {
        gap: 6px;
        padding: 8px 12px;
        font-size: 12.5px;
    }
    .gp-ann-bar__cta {
        order: 99;
        flex: 1 0 100%;
        text-align: center;
        margin: 4px 0 0;
    }
    .gp-ann-bar__close {
        position: absolute;
        top: 6px;
        right: 8px;
    }
    .gp-ann-bar__sep { display: none; }
}

/* (duplicate positioning rules removed — see top of file for the single source of truth) */

/* Custom admin message in announcement bar (replaces auto-built title · bonus) */
.gp-ann-bar__msg {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.4;
    max-width: 720px;
    text-align: center;
}
@media (max-width: 720px) {
    .gp-ann-bar__msg {
        font-size: 12.5px;
        max-width: 100%;
        flex: 1 1 100%;
    }
}

/* ──────────────────────────────────────────────────────────
   Announcement Bar — center alignment + attention-grab animation
   Override block (placed last to take precedence)
   ────────────────────────────────────────────────────────── */

/* Brighter gradient + shimmer sweep so the bar actually catches the eye */
.gp-ann-bar--active {
    background: linear-gradient(90deg, #00C97A 0%, #00E58B 50%, #00C97A 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 229, 139, 0.3);
}
.gp-ann-bar--upcoming {
    background: linear-gradient(90deg, #1E3A5F 0%, #2E5A8C 50%, #1E3A5F 100%) !important;
    box-shadow: 0 2px 10px rgba(46, 90, 140, 0.4);
}

/* Animated shimmer sweep across the bar */
.gp-ann-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%);
    animation: gp-ann-shimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes gp-ann-shimmer {
    0%   { left: -100%; }
    60%  { left: 100%; }
    100% { left: 100%; }
}

/* Pulse the whole bar subtly at intervals to redraw attention */
.gp-ann-bar--active,
.gp-ann-bar--upcoming {
    animation: gp-ann-glow 3s ease-in-out infinite;
}
@keyframes gp-ann-glow {
    0%, 100% { box-shadow: 0 2px 10px rgba(0, 229, 139, 0.3); }
    50%      { box-shadow: 0 2px 18px rgba(0, 229, 139, 0.55); }
}
.gp-ann-bar--upcoming {
    animation-name: gp-ann-glow-blue;
}
@keyframes gp-ann-glow-blue {
    0%, 100% { box-shadow: 0 2px 10px rgba(46, 90, 140, 0.4); }
    50%      { box-shadow: 0 2px 20px rgba(80, 140, 220, 0.6); }
}

/* Centered, balanced layout */
.gp-ann-bar__inner {
    justify-content: center !important;
    text-align: center;
    gap: 14px !important;
    padding: 11px 50px 11px 18px !important;
    position: relative;
    z-index: 2;
}

/* Make the custom message clearly the hero */
.gp-ann-bar__msg {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    max-width: 820px !important;
}

/* Tag chip — keep small but high-contrast */
.gp-ann-bar__tag {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #FFFFFF;
    font-size: 10.5px !important;
    padding: 4px 11px !important;
    letter-spacing: 0.10em !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Countdown chip stays distinct */
.gp-ann-bar__cd {
    background: rgba(0, 0, 0, 0.40) !important;
    padding: 4px 14px !important;
    font-size: 13px !important;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.20);
}
.gp-ann-bar__cd [data-countdown] {
    color: #FFE680 !important; /* warm yellow so the timer reads instantly */
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(255, 230, 128, 0.5);
}

/* CTA pulse so the deposit button feels alive */
.gp-ann-bar__cta {
    animation: gp-ann-cta-bounce 2.5s ease-in-out infinite;
}
@keyframes gp-ann-cta-bounce {
    0%, 100% { transform: translateX(0); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
    50%      { transform: translateX(3px); box-shadow: 0 2px 12px rgba(255, 255, 255, 0.4); }
}

/* Mobile: stack cleanly, keep emphasis */
@media (max-width: 720px) {
    .gp-ann-bar__inner {
        gap: 8px !important;
        padding: 10px 38px 10px 12px !important;
    }
    .gp-ann-bar__msg {
        font-size: 13px !important;
        flex: 1 1 100%;
    }
    .gp-ann-bar__cd {
        font-size: 12px !important;
        padding: 3px 10px !important;
    }
}

/* LIVE indicator badge — only renders during an active Happy Hour window */
.gp-ann-bar__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    background: #DC2626;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.10em;
    border-radius: 4px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.6);
    animation: gp-ann-live-glow 1.8s ease-in-out infinite;
    position: relative;
    z-index: 3;
}
@keyframes gp-ann-live-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(220, 38, 38, 0.4); }
    50%      { box-shadow: 0 0 16px rgba(255, 80, 80, 0.85); }
}
.gp-ann-bar__live-badge .gp-ann-bar__pulse {
    background: #FFFFFF;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    width: 6px;
    height: 6px;
}

/* End/start countdown subtle colour distinction */
.gp-ann-bar__cd--ends [data-countdown]  { color: #FFA8A8 !important; }
.gp-ann-bar__cd--starts [data-countdown] { color: #FFE680 !important; }

/* ──────────────────────────────────────────────────────────
   Announcement bar — centering for ALL responsive sizes
   ────────────────────────────────────────────────────────── */
.gp-ann-bar__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center !important;
    text-align: center;
    gap: 12px;
    padding: 11px 50px !important; /* symmetric padding so center math works */
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap;
    min-height: 44px;
}

/* Close button always absolutely positioned top-right of bar */
.gp-ann-bar__close {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Tablet — keep one line if it fits */
@media (max-width: 900px) {
    .gp-ann-bar__inner {
        gap: 10px;
        padding: 10px 44px !important;
    }
    .gp-ann-bar__msg {
        font-size: 13.5px !important;
    }
}

/* Phone — stack tag/badge above msg above countdown, all centered */
@media (max-width: 640px) {
    .gp-ann-bar__inner {
        gap: 6px 8px;
        padding: 9px 40px !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center !important;
    }
    .gp-ann-bar__msg {
        flex: 1 1 100%;
        font-size: 12.5px !important;
        line-height: 1.4;
        text-align: center;
        order: 2;
    }
    .gp-ann-bar__tag,
    .gp-ann-bar__live-badge {
        order: 1;
    }
    .gp-ann-bar__cd {
        order: 3;
        margin: 0 auto;
    }
    .gp-ann-bar__cta {
        flex: 1 1 100%;
        order: 4;
        text-align: center;
        margin: 4px auto 0;
        max-width: 200px;
    }
    /* Hide dot separators on mobile — they look messy when stacked */
    .gp-ann-bar__sep { display: none; }
}

/* Very small phones */
@media (max-width: 380px) {
    .gp-ann-bar__inner { padding: 8px 36px !important; }
    .gp-ann-bar__msg { font-size: 12px !important; }
    .gp-ann-bar__tag, .gp-ann-bar__live-badge { font-size: 10px !important; padding: 3px 8px !important; }
    .gp-ann-bar__cd { font-size: 11px !important; padding: 3px 10px !important; }
}