/* =========================================================
   LIGHT FIRST THEME (white UI + pink/light-blue accents)
   Dark mode remains available via body.dark-mode
   ========================================================= */

:root{
    --accent-pink: #ff4fa3;
    --accent-blue: #33c7ff;
    --accent-grad: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-blue) 100%);
    --surface: #ffffff;
    --surface-2: #f6f8ff;
    --text: #141826;
    --muted: #667085;
    --border: rgba(20, 24, 38, 0.10);
    --shadow-soft: 0 10px 30px rgba(20, 24, 38, 0.10);
}

/* GLOBAL: Remove ALL yellow/warning colors - replace with pink/blue */
.btn-warning, .bg-warning, .text-warning,
button.btn-warning, a.btn-warning,
[class*="warning"], [style*="yellow"], [style*="#ffc107"], [style*="#ffd700"],
[style*="#ffb80c"], [style*="#f1c40f"], [style*="#ffeb3b"]{
    background: var(--accent-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.bg-warning{ background: var(--accent-grad) !important; }
.text-warning{ color: var(--accent-pink) !important; }

/* Force ALL buttons to use pink/blue - NO YELLOW */
.btn-custom:not(.light):not(.bg-danger),
.leftbar .top button:not(.light),
.custom-btn-li-up:not(.light),
button.btn-custom:not(.light):not(.bg-danger){
    background: var(--accent-grad) !important;
    color: #fff !important;
    border: none !important;
}
.btn-custom.light{
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

.btn-custom:hover::before {
    left: 0% !important;
}

/* LIVE/UPCOMING buttons - visible with pink/blue gradient (NO YELLOW) */
.leftbar .top{
    display: flex !important;
    border-bottom: 1px solid var(--border);
    padding: 8px !important;
    margin-bottom: 10px;
}
.leftbar .top button.btn-custom:not(.light){
    background: var(--accent-grad) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
}
.leftbar .top button.btn-custom.light{
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: none !important;
}
.dark-mode .leftbar .top button.btn-custom.light{
    background: rgba(255,255,255,.08) !important;
    color: #000 !important;
}

/* Hide "Top Matches" link */
.leftbar ul.main li:first-child{
    display: none !important;
}

/* Add spacing to Cricket button (top and bottom) */
.categories{
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* Override .table p span color - NO YELLOW, use pink/blue theme */
/* This fixes the style.scss override that was setting yellow */
.table p span {
    color: var(--accent-pink) !important;
    margin-left: 10px;
}
.dark-mode .table p span {
    color: var(--accent-blue) !important;
}

/* Override any other yellow colors in table elements */
.categories a{
    background: var(--accent-grad) !important;
    color: #fff !important;
    border-bottom-color: transparent !important;
}

div#categories a span{
    color: black !important;
}
.dark-mode  table.table.table-bordered.table-hover.mb-0 {
    color: white;
}
.thead-light tr th {
    color: white !important;
}
.table td, .table th {
    color: inherit !important;
}
.table td span, .table th span {
    color: var(--accent-pink) !important;
}
.dark-mode .table td span, .dark-mode .table th span {
    color: var(--accent-blue) !important;
}

/* Global fix: Any element using var(--primary) for text color should use solid pink */
/* Removed empty rulesets */

/* Specific fix for any remaining yellow in spans or text */
span[style*="yellow"],
span[style*="#ffc107"],
span[style*="#ffd700"],
.table span,
.table p span,
.table td span {
    color: var(--accent-pink) !important;
}
.dark-mode span[style*="yellow"],
.dark-mode span[style*="#ffc107"],
.dark-mode .table span,
.dark-mode .table p span,
.dark-mode .table td span {
    color: var(--accent-blue) !important;
}

/* COMPREHENSIVE: Remove ALL yellow from any button or element */
* {
    --bs-warning: var(--accent-pink) !important;
    --bs-warning-rgb: 255, 79, 163 !important;
}

/* Override Bootstrap warning color globally */
:root {
    --bs-yellow: var(--accent-pink) !important;
}

/* Force all non-light buttons to use gradient (NO YELLOW) */
button:not(.bg-danger):not(.light):not(.btn-custom2),
.btn-custom:not(.light):not(.bg-danger),
.leftbar .top button:not(.light),
.custom-btn-li-up:not(.light){
    background: var(--accent-grad) !important;
    background-color: transparent !important;
    background-image: var(--accent-grad) !important;
    color: #fff !important;
    border: none !important;
}

/* Ensure no yellow background colors anywhere */
[style*="background"][style*="yellow"],
[style*="background"][style*="#ffc107"],
[style*="background"][style*="#ffd700"],
[style*="background"][style*="#ffb80c"]{
    background: var(--accent-grad) !important;
}

.navbar .navbar-brand img {
    max-width: 94px;
    border-radius: 18px;
}

body{
    background: var(--surface-2) !important;
    color: var(--text);
}

/* Top navbar - FIXED */
.navbar{
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    padding: 10px 15px !important;
}
.navbar .nav-link{
    color: var(--surface) !important;
    opacity: 1;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border-radius: 6px;
    transition: all 0.3s ease !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
    color: var(--accent-pink) !important;
    text-shadow: 0 0 10px rgba(255, 79, 163, 0.5);
    transform: translateY(-1px);
    transition: all 0.3s ease;
    opacity: 1;
}
.navbar .navbar-brand{
    color: var(--text) !important;
}
.navbar .navbar-text{
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Theme toggle button */
.theme-toggle-btn{
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    transition: .2s ease;
}
.theme-toggle-btn i{
    color: var(--surface);
}
.theme-toggle-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(255, 79, 163, .35);
}
.dark-mode .theme-toggle-btn{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
}
.dark-mode .theme-toggle-btn i{ color: #fff; }
.dark-mode .theme-toggle-btn i::before{ content: "\f185"; } /* sun */

/* Sidebars + content */
div#leftbar,
div#rightbar{
    background: var(--surface) !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}
.wrapper .content{
    background: transparent !important;
}

/* Remove yellow accents: blink color -> pink/blue */
.blink-color,.blink-color a {
    -webkit-animation: blinkcolor 2s linear infinite;
    animation: blinkcolor 2s linear infinite;
}
@-webkit-keyframes blinkcolor {
    0%,100% { color: var(--accent-pink) }
    50% { color: var(--accent-blue) }
}
@keyframes blinkcolor {
    0%,100% { color: var(--accent-pink) }
    50% { color: var(--accent-blue) }
}

/* Make category (Cricket) pill not yellow */
.categories a:hover, .categories a.active{
    background: var(--accent-grad) !important;
    color: #fff !important;
    border-bottom-color: transparent !important;
}
.categories a span{
    color: inherit !important;
}

/* Odds buttons: keep light blue/pink (no yellow) */
button[title="Back"] {
    background: rgba(51, 199, 255, 0.25) !important;
    border: 1px solid rgba(51, 199, 255, 0.35) !important;
    color: var(--text) !important;
    font-size: 16.8px;
    font-weight: 600;
}
button[title="lay"] {
    background: rgba(255, 79, 163, 0.22) !important;
    border: 1px solid rgba(255, 79, 163, 0.35) !important;
    color: var(--text) !important;
    font-size: 16.8px;
    font-weight: 600;
}

/* Rightbar tabs (Bet Slip / My Bets) - NO YELLOW */
div#rightbar .top button{
    background: var(--surface-2) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    border: none !important;
}
div#rightbar .top button:not(.light){
    background: var(--accent-grad) !important;
    color: #fff !important;
}
div#rightbar .top a.btn-custom2.light{
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

/* Increment/Decrement buttons - NO YELLOW */
.rightbar .inc-dec button,
.rightbar .inc-dec .increment,
.rightbar .inc-dec .decrement{
    background: var(--accent-grad) !important;
    color: #fff !important;
    border: none !important;
}
.rightbar .inc-dec button:hover{
    opacity: 0.9;
    transform: scale(1.05);
}

/* PLACE BET button - NO YELLOW */
.rightbar button.btn-custom:not(.bg-danger):not(.light),
.rightbar .btn-custom:not(.bg-danger):not(.light){
    background: var(--accent-grad) !important;
    color: #fff !important;
    border: none !important;
}

/* CANCEL button - keep red but modern */
.rightbar button.btn-custom.bg-danger,
.rightbar .btn-custom.bg-danger{
    background: #dc3545 !important;
    color: #fff !important;
    border: none !important;
}

/* Navbar LOGIN button - NO YELLOW */
.navbar .navbar-text .btn-custom:not(.theme-toggle-btn){
    background: var(--accent-grad) !important;
    color: #fff !important;
    border: none !important;
}

/* Dark mode: DARK backgrounds only (no light colors) */
.dark-mode body{ 
    background: #0a0e27 !important; 
    color: #fff !important;
}
.dark-mode .navbar {
    background: rgb(6 10 34) !important;
    border-bottom-color: rgba(255, 255, 255, .08);
    height: 80px;
}
.dark-mode .navbar .nav-link{
    color: rgba(255,255,255,0.9) !important;
}
.dark-mode .navbar .nav-link:hover,
.dark-mode .navbar .nav-link.active{
    color: var(--accent-pink) !important;
    text-shadow: 0 0 10px rgba(255, 79, 163, 0.5);
    transform: translateY(-1px);
}
.dark-mode .navbar .navbar-brand{
    color: #fff !important;
}
.dark-mode .navbar .navbar-text .btn-custom:not(.theme-toggle-btn){
    background: var(--accent-grad) !important;
    color: #fff !important;
    border: none !important;
}
.dark-mode .navbar .navbar-text .user-dropdown .dropdown-toggle{
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.dark-mode .navbar .dropdown .dropdown-menu{
    background: #1a1a3e !important;
    border-color: rgba(255,255,255,.10);
}
.dark-mode .navbar .dropdown .dropdown-menu a{
    color: #fff !important;
}
.dark-mode .navbar .dropdown .dropdown-menu a:hover{
    background: var(--accent-grad) !important;
    color: #fff !important;
}
.dark-mode div#leftbar,
.dark-mode div#rightbar{
    background: #1a1a3e !important;
    border-color: rgba(255,255,255,.10);
}
.dark-mode .wrapper .content{
    background: transparent !important;
}
.dark-mode .rightbar .top button:not(.light){
    background: var(--accent-grad) !important;
    color: #fff !important;
}
.dark-mode .rightbar .inc-dec button{
    background: var(--accent-grad) !important;
    color: #fff !important;
}
.dark-mode .rightbar button.btn-custom:not(.bg-danger){
    background: var(--accent-grad) !important;
    color: #fff !important;
}


@media only screen and (min-width: 900px) {
    div#leftbar { width: 270px; margin-top: 28px; }
    div#rightbar { width: 270px; margin-top: 28px; padding: 5px; }
    .wrapper .content { width: calc(100% - 540px) !important; margin-top: 30px; }
    div#rightbar button,div#rightbar a {
        border-radius: 10px;
        margin: 0px !important;
        text-transform: uppercase;
        font-size: .84615em;
        font-weight: 600;
}
}

