/* =================================================================================
   1. CONTACT US PAGE (联系我们 - B2B 信任背书布局)
   ================================================================================= */

.uyaai-contact-wrap {
    max-width: 1200px;
    margin: 40px auto 80px;
    padding: 0 20px;
}

/* 顶部 Hero 区域 */
.contact-hero {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px 20px;
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px solid var(--uyaai-border);
}
.contact-hero h1 {
    font-size: 36px;
    font-weight: 800;
    color: var(--uyaai-black);
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.contact-hero p {
    font-size: 16px;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 黄金双栏网格 (表单左，背书右) */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    margin-bottom: 60px;
}

/* 左侧：表单盒样式（针对 Fluent Forms） */
.contact-form-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid var(--uyaai-border);
}
.form-header {
    margin-bottom: 25px;
    border-bottom: 2px solid #f5f5f5;
    padding-bottom: 15px;
}
.form-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--uyaai-black);
    margin: 0 0 5px 0;
}
.form-header p {
    font-size: 13px;
    color: #2ecc71;
    font-weight: 600;
    margin: 0;
}

/* 右侧：信任实力区 */
.contact-trust-box {
    display: flex; flex-direction: column; gap: 30px;
}
.trust-section h4 {
    font-size: 18px; font-weight: 700; color: var(--uyaai-black);
    margin: 0 0 15px 0; display: flex; align-items: center; gap: 8px; text-transform: uppercase;
}
.trust-section h4 .dashicons { color: var(--uyaai-pink); }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 15px; font-size: 14px; color: #444; line-height: 1.5;
}
.info-list li .dashicons { color: var(--uyaai-pink); font-size: 18px; margin-top: 2px; }
.info-list li strong { color: var(--uyaai-black); display: block; margin-bottom: 3px; }

/* 证书展示 */
.cert-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.cert-badge {
    background: var(--uyaai-black); color: #fff; padding: 8px 15px;
    border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
}

/* =================================================================================
   UYAAI FAQ PAGE - 精装修完美还原版
   ================================================================================= */



/* 1. 全局容器与爆破 (全能升级版：不分语言，不分模板) */
/* 只要页面里出现了 uyaai-faq-wrap 或 uyaai-contact-wrap，就强制全宽 */
.site-main:has(.uyaai-faq-wrap) .grid-container,
.site-main:has(.uyaai-faq-wrap) .site-content,
.site-main:has(.uyaai-faq-wrap) .entry-content,
.site-main:has(.uyaai-contact-wrap) .grid-container,
.site-main:has(.uyaai-contact-wrap) .site-content,
.site-main:has(.uyaai-contact-wrap) .entry-content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 针对不支持 :has 语法的旧浏览器降级处理 */
.page-template-default .grid-container,
.page-template-page-faq .grid-container,
.page-template-page-contact .grid-container {
    max-width: 100% !important;
}

.uyaai-faq-wrap {
    max-width: 1200px !important;
    margin: 40px auto 100px !important;
    padding: 0 20px !important;
    font-family: 'UyaaiFont', sans-serif !important;
}

