/* ==========================================================
   BAJAI89 PURPLE NEON
   External CSS Override
   Pasang SETELAH semua CSS template utama
   ========================================================== */

:root{
    --b89-purple:#7c3aed;
    --b89-purple-light:#a855f7;
    --b89-purple-bright:#c084fc;
    --b89-purple-dark:#3b0764;
    --b89-purple-deep:#160021;
    --b89-black:#09000f;
    --b89-card:#1d0b2d;
    --b89-white:#ffffff;
    --b89-muted:#d8c7e8;
    --b89-border:rgba(192,132,252,.45);
    --b89-glow:rgba(168,85,247,.42);
}


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

html,
body{
    background:
        radial-gradient(circle at top left,
        rgba(126,34,206,.23) 0%,
        transparent 35%),
        radial-gradient(circle at bottom right,
        rgba(168,85,247,.18) 0%,
        transparent 35%),
        linear-gradient(
        180deg,
        #12001c 0%,
        #1c082a 48%,
        #09000f 100%
        ) !important;

    color:var(--b89-white) !important;
}


/* cegah bagian putih bawaan template */
main,
.main-content,
.content,
.content-wrapper,
.page-wrapper,
.product-detail,
.product-details,
.product-section{
    background:transparent !important;
}


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

.main-header,
.main-header > div,
header{
    background:
        linear-gradient(
            135deg,
            #12001c,
            #2b0743 50%,
            #170024
        ) !important;

    border-bottom:1px solid var(--b89-border) !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,.45),
        0 0 28px rgba(168,85,247,.16) !important;
}


/* TEXT HEADER */

.main-header *,
header *{
    color:#fff !important;
}


/* garis hamburger */
.main-header .mobile-toggle span{
    border-color:#c084fc !important;
}


/* ==========================================================
   SEARCH BAR
   ========================================================== */

.main-header input,
.main-header .form-control,
.search-bar,
.search-input,
.search-box,
.input-group{
    background:#160523 !important;
    color:#fff !important;
    border-color:#6d28d9 !important;
}


/* placeholder */
.main-header input::placeholder,
.search-input::placeholder{
    color:#bba8ca !important;
    opacity:1;
}


/* dropdown ALL */
.main-header select,
.main-header .dropdown-toggle,
.main-header .dropdown-menu{
    background:#210934 !important;
    color:#fff !important;
    border-color:#7c3aed !important;
}


/* ==========================================================
   TOP LOGIN / DAFTAR NAV
   ========================================================== */

.navbar,
.nav,
.nav-tabs,
.nav-pills{
    background:
        linear-gradient(
            90deg,
            #180324,
            #310850,
            #180324
        ) !important;
}


/* link navigasi */
.navbar a,
.nav a,
.nav-link{
    color:#f5eaff !important;

    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease !important;
}


.navbar a:hover,
.nav a:hover,
.nav-link:hover{
    color:#fff !important;
    background:#7c3aed !important;

    box-shadow:
        inset 0 0 15px rgba(255,255,255,.08),
        0 0 18px rgba(168,85,247,.45) !important;
}


/* ==========================================================
   CARD / PRODUCT AREA
   ========================================================== */

.card,
.product-card,
.product-detail,
.product-details,
.product-shop,
.product-features{
    background:
        linear-gradient(
            145deg,
            rgba(45,13,68,.96),
            rgba(23,4,36,.98)
        ) !important;

    color:#fff !important;

    border:
        1px solid rgba(192,132,252,.30) !important;

    border-radius:16px !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.34),
        0 0 24px rgba(126,34,206,.09) !important;
}


/* ==========================================================
   TEXT
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
    color:#ffffff !important;
}


p,
span,
li,
label{
    color:#e8dbf1;
}


/* jangan sampai bootstrap bikin text jadi hitam */
.text-dark{
    color:#f2e8ff !important;
}


.text-muted{
    color:#baa9c8 !important;
}


.text-success{
    color:#d8b4fe !important;
}


/* ==========================================================
   TITLE ACCENT
   ========================================================== */

h1,
.product-title,
.product-name{
    text-shadow:
        0 0 12px rgba(168,85,247,.30);

    letter-spacing:-.2px;
}


/* ==========================================================
   PRODUCT IMAGE
   ========================================================== */

.product-image,
.product-image img,
.product-img,
.product-img img{
    border-radius:14px !important;

    border:
        1px solid rgba(192,132,252,.38) !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.35),
        0 0 20px rgba(168,85,247,.22) !important;
}


/* ==========================================================
   PRODUCT INFORMATION PANEL
   ========================================================== */

.product-info,
.product-summary,
.product-description,
.product-detail-right{
    background:
        linear-gradient(
            180deg,
            rgba(48,13,73,.92),
            rgba(22,3,34,.96)
        ) !important;

    color:#fff !important;

    border:
        1px solid rgba(192,132,252,.35) !important;

    border-radius:14px !important;

    padding:18px;
}


