/* ========================================================= KIKOTOTO - Cosmic Blue Neon Professional Theme Ringan, smooth, class tetap sama, modern & hidup ========================================================= */

/* ===================== Root ===================== */

:root {
    --bg: #060b18;
    --bg-soft: #0b1224;
    --bg-card: #0f1730;
    --bg-card-2: #111d3d;
    --bg-hover: #14244a;
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(108, 167, 255, .22);
    --text: #f4f8ff;
    --muted: #a9b7d4;
    --primary: #54b8ff;
    --primary-2: #7a5cff;
    --primary-3: #8ee7ff;
    --accent: #9d6bff;
    --accent-2: #5ad1ff;
    --gold: #ffd36b;
    --success: #4ee3b3;
    --danger: #ff6c89;
    --shadow: 0 10px 28px rgba(0, 0, 0, .28);
    --shadow-soft: 0 8px 20px rgba(84, 184, 255, .12);
    --glow: 0 0 18px rgba(84, 184, 255, .14);
    --radius: 16px;
    --radius-sm: 12px;
    --trans: .26s ease;
}

/* ===================== Global ===================== */

body,
.navbar,
.site-footer-navbar,
.modal-body,
.modal-footer,
.standard-form-container,
.complaint-container,
.reporting-detail-popup .reporting-detail-popup-content,
.loyalty-daily-reward-modal .modal-body,
.free-spin-report-container {
    background: radial-gradient(circle at top center, rgba(84, 184, 255, .16), transparent 30%), radial-gradient(circle at 85% 15%, rgba(122, 92, 255, .12), transparent 24%), linear-gradient(180deg, #0a1122 0%, #08101f 52%, #060b18 100%) !important;
    color: var(--text) !important;
}

/* panel blur ringan */

.site-header-navbar,
.site-footer,
.game-provider-slider,
.page-description,
.site-side-menu>ul,
.side-menu-user-info,
.side-menu-login-panel,
.standard-reporting-control-group {
    background: rgba(10, 16, 31, .88) !important;
    border: 1px solid rgba(255, 255, 255, .05);
    backdrop-filter: blur(8px);
}

/* ===================== Title / Section ===================== */

.game-list-title,
.large-game-list-heading,
.standard-form-sub-title,
.info-center-container h3,
.home-component-item .h2 {
    color: var(--text) !important;
    border-left: 4px solid var(--primary) !important;
    padding-left: 12px;
    text-shadow: 0 0 12px rgba(84, 184, 255, .16);
}

.standard-form-title {
    color: var(--text) !important;
    border-bottom: 1px solid var(--line-2) !important;
}

/* ===================== Cards / Containers ===================== */

.home-component-item,
.game-container,
.game-list .game-item,
.claim-item,
.promotion-list .promotion-container,
.pending-transactions-container .pending-transactions-item,
.transaction-item,
.pending-transaction-detail-card,
.bet-report-detail-inner-card,
.loyalty-history-list .loyalty-history-item,
.benefit-container .benefit-list .benefit-card,
.how-it-works-container .how-it-works-section,
.referral-features .referral-features-item,
.mission-container .mission-item,
.standard-content-info .standard-content-block,
.bank-info-block,
.complaint-container .complaint-status-box,
.complaint-container .uploaded-video-file-display {
    position: relative;
    background: linear-gradient(180deg, rgba(17, 29, 60, .96), rgba(10, 18, 36, .96)) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
}

.home-component-item::before,
.game-container::before,
.game-list .game-item::before,
.claim-item::before,
.promotion-list .promotion-container::before,
.transaction-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 35%), radial-gradient(circle at top right, rgba(84, 184, 255, .10), transparent 28%);
    pointer-events: none;
}

/* hover ringan */

.game-list .game-item,
.game-container,
.claim-item,
.promotion-list .promotion-container,
.transaction-item,
.home-component-item {
    transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans), background var(--trans);
}

.game-list .game-item:hover,
.game-container:hover,
.claim-item:hover,
.promotion-list .promotion-container:hover,
.transaction-item:hover,
.home-component-item:hover {
    transform: translateY(-3px);
    border-color: rgba(84, 184, 255, .26) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34), 0 0 0 1px rgba(84, 184, 255, .08) inset, 0 0 18px rgba(84, 184, 255, .08) !important;
    background: linear-gradient(180deg, rgba(19, 34, 69, .98), rgba(10, 18, 36, .98)) !important;
}

/* ===================== Filter Section ===================== */

.game-list-container .filter-section {
    background: linear-gradient(180deg, rgba(14, 24, 46, .96), rgba(9, 16, 30, .96)) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-soft);
    padding: 12px !important;
}

.game-list-container .filter-section:after {
    border-left: 1px solid var(--line) !important;
}

