/* =========================================================
   RAINBOW GALAXY COMPLETE THEME 🌈
   Red > Orange > Yellow > Green > Blue > Purple
   Ganti warna setiap 10 detik | Siklus 60 detik
   Kompatibel dengan selector tema CSS sebelumnya
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ================= RAINBOW COLOR ENGINE ================= */

:root {
    --rg-bg: #170711;
    --rg-panel: #29101B;
    --rg-panel2: #391523;
    --rg-primary: #FF1744;
    --rg-secondary: #FF526D;
    --rg-accent: #FF91A5;
    --rg-border: #A51D40;
    --rg-text: #FFF5F7;
    --rg-muted: #E9B9C4;
    --rg-dark: #210813;

    animation: rainbowTheme 60s steps(1, end) infinite;
}

/* Setiap warna bertahan sekitar 10 detik */

@keyframes rainbowTheme {

    /* 00-10 DETIK: MERAH */
    0% {
        --rg-bg: #170711;
        --rg-panel: #29101B;
        --rg-panel2: #391523;
        --rg-primary: #FF1744;
        --rg-secondary: #FF526D;
        --rg-accent: #FF91A5;
        --rg-border: #A51D40;
        --rg-text: #FFF5F7;
        --rg-muted: #E9B9C4;
        --rg-dark: #210813;
    }

    /* 10-20 DETIK: ORANYE */
    16.6667% {
        --rg-bg: #1B1005;
        --rg-panel: #30200E;
        --rg-panel2: #493018;
        --rg-primary: #FF9100;
        --rg-secondary: #FFAD42;
        --rg-accent: #FFD08A;
        --rg-border: #B86600;
        --rg-text: #FFF9F0;
        --rg-muted: #E8C9A4;
        --rg-dark: #261504;
    }

    /* 20-30 DETIK: KUNING */
    33.3333% {
        --rg-bg: #191604;
        --rg-panel: #2D280D;
        --rg-panel2: #403916;
        --rg-primary: #E5C900;
        --rg-secondary: #FFE52E;
        --rg-accent: #FFF18A;
        --rg-border: #998500;
        --rg-text: #FFFEF1;
        --rg-muted: #DCD5A3;
        --rg-dark: #211D04;
    }

    /* 30-40 DETIK: HIJAU */
    50% {
        --rg-bg: #06180F;
        --rg-panel: #102B1D;
        --rg-panel2: #19402B;
        --rg-primary: #00C853;
        --rg-secondary: #00E676;
        --rg-accent: #69F0AE;
        --rg-border: #008D3B;
        --rg-text: #F1FFF6;
        --rg-muted: #A8DCC0;
        --rg-dark: #071F12;
    }

    /* 40-50 DETIK: BIRU */
    66.6667% {
        --rg-bg: #071126;
        --rg-panel: #111F3D;
        --rg-panel2: #1A2D50;
        --rg-primary: #1565FF;
        --rg-secondary: #448AFF;
        --rg-accent: #82B1FF;
        --rg-border: #2857B8;
        --rg-text: #F3F7FF;
        --rg-muted: #B4C8F0;
        --rg-dark: #09152E;
    }

    /* 50-60 DETIK: UNGU */
    83.3333% {
        --rg-bg: #130820;
        --rg-panel: #25123C;
        --rg-panel2: #351A50;
        --rg-primary: #9C27FF;
        --rg-secondary: #D500F9;
        --rg-accent: #EA80FC;
        --rg-border: #8030BD;
        --rg-text: #FCF4FF;
        --rg-muted: #D3B3E8;
        --rg-dark: #1B0A2B;
    }

    /* KEMBALI KE MERAH */
    100% {
        --rg-bg: #170711;
        --rg-panel: #29101B;
        --rg-panel2: #391523;
        --rg-primary: #FF1744;
        --rg-secondary: #FF526D;
        --rg-accent: #FF91A5;
        --rg-border: #A51D40;
        --rg-text: #FFF5F7;
        --rg-muted: #E9B9C4;
        --rg-dark: #210813;
    }
}

/* ================= GLOBAL ================= */

html,
body {
    background: var(--rg-bg) !important;
    color: var(--rg-text) !important;
    font-family: "Montserrat", sans-serif;
}

body.bg-with-multiply {
    background: var(--rg-bg) !important;
    color: var(--rg-text) !important;
}

