/* 全域樣式重置，移除所有元素的預設邊距和內距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 讓邊框和內距包含在元素寬度內 */
}

/* 頁面主體樣式 */
body {
    /* 使用系統字體，確保在不同裝置上都有良好的顯示效果 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* 淡淡的杏色背景 */
    background: #fcf6ee;
    min-height: 100vh; /* 最小高度為視窗高度 */
    padding: 10px; /* 四周留白 */
}

/* 主要容器樣式 */
.container {
    max-width: 400px; /* 最大寬度，適合手機螢幕 */
    margin: 0 auto; /* 水平置中 */
    background: white; /* 白色背景 */
    border-radius: 20px; /* 圓角邊框 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); /* 陰影效果 */
    overflow: hidden; /* 隱藏超出容器的內容 */
}

/* 行事曆容器樣式 */
.calendar-container {
    padding: 20px; /* 內部留白 */
}

/* 行事曆標題列樣式 */
.calendar-header {
    display: flex; /* 使用彈性布局 */
    justify-content: space-between; /* 兩端對齊 */
    align-items: center; /* 垂直置中 */
    margin-bottom: 20px; /* 下方留白 */
}

/* 月份導航按鈕樣式 */
.nav-btn {
    background: #f5f0f5; /* 淺薰衣草色背景 */
    border: none; /* 移除邊框 */
    width: 40px; /* 固定寬度 */
    height: 40px; /* 固定高度 */
    border-radius: 50%; /* 圓形按鈕 */
    font-size: 18px; /* 字體大小 */
    cursor: pointer; /* 滑鼠指標變為手型 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
}

/* 導航按鈕懸停效果 */
.nav-btn:hover {
    background: #e8dde8; /* 更深的薰衣草色 */
    transform: scale(1.1); /* 放大 1.1 倍 */
}

/* 🚫 禁用的導航按鈕樣式
 * 設計目標：明確表示該按鈕不可點擊，提供清晰的視覺反饋
 * 適用條件：超出允許的月份導航範圍時（僅限當月和下個月）
 */
.nav-btn:disabled {
    background: #e0e0e0 !important; /* 灰色背景 - 表示禁用狀態 */
    color: #999999 !important; /* 灰色文字 - 降低可讀性表示不可用 */
    cursor: not-allowed !important; /* 禁止游標 - 明確告知不可點擊 */
    opacity: 0.5 !important; /* 透明度50% - 降低視覺權重 */
    transform: none !important; /* 禁用變形效果 - 無動畫反饋 */
}

/* 🚫 禁用的導航按鈕懸停時保持靜態 */
.nav-btn:disabled:hover {
    background: #e0e0e0 !important; /* 保持灰色背景 - 無變化 */
    transform: none !important; /* 禁用縮放效果 - 無互動反饋 */
}

/* 當前月份標題樣式 */
#currentMonth {
    font-size: 18px; /* 字體大小 */
    font-weight: 600; /* 字體粗細 */
    color: #6b5b73; /* 典雅紫灰色文字 */
}

/* 行事曆網格容器 */
.calendar-grid {
    background: white; /* 白色背景 */
}

/* 星期標題列樣式 */
.weekdays {
    display: grid; /* 使用網格布局 */
    grid-template-columns: repeat(7, 1fr); /* 7 等分欄位 */
    gap: 5px; /* 格子間距 */
    margin-bottom: 10px; /* 下方留白 */
}

/* 星期標題文字樣式 */
.weekdays div {
    text-align: center; /* 文字置中 */
    font-weight: 600; /* 字體粗細 */
    color: #8b7d8b; /* 典雅灰紫色文字 */
    padding: 10px 5px; /* 內部留白 */
    font-size: 14px; /* 字體大小 */
}

/* 週六日標題文字樣式（粉色） */
.weekdays div:first-child,
.weekdays div:last-child {
    color: #d4a5a5; /* 典雅粉色文字 */
}

/* 日期格子容器 */
.days {
    display: grid; /* 使用網格布局 */
    grid-template-columns: repeat(7, 1fr); /* 7 等分欄位 */
    gap: 5px; /* 格子間距 */
}

