/* 悬浮联系栏 —— 对应设计稿 ASTRA / Floating Contact 440:258
   默认态 433:2104 / WhatsApp 悬停 433:2102 / Phone 悬停 433:2103 / 返回顶部悬停 433:2100 */

.afc {
  --afc-accent: #ed0514;                       /* 激活底色 */
  --afc-idle-bg: rgba(227, 227, 227, 0.68);    /* 未激活底色 */
  --afc-icon: #404040;                         /* 未激活图标色 */
  --afc-surface: #ffffff;                      /* color/surface/default */
  --afc-border: #eaeced;                       /* color/border/subtle */
  --afc-text: #333333;                         /* color/text/primary */
  --afc-text-strong: #000000;                  /* color/text/strong */
  --afc-right: 32px;
  --afc-btn: 46px;
  --afc-gap: 12px;
  --afc-pop-gap: 22px;                         /* 弹层右缘到按钮的距离 */
  --afc-shadow-btn: 0 6px 14px rgba(0, 0, 0, 0.22);
  --afc-shadow-pop: 0 2px 8px rgba(0, 0, 0, 0.06);

  position: fixed;
  right: var(--afc-right);
  top: 50%;
  /* 必须低于导航：大导航面板和窄屏抽屉是 999、遮罩 998（见 mega-menu.css），
     悬浮栏原来是 9990，会压在展开的下拉菜单上面 */
  z-index: 990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--afc-gap);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 页顶时整栏收起，避免压住 banner；滚过 banner 后再滑入 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(24px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.afc.is-scrolled {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.afc *,
.afc *::before,
.afc *::after {
  box-sizing: border-box;
}

/* ---------------- 单个按钮 */

.afc__item {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.afc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--afc-btn);
  height: var(--afc-btn);
  padding: 0;
  border: 0;
  border-radius: calc(var(--afc-btn) / 2);
  background: var(--afc-idle-bg);
  color: var(--afc-icon);
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

/* 设计稿里 WhatsApp 未激活态是一道很浅的横向渐变，其余三个是纯色 */
.afc__item--whatsapp .afc__btn {
  background-image: linear-gradient(-90deg, #ececec 0%, #e9e9e9 100%);
}

.afc__btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

.afc__item:hover .afc__btn,
.afc__btn:focus-visible {
  background: var(--afc-accent);
  background-image: none;
  color: #fff;
  box-shadow: var(--afc-shadow-btn);
}

.afc__btn:focus-visible {
  outline: 2px solid var(--afc-accent);
  outline-offset: 3px;
}

/* ---------------- 弹层：通用外壳 */

.afc__pop {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--afc-pop-gap));
  /* 绝对定位元素的可用宽度 = 包含块(46px 的按钮) − right 偏移(69px)，算出来是负数，
     浏览器就退回 min-content：二维码卡被压成标签文字那么窄，再被主题的
     img{max-width:100%} 拉变形。按内容撑开，宽度正好是设计稿的 228px。 */
  width: max-content;
  transform: translateY(-50%) translateX(8px);
  background: var(--afc-surface);
  border: 1px solid var(--afc-border);
  box-shadow: var(--afc-shadow-pop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.afc__item:hover .afc__pop,
.afc__btn:focus-visible ~ .afc__pop,
.afc__msg:focus-visible ~ .afc__pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* 消息标签：设计稿 433:1862（Message Hover 态）
   跟 Phone/Email 那两个胶囊不同——它是红底白字的方角条，没描边没投影 */
.afc__pop--label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--afc-label-width, 150px);
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: var(--afc-label-bg, #e60012);
  box-shadow: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* 文字胶囊：Phone / Email */
.afc__pop--pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--afc-text);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* 二维码卡：WhatsApp
   设计稿 433:1772 —— 卡片 228×140，内边距 12，两张 96×96 中间隔 12。
   卡片不是跟按钮居中对齐的：卡顶 y=53、按钮顶 y=50，往下差 3px；
   右缘到按钮左缘 23px（文字胶囊是 22px，两者不同）。 */
.afc__pop--cards {
  top: 3px;
  right: calc(100% + 23px);
  transform: translateX(8px);
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
}

.afc__item:hover .afc__pop--cards,
.afc__btn:focus-visible ~ .afc__pop--cards {
  transform: translateX(0);
}

.afc__card {
  display: flex;
  flex: none; /* 不许被压缩，二维码压窄了就扫不出来 */
  flex-direction: column;
  align-items: center;
}

.afc__card img {
  display: block;
  width: 96px;
  height: 96px;
  max-width: none; /* 盖掉主题全局的 img{max-width:100%} */
  object-fit: cover;
}

.afc__card span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--afc-text-strong);
  text-align: center;
  white-space: nowrap;
}