.game-list-container .filter-section .category-filter .category-filter-link {
    color: var(--muted) !important;
    background: transparent !important;
    border-radius: 12px;
    transition: background var(--trans), color var(--trans), box-shadow var(--trans);
}

.game-list-container .filter-section .category-filter .category-filter-link:hover {
    background: rgba(84, 184, 255, .10) !important;
    color: var(--text) !important;
}

.game-list-container .filter-section .category-filter .category-filter-link.active {
    color: #fff !important;
    background: linear-gradient(90deg, var(--primary-2), var(--primary)) !important;
    box-shadow: 0 8px 22px rgba(84, 184, 255, .18);
}

/* ===================== Inputs ===================== */

.game-list-container .filter-section>input,
.game-list-container .filter-section>select,
.standard-form input,
.standard-form select,
.standard-form textarea,
.side-menu-login-panel input[type="text"],
.side-menu-login-panel input[type="password"],
.standard-reporting-control-group input,
.standard-reporting-control-group select,
.complaint-container .form-control {
    background: #0d162c !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 12px !important;
    transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}

.game-list-container .filter-section>input::placeholder,
.standard-form input::placeholder,
.standard-form textarea::placeholder {
    color: #8ea4cf;
}

.game-list-container .filter-section>input:focus,
.game-list-container .filter-section>select:focus,
.standard-form input:focus,
.standard-form select:focus,
.standard-form textarea:focus,
.side-menu-login-panel input[type="text"]:focus,
.side-menu-login-panel input[type="password"]:focus,
.standard-reporting-control-group input:focus,
.standard-reporting-control-group select:focus {
    border-color: rgba(84, 184, 255, .54) !important;
    box-shadow: 0 0 0 3px rgba(84, 184, 255, .12) !important;
    background: #0f1931 !important;
    outline: none;
}

/* ===================== Buttons ===================== */

.play-now,
.claim-item .claim-button,
.claim-item .activation-button,
.claim-item .cancellation-button,
.claim-item .expiration-button,
.site-topbar main>a.register-button,
.site-topbar main>a.login-button,
.standard-button-group .btn-primary,
.standard-reporting-control-group .btn-primary,
.modal-footer .btn-primary,
.download-apk .btn,
.download-apk-btn-android,
.vendor-game-info a,
.vendor-game-details-info a,
.page-description a,
.promotion-list .promotion-wrapper .link-container button,
.register-done-container .btn-deposit,
.loyalty-reward-container .loyalty-reward-button,
.daily-reward-container .standard-secondary-button,
.mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button,
[data-payment-gateway="qris"] .qris-qr-code-container a,
[data-payment-gateway] .download-qr-button,
.download-apk-notification .download-btn {
    position: relative;
    background: linear-gradient(90deg, var(--primary-2), var(--primary)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 22px rgba(84, 184, 255, .18);
    transition: transform var(--trans), box-shadow var(--trans), filter var(--trans), opacity var(--trans);
}

.play-now::before,
.claim-item .claim-button::before,
.site-topbar main>a.register-button::before,
.standard-button-group .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 40%, rgba(255, 255, 255, .08));
    opacity: .6;
    pointer-events: none;
}

.play-now:hover,
.claim-item .claim-button:hover,
.claim-item .activation-button:hover,
.claim-item .cancellation-button:hover,
.claim-item .expiration-button:hover,
.site-topbar main>a.register-button:hover,
.site-topbar main>a.login-button:hover,
.standard-button-group .btn-primary:hover,
.standard-reporting-control-group .btn-primary:hover,
.modal-footer .btn-primary:hover,
.download-apk .btn:hover,
.download-apk-btn-android:hover,
.vendor-game-info a:hover,
.vendor-game-details-info a:hover,
.page-description a:hover,
.promotion-list .promotion-wrapper .link-container button:hover,
.register-done-container .btn-deposit:hover,
.loyalty-reward-container .loyalty-reward-button:hover,
.daily-reward-container .standard-secondary-button:hover,
.mission-container .mission-item[data-status="claimable"] .mission-action-container .action-button:hover,
[data-payment-gateway="qris"] .qris-qr-code-container a:hover,
[data-payment-gateway] .download-qr-button:hover,
.download-apk-notification .download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(84, 184, 255, .24);
    filter: brightness(1.04);
}

.free-play,
.standard-outline-button.standard-outline-button,
.request-otp-button,
.contact-verification-link,
.claim-item .expiration-countdown,
.copy-input-button-field .copy-input-button {
    background: rgba(255, 255, 255, .03) !important;
    color: var(--text) !important;
    border: 1px solid rgba(84, 184, 255, .24) !important;
    border-radius: 999px !important;
}

