/* Nexus provider catalog: the API does not supply provider logos, so each provider
   receives a deterministic colourful orb with its initials centred inside. */
.nexus-provider-section {
    margin: 24px 0 34px;
    padding: 20px;
    background: transparent !important;
    background-image: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.nexus-provider-heading h4 {
    margin: 0;
}

.nexus-provider-heading span {
    color: var(--site-text-muted, rgba(255, 255, 255, .7));
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
}

.nexus-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 20px 16px;
    margin: 20px auto 0;
    max-width: 1100px;
}

.nexus-provider-item {
    color: var(--site-text, #fff);
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    font-weight: 600;
    gap: 9px;
    min-width: 0;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
}

.nexus-provider-item:hover,
.nexus-provider-item:focus {
    color: var(--site-primary, #fff);
}

.nexus-provider-orb {
    align-items: center;
    background: radial-gradient(circle at 30% 25%, hsl(var(--provider-hue) 95% 68%), hsl(calc(var(--provider-hue) + 45) 85% 40%) 58%, hsl(calc(var(--provider-hue) + 80) 75% 20%));
    border: 2px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    box-shadow: 0 5px 13px rgba(0, 0, 0, .4), inset 0 1px 5px rgba(255, 255, 255, .35);
    display: flex;
    height: 98px;
    justify-content: center;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    width: 98px;
}

.nexus-provider-item:hover .nexus-provider-orb,
.nexus-provider-item:focus .nexus-provider-orb {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .55), 0 0 0 3px var(--site-primary, #fff);
    transform: translateY(-3px);
}

.nexus-provider-orb span {
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.nexus-provider-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25;
    overflow: hidden;
}

.nexus-provider-item.is-maintenance {
    filter: grayscale(1);
    opacity: .55;
}

.nexus-provider-item.is-maintenance::after {
    color: var(--site-primary, #fff);
    content: 'Maintenance';
    font-size: 9px;
    margin-top: -5px;
}

.nexus-provider-section-mobile {
    margin: 12px 10px 20px;
    padding: 18px 12px 20px;
}

.nexus-provider-section-mobile .nexus-provider-heading {
    text-align: center;
}

.nexus-provider-section-mobile h4 {
    color: var(--site-text, #fff);
    font-size: 18px;
}

@media (max-width: 600px) {
    .nexus-provider-grid {
        gap: 18px 10px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 18px;
    }

    .nexus-provider-orb {
        height: 86px;
        width: 86px;
    }

    .nexus-provider-orb span {
        font-size: 21px;
    }

    .nexus-provider-item {
        font-size: 10px;
    }
}
body {
    background-color: var(--site-background) !important;
    background-image: var(--site-background-image) !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center !important;
}

body [data-container-background] {
    background-color: var(--site-background) !important;
    background-image: var(--site-background-image) !important;
    background-size: cover !important;
    background-position: center !important;
}

.site-header, .topbar-container, .site-menu, .main-menu-outer-container,
.download-apk-notification, .announcement-outer-container, .site-footer,
.footer-container, footer {
    background-color: var(--site-background) !important;
    border-color: var(--site-primary) !important;
}

.site-header, .topbar-container, .main-menu-outer-container, .announcement-outer-container {
    border-bottom: 1px solid var(--site-primary) !important;
}

/* Bar pengumuman mengikuti warna utama tema. */
.announcement-container {
    background-color: var(--site-primary) !important;
    color: var(--site-primary-text) !important;
}

.announcement-container *, .announcement-container a {
    color: var(--site-primary-text) !important;
}

.main-menu-outer-container>i, .mobile-story-ring {
    background-color: var(--site-primary) !important;
}

/* Story bar follows the page/background image; only each story ring is colored. */
.mobile-stories, .mobile-stories-track {
    background: transparent !important;
}

.mobile-story-trigger {
    color: var(--site-text) !important;
    -webkit-text-fill-color: var(--site-text) !important;
}

.quick-menu-toggle {
    background: linear-gradient(135deg, var(--site-primary), var(--site-accent)) !important;
    border: 1px solid color-mix(in srgb, var(--site-primary) 60%, #fff) !important;
}

.quick-menu-toggle span {
    background-color: var(--site-primary-text) !important;
}

.bank-list [data-online] {
    background-color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--site-primary) 60%, transparent) !important;
    border-radius: 6px;
}

.bank-list [data-online] img {
    padding: 4px;
    object-fit: contain;
    background: #fff !important;
}

.bank-list .bank-logo {
    background: #fff !important;
    color: #172a63 !important;
}

.main-menu-outer-container>main>a, .topbar-container a, .site-header a,
.site-menu a, .mobile-story-trigger, .announcement-container {
    color: var(--site-primary) !important;
}

.header-info a, .login-button, .register-button, .btn-primary,
.standard-primary-button, .standard-secondary-button {
    background: var(--site-primary) !important;
    border-color: var(--site-primary) !important;
    color: #15120a !important;
}

.header-info a + a, .register-button, .btn-warning {
    background: var(--site-accent) !important;
    border-color: var(--site-accent) !important;
}

.popular-game-title-container, .game-list-container, .home-progressive-jackpot,
.games-filter-section, .site-contacts, .bank-list {
    border-color: var(--site-primary) !important;
}

/* Main content: remove the old purple/pink skins and use the active theme. */
/* Main sections remain transparent; the theme colour is only an accent. */
.popular-game-title-container,
.games-filter-section .name-filter,
.games-filter-section .filter-list,
.tab-menu-container a[data-active="true"] {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--site-primary) !important;
    border-color: var(--site-primary) !important;
}

.game-list-container,
.bigger-game-list,
.popular-game-container,
.games-filter-section,
.home-progressive-jackpot,
.game-container,
.content-container,
.home-container {
    background-color: transparent !important;
    background-image: none !important;
}

/* Jackpot previously had a fixed magenta gradient. */
.home-progressive-jackpot .jackpot-container {
    background-image: linear-gradient(var(--site-primary), var(--site-background)) !important;
}

.home-progressive-jackpot .jackpot-inner-container,
.home-progressive-jackpot .jackpot-border-container {
    background-color: var(--site-background) !important;
    border-color: var(--site-primary) !important;
}

.home-progressive-jackpot .jackpot-currency {
    color: var(--site-primary) !important;
}

.home-progressive-jackpot .jackpot-play-section .jackpot-play-text,
.home-progressive-jackpot .jackpot-play-section .jackpot-play-text label {
    color: var(--site-primary) !important;
}

/* Nominal jackpot di sebelah label IDR mengikuti warna teks utama. */
.home-progressive-jackpot .jackpot-border-container #progressive_jackpot {
    color: var(--site-text) !important;
}

.site-footer a[data-active="true"],
.main-menu-outer-container>main>a[data-active="true"],
.games-filter-section a[data-active="true"] {
    color: var(--site-primary) !important;
}

/* Payment and footer areas stay transparent over a custom background image. */
.site-contacts,
.bank-list,
.site-description,
.copyright,
.site-footer,
.footer-container,
footer {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--site-text) !important;
}

