/* ===================================
   STYLING TOMBOL LOGIN, REGISTER, DAN PROMOTION
   =================================== */

/* Tombol Login - Gradient emas dengan efek hover animasi ripple */
#btn-login {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    border-color: #DAA520 !important;
    color: #000000 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efek ripple/gelombang saat hover pada tombol login */
#btn-login::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

/* State hover tombol login - balik gradient dan naikkan posisi */
#btn-login:hover {
    background: linear-gradient(135deg, #FDB931 0%, #FFD700 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Ekspansi efek ripple saat hover */
#btn-login:hover::before {
    width: 300px !important;
    height: 300px !important;
}

/* Tombol Register - Styling identik dengan login */
#btn-register {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    border-color: #DAA520 !important;
    color: #000000 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efek ripple tombol register */
#btn-register::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

/* State hover tombol register */
#btn-register:hover {
    background: linear-gradient(135deg, #FDB931 0%, #FFD700 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Ekspansi ripple tombol register saat hover */
#btn-register:hover::before {
    width: 300px !important;
    height: 300px !important;
}

/* Tombol Promotion - Gradient merah dengan efek serupa */
#btn-promotion {
    background: linear-gradient(135deg, #FF3333 0%, #FF0000 100%) !important;
    border-color: #CC0000 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efek ripple tombol promotion */
#btn-promotion::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

/* State hover tombol promotion */
#btn-promotion:hover {
    background: linear-gradient(135deg, #FF0000 0%, #FF3333 100%) !important;
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Ekspansi ripple tombol promotion */
#btn-promotion:hover::before {
    width: 300px !important;
    height: 300px !important;
}


/* ===================================
   NAVIGATION BAR KATEGORI (DESKTOP)
   =================================== */

/* Container navbar kategori desktop - flexbox center alignment */
#category-navbar-desktop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Sembunyikan gambar default navbar desktop */
#category-navbar-desktop img {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important; 
}

/* Container item individual navbar desktop */
#category-navbar-desktop > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 8px 10px !important;
    min-width: auto !important;
}

/* Link navbar desktop - layout vertikal dengan icon dan teks */
#category-navbar-desktop a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    position: relative !important;
    gap: 3px !important;
}

/* Icon HOME - navbar desktop */
#category-navbar-desktop a[href="/"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763369615/home-v2_wmxud8.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon SLOT - navbar desktop */
#category-navbar-desktop a[href="/game?category=101"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763369616/slot-v2_iaf4yy.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon CASINO - navbar desktop */
#category-navbar-desktop a[href="/game?category=102"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763369615/casino-v2_e3yak3.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon SPORT - navbar desktop */
#category-navbar-desktop a[href="/sport"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763360851/sport_pmu3tw.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon TOGEL - navbar desktop */
#category-navbar-desktop a[href="/togel"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763360852/togel_vrjwyw.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon TABLE GAMES - navbar desktop */
#category-navbar-desktop a[href="/game?category=103%2C104%2C105%2C106%2C107"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763370020/table_idqo8c.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon FISHING - navbar desktop */
#category-navbar-desktop a[href="/game?category=201"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763360851/fish_duxsqi.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon COCKFIGHT - navbar desktop */
#category-navbar-desktop a[href="/cockfight"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763360851/ayam_jqcayy.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon ARCADE - navbar desktop */
#category-navbar-desktop a[href="/game?category=151%2C900"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375220/arcade_teacrj.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon PROMOTION - navbar desktop */
#category-navbar-desktop a[href="/promotion"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375209/promosi_whleey.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Icon MEGAGACOR - navbar desktop (multiple selector untuk berbagai URL) */
#category-navbar-desktop a[href="/promotion/detail/m-13/ggsoft-games"]::before,
#category-navbar-desktop a[href*="/promotion/detail/m-"]::before,
#category-navbar-desktop a[href*="ggsoft-games"]::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: url('https://res.cloudinary.com/db7bbtvbn/image/upload/v1763361269/mega-gacor-icon_nsekjx.png') no-repeat center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
}

