/* -------------------------
 * 1. 顶部 Header
 * ------------------------- */
.top-header {
    background-color: #fff; /* Bootstrap 'success' 绿色 */
}
.top-header .vr {
    background-color: #fff;
    opacity: 0.5;
}

/* -------------------------
 * 2. Banner 和表单
 * ------------------------- */
.banner-section {
    position: relative;
}

.carousel-item {
    height: 435px;
    background-size: cover;
    background-position: center;
}

/* 表单浮层 */
.pricing-form-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    /* 在小屏幕上移除左侧对齐，让表单居中 */
}

.pricing-form-card {
    background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
    border: none;
}

/* 小屏幕适配：Banner高度降低，表单变为静态 */
@media (max-width: 767.98px) {
    .carousel-item {
        height: 250px; /* 手机上高度小一点 */
    }
    
    .pricing-form-overlay {
        position: static; /* 解除浮动 */
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: #f8f9fa; /* 浅灰色背景 */
    }
    .pricing-form-card {
         background-color: #ffffff; /* 纯白背景 */
    }
}

/* -------------------------
 * 3. Banner下方的条幅 (convenient)
 * ------------------------- */
.convenient-section {
    background-color: #f8f9fa;
}
.convenient-section .form-control {
    border: 1px solid #ced4da; /* 恢复边框 */
}

/* -------------------------
 * 4. 下单流程 (star-step)
 * ------------------------- */
.star-step-section .left {
    color: #333;
}
.star-step-section .left p {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.procedure-items {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* 手机上换行 */
}
.procedure-items .item {
    text-align: center;
    margin: 10px;
    flex-basis: 100px; /* 确保每个项目有基础宽度 */
}
/* icon 占位符样式 */
.procedure-items .icon {
    width: 60px;
    height: 60px;
    background-color: #e9ecef;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #198754;
    /* 模拟背景图 */
    background-image: url('https://via.placeholder.com/60/198754/FFFFFF?text=Icon');
}
/* 示例：您可以替换为您自己的雪碧图或图标 */
.procedure-items .icon.p1 { background-image: url('https://via.placeholder.com/60/198754/FFFFFF?text=1'); }
.procedure-items .icon.p2 { background-image: url('https://via.placeholder.com/60/198754/FFFFFF?text=2'); }
.procedure-items .icon.p3 { background-image: url('https://via.placeholder.com/60/198754/FFFFFF?text=3'); }
.procedure-items .icon.p4 { background-image: url('https://via.placeholder.com/60/198754/FFFFFF?text=4'); }
.procedure-items .icon.p5 { background-image: url('https://via.placeholder.com/60/198754/FFFFFF?text=5'); }
.procedure-items .icon.p6 { background-image: url('https://via.placeholder.com/60/198754/FFFFFF?text=6'); }
.procedure-items .icon.p7 { background-image: url('https://via.placeholder.com/60/198754/FFFFFF?text=7'); }

/* -------------------------
 * 5. 右侧悬浮
 * ------------------------- */
.sticky-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1030;
    display: flex;
    flex-direction: column;
}
.sidebar-item {
    background-color: #0d6efd;
    color: white;
    padding: 10px 15px;
    margin-bottom: 2px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
    border-radius: 5px 0 0 5px;
    writing-mode: vertical-rl; /* 文字竖排 */
    text-orientation: mixed;
    letter-spacing: 2px;
}
.sidebar-item:hover {
    background-color: #0a58ca;
}
.sidebar-popup {
    display: none; /* 默认隐藏 */
    position: absolute;
    right: 100%; /* 出现在 item 左侧 */
    top: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
    white-space: nowrap;
}
.sidebar-item:hover .sidebar-popup {
    display: block; /* 悬停时显示 */
}
.sidebar-popup img {
    width: 120px;
    height: 120px;
}
@media (max-width: 767.98px) {
    .carousel-item {
        height: 150px;
    }
}
/* -------------------------
 * 5. 右侧悬浮 (PC) - (样式更新)
 * ------------------------- */
.sticky-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1030;
    flex-direction: column; /* 必须指定flex方向 */
}
/* ... ( .sidebar-item 和 .sidebar-popup 样式保持不变 ) ... */


/* ---------------------------------
 * 6. 新增: 手机端悬浮 (Mobile Toggle)
 * --------------------------------- */

/* 手机端客服 "开关" 图标 */
.mobile-sidebar-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1029; /* 层级低于侧边栏本身 */
    background-color: rgba(13, 110, 253, 0.25); /* 沿用侧边栏蓝色 */
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s;
}
.mobile-sidebar-toggle:hover {
    background-color: #0a58ca;
}

