/* 核心重置 - 彻底解决样式冲突 */
.qy-directory-container,
.qy-directory-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    white-space: normal !important; /* 强制取消竖排 */
    word-break: break-word; /* 长文本换行，不溢出 */
    font-family: "Microsoft Yahei", Arial, sans-serif !important; /* 统一字体，避免乱码 */
}

/* 主容器 - 基础布局 */
.qy-directory-container {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto !important;
    padding: 0 15px !important;
}

/* 头部 */
.qy-directory-header {
    text-align: center;
    margin-bottom: 20px !important;
}

.qy-directory-header h2 {
    font-size: 24px !important;
    color: #333 !important;
    margin-bottom: 10px !important;
}

.qy-directory-header p {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.5 !important;
}

/* ========== 国家筛选区域核心CSS ========== */
/* 筛选容器整体 */
.qy-filter-section {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    padding: 20px 24px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 筛选标题 */
.qy-filter-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    margin-bottom: 12px !important;
    font-family: "Microsoft Yahei", Arial, sans-serif !important;
    white-space: nowrap !important; /* 标题不换行 */
}

/* 滚动容器（核心：横向滚动） */
.qy-country-scroll {
    width: 100% !important;
    overflow-x: auto !important; /* 横向滚动 */
    overflow-y: hidden !important; /* 隐藏纵向滚动 */
    -webkit-overflow-scrolling: touch !important; /* 移动端顺滑滚动 */
    scrollbar-width: thin !important; /* 浏览器滚动条样式 */
    height: auto !important;
    min-height: 60px !important;
}

/* 滚动条美化（可选） */
.qy-country-scroll::-webkit-scrollbar {
    height: 6px !important;
}

.qy-country-scroll::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    border-radius: 3px !important;
}

.qy-country-scroll::-webkit-scrollbar-thumb {
    background: #e0e0e0 !important;
    border-radius: 3px !important;
}

.qy-country-scroll::-webkit-scrollbar-thumb:hover {
    background: #165DFF !important;
}

/* 标签容器（核心：强制横向排列，不换行） */
.qy-country-tags {
    display: flex !important;
    gap: 10px !important; /* 标签间距 */
    padding: 5px 0 10px 0 !important;
    white-space: nowrap !important; /* 禁止换行 */
    flex-wrap: nowrap !important; /* flex不换行 */
    width: max-content !important; /* 宽度自适应内容 */
    min-width: 100% !important; /* 最小宽度占满容器 */
}

/* 筛选标签基础样式 */
.qy-country-tag {
    padding: 9px 22px !important;
    background: #f5f5f5 !important;
    border: 1px solid #dddddd !important;
    border-radius: 50px !important; /* 圆角标签 */
    color: #666666 !important;
    font-size: 14px !important;
    text-decoration: none !important; /* 去掉链接下划线 */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important; /* 确保内容居中 */
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important; /* 固定高度，避免竖排 */
    min-width: 80px !important; /* 最小宽度，避免太窄 */
    white-space: nowrap !important; /* 标签文字不换行 */
    font-family: "Microsoft Yahei", Arial, sans-serif !important;
}

/* 全部企业标签特殊样式（可选） */
.qy-country-tag.all {
    background: #f0f8ff !important;
    border-color: #165DFF !important;
    color: #165DFF !important;
}

/* 标签hover状态 */
.qy-country-tag:hover {
    background: #e9e9e9 !important;
    border-color: #165DFF !important;
    color: #165DFF !important;
}

/* 选中标签样式 */
.qy-country-tag.active {
    background: #165DFF !important;
    color: #ffffff !important;
    border-color: #165DFF !important;
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.2) !important;
}

/* ========== 响应式适配（小屏幕） ========== */
@media (max-width: 768px) {
    .qy-filter-section {
        padding: 15px 18px !important;
    }

    .qy-filter-title {
        font-size: 14px !important;
    }

    .qy-country-tag {
        padding: 8px 18px !important;
        min-width: 70px !important;
        font-size: 13px !important;
        height: 36px !important;
    }
}

@media (max-width: 480px) {
    .qy-country-tag {
        padding: 7px 15px !important;
        min-width: 60px !important;
        font-size: 12px !important;
    }
}