.montserrat-Font-google {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/* ================= BACKGROUND & MAIN PANELS ================= */

.bank-section,
.field-icon,
.menu,
.childbtnapp,
.panel,
.drp-buttons,
.calendar-table,
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date,
.contact-form-wrapper,
.deposit-button-mobile-parent,
.btndepo.mobile,
.btndepo,
.aside-bg,
.mobile-tray-window,
.box,
.newaccount-wrapperbg {
    background: var(--rg-panel) !important;
    color: var(--rg-text) !important;
    border-color: var(--rg-border) !important;
}

/* ================= PROFILE MENU ================= */

.Section-profile-menu {
    color: var(--rg-text) !important;
}

.svg-Section-profile-menu {
    fill: var(--rg-accent) !important;
}

.stroke-svg-profile-menu {
    stroke: var(--rg-accent) !important;
}

.aside-bg li.active,
.aside-bg li.active a.Section-profile-menu {
    background: linear-gradient(
        120deg,
        var(--rg-primary),
        var(--rg-secondary)
    ) !important;
    color: #FFFFFF !important;
}

.aside-bg li.active a.Section-profile-menu
.svg-Section-profile-menu,
.svgreward {
    fill: #FFFFFF !important;
}

/* ================= HEADER ================= */

.header-section {
    background: linear-gradient(
        120deg,
        var(--rg-dark),
        var(--rg-primary),
        var(--rg-secondary),
        var(--rg-dark)
    ) !important;
    border-bottom: 2px solid var(--rg-accent) !important;
    box-shadow: 0 3px 16px var(--rg-border);
}

.Header-Bar-Color,
.header-font,
.header-section-font {
    color: #FFFFFF !important;
}

.header-font,
.svg-header-section-font {
    fill: #FFFFFF !important;
}

/* ================= FLOATING ELEMENTS ================= */

.assistiveTouch,
.floating-vertical-badge {
    background: var(--rg-panel2) !important;
}

.floating-vertical-badge {
    color: var(--rg-accent) !important;
    border: 1px solid var(--rg-primary) !important;
}

.floating-vertical-badge-svg {
    fill: var(--rg-accent) !important;
}

/* ================= MOBILE TRAY ================= */

.mobile-tray-window {
    background: var(--rg-panel) !important;
    color: var(--rg-text) !important;
    border: 1px solid var(--rg-border) !important;
}

/* ================= FOOTER & BOTTOM NAVIGATION ================= */

.footer-mobile-section,
#game-nav-section.nav-with-multiply::before,
.game-nav-section,
.apk-hover,
.multiply {
    background: linear-gradient(
        120deg,
        var(--rg-dark),
        var(--rg-primary),
        var(--rg-secondary),
        var(--rg-dark)
    ) !important;
}

.footer-text-section,
.footer-section {
    background: var(--rg-dark) !important;
    border-top: 2px solid var(--rg-primary) !important;
}

.footer-font,
.footer-text-color2,
.iconmobileFont,
.hovergamenav {
    color: #FFFFFF !important;
}

.iconmobilefooter,
.hovergamenavicon {
    fill: #FFFFFF !important;
}

/* ================= GAME SECTION ================= */

.game-inner-title-font {
    color: var(--rg-accent) !important;
}

.gamesliderLobySlot.active a,
.bg-promotion,
.item-layer {
    background: var(--rg-panel) !important;
}

.game__inner,
.bg-footer-article,
.vabg,
.add-rekening-info,
.item-layer-text {
    background: var(--rg-panel2) !important;
    color: var(--rg-text) !important;
}

.provider-section,
.payment-section {
    background: var(--rg-panel) !important;
    color: var(--rg-accent) !important;
    border: 1px solid var(--rg-border) !important;
}

/* ================= GAME TABS ================= */

.game-tab.selected .game-tab-child,
.game-tab.active .game-tab-child {
    color: var(--rg-accent) !important;
}

.game-tab.selected .game-tab-child .svg-promotion,
.game-tab.active .game-tab-child .svg-promotion {
    fill: var(--rg-accent) !important;
}

/* ================= PROMOTION & BADGES ================= */

.badge,
.title-promotionimg,
.title-promotion {
    background: linear-gradient(
        120deg,
        var(--rg-primary),
        var(--rg-secondary)
    ) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--rg-accent) !important;
}

.color-expired-promoevent {
    color: var(--rg-muted) !important;
}

/* ================= ALL MAIN BUTTONS ================= */

