body {
    background-color: black;
    color:white;
}

input.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px black inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

input.form-control:-moz-autofill {
    box-shadow: 0 0 0 1000px black inset !important;
    -moz-text-fill-color: white !important;
}

/* Base game tab - dark theme with subtle gradient */
.game-tab {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 12px;
    border: 1px solid #333;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.6), -4px -4px 10px rgba(50,50,50,0.4);
    color: #eee;
    /* padding: 12px 18px; */
    margin: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: box-shadow 0.2s ease, background 0.2s ease;
    min-width: 80px;
}

/* Active tab - use your requested gradient */
.game-tab.active {
    background: linear-gradient(180deg, #f55, #dc2d05 38%, #ac0000);
    box-shadow: inset 4px 4px 12px rgba(255,100,100,0.8), inset -4px -4px 12px rgba(255,120,120,0.6);
    color: #fff;
}

/* Hover effect - optionally use same gradient or slightly brighter */
.game-tab:hover {
    background: linear-gradient(180deg, #ff6666, #ff3a00 38%, #b30000);
    box-shadow: 
        inset 2px 2px 6px rgba(255, 120, 120, 0.6),
        inset -2px -2px 6px rgba(255, 150, 150, 0.4),
        3px 3px 8px rgba(0, 0, 0, 0.3),
        -3px -3px 8px rgba(50, 50, 50, 0.2);
    transition: all 0.2s ease;
}

/* Icon color */
.game-tab i {
    margin: 0 auto;
    color: #ff9999;
}


.btn-primary-gradient {
    background: linear-gradient(180deg, #f55, #ed2a00 38%, #ac0000);
    padding: 0.2rem 2rem;
    border: none;
    border-radius: 5rem;
    color: #fff;
    transition: all 0.3s ease;
}

.btn-primary-gradient:hover,
.btn-primary-gradient:focus {
    background-image: linear-gradient(180deg, #f55, #ed2a00 38%, #ac0000);
    color: #fff;
}

.navbar {
    background: #212122;

}

.game-text {
    color: white;
}

.bottom-nav-section .bottom-nav-content {
    width: 100%;
    height: 3.5rem;
    display: flex;
    justify-content: space-around;
    background-color: #212122;
    margin: 0;
    align-items: center;
    padding-left: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem; 
    
    /* Add a 3D gradient background */
    background: linear-gradient(209deg, #1a1616, #38383b);
    
    /* Adding box shadow for extra depth */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}

footer {
    background: #212122; 
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left -0.8vw;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;    

    /* Adding more depth with box shadow */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Create a 3D line effect on the top edge */
    border-top: 3px solid rgba(40, 39, 39, 0.4); /* Light 3D edge effect */
}

/* .bottom-nav-section .bottom-nav-content .nav-link.active {
    color: #ac0000;
} */

.bottom-nav-section .bottom-nav-content .nav-link {
    display: grid;
    text-align: center;
    color: #adacb1;
    position: relative;
    font-size: 0.75rem;
    padding: 0;
}

.text-dark {
    --bs-text-opacity: 1;
    color: #f7bc33 !important;
}

.menu-icon>a>.avatar-menu-text {
    color: #f7bc33 !important;
    font-size: 10px;
    line-height: 0.9;
}
.card{
    background: #181616;
   
}
.text-muted {
    --bs-text-opacity: 1;
    color: white !important;
}
.nav-promotion .nav-link.active {
    background: linear-gradient(180deg, #f55, #ed2a00 38%, #ac0000);
    color: white !important;
}
.nav-link {
    color:white;
}

.nav-link:hover {
    color: orange;
}

.referral .btn-primary-gradient {
      background: linear-gradient(180deg, #f55, #ed2a00 38%, #ac0000);
}
.referral .referral-bottom-panel .social-media-text {
 color:white;   
}

.vip-table tbody td.header {
 color:#FFA500;   
}

.lang-menu {
  background-color: #121212;
  border-radius: 1rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  z-index: 100;
  min-width: 300px;
  padding: 1rem;
  transition: all 140ms ease-in;
}
.lang-menu.active {
  opacity: 1;
  visibility: visible;
}

.lang-menu-items {
  padding: 0;
  margin-bottom: 0;
}

.lang-menu-item {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}
.lang-menu-item img {
  max-width: 25px;
}

.lang-country {
  font-weight: 900;
  color: red;
}

.lang-options {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.lang-option {
  color: grey;
  list-style: none;
}
.lang-option .btn-link {
  font-family: Arial, Helvetica, sans-serif;
  color: grey;
  padding: 0;
}
.lang-option .btn-link.disabled {
  color: red;
  cursor: not-allowed;
  pointer-events: auto;
}

.btn-lang-close {
  background-color: #878787;
  color: #fff;
  border: none;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  right: -5px;
}

/* Toggle button styling */
.toggle-banner-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(128, 128, 128, 0.5); 
    border: none;
    color: #fff;
    padding: 6px 10px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}

.toggle-banner-btn:hover {
    background: rgba(128, 128, 128, 0.8); 
}

/* Banner container */
.banner-slider-wrapper {
    position: relative;
    width: 100%;
}

/* Banner animation - sliding and fading */
#bannerSlider {
    display: block;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    max-height: 0; /* Start with a height of 0 */
    opacity: 0; /* Make it invisible by default */
}

/* When the banner is shown */
#bannerSlider.show {
    opacity: 1; /* Make it visible */
    max-height: 1000px; /* Adjust the max-height */
}

/* Mobile view: Show with max-height for mobile */
@media (max-width: 768px) {
    #bannerSlider.show {
        max-height: 300px; /* Limit to 300px in mobile view */
    }

    #bannerSlider.hide {
        max-height: 0; /* Collapse it in mobile view */
    }
}

/* Desktop view: Auto height based on content */
@media (min-width: 769px) {
    #bannerSlider.show {
        max-height: 1000px; /* Allow large max-height for desktop */
        height: auto; /* Ensure the height adjusts based on content */
    }

    #bannerSlider.hide {
        max-height: 0; /* Collapse it for desktop view */
    }
}

/* Ensure the icons are correctly toggled based on the banner visibility */
#toggleIconShow, #toggleIconHide {
    transition: opacity 0.3s ease;  /* Smooth opacity transition */
}

