@import "./common.css";

/* ===== 劳力士介绍模块 ===== */
.rolex-intro { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1200px; margin:0 auto; padding:40px 20px; background-color:#fff; gap:40px; }
.intro-text { flex:1; min-width:300px; }
.intro-text h2 { font-size:28px; font-weight:bold; color:#333; margin-bottom:20px; line-height:1.2; }
.intro-text p { font-size:16px; color:#666; line-height:1.6; margin-bottom:16px; }
.intro-text .phone { font-size:16px; color:#333; font-weight:700; }
.intro-images { display:grid; gap:20px; flex:1; min-width:300px; }
.intro-images img { display:block; width:100%; height:auto; border-radius:8px; object-fit:cover; }
@media (max-width:768px) { .rolex-intro { flex-direction:column; align-items:flex-start; } .intro-images { grid-template-columns:1fr; margin-top:20px; } }

/* ===== 服务项目模块 ===== */
.part2-section { width:100%; margin:40px auto; padding:30px; background-color:#f5f5f5; }
.part2-section-inner { width:100%; max-width:1200px; margin:0 auto; }
.part2-title { font-size:32px; font-weight:bold; color:#000; line-height:1.2; text-align:center; margin-bottom:40px; position:relative; display:inline-block; left:50%; transform:translateX(-50%); padding-bottom:15px; }
.part2-title::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:80px; height:3px; background-color:#197149; border-radius:2px; }
.part2-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; }
.part2-card { background-color:#fff; border-radius:16px; overflow:hidden; box-shadow:0 5px 20px rgba(0,48,87,0.05); transition:all 0.3s ease; border:1px solid #eee; }
.part2-card:hover { transform:translateY(-8px); box-shadow:0 10px 30px rgba(0,48,87,0.1); border-color:#ddd; }
.part2-card img { width:100%; height:200px; object-fit:cover; transition:transform 0.5s ease; }
.part2-card:hover img { transform:scale(1.05); }
.card-content { padding:20px; }
.part2-card-title { font-size:20px; font-weight:600; color:#000; margin-bottom:10px; display:flex; align-items:center; }
.part2-card-title::before { content:""; width:4px; height:20px; background-color:#197149; margin-right:10px; border-radius:2px; }
.part2-card-desc { font-size:15px; color:#666; line-height:1.6; margin-bottom:15px; }
.part2-card-footer { display:flex; justify-content:space-between; align-items:center; padding-top:15px; border-top:1px solid #f0f0f0; }
.price { font-size:16px; font-weight:500; color:#197149; background-color:rgba(25,113,73,0.05); padding:6px 12px; border-radius:4px; transition:all 0.3s ease; }
.price:hover { background-color:rgba(25,113,73,0.1); }
.part2-more-btn { color:#fff; background-color:#197149; font-weight:500; text-decoration:none; display:flex; align-items:center; transition:all 0.3s ease; padding:6px 16px; border-radius:4px; }
.part2-more-btn:hover { background-color:#145a3a; }
.part2-more-btn i { margin-left:5px; transition:transform 0.3s ease; }
.part2-more-btn:hover i { transform:translateX(3px); }
@media (max-width:768px) { .part2-grid { grid-template-columns:1fr; gap:20px; } .part2-title { font-size:26px; } .part2-card img { height:180px; } }

/* ===== 服务流程模块 ===== */
.part3-section { width:100%; max-width:1200px; margin:60px auto; padding:0 20px; overflow:hidden; }
.part3-title { font-size:32px; font-weight:bold; color:#000; line-height:1.2; text-align:center; margin-bottom:60px; position:relative; display:inline-block; left:50%; transform:translateX(-50%); padding-bottom:15px; }
.part3-title::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:80px; height:3px; background-color:#197149; border-radius:2px; }
.process-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:30px; margin-bottom:80px; }
.process-step { display:flex; flex-direction:column; align-items:center; text-align:center; background-color:#fff; padding:20px; border-radius:16px; box-shadow:0 5px 20px rgba(0,48,87,0.05); transition:all 0.3s ease; border:1px solid #eee; }
.process-step:hover { transform:translateY(-8px); box-shadow:0 10px 30px rgba(0,48,87,0.1); border-color:#ddd; }
.step-icon { width:80px; height:80px; border-radius:50%; background-color:rgba(25,113,73,0.1); display:flex; align-items:center; justify-content:center; margin-bottom:20px; position:relative; }
.step-number { position:absolute; top:-10px; right:-10px; width:30px; height:30px; border-radius:50%; background-color:#197149; color:#fff; font-size:16px; font-weight:bold; display:flex; align-items:center; justify-content:center; }
.step-icon i { font-size:32px; color:#197149; display:flex; align-items:center; justify-content:center; }
.step-icon i img { width:60px; display:block; }
.step-title { font-size:20px; font-weight:600; color:#000; margin-bottom:10px; }
.step-desc { font-size:15px; color:#666; line-height:1.6; }
.service-guarantee { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.guarantee-card { border:1px solid rgba(25,113,73,0.1); background-color:#f9f9f9; border-radius:12px; padding:30px; text-align:center; transition:all 0.3s ease; }
.guarantee-card:hover { background-color:rgba(25,113,73,0.25); box-shadow:0 8px 20px rgba(0,0,0,0.08); transform:translateY(-4px); }
.guarantee-card i { font-size:36px; color:#197149; margin-bottom:15px; }
.guarantee-title { font-size:18px; font-weight:600; color:#333; margin-bottom:10px; }
.guarantee-desc { font-size:15px; color:#666; line-height:1.6; }
@media (max-width:768px) { .part3-title { font-size:26px; } .process-steps { grid-template-columns:1fr; gap:25px; } .service-guarantee { grid-template-columns:1fr; gap:20px; } }

/* ===== 服务网点模块（品牌风格统一） ===== */
.part4-section { width:100%; margin:60px auto; overflow:hidden; background-color:#f5f5f5; padding:0 20px; }
.part4-section-inner { width:100%; max-width:1200px; margin:0 auto; padding:30px 0; }
.part4-title { font-size:32px; font-weight:bold; color:#000; line-height:1.2; text-align:center; margin-bottom:15px; position:relative; display:inline-block; left:50%; transform:translateX(-50%); padding-bottom:15px; }
.part4-title::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:80px; height:3px; background-color:#197149; border-radius:2px; }
.part4-subtitle { text-align:center; color:#666; font-size:16px; margin-bottom:40px; letter-spacing:1px; }

/* 城市筛选标签 */
.city-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 16px; margin-bottom:40px; }
.city-tab { padding:8px 22px; border-radius:30px; background:#fff; color:#333; font-size:15px; font-weight:500; text-decoration:none; border:1px solid #e0e0e0; transition:all 0.3s ease; box-shadow:0 2px 4px rgba(0,0,0,0.02); cursor:pointer; }
.city-tab:hover { background:#197149; color:#fff; border-color:#197149; transform:translateY(-2px); box-shadow:0 6px 16px rgba(25,113,73,0.15); }
.city-tab.active { background:#197149; color:#fff; border-color:#197149; box-shadow:0 4px 12px rgba(25,113,73,0.2); }

/* 网点卡片网格 - 三列 */
.location-list { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.location-card { background-color:#fff; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,0.06); transition:all 0.3s ease; border:1px solid #f0f0f0; overflow:hidden; display:flex; flex-direction:column; }
.location-card:hover { transform:translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,0.10); border-color:#197149; }

/* 卡片图片 */
.card-image { width:100%; height:160px; overflow:hidden; flex-shrink:0; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.location-card:hover .card-image img { transform:scale(1.05); }

.card-header { padding:16px 20px 12px; background:linear-gradient(135deg,#f8faf8 0%,#f0f4f0 100%); border-bottom:2px solid #197149; display:flex; justify-content:space-between; align-items:center; }
.location-title { font-size:18px; font-weight:700; color:#000; letter-spacing:0.5px; }
.location-title .brand-prefix { color:#197149; font-weight:700; }
.location-title .city-name { color:#197149; }
.location-status { padding:4px 14px; /* background-color:#197149; */ color:#197149; font-size:12px; font-weight:600; border-radius:20px; letter-spacing:0.5px; white-space:nowrap; }

.card-body { padding:16px 20px 20px; flex:1; display:flex; flex-direction:column; }
.location-address { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; flex:1; }
.location-address i { color:#197149; font-size:16px; margin-top:2px; flex-shrink:0; }
.location-address .addr-text { font-size:14px; color:#555; line-height:1.6; }

.card-footer { display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid #f0f0f0; margin-top:auto; }
.card-footer .phone-info { display:flex; align-items:center; gap:6px; font-size:14px; color:#333; font-weight:600; }
.card-footer .phone-info i { color:#197149; }
.card-footer .phone-info .phone-num { color:#197149; font-weight:700; }
.card-actions { display:flex; gap:8px; }
.card-actions .action-btn-sm { padding:6px 16px; border-radius:4px; font-size:13px; font-weight:500; text-decoration:none; transition:all 0.3s ease; border:1px solid #197149; background:#fff; color:#197149; }
.card-actions .action-btn-sm:hover { background:#197149; color:#fff; box-shadow:0 4px 12px rgba(25,113,73,0.2); }
.card-actions .action-btn-sm.primary { background:#197149; color:#fff; }
.card-actions .action-btn-sm.primary:hover { background:#145a3a; border-color:#145a3a; }

@media (max-width:1024px) { .location-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) {
  .part4-title { font-size:26px; }
  .location-list { grid-template-columns:1fr; gap:18px; }
  .city-tabs { gap:8px 10px; }
  .city-tab { padding:6px 16px; font-size:13px; }
  .card-image { height:140px; }
  .card-footer { flex-direction:column; gap:12px; align-items:stretch; }
  .card-actions { justify-content:stretch; }
  .card-actions .action-btn-sm { flex:1; text-align:center; }
}
@media (max-width:400px) {
  .card-header { flex-direction:column; align-items:flex-start; gap:6px; }
  .location-title { font-size:16px; }
  .card-image { height:120px; }
}

/* ===== 常见问题模块 - 三列布局 ===== */
.part5-section { width:100%; max-width:1440px; margin:60px auto; padding:0 20px; overflow:hidden; }
.part5-title { font-size:32px; font-weight:bold; color:#000; line-height:1.2; text-align:center; margin-bottom:40px; position:relative; display:inline-block; left:50%; transform:translateX(-50%); padding-bottom:15px; }
.part5-title::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:80px; height:3px; background-color:#197149; border-radius:2px; }
.faq-container { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:15px; }
.faq-item { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,0.05); transition:all 0.3s ease; border:1px solid #eee; width:calc(33.333% - 10px); flex-shrink:0; }
.faq-item:hover { box-shadow:0 5px 15px rgba(0,0,0,0.08); transform:translateY(-2px); }
.faq-question-link { display:block; text-decoration:none; }
.faq-question { padding:16px 18px; background-color:#fff; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:all 0.3s ease; }
.faq-question:hover { background-color:#f9f9f9; }
.question-text { font-size:16px; font-weight:500; color:#333; max-width:88%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.faq-icon { width:24px; height:24px; border-radius:50%; background-color:rgba(25,113,73,0.1); color:#197149; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all 0.3s ease; flex-shrink:0; }
.faq-question:hover .faq-icon { background-color:#197149; color:#fff; }
.faq-contact { margin-top:40px; text-align:center; }
.faq-contact p { font-size:18px; color:#333; margin-bottom:20px; }
.faq-contact-buttons { display:flex; justify-content:center; gap:20px; }
.faq-btn { padding:10px 24px; background-color:#197149; color:#fff; text-decoration:none; border-radius:4px; font-size:16px; transition:all 0.3s ease; display:inline-flex; align-items:center; justify-content:center; }
.faq-btn:hover { background-color:#145a3a; transform:translateY(-2px); box-shadow:0 4px 12px rgba(25,113,73,0.2); }
@media (max-width:992px) { .faq-item { width:calc(50% - 8px); } }
@media (max-width:768px) {
  .part5-title { font-size:26px; }
  .faq-item { width:100%; }
  .question-text { font-size:15px; }
  .faq-question { padding:14px 16px; }
  .faq-contact-buttons { flex-direction:column; gap:15px; max-width:240px; margin:0 auto; }
}