/**
 * 社群顯示：選單下方橫列（.cms-social-bar）＋右下角可拖曳懸浮球（.cms-social-float）。
 * 三個位置（選單下方／頁尾／懸浮球）共用同一份「網站設定 → 社群連結」；本檔全主題共用。
 * 圓底徽章沿用頁尾社群徽章的視覺（見各主題 legacy-fix.css 的 .cms-footer-social-badge）。
 */

/* 共用圓底徽章 */
.cms-social-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: #0cacae; color: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* ── 選單下方橫列 ───────────────────────────── */
.cms-social-bar {
    display: flex; justify-content: center; align-items: center; gap: 12px;
    padding: 10px 16px;
}
.cms-social-bar a { display: inline-flex; text-decoration: none; }
.cms-social-bar a:hover .cms-social-badge {
    transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

/* ── 右下角懸浮球 ───────────────────────────── */
/* 容器只佔主按鈕大小（清單改用絕對定位浮出），這樣落點/邊界計算才準、也不會有隱形死區。 */
.cms-social-float {
    position: fixed; z-index: 9998;
    width: 54px; height: 54px;
    touch-action: none; -webkit-user-select: none; user-select: none;
}
.cms-social-float--right-bottom { right: 18px; bottom: 18px; }
.cms-social-float--left-bottom  { left: 18px;  bottom: 18px; }
.cms-social-float--right-top    { right: 18px; top: 18px; }
/* 置底列讓位（見 cms-widgets.css 說明）：只推下方兩個角落；拖到自由位置（有 inline left）的不動 */
.has-bottom-bar .cms-social-float--right-bottom:not([style*="left"]),
.has-bottom-bar .cms-social-float--left-bottom:not([style*="left"]) { translate: 0 calc(-1 * var(--cms-bottom-bar, 0px)); }
.cms-social-float--left-top     { left: 18px;  top: 18px; }

/* 展開清單：絕對定位浮在主按鈕外側，收起時 visibility:hidden（不佔位、不可點） */
.cms-social-float__list {
    position: absolute; left: 50%;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-50%) scale(.85);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* 下半部（球在下方）→ 清單往上浮；上半部 → 清單往下浮 */
.cms-social-float--right-bottom .cms-social-float__list,
.cms-social-float--left-bottom  .cms-social-float__list { bottom: calc(100% + 10px); transform-origin: bottom center; }
.cms-social-float--right-top .cms-social-float__list,
.cms-social-float--left-top  .cms-social-float__list { top: calc(100% + 10px); transform-origin: top center; }
/* 拖曳後由 JS 依球在畫面上/下半部覆寫展開方向，避免清單超出可視範圍 */
.cms-social-float.flip-up .cms-social-float__list { bottom: calc(100% + 10px); top: auto; transform-origin: bottom center; }
.cms-social-float.flip-down .cms-social-float__list { top: calc(100% + 10px); bottom: auto; transform-origin: top center; }
.cms-social-float.is-open .cms-social-float__list {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) scale(1);
}
.cms-social-float__item { display: inline-flex; text-decoration: none; }
.cms-social-float__item .cms-social-badge {
    width: 44px; height: 44px; box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}
.cms-social-float__item:hover .cms-social-badge { transform: scale(1.08); }