/* 当手机端侧边栏 "可见" 时的样式
  这个类将由 JavaScript 动态添加到 #stickySidebar 上 
*/
@media (max-width: 991.98px) {
    .sticky-sidebar.sidebar-mobile-visible {
        /* 使用 !important 来覆盖 Bootstrap 的 d-none */
        display: flex !important; 
    }
}
.products-section .card-img-top {
    width: 100%;             /* 确保图片宽度占满卡片 */
    height: 200px;           /* !重要: 设置一个固定的高度 (您可以按需修改) */
    object-fit: cover;       /* !重要: 这就是魔法! 保持比例, 裁剪并填充 */
    object-position: center; /* 裁剪时, 优先显示图片的中心 */
}
  /* --- 选中标签的样式 (绿色边框 + 右下角绿色三角和白色对号) --- */
    
    /* 1. 给选中的 <label> 添加相对定位和绿色边框 */
  /* 2.3 按钮选中状态 (高亮 + 右下角对勾) */
    .btn-check:checked + .btn-outline-secondary,
    .btn-check:checked + .custom-selected {
        border-color: #009688 !important; /* 图片里的青色/墨绿色 */
        color: #009688 !important;
        background-color: #fff !important;
        font-weight: bold;
    }

    /* 制作右下角的小三角背景 */
    .btn-check:checked + .btn-outline-secondary::after,
    .btn-check:checked + .custom-selected::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-bottom: 14px solid #009688; /* 三角形颜色 */
        border-left: 14px solid transparent;
        z-index: 1;
    }

    /* 制作右下角的小对勾图标 */
    .btn-check:checked + .btn-outline-secondary::before,
    .btn-check:checked + .custom-selected::before {
        content: '✓'; /* Unicode 对勾 */
        position: absolute;
        right: 0px;
        bottom: -1px;
        font-size: 10px;
        color: #fff;
        z-index: 2;
        transform: scale(0.8);
        font-weight: bold;
        line-height: 1;
    }

    /* --- 表单输入框固定宽度 --- */
    
    /* 针对 "板子数量" 输入框 
      注意: .w-50 (width: 50% !important) 是一个 Bootstrap 类.
      下面的规则也使用 !important 来覆盖它.
    */
    #pcb-calc-form input[name="bcount"] {
        width: 200px !important; 
    }

    /* 针对所有的 <select> 下拉框 */
    #pcb-calc-form select.form-select {
        width: 200px;
    }
    
 
    
    /* 针对 颜色示例 的小方块 */
    .color-swatch {
        display: inline-block;
        width: 1em;
        height: 1em;
        border: 1px solid #ccc;
        margin-right: 5px;
        vertical-align: middle;
    }

    /* 针对 禁用选项 的标签 (JS 会添加 .disabled) */
    .btn-outline-secondary.disabled {
        opacity: 0.65;
        pointer-events: none;
    }
    
    .calc-group {
            border-bottom: 1px solid #eee;
            padding-bottom: 0.1rem;
            margin-bottom: 0.1rem;
        }
        /* 当按钮组的 input 被 disabled 时，其 label 也显示 disabled 样式 */
        .btn-check:disabled + .btn {
            opacity: 0.5;
            pointer-events: none;
        }
        .btn-group .btn {
            /* 防止按钮宽度在切换时变化 */
            min-width: 80px; 
            text-align: center;
        }
        .btn-check:disabled + .btn {
        opacity: 0.5;
        pointer-events: none;
    }
    .btn-group .btn {
        min-width: 80px; 
        text-align: center;
    }

    /* 【新增】 颜色方块样式 */
    .color-swatch {
        display: inline-block;
        width: 1em;
        height: 1em;
        border: 1px solid #999;
        margin-right: 6px;
        vertical-align: -0.125em; /* 垂直居中对齐 */
        border-radius: 3px;
    }.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: #000;
    background-color: #ffffff;
    border-color: #15a675;
}/* 【新增】bcount-wrapper 确保 popover 可以正确定位 */
    .bcount-wrapper {
        position: relative;
    }

    /* 【新增】您的 board-nums 样式 */
    .board-nums {
        position: absolute;
        top: 100%; /* 显示在输入框正下方 */
        left: 0;
        z-index: 1000;
        background: #fff;
        border: 1px solid #dee2e6; /* Bootstrap 边框颜色 */
        border-radius: 0.375rem; /* Bootstrap 圆角 */
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); /* Bootstrap 阴影 */
        padding: 1rem;
        width: 50%; /* 宽度与 col-md-10 一致 */
        margin-top: 0.25rem;
    }

    /* 【新增】美化列表 */
    .board-nums ul.js-number {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap; /* 自动换行 */
        gap: 8px; /* 间距 */
        max-height: 230px; /* 如果数量太多，则滚动 */
        overflow-y: auto;
    }

    /* 【新增】美化列表项 */
    .board-nums ul.js-number li {
        cursor: pointer;
    padding: 0.15rem 0.25rem;
    min-width: 52px;
    border: 1px solid #ced4da;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    transition: all 0.2s 
ease-in-out;
    }
    .board-nums ul.js-number li:hover {
        background-color: #0d6efd; /* Bootstrap primary 颜色 */
        color: white;
        border-color: #0d6efd;
    }

    /* 【新增】美化 "其它" 区域 */
    .board-nums .other-box {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #eee;
        display: flex;
        gap: 10px; /* 间距 */
        align-items: center;
    }
    a.nav-link {
    font-size: 0.95rem;
}

