.mq-modal {
    visibility: hidden; /* 默认隐藏 */
    position: fixed;
    z-index: 1000; /* 确保在页面最上层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    overflow: auto;
    opacity: 0; /* 初始透明度为0（动画起点） */
    -webkit-transition: visibility 0.3s ease, opacity 0.3s ease; /* Safari/Chrome */
    transition: visibility 0.3s ease, opacity 0.3s ease; /* 背景淡入动画 */
    
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}
/* 弹窗显示时的背景样式 */
.mq-modal.show {
    visibility: visible;
    opacity: 1; /* 背景淡入 */
}
.mq-modal.show::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.mq-modal-content {
    position: relative;
    background-color: #fff;
    margin: 0 auto;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* 动画相关：初始位置在屏幕底部外侧 */
    transform: translateY(100vh); 
    -webkit-transform: translateY(100vh);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 上移动画（缓动效果） */
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box; /* 确保内边距不影响总高度计算 */
}
/* 弹窗显示时的内容样式（从底部上来） */
.mq-modal.show .mq-modal-content {
    transform: translateY(0); /* 移动到屏幕中间 */
    -webkit-transform: translateY(0);
    margin-top: auto;
    margin-bottom: auto;
}
/* 辅助垂直居中的伪元素 */
.mq-modal::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.mq-close, .mq-quote-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}
.mq-close:hover, .mq-quote-close:hover {
    color: #000;
}
.mq-material-list,.mq-tab-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
    max-height: calc(90vh - 120px); /* 减去弹窗头部/底部高度（根据实际调整） */
    overflow-y: auto; /* 仅在内容超出时显示垂直滚动条 */
    padding-right: 10px; /* 预留滚动条空间，避免内容被遮挡 */
}

.mq-material-item {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.mq-material-item.selected {
    border-color: #007cba;
    background: #f0f7ff;
}
.mq-material-item h4{
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 跳转图标：默认隐藏，绝对定位在右上角 */
.material-jump-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #666;
    opacity: 0; /* 默认透明（隐藏） */
    transition: opacity 0.2s;
    text-decoration: none;
}
.material-jump-icon:hover {
    color: #007cba; /* hover时变色 */
}

/* 鼠标移入材质项时显示图标 */
.mq-material-item:hover .material-jump-icon {
    opacity: 1; /* 显示图标 */
}
.mq-quote-form {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
}

/* 报价弹窗复用材质弹窗的基础样式，仅需补充少量调整 */
#mq-quote-modal .mq-modal-content {
    max-width: 600px; /* 报价表单弹窗可略窄 */
}
.mq-quote-form-element p {
    margin: 15px 0;
}
.mq-quote-form-element label {
    display: block; /* 标签独占一行 */
    margin-bottom: 5px;
}

/* 优化滚动条样式（可选，提升美观度） */
.mq-material-list::-webkit-scrollbar,.mq-tab-content::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
}
.mq-material-list::-webkit-scrollbar-track,.mq-tab-content::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道背景 */
    border-radius: 3px;
}
.mq-material-list::-webkit-scrollbar-thumb,.mq-tab-content::-webkit-scrollbar-thumb {
    background: #ccc; /* 滚动条颜色 */
    border-radius: 3px;
}
.mq-tab-content::-webkit-scrollbar-thumb:hover,.mq-material-list::-webkit-scrollbar-thumb:hover {
    background: #999; /* hover时颜色 */
}
/* 确保链接按钮与原<button>样式一致 */
.mq-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #000000 !important; /* WooCommerce 默认按钮色 */
    color: white !important;
    text-decoration: none; /* 移除链接下划线 */
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-size: 14px;
}
.mq-btn:hover {
    background-color: #006ba1; /*  hover 效果 */
    color: white; /* 确保 hover 时文字颜色不变 */
}
.mq_bundle_add_to_cart{
    flex: 0 0 auto !important;
    border-radius: 0;
    color: #fff;
    background-color: #1c1d1d;
}
#wd-add-to-cart.hide,.single_add_to_cart_button.hide,.single_variation_wrap .quantity.hide{display:none !important}
.mq-btu-div.hide,.mq_product_notice.hide,.mq-quoted-price.hide,.mq-button-prompt.hide,#mq-material-tip.hide,.awcdp-deposits-wrapper {
    display:none;
}
/*.mq-custom-buttons{*/
/*    border: 1px solid #e9e9e9;*/
/*    padding: 0 10px;*/
/*}*/
/* 自定义按钮样式 */
.mq-btu-div {
    display: flex;
    gap: 10px;
}
#mq-confirm-selection{
    background-color: #1c1d1d;
    color: white;
}
#mq-confirm-selection:hover {
    opacity: 0.9;
}
.mq-confirm-wrapper {
    width: 100%; /* 占满父容器宽度 */
    text-align: center; /* 行内元素水平居中 */
    margin: 15px 0; /* 上下间距，避免与其他元素紧贴 */
}
.mq-add-to-cart, .mq-buy-now {
    padding: 5px 20px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    flex: 1;
    transition: all 0.3s ease;
}
.mq-add-to-cart:hover, .mq-buy-now:hover{
    color: #fff !important;
    background-color: #444141 !important;
}
/* 启用状态 */
.mq-add-to-cart:not([disabled]), .mq-buy-now:not([disabled]) {
    cursor: pointer;
}
.mq-buy-now:not([disabled]),.mq-add-to-cart:not([disabled]) {
    background-color: #1c1d1d;
    color: white;
    padding: 5px 20px;
    flex: 0 0 auto;
}