.free-play:hover,
.standard-outline-button.standard-outline-button:hover,
.request-otp-button:hover,
.contact-verification-link:hover,
.copy-input-button-field .copy-input-button:hover {
    background: rgba(84, 184, 255, .10) !important;
    color: #fff !important;
}

/* ===================== Game Item ===================== */

.game-list .game-item,
.game-container,
.popular-slots-game-list .game-item {
    overflow: hidden;
}

.game-list .game-item .wrapper-container .link-container,
.game-container .game-wrapper .link-container,
.promotion-list .promotion-wrapper .link-container {
    background: linear-gradient(180deg, rgba(5, 10, 20, 0), rgba(5, 10, 20, .82)) !important;
    backdrop-filter: blur(2px);
}

.game-container .game-name,
.game-list .game-player h5,
.popular-games .games-group .game-container .game-player h5,
.slots-winner .winner-info h5 {
    color: var(--text) !important;
}

/* ===================== Header / Menu ===================== */

.navbar,
.site-topbar,
.site-header-navbar,
.site-menu .game-list-container,
.site-side-menu li>a,
.site-side-menu summary {
    border-color: var(--line) !important;
}

.site-menu>li>a,
.site-topbar main>a,
.language-selector-container,
.site-menu .games-container>li>a {
    color: var(--text) !important;
}

.site-menu>li[data-active="true"],
.site-menu>li[data-active="true"] a,
.site-menu>li>a:hover,
.site-footer-navbar ul li:hover a,
.site-footer-navbar li[data-active="true"] a,
.site-side-menu details[open]>summary>section {
    color: var(--primary-3) !important;
}

.site-menu .game-list-container,
.site-side-menu>ul {
    background: linear-gradient(180deg, rgba(12, 20, 38, .98), rgba(7, 12, 24, .98)) !important;
    border-bottom: 1px solid rgba(84, 184, 255, .18) !important;
}

/* ===================== Modal ===================== */

.modal-header,
.register-modal .modal-header,
.simple-modal .modal-header {
    background: linear-gradient(90deg, var(--primary-2), var(--primary)) !important;
    color: #fff !important;
    border-bottom: 0 !important;
}

.modal-content:has(.resolved-transaction-popup) {
    background: #0d162b !important;
    border: 1px solid var(--line) !important;
}

/* ===================== Announcement / Jackpot ===================== */

