/* === MODERN SIDEBAR UPDATE === */

/* Ana Sidebar Container */
.sidebar {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  background: linear-gradient(180deg, #151715 0%, #0F110F 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: none !important;
}

/* Sidebar Header */
.sidebar__head {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Hamburger Menu Button */
.sidebar__btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.sidebar__btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.sidebar__btn svg {
  stroke: #FFFFFF !important;
  width: 20px !important;
  height: 20px !important;
}

/* Sidebar Big (Main content area) */
.sidebar__big {
  width: 100% !important;
  max-width: 220px !important;
}

/* Sidebar Content */
.sidebar__content {
  padding: 0 !important;
  overflow-y: auto !important;
  height: calc(100% - 72px) !important;
  width: 100% !important;
}

/* Modern Scrollbar */
.sidebar__content::-webkit-scrollbar {
  width: 6px !important;
}

.sidebar__content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02) !important;
}

.sidebar__content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 3px !important;
}

.sidebar__content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Sidebar Links Container */
.sidebar__links {
  width: 100% !important;
  padding: 0 !important;
}

/* Gamben Promo Wrapper */
.gamben-promo-wrapper {
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  width: 100% !important;
}

/* Casino & Sport Buttons in Sidebar */
.sidebar__link--casino {
  position: relative !important;
  width: 100% !important;
  height: 42px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

/* SPOR Button - Green Gradient */
.sidebar__link--casino[href*="sportsbook"],
.sidebar__link[href*="sportsbook"] {
  background: linear-gradient(90deg, #323C2F 0%, #2FD67E 100%) !important;
}

/* CASINO Button - Purple/Blue Gradient */
.sidebar__link--casino[href*="casino"]:not([href*="live"]),
.sidebar__link[href*="casino"]:not([href*="live"]) {
  background: linear-gradient(90deg, #2B2847 0%, #6B5DD8 100%) !important;
}

/* SLOT Button - Red Gradient (if needed) */
.sidebar__link--casino[href*="slots"],
.sidebar__link[href*="slots"] {
  background: linear-gradient(90deg, #3D2020 0%, #E74C3C 100%) !important;
}

/* Background image overlay effect */
.sidebar__link--casino::before,
.sidebar__link::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: inherit !important;
  background-size: cover !important;
  background-position: center !important;
  mix-blend-mode: overlay !important;
  opacity: 0.3 !important;
  z-index: 0 !important;
}

/* Text styling */
.sidebar__link--casino span,
.sidebar__link span {
  position: relative !important;
  z-index: 1 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Hover effect */
.sidebar__link--casino:hover,
.sidebar__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.sidebar__link--casino:hover::before,
.sidebar__link:hover::before {
  opacity: 0.5 !important;
}

/* Promotions Button */
.gamben-promo-btn {
  position: relative !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #7BCF14 0%, #66AA14 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  border: none !important;
}

.gamben-promo-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.gamben-promo-btn:hover::before {
  opacity: 1 !important;
}

.gamben-promo-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(123, 207, 20, 0.3) !important;
}

.gamben-promo-btn span {
  position: relative !important;
  z-index: 1 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
}

/* Menu Sections */
.sidebar__menu {
  padding: 12px 10px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.sidebar__menu:last-child {
  border-bottom: none !important;
}

/* Menu Title */
.sidebar__title {
  display: block !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 10px !important;
  padding-left: 2px !important;
}

/* Navigation Lists */
.sidebar__nav {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar__nav--border {
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Navigation Items */
.sidebar__nav li {
  position: relative !important;
}

.sidebar__nav li > a,
.sidebar__nav li > a.no-bg {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 8px !important;
  padding-right: 32px !important; /* Space for collapse button */
  border-radius: 6px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Hover State */
.sidebar__nav li > a:hover,
.sidebar__nav li > a.no-bg:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Parent li hover when has collapse button */
.sidebar__nav li:has(.sidebar__collapsed) > a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Active State Override */
.sidebar__nav li.active > a,
.sidebar__nav li.active > a.no-bg {
  background: linear-gradient(135deg, rgba(123, 207, 20, 0.15) 0%, rgba(102, 170, 20, 0.1) 100%) !important;
  color: #FFFFFF !important;
  border-left: 3px solid #7BCF14 !important;
  padding-left: 5px !important;
}

.sidebar__nav li.active > a svg,
.sidebar__nav li.active > a.no-bg svg {
  stroke: #7BCF14 !important;
  fill: none !important;
}

/* SVG Icons */
.sidebar__nav .svg-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  transition: all 0.3s ease !important;
}

/* "New" Badge */
.sidebar__nav li > a span:not(:first-child) {
  background: linear-gradient(135deg, #E7D902 0%, #F39C12 100%) !important;
  color: #1C1E1C !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  margin-left: auto !important;
}

/* Collapsed Menu Button */
.sidebar__collapsed {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.sidebar__collapsed:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.sidebar__collapsed svg {
  width: 12px !important;
  height: 12px !important;
  stroke: rgba(255, 255, 255, 0.6) !important;
  transition: transform 0.3s ease !important;
}

.sidebar__collapsed:not(.collapsed) svg {
  transform: rotate(90deg) !important;
  stroke: rgba(123, 207, 20, 0.8) !important;
}

.sidebar__collapsed.collapsed svg {
  transform: rotate(0deg) !important;
}

/* Collapsed Submenu */
.sidebar__nav--collapse {
  padding-left: 0 !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  margin-left: 0 !important;
  list-style: none !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 8px !important;
}

.sidebar__nav--collapse.collapse:not(.show) {
  display: none !important;
}

.sidebar__nav--collapse.collapsing {
  height: 0 !important;
  transition: height 0.3s ease !important;
}

.sidebar__nav--collapse.show {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  animation: slideDown 0.3s ease !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar__nav--collapse li {
  margin: 0 !important;
}

.sidebar__nav--collapse li > a {
  font-size: 12px !important;
  padding: 8px 10px !important;
  padding-left: 28px !important; /* Indent for visual hierarchy */
  padding-right: 10px !important;
  width: 100% !important;
  background: transparent !important;
  position: relative !important;
}

.sidebar__nav--collapse li > a::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

.sidebar__nav--collapse li > a:hover::before {
  background: #7BCF14 !important;
}

.sidebar__nav--collapse li.active > a::before {
  background: #7BCF14 !important;
}

/* Sportsbook submenu special styling */
.sidebar__nav.sportsbook {
  padding-left: 0 !important;
  margin-left: 0 !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 8px !important;
}

.sidebar__nav.sportsbook li > a {
  font-size: 12px !important;
  padding: 8px 10px !important;
  padding-left: 28px !important;
}

.sidebar__nav.sportsbook li > a::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

.sidebar__nav.sportsbook li > a:hover::before {
  background: #7BCF14 !important;
}

.sidebar__nav.sportsbook li.active > a::before {
  background: #7BCF14 !important;
}

/* Language Selector */
.sidebar__lang {
  margin-top: auto !important;
  padding: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sidebar__lang-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  text-decoration: none !important;
}

.sidebar__lang-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.sidebar__lang-btn .svg-icon {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
}

.sidebar__lang-btn .svg-icon img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

/* Language Dropdown Menu */
.sidebar__lang-menu {
  background: #1C1E1C !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  margin-top: 8px !important;
  min-width: 180px !important;
}

.sidebar__lang-menu li {
  list-style: none !important;
}

.sidebar__lang-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.sidebar__lang-menu li a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

.sidebar__lang-menu .svg-icon {
  width: 24px !important;
  height: 24px !important;
}

.sidebar__lang-menu .svg-icon img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

/* Small Sidebar (Icon Only) */
.sidebar__small {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding: 16px 12px !important;
  background: linear-gradient(180deg, #151715 0%, #0F110F 100%) !important;
  transition: none !important;
}

.sidebar__links-small {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

.sidebar__link-small,
.sidebar__link-small--purple {
  position: relative !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

/* SPOR Button Small - Green Gradient */
.sidebar__link-small[href*="sportsbook"],
a[href*="sportsbook"].sidebar__link-small {
  background: linear-gradient(90deg, #323C2F 0%, #2FD67E 100%) !important;
}

/* CASINO Button Small - Purple/Blue Gradient */
.sidebar__link-small[href*="casino"]:not([href*="live"]),
a[href*="casino"].sidebar__link-small:not([href*="live"]) {
  background: linear-gradient(90deg, #2B2847 0%, #6B5DD8 100%) !important;
}

/* SLOT Button Small */
.sidebar__link-small[href*="slots"] {
  background: linear-gradient(90deg, #3D2020 0%, #E74C3C 100%) !important;
}

.sidebar__link-small::before,
.sidebar__link-small--purple::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: inherit !important;
  background-size: cover !important;
  background-position: center !important;
  mix-blend-mode: overlay !important;
  opacity: 0.3 !important;
  z-index: 0 !important;
}

.sidebar__link-small:hover,
.sidebar__link-small--purple:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.sidebar__link-small:hover::before,
.sidebar__link-small--purple:hover::before {
  opacity: 0.5 !important;
}

/* Small Navigation */
.sidebar__nav-small {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.sidebar__nav-small--border {
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sidebar__nav-small li {
  width: 100% !important;
}

.sidebar__nav-small li a,
.sidebar__nav-small li button {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.sidebar__nav-small li a:hover,
.sidebar__nav-small li button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar__nav-small li.active a {
  background: rgba(123, 207, 20, 0.15) !important;
  border-color: #7BCF14 !important;
}

.sidebar__nav-small li.active a svg {
  stroke: #7BCF14 !important;
}

.sidebar__nav-small .svg-icon {
  width: 20px !important;
  height: 20px !important;
  stroke: rgba(255, 255, 255, 0.7) !important;
}

/* Small Language Selector */
.sidebar__lang-small {
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sidebar__lang-small-btn {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.sidebar__lang-small-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.sidebar__lang-small-btn .svg-icon {
  width: 24px !important;
  height: 24px !important;
}

.sidebar__lang-small-btn .svg-icon img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }
  
  .sidebar__big {
    max-width: 200px !important;
  }
  
  .sidebar__menu {
    padding: 10px 8px 8px !important;
  }
  
  .sidebar__nav li > a,
  .sidebar__nav li > a.no-bg {
    font-size: 11px !important;
    padding: 7px 6px !important;
    padding-right: 28px !important;
    gap: 6px !important;
  }
  
  .sidebar__collapsed {
    right: 6px !important;
    width: 22px !important;
    height: 22px !important;
  }
  
  .sidebar__collapsed svg {
    width: 10px !important;
    height: 10px !important;
  }
  
  .gamben-promo-btn {
    height: 36px !important;
    font-size: 13px !important;
  }
  
  .gamben-promo-wrapper {
    padding: 8px !important;
  }
  
  /* Casino & Sport buttons responsive */
  .sidebar__link--casino,
  .sidebar__link {
    height: 38px !important;
    border-radius: 10px !important;
  }
  
  .sidebar__link--casino span,
  .sidebar__link span {
    font-size: 13px !important;
  }
  
  .sidebar__link-small {
    height: 44px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 420px) {
  .sidebar {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }
  
  .sidebar__big {
    max-width: 180px !important;
  }
  
  .sidebar__nav li > a,
  .sidebar__nav li > a.no-bg {
    gap: 6px !important;
    padding: 6px 6px !important;
    padding-right: 26px !important;
    font-size: 11px !important;
  }
  
  .sidebar__title {
    font-size: 10px !important;
  }
  
  .sidebar__nav--collapse {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  .sidebar__nav--collapse li > a {
    padding-left: 22px !important;
  }
  
  .sidebar__nav--collapse li > a::before {
    left: 8px !important;
  }
  
  .sidebar__menu {
    padding: 8px 6px 6px !important;
  }
  
  .gamben-promo-btn {
    height: 34px !important;
    font-size: 12px !important;
  }
  
  .sidebar__collapsed {
    right: 4px !important;
    width: 20px !important;
    height: 20px !important;
  }
  
  .sidebar__collapsed svg {
    width: 10px !important;
    height: 10px !important;
  }
  
  /* Casino & Sport buttons mobile */
  .sidebar__link--casino,
  .sidebar__link {
    height: 36px !important;
    border-radius: 8px !important;
  }
  
  .sidebar__link--casino span,
  .sidebar__link span {
    font-size: 12px !important;
  }
  
  .sidebar__link-small {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 42px !important;
    border-radius: 10px !important;
  }
}