/*
 * Only text nodes inherit the muted colour. Using a universal selector here
 * also repainted inline icons and SVG logos inside the footer, which made the
 * bottom navigation look broken.
 */
.site-contacts,
.site-description,
.copyright,
.site-footer a,
.footer-container a,
footer a {
    color: var(--site-text-muted) !important;
}

/* Keep the bottom navigation icons at their designed size and colour. */
.site-footer a>img {
    max-width: 20px;
    max-height: 20px;
}

.site-footer a[data-active="true"],
.site-footer a[data-active="true"] *,
.footer-container a[data-active="true"],
footer a[data-active="true"] {
    color: var(--site-primary) !important;
}

/* Desktop public pages use the same theme tokens as mobile. Legacy desktop
   styles hard-code a purple palette, so these rules deliberately load last. */
@media (min-width: 768px) {
    html,
    body,
    .site-content-container,
    .provider-outer-container,
    .game-list,
    .games-list-container .game-info,
    .top-menu .game-list-container,
    .topbar-container,
    .topbar-left-section .language-selector,
    .topbar-left-section .language-selector li,
    .modal-content,
    .modal-body,
    .modal-footer {
        background-color: var(--site-background) !important;
        background-image: none !important;
        color: var(--site-text) !important;
    }

    .site-header,
    .games-list-container .filter-section,
    .top-menu .game-list-container > * .section-heading,
    .modal-header {
        background: linear-gradient(90deg, var(--site-primary), var(--site-accent)) !important;
        color: var(--site-primary-text) !important;
    }

    .site-header *,
    .games-list-container .filter-section *,
    .modal-header,
    .modal-header * {
        color: var(--site-primary-text) !important;
    }

    .top-menu > li[data-active="true"],
    .top-menu > li:hover,
    .topbar-container a:hover,
    .site-contacts a:hover {
        color: var(--site-primary) !important;
    }

    .games-list-container,
    .large-game-list-container,
    .arcade-game-list,
    .crash-game-game-list {
        background-color: color-mix(in srgb, var(--site-background) 84%, var(--site-accent)) !important;
        color: var(--site-text) !important;
    }

    .games-list-container .vendor-name,
    .game-list-title,
    .large-game-list-container .section-heading,
    .announcement-outer-container,
    .announcement-container > [data-section="announcements"] {
        background-color: color-mix(in srgb, var(--site-background) 72%, var(--site-primary)) !important;
        color: var(--site-text) !important;
        border-color: var(--site-primary) !important;
    }

    .games-list-container .filter-section input[type="text"],
    .form-control,
    input[type="text"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        background-color: color-mix(in srgb, var(--site-background) 88%, #000) !important;
        border-color: var(--site-primary) !important;
        color: var(--site-text) !important;
    }

    .games-list-container .filter-section:after,
    .games-list-container .category-filter-link.active,
    .games-list-container .category-filter-link:hover,
    .play-now,
    .btn-primary,
    button[type="submit"] {
        background: var(--site-primary) !important;
        border-color: var(--site-primary) !important;
        color: var(--site-primary-text) !important;
    }

    .play-now:hover,
    .btn-primary:hover,
    button[type="submit"]:hover {
        background: var(--site-accent) !important;
        border-color: var(--site-accent) !important;
        color: var(--site-primary-text) !important;
    }

    .game-list .game-item,
    .large-game-list li {
        background: linear-gradient(180deg, color-mix(in srgb, var(--site-background) 60%, var(--site-accent)), var(--site-background)) !important;
    }

    .game-list .game-name,
    .large-game-list .game-title,
    .large-game-list-container .section-heading h4,
    .topbar-container,
    .topbar-container a,
    .games-list-container .vendor-name,
    .game-list-title > div {
        color: var(--site-text) !important;
    }

    .provider-outer-container,
    .game-list,
    .games-list-container .game-info,
    .large-game-list li a.game-info {
        border-color: var(--site-primary) !important;
    }

    .api-provider-slide {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 18px;
        padding: 10px;
        background: color-mix(in srgb, var(--site-background) 80%, var(--site-accent)) !important;
        border: 1px solid var(--site-primary);
        border-radius: 12px;
    }

    .api-provider-slide > main {
        display: flex;
        flex: 1;
        gap: 10px;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: thin;
    }

    .api-provider-slide .slide-item {
        display: flex;
        flex: 0 0 118px;
        min-height: 58px;
        align-items: center;
        justify-content: center;
        padding: 7px;
        border: 1px solid color-mix(in srgb, var(--site-primary) 55%, transparent);
        border-radius: 8px;
        background: var(--site-background) !important;
        color: var(--site-text) !important;
        text-align: center;
    }

    .api-provider-slide .slide-item:hover {
        border-color: var(--site-primary);
        background: color-mix(in srgb, var(--site-background) 68%, var(--site-primary)) !important;
    }

    .api-provider-slide .slide-item img {
        display: block;
        max-width: 100%;
        max-height: 38px;
        object-fit: contain;
    }

    .api-provider-slide .slide-item img + span {
        display: none;
    }

    .api-provider-slide .left_trigger,
    .api-provider-slide .right_trigger {
        color: var(--site-primary) !important;
        cursor: pointer;
    }

    .api-slot-page {
        min-height: 600px;
        padding: 38px 0 60px;
        background: var(--site-background) !important;
    }

    .api-slot-catalogue {
        max-width: 1180px;
        margin: 0 auto 24px;
        padding: 24px !important;
    }

    .api-slot-description {
        margin: 14px 0 20px;
        color: var(--site-text-muted) !important;
        text-align: center;
    }

    .api-navbar-dropdown {
        background: color-mix(in srgb, var(--site-background) 90%, var(--site-accent)) !important;
        border-bottom: 3px solid var(--site-primary) !important;
    }

    .api-navbar-providers > li {
        width: 118px;
        margin: 6px !important;
    }

    .api-navbar-providers > li > a {
        min-height: 70px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 8px !important;
        border: 1px solid color-mix(in srgb, var(--site-primary) 55%, transparent);
        border-radius: 8px;
        background: var(--site-background) !important;
        color: var(--site-text) !important;
        text-align: center;
    }

    .api-navbar-providers img {
        max-width: 100%;
        max-height: 45px;
        object-fit: contain;
    }

    .api-navbar-providers img + span { display: none; }
    .api-navbar-providers > li > a:hover { border-color: var(--site-primary); }
}

/* Dedicated text colours for game names and labels below navigation icons. */
body .game-name,
body .game-list .game-name,
body .bigger-game-list .game-name {
    color: var(--site-game-text) !important;
}

body .main-menu-outer-container > main > a,
body .site-footer > a {
    color: var(--site-navigation-text) !important;
}

body .main-menu-outer-container > main > a[data-active="true"],
body .site-footer > a[data-active="true"] {
    color: var(--site-primary) !important;
}

.category-page-menu > main > a.active {
    color: var(--site-primary) !important;
    border-bottom: 2px solid var(--site-primary) !important;
}

/* Member wallet and loyalty panel. */
body .loyalty-info-container,
body .loyalty-info-container .loyalty-info,
body .loyalty-info-container .loyalty-experience {
    background-color: var(--site-background) !important;
    background-image: none !important;
    color: var(--site-text) !important;
    border-color: color-mix(in srgb, var(--site-primary) 40%, transparent) !important;
}

body .loyalty-info-container .loyalty-info {
    border-bottom: 1px solid color-mix(in srgb, var(--site-primary) 45%, transparent) !important;
}

body .loyalty-info-container .user-info .balance,
body .loyalty-info-container .user-info .balance > a,
body .loyalty-info-container .loyalty-experience-progress {
    background-color: color-mix(in srgb, var(--site-background) 78%, var(--site-primary)) !important;
    color: var(--site-text) !important;
}

body .loyalty-info-container .loyalty-info-wrapper .username,
body .loyalty-info-container .balance > a > span,
body .loyalty-info-container .locked-balance-value span,
body .loyalty-info-container .loyalty-point,
body .loyalty-info-container .xp-label {
    color: var(--site-text) !important;
    -webkit-text-fill-color: var(--site-text) !important;
}

body .loyalty-info-container .loyalty-point-section {
    border-left-color: color-mix(in srgb, var(--site-primary) 35%, transparent) !important;
    border-right-color: color-mix(in srgb, var(--site-primary) 35%, transparent) !important;
}

body .loyalty-info-container .loyalty-experience-progress .progress {
    background: linear-gradient(90deg, var(--site-primary), var(--site-accent)) !important;
}

body .loyalty-info-container .loyalty-experience-progress span,
body .loyalty-info-container .loyalty-point-badge .loyalty-level,
body .loyalty-info-container .loyalty-point-title {
    color: var(--site-text) !important;
}

/* Section title bars use the selected theme colour; game content stays transparent. */
.popular-game-title-container {
    background-color: var(--site-primary) !important;
    background-image: linear-gradient(90deg, var(--site-primary), var(--site-accent)) !important;
    border-color: var(--site-primary) !important;
}

.popular-game-title-container,
.popular-game-title-container .title.title,
.popular-game-title-container .title.title * {
    color: var(--site-primary-text) !important;
}

/* Contact/official-channel strip uses the same themed title-bar treatment. */
.site-contacts {
    background-color: var(--site-primary) !important;
    background-image: linear-gradient(90deg, var(--site-primary), var(--site-accent)) !important;
}

.site-contacts .contact-list li a {
    background-color: var(--site-background) !important;
    color: var(--site-text) !important;
    border: 1px solid color-mix(in srgb, var(--site-primary) 50%, transparent) !important;
}

.site-contacts .contact-list li a i {
    background-color: var(--site-primary) !important;
}

/* Notification popup follows the public theme as well. */
#mobile_notification_popup .modal-header {
    background-color: var(--site-primary) !important;
    background-image: linear-gradient(90deg, var(--site-primary), var(--site-accent)) !important;
    color: var(--site-primary-text) !important;
}

