/*
 * bs5-compat.css
 * Bootstrap 5 JS + Bootstrap 3 CSS 橋接。
 * BS5 的 JS 顯示元件時切換的是 .show class，但本專案保留的 BS3 CSS 只認 .in，
 * 兩者對不上會導致 modal「開了但看不見」、collapse 展不開、backdrop 不變暗。
 * 這裡把 BS5 的 .show 對映回 BS3 對 .in 的視覺樣式。
 * 必須在 bootstrap.min.css / bootstrap-theme.min.css 之後載入（靠 source order 覆蓋，等特異度即可）。
 */

/* .fade 元件（含 modal 本體）：BS3 為 .fade.in{opacity:1}，BS5 改用 .show */
.fade.show { opacity: 1; }

/* collapse：BS3 為 .collapse.in{display:block}，BS5 改用 .show */
.collapse.show { display: block; }

/* modal 背幕：BS3 為 .modal-backdrop.in{opacity:.5}，BS5 改用 .show */
.modal-backdrop.show { opacity: .5; }

/* modal 對話框位移：BS3 為 .modal.in .modal-dialog{translate(0,0)}，BS5 改用 .show
   （進場動畫的 transition 仍由 BS3 的 .modal.fade .modal-dialog 提供） */
.modal.show .modal-dialog {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}