/* ============ 如是心 · 公共样式 ============ */
@import url('zcool-local.css');

/* 品牌字专用：几何粗黑（贴近官方标识字） */
.brandfont { font-family: 'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif; font-weight: 400; letter-spacing: .12em; }

html { scroll-behavior: smooth; }
/* 隐藏页面右侧滚动条（保留滚动能力，仅隐藏视觉条） */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { background: #F7F3EA; color: #1E3A2E; font-family: 'Noto Sans SC', sans-serif; overflow-x: hidden; }
::selection { background: #C9A45C; color: #fff; }

/* 宣纸纹理 */
.paper {
  background-color: #F7F3EA;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(201,164,92,.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(47,74,60,.05), transparent 40%),
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.darkpaper {
  background-color: #1E3A2E;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(201,164,92,.08), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,.25), transparent 50%);
}
.pagehero { position: relative; overflow: hidden; }

.vertical-text { writing-mode: vertical-rl; letter-spacing: .35em; }
.goldline { height: 1px; background: linear-gradient(90deg, transparent, #C9A45C 20%, #C9A45C 80%, transparent); }

/* 印章 */
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 8px;
  background: #A63D2F; color: #F7F3EA;
  font-family: 'Noto Serif SC', serif; font-weight: 900; font-size: 20px; line-height: 1.15;
  writing-mode: vertical-rl; letter-spacing: 2px;
  box-shadow: 0 4px 14px rgba(166,61,47,.35), inset 0 0 0 2px rgba(247,243,234,.35);
  transform: rotate(-4deg);
}

.lift { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.lift:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(30,58,46,.28); }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.on { opacity: 1; transform: none; }

@keyframes drift { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.mist { animation: drift 60s linear infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.floaty { animation: floaty 7s ease-in-out infinite; }

.ridge { position: absolute; bottom: 0; left: 0; width: 200%; }
.stat-num { font-variant-numeric: tabular-nums; }

input[type=range] { -webkit-appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(90deg,#C9A45C var(--p,30%), #d9d2bf var(--p,30%)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #A63D2F; border: 3px solid #F7F3EA; box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; }

/* 导航深浅两态 */
#nav { color: #E4C98A; }
#nav .navlink, #nav #menuBtn { color: rgba(247,243,234,.85); }
#nav.scrolled, #nav.solid { background: rgba(247,243,234,.92); backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(30,58,46,.12); color: #1E3A2E; }
#nav.scrolled .navlink, #nav.solid .navlink, #nav.scrolled #menuBtn, #nav.solid #menuBtn { color: #1E3A2E; }
#nav.scrolled #navTitle, #nav.solid #navTitle { color: #1E3A2E; }
#nav.scrolled #navSub, #nav.solid #navSub { color: #5C7A66; }

/* 导航项：hover 底部线条 + 当前栏目高亮 */
.navlink { position: relative; padding: .5rem 0; transition: color .28s; }
.navlink::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 2px; border-radius: 2px;
  background: #C9A45C;
  transform: translateX(-50%);
  transition: width .3s cubic-bezier(.4,0,.2,1);
}
.navlink:hover::after { width: 100%; }
.navlink.active::after { width: 100%; }
/* 透明导航（深色 hero 区域）：金色 */
#nav .navlink:hover, #nav .navlink.active { color: #E4C98A; }
#nav .navlink.active { font-weight: 700; }
/* 实底 / 滚动后（浅色背景）：朱砂红 + 金线 */
#nav.scrolled .navlink:hover, #nav.solid .navlink:hover { color: #A63D2F; }
#nav.scrolled .navlink.active, #nav.solid .navlink.active { color: #A63D2F; font-weight: 700; }
#nav.scrolled .navlink.active::after, #nav.solid .navlink.active::after { background: #A63D2F; }

/* 移动端菜单高亮 */
#mobileMenu a.active { color: #A63D2F; font-weight: 700; }

/* 面包屑 */
.crumbs { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:rgba(247,243,234,.55); flex-wrap:wrap; }
.crumbs a { color:rgba(247,243,234,.65); }
.crumbs a:hover { color:#E4C98A; }
.crumbs .sep { opacity:.4; }

/* 正文排版 */
.prose-zen { color:#2A3F33; line-height:2; }
.prose-zen h3 { font-family:'Noto Serif SC',serif; font-weight:700; font-size:1.35rem; color:#1E3A2E; margin:2.2em 0 .8em; }
.prose-zen p { margin-bottom:1.1em; }
.prose-zen blockquote { border-left:3px solid #C9A45C; background:rgba(201,164,92,.08); padding:1.2em 1.5em; border-radius:0 12px 12px 0; font-family:'Noto Serif SC',serif; color:#5C5133; margin:1.6em 0; }

/* 标签筛选 */
.ftab { transition: all .3s; }
.ftab.active { background:#1E3A2E; color:#E4C98A; border-color:#1E3A2E; }

/* FAQ 折叠 */
details.faq { border:1px solid rgba(30,58,46,.12); border-radius:16px; background:rgba(247,243,234,.7); padding:0; overflow:hidden; }
details.faq summary { cursor:pointer; list-style:none; padding:1.1rem 1.5rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::after { content:'+'; font-size:1.4rem; color:#C9A45C; transition:transform .3s; }
details.faq[open] summary::after { transform:rotate(45deg); }
details.faq .fa-body { padding:0 1.5rem 1.3rem; font-size:.9rem; color:rgba(30,58,46,.7); line-height:1.9; }

/* 列表卡片 */
.listcard { display:flex; gap:1.5rem; align-items:stretch; }
@media (max-width:640px){ .listcard{ flex-direction:column; } }

/* ============ 关于本站内容的声明（全站公共组件：标签主卡 / 页脚） ============ */
.stdecl { display: flex; align-items: flex-start; gap: .7rem; padding-top: .8rem; border-top: 1px dashed rgba(30,58,46,.1); }
.stdecl-ic { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#E4C98A,#C9A45C); color: #1E3A2E; box-shadow: 0 4px 12px -6px rgba(201,164,92,.9); }
.stdecl-ic svg { width: 1.05rem; height: 1.05rem; }
.stdecl-body { flex: 1 1 0; min-width: 0; }
.stdecl-title { font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: .86rem; color: #1E3A2E; margin-bottom: .3rem; }
.stdecl-text { font-size: .72rem; line-height: 1.85; color: rgba(30,58,46,.55); margin: .18rem 0 0; }

/* 深色底（页脚）适配 */
#footer .stdecl { border-top-color: rgba(247,243,234,.14); }
#footer .stdecl-title { color: #E4C98A; }
#footer .stdecl-text { color: rgba(247,243,234,.5); }
/* ===== 全站分页（tags 同款：符号 + 折叠页码） ===== */
#pager .tg-pgbtn { height: 2.1rem; display: inline-flex; align-items: center; padding: 0 .9rem; border-radius: .55rem; background: #fff; border: 1px solid rgba(30,58,46,.1); font-size: .82rem; color: #1E3A2E; text-decoration: none; transition: all .25s; }
#pager .tg-pgbtn:hover { border-color: rgba(166,61,47,.45); color: #A63D2F; }
#pager .tg-pgarr { padding: 0 .65rem; }
#pager .tg-pgnum { min-width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .5rem; border-radius: .55rem; background: #fff; border: 1px solid rgba(30,58,46,.1); font-size: .82rem; color: #1E3A2E; text-decoration: none; transition: all .25s; }
#pager .tg-pgnum:hover { border-color: rgba(166,61,47,.45); color: #A63D2F; }
#pager .tg-pgnum.curpage, #pager .tg-pgnum.on { background: #A63D2F; border-color: #A63D2F; color: #fff; font-weight: 700; }
#pager .tg-pgdots { min-width: 1.6rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; color: rgba(30,58,46,.4); user-select: none; }
#pager .tg-pgtotal { font-size: .78rem; color: rgba(30,58,46,.5); margin-right: .3rem; }
#pager .nopage { opacity: .45; cursor: default; }
@media (max-width: 767px) {
  #pager .tg-pgtotal { display: none; }
  #pager { gap: .3rem !important; }
  #pager .tg-pgbtn { padding: 0 .6rem; }
  #pager .tg-pgnum { min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; }
  #pager .tg-pgdots { min-width: 1.3rem; height: 1.9rem; }
}
/* 全站页脚强制显示（防止 UA/框架样式隐藏） */ footer { display: block !important; }
/* 非PC端(<1024px)隐藏大页脚，已有tabbar底部工具栏 */ @media (max-width: 1023px) { footer { display: none !important; } }
/* 酒店「更多城市」弹窗显隐（.off 隐藏；.on 时按基础样式显示） */
#cityModal.off { display: none; }
/* 酒店筛选-城市按钮：与「城市/全部/更多」同行；手机端只显示前 2 个城市，其余收进「更多城市」弹窗 */
#quickCities { flex: 1 1 0%; min-width: 0; }
@media (max-width: 1023px) {
  #quickCities .htab:nth-child(n+3) { display: none; }
  #hResult { display: none; }
  /* 手机端筛选按钮紧凑化：让「城市/全部/池州/舟山/更多」一行放下 */
  #hFilterBar .htab { padding: .28rem .72rem; font-size: .75rem; }
  #hFilterBar #quickMore { padding: .28rem .6rem; font-size: .75rem; }
  #hFilterBar .f-lab { letter-spacing: 0; margin-right: .35rem; }
}

/* ---- 酒店卡片缩略图轮播：360°旋转 + 淡化切换（与静态版一致） ---- */
.hgal { cursor: pointer; perspective: 1200px; }
.hgal .galimg { transition: opacity .5s ease, transform .7s ease; transform-style: preserve-3d; backface-visibility: hidden; }
.hgal:hover .galimg.gal-on { transform: scale(1.045); }
/* 切换特效：新图绕 Y 轴转满 360° 回正 + 一圈金环旋转掠过 */
@keyframes galSpin360 {
  0%   { transform: rotateY(0deg)   scale(.965); }
  50%  { transform: rotateY(180deg) scale(1.025); }
  100% { transform: rotateY(360deg) scale(1); }
}
@keyframes galRing {
  0%   { transform: rotate(0deg)    scale(.7);  opacity: 0; }
  25%  {                                        opacity: 1; }
  100% { transform: rotate(360deg)  scale(1.3); opacity: 0; }
}
.hgal.spin .galimg.gal-on { animation: galSpin360 1s cubic-bezier(.45,.05,.35,1); }
.hgal.spin::after {
  content:''; position:absolute; left:50%; top:50%; z-index:2; pointer-events:none;
  width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:9999px;
  border:2px solid rgba(201,164,92,.9); border-top-color:rgba(247,243,234,.95);
  animation: galRing 1s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hgal.spin .galimg.gal-on { animation: none; }
  .hgal.spin::after { animation: none; opacity: 0; }
}
.galdot { transition: all .3s; }
.galdot:hover { transform: scale(1.3); }