/* Styling teks label navbar desktop - emas bold uppercase */
#category-navbar-desktop div[style*="font-size:0.65em"],
#category-navbar-desktop div[style*="font-size"],
#category-navbar-desktop a > div {
    text-align: center !important;
    margin-top: 0 !important;
    line-height: 1.1 !important;
    font-size: 0.85em !important;
    font-weight: 700 !important;
    color: #FFD700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
}

/* Transisi smooth untuk icon navbar desktop */
#category-navbar-desktop a::before {
    transition: all 0.3s ease !important;
}

/* Efek hover icon navbar desktop - scale up dan glow */
#category-navbar-desktop a:hover::before {
    transform: scale(1.12) !important;
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) !important;
}

/* Efek active/klik icon navbar desktop - scale down */
#category-navbar-desktop a:active::before {
    transform: scale(0.95) !important;
}

/* Responsive navbar desktop - layar sedang (≤1400px) */
@media (max-width: 1400px) {
    /* Kurangi padding container */
    #category-navbar-desktop > div {
        padding: 6px 8px !important;
    }
    
    /* Perkecil semua icon menjadi 36px */
    #category-navbar-desktop a[href="/"]::before,
    #category-navbar-desktop a[href="/game?category=101"]::before,
    #category-navbar-desktop a[href="/game?category=102"]::before,
    #category-navbar-desktop a[href="/sport"]::before,
    #category-navbar-desktop a[href="/togel"]::before,
    #category-navbar-desktop a[href="/game?category=103%2C104%2C105%2C106%2C107"]::before,
    #category-navbar-desktop a[href="/game?category=201"]::before,
    #category-navbar-desktop a[href="/cockfight"]::before,
    #category-navbar-desktop a[href="/game?category=151%2C900"]::before,
    #category-navbar-desktop a[href="/promotion"]::before,
    #category-navbar-desktop a[href="/promotion/detail/m-13/ggsoft-games"]::before,
    #category-navbar-desktop a[href*="/promotion/detail/m-"]::before {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* Perkecil ukuran font label */
    #category-navbar-desktop div[style*="font-size:0.65em"],
    #category-navbar-desktop div[style*="font-size"],
    #category-navbar-desktop a > div {
        font-size: 0.75em !important;
    }
}

/* Responsive navbar desktop - layar kecil (≤1200px) */
@media (max-width: 1200px) {
    /* Kurangi gap antar item */
    #category-navbar-desktop {
        gap: 4px !important;
    }
    
    /* Kurangi padding lebih lanjut */
    #category-navbar-desktop > div {
        padding: 5px 6px !important;
    }
}


/* ===================================
   MENUBAR MOBILE (BOTTOM NAVIGATION)
   =================================== */

/* Container menubar - gradient hitam dengan border emas atas */
.menubar {
    background: linear-gradient(180deg, #0b0907 0%, #0b0907 100%) !important;
    border-top: 2px solid #FFD700 !important;
    box-shadow: 0 -2px 15px rgba(255, 215, 0, 0.2) !important;
    padding: 6px 0 4px 0 !important;
}

/* Sembunyikan gambar default menubar */
.menubar img {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Container flex untuk setiap item menubar */
.menubar .flex-grow-1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 2px !important;
    gap: 2px !important;
}

/* Link menubar - layout vertikal dengan icon dan label */
.menubar a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
    color: #FFD700 !important;
    font-size: 0.7em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 2px 4px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Efek active/tap pada link menubar */
.menubar a:active {
    background: rgba(255, 215, 0, 0.1) !important;
    transform: scale(0.95) !important;
}

/* Base styling untuk icon menubar menggunakan ::before pseudo-element */
.menubar a::before {
    content: '' !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 2px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)) !important;
}

/* Efek hover/active pada icon menubar */
.menubar a:hover::before,
.menubar a:active::before {
    transform: scale(1.1) !important;
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)) !important;
}

/* Icon HOME - menubar */
.menubar a[href="/"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763369615/home-v2_wmxud8.png") !important;
}

