/* ============================================
   Header (shared by all main pages)
   ============================================ */
.site-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 40px; /* 控制 logo 和导航之间的间距 */
}

.header-logo img {
  height: 40px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px; /* 导航项之间的间距 */
}

.header-nav a,
.header-nav .el-dropdown-link {
  font-weight: var(--primary-font-weight);
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.3s;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.header-nav a:hover,
.header-nav .el-dropdown-link:hover {
  color: var(--primary-blue);
}

.header-nav a.active,
.header-nav .el-dropdown-link.active {
  background: transparent;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.header-nav .el-dropdown-link:focus-visible {
  outline: none;
}

/* More Dropdown */
.more-dropdown {
  outline: none;
}
.more-dropdown .el-dropdown-menu__item {
  min-width: 140px;
}
.more-dropdown .el-dropdown-menu__item a {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: normal;
  padding: 0;
  border: none;
}
.more-dropdown .el-dropdown-menu__item:hover a {
  color: var(--primary-blue);
  background: transparent;
}

/* Language Menu */
.lang-menu {
  padding: 16px;
  min-width: 240px;
}
.lang-menu-title {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.lang-options {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.lang-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
}
.lang-option:hover {
  border-color: var(--primary-blue);
}
.lang-option.active {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}
.lang-option .flag {
  width: 20px;
  height: 14px;
  background-size: cover;
  background-position: center;
}
.lang-option .flag-en {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><path fill="%23bd3d44" d="M0 0h640v480H0z"/><path stroke="%23fff" stroke-width="37" d="M0 55.4h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/><rect width="258.4" height="258.5" fill="%23192f5d"/><g fill="%23fff"><g id="d"><g id="c"><g id="e"><g id="b"><path id="a" d="M24.3 12.5l7 21.7-18.4-13.4h22.8L17.3 34.2z"/><use href="%23a" y="42"/><use href="%23a" y="84"/><use href="%23a" y="126"/></g><use href="%23a" y="168"/></g><use href="%23b" x="24.3" y="21"/></g><use href="%23c" x="48.6"/></g><use href="%23d" x="97.2"/><use href="%23c" x="194.4"/><use href="%23b" x="243"/></g></svg>');
}
.lang-option .flag-zh {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect fill="%23ee1c25" width="900" height="600"/><path fill="%23ff0" d="M150 75l35.3 108.5H300l-92.4 67.1 35.3 108.5L150 292l-92.4 67.1 35.3-108.5L0 183.5h114.7z"/><path fill="%23ff0" d="M300 30l11.8 36.2H350l-30.8 22.4 11.8 36.2L300 102.4l-30.8 22.4 11.8-36.2L250 66.2h38.2zm60 60l11.8 36.2H410l-30.8 22.4 11.8 36.2L360 162.4l-30.8 22.4 11.8-36.2L310 126.2h38.2zm30 90l11.8 36.2H440l-30.8 22.4 11.8 36.2L390 252.4l-30.8 22.4 11.8-36.2L340 216.2h38.2zm-30 90l11.8 36.2H410l-30.8 22.4 11.8 36.2L360 342.4l-30.8 22.4 11.8-36.2L310 306.2h38.2z"/></svg>');
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.header-tools .cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  position: relative;
  margin-right: 8px;
}

.header-tools .cart-icon img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}

.header-tools .lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  outline: none;
}

.header-tools .lang-switch:focus,
.header-tools .lang-switch:focus-visible,
.header-tools .lang-switch:hover {
  outline: none !important;
}

.header-tools .lang-switch .flag {
  width: 20px;
  height: 14px;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

.header-tools .lang-switch .flag-en {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><path fill="%23bd3d44" d="M0 0h640v480H0z"/><path stroke="%23fff" stroke-width="37" d="M0 55.4h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/><rect width="258.4" height="258.5" fill="%23192f5d"/><g fill="%23fff"><g id="d"><g id="c"><g id="e"><g id="b"><path id="a" d="M24.3 12.5l7 21.7-18.4-13.4h22.8L17.3 34.2z"/><use href="%23a" y="42"/><use href="%23a" y="84"/><use href="%23a" y="126"/></g><use href="%23a" y="168"/></g><use href="%23b" x="24.3" y="21"/></g><use href="%23c" x="48.6"/></g><use href="%23d" x="97.2"/><use href="%23c" x="194.4"/><use href="%23b" x="243"/></g></svg>');
}

.header-tools .lang-switch .flag-zh {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><rect fill="%23ee1c25" width="900" height="600"/><path fill="%23ff0" d="M150 75l35.3 108.5H300l-92.4 67.1 35.3 108.5L150 292l-92.4 67.1 35.3-108.5L0 183.5h114.7z"/><path fill="%23ff0" d="M300 30l11.8 36.2H350l-30.8 22.4 11.8 36.2L300 102.4l-30.8 22.4 11.8-36.2L250 66.2h38.2zm60 60l11.8 36.2H410l-30.8 22.4 11.8 36.2L360 162.4l-30.8 22.4 11.8-36.2L310 126.2h38.2zm30 90l11.8 36.2H440l-30.8 22.4 11.8 36.2L390 252.4l-30.8 22.4 11.8-36.2L340 216.2h38.2zm-30 90l11.8 36.2H410l-30.8 22.4 11.8 36.2L360 342.4l-30.8 22.4 11.8-36.2L310 306.2h38.2z"/></svg>');
}

.header-tools .user-actions a {
  font-size: 14px;
}

.header-tools .user-actions a + a {
  margin-left: 4px;
}

/* User Profile & Dropdown */
.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  outline: none;
}

.user-profile:focus,
.user-profile:focus-visible,
.user-profile:hover {
  outline: none !important;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.user-id {
  font-size: 14px;
  color: var(--text-primary);
}

.user-menu-list {
  padding: 8px 0;
  min-width: 180px;
}

.user-menu-link {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  width: 100%;
}

.user-menu-link .dot {
  width: 6px;
  height: 6px;
  background-color: var(--primary-blue);
  border-radius: 50%;
  margin-right: 8px;
}

.user-menu-link .balance {
  color: var(--primary-orange);
  margin-left: 4px;
}

.el-dropdown-menu__item:hover .user-menu-link {
  color: var(--primary-blue);
}

/* Search Bar (shared by header + homepage banner) */
.search-bar-wrapper {
  background: var(--primary-blue);
  padding: 12px 0;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  height: 66px;
  padding: 4px;
  box-sizing: border-box;
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 16px;
  font-size: 16px;
  height: 100%;
  color: var(--text-primary);
}

.search-bar input::placeholder {
  color: var(--text-muted);
}

.search-bar .platform-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
}

.search-bar .platform-icons .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search-bar .platform-icons .icon-btn img {
  opacity: 0.5;
  transition: opacity 0.3s;
  width: 100%;
  height: 100%;
}

.search-bar .platform-icons .icon-btn:hover img {
  opacity: 1;
}

.search-bar .camera-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-size: 32px;
  color: #BDBDBD;
  cursor: pointer;
  transition: color 0.3s;
}

.search-bar .camera-icon:hover {
  color: var(--primary-orange);
}

.search-bar .search-btn {
  background: var(--primary-orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 36px;
  height: 100%;
  font-size: 16px;
  font-weight: var(--primary-font-weight);
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.3s;
}

.search-bar .search-btn:hover {
  background: #E65100;
}

/* Header Specific Search Bar */
.header-search-bar {
  height: 56px;
  padding: 6px 8px;
  border-radius: 8px;
}

.header-search-bar input {
  font-size: 15px;
}

.header-search-bar .clear-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #BDBDBD;
  cursor: pointer;
  font-size: 18px;
  margin-right: 16px;
  transition: color 0.3s;
}

.header-search-bar .clear-icon:hover {
  color: var(--primary-orange);
}

.header-search-bar .camera-icon {
  background: transparent;
  color: #BDBDBD;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px; /* Make icon fill the container */
  margin-right: 18px;
  transition: color 0.3s;
}

.header-search-bar .camera-icon:hover {
  background: transparent;
  color: var(--primary-orange);
}

.header-search-bar .search-btn {
  border-radius: 6px;
  padding: 0 32px;
  font-size: 15px;
}