/* ============================================================
   Apple Style 页脚组件 V2 (footer-apple-v2.css)
   ----------------------------------------------------------
   设计哲学：Apple 官网极简高级感
   - 纯黑深邃暗黑模式 (#161617)
   - 丝滑白亮色模式 (#FFFFFF / #F5F5F7)
   - 珊瑚色品牌点缀（通过 --husir-coral-* 公共模块统一调用）
   - CSS 变量驱动，响应式布局
   - EyouCMS 原生标签 100% 保留

   本文件通过 .custom-override 命名空间隔离，
   不修改原文件，确保未来系统升级无缝兼容。
   ============================================================ */

/* ----- 一、Apple 页脚 CSS 变量系统 ----- */
.custom-override .apple-footer {
  /* 排版 */
  --af-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",
    Roboto, Arial, sans-serif;
  --af-font-feature: "kern" 1, "liga" 1;

  /* 色彩 — 引用 dark-mode-core.css 的 --dm-footer-* 变量 */
  --af-bg-primary: var(--dm-footer-bg);
  --af-bg-secondary: var(--dm-footer-bg-secondary);
  --af-text-main: var(--dm-footer-text);
  --af-text-secondary: var(--dm-footer-text-secondary);
  --af-border: var(--dm-footer-border);
  --af-icon-label-bg: var(--dm-footer-icon-label-bg);
  --af-qr-bg: var(--dm-footer-qr-bg);
  --af-qr-hover-bg: var(--dm-footer-qr-hover-bg);
  --af-qr-hover-border: var(--dm-footer-qr-hover-border);
  --af-qr-hover-shadow: var(--dm-footer-qr-hover-shadow);

  /* 珊瑚色品牌点缀 */
  --af-accent: var(--husir-coral, var(--dm-accent, #ff6b6b));
  --af-accent-hover: var(--husir-coral-hover, var(--dm-accent-hover, #ff5252));
  --af-accent-glow: var(--husir-coral-glow, var(--dm-accent-glow, rgba(255, 107, 107, 0.15)));

  /* 圆角 */
  --af-radius-sm: 6px;
  --af-radius-md: 12px;
  --af-radius-lg: 18px;

  /* 间距 */
  --af-space-xs: 4px;
  --af-space-sm: 8px;
  --af-space-md: 16px;
  --af-space-lg: 22px;
  --af-space-xl: 40px;
  --af-space-2xl: 50px;
  --af-space-3xl: 80px;

  /* 容器 */
  --af-container: 1120px;

  /* 动效 */
  --af-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --af-duration-fast: 0.2s;
  --af-duration-normal: 0.3s;
  --af-duration-slow: 0.5s;

  /* 基础样式 */
  font-family: var(--af-font);
  font-feature-settings: var(--af-font-feature);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--af-bg-primary);
  color: var(--af-text-secondary);
  font-size: 16px;
  line-height: 1.6;
  padding: 30px 0 20px 0;
  border-top: 1px solid var(--af-border);
  transition: background-color var(--af-duration-slow) ease,
    color var(--af-duration-slow) ease;
}

/* 品牌展示页的一级区块统一使用主画布，footer 同层收口；变量会随两套主题分支自动翻转。 */
.custom-override .md-about-showcase + .apple-footer {
  --af-bg-primary: var(--dm-bg, var(--dm-footer-bg));
  background-color: var(--af-bg-primary);
}

/* guide 等 md-about_us 页面仍沿用次级页脚策略。 */
.custom-override .md-about_us + .apple-footer {
  --af-bg-primary: var(--dm-bg-secondary, var(--dm-footer-bg));
  background-color: var(--af-bg-primary);
}

/* 新客引导页主画布使用 --dm-bg；footer 与页面同层，避免内容结束处出现
   --dm-bg-secondary 的横向色差。二维码、按钮等内部表面仍消费各自的 --af-* 层级变量。 */
body.custom-override > main.md-faq-ipb ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg, #ffffff);
  background-color: var(--af-bg-primary);
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) body.custom-override > main.md-faq-ipb ~ footer.apple-footer {
    --af-bg-primary: var(--dm-bg);
  }
}

html.husir-dark body.custom-override > main.md-faq-ipb ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg);
}

/* 新闻详情页主画布使用 .hs-main；footer 与文章页同层，避免文章结束处沿用
   --dm-footer-bg 产生一条抬亮色带。 */