#mobile_notification_popup .modal-header .modal-title,
#mobile_notification_popup .modal-header .close {
    color: var(--site-primary-text) !important;
}

#mobile_notification_popup .modal-body,
#mobile_notification_popup .modal-footer,
#mobile_notification_popup .notification-popup-body,
#mobile_notification_popup .notification-footer {
    background-color: var(--site-background) !important;
    background-image: none !important;
    color: var(--site-text) !important;
}

#mobile_notification_popup .notification-popup-title,
#mobile_notification_popup .notification-tab-item[data-active="true"],
#mobile_notification_popup .notification-footer a {
    color: var(--site-primary) !important;
}

#mobile_notification_popup .notification-tab-item,
#mobile_notification_popup .notification-content,
#mobile_notification_popup .notification-item,
#mobile_notification_popup .empty-notification-content,
#mobile_notification_popup .empty-notification-content * {
    color: var(--site-text-muted) !important;
    border-color: color-mix(in srgb, var(--site-primary) 35%, transparent) !important;
}

/* Login and registration forms use the active public theme. */
body[data-route="login"],
body[data-route="registerasi"] {
    background-color: var(--site-background) !important;
    background-image: var(--site-background-image) !important;
}

.standard-form-container,
.login-outer-container,
.register-outer-container,
.login-panel {
    background-color: color-mix(in srgb, var(--site-background) 88%, var(--site-primary)) !important;
    background-image: none !important;
    border: 1px solid color-mix(in srgb, var(--site-primary) 55%, transparent) !important;
}

