/* page.css - 页面组件样式 */
.service-box { background: #fff; margin-bottom: 15px; padding: 15px; }
.section-title { font-size: 18px; font-weight: 600; padding: 10px 0; }
.section-title:before { display: inline-block; content: ""; width: 4px; height: 18px; background: #317cf7; vertical-align: middle; margin-right: 8px; }
.section-title .title { vertical-align: middle; }
.section-title .stop-count { float: right; font-size: 14px; color: #999; font-weight: 400; }

/* Line header */
.line-header h1 { font-size: 22px; margin-bottom: 5px; }
.kind-badge { display: inline-block; background: #f0f5ff; color: #317cf7; padding: 2px 10px; border-radius: 4px; font-size: 14px; }

/* Line meta */
.line-meta { margin-top: 10px; }
.line-meta li { padding: 5px 0; font-size: 14px; color: #666; border-bottom: 1px dashed #f0f0f0; }
.line-meta li:last-child { border: 0; }
.line-meta strong { color: #333; }

/* Stop list */
.stops { counter-reset: stop-counter; }
.stops li { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px dashed #f0f0f0; }
.stops li:first-child .stop-num { background: #49bf6c; }
.stops li:last-child .stop-num { background: #ff5b5b; }
.stops li:last-child { border: 0; }
.stop-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #ddd; color: #fff; font-size: 12px; margin-right: 10px; flex-shrink: 0; }
.stop-name { font-size: 14px; color: #333; }
.stop-name:hover { color: #317cf7; }

/* Hot list */
.hot-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.hot-list a { display: inline-block; padding: 4px 12px; background: #f5f5f5; border-radius: 4px; font-size: 14px; color: #666; }
.hot-list a:hover { color: #317cf7; background: #f0f5ff; }

/* Kind list */
.kind-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
.kind-item { display: block; width: 48%; padding: 10px; background: #f9f9f9; border-radius: 4px; border-left: 3px solid #317cf7; }
.kind-name { font-size: 14px; color: #333; }
.kind-cnt { font-size: 12px; color: #999; margin-left: 5px; }

/* Line list */
.line-list { margin-top: 10px; }
.line-list li { padding: 6px 0; border-bottom: 1px dashed #f0f0f0; }
.line-list li:last-child { border: 0; }
.line-list a { font-size: 14px; }

/* City list */
.city-group { margin-bottom: 20px; }
.city-letter { font-size: 24px; font-weight: 700; color: #317cf7; margin-bottom: 8px; }
.city-items { display: flex; flex-wrap: wrap; gap: 5px; }
.city-items a { width: 120px; font-size: 14px; color: #666; padding: 4px 0; }
.city-items a:hover { color: #317cf7; }

/* Life list */
.life-list { margin-top: 8px; }
.life-list li { padding: 6px 0; }
.life-list a { font-size: 14px; color: #666; }
.life-list a:hover { color: #317cf7; }

/* Query module */
.query-module { background: #fff; margin-bottom: 15px; padding: 20px; }
.query-tabs { border-bottom: 2px solid #f0f0f0; margin-bottom: 15px; }
.query-tabs .tab { display: inline-block; padding: 8px 20px; font-size: 16px; color: #666; cursor: pointer; margin-bottom: -2px; }
.query-tabs .tab.active { color: #317cf7; border-bottom: 2px solid #317cf7; }
.query-content { display: none; padding: 10px 0; }
.query-content.active { display: block; }
.query-row { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; }
.query-row .label { min-width: 60px; font-size: 14px; color: #333; }
.query-row input[type="text"] { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
.query-row .switch-btn { display: inline-block; padding: 6px 10px; background: #f5f5f5; border-radius: 4px; cursor: pointer; font-size: 18px; color: #317cf7; }
.query-module button[type="submit"] { padding: 10px 30px; background: #317cf7; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }

/* Transfer plan */
.transfer-plan { border: 1px solid #f0f0f0; border-radius: 4px; padding: 15px; margin-bottom: 10px; }
.plan-header { margin-bottom: 8px; }
.plan-hc { display: inline-block; background: #317cf7; color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 12px; margin-right: 8px; }
.plan-detail { font-size: 13px; color: #999; }
.plan-stops { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
.plan-stop { font-size: 14px; color: #333; }
.plan-stop.poi { color: #999; }
.plan-arrow { color: #ccc; font-size: 14px; }
.plan-lines { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-transfer { color: #ff6600; font-size: 12px; font-weight: 600; padding: 0 2px; }
.plan-stop-transfer { color: #ff6600; font-weight: 600; border-bottom: 2px solid #ff6600; }
.plan-stop-poi { color: #999; }