/* 5-COMPONENTS */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--ease-base);
  min-height: 44px; /* 觸控友善 */
  white-space: nowrap; /* 按鈕文字一律不換行 */
}
.btn--primary { background: var(--color-brand); color: #fff; }
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--outline { border-color: var(--color-brand); color: var(--color-brand); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card__title { margin-bottom: var(--space-3); }

.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field__input, .field__textarea {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 44px;
}

/* ≤640：按鈕滿版 */
@media (max-width: 640px) {
  .btn { width: 100%; }
}

/* ── 右下角浮動按鈕(inc/floating-buttons.php)──
   由上而下:回到頂部 → 社群按鈕群 → 收合鈕。收合鈕只收合社群按鈕群。 */
.floatbar {
  --fb-size: 48px;          /* 按鈕直徑 */
  --fb-gap: 10px;
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  z-index: var(--z-fixed);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fb-gap);
}
.floatbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fb-size);
  height: var(--fb-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--ease-base), background var(--ease-base), opacity var(--ease-base);
}
.floatbar__btn:hover { transform: translateY(-2px); }
.floatbar__icon {
  width: 55%;
  height: 55%;
  object-fit: contain;
}

/* 回到頂部:整組最下方,品牌紅底白箭頭;捲動一段距離後從右側滑入。
   未出現時高度歸零並抵銷 gap,才不會在下緣留一塊空位。 */
.floatbar__btn--top {
  flex: 0 0 auto;
  background: var(--color-brand);
  overflow: hidden;
  height: 0;
  margin-top: calc(-1 * var(--fb-gap));
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(var(--fb-size) + var(--fb-gap)));
  pointer-events: none;
  transition:
    opacity var(--ease-base), visibility var(--ease-base), transform var(--ease-base),
    height var(--ease-base), margin-top var(--ease-base), background var(--ease-base);
}
.floatbar__btn--top.is-visible {
  height: var(--fb-size);
  margin-top: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.floatbar__btn--top:hover { background: var(--color-brand-hover); }
.floatbar__btn--top .floatbar__icon { width: 42%; }

/* 社群按鈕群 */
.floatbar__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fb-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  transition: opacity var(--ease-base), transform var(--ease-base), visibility var(--ease-base);
}
/* 收合 = 往下縮進收合鈕後方(展開時即由收合鈕往上長出來);
   transform-origin 設在底部中心,縮放時會朝收合鈕的位置收攏。 */
.floatbar__list {
  position: relative;
  z-index: 0;              /* 收合鈕蓋在上面,按鈕才是「縮到它後方」 */
  transform-origin: bottom center;
}
.floatbar__list.is-collapsed {
  opacity: 0;
  visibility: hidden;
  /* 下移「一顆按鈕 + 間距」= 整組底邊剛好落在收合鈕上,再朝底部縮小 */
  transform: translateY(calc(var(--fb-size) + var(--fb-gap))) scale(0.35);
  pointer-events: none;
}

/* 收合鈕:灰底白圖示,圖示常駐(可後台換自己的客服圖);收合狀態底色淡一階作為狀態提示 */
.floatbar__toggle {
  position: relative;
  z-index: 1;              /* 蓋住收合中的社群按鈕 */
  background: #8a8a8a;
}
.floatbar__toggle:hover { background: #6f6f6f; }
.floatbar__toggle[aria-expanded="false"] { background: #b3b3b3; }
.floatbar__toggle[aria-expanded="false"]:hover { background: #8a8a8a; }
.floatbar__icon--toggle { width: 62%; height: 62%; }

/* ≤640:縮小一階,避免擋住手機內容 */
@media (max-width: 640px) {
  .floatbar { --fb-size: 42px; --fb-gap: 8px; }
  .floatbar__btn:hover { transform: none; } /* 觸控裝置不做位移 */
}