/* ==========================================================================
   Header（导航栏）样式
   ========================================================================== */

/* =========================
   导航栏整体背景色
   ========================= */
.navbar {
  background-color: var(--bs-primary) !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  width: 100%;
}

/* =========================
   导航栏容器布局
   - 水平排列，左右两端对齐
   ========================= */
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* =========================
   导航菜单居中显示
   - 菜单项间距加大
   ========================= */
.navbar-nav {
  margin: 0 auto;
  gap: 0.3rem; /* 修改菜单项之间的间距 */
}

/* =========================
   导航链接样式
   - 字体加粗，颜色为白色
   - 增加左右内边距
   ========================= */
.navbar .navbar-nav .nav-link {
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.5rem 2rem; /* 增加左右内边距 */
}

/* =========================
   导航链接悬停效果
   - 变为主色调的浅色
   ========================= */
.navbar-nav .nav-link:hover {
  color: var(--bs-primary-light);
}

/* =========================
   搜索框外层样式
   - 圆角、横向排列
   - 防止内容溢出
   ========================= */
.navbar-search {
  display: flex;
  align-items: center;
  position: relative;
  width: 240px; /* 输入框宽度 + 图标宽度 */
  border-radius: 20px;
  overflow: hidden; /* 确保内部元素不会超出圆角范围 */
}

/* =========================
   搜索输入框样式
   - 白底、无边框
   - 字体颜色为深色
   ========================= */
.navbar-search .form-control {
  background-color: white;
  border: none;
  padding: 0.5rem 1rem;
  width: 100%;
  color: var(--bs-text-dark);
  position: relative;
  z-index: 1;
}

/* =========================
   搜索输入框聚焦时去除阴影
   ========================= */
.navbar-search .form-control:focus {
  box-shadow: none;
  outline: none;
}

/* =========================
   搜索图标样式
   - 绝对定位在输入框右侧
   - 圆角背景，主色调
   - 不可点击
   ========================= */
.navbar-search .search-icon {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bs-primary-light);
  color: white;
  pointer-events: none; /* 防止图标干扰输入框点击 */
  z-index: 2;
}

/* 防止内容被遮挡，可在主内容区加上合适的padding-top（如有需要） */

/* 防止内容被导航栏遮挡 */
body {
  padding-top: 76px; /* Updated based on actual navbar height */
}

/* =========================
   Products Dropdown Menu (Enhanced for Two-Column Layout)
   ========================= */
.dropdown-menu-products {
  position: absolute;
  display: none; /* Initially hidden */
  left: 0;
  transform: none;
  top: 67px; 
  width: 100%;
  margin: 0;
  padding: 0; /* Padding will be handled by inner containers */
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.1); /* Adjusted border for lighter bg */
  background-color: #F2F7F7; /* Reverted to hardcoded light background */
  max-height: 75vh; /* Max height of the dropdown */
  z-index: 9999;
  box-sizing: border-box;
}

.dropdown-menu-products.show {
  display: flex !important; /* Use flex to manage inner container's height */
  flex-direction: column; /* Stack children vertically if needed, ensures container fills */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17);
  opacity: 1;
  visibility: visible;
}

.products-dropdown-container {
  display: flex;
  width: 100%;
  height: 100%; /* Fill the .dropdown-menu-products height */
  max-height: inherit; /* Inherit max-height from parent */
  overflow: hidden; /* Prevent this container from showing scrollbars */
}

.categories-panel {
  flex: 0 0 230px; /* Width of the category panel */
  padding: 1rem;
  background-color: #F2F7F7; /* Reverted to hardcoded light background */
  overflow-y: auto; /* Allow vertical scrolling for categories */
  height: 100%; 
  box-sizing: border-box;
  color: #333333; /* Reverted to hardcoded dark text */
  border-right: 1px solid rgba(0, 0, 0, 0.1); /* Reverted to hardcoded border */
}

.category-item {
  padding: 0.7rem 0.5rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Reverted to hardcoded border */
  font-weight: bold;
  transition: background-color 0.2s, color 0.2s;
  color: #333333; /* Reverted to hardcoded dark text */
}

.category-item:last-child {
  border-bottom: none;
}

.category-item.active {
  background-color: #dde8e8; /* Reverted to hardcoded light active background */
  color: var(--bs-text-dark); /* Using CSS variable for active text color */
  font-weight: bold; /* Ensure active category items are bold */
}

.category-item:hover:not(.active) {
  background-color: #e5eeee; /* Reverted to hardcoded light hover background */
  /* color: #333333; Text color can be inherited or set if needed */
}

.category-item a {
  text-decoration: none; /* Ensure links within category items are not underlined by default */
  color: inherit; /* Inherit color from parent .category-item */
  display: block; /* Ensure the link fills the category item for clickability */
}

.subcategory-list {
  list-style: none;
  padding-left: 1.2rem; /* Indent subcategories */
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
}

.subcategory-item {
  padding: 0.5rem 0.5rem;
  cursor: pointer;
  border-radius: 3px;
  font-weight: normal;
  font-size: 0.9em;
  color: #555555; /* Reverted to hardcoded darker subcategory text */
  transition: background-color 0.2s, color 0.2s;
}