.standard-form-container label,
.standard-form-container .form-label,
.login-panel label,
.register-panel label {
    color: var(--site-primary) !important;
}

.standard-form-container .form-control,
.login-panel input[type="text"],
.login-panel input[type="password"],
.register-panel input,
.register-panel select {
    color: var(--site-text) !important;
    border-color: color-mix(in srgb, var(--site-primary) 65%, transparent) !important;
    background-color: transparent !important;
}

.standard-form-container .form-control::placeholder,
.login-panel input::placeholder,
.register-panel input::placeholder {
    color: var(--site-text-muted) !important;
    opacity: .8;
}

.standard-form-container .form-control:focus,
.login-panel input:focus,
.register-panel input:focus,
.register-panel select:focus {
    border-color: var(--site-primary) !important;
    box-shadow: 0 0 0 .12rem color-mix(in srgb, var(--site-primary) 35%, transparent) !important;
}

.standard-button,
.login-panel input[type="submit"],
.login-panel .register-button,
.register-panel input[type="submit"] {
    background-color: var(--site-primary) !important;
    background-image: linear-gradient(90deg, var(--site-primary), var(--site-accent)) !important;
    border-color: var(--site-primary) !important;
    color: var(--site-primary-text) !important;
}

.login-panel .register-field,
.login-panel .forgot-password-link,
.register-panel .login-field {
    color: var(--site-text-muted) !important;
}