.blink {
    animation: blink-animation 0.5s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/* (moved + modernized above) */
.swiper.s-slider.live-matches p {
    font-family: "Avenir Next";
    font-size: 16.8px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0px;
}
.navbar .navbar-toggler i:hover{
    color:#fff !important;
}
.box div button:nth-child(n+3) {
    display: none;
}
body{
    user-select:none;
}
.box.swiper-slide p{
    overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
           line-clamp: 1; 
   -webkit-box-orient: vertical;
}
ul.submenu-nav {
    opacity:0;
    position: absolute;
    list-style-type: none;
    padding: 0px;
    white-space: nowrap;
    background: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    top: 100%;
    padding: 8px;
    transition: 0.3s;
    box-shadow: var(--shadow-soft);
}
.dark-mode ul.submenu-nav {
    background: #1a1a3e;
    border-color: rgba(255,255,255,.10);
}

li.submenu-wrapper {
    position: relative;
    cursor: pointer;
}

li.submenu-wrapper:hover ul {
    opacity:1;
}
/* (replaced to remove yellow, above) */


.box.swiper-slide button {
    height: 50px !important;
}


.swiper.s-slider .swiper-button-next:after,.swiper.s-slider .swiper-button-prev:after {font-size: 16px;font-weight: 900;}

.swiper.s-slider .swiper-button-next:after {
    transform: translateX(10px);
}

.swiper.s-slider .swiper-button-prev:after {
    transform: translateX(-10px);
}
h5.mb-3.tournment-name {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgb(153, 153, 153) !important;
    font-family: none;
}
.fa-bars:before {
    color: #fff;
}

@media (max-width: 600px) {
    ul.navbar-nav {
        background: var(--surface) !important;
        border: 1px solid var(--border);
        padding: 10px 20px;
        border-radius: 10px;
        max-width: 70%;
        margin: 0px auto;
        box-shadow: var(--shadow-soft);
    }
    .dark-mode ul.navbar-nav {
        background: #1a1a3e !important;
        border-color: rgba(255,255,255,.10);
    }
    ul.navbar-nav li a {
        font-size: 17px;
        justify-content: center;
        padding-block: 6px !important;
        letter-spacing: 1px;
        color: var(--text) !important;
    }
    .dark-mode ul.navbar-nav li a {
        color: #fff !important;
    }
    h5.start-date {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* number of lines to show */
        line-clamp: 1;
        -webkit-box-orient: vertical;
    }
}

/* Enhanced Match Header Styles */
#match-header .card-header {
    background: var(--accent-grad) !important;
    border: none;
}

