/* ──────────────────────────────────────────────────────────
   Announcement Bar — Happy Hour / Bonus Hour countdown
   Renders above the header, hidden on iframe pages
   ────────────────────────────────────────────────────────── */
.gp-ann-bar {
    background: linear-gradient(90deg, #007D49 0%, #00A862 50%, #007D49 100%);
    color: #FFFFFF;
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
    z-index: 1020;
    overflow: hidden;
}
.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; }
}

/* ──────────────────────────────────────────────────────────
   Announcement Bar — header overlap fix
   The bar sits at the top of the viewport with high z-index;
   the fixed .header sits below it; body padding compensates.
   ────────────────────────────────────────────────────────── */

/* When the bar is visible, give it fixed top placement above the header */
.gp-ann-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100; /* higher than .header (z-index 99) */
}

/* Compensate body padding to avoid the bar overlapping page content.
   These need to be applied to the BODY, not the header — the header is
   already position:fixed and we just shift its top offset.

   The bar height is approximately 42-44px on desktop and 56-60px on mobile
   when the CTA wraps. We use CSS variables so JS can correct at runtime. */
body.has-gp-ann-bar { padding-top: var(--gp-ann-bar-h, 44px); }
body.has-gp-ann-bar .header { top: var(--gp-ann-bar-h, 44px) !important; }
body.has-gp-ann-bar .header.menu-fixed { top: var(--gp-ann-bar-h, 44px) !important; }

@media (max-width: 720px) {
    body.has-gp-ann-bar { padding-top: var(--gp-ann-bar-h, 64px); }
    body.has-gp-ann-bar .header { top: var(--gp-ann-bar-h, 64px) !important; }
    body.has-gp-ann-bar .header.menu-fixed { top: var(--gp-ann-bar-h, 64px) !important; }
}

/* 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 — final centering for ALL responsive sizes
   ────────────────────────────────────────────────────────── */

/* Reset positioning so close button is absolute and content can truly center */
.gp-ann-bar { position: fixed; }
.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; }
}