/* ====== 客运售票科技企业官网 公共样式 ====== */
/* 配色：主色#165DFF 辅助#36CFC9 #FF7D00 中性#FFFFFF #F5F7FA #E5E6EB #86909C #1D2129 */

:root {
  --primary: #165DFF;
  --primary-hover: #0E4BD2;
  --primary-active: #0A3DB3;
  --secondary-cyan: #36CFC9;
  --secondary-orange: #FF7D00;
  --white: #FFFFFF;
  --bg-light: #F5F7FA;
  --border: #E5E6EB;
  --text-secondary: #86909C;
  --text-primary: #1D2129;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --radius: 8px;
  --radius-lg: 12px;
  --transition: all .3s ease;
  --max-width: 1200px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: -apple-system, "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
  color: var(--text-primary); background: var(--white); line-height:1.6; font-size:16px;
}
a { text-decoration:none; color:inherit; }
ul,li { list-style:none; }
img { max-width:100%; display:block; }

/* ====== 通用布局 ====== */
.container { max-width:var(--max-width); margin:0 auto; padding:0 24px; }
.section { padding:80px 0; }
.section-title { font-size:32px; font-weight:700; text-align:center; margin-bottom:16px; color:var(--text-primary); }
.section-subtitle { font-size:16px; color:var(--text-secondary); text-align:center; margin-bottom:48px; }

