@charset "UTF-8";

/*
 * 流体机械商贸云前台主题
 * 设计方向：科技蓝、浅蓝页面底色、白色信息卡片。
 * 此文件只覆盖视觉变量与交互状态，不改变页面内容和业务结构。
 */
:root {
  --color1: #1677ff;
  --brand-primary: #1677ff;
  --brand-primary-hover: #075fd8;
  --brand-accent: #35b8ff;
  --brand-gradient: linear-gradient(135deg, #35b8ff 0%, #1677ff 54%, #075fd8 100%);
  --brand-soft: #eaf5ff;
  --brand-soft-strong: #d8ecff;
  --page-bg: #eef7ff;
  --surface: #ffffff;
  --surface-muted: #f7fbff;
  --text-primary: #17233d;
  --text-secondary: #5f6f86;
  --border-soft: #dbeafe;
  --shadow-soft: 0 8px 28px rgba(36, 104, 174, 0.08);
  --shadow-hover: 0 14px 34px rgba(22, 119, 255, 0.14);
}

html {
  background: var(--page-bg);
}

body {
  background-color: var(--page-bg) !important;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body :focus-visible {
  outline: 3px solid rgba(22, 119, 255, 0.28);
  outline-offset: 2px;
}

.new-home {
  background-color: var(--page-bg) !important;
  background-image: url("/home_new_images/topBG.webp") !important;
}

.page-bg {
  background-color: var(--page-bg) !important;
  background-image: url("/home_new_images/topBG.webp") !important;
}

/* 顶部与搜索区 */
.top-bar {
  color: var(--text-secondary);
}

.top-bar .left a:hover,
.top-bar .right a:hover,
.top-mobile-trigger:hover,
.hot-keywords a:hover,
.top-bar a[style*="#e62129"] {
  color: var(--brand-primary) !important;
}

.top-mobile-qrcode,
.search-options {
  border-color: var(--border-soft) !important;
  box-shadow: var(--shadow-soft) !important;
}

.search-box {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 6px 20px rgba(22, 119, 255, 0.12) !important;
}

.search-box:focus-within {
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.12), 0 8px 24px rgba(22, 119, 255, 0.14) !important;
}

.search-options li:hover,
.search-options li.active {
  color: var(--brand-primary) !important;
  background: var(--brand-soft) !important;
}

.search-box .btn-search,
.btn-action.primary {
  background: var(--brand-gradient) !important;
  box-shadow: 0 5px 16px rgba(22, 119, 255, 0.22);
}

.search-box .btn-search:hover,
.btn-action.primary:hover {
  background: linear-gradient(135deg, #249eef 0%, #075fd8 100%) !important;
  transform: translateY(-1px);
}

.btn-action.outline {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-action.outline:hover {
  background: var(--brand-soft) !important;
}

/* 主导航与焦点图区 */
.white-card-container,
.fair-section,
.recommend-card,
.dock-body,
.meeting-section,
.video-section,
.floor-section,
.news-section {
  border: 1px solid rgba(188, 220, 250, 0.58);
  box-shadow: var(--shadow-soft) !important;
}

.main-nav .nav-item.active {
  background: var(--brand-gradient) !important;
  box-shadow: 0 7px 18px rgba(22, 119, 255, 0.2);
}

.main-nav .nav-item:hover:not(.active),
.nav-dropdown a:hover,
.cat-title,
.category-menu li:hover {
  color: var(--brand-primary) !important;
}

.main-nav .nav-item:hover:not(.active),
.nav-dropdown a:hover {
  background: var(--brand-soft) !important;
}

.category-menu {
  background: linear-gradient(180deg, #f5fbff 0%, #eaf5ff 100%) !important;
  border: 1px solid var(--border-soft);
}

.category-menu li:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 5px 14px rgba(22, 119, 255, 0.08);
}

.hero-banner-area,
.hero-banner-area img,
.hero-slider {
  background: #e6f2ff;
}

.hero-dots .swiper-pagination-bullet-active,
.news-featured-pagination .swiper-pagination-bullet-active {
  background: var(--brand-primary) !important;
}

.quick-link-item {
  background: linear-gradient(135deg, #f7fbff 0%, #edf7ff 100%) !important;
  border-color: #cfe6fb !important;
}

.quick-link-item:hover {
  border-color: var(--brand-soft-strong) !important;
  box-shadow: var(--shadow-hover) !important;
}

.recommend-card .rec-header h3 .rec-icon-img,
.dock-title-icon,
.dock-sub-icon,
.meeting-title-icon,
.video-title-icon,
.rb-title-icon,
.news-section-title h2 > img {
  filter: hue-rotate(208deg) saturate(1.2) brightness(1.02);
}

/* 首页卡片、链接和业务按钮 */
.sec-title .more:hover,
.list-item a:hover,
.fair-header .fair-tabs a:hover,
.fair-header .fair-more:hover,
.recommend-card .rec-header .rec-more:hover,
.dock-section-title .more:hover,
.dock-left .dock-sub-header .sub-more:hover,
.meeting-section-title .more:hover,
.video-section-title .more:hover,
.rec-brands-more:hover,
.rec-brand-box .rb-more:hover,
.news-section-title .more:hover,
.news-item-title:hover,
.news-sec .news-item:hover .title,
.product-card .price,
.pc-custom-footer .f-top a:hover,
.pc-custom-footer .fm-link-col a:hover,
main.member .section_box7 .name:hover,
main.supplier .section_box7 .name:hover {
  color: var(--brand-primary) !important;
}

.list-item .badge {
  color: var(--brand-primary) !important;
  background: var(--brand-soft) !important;
  border-color: #b9ddff !important;
}

.grid-item:hover {
  border-color: #b9ddff !important;
  box-shadow: 0 8px 22px rgba(22, 119, 255, 0.1) !important;
}

.dock-sec .right-form,
.dock-right {
  background: linear-gradient(180deg, #f2f9ff 0%, #e6f4ff 100%) !important;
  border-color: var(--border-soft) !important;
}

.right-form input:focus,
.dock-right .dock-form input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
}

.code-area button,
.event-card .info .btn,
.dock-purchase-item .buy-btn,
.meeting-card .mc-info .mc-btn {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.right-form .submit-btn,
.event-card .info .btn:hover,
.floor-sec .tab.active,
.floor-sec .tab:hover,
.dock-purchase-item .buy-btn:hover,
.dock-right .dock-form .publish-btn,
.meeting-card .mc-info .mc-btn:hover,
.bb-service-btn {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(22, 119, 255, 0.2);
}

.right-form .submit-btn:hover,
.dock-right .dock-form .publish-btn:hover,
.bb-service-btn:hover {
  background: linear-gradient(135deg, #249eef 0%, #075fd8 100%) !important;
}

.floor-sec .tab.active::after {
  border-top-color: var(--brand-primary) !important;
}

.floor-tabs .floor-tab.active {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(22, 119, 255, 0.18);
}

.floor-tabs .floor-tab:hover:not(.active) {
  background: var(--brand-soft) !important;
}

.vid-card:hover .play,
.video-card:hover .vc-play {
  background: rgba(22, 119, 255, 0.86) !important;
}

.rec-brand-box {
  border-color: #b9ddff !important;
  box-shadow: 0 8px 24px rgba(22, 119, 255, 0.07);
}

.news-section-title .ns-icon svg {
  color: var(--brand-primary) !important;
}

.news-section-title .ns-icon img {
  filter: brightness(0) saturate(100%) invert(46%) sepia(99%) saturate(3649%) hue-rotate(203deg) brightness(104%) contrast(102%);
}

/* 商铺页继承统一品牌色 */
main.shops .nav a:hover {
  background-color: var(--brand-primary) !important;
}

main.shops .nav a.on {
  color: var(--brand-primary) !important;
}

/* 图片呈现和低干扰微交互 */
.new-home img,
main img {
  image-rendering: auto;
}

.meeting-card img,
.video-card img,
.floor-product-card img,
.rec-brand-box img,
.news-featured img,
.recommend-card img {
  transition: transform 0.28s ease, filter 0.28s ease;
}

.meeting-card:hover img,
.floor-product-card:hover img,
.rec-brand-box:hover img,
.recommend-card:hover img {
  transform: scale(1.025);
}

.float-toolbar {
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft) !important;
}

.float-toolbar .ft-item:hover {
  background: var(--brand-soft) !important;
}

.float-toolbar .ft-item:first-child img {
  filter: hue-rotate(208deg) saturate(1.2) brightness(1.02);
}

.pc-custom-footer {
  background-color: #eff7ff !important;
  background-image: url("/home_new_images/footer_bg.webp") !important;
}

.bottom-banner-sec {
  background-image: url("/home_new_images/bottom_banner_frame.webp") !important;
}

.bb-hotline-number {
  color: var(--brand-primary) !important;
}

/* 子频道页面在正文中带有旧版红色样式，这里统一收口到科技蓝主题 */
.new-home .swiper-pagination-bullet-active,
main .swiper-pagination-bullet-active {
  background-color: var(--brand-primary) !important;
}

.product-right-shops .pr-shop-card .pr-btn,
.pr-join-btn,
.prod-rec-item .p-btn {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.product-right-shops .pr-shop-card .pr-btn:hover,
.prod-rec-item .p-btn:hover,
.pr-join-btn:hover {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--brand-gradient) !important;
}

.brand-rec-item {
  border-color: #b9ddff !important;
}

.brand-rec-header .br-more:hover,
.cat-tab-item:hover {
  color: var(--brand-primary) !important;
}

.buyer-hero-right .bhr-submit-btn,
#newsMoreLink {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--brand-gradient) !important;
  box-shadow: 0 7px 18px rgba(22, 119, 255, 0.2) !important;
}

.buyer-hero-right .bhr-submit-btn:hover,
#newsMoreLink:hover {
  background: linear-gradient(135deg, #249eef 0%, #075fd8 100%) !important;
}

.news-tab-item:hover,
.news-tab-item.active,
.news-tab-item.active .tab-icon,
.share-btn,
.share-btn:hover {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.news-tab-item.active {
  border-bottom-color: var(--brand-primary) !important;
}

.share-btn img {
  filter: hue-rotate(208deg) saturate(1.2) brightness(1.02);
}

/* 产品频道 */
.brand-rec-item:hover {
  border-color: var(--brand-primary) !important;
  box-shadow: var(--shadow-hover) !important;
}

.cat-tab-item.active {
  color: #fff !important;
  background: var(--brand-gradient) !important;
}

.brand-rec-header .br-title img,
.prod-rec-header img {
  filter: hue-rotate(208deg) saturate(1.2) brightness(1.02);
}

/* 供应商频道与品牌页 */
.vr-card-title,
.cv-tab.active {
  color: #fff !important;
  background: var(--brand-gradient) !important;
}

.brand-cat-tab {
  color: #fff !important;
  background: var(--brand-gradient) !important;
  -webkit-mask: url('/home_new_images/brand_hot_bg.svg') no-repeat center / 100% 100%;
  mask: url('/home_new_images/brand_hot_bg.svg') no-repeat center / 100% 100%;
}

.vs-join-btn {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.vs-join-btn:hover {
  color: #fff !important;
  background: var(--brand-gradient) !important;
}

.sec-header .sec-more:hover,
.qv-card-head .qv-name a:hover,
.qv-card-head .qv-more:hover,
.cv-tab:hover,
.brand-cat-title .cat-icon,
.brand-cat-more:hover {
  color: var(--brand-primary) !important;
}

.cv-vendor-card,
.brand-logo-card:hover {
  border-color: rgba(22, 119, 255, 0.42) !important;
}

.cv-vendor-card:hover,
.brand-logo-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

.vs-item .vs-icon img,
.sec-header .sec-title img,
.cv-vendor-card .cv-arrow {
  filter: hue-rotate(208deg) saturate(1.2) brightness(1.02);
}

.brand-cat-video .video-play-btn::after {
  border-left-color: var(--brand-primary) !important;
}

/* 采购频道 */
main.purchase .buyer-hero-right {
  background: linear-gradient(180deg, rgba(22, 119, 255, 0.18) 0%, rgba(53, 184, 255, 0.22) 100%) !important;
}

.hp-more:hover,
.hp-card-title:hover,
.hp-prod-title:hover {
  color: var(--brand-primary) !important;
}

.hp-quote-btn {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.hp-quote-btn:hover {
  color: #fff !important;
  background: var(--brand-gradient) !important;
}

.buyer-service-item {
  background: rgba(22, 119, 255, 0.055) !important;
}

.buyer-service-item:hover {
  box-shadow: var(--shadow-hover) !important;
}

.buyer-process-step {
  border-color: var(--brand-primary) !important;
}

.buyer-process-step .bp-number {
  border-color: transparent var(--brand-primary) transparent transparent !important;
}

.hp-title img,
.buyer-service-item .bs-icon,
.buyer-service-title-row .title-decor,
.buyer-process-title-row .title-decor,
.buyer-process-arrow img {
  filter: hue-rotate(208deg) saturate(1.2) brightness(1.02);
}

/* 资讯频道 */
.news-tab-nav {
  background: var(--brand-soft) !important;
}

.article-title:hover,
.sidebar-activity-item:hover .sa-title,
.sidebar-video-item:hover .sv-title,
.sidebar-more:hover {
  color: var(--brand-primary) !important;
}

.news-load-more a,
.sidebar-video-item:hover .sv-play-btn {
  color: #fff !important;
  background: var(--brand-gradient) !important;
}

.news-load-more a:hover {
  background: linear-gradient(135deg, #249eef 0%, #075fd8 100%) !important;
}

.sidebar-title {
  background-color: var(--brand-primary) !important;
  background-image: var(--brand-gradient) !important;
}

.news.news-detail-page .mbx1 .bx a:hover,
.news.news-detail-page .section2 .flex_box1 .l .info .page a:hover,
.news.news-detail-page .section2 .flex_box1 .r .box_1 .son a:hover p {
  color: var(--brand-primary) !important;
}

.news.news-detail-page .section2 .flex_box1 .r .box_1 .tit::before {
  background: var(--brand-gradient) !important;
}

/* 视频频道 */
.video-sec-more:hover,
.video-card:hover .video-card-name,
.vcourse-back:hover {
  color: var(--brand-primary) !important;
}

.play-icon::after,
.vcourse-list-page .play-icon::after {
  border-left-color: var(--brand-primary) !important;
}

.video-sec-title .sec-icon[style*="linear-gradient"],
#noVideoModal button,
.vcourse-detail .vd-external-link {
  color: #fff !important;
  background: var(--brand-gradient) !important;
}

.vcourse-list-page .vcourse-category-tabs a:hover,
.vcourse-list-page .vcourse-category-tabs a.on {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.vcourse-detail .vd-external-link:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* 供应商会员中心沿用同一交互色 */
.contact-visibility-buttons button.on,
.vendor-security-actions button {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--brand-gradient) !important;
}

.vendor-security-card input:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.12) !important;
}

#vendor-password-feedback,
.bind-mobile-modal a {
  color: var(--brand-primary) !important;
}

/* 首页内容稳定性：13 个分类、加长主营文案与行业动态焦点图。 */
.new-home .category-menu ul {
  min-height: 0;
}

.new-home .category-menu li {
  flex: 0 1 auto;
  min-height: 31px;
}

.new-home .rec-brand-box .rb-category {
  -webkit-line-clamp: 4;
}

.new-home .news-featured {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  align-self: flex-start;
}

.new-home .news-featured .swiper-wrapper,
.new-home .news-featured-slide,
.new-home .news-featured img {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .new-home .category-menu li {
    flex: 0 0 calc(50% - 5px);
    min-height: 0;
  }

  .new-home .news-featured {
    height: auto;
  }
}

@media (max-width: 480px) {
  .new-home .category-menu li {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}