#match-header .team-logo {
    border-radius: 50%;
    box-shadow: 0px 7px 12px rgb(0 0 0 / 39%);
    background: white;
    padding: 8px;
    margin-right: 10px;
}

/* Ensure match cards are clickable */
.live-matches .box,
.highlights .box,
.box,
.match-card-clickable {
    cursor: pointer !important;
    position: relative;
    user-select: none; /* Prevent text selection on click */
}

/* Ensure buttons inside cards are above the clickable area */
.match-card-clickable button,
.box button {
    position: relative;
    z-index: 10;
}

.live-matches .box img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    background: white;
    border-radius: 50%;
    padding: 5px;
    border: 4px solid hotpink;
}

#match-header .border.rounded {
    transition: all 0.3s ease;
    border-color: var(--border) !important;
}

#match-header .border.rounded:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

#match-header .card.bg-light {
    background: var(--surface) !important;
    border: 1px solid var(--border);
}

/* Balance Display and Deposit Button Styles */
.balance-display {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.2) 0%, rgba(78, 197, 241, 0.2) 100%);
    border: 1px solid rgba(255, 107, 157, 0.3);
    border-radius: 8px;
    padding: 5px 12px;
    transition: all 0.3s ease;
}

/* Bootstrap Icons support - ensure icons display correctly */
.bi,
i.bi,
.btn-custom .bi,
.btn-custom i.bi,
button.btn-custom .bi,
button.btn-custom i.bi {
    display: inline-block !important;
    font-family: "bootstrap-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    vertical-align: -0.125em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    margin-right: 5px !important;
    font-size: 1em !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override Font Awesome if it's interfering */
.btn-custom .bi::before,
.btn-custom i.bi::before {
    display: inline-block !important;
    font-family: "bootstrap-icons" !important;
}

/* Fix for Bootstrap Icons in light buttons */
.btn-custom.light .bi,
.btn-custom.light i.bi {
    color: inherit !important;
}

/* SVG icon support in buttons */
.btn-custom svg,
button.btn-custom svg {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
    width: 1em !important;
    height: 1em !important;
    fill: currentColor !important;
}

.btn-custom.light svg {
    color: inherit !important;
}

.balance-display:hover {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.3) 0%, rgba(78, 197, 241, 0.3) 100%);
    border-color: rgba(255, 107, 157, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}