/* Icon LOGIN - menubar */
.menubar a[href="/login"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375199/login_vyyu88.png") !important;
}

/* Icon REGISTER - menubar */
.menubar a[href="/register"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375205/Document_nd7maa.png") !important;
}

/* Icon PROMOTION - menubar */
.menubar a[href="/promotion"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375209/promosi_whleey.png") !important;
}

/* Icon DEPOSIT - menubar */
.menubar a[href="/deposit"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763529191/deposit_c1k46l.png") !important;
}

/* Icon WITHDRAW - menubar */
.menubar a[href="/withdraw"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763529185/withdraw_tshekh.png") !important;
}

/* Icon LIVECHAT - menubar (untuk link lc.chat) */
.menubar a[href="https://direct.lc.chat/19015913/"]::before,
.menubar a[href*="lc.chat"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763529710/history-dpwd_x0arse.png") !important;
}

/* Styling label teks menubar */
.menubar div[bis_skin_checked][style*="font-size"] {
    line-height: 1.1 !important;
    margin-top: 0 !important;
}


/* ===================================
   TOGEL CARDS (CAROUSEL OWL STAGE)
   =================================== */

/* Card container togel - gradient hitam dengan border emas */
.owl-stage-outer .card {
    background: linear-gradient(180deg, #2a2a2a, #000000) !important; 
    border: 3px solid #FFD700 !important; 
    border-radius: 16px !important;
    width: 100px !important;
    overflow: hidden !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important; 
    position: relative !important;
}

/* Efek shine/sweep pada card togel */
.owl-stage-outer .card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent) !important;
    transition: left 0.5s !important;
}

/* Animasi shine saat hover card togel */
.owl-stage-outer .card:hover::after {
    left: 100% !important;
}

/* Body card togel - background transparan dengan teks emas */
.owl-stage-outer .card-body {
    background: transparent !important;
    color: #FFD700 !important;
}

/* Header card togel (h2) - gradient gelap dengan teks emas */
.owl-stage-outer .card h2 {
    background: linear-gradient(180deg, #3a3a3a, #111) !important; 
    color: #FFD700 !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.5) !important;
}

/* Link dalam header card togel */
.owl-stage-outer .card h2 a {
    color: #FFD700 !important;
}

/* Teks uppercase dalam card togel */
.owl-stage-outer .card div[style*="text-transform:uppercase"] {
    color: #FFD700 !important;
    font-weight: 700 !important;
}

/* Timer countdown togel */
.owl-stage-outer .togel-countdown-timer {
    color: #FFD700 !important;
    font-weight: 600 !important;
}

/* Efek hover card togel - scale up dengan shadow glow */
.owl-stage-outer .card:hover {
    transform: scale(1.05) !important;
    transition: 0.25s ease !important;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.3) !important;
}


/* ===================================
   CATEGORY NAVBAR MOBILE (HORIZONTAL SCROLL)
   =================================== */

/* Container navbar kategori mobile dengan scroll horizontal */
#category-navbar {
    background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%) !important;
    padding: 8px 4px !important;
    border-bottom: 2px solid #FFD700 !important;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.15) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #FFD700 #1a1a1a !important;
}

/* Custom scrollbar horizontal (webkit) */
#category-navbar::-webkit-scrollbar {
    height: 4px !important;
}

/* Track scrollbar */
#category-navbar::-webkit-scrollbar-track {
    background: #1a1a1a !important;
    border-radius: 2px !important;
}

/* Thumb scrollbar - gradient emas */
#category-navbar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #FFD700, #FDB931) !important;
    border-radius: 2px !important;
}

/* Thumb scrollbar saat hover */
#category-navbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #FDB931, #FFD700) !important;
}

/* Sembunyikan gambar default navbar mobile */
#category-navbar img {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Container item navbar mobile - no shrink untuk scroll horizontal */
#category-navbar .item {
    flex: 0 0 auto !important;
    padding: 0 4px !important;
}

