/* =========================================================
   浮动辅助栏 · 样式
   来源：网厅改造 / Sketch MeaXure
   嵌入网站时：引入本文件即可（演示页样式见文末 .demo-hint，可按需删除）
   ========================================================= */

/* ---------- 设计 Token ---------- */
:root {
  --fab-color-text: #1F2943;          /* 主文字 / 图标色 */
  --fab-color-shadow: rgba(42, 62, 109, 0.20); /* #2A3E6D 20% */
  --fab-color-border: #F4F7FF;        /* 外描边 */
  --fab-color-hover-bg: #EBF4FC;      /* 条目悬停高亮 */
  --fab-color-divider: rgba(0, 0, 0, 0.12);
  --fab-color-qr-placeholder: #FFFFFF;
  --fab-color-phone-card: #F3F3F3;
  --fab-color-wechat: #28C445;
  --fab-font: "PingFang SC", "PingFangSC-Regular", "Microsoft YaHei", sans-serif;
  --fab-shadow: 0 7px 14px 0 var(--fab-color-shadow);
  --fab-bar-width: 50px;
  --fab-bar-height: 268px;
  --fab-gap-to-panel: 10px;           /* 浮层与主栏间距（设计稿约 10px） */
}

/* =========================================================
   【标注 · 浮动辅助栏容器】
   固定于视口右侧；贴右时圆角为左上/左下 4px
   ========================================================= */
.szca-fab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  width: var(--fab-bar-width);
  font-family: var(--fab-font);
  -webkit-font-smoothing: antialiased;
}

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

/* 主栏：50×268，白底，#F4F7FF 外描边 2px，阴影 0 7px 14px
   内边距上下各 7px（MeaXure：条目区 y 相对栏体偏移 7）；左侧圆角 4px */
.szca-fab__bar {
  position: relative;
  width: var(--fab-bar-width);
  height: var(--fab-bar-height);
  background: #ffffff;
  border: 2px solid var(--fab-color-border);
  border-right: none;
  border-radius: 4px 0 0 4px;
  box-shadow: var(--fab-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 0;
  list-style: none;
  margin: 0;
}

/* 【标注 · 列表项】水平居中条目热区（36px 居中于 50px 栏宽） */
.szca-fab__bar > li {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  list-style: none;
}

/* =========================================================
   【标注 · 单个功能条目】
   热区尺寸：扫码 36×72 / 客服·电话 36×69
   内容：图标 24 + 间距 3 + 文案 32（两行），水平居中
   ========================================================= */
.szca-fab__item {
  position: relative;
  width: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* 图标与文案水平居中对齐 */
  justify-content: flex-start;
  padding: 5px 0 0;     /* 图标相对热区顶部偏移 5px（418-413） */
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  color: var(--fab-color-text);
  text-decoration: none;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
}

.szca-fab__item--qr { height: 72px; }
.szca-fab__item--service { height: 69px; }
.szca-fab__item--phone { height: 69px; }

.szca-fab__item:hover,
.szca-fab__item:focus-visible,
.szca-fab__item.is-open {
  background: var(--fab-color-hover-bg);
  outline: none;
}

/* 分隔线：24×2，上下各 10px → 条目间距合计 22px；在栏内水平居中 */
.szca-fab__bar > li.szca-fab__divider {
  width: 24px;
  height: 2px;
  margin: 10px 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: inset 0 -1px 0 0 var(--fab-color-divider);
  flex-shrink: 0;
  display: block;
  align-self: center;
}

/* 【标注 · 图标位】24×24，与文案同宽并水平居中 */
.szca-fab__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fab-color-text);
  margin: 0;
}

.szca-fab__icon svg,
.szca-fab__icon img {
  width: 24px;
  height: 24px;
  display: block;
}

/* 文案：两字一行、水平居中；12px / lh 16px / 宽 24 / 高 32
   设计稿三条文案均为竖排两行：「扫码/关注」「在线/客服」「咨询/电话」 */
.szca-fab__label {
  display: block;
  width: 24px;
  height: 32px;
  margin: 3px 0 0;      /* 图标与文案间距 3px（445-418-24） */
  padding: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--fab-color-text);
  text-align: center;    /* 两字相对 24px 栏宽居中 */
  letter-spacing: 0;
  word-break: break-all;
}

/* =========================================================
   【标注 · 浮层通用】左侧弹出，相对条目热区垂直居中
   浮层右缘距栏体左缘 10px；条目相对栏体内缩 7px → 距条目左边 17px
   ========================================================= */
