/* ============================================================
   滁州车辆抵押贷款网站 — 全局样式表
   响应式断点：Mobile < 640px < Tablet < 1024px < Desktop ≤ 1200px
   移动优先：默认样式为移动端，通过 min-width 媒体查询向上适配
   ============================================================ */

/* ---- CSS 变量 ---- */
:root {
    --primary-900: #0D3B8C;
    --primary-700: #1A5FDC;
    --primary-500: #2563EB;
    --primary-100: #DBEAFE;
    --accent-500: #F59E0B;
    --accent-100: #FEF3C7;
    --success: #10B981;
    --danger: #EF4444;
    --gray-900: #111827;
    --gray-800: #1E293B;
    --gray-600: #475569;
    --gray-400: #94A3B8;
    --gray-200: #E2E8F0;
    --gray-100: #F1F5F9;
    --white: #FFFFFF;
    --container-max: 1200px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-glow: 0 0 20px rgba(37,99,235,0.15);
    --font-h2: 1.5rem;
    --font-h3: 1.25rem;
    --font-body: 1rem;
    --font-small: 0.875rem;
    --spacing-xs: 12px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --transition: 300ms ease;
}

/* ---- 键盘焦点指示器（无障碍） ---- */
:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; border-radius: 2px; }

/* ---- 跳过导航（无障碍） ---- */
.skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--primary-500); color: var(--white);
    padding: 8px 16px; z-index: 10000;
}
.skip-link:focus { top: 0; }

/* ---- 通用容器 ---- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-sm); }

/* ---- Header ---- */
header { position: sticky; top: 0; z-index: 1000; background: var(--white); box-shadow: var(--shadow-sm); }
header nav { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-xs) var(--spacing-sm); }
header .logo { font-size: 1.25rem; font-weight: 700; color: var(--primary-700); text-decoration: none; display: flex; align-items: center; gap: 8px; }
header .logo span { font-size: var(--font-small); color: var(--gray-600); font-weight: 400; }
header .nav-links { display: none; list-style: none; gap: var(--spacing-xs); }
header .nav-links a { text-decoration: none; color: var(--gray-800); font-size: var(--font-small); padding: 12px 8px; border-radius: var(--radius-sm); transition: color var(--transition); }
header .nav-links a:hover { color: var(--primary-500); }
header .header-search { display: none; }
header .header-search form { position: relative; display: flex; align-items: center; }
header .header-search input { width: 180px; padding: 8px 36px 8px 14px; border: 2px solid var(--gray-200); border-radius: var(--radius-full); font-size: var(--font-small); outline: none; background: var(--gray-100); transition: all var(--transition); }
header .header-search input:focus { border-color: var(--primary-500); background: var(--white); box-shadow: 0 0 0 3px var(--primary-100); width: 220px; }
header .header-search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; padding: 6px 10px; border-radius: var(--radius-full); transition: color var(--transition); color: var(--gray-600); }
header .header-search button:hover { color: var(--primary-500); }
header .header-phone { font-weight: 700; color: var(--accent-500); text-decoration: none; white-space: nowrap; }
header .hamburger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; font-size: 1.5rem; cursor: pointer; border-radius: var(--radius-sm); }

/* 移动端：导航下拉菜单 */
@media (max-width: 1023px) {
    header .header-phone { display: none; }
    header .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--white);
        padding: 8px 0;
        box-shadow: var(--shadow-md);
        z-index: 999;
        border-top: 1px solid var(--gray-200);
    }
    header .nav-links.open { display: flex; }
    header .nav-links a {
        display: block;
        padding: 12px 20px;
        font-size: 0.9375rem;
        border-bottom: 1px solid var(--gray-100);
    }
}

/* ---- Footer ---- */
footer { background: var(--gray-800); color: var(--white); padding: var(--spacing-xl) var(--spacing-sm); margin-top: var(--spacing-xl); }
footer .footer-grid { max-width: var(--container-max); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
footer a { color: var(--gray-400); text-decoration: none; transition: color var(--transition); }
footer a:hover { color: var(--white); }
footer h4 { color: var(--white); margin-bottom: var(--spacing-xs); font-size: var(--font-h3); }
footer ul { list-style: none; padding: 0; }
footer ul li { margin-bottom: 4px; }
footer .icp { font-size: 0.75rem; color: var(--gray-400); }
footer .footer-bottom { max-width: var(--container-max); margin: var(--spacing-md) auto 0; padding-top: var(--spacing-sm); border-top: 1px solid var(--gray-600); text-align: center; }
footer .footer-bottom a { color: var(--accent-500); }

/* ---- 移动端悬浮 CTA ---- */
.mobile-cta-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; }
.mobile-cta-bar a { flex: 1; text-align: center; padding: 12px; color: var(--white); text-decoration: none; font-weight: 700; }
.mobile-cta-bar .cta-call { background: var(--primary-500); }
.mobile-cta-bar .cta-form { background: var(--accent-500); }