.login-panel .register-field a,
.login-panel .forgot-password-link a,
.register-panel .login-field a {
    color: var(--site-primary) !important;
}

/* The compact login inside the sidebar has the same treatment. */
.side-menu-login-panel input[type="text"],
.side-menu-login-panel input[type="password"] {
    background-color: color-mix(in srgb, var(--site-background) 75%, var(--site-primary)) !important;
    color: var(--site-text) !important;
}

.side-menu-login-panel input[type="submit"],
.side-menu-login-panel a {
    background-color: var(--site-primary) !important;
    background-image: none !important;
    border-color: var(--site-primary) !important;
    color: var(--site-primary-text) !important;
}

/* Home information popup follows the selected public theme. */
#popup_modal .modal-header {
    background-color: var(--site-primary) !important;
    background-image: linear-gradient(90deg, var(--site-primary), var(--site-accent)) !important;
    color: var(--site-primary-text) !important;
}

#popup_modal .modal-header .close,
#popup_modal .modal-header .modal-title {
    color: var(--site-primary-text) !important;
}

#popup_modal .modal-body,
#popup_modal .modal-footer {
    background-color: var(--site-background) !important;
    color: var(--site-text) !important;
}

#popup_modal .modal-body p,
#popup_modal .modal-body h1,
#popup_modal .modal-body h2,
#popup_modal .modal-body h3,
#popup_modal .modal-body span,
#popup_modal .modal-body strong {
    color: var(--site-text) !important;
}

