/* ==========================================================================
 * PURPLETOTO · agenolx-override — tiru tampilan AGENOLX (biru + emas).
 * Sumber: HTML asli agenolx.com (head + footer custom <style> + :root vars).
 * Dimuat SETELAH basket168-override.css (lihat layouts/app.blade.php).
 * Aktif bila tb_config.theme_variant = 'agenolx'.
 * Rollback: ganti theme_variant ke '' + php artisan cache:clear.
 * Catatan: brand teks tetap PURPLETOTO, hanya gaya yang disamakan.
 * ========================================================================== */

/* ---- Token warna AGENOLX ---- */
:root {
    --color-primary: #1d2b43;
    --color-primary-light: #4a5059;
    --color-primary-dark: #060d18;
    --color-brand: #2f7bff;
    --color-brand-dark: #1d4fd6;
    --color-brand-light: #9db9ff;
    --color-accent-primary: #c20c05;
    --color-accent-secondary: #0ca18a;
    --color-brand-d5: #2459cc;
    --color-brand-rgb: 47,123,255;
    --agenolx-blue-1: #001085;
    --agenolx-blue-2: #0037ff;
    --agenolx-btn-1: #002bff;
    --agenolx-btn-2: #004eff;
    --agenolx-navy-1: #000a18;
    --agenolx-navy-2: #00153a;
    --agenolx-navy-3: #001840;
}

/* ---- Body: hitam + bg agenolx (hotlink sama seperti sumber) ---- */
body.is-chaosapiv2,
body.is-chaosapi,
body {
    background: #000000 url(https://photoku.io/images/2025/10/27/bg-agen-neww.jpeg) center center no-repeat !important;
    background-attachment: fixed !important;
    background-position: top !important;
    background-size: cover !important;
}

/* ---- Container tengah 1169px navy ---- */
.main-content .container,
.layout--default main > .container,
.container {
    max-width: 1169px !important;
    background-color: #000a18 !important;
    box-shadow: rgb(0 0 0 / 100%) 0 32px 62px -2px, rgb(0 0 0 / 100%) 0 30px 32px -3px !important;
}
@media (max-width: 768px) {
    .app-footer { max-width: 100% !important; width: 100% !important; }
}

/* ---- Header desktop garis biru ---- */
.app-header--d {
    border-bottom: 1px solid #004bff !important;
}