/* 禁用状态 */
.mq-add-to-cart[disabled], .mq-buy-now[disabled] {
    background-color: #1c1d1d;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.8;
    flex: 0 0 auto;
}

/* 提示文字 */

.mq-loading,.mq-error{
    text-align: center;
}
.woocommerce-variation.single_variation.hide{
    opacity: 0;
    height: 0px;
}
.fabric-th{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}
.fabric-th p{
    margin: 0;
    font-weight: 600;
}
.mq-quoted-price{
    font-size:110%; color:#000; font-weight:600; margin:15px 0;font-family: 'Jost';
}
.mq_call_me_p{
    margin:10px 0;
}
.mq_call_me{
    color: #0600ff;
}
.mq_call_me:hover{
    color: #0600ff;
    opacity: 0.8;
}
.mq_product_notice{
    border-left-color: #0056ff;
    border-left-style: solid;
    border-left-width: 5px;
    padding: 10px 10px;
    background-color: #00a4ff3b;
    margin: 10px 0;
}
.mq-material-tabs {
    margin: 20px 0;
    
}
.mq-tab-content{
    max-height: calc(90vh - 320px);
}
.mq-tabs-nav {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    overflow-x: auto; /* 允许横向滚动 */
    overflow-y: hidden; /* 隐藏垂直滚动 */
    white-space: nowrap; /* 防止Tab换行 */
    scrollbar-width: thin; /* 精简滚动条（Firefox） */
}
/* 隐藏Chrome等浏览器的默认滚动条（可选，更美观） */
.mq-tabs-nav::-webkit-scrollbar {
    height: 4px; /* 滚动条高度 */
}
.mq-tabs-nav::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.mq-tabs-nav::-webkit-scrollbar-track {
    background: transparent;
}
.mq-tab-nav {
    padding: 8px 15px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    margin-right: 5px;
    flex-shrink: 0; /* 禁止Tab收缩，保持完整宽度 */
    white-space: nowrap; /* 防止Tab文字换行 */
    font-size: 14px;
}
/* 激活状态Tab - 保持原有样式 */
.mq-tab-nav.active {
    border-color: #ddd;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: #fff;
    font-weight: bold;
}

.mq-tab-content {
    display: none;
}

.mq-tab-content.active { 
    display: grid;
}
/* 加载动画 - 旋转圆环 */
.mq-loading-spinner {
    display: none;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 4px solid #f3f3f3; /* 浅色边框 */
    border-top: 4px solid #007cba; /* 主题色边框 */
    border-radius: 50%;
    animation: mq-spin 1s linear infinite; /* 旋转动画 */
}
/* 提交报价加载动画（复用之前的旋转逻辑，新增小尺寸样式） */
.mq-loading-spinner.small {
    width: 20px;
    height: 20px;
    border-width: 3px; /* 缩小边框宽度 */
    display: block;
}

/* 有滚动时显示箭头提示 */
.mq-tabs-nav:hover::before {
    opacity: 1;
}
.mq-tabs-nav:hover::after {
    opacity: 1;
}
/* 提交按钮加载动画容器 */
#mq-quote-loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

/* 提交按钮禁用状态（防止重复点击） */
#mq-submit-quote:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.8;
}
/* 旋转动画关键帧 */
@keyframes mq-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 加载动画容器 - 覆盖材质列表区域 */
.mq-material-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
    z-index: 10; /* 确保在材质列表上方 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 材质选择容器添加相对定位，让加载动画绝对定位生效 */
.mq-material-selector {
    position: relative;
}
@media (max-width: 1024px) {
    .material-jump-icon {
        opacity: 1 !important; /* 强制显示 */
        
    }
    .material-jump-icon svg{
        width: 20px !important; /* 稍大尺寸，适合触屏 */
        height: 20px !important;
    }
}
@media (max-width: 768px) {
    .mq-material-list, 
    .mq-tab-content {
        grid-template-columns: repeat(2, 1fr); /* 移动端固定 2 列 */
        gap: 10px; /* 移动端缩小间距，更紧凑 */
        max-height: calc(80vh - 100px); /* 适配移动端视口高度 */
        grid-template-columns: repeat(2, calc((100% - 10px) / 2));
    }
     .mq-material-item {
        padding: 10px;
        box-sizing: border-box; /* 确保padding不增加元素宽度 */
    }
    .mq-material-title {
        font-size: 14px;
        white-space: nowrap; /* 可选：不换行，超出部分隐藏（更整洁） */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mq-select-material-btn {
        font-size: 12px;
        padding: 4px 8px;
        width: 100%; /* 按钮宽度=材质项宽度，避免文字换行 */
    }
    .mq-material-item h4{
        font-size: 14px;
    }
}
/* 可选：超小屏（如320px以下）优化，避免内容溢出 */
@media (max-width: 375px) {
    .mq-material-list, 
    .mq-tab-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        grid-template-columns: repeat(2, calc((100% - 10px) / 2));
    }
    /* 可同步缩小材质项内部 padding，确保内容显示完整 */
    .mq-material-item {
        padding: 10px;
    }
    .mq-material-title {
        font-size: 14px;
    }
}
/* 移动端优化：缩小Tab内边距，容纳更多Tab */
@media (max-width: 768px) {
    .mq-tab-nav {
        padding: 6px 12px;
        font-size: 13px;
        margin-right: 4px;
    }
}