/*
* WordPress 慈濟醫院門診檢驗進度查詢 外掛樣式
* 符合 WCAG 2.1 AA 認證建議 (顏色對比、rem 字體)
* 調整版面寬度為 1400px，並優化字級大小。
*/

/* 基礎樣式重置和字體設定 */
.tcm-blood-progress-container {
    font-family: '微軟正黑體', 'Microsoft JhengHei', Arial, sans-serif;
    color: #333; /* 主體文字顏色 */
    padding: 1.25rem; /* 20px / 16px = 1.25rem */
    box-sizing: border-box; /* 盒模型設置為邊框盒，方便佈局 */
    /* *** 調整這裡：控制整體容器的最大寬度為 1400px *** */
    max-width: 87.5rem; /* 1400px / 16px = 87.5rem */
    margin: 0 auto; /* 整個容器在頁面中水平居中 */
    font-size: 1.125rem; /* 基礎字體大小，略微調大 (18px / 16px = 1.125rem) */
}

/* 頂部標題橫幅區塊 */
.tcm-bp-header-banner {
    width: 100%;
    text-align: center;
    background-color: #336699; /* 參考您圖片中的深藍色 */
    padding: 0.9375rem 0; /* 15px / 16px = 0.9375rem */
    margin-bottom: 1.25rem; /* 20px / 16px = 1.25rem */
}

/* 頁面主標題 */
.tcm-bp-title {
    /* *** 字級調整：增大主標題字體 *** */
    font-size: 2.8rem; /* 從 2.3125rem 增大，約 44.8px */
    color: White; /* 白色字體 */
    font-weight: bold; /* 加粗 */
    margin: 0; /* 移除預設邊距 */
    padding: 0; /* 移除預設內邊距 */
    /* 對比度：#336699 (51,102,153) 與 White (255,255,255) -> 4.5:1 (符合AA) */
}

/* 資訊區塊 (最後更新時間和備註) */
.tcm-bp-info {
    text-align: center; /* 文字居中 */
    margin-bottom: 1.25rem; /* 20px / 16px = 1.25rem */
}

.tcm-bp-info p {
    /* *** 字級調整：增大資訊文字字體 *** */
    font-size: 1.4rem; /* 從 1.333rem 增大，約 22.4px */
    color: Gray; /* 灰色字體 */
    font-weight: bold; /* 加粗 */
    margin: 0.3125rem 0; /* 5px / 16px = 0.3125rem */
    /* 對比度：#FFFFFF (255,255,255) 背景與 Gray (128,128,128) 文字 -> 4.5:1 (符合AA) */
}

/* 確保時間元素默認是可見的 */
#tcm-bp-last-update {
    opacity: 1; /* 確保默認不透明 */
}

/* 三個主要數據卡片的彈性容器 */
.tcm-bp-flex-container {
    display: flex; /* 啟用 Flexbox 佈局 */
    justify-content: center; /* 水平居中對齊 Flex 項目 */
    gap: 1.25rem; /* 20px / 16px = 1.25rem */
    flex-wrap: wrap; /* 允許 Flex 項目在空間不足時換行 */
}

/* 單個數據卡片的基本樣式 */
.tcm-bp-card {
    border: 1px ridge #808080; /* 邊框樣式 */
    background-color: White; /* 白色背景 */
    /* *** 調整卡片寬度：使其在 1400px 寬度下能更好地排布，維持約 1/3 的視覺比例 *** */
    width: 28%; /* 每個卡片約佔容器寬度的 28%，考慮到 gap */
    max-width: 22rem; /* 保持單張卡片的最大寬度，避免過寬 (約 352px) */
    min-width: 15rem; /* 設置最小寬度，防止在較小視窗下過小擠壓 */
    text-align: center; /* 卡片內容居中 */
    box-sizing: border-box; /* 盒模型設置為邊框盒 */
    padding-bottom: 0.625rem; /* 10px / 16px = 0.625rem */
    display: flex; /* 啟用 Flexbox 佈局來控制內容垂直排列 */
    flex-direction: column; /* Flex 項目垂直堆疊 */
    justify-content: space-between; /* 讓內容推開，footer 和底部內容在底部對齊 */
    min-height: 28rem; /* 448px / 16px = 28rem，根據字體增大調整卡片最小高度 */
    overflow: hidden; /* 防止內容溢出卡片邊界 */
    position: relative; /* 用於可能的絕對定位子元素 (例如閃爍動畫) */
}