#popup_modal .modal-body h1,
#popup_modal .modal-body h2,
#popup_modal .modal-body h3 {
    color: var(--site-primary) !important;
}

#popup_modal .modal-footer .btn-primary {
    background-color: var(--site-primary) !important;
    color: var(--site-primary-text) !important;
}

/* Sidebar (guest and member) uses the same background, text, and accent. */
.site-menu > ul,
.site-menu li > a,
.site-menu summary,
.side-menu-login-panel,
.side-menu-user-info {
    background-color: var(--site-background) !important;
    background-image: none !important;
    color: var(--site-text) !important;
}

.site-menu li > a,
.site-menu summary {
    border-left-color: color-mix(in srgb, var(--site-primary) 55%, transparent) !important;
}

.site-menu li > a[data-active="true"],
.site-menu li > a:hover,
.site-menu summary:hover {
    color: var(--site-primary) !important;
    border-left-color: var(--site-primary) !important;
}

.site-menu li + li,
.site-menu details article {
    border-top-color: color-mix(in srgb, var(--site-primary) 25%, transparent) !important;
}

.site-menu .side-menu-user-info .balance > span,
.site-menu .side-menu-user-info .username,
.site-menu .side-menu-user-info .loyalty-point {
    color: var(--site-primary) !important;
    -webkit-text-fill-color: var(--site-primary) !important;
}

.site-menu .side-menu-user-info .logout-button,
.site-menu .side-menu-login-panel .btn-primary {
    background-color: var(--site-primary) !important;
    color: var(--site-primary-text) !important;
}

/* Local, theme-aware icons for the centre action and Contact Us. These do
   not depend on remote image files, so they cannot disappear when a CDN fails. */