/* ==========================================================
   BUTTON UNIVERSAL
   ========================================================== */

.btn{
    border-radius:10px !important;

    font-weight:700 !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease !important;
}


.btn:hover{
    transform:translateY(-2px);
}


/* ==========================================================
   PRODUCT LOGIN & DAFTAR
   ========================================================== */

.add-to-cart-btn,
.buy-now-btn,
#add-to-cart-btn,
#buy-now-btn{

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #9333ea,
            #7e22ce
        ) !important;

    color:#fff !important;

    border:
        1px solid #c084fc !important;

    box-shadow:
        0 6px 18px rgba(126,34,206,.30),
        inset 0 1px rgba(255,255,255,.18) !important;

    font-weight:800 !important;
}


.add-to-cart-btn:hover,
.buy-now-btn:hover,
#add-to-cart-btn:hover,
#buy-now-btn:hover{

    background:
        linear-gradient(
            135deg,
            #9333ea,
            #c026d3,
            #7c3aed
        ) !important;

    box-shadow:
        0 0 18px rgba(168,85,247,.70),
        0 0 36px rgba(126,34,206,.32) !important;
}


/* ==========================================================
   QUANTITY
   ========================================================== */

.quantity-input{
    background:#170324 !important;

    border:
        1px solid #6d28d9 !important;

    border-radius:10px !important;
}


.quantity-input input,
.quantity-input button{
    background:#170324 !important;

    color:#fff !important;

    border-color:#4c1d6f !important;
}


.quantity-input button:hover{
    background:#7c3aed !important;
}


/* ==========================================================
   KEYWORD / FEATURES
   ========================================================== */

.features-points{
    background:
        rgba(30,6,45,.68) !important;

    border-radius:12px;

    padding:16px 25px !important;

    border:
        1px solid rgba(192,132,252,.25);
}


.features-points li{
    color:#eadcf5 !important;
}


.features-points li::marker{
    color:#c084fc !important;
}


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

a{
    color:#d8b4fe;
}


a:hover{
    color:#f0abfc;
}


/* ==========================================================
   FOOTER FLOATING MENU
   ========================================================== */

.footer-floating-GIGAGAMING{

    background:
        linear-gradient(
            135deg,
            rgba(27,4,42,.96),
            rgba(65,13,95,.96),
            rgba(27,4,42,.96)
        ) !important;

    border:
        1px solid rgba(192,132,252,.75) !important;

    box-shadow:
        0 0 20px rgba(168,85,247,.30),
        0 0 45px rgba(126,34,206,.18) !important;

    backdrop-filter:blur(14px) !important;

    -webkit-backdrop-filter:blur(14px) !important;
}


/* BUTTON MENU BAWAH */

.footer-btn-GIGAGAMING{

    background:
        linear-gradient(
            135deg,
            #3b0764,
            #6d28d9
        ) !important;

    color:#fff !important;

    border:
        1px solid #c084fc !important;

    border-radius:28px !important;

    font-weight:800 !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.14),
        0 5px 14px rgba(0,0,0,.25) !important;

    text-shadow:
        0 1px 3px rgba(0,0,0,.8) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}


.footer-btn-GIGAGAMING:hover{

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #a855f7,
            #7e22ce
        ) !important;

    color:#fff !important;

    transform:
        translateY(-3px)
        scale(1.01);

    box-shadow:
        0 0 12px #a855f7,
        0 0 30px rgba(168,85,247,.48) !important;
}


/* icon */
.footer-btn-GIGAGAMING img{
    filter:
        drop-shadow(0 0 5px rgba(216,180,254,.75));
}


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

::-webkit-scrollbar{
    width:9px;
}


::-webkit-scrollbar-track{
    background:#100019;
}


::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            #7c3aed,
            #a855f7
        );

    border-radius:20px;
}


::-webkit-scrollbar-thumb:hover{
    background:#c084fc;
}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection{
    background:#7c3aed;
    color:#fff;
}


/* ==========================================================
   POPUP
   ========================================================== */

.popup-overlay{
    background:
        rgba(10,0,16,.72) !important;
}


.popup-container,
.bobarawr{

    background:
        linear-gradient(
            145deg,
            #27053c,
            #100019
        ) !important;

    border-color:#a855f7 !important;

    box-shadow:
        0 0 30px rgba(168,85,247,.50) !important;
}


.popup-buttons a{

    background:
        linear-gradient(
            135deg,
            #6d28d9,
            #a855f7
        ) !important;

    color:#fff !important;

    border-color:#c084fc !important;
}


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