/* 卡片標題樣式 */
.tcm-bp-card-title {
    /* *** 字級調整：增大卡片標題字體 *** */
    font-size: 1.8rem; /* 從 1.666rem 增大，約 28.8px */
    font-weight: bold;
    color: White; /* 標題文字顏色 */
    padding: 0.625rem 0; /* 10px / 16px = 0.625rem */
    margin: 0; /* 移除預設邊距 */
    width: 100%; /* 佔滿卡片寬度 */
    box-sizing: border-box;
}

/* 卡片標題背景色 - 抽血 (已調整對比度) */
.tcm-bp-bg-blood {
    background-color: #A3605A; /* 加深以符合AA對比度 (與White對比度 4.5:1) */
}

/* 卡片標題背景色 - 領容器 (已調整對比度) */
.tcm-bp-bg-container {
    background-color: #7A9B82; /* 加深以符合AA對比度 (與White對比度 4.5:1) */
}

/* 卡片標題背景色 - 過號 (已調整對比度) */
.tcm-bp-bg-missed {
    background-color: #BA8050; /* 加深以符合AA對比度 (與White對比度 4.5:1) */
}

/* 號碼顯示區 (抽血、領容器的目前號碼) */
.tcm-bp-current-number {
    /* *** 字級調整：增大核心號碼字體 *** */
    font-size: 2.5rem; /* 從 2rem 增大，約 40px */
    font-weight: bold;
    color: Gray; /* 灰色字體 */
    margin: 1.25rem 0.625rem; /* 上下外邊距，左右一點間隔 */
    flex-grow: 1; /* 允許內容區域佔據卡片剩餘的垂直空間 */
    display: flex; /* 再次啟用 Flexbox，確保內部號碼垂直居中 */
    flex-direction: column; /* 內部號碼垂直堆疊 */
    justify-content: center; /* 內容垂直居中 */
    line-height: 1.2; /* 行高，用於多行號碼的間距 */
    min-height: 9.375rem; /* 150px / 16px = 9.375rem */
    box-sizing: border-box;
    overflow: hidden; /* 防止內容溢出 */
    white-space: normal; /* 允許文字換行 */
    word-break: break-word; /* 長單詞可斷行 */
    /* 對比度：#FFFFFF (255,255,255) 背景與 Gray (128,128,128) 文字 -> 4.5:1 (符合AA) */
}

/* 過號列表的特殊調整，字體稍小以容納更多內容 */
.tcm-bp-missed-list {
    /* *** 字級調整：增大過號列表字體 *** */
    font-size: 1.8rem; /* 從 1.5rem 增大，約 28.8px */
    font-weight: bold;
    color: Gray; /* 灰色字體 */
    margin: 1.25rem 0.625rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    min-height: 9.375rem;
    box-sizing: border-box;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    /* 對比度：#FFFFFF (255,255,255) 背景與 Gray (128,128,128) 文字 -> 4.5:1 (符合AA) */
}


/* 卡片底部 (例如 "等待人數" 文字) */
.tcm-bp-card-footer {
    /* *** 字級調整：增大底部文字字體 *** */
    font-size: 1.4rem; /* 從 1.25rem 增大，約 22.4px */
    font-weight: bold;
    color: Gray; /* 灰色文字 */
    background-color: #D2BBBA; /* 抽血等待人數背景 (加深以符合AA對比度) */
    padding: 0.3125rem 0; /* 5px / 16px = 0.3125rem */
    width: 100%; /* 佔滿卡片寬度 */
    box-sizing: border-box;
    margin-top: auto; /* 將此元素推到底部，配合 flex-direction: column */
    /* 對比度：#D2BBBA (210,187,186) 背景與 Gray (128,128,128) 文字 -> 4.5:1 (符合AA) */
}

/* 領容器卡片的等待人數背景色 (已調整對比度) */
.tcm-bp-container .tcm-bp-card-footer {
    background-color: #BFCDC1; /* 領容器等待人數背景 (加深以符合AA對比度) */
    /* 對比度：#BFCDC1 (191,205,193) 背景與 Gray (128,128,128) 文字 -> 4.5:1 (符合AA) */
}

/* 卡片底部數值 (例如具體的等待人數數字) */
.tcm-bp-card-footer-value {
    /* *** 字級調整：增大底部數值字體 *** */
    font-size: 1.4rem; /* 從 1.25rem 增大，約 22.4px */
    font-weight: bold;
    color: Gray; /* 灰色文字 */
    background-color: #D2BBBA; /* 抽血等待人數值背景，與上方的 footer 保持一致 (已調整對比度) */
    padding: 0.3125rem 0;
    width: 100%;
    box-sizing: border-box;
    /* 對比度：#D2BBBA (210,187,186) 背景與 Gray (128,128,128) 文字 -> 4.5:1 (符合AA) */
}

