/**
 * Theme Name: WELTHEME Child
 * Description: WELTHEME child theme for welsites.com
 * Author: WELSITES.COM
 * Version: 1.2.0
 * Template: blocksy
 * Text Domain: weltheme-child
 * Requires at least: 6.4
 * Requires PHP: 7.4
 */

/* ===================================================
   白色圆角分类筛选卡片（桌面端默认排版）
   =================================================== */
.blocksy-2tier-filter-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 22px 30px;
    margin-bottom: 30px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    width: 100%;
}

.blocksy-2tier-filter-card .filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
}

/* 一二级分类中间的分割浅线 */
.blocksy-2tier-filter-card .filter-divider {
    height: 1px;
    background-color: #f0f0f0;
    margin: 16px 0;
}

.blocksy-2tier-filter-card .filter-item {
    font-size: 15px;
    color: #555555;
    text-decoration: none;
    font-weight: 400;
    padding-bottom: 6px;
    position: relative;
    transition: color 0.2s ease;
    flex-shrink: 0;       /* 确保分类在不换行模式下不会被挤压变窄 */
    white-space: nowrap;  /* 确保英文两个词的分类标题不发生折行 */
}

.blocksy-2tier-filter-card .filter-item:hover {
    color: #111111;
}

/* 当前选中项样式：文字加粗 + 下方黄色下划线 */
.blocksy-2tier-filter-card .filter-item.active {
    color: #111111;
    font-weight: 600;
}

.blocksy-2tier-filter-card .filter-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #b2a302;
    border-radius: 2px;
}

/* 二级菜单样式微调 */
.blocksy-2tier-filter-card .child-row .filter-item {
    font-size: 14px;
    color: #666666;
}

.blocksy-2tier-filter-card .child-row .filter-item.active {
    color: #ae9f00;
}

/* ===================================================
   手机 & 平板端 (≤ 1024px) 左右滑动 + 底部显示极简指示条
   =================================================== */
@media (max-width: 1024px) {
    .blocksy-2tier-filter-card {
        padding: 16px 20px;
        margin-bottom: 20px;
    }

    .blocksy-2tier-filter-card .filter-row {
        flex-wrap: nowrap;                  /* 强制单行不换行 */
        overflow-x: auto;                   /* 开启横向滚动 */
        -webkit-overflow-scrolling: touch;  /* 提升 iOS 触摸滑动惯性与流畅度 */
        gap: 20px;                          /* 移动端缩小间距 */
        padding-bottom: 10px;               /* 留出间距，避免选中下划线贴紧滚动条 */

        /* Firefox 纤细滚动条样式 */
        scrollbar-width: thin;
        scrollbar-color: #cccccc transparent;
    }

    /* Webkit 浏览器 (Chrome / Safari / Edge / 微信内置浏览器) 自定义极简滚动条 */
    .blocksy-2tier-filter-card .filter-row::-webkit-scrollbar {
        display: block;
        height: 2px;                        /* 统一修改为 2px，与注释一致 */
    }

    /* 滚动条轨道 */
    .blocksy-2tier-filter-card .filter-row::-webkit-scrollbar-track {
        background-color: #f2f2f2;
        border-radius: 1px;
    }

    /* 滑块（滑动指示线条） */
    .blocksy-2tier-filter-card .filter-row::-webkit-scrollbar-thumb {
        background-color: #cccccc;
        border-radius: 1px;
    }

    .blocksy-2tier-filter-card .filter-divider {
        margin: 12px 0;
    }
}

/* ===================================================
   手机端 (≤ 600px) 询价列表与工具栏排版调整
   =================================================== */
@media (max-width: 600px) {
    /* 1. 标题设置：放在顶部第一行 */
    .welblock-inquiry-list-title {
        font-size: 14px !important;       /* 手机端字号 */
        font-weight: normal !important;   /* 不加粗 */
        margin-bottom: 8px !important;    /* 与下方工具栏的间距 */
        padding-bottom: 0 !important;
        border-bottom: none !important;   /* 取消标题自带的下划线 */
    }

    /* 2. 工具栏重置：取消绝对定位，自动换行排到标题正下方（第二行） */
    .welblock-inquiry-toolbar {
        position: static !important;      /* 取消 position: absolute，回归正常文档流 */
        justify-content: flex-start !important; /* 按钮靠左对齐 */
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 2px solid var(--theme-palette-color-5) !important; /* 将分割下划线移到工具栏下方 */
    }
}

/* ===================================================
   修改“已添加/Added!”状态的样式
   =================================================== */
.welblock-inquiry-add-btn.welblock-inquiry-added,
.welblock-inquiry-add--compact.is-added .welblock-inquiry-add-btn {
    background-color: #E0CA00 !important; /* 替换原本的绿色底色为黄色 */
    color: #ffffff !important;            /* 文字颜色改为白色 */
    border-radius: 15px !important;       /* 圆角改为 15px */
}
/* ==========================================
   WELBLOCK Inquiry List - 自定义边距与移动端优化
   ========================================== */

/* 1. 修改“添加询价”整体容器的上下外边距 */
.welblock-inquiry-add {
    margin-top: 0.5em !important; /* 调整顶部外边距 */
    margin-bottom: -1em !important; /* 调整底部外边距 */
}

/* 2. 平板及手机端 (≤ 768px) 紧凑模式按钮字号微调 */
@media (max-width: 768px) {
    .welblock-inquiry-add--compact .welblock-inquiry-add-btn {
        font-size: 0.75em !important;
    }
}