/* ==============================================================================
   /portal/assets/css/portal.nav.css
  电脑端（布局导航样式）----放：全局PC样式（变量、布局、reset）
  组件自身内部的CSS样式放组件自己的CSS样式里；组件整体在手机UI的布局属于全局，放这文件  
 ============================================================================== */ 
   
/* ============================================
   第一层+第二层导航栏（PC 端）---基础框架
   ============================================ */
/*  固定导航栏（企业级门户专用） */
.portal-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--portal-nav-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 1000;
  
  /* ⭐ 关键修复：允许搜索框边框完整显示 */
  overflow: visible;
}

/* 导航内部容器（全宽 + 左右留白 + 居中） */
.portal-nav-inner {
  display: flex;
  align-items: center;
  /* 去掉 position: relative; */
  position: static; /* 或者直接不写 */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 24px;
}

/* 左侧整体：Logo + 菜单 */
.portal-nav-left {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 0 0 auto;   /* ← 左侧宽度由内容决定 */
}

/* 右侧按钮区域：始终贴右 */
.portal-nav-actions {
  flex: 0 0 auto;                 /* ← 右侧宽度由内容决定 */
  display: flex;
  justify-content: flex-end;      /* 内部按钮靠右 */
  align-items: center;
  gap: 10px;
}

/* 允许搜索建议浮层显示 */
.portal-nav { overflow: visible; }

/* PC：登录 / 注册 / 已登录区域默认隐藏，交给 JS 控制显示，避免闪烁 */
#portal-btn-login,
#portal-btn-register,
#portal-user-area {
  display: none;
}

/* 页面处于 portal-loading 状态时，先把 PC 端会切换状态的区域隐身 */
body.portal-loading #portal-btn-login,
body.portal-loading #portal-btn-register,
body.portal-loading #portal-user-area {
  visibility: hidden;
}

/* 手机端汉堡按钮（默认隐藏） */
.portal-nav-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  user-select: none;
}

/* ⭐ PC 端隐藏手机端面包按钮（新结构） */
.portal-mobile-menu-toggle {
    display: none;
}

/* 全局头像样式（PC + Mobile + Dropdown 统一） */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* 用户名昵称设置 */
.portal-nav-actions .username {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.2px;   /* ⭐ 字间距 */
    line-height: 1.45;       /* ⭐ 行高 */
    padding: 4px 6px;        /* ⭐ 让点击区域更舒服 */
    color: var(--portal-text-main);

    max-width: 6em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* ======================================================================================================================
   ---------------------------------------------------------PC 第二层导航栏----------------------------------------------
   ==================================================================================================================== */
/* ============================================
   Logo 区域
   ============================================ */
/* 左侧 Logo 区域 */
.portal-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 18px;               /* ⭐ Logo 文本字号 */
  font-weight: 600;              /* ⭐ Logo 文本粗细 */
  letter-spacing: 0.5px;         /* ⭐ 字间距：让中文更大气 */
  line-height: 1.4;              /* ⭐ 行高：视觉更稳 */
  color: var(--portal-text-main);
}