/* Link navbar mobile kategori */
#category-navbar .item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-size: 0.65em !important;
    font-weight: 700 !important;
    color: #FFD700 !important;
    gap: 3px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    min-width: 40px !important;
    letter-spacing: 0.2px !important;
}

/* Efek active/tap pada link navbar mobile */
#category-navbar .item a:active {
    background: rgba(255, 215, 0, 0.1) !important;
    transform: scale(0.95) !important;
}

/* Icon navbar mobile menggunakan ::before */
#category-navbar .item a::before {
    content: "" !important;
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    margin-bottom: 3px !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)) !important;
}

/* Efek hover/active pada icon navbar mobile */
#category-navbar .item a:hover::before,
#category-navbar .item a:active::before {
    transform: scale(1.1) !important;
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) !important;
}

/* Icon HOME - navbar mobile */
#category-navbar a[href="/"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763369615/home-v2_wmxud8.png") !important;
}

/* Icon SLOT - navbar mobile */
#category-navbar a[href="/game?category=101"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763369616/slot-v2_iaf4yy.png") !important;
}

/* Icon CASINO - navbar mobile */
#category-navbar a[href="/game?category=102"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763369615/casino-v2_e3yak3.png") !important;
}

/* Icon SPORT - navbar mobile */
#category-navbar a[href="/sport"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763360851/sport_pmu3tw.png") !important;
}

/* Icon TOGEL - navbar mobile */
#category-navbar a[href="/togel"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763360852/togel_vrjwyw.png") !important;
}

/* Icon TABLE GAMES - navbar mobile */
#category-navbar a[href="/game?category=103%2C104%2C105%2C106%2C107"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763370020/table_idqo8c.png") !important;
}

/* Icon FISHING - navbar mobile */
#category-navbar a[href="/game?category=201"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763360851/fish_duxsqi.png") !important;
}

/* Icon COCKFIGHT - navbar mobile */
#category-navbar a[href="/cockfight"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763360851/ayam_jqcayy.png") !important;
}

/* Icon ARCADE - navbar mobile */
#category-navbar a[href="/game?category=151%2C900"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375220/arcade_teacrj.png") !important;
}

/* Icon PROMOTION - navbar mobile */
#category-navbar a[href="/promotion"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375209/promosi_whleey.png") !important;
}

/* Icon MEGAGACOR - navbar mobile */
#category-navbar a[href="/promotion/detail/m-13/ggsoft-games"]::before,
#category-navbar a[href*="/promotion/detail/m-"]::before,
#category-navbar a[href*="ggsoft-games"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763361269/mega-gacor-icon_nsekjx.png") !important;
}

/* Label teks navbar mobile */
#category-navbar .item div[style*="font-size"] {
    margin-top: 0 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}


/* ===================================
   NAVBAR BOTTOM (ALTERNATIVE MOBILE NAV)
   =================================== */

/* Container navbar bottom - mirip menubar */
.navbar {
    background: linear-gradient(180deg, #070705 0%, #070705 100%) !important;
    border-top: 2px solid #FFD700 !important;
    box-shadow: 0 -2px 15px rgba(255, 215, 0, 0.2) !important;
    padding: 6px 0 4px 0 !important;
}

/* Sembunyikan gambar default navbar bottom */
.navbar .flex-grow-1 img {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Link navbar bottom */
.navbar .flex-grow-1 a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    text-decoration: none !important;
    color: #FFD700 !important;
    text-transform: uppercase !important;
    gap: 2px !important;
    font-size: 0.7em !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    padding: 4px 2px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Efek active navbar bottom */
.navbar .flex-grow-1 a:active {
    background: rgba(255, 215, 0, 0.1) !important;
    transform: scale(0.95) !important;
}

/* Icon navbar bottom */
.navbar .flex-grow-1 a::before {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    margin-bottom: 2px !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)) !important;
}

/* Efek hover/active icon navbar bottom */
.navbar .flex-grow-1 a:hover::before,
.navbar .flex-grow-1 a:active::before {
    transform: scale(1.1) !important;
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) !important;
}