/* ============================================== */
/* 【新增】顶部报价导航样式 */
/* ============================================== */

/* 1. 导航总容器 */
.navigation-orders {
    background-color: #ffffff;
    color: #000000;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #cbcbcb;
    border-top: 1px solid #cbcbcb;
}
/* 2. 内容居中容器 */
.jc-wrap {
    width: 100%;
    max-width: 1200px; /* 控制最大宽度，使其居中 */
    margin: 0 auto;
    padding: 0 15px;
}

/* 3. "PCB/SMT/钢网" 链接的容器 */
.orders-nav-jump {
    justify-content: center; /* 使用 Flex 居中 */
    align-items: flex-end; /* 底部对齐 (防止图标大小不一时错位) */
    margin-bottom: 1rem;
    border-bottom: 1px solid #495057; /* 导航和流程条的分割线 */
}

/* 4. 单个导航链接 (核心) */
.jump-order {
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 2.5rem;
    padding-bottom: 1rem;
    color: #000000;
    text-decoration: none;
    transition: color 0.3s 
ease;
}
/* 5. 导航图标 */
.jump-order img {
    height: 60px; /* 统一高度 */
    width: auto;
    margin-left: 20px;
}
/* 针对钢网图标做微调 (根据您的HTML) */
.jump-order[href*="stencil"] img {
    height: 70px;
}

/* 6. 导航文字 */
.jump-order .jump-name {
    font-size: 1.1rem;
    font-weight: 500;
}