/* 單個日期格子樣式 */
.day {
    aspect-ratio: 1; /* 保持正方形比例 */
    display: flex; /* 使用彈性布局 */
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    border-radius: 10px; /* 圓角邊框 */
    cursor: pointer; /* 滑鼠指標變為手型 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
    font-size: 20px; /* 字體大小 */
    font-weight: 500; /* 字體粗細 */
}

/* 日期格子懸停效果 */
.day:hover {
    background: #f8f4f8; /* 淺薰衣草色背景 */
    transform: scale(1.05); /* 放大 1.05 倍 */
}

/* 非當月日期樣式 */
.day.other-month {
    color: #ccc; /* 淺灰色文字 */
    cursor: not-allowed; /* 禁止點擊的指標 */
}

/* 非當月日期懸停時不變化 */
.day.other-month:hover {
    background: none; /* 無背景 */
    transform: none; /* 無變形 */
}

/* 今天的日期樣式 */
.day.today {
    background: #c8a8d8; /* 典雅薰衣草色背景 */
    color: white; /* 白色文字 */
}

/* 選中日期的樣式 */
.day.selected {
    background: #d4b5d4; /* 典雅粉紫色背景 */
    color: white; /* 白色文字 */
}

/* 過去日期樣式 */
.day.past {
    color: #ccc; /* 淺灰色文字 */
    cursor: not-allowed; /* 禁止點擊的指標 */
}

/* 過去日期懸停時不變化 */
.day.past:hover {
    background: none; /* 無背景 */
    transform: none; /* 無變形 */
}





/* 時段選擇區域樣式 */
.time-slots {
    padding: 20px; /* 內部留白 */
    border-top: 1px solid #f0e6f0; /* 上方分隔線 */
    animation: slideUp 0.3s ease; /* 滑入動畫 */
}

/* 時段選擇標題樣式 */
.time-slots h3 {
    text-align: center; /* 文字置中 */
    margin-bottom: 20px; /* 下方留白 */
    color: #6b5b73; /* 典雅紫灰色文字 */
    font-size: 16px; /* 字體大小 */
}

/* 時段按鈕容器 */
.slots-container {
    display: flex; /* 使用彈性布局 */
    flex-direction: column; /* 垂直排列 */
    gap: 10px; /* 按鈕間距 */
}

/* 時段容器樣式 */
.time-slot {
    background: white; /* 白色背景 */
    border: 2px solid #f0e6f0; /* 淺薰衣草色邊框 */
    border-radius: 15px; /* 圓角邊框 */
    padding: 15px; /* 內部留白 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
    display: flex; /* 使用彈性布局 */
    justify-content: space-between; /* 兩端對齊 */
    align-items: center; /* 垂直置中 */
}

/* 時段容器懸停效果 */
.time-slot:hover {
    border-color: #c8a8d8; /* 薰衣草色邊框 */
    background: #faf8fb; /* 淺薰衣草色背景 */
    transform: translateY(-2px); /* 向上移動 2px */
}

/* 已預約時段的樣式 */
.time-slot.booked {
    background: #f5e6e8; /* 淺粉色背景 */
    border-color: #d4a5a5; /* 典雅粉色邊框 */
    opacity: 0.6; /* 透明度 60% */
}

/* 已預約時段懸停時不變化 */
.time-slot.booked:hover {
    transform: none; /* 無變形 */
    border-color: #d4a5a5; /* 保持典雅粉色邊框 */
    background: #f5e6e8; /* 保持淺粉色背景 */
}

/* 🕒 已過期時段的樣式（超過3小時前的預約限制）
 * 設計目標：明確表示該時段無法預約，與其他狀態有明顯視覺區別
 * 適用條件：當前時間已超過預約時段前3小時的截止時間
 * 視覺層級：灰色系統，低透明度，傳達「不可用」的訊息
 */
.time-slot.expired {
    background: #f0f0f0; /* 淺灰色背景 - 中性色調表示不可用狀態 */
    border-color: #c0c0c0; /* 灰色邊框 - 與背景搭配的一致性 */
    opacity: 0.5; /* 透明度50% - 明顯降低視覺權重，表示失效狀態 */
}