.announcement-outer-container {
    background: linear-gradient(90deg, rgba(12, 20, 39, .98), rgba(14, 24, 48, .98)) !important;
    color: var(--text) !important;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.announcement-container>[data-section="announcements"] {
    color: var(--primary-3) !important;
}

.home-progressive-jackpot,
.home-progressive-jackpot .outer-container,
.home-progressive-jackpot .inner-container {
    background: transparent !important;
}

.home-progressive-jackpot .border-container {
    background: linear-gradient(180deg, rgba(14, 24, 46, .96), rgba(9, 16, 30, .96)) !important;
    border: 1px solid rgba(84, 184, 255, .22) !important;
    border-radius: 22px !important;
    box-shadow: var(--shadow);
}

.home-progressive-jackpot .jackpot-container,
.progressive-jackpot .jackpot-container {
    background: linear-gradient(90deg, rgba(122, 92, 255, .24), rgba(84, 184, 255, .22)) !important;
    color: #fff !important;
    border-radius: 999px !important;
    letter-spacing: 2px;
    box-shadow: 0 0 18px rgba(84, 184, 255, .10) inset;
}

.home-progressive-jackpot .jackpot-border-container {
    border: 1px dashed rgba(255, 255, 255, .12) !important;
    background: rgba(6, 11, 24, .62) !important;
}

.home-progressive-jackpot .jackpot-currency,
.jackpot-container .jackpot-currency,
.wallet-bar .balance-field main,
.deposit-container .formatted-balance,
.deposit-container .real-deposit-amount,
.withdrawal-container .total-balance,
.withdrawal-container .real-withdrawal-amount,
.deposit-amount-container .real-deposit-amount,
.withdrawal-amount .currency-suffix,
.deposit-amount .currency-suffix {
    color: var(--gold) !important;
}

/* ===================== Text Colors ===================== */

.contact-us-list li h6,
.info-center-container h2,
.info-center-container h4,
.info-center-container h5,
.claim-info-modal h4,
.footer-description-section h4,
.footer-sitemap-section h4,
.register-done-container>h2,
.register-done-container .register-verification-done .info,
.pending-transaction-detail-container .primary,
.resolved-transaction-popup .primary,
.transaction-report-group-container .transaction-report-group-title {
    color: var(--text) !important;
}

.contact-us-list li,
.info-center-container,
.footer-description-section .site-description,
.footer-sitemap-section .footer-links>li>a,
.footer-sitemap-section .contact-list>li a,
.footer-sitemap-section .social-media-list>li>a,
.transaction-item .info-section .details .secondary,
.pending-transaction-detail-container .secondary,
.resolved-transaction-popup .secondary {
    color: var(--muted) !important;
}

.contact-us-list li a,
.info-center-container a,
.form-footer-note-section .form-footer-note-link a,
.register-modal .register-page-link a,
.layout-modal .registration-note a,
.pending-transaction-detail-container .link,
.pending-transaction-detail-container .link a {
    color: var(--accent-2) !important;
}

/* ===================== Tables ===================== */

.transactions-table.table,
.standard-form-container .table thead,
.standard-reporting-scroll-container .table thead,
.transactions-table.table thead,
.transactions-table.table tbody {
    background: #0d162b !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

.transactions-table.table tbody tr:nth-child(odd) td,
.standard-form-container .table tbody td,
.standard-reporting-scroll-container .table tbody td {
    background: #0f1930 !important;
    color: var(--text) !important;
    border-color: rgba(255, 255, 255, .06) !important;
}

.transactions-table.table tbody tr:nth-child(even) td {
    background: #13203b !important;
    color: var(--text) !important;
}

/* ===================== Tabs ===================== */

.notification-tabs .notification-tab-item,
.top-tab-container a,
.standard-nav-tabs a,
.promotion-categories a,
.mobile-app-container .nav-tabs>li>a,
.loyalty-reward-container .tab-filter .tab {
    background: rgba(255, 255, 255, .04) !important;
    color: var(--muted) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 12px !important;
    transition: all var(--trans);
}

.notification-tabs .notification-tab-item[data-active="true"],
.top-tab-container a[data-active="true"],
.top-tab-container a:hover,
.standard-nav-tabs a[data-active="true"],
.promotion-categories a:hover,
.promotion-categories a[data-active="true"],
.mobile-app-container .nav-tabs>li.active>a,
.mobile-app-container .nav-tabs>li.active>a:hover,
.mobile-app-container .nav-tabs>li.active>a:focus,
.loyalty-reward-container .tab-filter input:checked+.tab {
    background: linear-gradient(90deg, var(--primary-2), var(--primary)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ===================== Notification / Remark ===================== */

.remarks-container,
.payment-maintenance-container,
.modal-body .pending-transaction-summary-container,
.claim-info-modal .alert-container,
.payment-account-creation-remarks,
.loyalty-level-remarks-container,
.bonus-selection-list .bonus-selection-card+.remarks-container {
    background: rgba(84, 184, 255, .08) !important;
    border: 1px solid rgba(84, 184, 255, .22) !important;
    color: #dff4ff !important;
    border-radius: 14px !important;
}

.remarks-container i {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* ===================== Small Animations - ringan ===================== */

@keyframes softPulse {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(84, 184, 255, 0);
    }
    50% {
        box-shadow: 0 0 18px rgba(84, 184, 255, .16);
    }
}

@keyframes softFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

@keyframes borderShine {
    0% {
        opacity: .35;
    }
    50% {
        opacity: .6;
    }
    100% {
        opacity: .35;
    }
}

.play-now,
.site-topbar main>a.register-button,
.standard-button-group .btn-primary {
    animation: softPulse 3.4s ease-in-out infinite;
}

.home-progressive-jackpot .jackpot-container,
.progressive-jackpot .jackpot-container {
    animation: softFloat 4s ease-in-out infinite;
}

.game-list .game-item::before,
.game-container::before {
    animation: borderShine 4.2s ease-in-out infinite;
}

/* ===================== Mobile Optimization ===================== */

@media (max-width: 768px) {
    .game-list .game-item:hover,
    .game-container:hover,
    .claim-item:hover,
    .promotion-list .promotion-container:hover,
    .transaction-item:hover,
    .home-component-item:hover {
        transform: none;
    }
    .play-now,
    .site-topbar main>a.register-button,
    .standard-button-group .btn-primary,
    .home-progressive-jackpot .jackpot-container,
    .progressive-jackpot .jackpot-container,
    .game-list .game-item::before,
    .game-container::before {
        animation: none;
    }
    .site-header-navbar,
    .site-footer,
    .game-provider-slider,
    .page-description,
    .site-side-menu>ul,
    .side-menu-user-info,
    .side-menu-login-panel {
        backdrop-filter: none;
    }
}

/* ===================== Extra Optional Polish ===================== */

.page-description,
.standard-content-info .standard-content-block,
.bank-info-block,
.announcement-outer-container,
.game-list-container .filter-section {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22), 0 0 0 1px rgba(84, 184, 255, .04) inset !important;
}