/* 防止 Blazor Server 連線時的閃爍 */

/* 確保頁面在 Blazor 連線建立前就顯示 */
html {
    visibility: visible !important;
}

body {
    opacity: 1;
    transition: none;
}

/* 不使用導頁淡出效果 */
.page { transition: none; }

/* 路由切換遮罩：資料載入中先半透明遮蔽 */
.route-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    opacity: 0;
    visibility: hidden;
    transition: none;
    z-index: 2147483646; /* 低於 initial-shell，但高於頁面 */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.route-loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 遮罩期間 footer 不顯示，避免先閃出 */
body.route-loading-active footer {
    visibility: hidden;
}

.route-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 14px;
}

/* 初始載入殼：避免重整時白畫面/閃爍 */
#initial-shell {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
}

#initial-shell.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.initial-shell-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #666;
    font-size: 14px;
}

.initial-shell-spinner {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 3px solid rgba(87, 176, 183, 0.25);
    border-top-color: rgba(87, 176, 183, 1);
    animation: initialShellSpin 0.8s linear infinite;
}

@keyframes initialShellSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 避免載入時的佈局偏移 */
.service-categories-wrapper,
.popular-grid,
.news-grid,
.stats-section {
    min-height: 100px;
    transition: none;
}

/* ⚠️ 不使用 fadeIn 動畫：
   Blazor 重新渲染/重新插入 DOM 時會反覆觸發 animation，造成「重整閃兩次」 */

/* 減少登入狀態切換時的閃爍 */
.auth-buttons {
    min-height: 40px; /* 預留空間，避免高度變化 */
}

.auth-buttons > * {
    transition: none;
}

/* 隱藏 Blazor 連線時的載入指示器（如果有的話） */
.blazor-loading,
#blazor-loading {
    display: none !important;
}