/* ============================================================
 * 家电维修专业版主题 repair（ver65）
 * 风格：深蓝工程蓝 + 工具橙，维修工单/服务商风格
 * 结构：repair.js 在首页注入「搜索服务 Hero」+「服务流程 4 步条」，
 *       并给每个分类卡片的 .cat-icon 填入品类 emoji
 * 覆盖：PC 首页/列表页/内容页 + 移动端（响应式），深色模式适配
 * ============================================================ */

/* ---------- 主题变量（浅色；深色见文件底部 body.dark 覆盖） ---------- */
body.tpl-repair{
    --primary:#0d4f9e;
    --primary-dark:#0a3a77;
    --accent:#ff7a1a;
    --accent-soft:#fff3e6;
    --bg:#f2f5f9;
    --card-bg:#fff;
    --text:#22364a;
    --text-light:#5b7186;
    --border:#e3eaf2;
    --shadow:0 1px 3px rgba(13,47,84,.06),0 6px 18px rgba(13,47,84,.06);
    --radius:12px;
}

/* ---------- 顶部导航：深蓝工程条 ---------- */
body.tpl-repair .header{background:linear-gradient(100deg,#0d2d54 0%,#123f7e 60%,#1a5cb0 100%);box-shadow:0 2px 14px rgba(9,32,63,.25);}
body.tpl-repair .header .logo{color:#fff;font-size:21px;}
body.tpl-repair .header .logo span{color:#ffb26b;}
body.tpl-repair .header .nav a{color:rgba(255,255,255,.88);border-radius:8px;}
body.tpl-repair .header .nav a:hover{background:rgba(255,255,255,.14);color:#fff;}
body.tpl-repair .header .nav a.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(255,122,26,.45);}
body.tpl-repair .header .phone-top{color:rgba(255,255,255,.78);}
body.tpl-repair .header .phone-top strong{color:#ffcf9e;}
body.tpl-repair .header .menu-toggle span,
body.tpl-repair .header .menu-toggle span::before,
body.tpl-repair .header .menu-toggle span::after{background:#fff;}
@media(max-width:768px){
    body.tpl-repair .header .nav.open{background:#0f2f5e;}
    body.tpl-repair .header .nav.open a{background:rgba(255,255,255,.1);color:#fff;}
}

/* ---------- Hero 搜索服务区（repair.js 注入 .rp-hero） ---------- */
.rp-hero{background:linear-gradient(115deg,#0d2d54 0%,#12478c 55%,#1c63b7 100%);position:relative;overflow:hidden;color:#fff;}
.rp-hero::before{content:"🔧";position:absolute;right:3%;top:-30px;font-size:150px;opacity:.08;transform:rotate(18deg);pointer-events:none;}
.rp-hero::after{content:"🛠️";position:absolute;left:2%;bottom:-40px;font-size:120px;opacity:.07;transform:rotate(-14deg);pointer-events:none;}
.rp-hero-in{max-width:1200px;margin:0 auto;padding:42px 15px 40px;position:relative;}
.rp-hero h2{font-size:30px;font-weight:700;margin:0 0 8px;letter-spacing:.5px;}
.rp-hero h2 em{font-style:normal;color:#ffb26b;}
.rp-hero .rp-slogan{font-size:14px;color:rgba(255,255,255,.8);margin:0 0 22px;}
.rp-search{display:flex;max-width:620px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(6,25,51,.35);}
.rp-search input{flex:1;border:none;outline:none;padding:14px 18px;font-size:15px;color:#22364a;min-width:0;}
.rp-search button{border:none;background:linear-gradient(135deg,#ff8a2a,#f56a00);color:#fff;font-size:15px;font-weight:600;padding:0 28px;cursor:pointer;white-space:nowrap;}
.rp-search button:active{filter:brightness(.92);}
.rp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center;}
.rp-chips .lbl{font-size:12px;color:rgba(255,255,255,.65);}
.rp-chips a{display:inline-block;padding:5px 14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:16px;font-size:13px;color:#fff;text-decoration:none;transition:all .2s;}
.rp-chips a:hover{background:var(--accent);border-color:var(--accent);}
.rp-hero-tel{margin-top:20px;display:inline-flex;align-items:center;gap:10px;background:rgba(255,122,26,.16);border:1px solid rgba(255,178,107,.45);padding:9px 18px;border-radius:24px;font-size:14px;color:#ffd9b0;text-decoration:none;}
.rp-hero-tel strong{font-size:20px;color:#fff;letter-spacing:1px;}
.rp-hero-tel:active{transform:scale(.98);}
@media(max-width:768px){
    .rp-hero-in{padding:26px 14px 24px;}
    .rp-hero h2{font-size:22px;}
    .rp-hero .rp-slogan{font-size:12px;margin-bottom:16px;}
    .rp-search button{padding:0 18px;font-size:14px;}
    .rp-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
    .rp-chips::-webkit-scrollbar{display:none;}
    .rp-chips a{flex-shrink:0;}
}

/* ---------- 服务流程 4 步条（repair.js 注入 .rp-steps） ---------- */
.rp-steps{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin:0 auto 20px;max-width:1200px;}
.rp-steps h3{font-size:16px;color:var(--text);margin:0 0 18px;font-weight:700;display:flex;align-items:center;gap:8px;}
.rp-steps h3::before{content:"";width:4px;height:15px;background:linear-gradient(180deg,#ff8a2a,#f56a00);border-radius:2px;}
.rp-steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.rp-step{position:relative;text-align:center;padding:6px 4px 2px;}
.rp-step .no{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#12478c,#1c63b7);color:#fff;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:0 4px 12px rgba(18,71,140,.3);position:relative;z-index:1;}
.rp-step:not(:last-child)::after{content:"";position:absolute;top:27px;left:calc(50% + 30px);right:calc(-50% + 30px);border-top:2px dashed #c9d8ea;}
.rp-step h4{font-size:14px;color:var(--text);margin:0 0 4px;font-weight:600;}
.rp-step p{font-size:12px;color:var(--text-light);margin:0;line-height:1.5;}
@media(max-width:768px){
    .rp-steps{margin:0 12px 14px;padding:18px 14px;}
    .rp-steps-row{grid-template-columns:1fr 1fr;gap:16px 10px;}
    .rp-step:not(:last-child)::after{display:none;}
    .rp-step .no{width:38px;height:38px;font-size:16px;margin-bottom:8px;}
}

/* ---------- 热线栏：橙色工单条 ---------- */
body.tpl-repair .hotline-box{background:linear-gradient(100deg,#ff8a2a,#f56a00);border-radius:12px;box-shadow:0 6px 18px rgba(245,106,0,.28);}
body.tpl-repair .hotline-box .hl-label{color:rgba(255,255,255,.92);}
body.tpl-repair .hotline-box .hl-num{color:#fff;}
body.tpl-repair .hotline-box .hl-tag{background:rgba(255,255,255,.22);color:#fff;}

/* ---------- 卡片与分类：工单卡风格 ---------- */
body.tpl-repair .card{border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);}
body.tpl-repair .card-title{border-bottom:1px solid var(--border);font-size:18px;}
body.tpl-repair .card-title .cat-icon{width:auto;height:auto;min-width:30px;background:var(--accent-soft);color:#e05e00;padding:3px 7px;border-radius:8px;font-size:15px;margin-right:8px;text-align:center;line-height:1.3;}
body.tpl-repair .card-title a.more{color:var(--primary);background:#eef4fb;padding:4px 12px;border-radius:14px;font-size:12px;}
body.tpl-repair .card-title a.more:hover{background:var(--primary);color:#fff;}
body.tpl-repair .cat-grid{gap:18px;}
@media(max-width:768px){body.tpl-repair .cat-grid{gap:12px;}}

/* 品牌/内容条目：工单列表感 */
body.tpl-repair .item-list li{padding:10px 12px;border-radius:10px;transition:background .2s;}
body.tpl-repair .item-list li:hover{background:#f6f9fd;}
body.tpl-repair .item-list li+li{border-top:1px dashed var(--border);}
body.tpl-repair .item-list li a{color:var(--text);font-weight:500;}
body.tpl-repair .item-list li a:hover{color:var(--primary);}
body.tpl-repair .item-list .item-intro{color:var(--text-light);}

/* 列表页/分页 */
body.tpl-repair .pagination a,body.tpl-repair .pagination span{border-radius:9px;border:1px solid var(--border);}
body.tpl-repair .pagination a:hover{background:var(--primary);border-color:var(--primary);}
body.tpl-repair .pagination .active,body.tpl-repair .pagination span.cur{background:linear-gradient(135deg,#12478c,#1c63b7);border-color:transparent;color:#fff;}
body.tpl-repair .list-item,body.tpl-repair .brand-list li{border-radius:10px;transition:all .2s;}
body.tpl-repair .list-item:hover,body.tpl-repair .brand-list li:hover{background:#f6f9fd;}

/* 热门城市/标签 */
body.tpl-repair .tag-box a,body.tpl-repair a.tag{border-radius:16px;border:1px solid var(--border);background:#fff;padding:5px 14px;}
body.tpl-repair .tag-box a:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- 页脚：深蓝 ---------- */
body.tpl-repair .footer{background:#0d2d54;color:#8fa8c6;margin-top:30px;}
body.tpl-repair .footer a{color:#8fa8c6;}
body.tpl-repair .footer a:hover{color:#fff;}

/* ---------- 移动端底部拨号条 ---------- */
body.tpl-repair .bottom-call-bar a{background:linear-gradient(100deg,#ff8a2a,#f56a00);}

/* ---------- 深色模式适配 ---------- */
body.dark.tpl-repair{
    --primary:#5aa2f0;
    --primary-dark:#3d8bfd;
    --accent:#ff9a4d;
    --accent-soft:#3a2a18;
    --bg:#0d1420;
    --card-bg:#161f2e;
    --text:#dbe6f2;
    --text-light:#8ea3ba;
    --border:#26344a;
    --shadow:0 1px 3px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.3);
}
body.dark.tpl-repair .header{background:linear-gradient(100deg,#0a1f3d,#0f2f5e 60%,#14406f);}
body.dark.tpl-repair .rp-hero{background:linear-gradient(115deg,#0a1f3d,#103154 55%,#173f6b);}
body.dark.tpl-repair .rp-step .no{background:linear-gradient(135deg,#14406f,#1d5490);}
body.dark.tpl-repair .item-list li:hover,body.dark.tpl-repair .list-item:hover,body.dark.tpl-repair .brand-list li:hover{background:#1b2740;}
body.dark.tpl-repair .tag-box a,body.dark.tpl-repair a.tag{background:#161f2e;}
body.dark.tpl-repair .card-title a.more{background:#1b2940;}
body.dark.tpl-repair .rp-search input{background:#fff;}