body.custom-override > main.hs-main ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg, #ffffff);
  background-color: var(--af-bg-primary);
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) body.custom-override > main.hs-main ~ footer.apple-footer {
    --af-bg-primary: var(--dm-bg);
  }
}

html.husir-dark body.custom-override > main.hs-main ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg);
}

/* 首页根画布日间为纯白；保留直系结构约束，同时容忍中间插入脚本节点。 */
body.custom-override > main.md-home ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg, #ffffff);
  background-color: var(--af-bg-primary);
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) body.custom-override > main.md-home ~ footer.apple-footer {
    /* 首页 footer 与主画布同层，避免官方小程序二维码区域出现一条抬亮色带。 */
    --af-bg-primary: var(--dm-bg);
  }
}

html.husir-dark body.custom-override > main.md-home ~ footer.apple-footer {
  /* 手动暗黑与系统暗黑保持同一首页主画布底色。 */
  --af-bg-primary: var(--dm-bg);
}

/* 视频列表页内容区统一使用主画布色；footer 同层收口，避免品牌承诺后出现次级色横带。 */
body.custom-override > main.md-media_list ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg, #ffffff);
  background-color: var(--af-bg-primary);
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) body.custom-override > main.md-media_list ~ footer.apple-footer {
    --af-bg-primary: var(--dm-bg);
  }
}

html.husir-dark body.custom-override > main.md-media_list ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg);
}

/* 新闻列表页主体使用 --dm-bg；footer 也跟随同一主画布，避免页面底部出现
   --dm-bg-secondary 的横向色差。 */
body.custom-override > main.md-news_list ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg, #ffffff);
  background-color: var(--af-bg-primary);
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) body.custom-override > main.md-news_list ~ footer.apple-footer {
    --af-bg-primary: var(--dm-bg);
  }
}

html.husir-dark body.custom-override > main.md-news_list ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg);
}

/* 联系页主画布使用 --dm-bg；footer 同层收口，避免表单区结束后出现次级色横带。 */
body.custom-override > main.md-contact-v3 ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg, #ffffff);
  background-color: var(--af-bg-primary);
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) body.custom-override > main.md-contact-v3 ~ footer.apple-footer {
    --af-bg-primary: var(--dm-bg);
  }
}

html.husir-dark body.custom-override > main.md-contact-v3 ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg);
}

/* 商品页日间与主体画布同为纯白；暗黑时与视频专栏等页面主画布 --dm-bg 同层，
   避免 footer 落到次级表面后出现跨页面异色横带。 */
.custom-override .md-product-list ~ .apple-footer {
  --af-bg-primary: var(--dm-bg, #ffffff);
  background-color: var(--af-bg-primary);
}

/* 这些页面均以 --dm-bg 作为根画布；动态 token 同时覆盖亮色、系统暗黑和手动暗黑。 */
body.custom-override > main.md-product_detail ~ footer.apple-footer,
body.custom-override > main.vm-page ~ footer.apple-footer,
body.custom-override > main.itcc-main ~ footer.apple-footer,
body.custom-override > main.md-guestbook ~ footer.apple-footer {
  --af-bg-primary: var(--dm-bg, #ffffff);
  background-color: var(--af-bg-primary);
}

/* ----- 二、容器与全局布局 ----- */
.custom-override .footer-container {
  width: 100%;
  max-width: var(--af-container);
  margin: 0 auto;
  padding: 0 var(--af-space-lg);
  font-size: 20px;
}

.custom-override .footer-main {
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--af-border);
  padding-bottom: 0px;
}

.custom-override .footer-main::after {
  content: "";
  display: table;
  clear: both;
}

/* ----- 三、品牌区 ----- */
/* 导航区已删除，两栏布局：品牌区左 + 二维码区右（各 50%） */
.custom-override .footer-brand-section {
  float: left;
  width: 50%;
}

.custom-override .footer-logo img {
  height: 24px;
  width: auto;
  filter: brightness(0);
  transition: opacity var(--af-duration-normal) var(--af-ease);
}

.custom-override .footer-logo a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  padding-block: 10px;
}

.custom-override .footer-logo img:hover {
  opacity: 0.8;
}

.custom-override .footer-desc {
  margin: 8px 0 14px 0;
  padding-right: 40px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--af-text-secondary);
}