@media(max-width:768px){

    .footer-floating-GIGAGAMING{
        padding:10px !important;
        gap:8px !important;
        border-radius:15px !important;
    }

    .footer-btn-GIGAGAMING{
        font-size:12px !important;
        padding:10px 8px !important;
    }

    .product-info,
    .product-summary,
    .product-description,
    .product-detail-right{
        padding:12px;
    }
}

/* ==========================================================
   BAJAI89 PURPLE FIX
   Rapikan warna teks kanan + tabel informasi
   ========================================================== */


/* ===== FIX TEXT GELAP DI AREA PRODUK ===== */

.product-details,
.product-detail,
.product-info,
.product-summary,
.product-shop,
.product-features{
    color:#f5edff !important;
}

.product-details p,
.product-details span,
.product-details div,
.product-detail p,
.product-detail span,
.product-detail div,
.product-info p,
.product-info span,
.product-summary p,
.product-summary span{
    color:#e9dcf5 !important;
}


/* Judul SLOT MAXWIN */
.product-details h1,
.product-details h2,
.product-details h3,
.product-info h1,
.product-info h2,
.product-info h3,
.product-title{
    color:#ffffff !important;
    text-shadow:
        0 0 10px rgba(192,132,252,.35);
}


/* text bootstrap yang maksa hitam */
.text-dark,
.text-black,
.text-body{
    color:#eee2f7 !important;
}


/* review */
.product-details a,
.product-info a{
    color:#d8b4fe !important;
}


/* VAT */
.product-details .mt-2 span,
.product-info .mt-2 span{
    color:#e2d3ed !important;
}


/* ===== KEYWORD POPULER ===== */

.product-shop .text-success{
    color:#c084fc !important;
    font-weight:700 !important;
}

.features-points li{
    color:#e9dcf5 !important;
}

.features-points li::marker{
    color:#a855f7 !important;
}


/* ==========================================================
   TABLE INFORMASI BAJAI89
   ========================================================== */

/* container table */
table{
    background:#160522 !important;
    color:#f5edff !important;

    border-collapse:separate !important;
    border-spacing:0 !important;

    overflow:hidden;

    border:
        1px solid rgba(192,132,252,.45) !important;

    box-shadow:
        0 0 18px rgba(168,85,247,.18) !important;
}


/* HEADER TABEL - hilangkan warna hijau */
table thead,
table thead tr,
table thead th{
    background:
        linear-gradient(
            135deg,
            #4c1d95,
            #6d28d9,
            #7e22ce
        ) !important;

    color:#ffffff !important;

    border-color:
        rgba(216,180,254,.35) !important;
}


/* kalau header dibuat pakai td */
table tr:first-child td{
    background:
        linear-gradient(
            135deg,
            #4c1d95,
            #6d28d9,
            #7e22ce
        ) !important;

    color:#ffffff !important;
}


/* isi tabel */
table tbody,
table tbody tr,
table tbody td,
table tbody th{
    background:#180625 !important;

    color:#eee2f7 !important;

    border-color:
        rgba(192,132,252,.20) !important;
}


/* sel kiri / label */
table tbody th,
table tbody td:first-child{
    color:#d8b4fe !important;
    font-weight:700 !important;
}


/* sel kanan */
table tbody td:not(:first-child){
    color:#ffffff !important;
}


/* selang-seling biar tabel enak dibaca */
table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) th{
    background:#20092f !important;
}


/* hover */
table tbody tr:hover td,
table tbody tr:hover th{
    background:#2c0b42 !important;
}


/* ==========================================================
   BOX INFORMASI LENGKAP
   Jika template punya wrapper sendiri
   ========================================================== */

.info-table,
.information-table,
.table-responsive{
    background:#160522 !important;

    border-radius:14px !important;

    border:
        1px solid rgba(192,132,252,.45) !important;

    box-shadow:
        0 0 20px rgba(168,85,247,.22) !important;
}


/* ==========================================================
   CARD KANAN
   ========================================================== */

.product-summary,
.product-info,
.product-shop,
.product-features{

    background:
        linear-gradient(
            160deg,
            #200630 0%,
            #160320 100%
        ) !important;

    border:
        1px solid rgba(168,85,247,.48) !important;

    box-shadow:
        inset 0 0 25px rgba(126,34,206,.05),
        0 8px 25px rgba(0,0,0,.20) !important;
}


/* tombol LOGIN / DAFTAR */
#add-to-cart-btn,
#buy-now-btn,
.add-to-cart-btn,
.buy-now-btn{
    background:
        linear-gradient(
            90deg,
            #6d28d9,
            #9333ea
        ) !important;

    border:
        1px solid #c084fc !important;

    color:#fff !important;
}


/* saat hover */
#add-to-cart-btn:hover,
#buy-now-btn:hover,
.add-to-cart-btn:hover,
.buy-now-btn:hover{
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #c026d3
        ) !important;

    box-shadow:
        0 0 15px rgba(168,85,247,.70) !important;
}