/* Fab —— 浮层图标按钮（两种放置方式）。
   · booking：圆形「预约」，位于 TabBar 上方 48、右侧 16
   · notice ：通知铃铛 30×30，压在 Banner 上，距顶部 96、右侧 16

   为什么用绝对定位：它们是**浮层**，不属于页面内容流，不该参与
   banner/面板/TabBar 的纵向排布。这与「内容布局用自动布局」的规则不冲突 ——
   那条管的是有结构关系的兄弟元素。

   位置全部来自 token，改一个值就能挪位置。 */

.mzh-fab {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: var(--fab-z);
}

.mzh-fab__icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- placement=booking ---- */
.mzh-fab--booking {
  right: var(--fab-right);
  bottom: calc(var(--tab-bar-height) + var(--fab-gap));
  width: var(--fab-size);
  height: var(--fab-size);
}

/* ---- placement=notice ---- */
.mzh-fab--notice {
  right: var(--notice-right);
  top: var(--notice-top);
  width: var(--notice-size);
  height: var(--notice-size);
}