/* 联系方式列表 */
.custom-override .footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-override .footer-contact-list li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.4;
}

.custom-override .footer-contact-list .icon-label {
  display: inline-block;
  width: 45px;
  font-size: 10px;
  font-weight: 600;
  color: var(--af-text-main);
  background: var(--af-icon-label-bg);
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  margin-right: 10px;
}

.custom-override .footer-contact-list .contact-value {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  color: var(--af-text-secondary);
  text-decoration: none;
  transition: color var(--af-duration-fast) ease;
}

.custom-override .footer-contact-list a.contact-value:hover {
  color: var(--af-text-main);
}

.custom-override .footer-contact-list .highlight {
  color: var(--af-text-main);
  font-weight: 500;
}

/* ----- 四、栏目标题（二维码区「保持联系」复用，导航区已删除） ----- */
.custom-override .footer-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--af-text-main);
  margin: 0 0 18px 0;
  letter-spacing: 0.05em;
}

/* ----- 五、二维码区 ----- */
.custom-override .footer-qr-section {
  float: right;
  width: 50%;
}

.custom-override .qr-grid::after {
  content: "";
  display: table;
  clear: both;
}

.custom-override .qr-item {
  float: left;
  width: 31%;
  margin-right: 3%;
  text-align: center;
}

.custom-override .qr-item:last-child {
  margin-right: 0;
}

.custom-override .qr-wrapper {
  background: var(--af-qr-bg);
  border: 1px solid var(--af-border);
  padding: 8px;
  border-radius: var(--af-radius-md);
  transition:
    border-color var(--af-duration-normal) var(--af-ease),
    background-color var(--af-duration-normal) var(--af-ease),
    box-shadow var(--af-duration-normal) var(--af-ease),
    transform var(--af-duration-normal) var(--af-ease);
}

.custom-override .qr-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--af-radius-sm);
  filter: opacity(0.9);
  transition: filter var(--af-duration-normal) ease;
}

.custom-override .qr-item span {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  color: var(--af-text-secondary);
}

.custom-override .qr-item:hover .qr-wrapper {
  transform: translateY(-5px);
  background: var(--af-qr-hover-bg);
  border-color: var(--af-qr-hover-border);
  box-shadow: var(--af-qr-hover-shadow);
}

/* ----- 六、底部版权与备案区 ----- */
.custom-override .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
  padding-top: 20px;
  font-size: 12px;
  text-align: center;
}

.custom-override .copyright-text {
  color: var(--af-text-secondary);
  font-size: 16px;
  line-height: 22px;
}

.custom-override .copyright-text a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

/* ----- 七、文字选中态：珊瑚色点缀 ----- */
.custom-override .apple-footer ::selection {
  background: var(--husir-coral-strong, rgba(255, 107, 107, 0.2));
  color: var(--af-accent);
}

.custom-override .apple-footer ::-moz-selection {
  background: var(--husir-coral-strong, rgba(255, 107, 107, 0.2));
  color: var(--af-accent);
}

/* ----- 八、响应式布局（平板 <= 920px）-----
   导航区已删除，两栏自适应：品牌区 + 二维码区保持并排 */
@media (max-width: 920px) {
  .custom-override .footer-brand-section {
    width: 100%;
    float: none;
    margin-bottom: var(--af-space-xl);
  }

  .custom-override .footer-qr-section {
    width: 100%;
    float: none;
    margin-bottom: var(--af-space-xl);
  }
}

/* ----- 九、响应式布局（手机 <= 768px）----- */
@media (max-width: 768px) {
  .custom-override .footer-contact-list {
    display: none;
  }

  .custom-override .copyright-text {
    text-align: center;
    margin-bottom: 0;
  }
}

/* ----- 十、响应式布局（小屏手机 <= 576px）----- */
@media (max-width: 576px) {
  .custom-override .apple-footer {
    padding: 20px 0 16px 0;
  }

  .custom-override .footer-brand-section {
    margin-bottom: 24px;
  }

  .custom-override .footer-qr-section {
    width: 100%;
    float: none;
    margin-bottom: 24px;
  }

  .custom-override .footer-qr-section .qr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 390px;
    margin: 0 auto;
  }

  .custom-override .qr-item {
    float: none;
    width: auto;
    margin-right: 0;
  }

  .custom-override .footer-desc {
    padding-right: 0;
  }

  .custom-override .footer-bottom {
    display: block;
    padding-top: 5px;
    padding-bottom: 0;
    text-align: center;
  }

  .custom-override .copyright-text {
    display: inline;
  }

  .custom-override .footer-consent-manage {
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
  }
}

