/* 全站右上角「查詢空房」浮動鈕＋面板（2026-09-15 建立、2026-09-16 三輪佈局調整）
   右上角一顆按鈕，點開直接看到四個房型的訂房狀態，不用先選定某個房型、不用先回首頁。
   ⚠️ 第二輪曾把住宿攻略／房源影片也收進這顆按鈕的面板，複查後改回左側房型抽屜
   （room-menu.css／room-menu.js），這顆面板純粹只做一件事：呈現訂房狀態。

   做法：獨立元件，不依賴 index.html 既有的單房型日曆（#av-modal／window.SWAvail，
   那個要先選定 window.__currentRoom 才有用，且目前只有首頁 DOM 有那個彈窗）。
   訂房狀態直接打 /api/availability（本來就是公開、快取過的唯讀端點，src/availability.js
   已經把 fail-closed 判斷做在後端：status 只會是 ok／stale／unavailable，⛔ 沒有第四種
   「有空房」的宣稱），四個房型一次讀、一次畫，42 頁共用同一份。

   ⚠️ 跟房型選單一樣不是 CTA，樣式沿用同一套深底金框語彙、圖示＋圓形按鈕，⛔ 不用 LINE 綠
   （那個顏色留給 #contact-fab／房東確認入口，不能被這裡稀釋）。
   跟 #room-menu-fab 同一排、左右對稱（左 20px／右 20px，同樣 top:16px），
   z-index 比 #room-menu-fab 再低一階（1498 < 1499 < #contact-fab 的 1500）。 */
#room-avail-fab {
    position: fixed;
    right: 20px;
    top: calc(16px + env(safe-area-inset-top, 0px));
    z-index: 1498;
    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-avail-fab:hover { transform: scale(1.04); opacity: .92; }
#room-avail-fab:focus-visible {
    outline: 3px solid #C5A880;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, .85);
}
#room-avail-fab svg { width: 21px; height: 21px; flex-shrink: 0; color: #C5A880; }

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

/* ── 四房型狀態面板 ────────────────────────────────────────── */
#room-avail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 1550;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
#room-avail-overlay.is-open { opacity: 1; pointer-events: auto; }

#room-avail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: min(92vw, 420px);
    max-height: 85vh;
    overflow-y: auto;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 8px;
    padding: 24px 20px;
    z-index: 1560;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
#room-avail-panel.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }

#room-avail-panel .rap-head { position: relative; text-align: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #2A2A2A; }
#room-avail-panel .rap-title { color: #fff; font-size: 17px; font-weight: 700; }
#room-avail-panel .rap-sub { color: #7a7a7a; font-size: 12px; margin-top: 4px; }
#room-avail-panel .rap-close {
    position: absolute; top: -6px; right: -4px;
    background: none; border: 0; color: #9a9a9a;
    font-size: 26px; line-height: 1; cursor: pointer; padding: 8px;
}
#room-avail-panel .rap-close:hover, #room-avail-panel .rap-close:focus-visible { color: #fff; }

/* 2026-09-15 第四輪：月份切換／圖示／更新時間收斂到這裡，四個房型共用一份
   （原本每個房型各畫一次，見 room-avail-fab.js buildControls() 的說明）。 */
.rap-controls { padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid #2A2A2A; }

.rap-month-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.rap-month-label { color: #fff; font-size: 14px; font-weight: 700; min-width: 84px; text-align: center; }
.rap-month-btn {
    width: 28px; height: 28px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #1c1c1c; border: 1px solid #2A2A2A; border-radius: 50%;
    color: #C5A880; font-size: 16px; line-height: 1; cursor: pointer;
}
.rap-month-btn:hover:not(:disabled) { border-color: #C5A880; }
.rap-month-btn:disabled { color: #4a4a4a; border-color: #232323; cursor: not-allowed; }

.rap-controls .rap-legend { justify-content: center; margin-top: 12px; }
.rap-controls .rap-msg { text-align: center; margin-top: 6px; }

.rap-room + .rap-room { margin-top: 18px; padding-top: 18px; border-top: 1px solid #232323; }
.rap-room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rap-room-label { color: #C5A880; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.rap-room-stamp { color: #6a6a6a; font-size: 11px; white-space: nowrap; }

/* 15 天一排、兩排（依當月實際天數對半，見 buildRoomGrid()）。--cols 由 JS 依每排
   實際天數設定，⛔ 不要改回寫死 14——月份天數不固定，寫死會讓某幾排擠壓變形。 */
.rap-strip { display: flex; gap: 3px; margin-top: 10px; flex-wrap: wrap; }
.rap-strip + .rap-strip { margin-top: 3px; }
.rap-day {
    flex: 1 0 calc((100% - 3px * (var(--cols, 15) - 1)) / var(--cols, 15));
    min-width: 16px;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #9a9a9a;
    background: #1c1c1c; border: 1px solid #2A2A2A; border-radius: 3px;
}
.rap-day.is-today { border-color: #C5A880; color: #C5A880; }
.rap-day.is-blocked { background: #2a2222; border-color: #4a3030; color: #c98a8a; }
.rap-day.is-past { opacity: .4; }

.rap-legend { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.rap-legend span { display: inline-flex; align-items: center; gap: 5px; color: #7a7a7a; font-size: 11px; }
.rap-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; background: #1c1c1c; border: 1px solid #2A2A2A; }
.rap-legend .is-blocked-dot { background: #2a2222; border-color: #4a3030; }

.rap-msg { color: #9a9a9a; font-size: 12.5px; line-height: 1.7; margin-top: 10px; }
.rap-msg b { color: #d8d8d8; }

/* 2026-09-16 第二輪：⛔ 不再放「LINE 問房東」——全站洽詢入口統一收斂到右下角
   #contact-fab，這裡改成一行純文字提示（見 room-avail-fab.js 的 CONTACT_HINT）。
   第三輪：⛔ 也拿掉了「查看完整月曆」連結（.rap-links，已移除），這顆面板
   現在不帶任何連結／CTA，純粹呈現狀態。 */
.rap-contact-hint { color: #7a7a7a; font-size: 12px; line-height: 1.6; margin-top: 12px; }

#room-avail-panel .rap-foot-hint { color: #6a6a6a; font-size: 11px; line-height: 1.7; margin-top: 18px; padding-top: 14px; border-top: 1px solid #2A2A2A; }

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