.site-footer > a[data-priority="true"] > img,
.site-footer > a.live-chat-link > img {
    display: none !important;
}

.site-footer > a[data-priority="true"]::before {
    content: "";
    display: block;
    width: 43px;
    height: 43px;
    margin: -19px auto 2px;
    background-color: var(--site-primary) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='32' cy='24' r='10' fill='black'/%3E%3Cpath d='M14 53c3-11 11-16 18-16s15 5 18 16' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='black' stroke-width='4'/%3E%3Ccircle cx='32' cy='24' r='10' fill='black'/%3E%3Cpath d='M14 53c3-11 11-16 18-16s15 5 18 16' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-footer > a.live-chat-link::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: 5px auto 4px;
    background-color: var(--site-primary) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 10h48a5 5 0 0 1 5 5v30a5 5 0 0 1-5 5H30L17 60v-10H8a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5Z' fill='black'/%3E%3Ccircle cx='22' cy='30' r='4' fill='white'/%3E%3Ccircle cx='32' cy='30' r='4' fill='white'/%3E%3Ccircle cx='42' cy='30' r='4' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 10h48a5 5 0 0 1 5 5v30a5 5 0 0 1-5 5H30L17 60v-10H8a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5Z' fill='black'/%3E%3Ccircle cx='22' cy='30' r='4' fill='white'/%3E%3Ccircle cx='32' cy='30' r='4' fill='white'/%3E%3Ccircle cx='42' cy='30' r='4' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The fixed bottom navigation needs its own solid surface, never transparent. */
footer.site-footer {
    background-color: color-mix(in srgb, var(--site-background) 82%, var(--site-primary)) !important;
    background-image: none !important;
    border-top: 1px solid var(--site-primary) !important;
}

footer.site-footer > a {
    background-color: transparent !important;
}

/* Compact bottom bar with a raised centre action. */
footer.site-footer {
    min-height: 57px;
    align-items: flex-end;
    justify-content: space-around;
    background-color: color-mix(in srgb, var(--site-background) 48%, var(--site-primary)) !important;
    border-top: 3px solid color-mix(in srgb, var(--site-primary) 72%, #fff) !important;
}

footer.site-footer > a {
    flex: 1 1 20%;
    padding: 3px 1px 6px !important;
    color: var(--site-primary-text) !important;
    font-size: 9px !important;
    line-height: 1.15;
}

footer.site-footer > a:not([data-priority="true"]) > img {
    width: 24px !important;
    height: 24px !important;
    margin: 0 auto 2px !important;
}

footer.site-footer > a.live-chat-link::before {
    width: 25px;
    height: 25px;
    margin: 0 auto 2px;
}

footer.site-footer > a[data-priority="true"]::before {
    display: flex;
    width: 44px;
    height: 44px;
    margin: -25px auto 2px;
    align-items: center;
    justify-content: center;
    border: 2px solid color-mix(in srgb, var(--site-primary) 65%, #fff);
    border-radius: 50%;
    background: color-mix(in srgb, var(--site-background) 36%, var(--site-primary)) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.42), inset 0 1px 2px rgba(255,255,255,.3);
    color: var(--site-primary-text) !important;
    content: "$";
    font: 27px/1 Georgia, serif;
    -webkit-mask: none !important;
    mask: none !important;
}

footer.site-footer > a[data-priority="true"] {
    color: var(--site-primary-text) !important;
}

/* Logged-out home: put the two account actions directly under the banner,
   where they remain easy to reach instead of crowding the compact header. */
.guest-auth-actions {
    display: none;
}

@media (max-width: 768px) {
    .guest-auth-actions {
        display: flex;
        width: 100%;
        min-height: 58px;
        background: var(--site-background);
    }

    .guest-auth-actions > a {
        display: flex;
        flex: 1 1 50%;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        padding: 0 12px;
        color: #fff !important;
        font-size: 19px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        text-transform: capitalize;
        background: color-mix(in srgb, var(--site-primary) 88%, #730000);
    }

    .guest-auth-actions > a + a {
        background: linear-gradient(180deg, #686868, #3d3d3d);
        border-left: 1px solid rgba(255,255,255,.16);
    }

    footer.site-footer.guest-footer > a[data-priority="true"]::before {
        width: 38px;
        height: 38px;
        margin: -17px auto 2px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background-color: var(--site-primary-text) !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='22' r='11' fill='black'/%3E%3Cpath d='M12 57c2-13 10-20 20-20s18 7 20 20' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='22' r='11' fill='black'/%3E%3Cpath d='M12 57c2-13 10-20 20-20s18 7 20 20' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
        content: "";
    }
}

/* Category icons are semantic Font Awesome elements so their identity does not
   depend on menu order and their colour follows the selected theme. */
.main-menu-outer-container>main>a>.category-menu-icon {
    display: block;
    height: 25px;
    margin: 4px auto 6px;
    font-size: 21px;
    line-height: 25px;
    color: var(--site-primary) !important;
}

/* Mobile category rail: give every section a proper icon-over-label layout,
   matching the compact provider navigation used in the reference design. */
@media (max-width: 768px) {
    .main-menu-outer-container {
        min-height: 70px;
    }

    .main-menu-outer-container > main > a {
        display: flex !important;
        min-width: 78px !important;
        min-height: 70px;
        padding: 5px 4px !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 10px !important;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        white-space: normal !important;
    }

    .main-menu-outer-container > main > a > .category-menu-icon {
        display: block !important;
        width: auto !important;
        height: 25px !important;
        margin: 0 !important;
        color: #f2f2f2 !important;
        font-size: 22px !important;
        line-height: 25px !important;
    }

    .main-menu-outer-container > main > a.active > .category-menu-icon,
    .main-menu-outer-container > main > a[data-active="true"] > .category-menu-icon {
        color: var(--site-primary) !important;
    }
}

/* Footer and long description use colours that remain readable with any theme. */
.footer-links-container,
.footer-links-container .container,
.site-info,
.site-info .container,
.site-description,
.copyright {
    background: transparent !important;
    color: var(--site-text) !important;
}

.footer-links-container a,
.site-description p,
.site-description li,
.copyright {
    color: var(--site-text-muted) !important;
}

.site-description h1,
.site-description h2,
.site-description h3,
.site-description a,
.site-description a strong {
    color: var(--site-primary) !important;
}

/* A coloured heading bar must never use the same colour for its text. */
.popular-game-title-container,
.popular-game-title-container .title,
.popular-game-title-container .title *,
.games-filter-section .name-filter,
.games-filter-section .filter-list {
    color: var(--site-primary) !important;
}

.popular-game-title-container .title, .game-name,
.site-contacts a, .site-footer, .footer-container {
    color: var(--site-primary) !important;
}

.home-progressive-jackpot .border-container, .jackpot-border-container {
    border-color: var(--site-primary) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--site-primary) 55%, transparent) !important;
}

.mobile-story-ring { background: linear-gradient(135deg, var(--site-primary), var(--site-accent)) !important; }
.mobile-story-progress i.done, .mobile-story-progress i.active:after { background: var(--site-primary) !important; }

/* Must be last: legacy CSS colours these links with a fixed low-contrast purple. */
.site-contacts a,
.site-description,
.site-description a,
.copyright,
.copyright a,
.site-footer a,
.footer-container a,
footer a {
    color: var(--site-text-muted) !important;
}

.site-footer a[data-active="true"],
.site-footer a[data-active="true"] *,
.footer-container a[data-active="true"],
footer a[data-active="true"] {
    color: var(--site-primary) !important;
}

/* Bar kontak WhatsApp/Telegram di atas footer disembunyikan atas permintaan admin. */
.site-contacts { display: none !important; }