/* 7. 【关键】绿色下划线 */
.jump-order::after {
    content: '';
    position: absolute;
    bottom: -1px; /* 盖在容器的 border-bottom 上方 */
    left: 0;
    width: 100%;
    height: 2px; /* 下划线粗细 */
    background-color: #00b87a; /* 鲜绿色 (类似图片) */
    
    /* 默认隐藏，使用 scaleX(0) */
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

/* 8. 【关键】激活和悬停时的样式 */
.jump-order.active .jump-name, .jump-order:hover .jump-name {
    color: #000000;
}

.jump-order.active::after,
.jump-order:hover::after {
    transform: scaleX(1); /* 激活/悬停时显示下划线 */
}

/* 9. 导航项之间的竖线 (可选, 图片中不明显, 但 SMT 和钢网间有一个) */
.jump-order:not(:last-child) {
    border-right: 1px solid #e2e2e2;
}

/* 10. 底部 "下单流程" 样式 */
.signal-step {
    display: flex;
    flex-wrap: wrap; /* 在小屏幕上换行 */
    justify-content: center;
    padding: 0.5rem 0;
}
.signal-step .step {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #adb5bd; /* 流程文字颜色 */
    padding: 0.25rem 0.5rem;
}
/* 流程文字 */
.signal-step .step .title {
    margin-right: 0.5rem;
}
/* 流程箭头 */
.signal-step .step .iconfont {
    font-size: 0.75rem;
    color: #6c757d; /* 箭头颜色 */
}
/* 隐藏最后一个箭头 */
.signal-step .step:last-child .iconfont {
    display: none;
}
/* 10. 底部 "下单流程" 样式 */
.signal-step {
    display: flex;
    flex-wrap: wrap; /* 在小屏幕上换行 */
    justify-content: center;
    padding: 0.5rem 0;
}
.signal-step .step {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #000000;
    padding: 0.25rem 0.5rem;
}

/* 流程文字 */
.signal-step .step .title {
    /* 移除 margin-right，让箭头来控制间距 */
}

/* 【修改】流程箭头 (使用 Bootstrap Icon) */
.signal-step .step .bi-chevron-right {
    font-size: 0.75rem; /* 箭头大小 */
    color: #6c757d;   /* 箭头颜色 */
    margin-left: 0.5rem;  /* 箭头与左侧文字的间距 */
    margin-right: 0.25rem; /* 箭头与右侧文字的间距 */
}

/* 【修改】隐藏最后一个箭头 */
.signal-step .step:last-child .bi-chevron-right {
    display: none;
}
/* ============================================== */
/* 【新增】手机版导航样式 */
/* ============================================== */

.mobile-nav-bar {
    padding: 0.5rem;
    border-bottom: 1px solid #e2e2e2;
}

/* 使用 Bootstrap Navs 样式 */
.mobile-nav-bar .nav-pills .nav-link {
    color: #000;
    font-size: 0.9rem; /* 手机上字体小一点 */
    font-weight: 500;
    padding: 0.5rem; /* 紧凑的内边距 */
    border-radius: 0.3rem; /* 圆角 */
}

/* 激活状态 (SMT页面) 和 悬停状态 */
.mobile-nav-bar .nav-pills .nav-link.active,
.mobile-nav-bar .nav-pills .nav-link:hover {
    background-color: #00b87a; /* 沿用电脑版的绿色 */
    color: #ffffff;
}
/* ========== 计价卡片新样式 (基于图片) ========== */

/* 1. 重置卡片，移除内部 padding */
.pricing-form-card {
    padding: 0 !important; /* 移除所有内边距 */
    border: none;
    overflow: hidden; /* 确保 nav-pills 的圆角与卡片一致 */
}

/* 2. 标签页导航 (nav-pills) */
.pricing-form-card .nav-pills {
    margin-bottom: 0;
}

/* 3. 标签页的每个项目 */
.pricing-form-card .nav-pills .nav-item {
    flex: 1 1 auto; /* 让每个标签都平分宽度 */
}

/* 4. 标签页链接 (按钮) */
.pricing-form-card .nav-pills .nav-link {
    border-radius: 0;
    padding: 1rem; /* 增大按钮 padding */
    font-size: 1.1rem;
    color: #fff;
    background-color: #018a56; /* 默认/未选中 颜色 (深绿) */
    border: none;
}

/* 5. 激活 (active) 的标签页链接 */
.pricing-form-card .nav-pills .nav-link.active {
    background-color: #006342; /* 选中 颜色 (亮绿) */
}

/* 6. 标签页内容区域 */
.pricing-form-card .tab-content .tab-pane {
    padding: 1.5rem; /* 将 padding 从卡片移到这里 */
}

/* 7. 橙色提交按钮 */
.btn-price-submit {
    background-color: #fd7920;
    border-color: #fd7920;
    color: #fff;
    font-size: 1.1rem;
    padding: 0.6rem 1rem;
}
.btn-price-submit:hover {
    background-color: #f76b1c;
    border-color: #f76b1c;
    color: #fff;
}ul#pricingTab {
    background-color: #018a56;
}
.btn-price-submit {
    height: 32px !important;  /* 覆盖默认高度 */
    padding: 0.25rem 0.5rem;  /* 相应调整内边距 */
    font-size: 0.875rem;      /* 减小字体以匹配高度 */
}
/* 把 xl（≥1200px）和 xxl（≥1400px）的 container 宽度都改成 1300px */
@media (min-width: 1200px) {
  .container {
    max-width: 1300px;
  }
}

/* 如果你想 sm/md/lg 也按比例放大，可以一起改 */
@media (min-width: 576px) {
  .container { max-width: 540px; }
}
@media (min-width: 768px) {
  .container { max-width: 720px; }
}
@media (min-width: 992px) {
  .container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .container { max-width: 1300px; }   /* 这里是你最想要的 */
}
 .sidebar-item {
            background: white;
            width: 50px;
            height: 50px;
            border-radius: 8px; /* 圆角矩形 */
            display: flex;
            
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            font-size: 10px;
            color: #333;
            transition: 0.3s;
            text-decoration: none;
                writing-mode: vertical-lr;
        }
        .sidebar-item i {
            font-size: 18px;
            margin-bottom: 2px;
            color: #1c5e40;
        }
        .sidebar-item:hover {
            background-color: #f8f9fa;
            transform: translateX(-5px);
        }