/* =====================================================================
   css-7-win25.css  —  NEON GAMING / FUTURISTIC THEME OVERRIDE
   Vibe: dark navy + electric blue + tosca (teal/turquoise), neon glow.
   Loads LAST so it overrides the original "dark-blue" theme (css-5)
   whose :root variables are consumed by css-2 via var().
   ===================================================================== */

:root {
    /* ---------- Win25 palette ---------- */
    --w25-blue:        #1f8bff;   /* electric blue            */
    --w25-blue-bright: #2bd6ff;   /* bright cyan-blue         */
    --w25-tosca:       #19e6d4;   /* tosca / turquoise        */
    --w25-tosca-deep:  #0bbfb0;   /* deep tosca               */
    --w25-cyan:        #26f0e0;   /* neon text cyan           */
    --w25-bg-0:        #040b14;   /* page deepest             */
    --w25-bg-1:        #06121e;   /* panels / footer          */
    --w25-bg-2:        #0a1826;   /* raised surfaces          */
    --w25-bg-3:        #0e2233;   /* chips / type tags        */
    --w25-line:        rgba(25, 230, 212, .35);
    --w25-grad:        linear-gradient(135deg, #1f8bff 0%, #19e6d4 100%);
    --w25-grad-h:      linear-gradient(90deg,  #1f8bff 0%, #19e6d4 100%);
    --w25-glow:        0 0 8px rgba(25, 230, 212, .55), 0 0 22px rgba(31, 139, 255, .35);
    --w25-glow-soft:   0 0 14px rgba(25, 230, 212, .22);

    /* ---------- Remap existing theme variables (consumed by css-2) ---------- */

    /* text + primary accents */
    --primary-text-color:   #eafdff;
    --secondary-text-color: #cdeffb;
    --theme-text-color:     #26f0e0;
    --primary-button-bg:    #1f8bff;

    /* big surfaces -> deep navy */
    --body-bg:                                          #040b14;
    --site-content-cntr-bg:                             #05101a;
    --site-info-cntr-bg:                                #06121e;
    --site-footer-bg:                                   #06121e;
    --footer-featured-product-bg:                       #08131f;
    --footer-banking-card-bg:                           #0a1826;
    --footer-hero-icon-bg:                              #0e2233;
    --footer-sitemap-icon-bg:                           #0e2233;
    --announcement-outer-cntr-bg:                       #05101a;
    --announcement-cntr-data-section-announcements-bg:  #0a1826;
    --bonus-slider-modal-bg:                            #08131f;
    --bonus-slider-form-bg:                             #0a1826;
    --empty-table-cntr-bg:                              #0a1826;

    /* header -> tosca gradient + neon edge */
    --site-header-bg: linear-gradient(90deg, #06223a 0%, #0fbecb 50%, #06223a 100%);
    --site-header-bs: inset 0 2px 1px rgba(38, 240, 224, .15), 0 0 18px rgba(25, 230, 212, .30);

    /* banner nav buttons */
    --banner-nav-button-bg:       rgba(8, 36, 58, .55);
    --banner-nav-button-bg-hover: rgba(15, 190, 203, .55);

    /* claim / bonus items */
    --claim-item-bg:                          #08131f;
    --claim-item-type-bg:                     #0e2233;
    --claim-item-border:                      #15384f;
    --claim-item-color:                       #2bf0e0;
    --claim-item-titile-free-spin-note-color: #26f0e0;
    --claim-type-exp-countdown-data-section-bg:#0a1826;
    --claim-item-activation-button-bg:        #1f8bff;
    --claim-item-activation-button-hover-bg:  #19e6d4;
    --claim-item-activation-btn-bg:           #1f8bff;
    --claim-item-activation-btn-hover-bg:     #19e6d4;
    /* claim CTA: green -> tosca to stay on-palette */
    --claim-item-claim-button-bg:          linear-gradient(to bottom, #21f0dd 0%, #0bbfb0 100%);
    --claim-item-claim-button-hover-bg:    linear-gradient(to top,    #21f0dd 0%, #0bbfb0 100%);
    --claim-item-claim-button-border-color:#7ffff0;
    --claim-item-claim-button-color:       #04121a;
    --bonus-progress-progress-bar-success-bg: linear-gradient(to right, #19e6d4 0%, #1f8bff 100%);

    /* links / contact */
    --contact-us-list-a-color:       #2bd6ff;
    --contact-us-list-a-hover-color: #26f0e0;

    /* buttons / forms scattered through the app */
    --complaint-form-std-btn-primary-bg:               #1f8bff;
    --complaint-cntr-std-form-title-border:            #19e6d4;
    --complaint-cntr-std-form-link-header-a-true-bg:   linear-gradient(to right, #1f8bff 0%, #19e6d4 100%);
    --deposit-cntr-reveal-bank-acc-btn-bg:             #1f8bff;
    --deposit-cntr-reveal-bank-acc-btn-bg-image:       linear-gradient(to right, #1f8bff 0%, #19e6d4 100%);
    --deposit-cntr-reveal-bank-acc-btn-hover-bg:       #19e6d4;
    --deposit-cntr-reveal-bank-acc-btn-hover-bg-image: linear-gradient(to right, #19e6d4 0%, #1f8bff 100%);
    --deposit-summary-cntr-header-transfer-amount-color:#2bf0e0;
    --data-payment-gateway-download-qr-btn-bg:         linear-gradient(to right, #2bd6ff 0%, #1f8bff 100%);
    --floating-action-btn-item-bg:                     linear-gradient(90deg, #1f8bff 0%, #19e6d4 100%);
    --floating-action-btn-item-border:                 #2bd6ff;
    --bank-info-cntr-carousel-indicatiors-active-bg:   #19e6d4;
    --bonus-selection-cntr-border:                     #19e6d4;
    --bonus-slider-activation-button-hover-bg:         #19e6d4;
    --about-us-cntr-inner-box-border:                  #1f8bff;

    /* progressive jackpot (already teal-ish — push to neon) */
    --home-progressive-jackpot-currency-color:           #2bf0e0;
    --home-progressive-jackpot-border-cntr-border:       #19e6d4;
    --home-progressive-jackpot-jackpot-currency-color:   #2bf0e0;
    --home-progressive-jackpot-jackpot-border-cntr-border:#0bbfb0;
}

/* =====================================================================
   GLOBAL FUTURISTIC TREATMENT
   ===================================================================== */

/* Page background: deep navy + dual glow + faint tech grid (fixed) */
html,
body {
    background:
        linear-gradient(rgba(31, 139, 255, .035) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, rgba(25, 230, 212, .035) 1px, transparent 1px) 0 0 / 46px 46px,
        radial-gradient(1100px 560px at 50% -8%, rgba(31, 139, 255, .16), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(25, 230, 212, .12), transparent 55%),
        #040b14 !important;
    background-attachment: fixed !important;
    color: #dffaff;
}

/* Headings — subtle neon glow */
h1, h2, h3, .h1, .h2, .h3 {
    color: #eafdff;
    text-shadow: var(--w25-glow-soft);
}

/* Links */
a { color: #2bd6ff; }
a:hover,
a:focus {
    color: #26f0e0;
    text-shadow: 0 0 8px rgba(25, 230, 212, .7);
}

/* Text selection + scrollbar */
::selection { background: rgba(25, 230, 212, .35); color: #ffffff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #04101a; }
::-webkit-scrollbar-thumb {
    background: var(--w25-grad);
    border-radius: 6px;
    border: 2px solid #04101a;
}
::-webkit-scrollbar-thumb:hover { background: var(--w25-blue-bright); }

/* Bootstrap-style primary/info buttons -> neon gradient */
.btn-primary,
.btn-info,
.btn-default.active,
.primary-button,
input[type="submit"].btn {
    background-image: var(--w25-grad-h) !important;
    background-color: #1f8bff !important;
    border: 1px solid rgba(43, 214, 255, .55) !important;
    color: #04121a !important;
    box-shadow: var(--w25-glow);
    transition: box-shadow .2s ease, transform .12s ease;
}
.btn-primary:hover,
.btn-info:hover,
.primary-button:hover {
    box-shadow: 0 0 14px rgba(25, 230, 212, .8), 0 0 28px rgba(31, 139, 255, .55) !important;
    transform: translateY(-1px);
}
.btn-success {
    background-image: linear-gradient(to bottom, #21f0dd, #0bbfb0) !important;
    border-color: #7ffff0 !important;
    color: #04121a !important;
}

/* Banner area + carousel arrows glow */
.banner { position: relative; }
.banner .nav-btn {
    filter: drop-shadow(0 0 6px rgba(25, 230, 212, .55));
}

/* Announcement bar — neon framed */
.announcement-outer-container {
    background: #05101a !important;
    border-top: 1px solid var(--w25-line);
    border-bottom: 1px solid var(--w25-line);
}

/* =====================================================================
   EMPTY BANNER SLIDE PLACEHOLDER  (gambar dipasang nanti)
   ===================================================================== */
/* keep the single placeholder slide visible no matter what the carousel JS does */
.banner { min-height: 220px; }
#banner_carousel .vertical-wrapper,
#banner_carousel .slide-item,
#banner_carousel .slide-item > a {
    display: block !important;
    width: 100%;
}
#banner_carousel .slide-item > a { text-decoration: none; }

/* real banner image: fill the slot responsively, no distortion */
#banner_carousel .banner-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.banner-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1920 / 600;
    min-height: 220px;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 14px;
    border: 2px dashed rgba(25, 230, 212, .6);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(31, 139, 255, .18), transparent 60%),
        linear-gradient(135deg, #07182a 0%, #0a2a36 100%);
    box-shadow:
        inset 0 0 70px rgba(31, 139, 255, .18),
        0 0 26px rgba(25, 230, 212, .25);
    position: relative;
    overflow: hidden;
    animation: w25-pulse 3.2s ease-in-out infinite;
}
/* sweeping neon scan line */
.banner-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(38, 240, 224, .12) 50%, transparent 60%);
    transform: translateX(-120%);
    animation: w25-scan 3.6s ease-in-out infinite;
}
.banner-placeholder-text {
    position: relative;
    z-index: 1;
    text-align: center;
    font-family: 'gilroybold', 'LatoWeb', sans-serif;
    font-size: clamp(18px, 2.4vw, 34px);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #aef0ff;
    text-shadow: var(--w25-glow);
    line-height: 1.5;
}
.banner-placeholder-text small {
    display: block;
    margin-top: 10px;
    font-family: 'LatoWeb', sans-serif;
    font-size: clamp(11px, 1.1vw, 14px);
    letter-spacing: .12em;
    color: #6fd6e8;
    text-shadow: none;
}

@keyframes w25-pulse {
    0%, 100% { box-shadow: inset 0 0 70px rgba(31, 139, 255, .18), 0 0 22px rgba(25, 230, 212, .22); }
    50%      { box-shadow: inset 0 0 90px rgba(31, 139, 255, .26), 0 0 34px rgba(25, 230, 212, .40); }
}
@keyframes w25-scan {
    0%   { transform: translateX(-120%); }
    60%, 100% { transform: translateX(120%); }
}