/* 手机端由高频底部导航承接入口，全站隐藏低频页脚。 */
@media (max-width: 833px) {
  body.custom-override .apple-footer {
    display: none;
    padding: 24px 0 32px;
  }

  body.custom-override .apple-footer .footer-container {
    padding-inline: 16px;
    font-size: var(--hs-fs-body, 16px);
  }

  body.custom-override .apple-footer .footer-main {
    padding-bottom: 16px;
  }

  body.custom-override .apple-footer .footer-brand-section {
    margin-bottom: 0;
  }

  body.custom-override .apple-footer .footer-desc {
    margin-bottom: 16px;
    padding-right: 0;
    font-size: var(--hs-fs-body-s, 14px);
  }

  body.custom-override .apple-footer .footer-contact-list {
    display: grid;
    gap: 8px;
  }

  body.custom-override .apple-footer .footer-contact-list li {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    font-size: var(--hs-fs-body-s, 14px);
  }

  body.custom-override .apple-footer .footer-contact-list .contact-value {
    min-width: 0;
    min-height: 32px;
    overflow-wrap: anywhere;
  }

  body.custom-override .apple-footer .footer-qr-section {
    display: none;
  }

  body.custom-override .apple-footer .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
  }

  body.custom-override .apple-footer .copyright-text {
    font-size: var(--hs-fs-meta, 13px);
    line-height: 1.5;
  }

  body.custom-override .apple-footer .footer-consent-manage {
    min-height: 44px;
    margin-left: 0;
  }
}

/* ----- 十一、减弱动画偏好 ----- */
@media (prefers-reduced-motion: reduce) {
  .custom-override .apple-footer,
  .custom-override .apple-footer *,
  .custom-override .apple-footer *::before,
  .custom-override .apple-footer *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----- 十二、焦点可见性（键盘导航）----- */
.custom-override .apple-footer a:focus-visible,
.custom-override .apple-footer button:focus-visible,
.custom-override .apple-footer input:focus-visible {
  outline: 2px solid var(--af-accent);
  outline-offset: 2px;
  border-radius: var(--af-radius-sm);
}

/* Cookie 偏好按钮 — Apple 中性灰磨砂药丸（低强调度三级控件）
   参照 Apple HIG 与 apple.com 页脚法律/隐私入口：
   · 无强描边，磨砂中性灰底，融入页脚不抢视觉焦点
   · 填充色由 --af-text-main 派生，明暗主题自动适配（亮/暗模式皆可用）
   · 44px 最小触控区（HIG），按下 0.97 缩放拟物回弹
   · 悬浮仅提亮文字与底色，克制不喧宾夺主 */
.custom-override .footer-consent-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 14px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--af-text-main) 6%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--af-text-main) 10%, transparent);
  color: var(--af-text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--af-duration-fast) var(--af-ease),
    box-shadow var(--af-duration-fast) var(--af-ease),
    color var(--af-duration-fast) var(--af-ease),
    transform var(--af-duration-fast) var(--af-ease);
}

.custom-override .footer-consent-manage:hover {
  background: color-mix(in srgb, var(--af-text-main) 12%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--af-text-main) 16%, transparent);
  color: var(--af-text-main);
}

/* 按下拟物反馈：苹果式回弹缩放 */
.custom-override .footer-consent-manage:active {
  transform: scale(0.97);
  background: color-mix(in srgb, var(--af-text-main) 15%, transparent);
}

/* 焦点描边贴合药丸外形（覆盖通用直角焦点规则，环距收窄避免破形）*/
.custom-override .footer-consent-manage:focus-visible {
  outline-offset: 1px;
  border-radius: 999px;
}

/* ----- 十三、暗黑模式（Dark Mode）----- */
/* 暗黑模式已迁移至 dark-mode-core.css 统一控制，--af-* 变量通过 --dm-footer-* 继承 */

/* ----- 十四、打印样式 ----- */
@media print {
  .custom-override .apple-footer {
    background: #fff !important;
    color: #000 !important;
  }

  .custom-override .footer-qr-section {
    display: none !important;
  }

  .custom-override .copyright-text {
    color: #000 !important;
  }
}