.balance-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.balance-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.balance-amount {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #FF6B9D 0%, #4EC5F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-deposit {
    background: linear-gradient(135deg, #FF6B9D 0%, #4EC5F1 100%);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
    border: none;
}

.btn-deposit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 157, 0.5);
    color: #fff !important;
    text-decoration: none;
}

.btn-deposit i {
    font-size: 16px;
}

/* Responsive Design for Header */
@media (max-width: 991px) {
    .balance-display {
        padding: 6px 12px;
        margin-right: 8px !important;
    }
    
    .balance-label {
        font-size: 10px;
    }
    
    .balance-amount {
        font-size: 14px;
    }
    
    .btn-deposit {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .btn-deposit span {
        display: none;
    }
    
    .btn-deposit i {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .navbar-text {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .balance-display {
        order: 1;
        margin-right: 0 !important;
    }
    
    .btn-deposit {
        order: 2;
        padding: 8px 12px;
    }
    
    .user-dropdown {
        order: 3;
    }
    
    .notification-panel {
        order: 4;
    }
}

@media (max-width: 576px) {
    .balance-info {
        align-items: center;
    }
    
    .balance-label {
        display: none;
    }
    
    .balance-amount {
        font-size: 12px;
    }
}

.dark-mode #match-header .card.bg-light {
    background: rgba(17,17,17,0.6) !important;
    border-color: rgba(255,255,255,0.1);
}

#match-header .text-muted {
    color: var(--muted) !important;
}

#match-header .alert-info {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
    border: 1px solid rgba(79, 172, 254, 0.3);
    color: var(--text);
}

.dark-mode #match-header .alert-info {
    background: rgba(79, 172, 254, 0.15);
    border-color: rgba(79, 172, 254, 0.4);
    color: #fff;
}








section.about-section {
    background: black;
}

.contact-section{
    background: black;    
}