/* ==============================================================================
   /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);注销换成下面数据库配置版*/
  background: var(--portal-nav-bg, rgba(255,255,255,0.92));
  backdrop-filter: blur(12px);
  /*border-bottom: 1px solid rgba(229, 231, 235, 0.8);  改成下面这行数据库变量配置版   /*  1.2层导航栏分割线 */
  border-bottom: 1px solid var(--portal-border-color, 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 菜单下拉箭头（尺寸对齐右上角用户箭头） */
.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;
}
  ======================================================== */

/* ======================================================================================================================
   ---------------------------------------------------------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;              /* ⭐ 防止图标被压缩 */
}

/* Logo图片宽高，高度和SVG代码图标一样 */
.portal-logo {
  height: 28px;       /* ← 高度 */
  max-width: 46px;    /* ← 限制最大宽度 */
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  
  border-radius: 6px;   /* ← 加上这个，四角圆弧 */
}

/* 限制 Logo 区域最大宽度 */
.portal-nav-brand-wrapper {
  max-width: 220px;   /* 你可以改成 180 / 200 / 240 */
  overflow: hidden;
  flex-shrink: 0;     /* 防止被压缩 */
}

/* Logo 内部布局 */
.portal-nav-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 网站名字自动省略号 */
.portal-nav-brand span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: 16px;
  font-weight: 600;
  /*color: #111827;*/    /* 字体颜色，改为下面这种数据库动态配置版 */
  color: var(--topbar-text, #111827);
}

/* ======================================
   第二层导航栏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);  注销换成下面数据库配置版   /* ⭐ 默认字体颜色 */
  color: var(--portal-nav-text, #111827);  /* ⭐ 默认字体颜色（改成配置变量） */
  text-decoration: none;           /* 去掉下划线 */

  height: auto;                    /* ⭐ 不强制高度，由 padding 决定点击区域 */
  padding: 4px 12px;               /* ⭐ 修改胶囊长高尺寸：数值代表hover上下 ，左右 ，保证点击区域舒适 */
  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: 4px; /*原来是根据字体/行高微调，原8px，实测在调整胶囊大小后，4px也行，0的话是紧贴了 */
  height: 2px;
  /*background: var(--portal-primary); /* 滑条颜色--站点主色（改成下面数据库配置版） */
  background: var(--portal-nav-hover-text);  /* 滑条颜色← 跟随后台 hover 字体色 */
 
  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（字体变蓝） */
  /*background: #f3f4f6;           注销换成下面数据库配置版   /* 如不要灰底hover就换成：transparent;  */
  color: var(--portal-nav-hover-text, var(--portal-primary)); /* 新增变量，默认蓝色 */
  background: var(--portal-nav-hover, #f3f4f6);
}

/* ⭐ ------------------导航栏挂网式菜单箭头（替换 ▼）------------------ */
.portal-nav-link.has-children .arrow {
    display: inline-block;
    width: 0;
    height: 0;

    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    /*border-top: 6px solid var(--portal-text-main);  /* 一级菜单下拉箭头颜色，改成下面这个数据库版 */
	border-top: 6px solid var(--portal-nav-text); /* ← 一级菜单下拉箭头颜色，改成跟随字体颜色 */
	
    margin-left: 4px;
    transform: translateY(1px);
    transition: transform .25s ease;
}

/* Hover 时箭头颜色 = hover 字体色 */
.portal-nav-link.has-children:hover .arrow {
    border-top-color: var(--portal-nav-hover-text);
}

/* Active 时箭头颜色 = hover 字体色 */
.portal-nav-link.active .arrow {
    border-top-color: var(--portal-nav-hover-text);
}

/* 挂网式（hang）Panel 打开时箭头颜色 */
body.panel-open-hang .portal-nav-item-hang.active-parent-hang .portal-nav-link .arrow {
    border-top-color: var(--portal-nav-hover-text) !important;
}

/* 图片版（hang_img）Panel 打开时箭头颜色 */
body.panel-open-hang_img .portal-nav-item-hang_img.active-parent-hang_img .portal-nav-link .arrow {
    border-top-color: var(--portal-nav-hover-text) !important;
}

/* Grid 四列版 Panel 打开时箭头颜色 */
body.panel-open-grid .portal-nav-item-grid.active-parent-grid .portal-nav-link .arrow {
    border-top-color: var(--portal-nav-hover-text) !important;
}

/* ⭐ 一级菜单：当 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-nav-hover-text);
  background: var(--portal-nav-hover);
}

/* ====================================================
   普通下拉菜单样式（从portal.nav.css抽离出来）
   抽离到portal.nav.dropdown.css单独文件内
 ======================================================  */ 

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

/* ============================
   第一层导航栏颜色（新增）
   ============================ */
.portal-topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
}