/* ====== 顶部导航栏 ====== */
.header { position:fixed; top:0; left:0; right:0; z-index:1000; background-color:#0A1A3F; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(135deg, #0A1A3F 0%, #0D2B6B 40%, #165DFF 100%); background-size:20px 20px, 20px 20px, 100% 100%; border-bottom:1px solid rgba(255,255,255,.1); box-shadow:0 2px 24px rgba(22,93,255,.25); }
.header .container { display:flex; align-items:center; justify-content:space-between; height:64px; }
.header-logo { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.header-logo img { height:36px; width:auto; display:block; }
.header-logo .logo-text { font-size:18px; font-weight:700; color:var(--white); letter-spacing:1px; }
.header-nav { display:flex; gap:4px; }
.header-nav a { display:block; padding:8px 16px; font-size:15px; color:rgba(255,255,255,.85); border-radius:6px; transition:var(--transition); }
.header-nav a:hover, .header-nav a.active { color:var(--white); background:rgba(255,255,255,.15); }
.header-actions { display:flex; align-items:center; gap:16px; }
.header-phone { font-size:14px; color:rgba(255,255,255,.7); white-space:nowrap; }
.hamburger { display:none; width:28px; height:20px; flex-direction:column; justify-content:space-between; cursor:pointer; background:none; border:none; }
.hamburger span { display:block; height:2px; background:var(--white); border-radius:2px; transition:var(--transition); }

/* ====== 按钮 ====== */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:6px; font-size:15px; font-weight:500; cursor:pointer; border:none; transition:var(--transition); }
.btn-primary { background:var(--primary); color:var(--white); }
.btn-primary:hover { background:var(--primary-hover); }
.btn-primary:active { background:var(--primary-active); }
.btn-outline { background:transparent; color:var(--primary); border:1px solid var(--primary); }
.btn-outline:hover { background:var(--primary); color:var(--white); }
.btn-lg { padding:14px 36px; font-size:16px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ====== 页面内 Banner 标题区 ====== */
.page-banner { padding:112px 0 56px; background:linear-gradient(135deg, #F0F5FF 0%, #E8F8F7 100%); text-align:center; }
.page-banner h1 { font-size:38px; font-weight:800; color:var(--text-primary); margin-bottom:12px; }
.page-banner .tags { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
.page-banner .tag { display:inline-block; padding:4px 16px; background:rgba(22,93,255,.08); color:var(--primary); border-radius:20px; font-size:13px; }

/* ====== 卡片系统 ====== */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; transition:var(--transition); cursor:pointer; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card-icon { width:56px; height:56px; overflow: hidden; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:16px; }
.card-icon img{width: 100%; height: 100%;}
.card-icon.blue { background:rgba(22,93,255,.1); color:var(--primary); }
.card-icon.cyan { background:rgba(54,207,201,.1); color:var(--secondary-cyan); }
.card-icon.orange { background:rgba(255,125,0,.1); color:var(--secondary-orange); }
.card h3 { font-size:18px; margin-bottom:8px; color:var(--text-primary); }
.card p { font-size:14px; color:var(--text-secondary); line-height:1.7; }

/* 网格布局 */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-4-2 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-3-2 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ====== 产品详情页通用区域 ====== */
.detail-section { padding:64px 0; }
.detail-section:nth-child(even) { background:var(--bg-light); }

/* ====== 表单区 ====== */
.contact-section { background:var(--bg-light); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; color:var(--text-primary); }
.form-group input,
.form-group select,
.form-group textarea { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; transition:var(--transition); background:var(--white); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(22,93,255,.1); }
.form-group textarea { min-height:120px; resize:vertical; }
.contact-info { padding:32px; }
.contact-info h3 { font-size:20px; margin-bottom:20px; }
.contact-info-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; font-size:14px; color:var(--text-secondary); }
.contact-info-item strong { color:var(--text-primary); display:block; flex-shrink:0; width:58px; }

/* ====== 弹窗 ====== */
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:2000; align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal { background:var(--white); border-radius:var(--radius-lg); padding:40px; max-width:480px; width:90%; box-shadow:0 16px 48px rgba(0,0,0,.2); }
.modal h3 { font-size:20px; margin-bottom:16px; }
.modal p { font-size:14px; color:var(--text-secondary); line-height:1.7; margin-bottom:20px; }
.modal .modal-btns { display:flex; gap:12px; justify-content:flex-end; }

/* ====== 底部页脚 ====== */
.footer { background:var(--text-primary); color:rgba(255,255,255,.7); padding:56px 0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-col h4 { color:var(--white); font-size:16px; margin-bottom:16px; }
.footer-col p, .footer-col li { font-size:13px; line-height:2; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:20px; text-align:center; font-size:12px; }

/* ====== 卖点高亮 ====== */
.highlight-box { background:linear-gradient(135deg,rgba(22,93,255,.05),rgba(54,207,201,.05)); border-radius:var(--radius-lg); padding:24px 32px; margin:24px 0; border-left:4px solid var(--primary); }
.highlight-box p { font-size:15px; color:var(--primary); font-weight:500; }

/* ====== 移动端汉堡菜单 ====== */
.mobile-menu { display:none; position:fixed; top:64px; left:0; right:0; background:var(--white); border-bottom:1px solid var(--border); z-index:999; padding:16px 0; }
.mobile-menu.active { display:block; }
.mobile-menu a { display:block; padding:12px 24px; font-size:16px; border-bottom:1px solid var(--bg-light); }
.mobile-menu a:last-child { border-bottom:none; }

/* 图片查看器 */
.image-viewer {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3000; align-items: center; justify-content: center; display: none;}
.image-viewer.visible {display: flex;}
.image-viewer-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px);}
.image-viewer-content {position: relative; display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 90vh; padding: 20px;}
.image-viewer-close {position: absolute; top: -50px; right: 0; width: 40px; height: 40px; border: none; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 24px; cursor: pointer; border-radius: 8px; transition: all 0.3s ease;}
.image-viewer-close:hover {background: rgba(255, 255, 255, 0.25);}
.image-viewer-prev,
.image-viewer-next {position: absolute; width: 56px; height: 56px; border: none; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 24px; cursor: pointer; border-radius: 50%; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;}
.image-viewer-prev:hover,
.image-viewer-next:hover {background: rgba(255, 255, 255, 0.25); transform: scale(1.1);}
.image-viewer-prev {left: -70px;}
.image-viewer-next {right: -70px;}
.image-viewer-main {position: relative; max-width: calc(90vw - 120px); max-height: 85vh; display: flex; flex-direction: column; align-items: center;}
.image-viewer-main img {max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);}
.image-viewer-caption { margin-top: 16px; padding: 8px 24px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; border-radius: 20px; white-space: nowrap;}
.image-viewer-indicators {position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px;}
.indicator {width: 10px; height: 10px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; transition: all 0.3s ease;}
.indicator.active {background: #fff; transform: scale(1.3);}

/* ====== 响应式 ====== */
@media (max-width:1200px) {
  .grid-4, .grid-4-2 { grid-template-columns:repeat(2,1fr); }
  .grid-3-2 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .header-nav, .header-actions { display:none; }
  .hamburger { display:flex; }
  .grid-4, .grid-4-2, .grid-3-2 { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .section { padding:48px 0; }
  .page-banner h1 { font-size:28px; }

  .image-viewer-content {max-width: 95vw;}
  .image-viewer-close {top: 10px; right: 10px; width: 36px; height: 36px; font-size: 20px;}
  .image-viewer-prev,
  .image-viewer-next {width: 44px; height: 44px; font-size: 18px;}
  .image-viewer-prev {left: 10px;}
  .image-viewer-next {right: 10px;}
  .image-viewer-main {max-width: 100%;}
  .image-viewer-indicators {bottom: 10px;}
}
@media (max-width:375px) {
  .container { padding:0 16px; }
  .btn-lg { padding:12px 24px; font-size:14px; }
  .footer-grid { grid-template-columns:1fr; }
}