/* Icon HOME - navbar bottom */
.navbar .flex-grow-1 a[href="/"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763369615/home-v2_wmxud8.png") !important;
}

/* Icon LOGIN - navbar bottom */
.navbar .flex-grow-1 a[href="/login"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375199/login_vyyu88.png") !important;
}

/* Icon REGISTER - navbar bottom */
.navbar .flex-grow-1 a[href="/register"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375205/Document_nd7maa.png") !important;
}

/* Icon PROMOTION - navbar bottom */
.navbar .flex-grow-1 a[href="/promotion"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375209/promosi_whleey.png") !important;
}

/* Icon LIVECHAT - navbar bottom */
.navbar .flex-grow-1 a[href="https://direct.lc.chat/19015913/"]::before,
.navbar .flex-grow-1 a[href*="lc.chat"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1764356646/livechat-icon_n2tqjp.png") !important;
}


/* ===================================
   RESPONSIVE MOBILE - EXTRA SMALL SCREENS
   =================================== */

/* Optimasi untuk layar kecil (≤480px) */
@media (max-width: 480px) {
    /* Perkecil icon menubar dan navbar bottom */
    .menubar a::before,
    .navbar .flex-grow-1 a::before {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Perkecil font menubar dan navbar bottom */
    .menubar a,
    .navbar .flex-grow-1 a {
        font-size: 0.65em !important;
    }
    
    /* Perkecil icon navbar kategori mobile */
    #category-navbar .item a::before {
        width: 34px !important;
        height: 34px !important;
    }
    
    /* Perkecil font dan width navbar kategori mobile */
    #category-navbar .item a {
        font-size: 0.6em !important;
        min-width: 55px !important;
        padding: 5px 6px !important;
    }
}

/* Optimasi untuk layar sangat kecil (≤340px) */
@media (max-width: 360px) {
    /* Perkecil lebih lanjut icon menubar dan navbar bottom */
    .menubar a::before,
    .navbar .flex-grow-1 a::before {
        width: 26px !important;
        height: 26px !important;
    }
    
    /* Perkecil lebih lanjut font menubar dan navbar bottom */
    .menubar a,
    .navbar .flex-grow-1 a {
        font-size: 0.6em !important;
    }
    
    /* Perkecil lebih lanjut icon navbar kategori mobile */
    #category-navbar .item a::before {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Perkecil lebih lanjut font dan width navbar kategori mobile */
    #category-navbar .item a {
        font-size: 0.58em !important;
        min-width: 50px !important;
        padding: 4px 5px !important;
    }
}


/* ===================================
   FORM LOGIN & REGISTER
   =================================== */

/* Card container form login/register - dark theme dengan subtle border */
form[action="/login"] .card,
form[action="/register"] .card {
    background: #1a1a1a !important;
    border: 2px solid #000 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255, 215, 0, 0.05) !important;
}

/* Card tambahan untuk quick login dan login variations */
#row-quicklogin.card,
#row-quicklogin .card,
#row-loginnemu .card,
#row-loginnemu.card,
form[action="/login"] .card,
form[action="/register"] .card {
    background: #201e21 !important;
    border: 1px solid #000 !important;
    border-radius: 12px !important;
}

/* Label form - teks emas dengan shadow */
form[action="/login"] label,
form[action="/register"] label {
    color: #FFD700 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(255, 215, 0, 0.3) !important;
}