/* Logo 图标（导航栏左侧） */
.portal-nav-brand-mark {
  width: 28px;                 /* ⭐ 图标宽度 */
  height: 28px;                /* ⭐ 图标高度 */
  border-radius: 10px;         /* ⭐ 圆角 */
  background: linear-gradient(135deg, #2563eb, #4f46e5);

  display: flex;               /* ⭐ 让内部文字居中 */
  align-items: center;
  justify-content: center;

  font-size: 14px;             /* ⭐ 图标内文字字号 */
  font-weight: 700;            /* ⭐ 图标内文字粗细 */
  line-height: 1;              /* ⭐ 避免文字上下偏移 */
  color: #ffffff;

  flex-shrink: 0;              /* ⭐ 防止图标被压缩 */
}

/* ======================================
   第二层导航栏PC 菜单 + 二级菜单
   ==================================== */

/* 中间菜单区域 */
.portal-nav-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 导航栏一级菜单文字（PC） */
.portal-nav-link {
  font-size: 16px;                 /* ⭐ 字号：导航栏标准字号 */
  font-weight: 400;                /* ⭐ 字重：常规，不加粗 */
  color: var(--portal-text-main);  /* ⭐ 默认字体颜色 */
  text-decoration: none;           /* 去掉下划线 */

  height: auto;                    /* ⭐ 不强制高度，由 padding 决定点击区域 */
  padding: 8px 14px;               /* ⭐ 上下 8px，左右 14px，保证点击区域舒适 */
  display: inline-flex;            /* ⭐ 让文字垂直居中 */
  align-items: center;             /* ⭐ 垂直居中对齐 */

  letter-spacing: 1.2px;           /* ⭐ 字间距：让中文不挤，更高级 */
  line-height: 1.45;               /* ⭐ 行高：更舒服的阅读体验 */

  border-radius: 999px;            /* ⭐ 胶囊形状（阿里云同款） */
  transition: color 0.15s ease,    /* ⭐ hover 文字颜色渐变 */
              background 0.15s ease; /* ⭐ hover 背景渐变 */
}

/* ⭐ 商品分类一级菜单字体加粗 */
.portal-nav-link.nav-item-category {
    font-weight: 600 !important;
}

/* /*------------- PC 导航栏底部滑块条（Vercel 风格）-----------------/* */

/* 底部滑块条（Vercel 风格） */
.portal-nav-menu {
  position: relative;
}

.portal-nav-underline {
  position: absolute;
  bottom: 8px; /* 根据字体/行高微调（可改为 6px 或 10px） */
  height: 2px;
  background: var(--portal-primary); /* 站点主色 */
  border-radius: 2px;

  width: 0;
  left: 0;
  transform: translateX(0);
  opacity: 0;

  transition:
    width 0.25s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.25s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.18s ease;
  pointer-events: none;
  will-change: width, transform, opacity;
}

/* 移动端隐藏滑块条（通常不需要） */
@media (max-width: 768px) {
  .portal-nav-underline { display: none; }
}
/* /*------------------- 菜单滑条代码结束---------------/* */

/* PC：导航栏菜单字体颜色 + hover 风格 */
.portal-nav-link:hover {
  color: var(--portal-primary);   /* 蓝色hover（字体变蓝），原来是var(--portal-text-main); */
  background: #f3f4f6;            /* 如不要灰底hover就换成：transparent;  */
}

/* ⭐ 一级菜单：当 mega panel 打开时保持高亮 */
.portal-nav-item-with-children.active-parent > .portal-nav-link {
    color: var(--portal-primary) !important;
    background: #f3f4f6 !important;
}

/* ⭐ 激活态（当前页面） */
.portal-nav-link.active {
  color: var(--portal-primary);
  background: var(--portal-primary-soft);
}

/* =========== PC 二级菜单（hover 下拉）（这是仅有二级菜单时的样式） =========== */

/* 包含子菜单的导航项 */
.portal-nav-item-with-children {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--portal-nav-height);
}

/* 一级菜单（有子菜单）样式 */
.portal-nav-link.has-children {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* PC 菜单下拉箭头（尺寸对齐右上角用户箭头） */
.portal-nav-link.has-children .arrow {
  font-size: 12px;      /* 缩小到和右上角一致的视觉大小 */
  line-height: 1;
  opacity: 0.7;
  font-weight: 400;
  transform: translateY(1px); /* 微调垂直位置，让箭头更居中 */
}

/* ⭐ PC 菜单：隐藏下拉箭头（不影响右上角用户菜单箭头） */
.portal-nav-menu .portal-nav-link.has-children .arrow {
    display: none !important;
}

/* 二级菜单容器 */
.portal-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 4px 0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  z-index: 2000;
}

/* hover 展开二级菜单 */
.portal-nav-item-with-children:hover .portal-submenu {
  display: block;
}

.portal-submenu a {
  display: block;
  padding: 6px 14px;
  white-space: nowrap;
  color: #111;
}

.portal-submenu a:hover {
  background: #f3f4f6;
}
/* =========== PC端二级菜单（hover 普通下拉样式）---结束---（这是一级菜单下仅有仅有二级菜单时的样式） =========== */


/* ============================================================
   按双层导航栏高度设置变量（高度数值到base.css内设置）
   ========================================================== */
/* ⭐ 第一层导航栏（portal_topbar.php） */
.portal-topbar {
    height: var(--portal-topbar-height);  
    /* ↑ 设置第一层导航栏的高度，使用你在 :root 定义的变量 --portal-topbar-height */
}

/* ⭐ 第二层导航栏（portal_nav.php） */
.portal-nav-second {
    height: var(--portal-nav-height);      
    /* ↑ 设置第二层导航栏的高度，使用变量 --portal-nav-height */

    top: var(--portal-topbar-height);      
    /* ↑ 第二层导航栏往下移动“第一层导航栏的高度”，避免两个导航栏重叠 */

    z-index: 900;                           
    /* ↑ 第二层导航栏的层级比第一层低（第一层是 1000），确保第一层在上面 */
}