.btndailycheckindetail,
.gamename-button2,
.gamename-button,
.btn-register2,
.btn-register3,
.btn-register,
.btn-secondary {
    background: linear-gradient(
        120deg,
        var(--rg-primary),
        var(--rg-secondary),
        var(--rg-primary)
    ) !important;

    color: #FFFFFF !important;
    border: 1px solid var(--rg-accent) !important;
    font-weight: 700;
    border-radius: 6px;
    transition: box-shadow 0.2s ease;
}

.btn-register2:hover,
.btn-register3:hover,
.btn-register:hover,
.btn-secondary:hover,
.btndailycheckindetail:hover,
.gamename-button:hover,
.gamename-button2:hover {
    background: linear-gradient(
        120deg,
        var(--rg-secondary),
        var(--rg-primary)
    ) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px var(--rg-border);
}

/* ================= ACTION BUTTONS ================= */

.btn-main {
    color: var(--rg-accent) !important;
}

.svg-btnmain {
    fill: var(--rg-accent) !important;
}

.mobile-button {
    border: 2px solid var(--rg-primary) !important;
    border-radius: 8px;
}

/* ================= NAVIGATION LINKS ================= */

.menu li .submenu li a:hover,
.menu li .submenu li a.active {
    background: var(--rg-primary) !important;
    color: #FFFFFF !important;
}

.menu-item-has-children > a::after,
.menu-item-has-children > a::before {
    color: var(--rg-accent) !important;
}

.sidebar li:hover,
.sidebar li.active {
    color: var(--rg-accent) !important;
    background: var(--rg-primary) !important;
}

.btndepo.active {
    color: var(--rg-accent) !important;
}

.btndepo.active .svg-Section-profile-menu {
    fill: var(--rg-accent) !important;
}

.btndepo.active .stroke-svg-profile-menu {
    stroke: var(--rg-accent) !important;
}

/* ================= HOVER EFFECTS ================= */

.btn-main:hover,
.hovergamenavicon:hover,
.hovergamenav:hover,
body a:hover,
body a:hover .svg-Section-profile-menu,
.wallet-nav-dropdown a:hover,
.cls-2:hover {
    color: var(--rg-accent) !important;
}

.sidebar li:hover,
.sidebar li.active {
    background-color: var(--rg-panel2) !important;
}

/* ================= INPUTS & FORMS ================= */

textarea,
input:disabled,
input,
select,
.contact-form .form-group input,
.contact-form .form-group select,
select option,
.newaccount-wrapper {
    background: var(--rg-panel2) !important;
    color: var(--rg-text) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: 6px;
}

input::placeholder,
textarea::placeholder {
    color: var(--rg-muted) !important;
    opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--rg-accent) !important;
    box-shadow: 0 0 0 2px var(--rg-border) !important;
}

/* ================= MEMO MODAL ================= */

.background-memo,
.labelsection {
    background: linear-gradient(
        120deg,
        var(--rg-primary),
        var(--rg-secondary)
    ) !important;
    color: #FFFFFF !important;
}

#infoModal .tab-content,
.qrref {
    color: var(--rg-text) !important;
}

#modal-memo .modal-content {
    background: var(--rg-panel) !important;
    color: var(--rg-text) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: 10px;
}

#messageMemo {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 100%;
}

#titleMemo {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ================= MOBILE MODAL ================= */

@media (max-width: 768px) {
    #modal-memo .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }

    #modal-memo .modal-body {
        padding: 0.75rem;
    }

    #modal-memo .add-rekening-info {
        padding: 5px;
    }
}

/* ================= MESSAGE PREVIEW ================= */

.message-ellipsis * {
    display: inline !important;
    white-space: nowrap !important;
}

.message-ellipsis br {
    display: none !important;
}

.message-ellipsis p,
.message-ellipsis div {
    margin: 0 !important;
    padding: 0 !important;
}

/* ================= BORDER ACCENTS ================= */

.panel,
.box,
.aside-bg,
.bank-section,
.payment-section,
.provider-section,
.deposit-button-mobile-parent,
.contact-form-wrapper {
    border-color: var(--rg-border) !important;
}

/* ================= SVG ICONS ================= */

.svg-header-section-font,
.svg-Section-profile-menu,
.svg-btnmain,
.iconmobilefooter,
.hovergamenavicon,
.floating-vertical-badge-svg {
    transition: fill 0.2s ease, stroke 0.2s ease;
}

/* ================= SCROLLBAR ================= */

* {
    scrollbar-color: var(--rg-primary) var(--rg-bg);
}

/* ================= ACCESSIBILITY ================= */

@media (prefers-reduced-motion: reduce) {
    :root {
        animation: none !important;
    }
}

/* ================= END RAINBOW GALAXY ================= */