/* =============================================
   2026-01-15 Add: 預約頁面專用 CSS 樣式 (visit.aspx)
   UI/UX Optimized Version - 強化視覺區分
   ============================================= */

/* 覆寫原有日期樣式 (假設原有結構為 span) */
/* 注意：這會影響頁面上該區塊的所有日期顯示，需確保 selector 足夠精確但又能覆蓋 */
.cal2-date li a span {
    display: block;
    width: 100%;
    font-size: 16px;
    /* 日期放大 */
    font-weight: 700;
    /* 粗體 */
    color: #2c3e50;
    /* 深藍灰色 */
    background-color: transparent;
    padding: 4px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid #eee;
    /* 下底線分隔 */
    text-align: center;
}

/* 週末或特定狀態的日期顏色調整 (可選) */
/* .cal2-date li:nth-child(7n) a span, 
   .cal2-date li:nth-child(7n+1) a span { color: #d9534f; } */

/* 外層容器 */
.caldetail-tb-wrap-visit {
    width: 100%;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 內部表格區塊 */
.caldetail-tb-visit {
    display: block;
    width: 100%;
    background-color: #fcfcfc;
    /* 微微的灰底區分內容區 */
    border-radius: 4px;
    padding: 4px 0;
}

/* 表頭 (預約人數 標題) - 視覺弱化 */
.caldetail-tb-head-visit {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: #95a5a6;
    /* 淺灰色，讓出視覺焦點 */
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.caldetail-tb-head-visit li {
    display: block;
    padding: 0;
    margin: 0;
}

/* 表格內容 (數字) - 視覺強化 */
.caldetail-tb-cont-visit {
    display: block;
    width: 100%;
    margin: 2px 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 20px;
    /* 特大數字 */
    font-weight: 800;
    /* 極粗 */
    text-align: center;
    line-height: 1.2;
    font-family: "Arial", sans-serif;
    /* 確保數字清晰 */
}

.caldetail-tb-cont-visit li {
    display: block;
    padding: 0;
    margin: 0;
}

/* 狀態顏色區分 */

/* 休館 */
.caldetail-tb-cont-visit.status-closed {
    margin-top: 8px;
}

.caldetail-tb-cont-visit.status-closed li {
    color: #c0392b;
    /* 深紅色 */
    font-size: 16px;
    /* 文字狀態稍微縮小與數字區分 */
}

/* 額滿 */
.caldetail-tb-cont-visit.status-full li {
    color: #e67e22;
    /* 橘色警示 */
    font-size: 15px;
}

/* 正常 */
.caldetail-tb-cont-visit.status-normal li {
    color: #27ae60;
    /* 綠色表示名額開放 (或維持深色 #2c3e50) */
    /* 若希望保持中性，可用 #2c3e50 */
}

/* 互動效果 */
.cal2-date li a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

.cal2-date li a:hover .caldetail-tb-cont-visit.status-normal li {
    color: #2ecc71;
    /* hover 時變亮綠 */
}