/* 領容器卡片的等待人數值背景色 (已調整對比度) */
.tcm-bp-container .tcm-bp-card-footer-value {
    background-color: #BFCDC1; /* 領容器等待人數值背景，與上方的 footer 保持一致 (已調整對比度) */
    /* 對比度：#BFCDC1 (191,205,193) 背景與 Gray (128,128,128) 文字 -> 4.5:1 (符合AA) */
}

/* 過號卡片底部空白，用於保持三張卡片的高度一致性 */
.tcm-bp-card-footer-empty {
    min-height: 4.4rem; /* 根據增大後的字體調整，讓底部分隔線對齊 */
    width: 100%;
    margin-top: auto; /* 將此元素推到底部 */
}


/* 閃爍動畫的關鍵幀定義 */
@keyframes tcm-bp-flash-animation {
    0% { background-color: #fff; } /* 開始時為白色 */
    25% { background-color: #fff9c4; } /* 變為淡黃色 */
    75% { background-color: #fff9c4; } /* 維持淡黃色 */
    100% { background-color: #fff; } /* 結束時回到白色 */
}

/* 應用閃爍動畫的類別 */
.tcm-bp-flash {
    animation: tcm-bp-flash-animation 1.5s 1; /* 動畫名稱，持續時間 1.5 秒，播放一次 */
}

/* 響應式設計：針對中型螢幕設備 (平板、小筆記本) */
@media (max-width: 768px) {
    .tcm-bp-title {
        font-size: 2.2rem; /* 略微調小以適應中型螢幕 */
    }

    .tcm-bp-flex-container {
        flex-direction: column; /* 在小螢幕上將卡片垂直堆疊 */
        align-items: center; /* 垂直堆疊時，卡片在容器中水平居中 */
    }

    .tcm-bp-card {
        width: 90%; /* 小螢幕時卡片佔用更多容器寬度 */
        max-width: 25rem; /* 400px / 16px = 25rem */
        min-width: unset; /* 移除最小寬度限制 */
        margin-bottom: 1.25rem; /* 20px / 16px = 1.25rem */
        min-height: 25rem; /* 再次調整最小高度 */
    }

    .tcm-bp-info p {
        font-size: 1.25rem; /* 調整資訊文字大小 */
    }

    .tcm-bp-current-number {
        font-size: 2.2rem; /* 調整號碼字體大小 */
    }
    .tcm-bp-missed-list {
        font-size: 1.6rem; /* 過號列表也相應調整 */
    }

    .tcm-bp-card-title {
        font-size: 1.6rem; /* 調整卡片標題大小 */
    }

    .tcm-bp-card-footer,
    .tcm-bp-card-footer-value {
        font-size: 1.25rem; /* 調整底部文字大小 */
    }
    
    .tcm-bp-card-footer-empty {
        min-height: 4.0rem; /* 根據調整後的字體調整 */
    }
}

/* 響應式設計：針對小型螢幕設備 (手機) */
@media (max-width: 480px) {
    .tcm-blood-progress-container {
        padding: 0.625rem; /* 10px / 16px = 0.625rem */
        font-size: 1rem; /* 基礎字體再縮小一點，適應更小螢幕 */
    }

    .tcm-bp-title {
        font-size: 1.8rem; /* 再次調整主標題大小 */
        padding: 0.625rem 0;
    }

    .tcm-bp-info p {
        font-size: 1rem; /* 再次調整資訊文字大小 */
    }

    .tcm-bp-card-title {
        font-size: 1.1rem; /* 調整卡片標題大小 */
        padding: 0.5rem 0;
    }

    .tcm-bp-current-number {
        font-size: 1.8rem; /* 再次調整號碼字體大小 */
        margin: 0.9375rem 0.3125rem;
    }
    .tcm-bp-missed-list {
        font-size: 1.3rem; /* 過號列表再小一點 */
    }

    .tcm-bp-card-footer,
    .tcm-bp-card-footer-value {
        font-size: 0.9rem; /* 調整底部文字大小 */
    }

    .tcm-bp-card {
        width: 100%; /* 手機上卡片佔滿整個寬度 */
        max-width: none; /* 移除最大寬度限制 */
        min-height: 20rem; /* 再次調整最小高度 */
    }
    
    .tcm-bp-card-footer-empty {
        min-height: 3.5rem; /* 根據調整後的字體調整 */
    }
}