/* ======================================================================================================================
   ------------------------------------PC 第一层导航栏的“搜索框区域”的样式---------------------------------------
   ====================================================================================================================== */
/* ============================================
   Amazon 搜索框：强制三块在一行显示
   ============================================ */

/* 外层容器本身就是一行 */
.portal-topbar-search .ui-search-bar {
    display: flex;
    align-items: center;
}

/* 表单强制用 flex，一行排布 */
.portal-topbar-search .ui-search-form {
    display: flex !important;
    align-items: stretch;
    width: 100%;
}

/* 左侧分类块：不要被全局样式拉满一行 */
.portal-topbar-search .ui-search-category {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* 分类下拉：取消 width:100% 之类的全局影响 */
.portal-topbar-search .ui-search-category select {
    width: auto !important;
    display: inline-block !important;
}

/* 中间输入框：占据中间所有剩余空间 */
.portal-topbar-search .ui-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    display: block;
}

/* 右侧按钮：固定宽度，不要 100% */
.portal-topbar-search .ui-search-btn {
    flex: 0 0 auto;
    width: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* ============================================
   顶部搜索框（中间栏，真正让搜索框居中）
   ============================================ */
.portal-topbar-search {
    flex: 1;                     /* 让它占据中间所有空间 */
    display: flex;
    justify-content: center;     /* 水平居中搜索框 */
    align-items: center;         /* 垂直居中 */
    min-width: 0;                /* 防止被左右挤爆 */
}

/*======================================================================
-------- PC Mega Menu（双栏菜单窗口）----抽离为单独的CSS样式文件了------
======================================================================== */
 
/* ============================
   PC 下显示/隐藏设置代码
   ============================ */
/* ⭐⭐ 在这里插入 PC/手机菜单切换 ⭐⭐ */
.portal-menu-pc {
    display: block;
}

.portal-menu-mobile-top {
    display: none;
}
/* ⭐⭐ 插入结束 ⭐⭐ */

/* ⭐⭐ 这段可用，可删除，好像没影响 ⭐⭐ */
@media (min-width: 769px) {
  .mega-menu {
    display: none !important;
  }
}

/* ========================================================================================
   按钮体系（统一 + danger 按钮）
   ======================================================================================== */
/* 按钮体系（统一 + danger 按钮） */
.portal-btn-ghost,
.portal-btn-primary,
.portal-btn-secondary,
.portal-btn-danger {
  font-size: 15px;              /* ⭐ 字号 */
  font-weight: 400;             /* ⭐ 字体粗细 */
  letter-spacing: 0.5px;        /* ⭐ 字间距：让中文更高级 */
  line-height: 1.45;            /* ⭐ 行高：按钮高度更稳定 */
  border-radius: 999px;         /* ⭐ 胶囊按钮 */
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/* 登录按钮 */
.portal-btn-ghost {
  border: none;
  background: transparent;
  padding: 6px 12px;
  color: var(--portal-text-muted);
}
.portal-btn-ghost:hover {
  background: #f3f4f6;
  color: var(--portal-text-main);
}

/* 注册按钮 */
.portal-btn-primary {
  border: none;
  background: var(--portal-primary);
  color: #ffffff;
  padding: 8px 16px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}
.portal-btn-primary:hover {
  background: var(--portal-primary-hover);
  transform: translateY(-1px);
}

/* 你的后台按钮 */
.portal-btn-secondary {
  border: none;
  background: #e5e7eb;
  color: #111827;
  padding: 8px 16px;
}
.portal-btn-secondary:hover {
  background: #d1d5db;
  transform: translateY(-1px);
}

/* 退出登录按钮 */
.portal-btn-danger {
  border: none;
  background: #ef4444;
  color: #ffffff;
  padding: 8px 16px;
}
.portal-btn-danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

/* PC 端隐藏 mobile 按钮 */
@media (min-width: 769px) {
  #portal-btn-login-mobile,
  #portal-btn-register-mobile,
  #portal-btn-dashboard-mobile,
  #portal-user-info-mobile,
  #portal-btn-logout-mobile {
    display: none;
  }

  /* ⭐ PC 端彻底隐藏 mobile 菜单 */
  .mobile-menu-list {
    display: none !important;
  }

  /* ⭐ PC 端隐藏 mobile 双栏菜单 */
  .portal-mobile-mega {
    display: none !important;
  }
}