/* =============================================================
   Eeeza 懿家 · 交互增强层  ee-interact.css
   设计约束：沿用现有设计令牌（--gold / --cream / --coffee / --accent）
            不引入第三方库，纯 CSS + 原生 JS
            尊重 prefers-reduced-motion，移动端优先
   ============================================================= */

/* ---------- 1. 顶部阅读进度条 ---------- */
.ee-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--gold-soft, #E8D9BC), var(--gold, #C9A86A) 55%, var(--gold-deep, #B08D4F));
  z-index: 1200; transition: width .12s linear; pointer-events: none;
  border-radius: 0 2px 2px 0;
}

/* ---------- 2. 回到顶部 ---------- */
.ee-top {
  position: fixed; right: 18px; bottom: 96px; z-index: 1100;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line, rgba(201, 168, 106, .28));
  box-shadow: 0 6px 20px rgba(43, 33, 24, .14);
  color: var(--gold-deep, #B08D4F); font-size: 18px; line-height: 44px;
  text-align: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
  -webkit-tap-highlight-color: transparent;
}
.ee-top.show { opacity: 1; visibility: visible; transform: none; }
.ee-top:hover { background: var(--gold, #C9A86A); color: #fff; border-color: var(--gold, #C9A86A); }
.ee-top:focus-visible { outline: 2px solid var(--gold-deep, #B08D4F); outline-offset: 2px; }
@media (max-width: 620px) { .ee-top { right: 12px; bottom: 88px; width: 42px; height: 42px; line-height: 40px; } }

/* ---------- 3. 滚动进场动效（类由 JS 添加，JS 失效时内容照常显示） ---------- */
.ee-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1), transform .62s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.ee-reveal.ee-in { opacity: 1; transform: none; will-change: auto; }

/* ---------- 4. 卡片悬停增强（仅指针设备，移动端不启用） ---------- */
@media (hover: hover) and (pointer: fine) {
  .trust-item, .ti, .step, .tier, .cat, .zone, .price-card, .doc, .truth > div,
  .svc, .why-item, .wi, .ec, .form-box, .cta-box {
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .26s ease, border-color .26s ease;
  }
  .trust-item:hover, .ti:hover, .step:hover, .price-card:hover,
  .svc:hover, .why-item:hover, .wi:hover, .ec:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(43, 33, 24, .12);
  }
  .svc:hover, .why-item:hover, .ec:hover { border-color: var(--gold, #C9A86A); }
  .ti:hover, .step:hover { border-color: var(--gold, #C9A86A); }
  .step:hover .circle { background: var(--gold, #C9A86A); color: #fff; }
  .circle { transition: background .26s ease, color .26s ease; }
  /* Hero 主图轻微放大 */
  .hero-img img { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
  .hero-img:hover img { transform: scale(1.035); }
  /* 按钮微反馈 */
  .btn-gold { transition: transform .18s ease, box-shadow .22s ease, background .22s ease; }
  .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201, 168, 106, .38); }
  .btn-gold:active { transform: translateY(0); }
}

/* ---------- 5. FAQ 手风琴 ---------- */
.faq.ee-acc dt {
  cursor: pointer; position: relative; padding-right: 40px;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}
.faq.ee-acc dt:hover { color: var(--gold-deep, #B08D4F); }
.faq.ee-acc dt::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 2px solid var(--gold, #C9A86A);
  border-bottom: 2px solid var(--gold, #C9A86A);
  transform: rotate(45deg); transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.faq.ee-acc dt[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -3px; }
.faq.ee-acc dt:focus-visible { outline: 2px solid var(--gold-deep, #B08D4F); outline-offset: 3px; border-radius: 4px; }
.faq.ee-acc dd {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .34s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, margin .3s ease;
  margin: 0;
}
.faq.ee-acc dd.ee-open { opacity: 1; }
/* 折叠态移除内边距，展开态由 JS 复位 */

/* ---------- 6. 分档 / 分类 Tab 切换 ---------- */
.ee-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 5px;
  background: var(--cream-2, #F3EADF); border-radius: 999px;
  border: 1px solid var(--line, rgba(201, 168, 106, .28));
}
.ee-tab {
  flex: 1 1 auto; min-width: 92px; text-align: center;
  padding: 11px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--ink-light, #7A6A57);
  font-family: inherit; font-size: 14.5px; letter-spacing: .3px;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.ee-tab:hover { color: var(--coffee, #2B2118); }
.ee-tab[aria-selected="true"] {
  background: var(--white, #fff); color: var(--coffee, #2B2118); font-weight: 600;
  box-shadow: 0 3px 10px rgba(43, 33, 24, .10);
}
.ee-tab:focus-visible { outline: 2px solid var(--gold-deep, #B08D4F); outline-offset: 2px; }
.ee-panel { display: none; }
.ee-panel.ee-active { display: block; animation: eeFadeUp .38s cubic-bezier(.22, .61, .36, 1); }
@keyframes eeFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) {
  .ee-tabs { border-radius: 16px; padding: 6px; }
  .ee-tab { flex: 1 1 44%; font-size: 13.5px; padding: 10px 8px; }
}

/* ---------- 7. 城市 / 区域选择器 ---------- */
.ee-city { position: relative; display: inline-flex; align-items: center; }
.ee-city-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line, rgba(201, 168, 106, .28));
  background: rgba(255, 255, 255, .7); color: var(--coffee, #2B2118);
  font-family: inherit; font-size: 13.5px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.ee-city-btn:hover { border-color: var(--gold, #C9A86A); background: #fff; }
.ee-city-btn:focus-visible { outline: 2px solid var(--gold-deep, #B08D4F); outline-offset: 2px; }
.ee-city-btn .ic {
  width: 0; height: 0; font-size: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--gold-deep, #B08D4F);
  transition: transform .22s ease;
}
.ee-city-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.ee-city-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1000;
  width: 292px; max-width: calc(100vw - 32px);
  background: var(--white, #fff); border: 1px solid var(--line, rgba(201, 168, 106, .28));
  border-radius: 16px; box-shadow: 0 18px 44px rgba(43, 33, 24, .16);
  padding: 16px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.ee-city-panel.ee-open { opacity: 1; visibility: visible; transform: none; }
.ee-city-tt { font-size: 12.5px; color: var(--ink-light, #7A6A57); letter-spacing: .5px; margin-bottom: 9px; }
.ee-city-row { display: flex; gap: 8px; margin-bottom: 12px; }
.ee-city-opt {
  flex: 1; padding: 9px 0; text-align: center; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line, rgba(201, 168, 106, .28)); background: var(--cream, #FAF6F0);
  font-size: 14px; color: var(--coffee, #2B2118); transition: all .2s ease;
}
.ee-city-opt[aria-pressed="true"] { background: var(--gold, #C9A86A); color: #fff; border-color: var(--gold, #C9A86A); font-weight: 600; }
.ee-districts { display: flex; flex-wrap: wrap; gap: 6px; }
.ee-dist {
  padding: 6px 11px; border-radius: 8px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--line, rgba(201, 168, 106, .28)); background: var(--cream, #FAF6F0);
  color: var(--ink, #33291F); transition: all .18s ease;
}
.ee-dist:hover { border-color: var(--gold, #C9A86A); }
.ee-dist[aria-pressed="true"] { background: var(--gold-deep, #B08D4F); color: #fff; border-color: var(--gold-deep, #B08D4F); }
.ee-city-note {
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line, rgba(201, 168, 106, .28));
  font-size: 12.5px; line-height: 1.6; color: var(--ink-light, #7A6A57);
}
.ee-city-note b { color: var(--gold-deep, #B08D4F); }
@media (max-width: 620px) {
  /* 移动端改为相对视口定位，避免被 nav 内的相对父元素挤出屏幕 */
  .ee-city-panel {
    position: fixed; left: 12px; right: 12px; top: 68px;
    width: auto; max-width: none; transform: translateY(-6px);
  }
  .ee-city-panel.ee-open { transform: none; }

  /* 城市控件加入后 nav 变挤：收紧间距、隐藏品牌副标、压缩 CTA */
  .nav-inner { gap: 8px; padding: 0 14px; }
  .brand-sub { display: none !important; }
  .nav-cta .btn, .nav-cta .btn-gold {
    padding: 9px 13px !important; font-size: 13.5px !important; white-space: nowrap;
  }
  .ee-city-btn { padding: 6px 10px !important; font-size: 12.5px !important; }
  .ee-city-btn .ic { font-size: 10px; }
}

/* ---------- 8. 需求匹配器 ---------- */
.ee-match {
  border: 1px solid var(--line, rgba(201, 168, 106, .28));
  border-radius: var(--radius, 18px); background: var(--white, #fff);
  padding: 22px 24px; margin: 0 0 26px;
  box-shadow: 0 10px 30px rgba(43, 33, 24, .06);
}
.ee-match-h {
  font-size: 17px; font-weight: 700; color: var(--coffee, #2B2118);
  display: flex; align-items: center; gap: 9px; margin-bottom: 6px;
}
.ee-match-h .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--gold, #C9A86A)); }
.ee-match-sub { font-size: 13.5px; color: var(--ink-light, #7A6A57); margin-bottom: 18px; line-height: 1.7; }
.ee-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.ee-field { display: flex; flex-direction: column; gap: 7px; }
.ee-field > label { font-size: 12.5px; color: var(--gold-deep, #B08D4F); font-weight: 600; letter-spacing: .3px; }
.ee-field select, .ee-field input {
  font-family: inherit; font-size: 14px; color: var(--ink, #33291F);
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(201, 168, 106, .28));
  background: var(--cream, #FAF6F0); min-height: 42px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none; appearance: none;
}
.ee-field select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B08D4F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.ee-field select:focus, .ee-field input:focus {
  outline: none; border-color: var(--gold, #C9A86A); box-shadow: 0 0 0 3px rgba(201, 168, 106, .18);
}
.ee-result {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: var(--cream-2, #F3EADF); border: 1px dashed var(--gold, #C9A86A);
  font-size: 14.5px; line-height: 1.75; color: var(--ink, #33291F);
  animation: eeFadeUp .3s ease;
}
.ee-result .big { font-size: 22px; font-weight: 700; color: var(--gold-deep, #B08D4F); letter-spacing: .5px; }
.ee-result .hint { display: block; margin-top: 7px; font-size: 13px; color: var(--ink-light, #7A6A57); }
@media (max-width: 620px) {
  .ee-match { padding: 18px 16px; }
  .ee-fields { grid-template-columns: 1fr; }
}

/* ---------- 9. 快速预约校验条 ---------- */
.ee-quick { margin-top: 4px; }
.ee-quick-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ee-quick-row .ee-field { flex: 1 1 180px; }
.ee-err { font-size: 12.5px; color: #B4453C; min-height: 17px; margin-top: 6px; }
.ee-ok {
  display: none; margin-top: 12px; padding: 12px 15px; border-radius: 12px;
  background: rgba(143, 169, 139, .14); border: 1px solid rgba(143, 169, 139, .45);
  font-size: 13.5px; line-height: 1.7; color: #4E6B4A;
}
.ee-ok.show { display: block; animation: eeFadeUp .3s ease; }
.ee-invalid { border-color: #C9715F !important; box-shadow: 0 0 0 3px rgba(196, 113, 95, .16) !important; }
.ee-shake { animation: eeShake .32s ease; }
@keyframes eeShake {
  0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); } 75% { transform: translateX(-3px); }
}

/* ---------- 10. 图片加载淡入 ---------- */
.ee-imgfade { opacity: 0; transition: opacity .5s ease; }
.ee-imgfade.ee-loaded { opacity: 1; }

/* ---------- 11. 导航区块高亮（scrollspy） ---------- */
.ee-on .nav a.ee-cur { color: var(--gold-deep, #B08D4F); }
.ee-on .nav a.ee-cur::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--gold, #C9A86A); border-radius: 2px;
}
.ee-on .nav a { position: relative; }

/* ---------- 12. 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ee-reveal, .ee-reveal.ee-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ee-panel.ee-active { animation: none; }
  .ee-result, .ee-ok { animation: none; }
  .ee-top, .ee-city-panel, .faq.ee-acc dd { transition: none; }
  .ee-shake { animation: none; }
  html { scroll-behavior: auto !important; }
}

/* ---------- 首页轮播左右箭头 ---------- */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.45); background:rgba(43,33,24,.30);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transition:opacity .25s ease, background .25s ease, transform .25s ease;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.hero-arrow-prev{ left:26px; } .hero-arrow-next{ right:26px; }
.hero:hover .hero-arrow{ opacity:1; }
.hero-arrow:hover{ background:rgba(201,168,106,.85); border-color:transparent; }
.hero-arrow:focus-visible{ opacity:1; outline:2px solid #fff; outline-offset:2px; }
@media (max-width:620px){
  .hero-arrow{ width:36px; height:36px; opacity:.75; }
  .hero-arrow-prev{ left:10px; } .hero-arrow-next{ right:10px; }
}

/* ---------- 分区/分类清单折叠 ---------- */
.ee-clk{ cursor:pointer; user-select:none; position:relative; }
.ee-clk:hover .t, .ee-clk:hover .cat-t, .ee-clk:hover > span:first-child{ color:var(--gold-deep, #B08D4F); }
.ee-clk:focus-visible{ outline:2px solid var(--gold, #C9A86A); outline-offset:3px; border-radius:8px; }
.ee-clk-arrow{ display:inline-flex; margin-left:8px; color:var(--gold-deep, #B08D4F); transition:transform .28s ease; vertical-align:middle; }
.ee-folded .ee-clk-arrow{ transform:rotate(-90deg); }
.ee-folded .zone-b, .ee-folded .cat-b{ display:none; }
@media (prefers-reduced-motion: reduce){ .ee-clk-arrow{ transition:none; } }