/* Dark Mode Styles */
.dark-mode .navbar {
  background-color: #1a1a1a;
  border-bottom: 2px solid #3a3a3a;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);

  .sub-navbar-wrapper {
    .main-nav {
      scrollbar-color: #3a3a3a transparent;

      &::-webkit-scrollbar-thumb {
        background-color: #3a3a3a;
      }

      .nav-item {
        i {
          color: #9e9e9e !important;
        }

        a {
          color: #e0e0e0 !important;

          &::after {
            background-color: #9e8d7a;
          }
        }

        a:hover {
          color: #e4d3bf !important;
        }
      }
    }

    .sub-nav-section {
      background-color: #1a1a1a;
      border-top: 1px solid #3a3a3a;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      color: #e0e0e0;

      .categories-list {
        border-right: 1px solid #3a3a3a;
        scrollbar-color: #3a3a3a transparent;

        &::-webkit-scrollbar-thumb {
          background-color: #3a3a3a;
        }

        .category-link {
          i {
            color: #9e9e9e;
          }

          &:hover,
          &.active {
            background-color: rgba(158, 141, 122, 0.2);
            color: #e4d3bf !important;

            i {
              color: #e4d3bf !important;
            }
          }
        }
      }

      .subcategories-list {
        scrollbar-color: #3a3a3a transparent;

        &::-webkit-scrollbar-thumb {
          background-color: #3a3a3a;
        }

        .subcategory-item {
          img {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            border: 1px solid #3a3a3a;

            &:hover {
              box-shadow: 0 6px 20px rgba(228, 211, 191, 0.2);
            }
          }

          span {
            color: #e0e0e0;
          }

          &:hover span {
            color: #e4d3bf;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
    
  /* Dark mode responsive adjustments */
  .dark-mode .navbar{
    .sub-navbar-wrapper {
      .sub-nav-section {
        .categories-list {
          border-bottom: 1px solid #3a3a3a;
        }
      }
    }
  }
}


/* Dark Mode Styles */
.dark-mode {
  .nav-links {
    background-color: #1f1f1f  !important ;
  }

  .nav-link {
    color: rgba(255, 255, 255, 0.9);

    &:hover {
      color: #fff;
    }
  }

  .dropdown-menu,
  .dropdown-menu2,
  .submenu {
    background-color: #2d2d2d !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;

    &:hover {
      color: #e4d3bf !important;
      background: rgba(255, 255, 255, 0.05);
    }
  }

  .nav-actions {
    border-top-color: rgba(255, 255, 255, 0.1);

    .action-button {
      background: rgba(255, 255, 255, 0.05) !important;
      color: rgba(255, 255, 255, 0.9) !important;
      border: 1px solid rgba(228, 211, 191, 0.2);

      &:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(228, 211, 191, 0.4);
      }
    }
  }

  .menu-item {
    color: #e0e0e0 !important;
  }

  .navigation-bar {
    background-color: #222 !important;
    border-bottom-color: rgba(228, 211, 191, 0.5);
  }
}