/* 主按鈕（FAB） */
.cms-social-float__toggle {
    -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
    width: 54px; height: 54px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #0cacae; color: #fff; padding: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.cms-social-float__toggle:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .34); }
.cms-social-float.is-dragging { cursor: grabbing; }
.cms-social-float.is-dragging .cms-social-float__toggle { transform: scale(1.05); }

/* open/close 圖示切換 */
.cms-social-float__icon-close { display: none; }
.cms-social-float.is-open .cms-social-float__icon-open { display: none; }
.cms-social-float.is-open .cms-social-float__icon-close { display: inline-flex; }

@media (max-width: 640px) {
    .cms-social-float--right-bottom, .cms-social-float--left-bottom { bottom: 14px; }
    .cms-social-float--right-bottom, .cms-social-float--right-top { right: 14px; }
    .cms-social-float--left-bottom, .cms-social-float--left-top { left: 14px; }
}

/* ── 側邊直排（.cms-social-stack，2026-09-21） ─────────────────────────
   老大：側邊浮動不該只有 LINE／Messenger 兩顆——所有社群一顆一顆直排在畫面側邊。
   兩種模式（後台選）：--open 常駐展開；--hover 平常只露一顆主鈕，滑過整排滑出（手機點一下）。
   外觀（老大 2026-09-21 定案）：不用面板、不用毛玻璃；每顆 44px 圓形、淺灰底黑圖示、顆與顆 6px，
   滑過轉該平台品牌色白圖示（--si-brand 由 SocialIcons::badge 帶進來）。 */
.cms-social-stack {
    /* 垂直位置由後台設定（畫面高度的 %，桌機／手機分開；預設 50＝正中） */
    position: fixed; top: var(--cms-stack-top, 50%); z-index: 9990;
    display: flex; align-items: center;
    transform: translateY(-50%);
    -webkit-user-select: none; user-select: none;
}
/* 跟返回置頂鈕（.cms-backtop：右 22px、46px）對齊同一條垂直線、同一個尺寸（老大 2026-09-21） */
.cms-social-stack--right { right: 22px; flex-direction: row; }
.cms-social-stack--left  { left: 22px;  flex-direction: row-reverse; }
.cms-social-stack__list { display: flex; flex-direction: column; gap: 6px; }
.cms-social-stack__item { display: inline-flex; text-decoration: none; border-radius: 50%; }
/* 圓形：預設圓底徽章與 SocialIcons 的 .cms-si 都收成同一種長相 */
.cms-social-stack__item .cms-social-badge,
.cms-social-stack__item .cms-si {
    width: 46px !important; height: 46px !important; border-radius: 50% !important;
    background: var(--cms-stack-bg, #ECECEE) !important; color: var(--cms-stack-ink, #111) !important;
    box-shadow: 0 0 0 1px rgba(127, 127, 127, .22) !important;   /* 1px 實線描邊，不用模糊投影（老大 2026-10-19：白底上灰圓加陰影看起來糊糊的） */
    transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cms-social-stack__item .cms-si svg, .cms-social-stack__item .cms-social-badge svg { width: 20px !important; height: 20px !important; fill: currentColor; }
.cms-social-stack__item:hover .cms-social-badge, .cms-social-stack__item:hover .cms-si,
.cms-social-stack__item:focus-visible .cms-social-badge, .cms-social-stack__item:focus-visible .cms-si {
    background: var(--si-brand, var(--cms-stack-hover, #E50813)) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(127, 127, 127, .22) !important; }
.cms-social-stack__item:focus-visible { outline: 3px solid rgba(0, 0, 0, .25); outline-offset: 2px; }
/* 主鈕（把手）：跟圓形同一種長相；常駐展開模式在桌機不出現 */
.cms-social-stack__toggle {
    -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; padding: 0;
    width: 46px; height: 46px; border-radius: 50%; display: none; align-items: center; justify-content: center;
    background: var(--cms-stack-bg, #ECECEE); color: var(--cms-stack-ink, #111);
    box-shadow: 0 0 0 1px rgba(127, 127, 127, .22);
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.cms-social-stack__toggle:hover, .cms-social-stack__toggle:focus-visible { background: var(--cms-stack-hover, #E50813); color: #fff; box-shadow: 0 0 0 1px rgba(127, 127, 127, .22); }
.cms-social-stack__toggle:focus-visible { outline: 3px solid rgba(0, 0, 0, .25); outline-offset: 2px; }
/* 滑過展開：清單先收在側邊外面，滑過（或鍵盤 focus 進來）整排滑出；主鈕常駐 */
.cms-social-stack--hover .cms-social-stack__toggle { display: inline-flex; }
.cms-social-stack--hover .cms-social-stack__list {
    position: absolute; top: 50%; transform: translateY(-50%) translateX(12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .22s ease, visibility .22s;
}
.cms-social-stack--hover.cms-social-stack--right .cms-social-stack__list { right: 100%; padding-right: 8px; }
.cms-social-stack--hover.cms-social-stack--left  .cms-social-stack__list { left: 100%; padding-left: 8px; transform: translateY(-50%) translateX(-12px); }
.cms-social-stack--hover:hover .cms-social-stack__list,
.cms-social-stack--hover:focus-within .cms-social-stack__list,
.cms-social-stack--hover.is-open .cms-social-stack__list { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); }
/* 手機：常駐展開模式照樣整排常駐（老大 2026-09-21：不要收合），只把圓縮到 40px、貼近底部避開拇指區；
   滑過展開模式在手機沒有 hover，改成點主鈕展開（JS 加 is-open） */
@media (max-width: 600px) {
    .cms-social-stack { top: var(--cms-stack-top-m, 50%); }
    /* 手機的置頂鈕是右 16px、44px，一樣對齊 */
    .cms-social-stack--right { right: 16px; }
    .cms-social-stack--left  { left: 16px; }
    .cms-social-stack__item .cms-social-badge, .cms-social-stack__item .cms-si { width: 44px !important; height: 44px !important; }
    .cms-social-stack__toggle { width: 44px; height: 44px; }
    .cms-social-stack__item .cms-si svg, .cms-social-stack__item .cms-social-badge svg { width: 18px !important; height: 18px !important; }
    .cms-social-stack--hover .cms-social-stack__toggle { display: inline-flex; }
    .cms-social-stack--hover .cms-social-stack__list { top: auto; bottom: 0; transform: translateX(12px); }
    .cms-social-stack--hover.is-open .cms-social-stack__list { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
    .cms-social-stack--hover:hover:not(.is-open) .cms-social-stack__list { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* 手機可收合（老大 2026-09-22，後台「手機呈現＝可收合」）：整排下面一顆箭頭鈕；.is-folded 時清單收起、箭頭轉向。桌機一律藏 */
.cms-social-stack__fold { display: none; }
@media (max-width: 600px) {
    .cms-social-stack--m-fold:not(.cms-social-stack--hover) { flex-direction: column; align-items: center; gap: 6px; }
    /* 收合鈕（老大 2026-09-22 定案）：白底黑圖示，展開與收起**同一個尺寸**（44px），跟社群圖示一樣大 */
    .cms-social-stack--m-fold:not(.cms-social-stack--hover) .cms-social-stack__fold {
        -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; padding: 0; margin-top: 4px;
        display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
        background: #3A3A40; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
        outline: none; transition: background-color .18s ease; }
    .cms-social-stack__fold:focus { outline: none; }                                  /* 版型的紅色 :focus-visible 框在這顆上很突兀 */
    .cms-social-stack__fold:focus-visible { outline: 2px solid rgba(0, 0, 0, .28); outline-offset: 2px; }
    /* 圖示是一個「＋」：展開時轉 45° 變「×」，收起時轉回「＋」——旋轉本身就是那個動態（老大 2026-09-22 定案） */
    .cms-social-stack__fold svg { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
    .cms-social-stack--m-fold:not(.is-folded) .cms-social-stack__fold svg { transform: rotate(45deg); }
    .cms-social-stack--m-fold.is-folded .cms-social-stack__fold { margin-top: 0; }   /* 收起後只剩它，尺寸不變（老大：不要大小不一樣） */
    .cms-social-stack--m-fold:not(.cms-social-stack--hover) .cms-social-stack__list { transition: max-height .3s ease, opacity .25s ease; max-height: 600px; overflow: hidden; }
    .cms-social-stack--m-fold.is-folded .cms-social-stack__list { max-height: 0; opacity: 0; pointer-events: none; }
    /* 老大 2026-09-22：位置太高、箭頭像「回到頂端」→ 手機可收合模式改貼底部（在置頂鈕上面） */
    .cms-social-stack--m-fold:not(.cms-social-stack--hover) { top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cms-social-stack__list, .cms-social-stack__item .cms-si, .cms-social-stack__item .cms-social-badge, .cms-social-stack__toggle, .cms-social-stack__fold, .cms-social-stack__fold svg { transition: none; }
}

/* ── 手機側邊浮動（2026-10-19 手機功能擺放，後台「社群設定 ④ → 手機側邊浮動」）：只管 ≤600px，桌機的呈現不變 ──
   off：手機不顯示（也是「自動」且置底列已放社群時的結果）。collapsed：手機只露一顆小鈕，點了整排展開、再點收回
   （用同一顆主鈕＋JS 的 is-open，做法同「滑過展開」在手機的行為，但不影響桌機的 hover 模式）。沒帶這兩個 class 的站台完全不受影響 */
@media (max-width: 600px) {
    .cms-social-stack.cms-float-m-off, .cms-social-float.cms-float-m-off { display: none; }
    .cms-social-stack.cms-float-m-collapsed .cms-social-stack__toggle { display: inline-flex; }
    .cms-social-stack.cms-float-m-collapsed .cms-social-stack__list {
        position: absolute; top: auto; bottom: 0; transform: translateX(12px);
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .2s ease, transform .22s ease, visibility .22s;
    }
    .cms-social-stack--right.cms-float-m-collapsed .cms-social-stack__list { right: 100%; padding-right: 8px; }
    .cms-social-stack--left.cms-float-m-collapsed .cms-social-stack__list { left: 100%; padding-left: 8px; transform: translateX(-12px); }
    .cms-social-stack.cms-float-m-collapsed.is-open .cms-social-stack__list { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .cms-social-stack.cms-float-m-collapsed .cms-social-stack__list { transition: none; } }