.subcategory-item:hover:not(.active) {
  background-color: #e0e7e7; /* Reverted to hardcoded light hover background */
  color: #222222; /* Reverted to hardcoded dark hover text */
}

.subcategory-item.active {
  background-color: #cddede; /* Reverted to hardcoded light active subcategory background */
  color: #0f5a7a; /* Reverted to hardcoded dark active subcategory text */
  font-weight: bold;
}

.products-panel {
  flex: 1; /* Takes up the remaining space */
  padding: 1.5rem;
  overflow-y: auto; /* Allow vertical scrolling for products */
  height: 100%;
  box-sizing: border-box;
  background-color: #F2F7F7; /* Reverted to hardcoded light background */
}

/* Product groups - used to display products for a selected category */
.product-group {
  display: none; /* Hidden by default */
  flex-wrap: wrap;
  gap: 25px; /* Gap between product items */
  justify-content: flex-start; 
}

.product-group.active {
  display: flex; /* Show only the active product group */
}

/* Styling for individual product items in the dropdown (ensure these are still valid) */
.product-item-col {
  text-align: center;
  padding: 0;
  margin: 0;
  width: 110px;
  flex: 0 0 110px; /* Fixed width for product items */
  box-sizing: border-box;
  border-radius: 0;
}

.product-item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  transition: background 0.2s;
  text-decoration: none;
}

.product-item-link:hover {
  background: none;
  text-decoration: none;
}

.product-item-img {
  max-width: 80px;
  width: 80px;
  height: 80px;
  margin-bottom: 0.5rem;
  object-fit: contain;
  border-radius: 0;
  transition: box-shadow 0.2s, transform 0.2s;
}

.product-item-link:hover .product-item-img {
  box-shadow: 0 4px 16px rgba(31,38,135,0.12);
  transform: scale(1.06);
}

.product-item-name {
  font-size: 0.8rem;
  margin-bottom: 0;
  color: #333333; /* Reverted to hardcoded dark text */
  margin-top: 0.5rem;
  text-align: center;
  white-space: normal;
  word-break: break-all;
}

/* Adjustments for small screens */
@media (max-width: 992px) { /* Adjusted breakpoint for better responsiveness */
    .categories-panel {
        flex: 0 0 180px; /* Slightly narrower category panel */
    }
    .product-group {
        gap: 15px; /* Smaller gap for products */
    }
}

@media (max-width: 768px) {
  .dropdown-menu-products {
    width: 95vw; 
    max-height: 85vh; /* Allow more height on small screens */
  }

  .products-dropdown-container {
    flex-direction: column; /* Stack panels vertically */
    height: auto; 
    max-height: inherit; /* Ensure it doesn't exceed dropdown max-height */
  }

  .categories-panel {
    flex: 1 1 auto; /* Allow it to grow and shrink, but take content height */
    width: 100%;
    max-height: 45vh; /* Max height for categories section */
    border-right: none; /* No right border when stacked */
    border-bottom: 2px solid #3897B3; /* Bottom border as separator */
  }

  .products-panel {
    flex: 1 1 auto; /* Allow it to grow and shrink */
    width: 100%;
    max-height: 55vh; /* Max height for products section */
    padding: 1rem; /* Adjust padding for smaller screens */
  }
   .product-item-col {
    width: 100px; /* Slightly smaller product items on mobile */
    flex: 0 0 100px;
  }
  .product-item-img {
    width: 70px;
    height: 70px;
  }
  .product-item-name {
    font-size: 0.75rem;
  }
}

/* Ensure this class is no longer used or its styles are adapted/removed if it was previously styling all products */
/* .dropdown-products-flex { ... } */

/* 定位Products下拉菜单的父级li */
#products-dropdown-parent-li {
  position: static !important; /* 确保下拉菜单不以此为定位基准 */
}

/* =========================
   About Us Dropdown Menu
   ========================= */

/* Specific styling for the "About Us" dropdown parent if needed */
#about-us-nav-item-parent {
  position: static !important; /* 确保 top: 67px 是相对于 .navbar .container */
}

.dropdown-menu-aboutus {
  display: none; 
  position: absolute;
  top: 67px; /* 垂直对齐导航栏底部 */
  min-width: 200px; 
  padding: 0.5rem 0; 
  margin-top: 0; 
  background-color: #F2F7F7; /* 修改背景颜色 */
  border: none; /* 移除边框 */
  border-radius: 0; 
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175); 
  z-index: 1060; 
}

.dropdown-menu-aboutus.show {
  display: block;
}

.dropdown-menu-aboutus .dropdown-item {
  padding: 0.5rem 1.5rem;
  color: #333333; /* 深色文字，确保在浅色背景上的可读性 */
  text-decoration: none;
  display: block;
  width: 100%;
  clear: both;
  font-weight: 400;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-menu-aboutus .dropdown-item:hover,
.dropdown-menu-aboutus .dropdown-item:focus {
  color: #1a6a8a; /* 悬停时文字颜色 */
  background-color: #e5eeee; /* 悬停背景色 */
}

/* Ensure the dropdown toggle arrow is visible if using Bootstrap's default */
#aboutUsDropdown::after {
  /* Add styles if needed, e.g., color: white; if the default is hard to see */
}