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

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

body {
    opacity: 1;
    transition: opacity 0.1s ease-in;
}

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

#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(210, 105, 30, 0.25);
    border-top-color: rgba(210, 105, 30, 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: opacity 0.2s ease-in;
}

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

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

.auth-buttons > * {
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

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