/* =========================================================================
   jk_order 響應式基底
   - 桌面版：≥992px
   - 手機版：<992px
   - 提供 .desktop-only / .mobile-only / .desktop-view / .mobile-view 切換
   - 每頁版面差異請寫在  static/css/<page>-desktop.css  與  <page>-mobile.css
   ========================================================================= */

/* ---------- 預設行為：兩類都顯示，由 media query 決定誰被隱藏 ---------- */
.desktop-only,
.mobile-only {
    display: block;
}

/* ---------- 桌面版：≥992px ----------
   手機版的 .mobile-only 隱藏，只顯示 .desktop-only */
@media (min-width: 992px) {
    .mobile-only {
        display: none !important;
    }
    .desktop-only {
        display: block !important;
    }
    .desktop-view {
        padding: 2rem;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }
    .mobile-view {
        display: none !important;
    }
}

/* ---------- 手機版：<992px ----------
   桌面版的 .desktop-only 隱藏，只顯示 .mobile-only */
@media (max-width: 991.98px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
    .mobile-view {
        padding: 1rem;
        width: 100%;
    }
    .desktop-view {
        display: none !important;
    }
}

/* ---------- 預設行動 ---------- 桌機優先 */
@media (max-width: 991.98px) {
    /* 預設隱藏桌面 */
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .desktop-only {
        display: block !important;
    }
    .mobile-only {
        display: none !important;
    }
}

/* ---------- 全站容器在兩個斷點的基本差異 ---------- */
@media (max-width: 991.98px) {
    .navbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }
    .navbar-brand {
        font-size: 1.1rem;
    }
    .user-info {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .container {
        padding: 0.75rem;
        max-width: 100%;
    }
    .footer {
        margin-top: 1.5rem;
        padding: 1rem;
        font-size: 0.85rem;
    }
}