/* ---------------- 消息按钮：60×60 + 三层扩散环 */

.afc__item--message {
  margin-top: 19px; /* 设计稿最后一个小钮到消息钮之间共 31px，减去 flex 的 12px */
}

.afc__msg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: var(--afc-accent);
  color: #fff;
  box-shadow: var(--afc-shadow-btn);
  cursor: pointer;
}

.afc__msg svg {
  display: block;
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
}

/* 三层环取自设计稿的 86 / 70 / 58 与 .16 / .24 / .42 透明度，
   做成由按钮向外扩散的循环动画 */
.afc__msg::before,
.afc__msg::after,
.afc__ring {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--afc-accent);
  animation: afc-pulse 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  pointer-events: none;
}

.afc__msg::before { animation-delay: 0s; }
.afc__ring        { animation-delay: 0.8s; }
.afc__msg::after  { animation-delay: 1.6s; }

@keyframes afc-pulse {
  0%   { transform: scale(1);    opacity: 0.42; }
  70%  { opacity: 0.16; }
  100% { transform: scale(1.44); opacity: 0; }  /* 60 → 86.4，对应设计稿最外环 86 */
}

/* ---------------- 窄屏 */

/* ---------------- 窄屏：改成贴底的横条
   竖排轨道在手机上会压住正文，弹层又只能往左开、根本没地方。
   贴底横条是移动端联系入口的通行做法：等宽分格、一格一个动作。 */

@media (max-width: 768px) {
  .afc {
    --afc-bar: 56px;

    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    height: var(--afc-bar);
    background: var(--afc-accent);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
    /* 收起时从下方滑出去，不再是从右边 */
    transform: translateY(100%);
  }

  .afc.is-scrolled {
    transform: translateY(0);
  }

  .afc__item {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  /* 横条上每格就是一个白色图标，各自的灰色圆底和投影都去掉 */
  .afc__btn,
  .afc__msg {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: none;
    background-image: none;
    color: #fff;
    box-shadow: none;
  }

  .afc__item:hover .afc__btn,
  .afc__btn:focus-visible,
  .afc__msg:focus-visible {
    background: rgba(0, 0, 0, 0.14);
    background-image: none;
    box-shadow: none;
  }

  .afc__btn:focus-visible,
  .afc__msg:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  .afc__btn svg,
  .afc__msg svg {
    width: 22px;
    height: 22px;
  }

  /* 消息钮在横条里就是普通一格，不再是外挂的大圆＋扩散环 */
  .afc__item--message {
    margin-top: 0;
  }

  .afc__msg::before,
  .afc__msg::after,
  .afc__ring {
    display: none;
  }

  /* 返回顶部排到最右，和常见的底部条一致 */
  .afc__item--top {
    order: 1;
  }

  /* 横条上不弹二维码卡和文字胶囊：
     手机上点电话就是拨号、点邮箱就是写信、点 WhatsApp 直接开 App，
     弹层既无用又会顶出屏幕。二维码扫自己这台手机也没有意义。 */
  .afc__pop {
    display: none;
  }

  /* 横条压在页面最底部，给正文让出等高的空间，别挡住页脚。
     写 html body 是为了压过 Elementor Kit 里那条全局 reset
     （post-7.css 的 `body, div, dl, ... { padding: 0 }`，同权重但加载在后）。
     56 写死：--afc-bar 定义在 .afc 上，body 继承不到 */
  html body {
    padding-bottom: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .afc *,
  .afc *::before,
  .afc *::after {
    transition: none !important;
    animation: none !important;
  }

  .afc__msg::before,
  .afc__msg::after,
  .afc__ring {
    display: none;
  }
}