/* =====================================================
   用户下拉菜单组件
   适用于所有页面的统一用户菜单样式
   ===================================================== */

/* 用户菜单容器 */
.user-menu-wrapper {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle; /* 垂直居中对齐 */
  margin-left: 0; /* 移除左边距，使用.menu-item的间距 */
  flex: none !important; /* 防止flex影响 */
  width: auto !important;
  height: auto !important;
  z-index: 10001 !important; /* 确保下拉菜单能显示在sticky header(999)之上 */
  isolation: isolate; /* 创建独立的层叠上下文，避免被父元素限制 */
}

/* 确保包裹下拉菜单的.menu-item不会换行且无缩进 */
.menu-item.menu-item-has-children,
.menu-item.custom-dropdown-item {
  display: inline-block !important;
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 覆盖Astra主题的子菜单缩进 */
.site-navigation .menu-item.custom-dropdown-item,
.main-header-menu .menu-item.custom-dropdown-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 用户菜单触发按钮 - 简洁样式（无背景） */
.user-menu-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  margin: 0 15px !important;
  background: transparent !important;
  border: none !important;
  color: white !important;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 1 !important;
  height: auto !important;
  vertical-align: middle !important;
  width: auto !important;
  flex: none !important;
}

.user-menu-trigger:hover {
  color: #F97316 !important;
}

/* 用户头像容器 */
.user-avatar-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 导航栏头像图片 */
.nav-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.3s ease;
}

.user-menu-trigger:hover .nav-user-avatar {
  border-color: #F97316;
}

/* VIP皇冠徽章 */
.vip-crown {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* 旧版用户头像图标（兼容性保留） */
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F97316, #FF6B35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

/* 用户名显示 */
.user-display-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 下拉箭头 */
.dropdown-arrow {
  font-size: 10px;
  transition: transform 0.3s ease;
  margin-left: 4px;
}

.user-menu-wrapper.active .dropdown-arrow {
  transform: rotate(180deg);
}

/* 下拉菜单容器 */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0 !important;
  left: auto !important;
  min-width: 200px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 99999 !important; /* 使用超高z-index突破stacking context限制 */
  overflow: hidden;
}

/* 显示下拉菜单（只通过点击触发，移除hover） */
.user-menu-wrapper.active .user-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 下拉菜单箭头装饰 */
.user-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: white;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05);
}

/* 菜单项列表 */
.user-menu-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: relative;
  z-index: 1;
  background: white;
}

/* 菜单项 */
.user-menu-item {
  margin: 0;
}

.user-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
}

.user-menu-link:hover {
  background: #f3f4f6;
  color: #1E3A8A;
}

/* 菜单图标 */
.menu-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* 菜单分割线 */
.menu-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 8px 0;
}

/* 登出按钮特殊样式 */
.user-menu-link.logout {
  color: #ef4444;
}

.user-menu-link.logout:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* 统一样式：所有下拉菜单都是白色背景 */
.user-menu-wrapper .user-dropdown-menu {
  background: white !important;
}

.user-menu-wrapper .user-dropdown-menu::before {
  background: white !important;
}

.user-menu-wrapper .user-menu-list {
  background: white !important;
}

.user-menu-wrapper .user-menu-link {
  color: #333 !important;
}

.user-menu-wrapper .user-menu-link:hover {
  background: #f3f4f6 !important;
  color: #1E3A8A !important;
}

/* Logout按钮特殊样式 */
.user-menu-wrapper .user-menu-link.logout {
  color: #ef4444 !important;
}

.user-menu-wrapper .user-menu-link.logout:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

/* JustShop Header适配 */
.justshop-header .user-menu-wrapper {
  margin-left: auto;
  margin-right: 0;
  align-self: center !important; /* 确保在flex容器中垂直居中 */
}

.justshop-nav {
  display: flex !important;
  align-items: center !important; /* 所有子元素垂直居中 */
  gap: 0 !important;
}

.justshop-nav > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.justshop-nav-container {
  display: flex !important;
  width: 100% !important;
  align-items: center !important; /* 所有子元素垂直居中 */
  justify-content: space-between !important;
}

/* Astra主题导航栏适配 */
.ast-primary-header-bar .user-menu-wrapper,
.ast-masthead .user-menu-wrapper,
.main-header-menu .user-menu-wrapper {
  align-self: center !important;
  vertical-align: middle !important;
}