/* 🚫 已過期時段懸停時保持靜態
 * 設計理念：過期時段不應有任何互動反饋，避免用戶產生可點擊的錯覺
 * 行為：完全禁用hover效果，保持靜態外觀
 */
.time-slot.expired:hover {
    transform: none; /* 禁用變形效果 - 沒有上浮或縮放 */
    border-color: #c0c0c0; /* 保持灰色邊框 - 無色彩變化 */
    background: #f0f0f0; /* 保持淺灰色背景 - 無亮度變化 */
}

/* 時間資訊容器 */
.time-info {
    display: flex; /* 使用彈性布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左對齊 */
}

/* 時間文字樣式 */
.time {
    font-size: 18px; /* 字體大小 */
    font-weight: 600; /* 字體粗細 */
    color: #6b5b73; /* 典雅紫灰色文字 */
}

/* 時段描述文字樣式 */
.period {
    font-size: 14px; /* 字體大小 */
    color: #8b7d8b; /* 典雅灰紫色文字 */
}

/* 預約按鈕樣式 */
.book-btn {
    background: #d4b5d4; /* 典雅粉紫色背景 */
    color: white; /* 白色文字 */
    border: none; /* 移除邊框 */
    border-radius: 8px; /* 圓角邊框 */
    padding: 8px 16px; /* 內部留白 */
    font-size: 14px; /* 字體大小 */
    font-weight: 600; /* 字體粗細 */
    cursor: pointer; /* 滑鼠指標變為手型 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
    min-width: 60px; /* 最小寬度 */
}

/* 預約按鈕懸停效果 */
.book-btn:hover {
    background: #b89bb8; /* 更深的粉紫色 */
    transform: scale(1.05); /* 放大 1.05 倍 */
}

/* 已預約時段的按鈕樣式 */
.time-slot.booked .book-btn {
    background: #b8a8b8; /* 典雅灰紫色背景 */
    cursor: not-allowed; /* 禁止點擊的指標 */
}

/* 已預約按鈕懸停時不變化 */
.time-slot.booked .book-btn:hover {
    background: #b8a8b8; /* 保持典雅灰紫色背景 */
    transform: none; /* 無變形 */
}

/* ⏰ 已過期時段的按鈕樣式
 * 功能說明：顯示「已過期」狀態，完全禁用互動功能
 * 設計原則：
 *   - 視覺上明確表示不可點擊狀態
 *   - 使用對比度較低的灰色系統
 *   - 游標變為禁止符號，給予明確的不可操作訊號
 * 適用場景：當前時間超過預約時段前3小時時顯示
 */
.time-slot.expired .book-btn {
    background: #999999; /* 中性灰色背景 - 表示功能已停用 */
    cursor: not-allowed; /* 禁止游標 - 明確告知不可點擊 */
    color: #666666; /* 深灰色文字 - 降低可讀性表示不重要 */
    /* 繼承父元素的其他樣式：border-radius, padding, font-size等 */
}

/* 🚫 已過期按鈕懸停時保持完全靜態
 * 設計目標：徹底移除所有互動反饋，避免任何可操作的暗示
 * 實現方式：覆蓋所有可能的hover效果，確保完全靜態
 */
.time-slot.expired .book-btn:hover {
    background: #999999; /* 保持相同的灰色背景 - 無視覺變化 */
    transform: none; /* 禁用縮放效果 - 無動畫反饋 */
    /* 注意：cursor: not-allowed 會自動繼承，無需重複定義 */
}

/* 🚨 系統錯誤時段的樣式（API查詢失敗）
 * 設計目標：明確表示系統暫時無法提供服務，與其他狀態有視覺區別
 * 適用條件：Google日曆API查詢失敗或出現錯誤時
 * 視覺層級：橙色系統，表示警告和暫時不可用狀態
 */
