/**
 * Time Slot Selector Redesign
 * 時段選擇器重新設計
 * 
 * 設計目標：
 * - 與日期選擇器統一風格
 * - 紅色 (#ff3b30) 選中狀態
 * - 圓角矩形卡片
 * - 一致的 Hover 效果
 */

/* ========================================
   時段網格容器
   ======================================== */

.time-slots-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* ========================================
   時段按鈕 - 統一風格
   ======================================== */

.time-slot-btn {
  /* 佈局 */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* 尺寸 */
  min-height: 100px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  
  /* 外觀 - 與日期選擇器一致 */
  background: white !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 16px !important;
  
  /* 文字 */
  color: #333 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  text-align: center !important;
  
  /* 過渡效果 */
  transition: all 0.2s ease !important;
  
  /* 游標 */
  cursor: pointer !important;
  
  /* 移除預設樣式 */
  box-shadow: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  
  /* 強制禁用點擊高亮效果 */
  -webkit-touch-callout: none !important;
  touch-action: manipulation !important;
}

/* Hover 效果已移除 */

/* 選中狀態 - 與日期選擇器一致 */
.time-slot-btn.selected {
  background: #ff3b30 !important;
  border-color: #ff3b30 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;
  transform: none !important;
}

/* 選中狀態的 hover 效果已移除 */

/* 完全移除 active 狀態規則 - 參照日期按鈕的設計 */
/* 日期按鈕沒有 :active 規則，只依賴 .selected 類別控制樣式 */

/* 已預訂狀態 */
.time-slot-btn.booked,
.time-slot-btn:disabled {
  background: #f8f9fa !important;
  border-color: #e9ecef !important;
  color: #adb5bd !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.65 !important;
}

/* 已預訂狀態的 hover 效果已移除 */

/* ========================================
   時段按鈕內容
   ======================================== */

/* 時間文字 */
.time-slot-time {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  color: inherit !important;
  line-height: 1.2 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none !important;
}

/* 價格文字 */
.time-slot-price {
  font-size: 14px !important;
  font-weight: 500 !important;
  opacity: 0.8 !important;
  color: inherit !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none !important;
}

.time-slot-btn.selected .time-slot-price {
  opacity: 1 !important;
}

/* ========================================
   時段選擇頭部
   ======================================== */

.timeslot-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  padding: 16px 20px !important;
  background: #f8f9fa !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #e9ecef !important;
}

/* 提示文字 */
.timeslot-hint {
  margin: 0 !important;
  color: #6c757d !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* 已選擇時間範圍顯示 */
.selected-range-display {
  margin: 0 !important;
  color: #212529 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  flex: 1 !important;
}

.selected-range-display strong {
  color: #ff3b30 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* 清空選擇按鈕 - 與日期選擇器風格一致 */
.clear-selection-btn {
  background: white !important;
  border: 2px solid #ff3b30 !important;
  color: #ff3b30 !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

/* 清空選擇按鈕的 hover 效果已移除 */

.clear-selection-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(255, 59, 48, 0.2) !important;
}

/* ========================================
   響應式設計
   ======================================== */

/* 平板和桌面 */
@media (min-width: 769px) {
  .time-slots-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 700px !important;
  }
  
  .time-slot-btn {
    min-height: 140px !important;  /* 與日期按鈕一致 */
  }
  
  .time-slot-time {
    font-size: 22px !important;
  }
}

/* 大屏幕 */
@media (min-width: 1200px) {
  .time-slots-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 900px !important;
  }
}

/* 小屏幕優化 */
@media (max-width: 480px) {
  .time-slots-grid {
    gap: 10px !important;
  }
  
  .time-slot-btn {
    min-height: 90px !important;
    padding: 12px !important;
  }
  
  .time-slot-time {
    font-size: 18px !important;
  }
  
  .time-slot-price {
    font-size: 13px !important;
  }
}

/* ========================================
   動畫效果
   ======================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.time-slot-btn {
  animation: fadeIn 0.3s ease !important;
}

/* ========================================
   跨午夜時段標記
   ======================================== */

.time-slot-btn.cross-midnight {
  position: relative !important;
}

.time-slot-btn.cross-midnight::after {
  content: attr(data-cross-midnight-label) !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: #ff3b30 !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

.time-slot-btn.cross-midnight.selected::after {
  background: white !important;
  color: #ff3b30 !important;
}