/* Input fields form - dark background dengan border abu */
form[action="/login"] .form-control,
form[action="/register"] .form-control {
    background: #2b2b2b !important;
    border: 1px solid #444 !important;
    color: white !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Input fields saat focus - highlight emas */
form[action="/login"] .form-control:focus,
form[action="/register"] .form-control:focus {
    background: #333 !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4), 0 0 0 3px rgba(255, 215, 0, 0.1) !important;
}

/* Tombol submit form - gradient emas dengan ripple effect */
form[action="/login"] .btn-primary,
form[action="/login"] .btn-secondary,
form[action="/register"] .btn-primary,
form[action="/register"] .btn-secondary {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    border-color: #DAA520 !important;
    color: #000 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.35) !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ripple effect tombol form */
form[action="/login"] .btn-primary::before,
form[action="/login"] .btn-secondary::before,
form[action="/register"] .btn-primary::before,
form[action="/register"] .btn-secondary::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

/* Hover state tombol form */
form[action="/login"] .btn-primary:hover,
form[action="/login"] .btn-secondary:hover,
form[action="/register"] .btn-primary:hover,
form[action="/register"] .btn-secondary:hover {
    background: linear-gradient(135deg, #FFC107 0%, #FFEB3B 100%) !important;
    box-shadow: 0 5px 18px rgba(255, 215, 0, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* Ekspansi ripple saat hover tombol form */
form[action="/login"] .btn-primary:hover::before,
form[action="/login"] .btn-secondary:hover::before,
form[action="/register"] .btn-primary:hover::before,
form[action="/register"] .btn-secondary:hover::before {
    width: 300px !important;
    height: 300px !important;
}


/* ===================================
   SIDEBAR NAVIGATION
   =================================== */

/* Tombol toggle sidebar - gradient emas */
#sidebarCollapse {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    border: 2px solid #DAA520 !important;
    color: #000 !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35) !important;
    transition: all 0.3s ease !important;
}

/* Icon dalam tombol toggle sidebar */
#sidebarCollapse i {
    color: #000 !important;
    font-weight: 900 !important;
}

/* Hover state tombol toggle sidebar */
#sidebarCollapse:hover {
    background: linear-gradient(135deg, #FFC107 0%, #FFEB3B 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.55) !important;
}

/* Container sidebar - gradient dark dengan border emas */
#sidebar {
    background: linear-gradient(180deg, #070705 0%, #070705 100%) !important;
    border-right: 3px solid #FFD700 !important;
    opacity: 0.95 !important;
    box-shadow: 2px 0 15px rgba(255, 215, 0, 0.2) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateZ(0) !important;
    will-change: transform, opacity !important;
    scroll-behavior: smooth !important;
}

/* Hide scrollbar sidebar (webkit) */
#sidebar::-webkit-scrollbar {
    display: none !important;
}

/* State active sidebar */
#sidebar.active {
    transform: translateX(0) !important;
    opacity: 0.95 !important;
}

/* Optimasi rendering sidebar */
#sidebar * {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Tombol close/dismiss sidebar */
#dismiss {
    background: linear-gradient(135deg, #FFD700, #FFB900) !important;
    color: #000 !important;
    border: 1px solid #DAA520 !important;
    box-shadow: 0 0 10px rgba(255,215,0,0.5) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover state tombol dismiss */
#dismiss:hover {
    background: linear-gradient(135deg, #FFCC33, #FFE066) !important;
    transform: scale(1.05);
}

/* Link navigasi sidebar - teks emas dengan border kiri */
#sidebar .nav-link {
    color: #FFD700 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding-left: 18px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-left: 3px solid transparent !important;
}

/* Hover state link sidebar */
#sidebar .nav-link:hover {
    background: rgba(255, 215, 0, 0.12) !important;
    color: #FFF !important;
    border-left-color: #FFD700 !important;
    padding-left: 22px !important;
}

/* Sembunyikan icon font awesome default sidebar */
#sidebar .nav-link i {
    opacity: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Icon custom sidebar menggunakan ::before */
#sidebar .nav-link::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)) !important;
}

/* Hover effect icon sidebar */
#sidebar .nav-link:hover::before {
    transform: scale(1.1) !important;
    filter: drop-shadow(0 3px 8px rgba(255, 215, 0, 0.6)) !important;
}

/* Icon LOGIN - sidebar */
#sidebar a[href="/login"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375199/login_vyyu88.png");
}

/* Icon REGISTER - sidebar */
#sidebar a[href="/register"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375205/Document_nd7maa.png");
}

/* Icon DEPOSIT - sidebar */
#sidebar a[href="/deposit"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763529191/deposit_c1k46l.png") !important;
}