/* 顶部导航栏文字颜色 */
.portal-topbar a,
.portal-topbar span,
.portal-topbar .username {
    color: var(--topbar-text);
}

/* ⭐ 用户区域默认状态：保持与 hover 一致的尺寸，避免抖动 */
.portal-user-trigger {
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ⭐ 用户区域 hover：跟随后台 hover 字体颜色 + 胶囊效果 */
.portal-user-trigger:hover {
    background: var(--topbar-hover) !important;
    color: var(--topbar-hover-text) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
}

/* ⭐ 用户名和箭头也要跟随 hover 颜色 */
.portal-user-trigger:hover .username,
.portal-user-trigger:hover .arrow {
    color: var(--topbar-hover-text) !important;
}

/* 第一层导航栏--Hover 效果 */
.portal-topbar a:hover,
.portal-topbar .portal-orders-link:hover,
.portal-topbar .portal-cart-link:hover {
    background: var(--topbar-hover);
    color: var(--topbar-hover-text);
}

/* ⭐ 第一层导航栏：让 hover 变成胶囊型 */
.portal-topbar a {
    padding: 4px 12px;        /* 与第二层导航栏一致 */
    border-radius: 999px;     /* 胶囊形状 */
    display: inline-flex;
    align-items: center;
}

/* Logo 文字颜色跟随 */
.portal-nav-brand span {
    color: var(--topbar-text);
}

/* ⭐ Logo 文本 hover 跟随后台 hover 字体颜色 */
/* ⭐ Logo 整体 hover 变色 */
.portal-nav-brand:hover,
.portal-nav-brand:hover span {
    color: var(--topbar-hover-text) !important;
}

/* ⭐ 第二层导航栏（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样式文件了------
======================================================================== */
/* ============================================================
   ⭐ 方案 C：Panel 打开时强制保持一级菜单 hover + 下划线
   ========================================================== */
/* 下面都改成了数据库驱动版 */
/* 挂网式（hang） */
body.panel-open-hang .portal-nav-item-hang.active-parent-hang .portal-nav-link {
    color: var(--portal-nav-hover-text) !important;
    background: var(--portal-nav-hover) !important;
}

/* 图片版（hang_img） */
body.panel-open-hang_img .portal-nav-item-hang_img.active-parent-hang_img .portal-nav-link {
    color: var(--portal-nav-hover-text) !important;
    background: var(--portal-nav-hover) !important;
}

/* Grid 四列版 */
body.panel-open-grid .portal-nav-item-grid.active-parent-grid .portal-nav-link {
    color: var(--portal-nav-hover-text) !important;
    background: var(--portal-nav-hover) !important;
}

/* ============================
   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;
  }
}

/* ================================================
   PC端第二层导航栏菜单弹窗遮罩（保持放在文件末尾）
   ============================================== */
   
#portal-nav-overlay {
    position: fixed;
    top: calc(var(--portal-topbar-height) + var(--portal-nav-height));
	/* ⭐top: var(--portal-topbar-height); /* ⭐ 从第一层导航栏底部开始覆盖 */
    left: 0;
    right: 0;
    bottom: 0;

    background: rgba(0,0,0,0.35);
    /* ⭐backdrop-filter: blur(2px);   /* ⭐ 这行代码作用：对遮罩后面的所有内容进行模糊处理(如果不行模糊处理，注销掉这行即可) */

    opacity: 0;
    pointer-events: none;

    transition: opacity .25s ease;
    z-index: 880;  /* ⭐ 必须高于第三层导航栏(850)，低于第二层导航栏(900) */
}

body.nav-overlay-open #portal-nav-overlay {
    opacity: 1;
    pointer-events: auto;
}     /* ⭐ 遮罩代码插入结束 */