/* 登录提示 */
.qy-login-prompt {
    background: #fff7e6 !important;
    color: #ff7d00 !important;
    padding: 10px 15px !important;
    margin-bottom: 20px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

.qy-login-link {
    color: #ff7d00 !important;
    text-decoration: underline !important;
}

/* 企业列表 - 极简卡片，保证排版正常 */
.qy-company-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.qy-company-card {
    background: #fff !important;
    border: 1px solid #eee !important;
    padding: 15px !important;
    border-radius: 4px !important;
}

.qy-card-inner {
    display: flex !important;
    flex-direction: column !important; /* 小屏幕优先单列，避免挤压 */
}

.qy-card-sidebar {
    margin-bottom: 10px !important;
}

.qy-card-country {
    display: inline-block !important;
    padding: 3px 8px !important;
    background: #165DFF !important;
    color: #fff !important;
    font-size: 12px !important;
    border-radius: 3px !important;
    margin-bottom: 8px !important;
}

.qy-card-sidebar h3 {
    font-size: 18px !important;
    color: #333 !important;
    margin-bottom: 5px !important;
}

.qy-card-category {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 10px !important;
}

.qy-card-button {
    display: inline-block !important;
    padding: 6px 12px !important;
    background: #165DFF !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    margin-top: 5px !important;
}

.qy-card-content {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

/* 空状态 */
.qy-empty-state {
    text-align: center !important;
    padding: 40px 15px !important;
    background: #f9f9f9 !important;
    border: 1px dashed #eee !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    color: #999 !important;
}

/* 分页 - 极简样式，保证横向排列 */
.qy-pagination {
    text-align: center !important;
    margin-top: 20px !important;
}

.qy-pagination-list {
    display: inline-flex !important;
    gap: 5px !important;
    list-style: none !important;
    margin-bottom: 10px !important;
}

.qy-pagination-link {
    display: inline-block !important;
    padding: 6px 12px !important;
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    border-radius: 4px !important;
}

.qy-pagination-item.active .qy-pagination-link {
    background: #165DFF !important;
    color: #fff !important;
    border-color: #165DFF !important;
}

.qy-pagination-info {
    font-size: 13px !important;
    color: #999 !important;
}

/* 详情页 - 极简排版 */
.qy-detail-container {
    max-width: 1000px !important;
    margin: 30px auto !important;
    padding: 0 15px !important;
}

.qy-detail-card {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.qy-detail-header {
    background: #165DFF !important;
    color: #fff !important;
    padding: 20px 15px !important;
}

.qy-detail-header h1 {
    font-size: 20px !important;
    margin-bottom: 5px !important;
}

.qy-detail-country {
    font-size: 12px !important;
    background: rgba(255,255,255,0.2) !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    margin-bottom: 5px !important;
}

.qy-detail-section {
    padding: 15px !important;
    border-bottom: 1px solid #eee !important;
}

.qy-detail-title {
    font-size: 16px !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    font-weight: bold !important;
}

.qy-detail-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.qy-detail-item {
    margin-bottom: 8px !important;
}

.qy-detail-label {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: bold !important;
}

.qy-detail-value {
    font-size: 14px !important;
    color: #666 !important;
}

.qy-detail-value a {
    color: #165DFF !important;
    text-decoration: none !important;
}

.qy-detail-text {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

.qy-back-button {
    display: inline-block !important;
    margin: 15px !important;
    padding: 6px 12px !important;
    border: 1px solid #165DFF !important;
    color: #165DFF !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

/* 大屏适配 - 仅在宽屏时调整卡片为左右布局 */
@media (min-width: 768px) {
    .qy-card-inner {
        flex-direction: row !important;
        gap: 15px !important;
    }

    .qy-card-sidebar {
        width: 250px !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }

    .qy-detail-grid {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    .qy-detail-item {
        width: calc(50% - 10px) !important;
    }
}

/* 分页容器适配（解决小屏幕超出） */
.qy-pagination {
    width: 100% !important;
    overflow-x: auto !important; /* 小屏幕横向滚动 */
    padding: 10px 0 !important;
    box-sizing: border-box !important;
}

.qy-pagination-list {
    display: inline-flex !important;
    gap: 5px !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    min-width: 100% !important;
    justify-content: center !important; /* 居中排列 */
}

.qy-pagination-link {
    padding: 6px 12px !important;
    white-space: nowrap !important; /* 页码不换行 */
    font-size: 13px !important; /* 小屏幕缩小字号 */
}

/* 小屏幕进一步适配 */
@media (max-width: 480px) {
    .qy-pagination-link {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    .qy-pagination-info {
        font-size: 12px !important;
        padding: 0 10px !important;
        text-align: center !important;
    }
}

/* 1. 父容器：控制标签组整体布局，确保标签排列整齐 */
.qy-country-tags {
    display: flex; /* 横向排列标签，支持换行 */
    flex-wrap: wrap; /* 屏幕变窄时自动换行，避免横向滚动 */
    gap: 10px; /* 标签之间的间距（替代margin，更均匀） */
    align-items: center; /* 所有标签垂直方向对齐（避免高低不一） */
    padding: 12px 0; /* 上下内边距，与前后内容区隔开（如“按国家/地区筛选”标题） */
    margin: 15px 0; /* 上下外边距，优化页面间距 */
}

/* 2. 核心：国家筛选标签样式（解决字体居中+清除冗余影响） */
.qy-country-tag {
    /* 1. 重置与布局：解决<br>和inline布局问题 */
    display: inline-flex; /* 关键！支持垂直/水平居中，且不独占一行 */
    align-items: center; /* 文本垂直居中（抵消<br>标签的上下空白） */
    justify-content: center; /* 文本水平居中（核心） */
    text-decoration: none; /* 清除a标签默认下划线 */
    white-space: nowrap; /* 禁止文本换行（避免“United Kingdom”等长名称换行） */
    line-height: 1; /* 清除<br>标签带来的额外行高，确保垂直紧凑 */

    /* 2. 尺寸与内边距：确保文本不贴边，所有标签高度一致 */
    padding: 8px 16px; /* 上下8px（足够垂直空间），左右16px（水平不拥挤） */
    min-width: 90px; /* 最小宽度：避免短名称标签（如“USA”“中国”）过窄 */
    height: 36px; /* 固定高度：确保所有标签视觉统一，垂直对齐 */

    /* 3. 字体样式：确保清晰居中，无多余空格干扰 */
    font-size: 14px; /* 字体大小适配页面（与企业名录其他文本协调） */
    font-weight: 500; /* 轻度加粗：提升标签辨识度 */
    color: #333; /* 字体颜色：深灰不刺眼，适配浅背景 */
    text-align: center; /* 兜底：兼容低版本浏览器，确保水平居中 */

    /* 4. 外观优化：区分标签与背景，提升点击意愿 */
    background-color: #f8f8f8; /* 浅灰背景：与页面背景区分，不突兀 */
    border-radius: 6px; /* 圆角：避免尖锐边缘，现代感更强 */
    border: 1px solid #eee; /* 细边框：强化标签轮廓，避免模糊 */
    cursor: pointer; /* 鼠标悬浮显“手形”：提示可点击 */

    /* 5. 过渡效果：hover/切换时平滑变化，避免生硬 */
    transition: all 0.2s ease;
}

/* 3. 选中状态（.active）：明确当前筛选的国家/地区 */
.qy-country-tag.all.active {
    background-color: #2d81ff; /* 主色背景：突出选中状态（如“全部企业”） */
    color: #fff; /* 白色字体：与主色对比强烈，清晰可见 */
    border-color: #2d81ff; /* 边框同步主色：视觉统一 */
}

/* 4. 交互增强：hover时反馈，提升用户体验 */
.qy-country-tag:not(.active):hover {
    background-color: #f0f0f0; /* 背景加深：hover反馈 */
    color: #2d81ff; /* 字体变主色：引导用户点击 */
    border-color: #e0e0e0; /* 边框加深：强化轮廓 */
}

/* 5. 清除多余<br>标签的视觉影响（兜底方案，若无法删除HTML中的<br>） */
.qy-country-tag br {
    display: none; /* 直接隐藏<br>标签，彻底消除上下空白 */
}

/* 搜索表单整体布局：强制横向排列 + 垂直居中 */
form[method="get"][action=""] {
    display: flex !important; /* 覆盖原有margin-bottom样式，强制flex布局 */
    align-items: center !important; /* 搜索框与按钮垂直居中对齐 */
    gap: 10px !important; /* 搜索框和按钮之间的间距，避免紧贴 */
    margin-bottom: 20px !important; /* 保留原有底部间距 */
    flex-wrap: nowrap !important; /* 防止小屏幕换行（可选：如需小屏幕换行可改为wrap） */
}

/* 搜索框样式优化：适配flex布局 + 视觉提升 */
form[method="get"][action=""] input[name="qy_search"] {
    width: auto !important; /* 取消原有80%固定宽度，适配flex */
    flex: 1 !important; /* 让搜索框占满剩余空间，自适应宽度 */
    max-width: 500px !important; /* 保留原有最大宽度限制 */
    padding: 10px !important; /* 保留原有内边距 */
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    outline: none !important; /* 清除默认聚焦外框 */
    transition: border-color 0.3s ease !important; /* 聚焦过渡效果 */
}

/* 搜索框聚焦状态：强化视觉反馈 */
form[method="get"][action=""] input[name="qy_search"]:focus {
    border-color: #165DFF !important; /* 聚焦时边框色与按钮一致 */
    box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1) !important; /* 弱阴影提升层次感 */
}

/* 搜索按钮样式优化：交互感 + 与搜索框视觉匹配 */
form[method="get"][action=""] button[type="submit"] {
    padding: 0px 20px !important; /* 保留原有内边距 */
    background: #165DFF !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important; /* hover过渡效果 */
    white-space: nowrap !important; /* 强制按钮文字不换行 */
}

/* 按钮hover状态：提升交互反馈 */
form[method="get"][action=""] button[type="submit"]:hover {
    background: #0E48D8 !important; /* 深色hover，增强点击欲望 */
}

/* 响应式适配：小屏幕（手机）优化 */
@media (max-width: 768px) {
    form[method="get"][action=""] {
        flex-wrap: wrap !important; /* 小屏幕自动换行，避免拥挤 */
        gap: 8px !important; /* 缩小间距 */
    }

    form[method="get"][action=""] input[name="qy_search"] {
        max-width: none !important; /* 手机端取消最大宽度，占满整行 */
        width: 100% !important;
    }

    form[method="get"][action=""] button[type="submit"] {
        width: 100% !important; /* 手机端按钮占满整行 */
        padding: 10px 0 !important;
    }
}