/* ============================================================
   pages/contact.css —— 联系 / 询盘页（海外商务风）
   面向海外买家的 B2B 询盘页：全渠道联系卡片、结构化询盘表单、
   响应时效信任提示、常见问题折叠、页脚已由 factory.css 提供。
   ============================================================ */

.ct-container { max-width: 1180px; margin: 0 auto; padding:20px; }

/* ===== Hero ===== */
.ct-hero {
    background: linear-gradient(135deg, #f4f7fb 0%, #ffffff 100%);
    border-bottom: 1px solid #eef1f5;
    padding: 60px 0 48px;
}
.ct-hero .ct-container { text-align: center; }
.ct-kicker {
    display: inline-block; text-transform: uppercase; letter-spacing: 3px;
    font-size: 12px; font-weight: 600; color: #2f6feb; margin-bottom: 14px;
}
.ct-hero h1 { font-size: 34px; font-weight: 800; color: #111a2e; margin: 0 0 12px; letter-spacing: -.5px; }
.ct-hero p { color: #5a6474; font-size: 16px; line-height: 1.7; max-width: 640px; margin: 0 auto; }
.ct-reply {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    background: #eef4ff; color: #1e55b8; font-size: 13.5px; font-weight: 600;
    padding: 8px 16px; border-radius: 999px;
}
.ct-reply i { color: #ffb020; }

/* ===== 全渠道联系卡片 ===== */
.ct-channels {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px; margin: -26px 0 44px; position: relative; z-index: 2;
}
.ct-channel {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: #fff; border: 1px solid #eef1f5; border-radius: 12px;
    padding: 20px 14px; text-decoration: none; transition: box-shadow .18s, transform .18s;
    box-shadow: 0 6px 18px rgba(17, 26, 46, .05);
}
.ct-channel:hover { box-shadow: 0 10px 26px rgba(17, 26, 46, .12); transform: translateY(-2px); }
.ct-channel i { font-size: 26px; color: #2f6feb; }
.ct-channel.ct-wa i { color: #25D366; }
.ct-channel.ct-tg i { color: #2AABEE; }
.ct-channel.ct-skype i { color: #00AFF0; }
.ct-channel.ct-phone i { color: #16a085; }
.ct-channel.ct-li i { color: #0A66C2; }
.ct-channel-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #8a94a6; }
.ct-channel-value { font-size: 13.5px; color: #111a2e; font-weight: 600; text-align: center; word-break: break-all; }

/* ===== 主体布局 ===== */
.ct-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 28px; align-items: start; }

.ct-form-wrap, .ct-side .ct-card {
    background: #fff; border: 1px solid #eef1f5; border-radius: 14px; padding: 30px;
}
.ct-card-head h2 { font-size: 22px; font-weight: 700; color: #111a2e; margin: 0 0 6px; }
.ct-card-head p { color: #7b8494; font-size: 14px; margin: 0 0 22px; }

/* 表单 */
.ct-form { display: flex; flex-direction: column; gap: 16px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { display: flex; flex-direction: column; }
.ct-field label { font-size: 13px; font-weight: 600; color: #33404f; margin-bottom: 6px; }
.ct-field input,
.ct-field select,
.ct-field textarea {
    border: 1px solid #dfe5ee; border-radius: 8px; padding: 11px 13px;
    font-size: 14px; color: #111a2e; background: #fbfcfe; outline: none; transition: border .15s, box-shadow .15s;
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus { border-color: #2f6feb; box-shadow: 0 0 0 3px rgba(47, 111, 235, .12); background: #fff; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #a7b0be; }
.ct-submit {
    border: 0; border-radius: 8px; background: #2f6feb; color: #fff; font-size: 15px; font-weight: 600;
    padding: 13px 22px; cursor: pointer; transition: background .15s;
}
.ct-submit:hover { background: #225bd6; }
.ct-note { display: flex; align-items: center; gap: 7px; color: #8a94a6; font-size: 12.5px; margin: 4px 0 0; }
.ct-note i { color: #2f6feb; }

/* 侧栏 */
.ct-side { display: flex; flex-direction: column; gap: 22px; }
.ct-side .ct-card h3 { font-size: 17px; font-weight: 700; color: #111a2e; margin: 0 0 14px; }
.ct-contact-list { list-style: none; margin: 0; padding: 0; }
.ct-contact-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f4f8; font-size: 13.5px; }
.ct-contact-list li:last-child { border-bottom: 0; }
.ct-contact-list i { color: #2f6feb; font-size: 15px; flex-shrink: 0; }
.ct-contact-list a { color: #111a2e; text-decoration: none; word-break: break-all; }
.ct-contact-list a:hover { color: #2f6feb; }

.ct-side-block { margin-top: 18px; }
.ct-side-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #8a94a6; margin: 0 0 8px; }
.ct-side-block p { display: flex; gap: 8px; align-items: flex-start; color: #33404f; font-size: 13.5px; line-height: 1.6; margin: 0; }
.ct-side-block p i { color: #2f6feb; margin-top: 2px; }

.ct-promise {
    display: flex; align-items: flex-start; gap: 10px;
    background: #eef6ff; border: 1px solid #d8e9ff; border-radius: 10px; padding: 14px;
}
.ct-promise > i { color: #2f6feb; font-size: 20px; }
.ct-promise strong { display: block; color: #111a2e; font-size: 13.5px; }
.ct-promise span { color: #5a6474; font-size: 12.5px; }

.ct-oem { color: #111a2e; }
.ct-oem-head { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.ct-oem-head i { color: #ffb020; }
.ct-oem p { color: #33404f; font-size: 13.5px; line-height: 1.7; margin: 0; }

/* ===== FAQ ===== */
.ct-faq { margin: 54px 0 30px; }
.ct-faq h2 { font-size: 24px; font-weight: 700; color: #111a2e; text-align: center; margin: 0 0 24px; }
.ct-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-faq-item { background: #fff; border: 1px solid #eef1f5; border-radius: 10px; padding: 16px 18px; }
.ct-faq-item summary { font-size: 14.5px; font-weight: 600; color: #111a2e; cursor: pointer; list-style: none; position: relative; padding-right: 22px; }
.ct-faq-item summary::after { content: '+'; position: absolute; right: 0; top: 0; color: #2f6feb; font-weight: 700; }
.ct-faq-item[open] summary::after { content: '–'; }
.ct-faq-item p { color: #5a6474; font-size: 13.5px; line-height: 1.7; margin: 10px 0 0; }

/* ===== 响应式 ===== */
@media (max-width: 900px) {
    .ct-body { grid-template-columns: 1fr; }
    .ct-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ct-row { grid-template-columns: 1fr; }
    .ct-hero h1 { font-size: 26px; }
}