.time-slot.system-error {
    background: #fff3e0; /* 淺橙色背景 - 警告色調表示系統問題 */
    border-color: #ffb74d; /* 橙色邊框 - 突出警告狀態 */
    opacity: 0.7; /* 透明度70% - 表示暫時不可用 */
}

/* 🚫 系統錯誤時段懸停時保持靜態
 * 設計理念：系統錯誤時段不應有互動反饋，表示服務暫停
 */
.time-slot.system-error:hover {
    transform: none; /* 禁用變形效果 */
    border-color: #ffb74d; /* 保持橙色邊框 */
    background: #fff3e0; /* 保持淺橙色背景 */
}

/* 🚨 系統錯誤時段的按鈕樣式
 * 功能說明：顯示「系統錯誤」狀態，完全禁用預約功能
 * 設計原則：
 *   - 使用警告色系表示系統問題
 *   - 明確表示暫時無法使用
 *   - 與其他錯誤狀態有視覺區別
 */
.time-slot.system-error .book-btn {
    background: #ff9800; /* 橙色背景 - 警告色調 */
    cursor: not-allowed; /* 禁止游標 */
    color: white; /* 白色文字 - 確保可讀性 */
}

/* 🚫 系統錯誤按鈕懸停時保持靜態 */
.time-slot.system-error .book-btn:hover {
    background: #ff9800; /* 保持橙色背景 */
    transform: none; /* 禁用縮放效果 */
}

/* 載入中的時段樣式 */
.time-slot.loading {
    background: #f8f6f8; /* 淺灰紫色背景 */
    border-color: #e0d6e0; /* 淺灰邊框 */
    opacity: 0.7; /* 透明度 70% */
}

.time-slot.loading:hover {
    transform: none; /* 載入中時無變形 */
    border-color: #e0d6e0; /* 保持淺灰邊框 */
    background: #f8f6f8; /* 保持淺灰紫色背景 */
}

/* 載入中的按鈕樣式 */
.time-slot.loading .book-btn {
    background: #d0c6d0; /* 淺灰紫色背景 */
    cursor: not-allowed; /* 禁止點擊的指標 */
    color: #8b7d8b; /* 典雅灰紫色文字 */
}

.time-slot.loading .book-btn:hover {
    background: #d0c6d0; /* 保持淺灰紫色背景 */
    transform: none; /* 無變形 */
}

/* 隱藏元素的樣式 */
.hidden {
    display: none !important; /* 強制隱藏 */
}

/* 載入指示器樣式 */
.loading-indicator {
    text-align: center;
    padding: 40px 20px;
    color: #8b7d8b;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f5f0f5;
    border-top: 4px solid #c8a8d8;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-indicator p {
    margin-top: 15px;
    color: #6b5b73;
    font-size: 14px;
}

/* 時段選擇區域滑入動畫 */
@keyframes slideUp {
    from {
        opacity: 0; /* 起始透明度為 0 */
        transform: translateY(20px); /* 起始位置向下 20px */
    }
    to {
        opacity: 1; /* 結束透明度為 1 */
        transform: translateY(0); /* 結束位置為原位 */
    }
}



/* 無時段訊息樣式 */
.no-slots-message {
    text-align: center;
    padding: 40px 20px;
    background: #f8f4f8;
    border-radius: 10px;
    margin: 10px 0;
}

/* 無時段訊息主要文字 */
.no-slots-message p {
    color: #6b5b73;
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 500;
}

/* 無時段訊息提示文字 */
.no-slots-message .hint {
    color: #8b7d8b;
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 400;
}

/* 手機裝置優化樣式 */
@media (max-width: 480px) {
    /* 手機版頁面主體樣式 */
    body {
        padding: 5px; /* 減少四周留白 */
    }
    
    /* 手機版主容器樣式 */
    .container {
        max-width: 100%; /* 全寬顯示 */
        border-radius: 15px; /* 較小的圓角 */
    }
    
    /* 手機版行事曆容器樣式 */
    .calendar-container {
        padding: 15px; /* 減少內部留白 */
    }
    
    /* 手機版時段選擇區域樣式 */
    .time-slots {
        padding: 15px; /* 減少內部留白 */
    }
}