/* Icon WITHDRAW - sidebar */
#sidebar a[href="/withdraw"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763529185/withdraw_tshekh.png") !important;
}

/* Icon CREDIT HISTORY - sidebar */
#sidebar a[href="/credit-history"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763529710/history-dpwd_x0arse.png") !important;
}

/* Icon DRAW HISTORY - sidebar */
#sidebar a[href="/draw-history"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763360852/togel_vrjwyw.png");
}

/* Icon INVOICE TOGEL - sidebar */
#sidebar a[href="/invoice-togel"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763530023/invoice_tnuk4d.png") !important;
}

/* Icon PANDUAN BERMAIN - sidebar */
#sidebar a[href="/panduan-bermain"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763530269/info_fsg682.png") !important;
}

/* Icon RTP - sidebar */
#sidebar a[href="/rtp"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763369616/slot-v2_iaf4yy.png");
}

/* Icon MY REFERRAL - sidebar */
#sidebar a[href="/my-referral"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763531207/refferalbosku_lulzxl.png") !important;
}

/* Icon PROMOTION - sidebar */
#sidebar a[href="/promotion"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763375209/promosi_whleey.png");
}

/* Icon LOGOUT - sidebar */
#sidebar a[href="/logout"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763530857/logout_smdoul.png") !important;
}

/* Icon LIVECHAT - sidebar */
#sidebar a[href*="lc.chat"]::before {
    background-image: url("https://res.cloudinary.com/db7bbtvbn/image/upload/v1763529710/history-dpwd_x0arse.png") !important;
}

/* Spacing antar item sidebar */
#sidebar .nav-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Staggered animation delay untuk setiap nav-item (1-10) */
#sidebar .nav-item:nth-child(1) .nav-link { transition-delay: 0.05s !important; }
#sidebar .nav-item:nth-child(2) .nav-link { transition-delay: 0.08s !important; }
#sidebar .nav-item:nth-child(3) .nav-link { transition-delay: 0.11s !important; }
#sidebar .nav-item:nth-child(4) .nav-link { transition-delay: 0.14s !important; }
#sidebar .nav-item:nth-child(5) .nav-link { transition-delay: 0.17s !important; }
#sidebar .nav-item:nth-child(6) .nav-link { transition-delay: 0.20s !important; }
#sidebar .nav-item:nth-child(7) .nav-link { transition-delay: 0.23s !important; }
#sidebar .nav-item:nth-child(8) .nav-link { transition-delay: 0.26s !important; }
#sidebar .nav-item:nth-child(9) .nav-link { transition-delay: 0.29s !important; }
#sidebar .nav-item:nth-child(10) .nav-link { transition-delay: 0.32s !important; }

/* Overlay backdrop saat sidebar terbuka */
body::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    z-index: 999 !important;
    pointer-events: none !important;
}

/* Tampilkan overlay saat sidebar terbuka */
body.sidebar-open::after {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Disable scroll body saat sidebar terbuka */
body.sidebar-open {
    overflow: hidden !important;
}

/* Responsive sidebar untuk mobile */
@media (max-width: 768px) {
    /* Sembunyikan sidebar di luar layar saat tidak active */
    #sidebar:not(.active) {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
    }
    
    /* Perkecil icon sidebar di mobile */
    #sidebar .nav-link::before {
        width: 24px !important;
        height: 24px !important;
        margin-right: 12px !important;
    }
}


/* ===================================
   GENERIC CARD STYLING
   =================================== */

/* Card umum dengan shadow - gradient dark premium */
.card.p-3.my-3.shadow {
    background: linear-gradient(145deg, #1f1f1f, #0f0f0f) !important;
    border: 2px solid #000 !important;
    border-radius: 14px !important;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.15), inset 0 1px 0 rgba(255, 215, 0, 0.08) !important;
    padding: 25px !important;
}

/* Heading h1 dalam card - teks emas dengan glow */
.card.p-3.my-3.shadow h1 {
    color: #FFD700 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.45), 0 3px 10px rgba(255, 215, 0, 0.2) !important;
    letter-spacing: 1px !important;
}