.toggle-banner-btn svg {
    width: 18px;
    height: 18px;
    fill: white;
}

#toggleIconShow {
    display: inline;
}
#toggleIconHide {
    display: none;
}

#bannerSlider.show + .toggle-banner-btn #toggleIconShow {
    display: none;
}

#bannerSlider.show + .toggle-banner-btn #toggleIconHide {
    display: inline;
}

#bannerSlider.hide + .toggle-banner-btn #toggleIconShow {
    display: inline;
}

#bannerSlider.hide + .toggle-banner-btn #toggleIconHide {
    display: none;
}

.copy-popup {
    position: absolute;
    background: #666;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 9999;
    transform: translateY(6px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.swal2-modal {
    background-color: #222;
    color: #fff;
}

.swal2-icon {
    display: none !important;
}

/* Target the SweetAlert2 confirm button */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: #ed2a00 !important;
    /* Bootstrap red */
    border-color: #ed2a00 !important;
}

/* Optional: hover effect */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover {
    background-color: #ed2a00 !important;
    /* Darker red on hover */
    border-color: #ed2a00 !important;
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
    background-color: #ed2a00 !important;
    /* change valid checked color to orange */
    border-color: #ed2a00 !important;
    /* optional: change border too */
}

.form-check-input:checked {
    background-color: #ed2a00;
    border-color: #ed2a00;
}

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%; /* This ensures the container will take at least the full height of its parent */
    height: auto; /* Allow the container to expand based on content */
}

.pagination {
    display: flex;
    gap: 6px;
    padding-left: 0;
    list-style: none;
}

/* Base button */
.page-link {
    background: #2b2b2b;       /* dark grey */
    color: #d0d0d0;            /* soft grey */
    font-weight: 600;
    border: 1px solid #555 !important;   /* grey border */
    padding: 0.55rem 0.9rem;
    transition: 0.2s ease-in-out;
}

/* Hover */
.page-link:hover {
    background: #3a3a3a;
    color: #fff;
    border-color: #666;        /* slightly brighter border on hover */
}

/* Active page (red gradient) */
.page-link.active,
.active > .page-link {
    background: linear-gradient(180deg, #ff4b3e, #c92400);
    color: #fff !important;
    border-color: #c92400;     /* match active color */
}

/* Disabled buttons = pure black */
.page-link.disabled,
.disabled > .page-link {
    background: #000 !important;  /* black */
    color: #444 !important;       /* dim grey text */
    border-color: #222 !important;/* darker border */
    pointer-events: none;
}

.marquee-content {
    color: #f4f3f3;
}

/* Icons */
.nav-link .icon {
    width: 35px;
    transition: content 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Slight zoom effect on hover */
.nav-link:hover .icon {
    transform: scale(1.3);
}

/* Text */
.nav-link span {
    color: #999;
    transition: color 0.2s ease-in-out;
}

.nav-link:hover span,
.nav-link.active span {
    color: #FFA500;
}

/* Individual icon swapping (full set from before) */

/* Lucky Spin */
.luckyspin-link .icon { content: url('/icon/myaccount/luckyspin.png'); }
.luckyspin-link:hover .icon,
.luckyspin-link.active .icon { content: url('/icon/myaccount/luckyspin_active.png'); }

/* Checkin */
.checkin-link .icon { content: url('/icon/myaccount/checkin.png'); }
.checkin-link:hover .icon,
.checkin-link.active .icon { content: url('/icon/myaccount/checkin_active.png'); }

/* Profile */
.profile-link .icon { content: url('/icon/myaccount/profile.png'); }
.profile-link:hover .icon,
.profile-link.active .icon { content: url('/icon/myaccount/profile_active.png'); }

/* Password */
.password-link .icon { content: url('/icon/myaccount/password.png'); }
.password-link:hover .icon,
.password-link.active .icon { content: url('/icon/myaccount/password_active.png'); }

/* Bank */
.bank-link .icon { content: url('/icon/myaccount/bank.png'); }
.bank-link:hover .icon,
.bank-link.active .icon { content: url('/icon/myaccount/bank_active.png'); }

/* Affiliate */
.affiliate-link .icon { content: url('/icon/myaccount/affiliate.png'); }
.affiliate-link:hover .icon,
.affiliate-link.active .icon { content: url('/icon/myaccount/affiliate_active.png'); }

/* VIP */
.vip-link .icon { content: url('/icon/myaccount/vip.png'); }
.vip-link:hover .icon,
.vip-link.active .icon { content: url('/icon/myaccount/vip_active.png'); }

/* TnC */
.tnc-link .icon { content: url('/icon/myaccount/tnc.png'); }
.tnc-link:hover .icon { content: url('/icon/myaccount/tnc_active.png'); }

/* Logout */
.logout-link .icon { content: url('/icon/myaccount/logout.png'); }
.logout-link:hover .icon { content: url('/icon/myaccount/logout_active.png'); }