/* ---- Menu desktop: bg gambar kecil + transparan ---- */
.app-menu--d ul {
    background: url(https://photoku.io/images/2025/07/23/bg-kecil-neww.png) center center no-repeat !important;
    background-size: cover !important;
}
.app-menu--primary {
    background-color: #1d2b4300 !important;
}
.app-menu--primary[data-v-9cfb8622] {
    background-color: #1d2b4300 !important;
}

/* ---- List footer putih (verbatim sumber) + animasi warna ---- */
.app-footer__text li,
.app-footer li {
    color: #fff !important;
}
.animatedcolor,
.animatedcolor i {
    -webkit-animation: color-change 1s infinite !important;
    animation: color-change 1s infinite !important;
}

/* ---- Breadcrumb ala agenolx: tombol gradient biru uppercase ---- */
.app-breadcrumbs .nav-item a {
    text-transform: uppercase !important;
    padding: 5px 10px !important;
    background: linear-gradient(to bottom, #002bff 0%, #004eff 100%) !important;
    margin: auto 5px !important;
    border-radius: 10px !important;
    border: 1px solid #1100ff !important;
    box-shadow: 1px 1px 1px black !important;
    color: #ffffff !important;
}
nav.app-breadcrumbs.home--full-width.app-breadcrumbs--d {
    justify-content: center !important;
}

/* ---- Tombol utama gradient biru ---- */
.btn--flex {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    border-bottom: 3px solid #0f00e7 !important;
    background: linear-gradient(to bottom, #002bff 0%, #004eff 100%) !important;
    box-shadow: 0px 2px 2px 2px #00000080 !important;
    border-radius: 5px 2px 20px 20px !important;
}
.btn--brand,
.btn--accent {
    color: #ffffff !important;
    background: linear-gradient(to bottom, #002bff 0%, #004eff 100%) !important;
    border-color: #1100ff !important;
}
.app-header__widgets .app-header__auth > *,
.app-header__widgets .app-header__user > * {
    border-radius: 0px !important;
}

/* ---- Card terang biru ---- */
.card--light {
    background-color: #004cbd !important;
    border: 1px solid #002fff !important;
}

/* ---- Promo teaser navy ---- */
.promotions-list .promotions__item .promotion__teaser {
    background-color: #002d7b !important;
}

/* ---- Bank item gif (sama seperti sumber) ---- */
.bank-select__item {
    position: relative !important;
    overflow: hidden !important;
    height: 60px !important;
    border-radius: 5px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: background-color .2s ease !important;
    width: 104px !important;
    background: url(https://imgku.io/download/EwdyMtD5.gif) !important;
}

/* ---- Footer text + footer utama navy ---- */
.app-footer__link-group--social ul { display: flex !important; align-items: center !important; }
.app-footer__link-group--social ul li { margin-right: .75rem !important; }
.app-footer__link-group--social ul li:last-child { margin-right: 0 !important; }
.app-footer__link-group--social img { width: 2em !important; height: 2em !important; object-fit: contain !important; }
.footer-text,
.footer-text[data-v-78faa0a8] {
    background-color: #001840 !important;
    border-top: 1px solid rgb(7 0 255) !important;
    max-width: 73.1rem !important;
    margin: auto !important;
}
footer.app-footer,
.app-footer {
    background-color: #00153a !important;
    margin: auto !important;
    margin-top: -9px !important;
    width: 100% !important;
    max-width: 1169px !important;
    margin-bottom: calc(0px + env(safe-area-inset-bottom)) !important;
}

/* ---- Partner + payment biru ---- */
.app-footer__partners ul li a {
    padding: 3px !important;
    font-size: 10px !important;
    background: linear-gradient(to bottom, #0047ff 0%, #031772 100%) !important;
    border-radius: 20px !important;
    margin-top: 10px !important;
    margin-left: 5px !important;
    color: hsla(0, 0%, 100%, .6) !important;
}
.app-footer__payment ul li {
    border: 1px solid #001b64 !important;
    background: #021a6f !important;
    box-shadow: 0px 2px 2px 2px #00000038 !important;
}

/* ---- Arcade light ---- */
.arcade-carousel--light .arcade-carousel__img-container {
    background-color: #001234 !important;
    border: 1px solid #ffeb00 !important;
}

/* ---- Floating livechat diperbesar ala agenolx ---- */
.floating a img,
body.is-chaosapiv2 .floating a img {
    width: 120% !important;
    height: 110% !important;
    object-fit: contain !important;
}

/* ---- Menu Cepat (agen-*) gradient biru agenolx ---- */
body .agen-toggle-btn,
.agen-toggle-btn {
    position: fixed !important;
    left: 4px !important;
    bottom: 70px !important;
    z-index: 10000 !important;
    cursor: pointer;
    padding: 10px 16px !important;
    font-size: 16px !important;
    color: #fff !important;
    background: linear-gradient(to bottom, #001085 0%, #0037ff 80%) !important;
    border: 2px solid #005dff !important;
    border-radius: 30px !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}
body .agen-toggle-btn:hover,
.agen-toggle-btn:hover {
    background: #005dff !important;
}
@media (max-width: 400px) {
    body .agen-toggle-btn,
    .agen-toggle-btn {
        left: 1px !important;
        padding: 3px 7px !important;
        text-transform: uppercase;
    }
}
.agen-social {
    position: fixed !important;
    left: 1rem !important;
    bottom: 6.2rem !important;
    width: min(300px, 75vw) !important;
    background: linear-gradient(to bottom, #001085 0%, #0037ff 80%) !important;
    border-right: 2px solid #0033ff !important;
    border-radius: 0 20px 20px 0 !important;
    padding: 7px !important;
    box-shadow: inset 0 0 0 1px #005cff, inset 0 2px 0 0 #00e7ff, inset 0 4px 4px 2px #0011ff, 3px 3px 3px 1px rgba(0, 0, 0, 0.2) !important;
    transform: translateX(-110%) !important;
    transition: transform .3s ease, left .4s ease !important;
    z-index: 99999 !important;
}
.agen-social.agen-open {
    transform: none !important;
    left: 0 !important;
}
body.is-chaosapi .agen-social { bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 4.5rem) !important; }
.agen-social h3 { color: #fff !important; font-size: 20px !important; margin-bottom: 4px !important; }
.agen-social p { color: #bbb !important; font-size: 14px !important; margin-bottom: 20px !important; }
.agen-social ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: .5rem !important; }
.agen-social ul li { margin-bottom: 0 !important; }
.agen-social ul li a {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 14px !important;
}
.agen-social ul li a:hover { background: rgba(255,255,255,0.1) !important; }
.agen-social ul li img { width: 40px !important; height: 40px !important; border-radius: 10px !important; object-fit: cover !important; }
.agen-social .agen-info { flex: 1 !important; margin-left: 10px !important; display: flex !important; flex-direction: column !important; }
.agen-social .agen-info span { color: #fff !important; font-weight: 500 !important; font-size: 14px !important; }
.agen-social .agen-info small { color: #ffffff !important; font-size: 12px !important; }
.agen-close-btn {
    display: block !important;
    margin: 20px auto 0 !important;
    padding: 8px 16px !important;
    border: 2px solid #0022ff !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    color: #fff !important;
    background: transparent !important;
    cursor: pointer !important;
}
.agen-close-btn:hover { background: rgba(255,255,255,0.1) !important; }

/* ---- w3-cell helper (dari sumber) ---- */
img.w3-cell { max-width: 65% !important; margin: 0px 150px !important; }
@media (max-width: 768px) {
    img.w3-cell { max-width: 100% !important; margin: 0px !important; }
}

/* ==========================================================================
 * MOBILE-ONLY (body.is-chaosapi) — desktop tidak tersentuh.
 * - Tombol Login merah, tombol Telegram biru + tombol APK di head mobile.
 * - Halaman panduan /apk.
 * ========================================================================== */
body.is-chaosapi .app-header__auth .btn--accent,
body.is-chaosapi .home__teaser .btn--accent,
body.is-chaosapi .app-drawer__extra .btn--accent {
    color: #ffffff !important;
    background: linear-gradient(to bottom, #e0231a 0%, #a90a04 100%) !important;
    border-color: #7a0803 !important;
    border-bottom: 3px solid #7a0803 !important;
}
body.is-chaosapi .agen-tele-btn {
    background-color: #0088cc !important;
    background-image: none !important;
    border: 1px solid #0088cc !important;
    border-bottom: 3px solid #006699 !important;
    color: #fff !important;
    font-size: .75rem !important;
    padding: 0 .6rem !important;
    white-space: nowrap !important;
}
body.is-chaosapi .agen-apk-btn {
    background: linear-gradient(to bottom, #0ca18a 0%, #0a8976 100%) !important;
    border: 1px solid #0a8976 !important;
    border-bottom: 3px solid #067061 !important;
    color: #fff !important;
    padding: 0 .55rem !important;
    border-radius: 12px !important;
}
body.is-chaosapi .agen-apk-btn i {
    margin: 0 !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
}
body.is-chaosapi .app-header__auth .app-button {
    font-size: .75rem !important;
}
body.is-chaosapi .app-drawer__extra .agen-tele-btn {
    grid-column: span 2 !important;
    font-size: .875rem !important;
    padding: .5rem 1rem !important;
}
.apk-guide__body { padding: 1rem !important; display: grid !important; gap: .75rem !important; }
.apk-guide__body h4 { margin: 0 !important; }
.apk-guide__body p { margin: 0 !important; font-size: .8rem !important; }
.apk-guide__steps { margin: 0 !important; padding-left: 1.25rem !important; display: grid !important; gap: .5rem !important; font-size: .8rem !important; }
.apk-guide__cta { display: grid !important; gap: .5rem !important; margin-top: .25rem !important; }
.apk-guide__note { font-size: .75rem !important; opacity: .75 !important; }

/* ==========================================================================
 * GOLD/OREN-KUNING → BIRU (sweep hardcoded emas di inline partials).
 * Token --color-brand* di :root atas sudah biru; blok ini menimpa nilai
 * hardcoded (#F5B800/dfbb06/FFF3A3/FFD84D/gold) yang tidak pakai var().
 * ========================================================================== */
body .arcade-img-fallback {
    background: linear-gradient(180deg,#9db9ff 0%,#004eff 45%,#002bff 100%) !important;
    color: #fff !important;
}
body .rtp-marquee { border-color: #004eff !important; color: #9db9ff !important; box-shadow: inset 0 0 18px rgba(0,0,0,.6) !important; }
body .rtp-actions a,
body .rtp-card .rtp-play a,
body .wd-search button,
body .wd-more {
    background: linear-gradient(180deg,#9db9ff 0%,#004eff 45%,#002bff 100%) !important;
    color: #fff !important;
    border-color: #1100ff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
}
body .rtp-prov a.active { border-color: #004eff !important; color: #9db9ff !important; box-shadow: 0 0 14px rgba(0,78,255,.45) !important; }
body .rtp-prov .rtp-badge,
body .rtp-card .rtp-jam { background: #004eff !important; color: #fff !important; }
body .rtp-title {
    background: linear-gradient(180deg,#9db9ff,#004eff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 10px rgba(0,78,255,.35)) !important;
}
body .rtp-card:hover { border-color: #004eff !important; }
body .rtp-card .rtp-pola li:first-child { color: #7aa5ff !important; }
body .rtp-bar i { background: linear-gradient(90deg,#002bff,#004eff) !important; }
body .lc-back, body .cindy-launcher { border-color: #004eff !important; color: #9db9ff !important; }
body .cindy-launcher { box-shadow: 0 0 12px rgba(0,78,255,.5) !important; }
body .lc-avatar img, body .cindy-header-avatar img { border-color: #004eff !important; }
body .lc-role, body .lc-sender, body .lc-direct a,
body .cindy-role, body .cindy-sender { color: #7aa5ff !important; }
body .lc-full-chat, body .cindy-panel, body .cindy-header { border-color: #004eff !important; }
body .lc-bubble.me, body .cindy-message.me { border-color: #004eff !important; background: #0a1a4a !important; }
body .lc-chip, body .cindy-chip { border-color: #004eff !important; color: #9db9ff !important; }
body .lc-chip:hover, body .cindy-chip:hover { background: #004eff !important; color: #fff !important; }
body .lc-form input:focus, body .cindy-form input:focus { border-color: #004eff !important; }
body .lc-btn, body .lc-form button {
    background: linear-gradient(to bottom,#004eff 20%,#002bff 80%) !important;
    color: #fff !important;
    border-color: #1100ff !important;
}
body .lc-btn--ghost { background: transparent !important; color: #9db9ff !important; border-color: #004eff !important; }
body .wd-search input:focus { border-color: #004eff !important; }
body .wd-amount, body .wd-amount-big, body .wd-back { color: #7aa5ff !important; }
body .wd-pagi .active .page-link { background: #004eff !important; color: #fff !important; }
body .sp-form, body .sp-pay { --sp-gold: #2f7bff !important; }
body .sp-pay__badge--va { background: linear-gradient(135deg,#004eff,#002bff) !important; color: #fff !important; }
body .pred-row b { color: #7aa5ff !important; }