/* Label form dalam card - teks emas bold */
.card label.form-label {
    color: #FFD700 !important;
    font-weight: 600 !important;
    font-size: 0.95em !important;
}

/* Input form dalam card - dark theme */
.card .form-control {
    background: #2b2b2b !important;
    border: 1px solid #444 !important;
    color: #FFF !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Input form focus dalam card */
.card .form-control:focus {
    background: #333 !important;
    border-color: #FFD700 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.35), 0 0 0 3px rgba(255, 215, 0, 0.1) !important;
}

/* Pesan error validasi form */
.card .invalid-feedback {
    color: #ff5555 !important;
    font-weight: 600 !important;
}


/* ===================================
   ROW CARDS (GAME CARDS / GRID LAYOUT)
   =================================== */

/* Card dalam row - premium theme dengan efek sweep */
.row .card {
    font-family: 'Saira Condensed', sans-serif !important;
    background: linear-gradient(145deg, #222, #0a0a0a) !important;
    border: 3px solid #FFD700 !important;
    border-radius: 1.2rem !important;
    overflow: hidden !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25), inset 0 1px 0 rgba(255, 215, 0, 0.1) !important;
    transition: .25s ease !important;
    position: relative !important;
}

/* Efek shine diagonal pada card */
.row .card::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.05), transparent) !important;
    transform: rotate(45deg) !important;
    transition: all 0.5s !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Animasi shine saat hover */
.row .card:hover::before {
    opacity: 1 !important;
    top: -60% !important;
    left: -60% !important;
}

/* Efek lift saat hover card */
.row .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.45), 0 8px 25px rgba(255, 215, 0, 0.2) !important;
}

/* Label kategori dalam card */
.row .card .text-center > div[style*="text-transform"] {
    font-size: 0.8em !important;
    text-transform: uppercase !important;
    color: #FFD700 !important;
    margin: .4rem 0 !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 6px rgba(255, 215, 0, 0.4) !important;
}

/* Heading besar (nomor/jackpot) dalam card */
.row .card h2 {
    font-size: 3em !important;
    line-height: 110% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #3a3a3a, #111) !important; 
    color: #FFD700 !important;
    font-weight: 800 !important;
    text-shadow: 0 3px 10px rgba(255, 215, 0, 0.6) !important;
    animation: pulse-gold 2s ease-in-out infinite !important;
}

/* Animasi pulse untuk teks emas */
@keyframes pulse-gold {
    0%, 100% {
        text-shadow: 0 3px 10px rgba(255, 215, 0, 0.6) !important;
    }
    50% {
        text-shadow: 0 3px 15px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 215, 0, 0.4) !important;
    }
}

/* Link dalam heading card */
.row .card h2 a {
    color: #FFD700 !important;
    text-decoration: none !important;
}

/* Timer countdown dalam card */
.row .card span.togel-countdown-timer {
    font-size: .8em !important;
    display: block !important;
    margin: .4rem 0 .6rem 0 !important;
    font-weight: 600 !important;
    background: #1a1a1a !important;
    color: #FFD700 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
}

/* Timer countdown saat status OPEN - hijau glow */
.row .card span.togel-countdown-timer.open {
    color: #00ff88 !important;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6) !important;
    animation: glow-green 1.5s ease-in-out infinite !important;
}

/* Animasi glow hijau untuk status OPEN */
@keyframes glow-green {
    0%, 100% {
        text-shadow: 0 0 8px rgba(0, 255, 136, 0.6) !important;
    }
    50% {
        text-shadow: 0 0 15px rgba(0, 255, 136, 0.9), 0 0 25px rgba(0, 255, 136, 0.4) !important;
    }
}


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

/* Smooth scroll behavior untuk seluruh halaman */
html {
    scroll-behavior: smooth !important;
}

/* Text selection - background emas dengan teks hitam */
::selection {
    background: #FFD700 !important;
    color: #000 !important;
}

/* Text selection untuk Firefox */
::-moz-selection {
    background: #FFD700 !important;
    color: #000 !important;
}