@import url("../xiu/style.css");

/*
Theme Name: Xiu Child
Template: xiu
Version: 4.0
Description: 化州公交查询 - 陌陌极简美化版
*/

/* ===== 陌陌风全局重置 ===== */
body { background-color: #f5f6f8; }

/* 面包屑 */
.mmbus-breadcrumb {
    background: #fff; border-radius: 12px; padding: 12px 18px;
    font-size: 14px; color: #999; margin-bottom: 20px;
    display: flex; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.mmbus-breadcrumb a { color: #667eea; text-decoration: none; font-weight: 500; }
.mmbus-breadcrumb a:hover { text-decoration: underline; }
.mmbus-breadcrumb .sep { margin: 0 10px; color: #ccc; }
.mmbus-breadcrumb .current { color: #333; font-weight: 600; }

/* ===== 查询表单（陌陌风悬浮感） ===== */
.mmbus-form { 
    display: flex; flex-direction: column; gap: 20px; 
    margin-bottom: 40px; background: #ffffff;
    padding: 30px; border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}
.mmbus-radio-group {
    display: flex; align-items: center; gap: 30px;
    padding-bottom: 15px; border-bottom: 1px solid #f0f0f0;
}
.mmbus-radio-group label {
    cursor: pointer; font-size: 16px; display: flex; align-items: center;
    margin: 0; font-weight: 600; color: #333;
}
.mmbus-radio-group input[type="radio"] {
    margin-right: 8px; width: 18px; height: 18px; accent-color: #667eea;
}
.mmbus-input-group { display: flex; gap: 15px; width: 100%; }
.mmbus-input-group input[type=text] {
    flex: 1; height: 52px; border: none; border-radius: 16px;
    padding: 0 20px; font-size: 15px; background: #f5f6f8;
    outline: none; transition: all 0.3s;
}
.mmbus-input-group input[type=text]:focus { 
    background: #fff; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
.mmbus-input-group button {
    flex: none; height: 52px; padding: 0 40px; border: none; border-radius: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff; font-size: 16px; font-weight: bold; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mmbus-input-group button:hover { 
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

/* ===== 列表与卡片（PC端默认 4 列） ===== */
.mmbus-section-title {
    font-size: 22px; font-weight: 800; color: #111; margin-bottom: 25px; padding-left: 0; border: none;
}
.mmbus-route-list, .mmbus-stop-list { 
    list-style: none; padding: 0; margin: 0; display: grid;
    grid-template-columns: repeat(4, 1fr); gap: 15px;
}
.mmbus-route-list li, .mmbus-stop-list li { 
    background: #ffffff; border-radius: 16px; padding: 15px;
    display: flex; flex-direction: column; align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s;
}
.mmbus-route-list li:hover, .mmbus-stop-list li:hover {
    transform: translateY(-3px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.1);
}
.mmbus-route-list a, .mmbus-stop-list a { 
    color: #333; font-weight: 800; font-size: 17px;
    text-decoration: none; margin-bottom: 5px;
}
.mmbus-route-list a:hover { color: #667eea; }

/* 查询结果中的附加文字说明 */
.mmbus-empty { color: #999; padding: 20px 0; text-align: center; }
.mmbus-stop-list .mmbus-dir { font-size: 13px; color: #888; margin-top: 4px; }
.mmbus-results { margin-bottom: 30px; }

/* ===== 详情页信息卡片 ===== */
.mmbus-info-card {
    background: #ffffff; padding: 25px; border-radius: 20px;
    display: flex; gap: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    flex-wrap: wrap;
}
.mmbus-info-item { display: flex; flex-direction: column; gap: 8px; }
.mmbus-info-item span { font-size: 13px; color: #999; }
.mmbus-info-item strong { font-size: 18px; color: #111; font-weight: 800; }

/* ===== 站点时间轴（极简圆润） ===== */
.mmbus-stop-sequence { 
    list-style-type: none; padding: 20px; margin: 0;
    background: #ffffff; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}
.mmbus-stop-sequence li {
    display: flex; align-items: center; padding: 15px 0; position: relative;
}
.mmbus-stop-sequence li:not(:last-child)::after {
    content: ''; position: absolute; left: 16px; top: 45px; bottom: -15px;
    width: 2px; background: #f0f0f0; z-index: 1;
}
.mmbus-seq {
    display: inline-block; width: 34px; height: 34px; line-height: 34px;
    text-align: center; border-radius: 50%; background: #f5f6f8;
    color: #888; font-size: 14px; font-weight: bold; margin-right: 20px; z-index: 2;
    flex: none;
}
.mmbus-stop-name { font-size: 16px; color: #333; font-weight: 500; }

/* 高亮站点（如从搜索结果点进来的站） */
.mmbus-hl .mmbus-seq { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.mmbus-hl .mmbus-stop-name { color: #667eea; font-weight: 800; }

/* 陌陌风渐变按钮（反转站点） */
.mmbus-momo-btn {
    padding: 10px 20px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff; font-size: 14px; font-weight: bold; cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); transition: all 0.3s;
}
.mmbus-momo-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); }

/* ===== 响应式（严格适配手机端4列） ===== */
@media (max-width: 1024px) { 
    .mmbus-route-list, .mmbus-stop-list { grid-template-columns: repeat(3, 1fr); } 
}
@media (max-width: 768px) { 
    .mmbus-route-list, .mmbus-stop-list { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; } 
    .mmbus-route-list li, .mmbus-stop-list li { padding: 10px; text-align: center; align-items: center; justify-content: center;}
    .mmbus-route-list a, .mmbus-stop-list a { font-size: 14px; margin-right: 0; margin-bottom: 0; }
    .mmbus-info-card { flex-direction: column; gap: 20px; }
}