/**
 * 全站页头/导航重设计（煒勤有貿易品牌色系）
 * 品牌色：中蓝 #2374B9 / 天空蓝 #3E9BDF / 金 #F5C542 / 浅蓝底 #E3F1FC
 * 本文件在皮肤 CSS 与 responsive.css 之后加载，仅覆盖页头/导航/顶栏
 */

/* ============ 1. 顶部工具条：浅蓝细条 ============ */
.top_main {
    background: #E3F1FC;
    color: #2A6CA8;
    height: 38px;
    line-height: 38px;
    border-bottom: 0;
}
.top_main .welcome-text, .top_main .mobile-hotline { color: #2A6CA8; }
.top_main ul li a { color: #2A6CA8; }
.top_main ul li a:hover { color: #2374B9; }
.top_main li.lang-switch a {
    border: 1px solid rgba(42, 108, 168, .45);
    color: #2A6CA8;
    padding: 2px 12px;
    border-radius: 20px;
    transition: all .2s;
}
.top_main li.lang-switch a:hover {
    background: #2A6CA8;
    color: #fff;
}

/* ============ 2. 页头：白底紧凑 + WhatsApp 按钮 ============ */
.header_main {
    background: #fff;
    height: auto;
    box-shadow: 0 1px 0 #edf1f5;
}
.header_main .header {
    padding: 12px 0;
    display: flex; align-items: center; justify-content: space-between;
}
/* clearfix 伪元素在 flex 容器内会成为多余的第三项，把右侧内容挤离右边缘 */
.header_main .header::after { display: none; }
.header_main .logo { margin: 0; }
.header_main .logo .logo-full { width: auto; height: 76px; }
.header_main .ewm { display: none; }
.header_main .wa-pill { display: none; }
/* 右侧浮动工具栏（聯絡電話/返回頂部）：按需求整体隐藏 */
.toolbar { display: none; }
.header_main .header-contact {
    display: flex; align-items: center; gap: 22px;
}
/* 页头右侧 WhatsApp 热线：圆形徽标 + 两行文字（标签/号码），整块可点击 */
.header_main .tel {
    display: flex; align-items: center; gap: 12px;
    width: auto; margin-right: 0;
    text-decoration: none;
}
.header_main .tel img { display: none; }
.header_main .tel .tel-ico {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(37, 211, 102, .12);
    transition: background .25s;
}
.header_main .tel .tel-ico svg { width: 23px; height: 23px; fill: #1EB85A; transition: fill .25s; }
.header_main .tel .tel-txt p { font-size: 12px; color: #7c8ea0; margin: 0; line-height: 1.5; letter-spacing: .04em; }
.header_main .tel .tel-txt b {
    display: block; font-size: 21px; color: #2374B9; font-weight: 700;
    line-height: 1.25; letter-spacing: .02em; white-space: nowrap;
}
.header_main .tel:hover { text-decoration: none; }
.header_main .tel:hover .tel-ico { background: #25D366; }
.header_main .tel:hover .tel-ico svg { fill: #fff; }
.header_main .tel:hover .tel-txt b { color: #3E9BDF; }
.wa-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: #25D366; color: #fff !important;
    font-size: 15px; font-weight: 600;
    padding: 11px 22px; border-radius: 30px;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
    transition: all .25s; text-decoration: none;
}
.wa-pill svg { width: 18px; height: 18px; fill: #fff; }
.wa-pill:hover {
    background: #1fbf5b; color: #fff !important;
    transform: translateY(-2px); text-decoration: none;
    box-shadow: 0 10px 22px rgba(37, 211, 102, .45);
}

/* ============ 3. 导航栏：白底吸顶 + 金色下划线 ============ */
.nav_main {
    background: #fff;
    height: 58px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 1px 0 #eef2f6;
    transition: box-shadow .25s;
}
.nav_main.scrolled { box-shadow: 0 8px 22px rgba(35, 116, 185, .12); }
.nav_main .nav li {
    width: auto; padding: 0 36px; line-height: 58px;
}
.nav_main .nav li a {
    color: #2374B9; font-size: 16px; font-weight: 600;
}
.nav_main .nav li::after {
    content: ""; position: absolute; left: 50%; bottom: 0;
    width: 0; height: 3px; background: #F5C542;
    transform: translateX(-50%);
    transition: width .25s;
}
.nav_main .nav li:hover, .nav_main .nav li.hover { background: transparent; }
.nav_main .nav li:hover::after, .nav_main .nav li.hover::after { width: 56%; }
.nav_main .nav li:hover > a, .nav_main .nav li.hover > a { color: #3E9BDF; }

/* 桌面端导航链接居中排布，与页头左右平衡布局协调 */
@media screen and (min-width: 769px) {
    .nav_main .nav { display: flex; justify-content: center; }
}
/* 下拉菜单：白色卡片 */
.nav_main .nav dl { background: #fff; border-radius: 0 0 8px 8px; overflow: hidden; }
.nav_main .nav dl dd { float: none; width: 100%; line-height: 44px; border-bottom: 1px solid #f1f5f9; }
.nav_main .nav dl dd:last-child { border-bottom: 0; }
.nav_main .nav dl dd a { color: #2374B9 !important; font-size: 14px; }
.nav_main .nav dl dd a:hover { color: #3E9BDF; background: #f4f7fa; }

/* ============ 4. 移动端 ≤768px ============ */
@media screen and (max-width: 768px) {
    .top_main { background: #E3F1FC; padding: 0 12px; }
    .header_main .logo .logo-compact { height: 50px; }
    .header_main .header { padding-left: 16px; padding-right: 16px; }
    .header_main .tel { gap: 8px; }
    .header_main .tel p { display: none; }
    .header_main .tel .tel-ico { width: 36px; height: 36px; }
    .header_main .tel .tel-ico svg { width: 19px; height: 19px; }
    .header_main .tel .tel-txt b { font-size: 16px; }
    .footer .contact { width: auto; margin-left: 0; padding-left: 0; float: none; }

    .nav_main { background: #fff; }
    .mobile-nav-btn i { background: #2374B9; }
    .mobile-lang-btn { color: #2374B9; border-color: rgba(35, 116, 185, .4); }
    .nav_main ul.nav {
        background: #fff;
        box-shadow: 0 16px 30px rgba(35, 116, 185, .18);
    }
    .nav_main ul.nav li { border-bottom: 1px solid #eef2f6; }
    .nav_main ul.nav li > a { color: #2374B9 !important; }
    .nav_main ul.nav li dl { background: #f5f8fb; }
    .nav_main ul.nav li dl dd a { color: #3E9BDF !important; }
}

/* ============ 5. 右侧浮动工具栏重设计（品牌色） ============
 * 覆盖 skin/benyun/css/style.css 的旧工具栏样式：
 * 仅保留「联络电话」「返回顶部」，深蓝渐变底 + 金色图标，hover 金底深蓝字 */
.toolbar {
    position: fixed;
    top: 50%;
    right: 16px;
    z-index: 998;
    width: 66px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
}
.toolbar dd {
    position: relative;
    float: none;
    width: 66px;
    height: auto;
    margin: 10px 0 0;
    padding: 12px 0 10px;
    background: linear-gradient(165deg, #3E9BDF 0%, #2374B9 100%);
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(35, 116, 185, .28);
    transition: background .3s, color .3s, transform .3s, box-shadow .3s;
}
.toolbar dd:first-child { margin-top: 0; }
.toolbar dd em.ico { display: block; width: 22px; height: 22px; margin: 0 auto 6px; }
.toolbar dd em.ico svg { display: block; width: 100%; height: 100%; fill: #F5C542; transition: fill .3s; }
.toolbar dd span { display: block; padding: 0 4px; color: #fff; }
.toolbar dd:hover {
    background: linear-gradient(165deg, #F7CC55 0%, #E8B322 100%);
    color: #2374B9;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(35, 116, 185, .35);
}
.toolbar dd:hover span { color: #2374B9; }
.toolbar dd:hover em.ico svg { fill: #2374B9; }

/* 电话弹出卡片：按钮左侧滑出 */
.toolbar dd.tel .box {
    position: absolute;
    top: 50%;
    right: calc(100% + 16px);
    width: 208px;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    background: #2374B9;
    border-radius: 12px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(10px);
    transition: opacity .3s, transform .3s, visibility .3s;
    box-shadow: 0 10px 26px rgba(35, 116, 185, .35);
}
.toolbar dd.tel .box:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    margin: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #2374B9;
    transform: translateY(-50%);
}
.toolbar dd.tel .box p { font-size: 13px; margin: 0 0 4px; color: #5B9BD0; line-height: 1.6; }
.toolbar dd.tel .box h3 { font-size: 19px; font-weight: 700; color: #F5C542; letter-spacing: .5px; line-height: 1.4; }
.toolbar dd.tel:hover .box {
    opacity: 1;
    visibility: visible;
    right: calc(100% + 16px);
    transform: translateY(-50%) translateX(0);
}


/* 页头右侧 WhatsApp 热线与 logo 同一水平线（清除皮肤样式残留的 padding-top:50px） */
.header_main .tel { padding: 0; }