.szca-fab__panel {
  position: absolute;
  right: calc(100% + 17px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #ffffff;
  border: 2px solid var(--fab-color-border);
  border-radius: 8px;
  box-shadow: var(--fab-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 2;
  text-align: left;      /* 浮层内文案默认左对齐 */
}

/* 【标注 · 悬停桥接】填补条目与浮层之间的 17px 空隙，
   鼠标从 Nav 移入浮层时经过空隙不会丢失 :hover */
.szca-fab__panel::before {
  content: "";
  position: absolute;
  left: 100%;
  top: -12px;
  bottom: -12px;
  width: 24px; /* ≥ 17px 间距，并留一点余量 */
}

.szca-fab__item:hover .szca-fab__panel,
.szca-fab__item:focus-within .szca-fab__panel,
.szca-fab__item.is-open .szca-fab__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* ---------- 扫码关注浮层：330×140，内边距 20，二维码与文案间距 10 ---------- */
.szca-fab__panel--qr {
  width: 330px;
  height: 140px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* 二维码顶与标题顶对齐 */
  justify-content: flex-start;
  gap: 10px;
  box-sizing: border-box;
}

/* 【标注 · 二维码图片位】100×100，#F0F0F0 占位 */
.szca-fab__qr-code {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  background: var(--fab-color-qr-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.szca-fab__qr-code img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右侧文案区：与二维码等高 100px，左对齐；微信行贴底 */
.szca-fab__qr-meta {
  flex: 1;
  min-width: 0;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左对齐 */
  text-align: left;
}

/* 标题：Semibold 14 / lh 22 / 单行预览 */
.szca-fab__qr-title {
  margin: 0;
  padding: 0;
  font-family: "PingFang SC", "PingFangSC-Semibold", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--fab-color-text);
  text-align: left;
  white-space: nowrap;
}

/* 描述：12 / lh 20 / opacity 0.45；距标题约 3px；设计稿单行不换行（宽 180） */
.szca-fab__qr-desc {
  margin: 3px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--fab-color-text);
  opacity: 0.45;
  text-align: left;
  white-space: nowrap;
}

/* 微信行：贴文案区底部，与二维码底对齐；图标与文字间距 3px */
.szca-fab__wechat {
  margin-top: auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  font-size: 12px;
  line-height: 20px;
  color: var(--fab-color-wechat);
  text-align: left;
}

/* 【标注 · 微信图标位】16×16 */
.szca-fab__wechat-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fab-color-wechat);
}

.szca-fab__wechat-icon svg,
.szca-fab__wechat-icon img {
  width: 16px;
  height: 16px;
  display: block;
}

/* ---------- 咨询电话浮层：174×158，内边距 10，卡片间距 10 ---------- */
.szca-fab__panel--phone {
  width: 174px;
  height: 158px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  box-sizing: border-box;
}

/* 号码卡片：154×64，内边距 10；号码与标签左对齐（非居中）
   MeaXure：文案 x 均相对卡片左缘 +10 */
.szca-fab__phone-card {
  width: 154px;
  height: 64px;
  padding: 10px;
  box-sizing: border-box;
  background: var(--fab-color-phone-card);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* 左对齐 */
  justify-content: flex-start;
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: background-color 0.15s ease;
}

.szca-fab__phone-card:hover {
  background: #eaeaea;
}

/* 号码：14 Semibold / lh 22 / 左对齐 */
.szca-fab__phone-num {
  display: block;
  margin: 0;
  padding: 0;
  font-family: "PingFang SC", "PingFangSC-Semibold", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #000000;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
}

/* 标签：12 / lh 20 / opacity 0.6；与号码左缘对齐 */
.szca-fab__phone-label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: #000000;
  opacity: 0.6;
  text-align: left;
}

/* 小屏：保证浮层不溢出视口左侧 */
@media (max-width: 480px) {
  .szca-fab__panel--qr {
    width: min(330px, calc(100vw - 70px));
    height: auto;
    min-height: 140px;
  }

  .szca-fab__panel--phone {
    width: min(174px, calc(100vw - 70px));
  }
}

/* =========================================================
   演示页样式（嵌入网站时可删除以下整段）
   ========================================================= */
/*
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
  font-family: var(--fab-font);
  color: var(--fab-color-text);
}
*/

.demo-hint {
  padding: 48px 40px;
  max-width: 640px;
  line-height: 1.7;
  color: #5a657a;
}

.demo-hint h1 {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--fab-color-text);
}

.demo-hint code {
  background: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}