/* 2. 黑色 Hero Banner 优化 */
.faq-hero-banner {
    background: #111111 !important;
    color: #ffffff !important;
    padding: 50px 20px !important; /* 抽紧高度 */
    text-align: center;
    border-radius: 16px !important; /* 增加大圆角 */
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.faq-hero-banner p { 
    color: var(--uyaai-pink) !important; /* 品牌粉小字 */
    font-size: 14px; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    margin-bottom: 15px; 
}

.faq-hero-banner h1 { 
    font-size: clamp(30px, 5vw, 48px) !important; 
    font-weight: 900 !important; 
    margin: 0; 
    color: #ffffff !important; /* 强行亮白 */
    text-transform: uppercase;
    letter-spacing: -1px;
}

/* 3. 搜索框精修 (胶囊形状 + 阴影) */
.faq-search-area {
    max-width: 700px !important;
    margin: -35px auto 60px !important; /* 向上悬浮 */
    position: relative;
    z-index: 10;
}

.faq-search-area input {
    width: 100% !important;
    padding: 22px 35px !important;
    border-radius: 50px !important; /* 胶囊形 */
    border: 1px solid #eee !important;
    background: #ffffff !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
    font-size: 16px !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

.faq-search-area input:focus {
    border-color: var(--uyaai-pink) !important;
    box-shadow: 0 15px 35px rgba(237, 0, 142, 0.15) !important;
}

/* 4. FAQ 列表细节补强 */
.faq-category {
    margin: 60px 0 25px;
    font-size: 22px;
    font-weight: 900;
    color: #111;
    border-left: 6px solid var(--uyaai-pink); /* 标志性粉色粗线 */
    padding-left: 20px;
}

.f-item {
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.f-item:hover {
    border-color: var(--uyaai-pink) !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.f-quest {
    padding: 24px 30px !important;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.f-quest h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 !important;
}

.f-icon {
    font-size: 20px;
    color: #ccc;
    font-family: monospace;
    transition: 0.3s;
}

/* 5. 展开交互 (Active 状态) */
.f-item.active {
    border-color: var(--uyaai-pink) !important;
    background: #fff !important;
    box-shadow: 0 10px 25px rgba(237, 0, 142, 0.05) !important;
}

.f-item.active .f-ans {
    display: block !important; /* 确保显示 */
    padding: 0 30px 25px !important;
    color: #555;
    line-height: 1.7;
    font-size: 15px;
}

.f-ans { display: none; } /* 初始隐藏 */

.f-item.active .f-icon {
    color: var(--uyaai-pink) !important;
    transform: rotate(0deg); /* 如果需要旋转效果可加 */
}

/* 6. 底部表单引导区美化 */
.faq-form-container {
    margin-top: 80px;
    background: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 20px !important;
    padding: 50px !important;
    text-align: center;
}

.faq-form-container h4 {
    font-size: 26px !important;
    font-weight: 900 !important;
    margin-bottom: 10px !important;
}



/* =================================================================================
   3. COMMON ACCORDION (通用折叠交互 - 用于 FAQ 和 Contact 页面)
   ================================================================================= */
.f-item {
    background: #fff; border: 1px solid var(--uyaai-border);
    border-radius: 12px; margin-bottom: 15px; overflow: hidden; transition: var(--transition);
}
.f-item:hover { border-color: var(--uyaai-pink); }

.f-quest {
    padding: 22px 30px; cursor: pointer; display: flex;
    justify-content: space-between; align-items: center;
}
.f-quest h3 { font-size: 17px; margin: 0; font-weight: 700; color: var(--uyaai-black); line-height: 1.4; }
.f-icon { font-size: 22px; color: #ccc; transition: var(--transition); font-family: monospace; }

.f-ans { padding: 0 30px 25px; display: none; color: #555; line-height: 1.7; font-size: 15px; }
.f-item.active { border-color: var(--uyaai-pink); box-shadow: 0 5px 20px rgba(237, 0, 142, 0.05); }
.f-item.active .f-ans { display: block; }
.f-item.active .f-icon { color: var(--uyaai-pink); }

/* 底部引导区 */
.faq-form-container {
    margin-top: 70px; background: #ffffff; border: 1px solid var(--uyaai-border);
    border-radius: 16px; padding: 50px 60px; text-align: center;
}

/* =================================================================================
   4. RESPONSIVE ADAPTATION (移动端适配)
   ================================================================================= */
@media (max-width: 991px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-trust-box { order: 2; } /* 手机端表单在上，背书在下 */
    .faq-hero-banner h1 { font-size: 28px; }
    .faq-form-container { padding: 30px 20px; }
    .f-quest { padding: 18px 20px; }
    .f-quest h3 { font-size: 15px; }
}

/* =================================================================================
   UYAAI FORM CUSTOM STYLES (针对 FAQ 和 Contact 页面表单)
   ================================================================================= */

/* 1. 输入框与文本域美化 */
.faq-form-container input[type="text"],
.faq-form-container input[type="email"],
.faq-form-container input[type="tel"],
.faq-form-container select,

/* 1. 确保所有标签文字（如 Full Name, Email）靠左 */
.faq-form-container .ff-el-p-label {
    text-align: left !important;
    display: block !important;
}

/* 2. 针对复选框组（Select Buyer Type）及选项整体靠左 */
.faq-form-container .ff-el-group {
    text-align: left !important;
}

/* 3. 针对复选框单个选项的文字靠左 */
.faq-form-container .ff-el-form-check {
    text-align: left !important;
}

.faq-form-container textarea {
    width: 100% !important;
    padding: 15px 20px !important;
    border: 1.5px solid #eee !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 14px !important;
    margin-bottom: 5px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

/* 输入框聚焦状态：变粉色边框 */
.faq-form-container input:focus,
.faq-form-container textarea:focus {
    border-color: var(--uyaai-pink) !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(237, 0, 142, 0.1) !important;
}

/* 2. 标签 (Labels) 样式 */
.faq-form-container .ff-el-p-label label {
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 3. 提交按钮：强制 UYAAI 品牌粉 */
.faq-form-container .ff-btn-submit {
    width: 100% !important;
    background-color: var(--uyaai-pink) !important;
    color: #fff !important;
    padding: 18px 30px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.4s ease !important;
    margin-top: 10px !important;
    box-shadow: 0 10px 20px rgba(237, 0, 142, 0.2) !important;
}

.faq-form-container .ff-btn-submit:hover {
    background-color: var(--uyaai-pink-hover) !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(237, 0, 142, 0.3) !important;
}

/* 4. 移除 Fluent Form 默认的多余边距 */
.fluentform .ff-el-group {
    margin-bottom: 20px !important;
}

/* 5. 响应式微调 */
@media (max-width: 768px) {
    .faq-form-container {
        padding: 30px 20px !important;
    }
    .faq-form-container .ff-btn-submit {
        padding: 15px !important;
        font-size: 14px !important;
    }
}

/* =============================================
   UYAAI Factory & Trust Page Styles
   ============================================= */
:root {
    --uyaai-pink: rgb(237, 0, 142);
    --uyaai-pink-hover: rgb(200, 0, 120);
    --uyaai-dark: #111111;
    --uyaai-gray-bg: #f9f9fb;
    --uyaai-border: #eeeeee;
}

/* 布局容器 */
.uyaai-factory-page {
    line-height: 1.6;
    color: var(--uyaai-dark);
}

.ufa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.ufa-hero {
    padding: 6cqb 0;
    background-color: #000;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/wp-content/themes/generatepress-child/assets/images/factory-hero.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #fff;
}

.ufa-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 20px;
    font-weight: 800;
}

.ufa-hero p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}

/* 三厂联动 Grid */
.ufa-section-title {
    text-align: center;
    padding: 20px 0 25px;
}

.ufa-section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.ufa-factory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.ufa-card {
    background: #fff;
    border: 1px solid var(--uyaai-border);
    transition: transform 0.3s ease;
}

.ufa-card:hover {
    transform: translateY(-5px);
}

.ufa-card-img {
    height: 240px;
    overflow: hidden;
}

.ufa-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ufa-card-content {
    padding: 30px;
}

.ufa-tag {
    color: var(--uyaai-pink);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.ufa-card-content h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

/* 证书矩阵 */
.ufa-cert-section {
    background-color: var(--uyaai-gray-bg);
    padding: 20px 0;
}

.ufa-cert-section .ufa-section-title {
    padding-top: 10px !important; /* 强制缩小文字距离灰色块顶部的间距 */
}

.ufa-cert-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 30px;
    /* 移除之前的 grayscale 和低透明度 */
    opacity: 1 !important; 
    filter: none !important; 
}

.ufa-cert-logos img {
    height: 50px; /* 保持高度统一 */
    width: auto;
    filter: none !important; /* 确保没有滤镜遮盖原色 */
    opacity: 1 !important;
    transition: transform 0.3s ease;
}

/* 增加一个轻微的悬浮效果，让页面更有活力 */
.ufa-cert-logos img:hover {
    transform: scale(1.1);
}

.ufa-cert-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ufa-cert-item {
    background: #fff;
    padding: 10px;
    border: 1px solid var(--uyaai-border);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

.ufa-cert-item:hover {
    border-color: var(--uyaai-pink);
}

.ufa-cert-item img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.ufa-cert-item span {
    font-size: 14px;
    font-weight: 600;
}

/* 按钮 - 严格执行主题色 */
.ufa-btn {
    display: inline-block;
    background-color: var(--uyaai-pink) !important;
    color: #fff !important;
    padding: 18px 45px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.3s;
    margin-top: 40px;
}

.ufa-btn:hover {
    background-color: var(--uyaai-pink-hover) !important;
    box-shadow: 0 5px 15px rgba(237, 0, 142, 0.3);
}

.ufa-cta-box {
    text-align: center;
    margin-top: 30px;
}

/* =============================================
   UYAAI Lightbox Modal System 
   ============================================= */
.ufa-modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 99999; /* 确保在最顶层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* 黑色半透明背景 */
    cursor: zoom-out;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ufa-modal.is-active {
    opacity: 1;
    pointer-events: auto;
    display: flex;
}

.ufa-modal-content {
    max-width: 90%;
    max-height: 85vh;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    border: 5px solid #fff;
    background: #fff;
}

.is-active .ufa-modal-content {
    transform: scale(1);
}

.ufa-modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    line-height: 1;
}

.ufa-modal-close:hover {
    color: rgb(237, 0, 142); /* 悬浮时显示品牌玫红色 */
}

/* 禁止弹窗打开时页面滚动 */
body.ufa-no-scroll {
    overflow: hidden;
}

/* =============================================
   UYAAI Factory Page - Mobile Responsive Fix
   ============================================= */

@media (max-width: 768px) {
    /* 1. Hero区：缩小字号和间距，防止占据整个首屏 */
    .ufa-hero {
        padding: 40px 15px !important;
    }
    .ufa-hero h1 {
        font-size: 26px !important; /* 缩小标题 */
        line-height: 1.2;
    }
    .ufa-hero p {
        font-size: 14px !important;
        line-height: 1.4;
    }

    /* 2. 通用标题：缩小大标题间距 */
    .ufa-section-title {
        padding: 30px 15px 15px !important;
    }
    .ufa-section-title h2 {
        font-size: 22px !important;
    }
    .ufa-section-title p {
        font-size: 13px;
    }

    /* 3. 三厂联动：变为单列，并统一图片高度 */
    .ufa-factory-grid {
        grid-template-columns: 1fr !important; /* 强制单列 */
        gap: 20px !important;
        margin-bottom: 30px !important;
    }
    .ufa-card-img {
        height: 200px !important; /* 手机端缩短图片高度，更紧凑 */
    }
    .ufa-card-content {
        padding: 20px !important;
    }
    .ufa-card-content h3 {
        font-size: 18px !important;
        margin-bottom: 8px;
    }

    /* 4. 认证Logo：解决孤儿行，让它们整齐排列 */
    .ufa-cert-logos {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr); /* 手机端改用3列网格 */
        gap: 15px !important;
        justify-items: center;
        opacity: 0.8;
    }
    .ufa-cert-logos img {
        height: 100px !important; /* 缩小Logo */
        width: auto;
    }

    /* 5. 证书画廊：解决大小不一的关键点 */
    .ufa-cert-gallery {
        grid-template-columns: repeat(2, 1fr) !important; /* 两列对齐 */
        gap: 10px !important;
        padding: 0 10px;
    }
    .ufa-cert-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%; /* 确保卡片高度一致 */
        padding: 8px !important;
    }
    .ufa-cert-item img {
        height: 180px !important; /* 强制统一证书图片高度 */
        object-fit: contain !important; /* 保证证书内容不被裁剪 */
        background: #fdfdfd;
        margin-bottom: 5px !important;
    }
    .ufa-cert-item span {
        font-size: 12px !important; /* 缩小证书名称字体 */
        line-height: 1.2;
        display: block;
        min-height: 30px; /* 为文字预留统一高度 */
    }

    /* 6. 底部下载按钮：适配手机宽度 */
    .ufa-btn {
        width: 100%; /* 手机端按钮撑满 */
        padding: 15px 20px !important;
        font-size: 16px !important;
        box-sizing: border-box;
    }
    .ufa-cta-box {
        padding: 0 20px 40px; /* 增加底部留白 */
    }
}

/* =============================================
   Fluent Forms Integration Styles
   ============================================= */

.ufa-form-container {
    max-width: 600px; /* 限制表单宽度，使其居中且美观 */
    margin: 0 auto;
    text-align: left; /* 表单内部文字左对齐 */
    background: #fff;
    padding: 30px;
    border: 1px solid var(--uyaai-border);
    border-radius: 4px;
}

/* 强制修改 Fluent 表单提交按钮为 UYAAI 玫红色 */
.ufa-form-container .ff-btn-submit {
    background-color: var(--uyaai-pink) !important;
    border-color: var(--uyaai-pink) !important;
    width: 100% !important; /* 移动端和 PC 端均撑满，更有引导感 */
    padding: 15px 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    transition: 0.3s !important;
}

.ufa-form-container .ff-btn-submit:hover {
    background-color: var(--uyaai-pink-hover) !important;
    box-shadow: 0 5px 15px rgba(237, 0, 142, 0.3);
}

/* 优化输入框焦点颜色 */
.ufa-form-container input:focus, 
.ufa-form-container textarea:focus {
    border-color: var(--uyaai-pink) !important;
    box-shadow: 0 0 0 2px rgba(237, 0, 142, 0.1) !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .ufa-form-container {
        padding: 20px;
        border: none; /* 手机端去除边框，显得更开阔 */
        background: transparent;
    }
}