/* 全站房型選單浮動鈕（2026-09-15，2026-09-16 兩輪佈局調整）
   問題：房型清單（左側抽屜）過去只有首頁的三條線按鈕能打開，切到其他頁面／
   捲動離開頂部之後完全找不到入口，只能先回首頁。
   解法：加一顆常駐的浮動鈕，任何頁面、任何捲動位置都找得到。

   ⚠️ 這一顆刻意不是 CTA（不導向洽詢／預訂），是導覽功能：
      用中性色（深底金框）而不是 LINE 綠，避免跟 #contact-fab（右下角，唯一 CTA）搶視覺重量。

   📌 2026-09-16 第二輪：改成純圖示的圓形按鈕、回到左上角（三條線圖示，對應「點開＝左側
      房型選單」這個大家熟悉的介面慣性），跟右上角另一顆「更多」圓形按鈕（見
      room-avail-fab.css）左右對稱。⛔ 不再帶文字標籤——圓形按鈕本身夠小，文字會被
      裁切或撐爆，圖示＋aria-label 已經足夠說明用途（WCAG 2.5.3 仍要求 aria-label
      以可見文字開頭，這裡可見文字＝無，屬於純圖示控制項，用完整描述當 aria-label）。 */
#room-menu-fab {
    position: fixed;
    left: 20px;
    top: calc(16px + env(safe-area-inset-top, 0px));
    z-index: 1499;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(10, 10, 10, 0.92);
    color: #C5A880;
    border: 1px solid #C5A880;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
}
#room-menu-fab:hover { transform: scale(1.04); opacity: .92; }
#room-menu-fab:focus-visible {
    outline: 3px solid #C5A880;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, .85);
}
#room-menu-fab svg { width: 21px; height: 21px; flex-shrink: 0; color: #C5A880; }

@media (prefers-reduced-motion: reduce) {
    #room-menu-fab { transition: none; }
}

/* 首頁桌機版本來就有常駐側欄（見 index.html 的 #sidebar，md: 斷點同樣是 768px），
   這顆浮動鈕在那個寬度只是重複入口，桌機隱藏、手機照常顯示。
   ⚠️ 只有 room-menu.js 判斷「重用既有側欄」時才會加這個 class；
      其餘 40 頁沒有常駐側欄可用，不會加這個 class，桌機也要看得到。 */
@media (min-width: 768px) {
    #room-menu-fab.room-menu-fab--has-sidebar { display: none; }
}

/* ── 輕量抽屜（只給沒有既有側欄的頁面使用）──────────────────────────
   首頁（index.html）本身已有含四語系的完整側欄，room-menu.js 偵測到就直接
   重用 toggleSidebar()，不會生出下面這一組；這裡是給其餘頁面的簡化版。
   📌 2026-09-16 第二輪：這顆抽屜純粹是「房型清單」，⛔ 不再附掛住宿攻略／房源影片
      連結——那些移到右上角「更多」按鈕（room-avail-fab.js）的面板裡，兩顆各司其職。 */
#room-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 1550;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
#room-menu-overlay.is-open { opacity: 1; pointer-events: auto; }

#room-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: min(84vw, 320px);
    background: rgba(10, 10, 10, .98);
    border-right: 1px solid #2A2A2A;
    box-shadow: 2px 0 30px rgba(0, 0, 0, .6);
    z-index: 1560;
    transform: translateX(-100%);
    transition: transform .35s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
#room-menu-drawer.is-open { transform: translateX(0); }

#room-menu-drawer .rmd-head { position: relative; padding: 32px 28px 20px; text-align: center; border-bottom: 1px solid #2A2A2A; }
#room-menu-drawer .rmd-brand { font-size: 22px; letter-spacing: .1em; color: #C5A880; font-weight: 700; }
#room-menu-drawer .rmd-sub { font-size: 10px; letter-spacing: .25em; color: #7a7a7a; text-transform: uppercase; margin-top: 6px; }
#room-menu-drawer .rmd-close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: 0; color: #9a9a9a;
    font-size: 26px; line-height: 1; cursor: pointer; padding: 8px;
}
#room-menu-drawer .rmd-close:hover, #room-menu-drawer .rmd-close:focus-visible { color: #fff; }

#room-menu-drawer nav { display: flex; flex-direction: column; padding: 12px 0; }
#room-menu-drawer nav a {
    padding: 14px 28px; color: #d8d8d8; text-decoration: none;
    font-size: 14px; letter-spacing: .04em; border-left: 3px solid transparent;
}
#room-menu-drawer nav a:hover, #room-menu-drawer nav a:focus-visible {
    color: #C5A880; border-left-color: #C5A880; background: rgba(197, 168, 128, .06);
}

/* 2026-09-16 第三輪：住宿攻略／房源影片改回這裡（第二輪一度移到右上角「更多」面板，
   複查後改回左側房型抽屜）。 */
#room-menu-drawer .rmd-foot {
    margin-top: auto; padding: 20px 28px 28px; border-top: 1px solid #2A2A2A;
    display: flex; flex-direction: column; gap: 12px;
}
#room-menu-drawer .rmd-foot a {
    color: #9a9a9a; font-size: 12px; letter-spacing: .1em; text-decoration: none;
    display: flex; align-items: center; gap: 8px;
}
#room-menu-drawer .rmd-foot a svg { width: 15px; height: 15px; flex-shrink: 0; }
#room-menu-drawer .rmd-foot a:hover, #room-menu-drawer .rmd-foot a:focus-visible { color: #C5A880; }

@media (prefers-reduced-motion: reduce) {
    #room-menu-overlay, #room-menu-drawer { transition: none; }
}