/* ---- 回到顶部 ---- */
.back-to-top { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-500); color: var(--white); border: none; cursor: pointer; opacity: 0; transition: opacity var(--transition); z-index: 999; font-size: 1.25rem; }
.back-to-top.visible { opacity: 1; }

/* ---- 面包屑 ---- */
.breadcrumb { max-width: var(--container-max); margin: 0 auto; padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-small); color: var(--gray-600); }
.breadcrumb a { color: var(--primary-500); text-decoration: none; }
.breadcrumb a + a::before { content: "›"; margin: 0 8px; color: var(--gray-400); }
.breadcrumb span { text-decoration-skip-ink: none; }

/* ---- Hero ---- */
.hero { background: linear-gradient(135deg, var(--primary-700), var(--primary-900)); color: var(--white); padding: var(--spacing-xl) var(--spacing-sm); text-align: center; }
.hero h1 { font-size: 2rem; margin-bottom: var(--spacing-xs); }
.hero-subtitle { font-size: var(--font-body); opacity: 0.9; margin-bottom: var(--spacing-md); }
.hero-actions { display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; font-size: var(--font-small); }

/* ---- 按钮 ---- */
.btn { display: inline-block; padding: 10px 24px; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; transition: all var(--transition); border: none; cursor: pointer; }
.btn-primary { background: var(--primary-500); color: var(--white); }
.btn-primary:hover { background: var(--primary-700); }
.btn-secondary { background: var(--white); color: var(--primary-500); border: 2px solid var(--primary-500); }
.btn-secondary:hover { background: var(--primary-100); }
.btn-lg { padding: 14px 32px; font-size: 1.125rem; }
.btn-accent { background: var(--accent-500); color: var(--white); }
.btn-accent:hover { background: #D97706; }

/* ---- 服务卡片 ---- */
.service-cards { padding: var(--spacing-xl) var(--spacing-sm); }
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
.service-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--spacing-md); box-shadow: var(--shadow-md); text-decoration: none; color: var(--gray-800); transition: transform var(--transition), box-shadow var(--transition); display: block; }
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.service-card .card-link { color: var(--primary-500); font-weight: 600; font-size: var(--font-small); }

/* ---- 表单 ---- */
.form-group { margin-bottom: var(--spacing-sm); }
.form-group label { display: block; margin-bottom: 4px; font-weight: 600; font-size: var(--font-small); }
.form-group .required { color: var(--danger); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); font-size: var(--font-body); transition: border-color var(--transition); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); }
.form-group .error-msg { color: var(--danger); font-size: var(--font-small); min-height: 1.2em; }
.form-group input[aria-invalid="true"] { border-color: var(--danger); }
.form-feedback { margin-top: var(--spacing-xs); font-size: var(--font-small); min-height: 1.5em; }
.form-feedback.success { color: var(--success); }
.form-feedback.error { color: var(--danger); }
.privacy-note { font-size: var(--font-small); color: var(--gray-600); margin-top: var(--spacing-xs); }

/* ---- 响应式：Tablet (>=640px) ---- */
@media (min-width: 640px) {
    .card-grid { grid-template-columns: 1fr 1fr; }
    footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Section 背景 ---- */
.section-white { padding: var(--spacing-xl) var(--spacing-sm); background: var(--white); }
.section-gray  { padding: var(--spacing-xl) var(--spacing-sm); background: var(--gray-100); }
.section-cta   { padding: var(--spacing-xl) var(--spacing-sm); background: linear-gradient(135deg, var(--primary-700), var(--primary-900)); color: var(--white); text-align: center; }
.section-hero  { padding: var(--spacing-2xl) var(--spacing-sm); background: linear-gradient(135deg, var(--primary-700), var(--primary-900)); color: var(--white); text-align: center; }

/* ---- 内容容器 ---- */
.content-narrow { max-width: 800px; margin: 0 auto; }
.content-wide   { max-width: 900px; margin: 0 auto; }

/* ---- 网格 ---- */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }

/* ---- 卡片 ---- */
.card-contact { background: var(--gray-100); border-radius: var(--radius-lg); padding: var(--spacing-md); }
.card-feature { background: var(--gray-100); padding: var(--spacing-md); border-radius: var(--radius-lg); }
.card-stat    { background: var(--gray-100); border-radius: var(--radius-md); padding: var(--spacing-sm); text-align: center; }
.card-process { display: flex; gap: var(--spacing-sm); align-items: flex-start; margin-bottom: var(--spacing-md); }
.card-icon   { font-size: 2.5rem; display: block; margin-bottom: var(--spacing-xs); }
.card-emoji  { font-size: 2rem; display: block; margin-bottom: var(--spacing-xs); }
.card-feature-icon { background: var(--gray-100); padding: var(--spacing-sm); border-radius: var(--radius-md); text-align: center; }

/* ---- 表格 ---- */
.table-primary { width: 100%; border-collapse: collapse; }
.table-primary thead tr { background: var(--primary-500); color: var(--white); }
.table-primary thead th { padding: 10px 12px; text-align: left; }
.table-primary tbody td { padding: 10px 12px; }
.table-primary tbody tr { border-bottom: 1px solid var(--gray-200); }

/* ---- 步骤编号 ---- */
.step-number { background: var(--primary-500); color: var(--white); width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.step-number-icon { font-size: 1.5rem; min-width: 40px; flex-shrink: 0; }

/* ---- 文本工具 ---- */
.text-center  { text-align: center; }
.text-muted   { color: var(--gray-600); }
.text-primary { color: var(--primary-700); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-large   { font-size: var(--font-h2); font-weight: 700; }
.text-small   { font-size: var(--font-small); }
.font-bold    { font-weight: 600; }
.overflow-x-auto { overflow-x: auto; }

/* ---- 标签 ---- */
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-md); font-size: var(--font-small); }
.tag-primary { background: var(--primary-500); color: var(--white); }
.tag-accent  { background: var(--accent-100); color: #92400E; }
.tag-outline { background: transparent; color: var(--primary-500); border: 1px solid var(--primary-500); }
.bg-accent-light { background: var(--accent-100); }

/* ---- 间距 ---- */
.mb-0   { margin-bottom: 0; }
.mb-sm  { margin-bottom: var(--spacing-sm); }
.mb-md  { margin-bottom: var(--spacing-md); }
.mb-lg  { margin-bottom: var(--spacing-lg); }
.mt-sm  { margin-top: var(--spacing-sm); }
.mt-md  { margin-top: var(--spacing-md); }
.mt-lg  { margin-top: var(--spacing-lg); }
.ml-md  { margin-left: var(--spacing-md); }
.mx-md  { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.py-lg  { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

/* ---- FAQ 手风琴 ---- */
.faq-item { margin-bottom: var(--spacing-sm); border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.faq-summary { padding: var(--spacing-sm) var(--spacing-md); background: var(--gray-100); cursor: pointer; font-weight: 600; }
.faq-content { padding: var(--spacing-sm) var(--spacing-md); }
.faq-category-heading { color: var(--primary-700); margin-bottom: var(--spacing-sm); padding-bottom: 8px; border-bottom: 2px solid var(--primary-100); margin-top: var(--spacing-lg); }

/* ---- CTA 工具 ---- */
.cta-hero-buttons { display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap; }
.hero-btn-outline { border-color: var(--white); color: var(--white); background: transparent; }

/* ---- 贷款计算器 ---- */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
.calc-input-card { background: var(--gray-100); padding: var(--spacing-md); border-radius: var(--radius-lg); }
.calc-result-card { background: var(--gray-100); border-radius: var(--radius-md); padding: var(--spacing-md); text-align: center; margin-bottom: var(--spacing-sm); }
.calc-result-big { font-size: 2rem; font-weight: 700; color: var(--primary-500); }
.calc-result-num { font-size: 1.25rem; font-weight: 700; }
.calc-tab-btn { flex: 1; padding: 10px; border: none; background: var(--gray-200); color: var(--gray-600); font-weight: 600; cursor: pointer; }
.calc-tab-btn.active { background: var(--primary-500); color: var(--white); }
.calc-btn-wide { width: 100%; }

/* ---- 搜索结果 ---- */
.search-empty { text-align: center; padding: var(--spacing-xl) var(--spacing-sm); }
.search-empty-icon { font-size: 3rem; display: block; margin-bottom: var(--spacing-sm); }
.search-form { display: flex; gap: var(--spacing-xs); }
.search-input { flex: 1; padding: 12px 16px; border: 2px solid var(--gray-200); border-radius: var(--radius-md); font-size: var(--font-body); }
.search-btn { padding: 12px 24px; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); justify-content: center; }
.search-result-item { border-bottom: 1px solid var(--gray-200); padding-bottom: var(--spacing-sm); }
.search-result-title { margin-bottom: 4px; }
.text-muted-light { color: #64748B; }

/* ---- 面包屑 ---- */
.breadcrumb-sep { color: var(--gray-400); margin: 0 4px; }

/* ---- 文章详情 ---- */
.article-detail { padding-bottom: 0; }
.article-header { padding: var(--spacing-lg) 0 var(--spacing-md); text-align: center; }
.article-header h1 { font-size: var(--font-h1); margin-bottom: var(--spacing-sm); }
.article-meta { display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap; }
.article-body { padding-top: var(--spacing-md); }
.article-content { line-height: 1.9; font-size: 1.0625rem; }
.article-content h2 { font-size: 1.5rem; margin: var(--spacing-lg) 0 var(--spacing-sm); color: var(--gray-900); }
.article-content h3 { font-size: 1.25rem; margin: var(--spacing-md) 0 var(--spacing-sm); color: var(--gray-800); }
.article-content p { margin-bottom: var(--spacing-sm); }
.article-content ul, .article-content ol { margin-bottom: var(--spacing-sm); padding-left: 1.5em; }
.article-content li { margin-bottom: 4px; }
.article-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-sm); }
.article-content th, .article-content td { padding: 8px 12px; border: 1px solid var(--gray-200); text-align: left; }
.article-content th { background: var(--gray-100); font-weight: 600; }
.article-content blockquote { border-left: 3px solid var(--primary-500); padding-left: var(--spacing-sm); margin: var(--spacing-sm) 0; color: var(--gray-600); }

/* ---- 文章卡片 ---- */
.card-article-link { text-decoration: none; color: inherit; display: block; }
.card-article-link:hover .card-feature { box-shadow: var(--shadow-md); transform: translateY(-2px); transition: all 0.2s ease; }
.article-card-footer { display: flex; gap: var(--spacing-sm); align-items: center; justify-content: space-between; }

/* ---- 分页 ---- */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); }
.error-page { text-align: center; padding: var(--spacing-xl) var(--spacing-sm); }
.error-code { font-size: 4rem; color: var(--gray-400); }
.contact-icon { font-size: 1.5rem; flex-shrink: 0; }
.contact-phone-link { color: var(--primary-500); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.contact-info-row { display: flex; gap: var(--spacing-sm); align-items: flex-start; margin-bottom: var(--spacing-sm); }
.privacy-link { color: var(--primary-500); }
.btn-full { width: 100%; margin-top: var(--spacing-xs); }
.honeypot { position: absolute; top: -1000px; left: 50%; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.font-h3 { font-size: var(--font-h3); }
.calc-result-hidden { display: none; }
.grid-2col-sm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
.flex-wrap { display: flex; flex-wrap: wrap; }
.gap-xs { gap: var(--spacing-xs); }
.tag-area { border-radius: var(--radius-full); padding: 6px 16px; }
.opacity-90 { opacity: 0.9; }
.table-centered thead th, .table-centered tbody td { text-align: center; }
.calc-tab-bar { gap: 0; border-radius: var(--radius-md); overflow: hidden; }
#baidu-map { min-height: 300px; }

/* ---- 响应式：Tablet 向下 (max-width: 767px) ---- */
@media (max-width: 767px) {
    .grid-2col, .grid-3col { grid-template-columns: 1fr; }
    .section-hero { padding: var(--spacing-xl) var(--spacing-sm); }
}

/* ---- 响应式：Desktop (>=1024px) ---- */
@media (min-width: 1024px) {
    header .nav-links { display: flex; }
    header .hamburger { display: none; }
    header .header-search { display: block; }
    .mobile-cta-bar { display: none; }
    .card-grid { grid-template-columns: repeat(4, 1fr); }
    footer .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 隐私政策页列表 */
.privacy-list { color: var(--gray-600); padding-left: 20px; line-height: 2; }
.privacy-list a { color: var(--primary-500); text-decoration: none; }

/* ---- 打印样式 ---- */
@media print {
    header, footer, .mobile-cta-bar, .back-to-top, .skip-link { display: none !important; }
    body { font-size: 12pt; line-height: 1.5; color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    .container { max-width: 100%; padding: 0; }
    main { display: block !important; }
    .hero, .section-hero, .section-cta { background: none !important; color: #000 !important; padding: 24px 0 !important; }
    .btn { border: 1px solid #000; padding: 8px 16px; }
    .section-white, .section-gray { padding: 16px 0; }
    img { max-width: 100%; }
    @page { margin: 2cm; }
}

/* ---- 减少动画（无障碍） ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .service-card:hover { transform: none; }
}