/**
 * Date Selector Redesign
 * 日期選擇器重新設計
 * 
 * 設計要求：
 * - 初始顯示 7 天
 * - 展開後顯示 14 天
 * - 2列網格佈局
 * - 圓角矩形卡片
 * - 選中狀態：紅色背景
 */

/* ========================================
   日期選擇器容器
   ======================================== */

.date-selector {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ========================================
   日期按鈕
   ======================================== */

.date-btn {
  /* 佈局 */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* 尺寸 */
  min-height: 120px !important;
  padding: 16px !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;
  
  /* 過渡效果 */
  transition: all 0.2s ease !important;
  
  /* 游標 */
  cursor: pointer !important;
  
  /* 移除默認樣式 */
  box-shadow: none !important;
}

.date-btn:hover {
  border-color: #ff3b30 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.15) !important;
}

/* 第 7 個日期按鈕（29 號）強制在第 4 行第 1 列 */
.date-selector .date-btn:nth-child(7) {
  grid-row: 4 !important;
  grid-column: 1 !important;
}

/* 選中狀態 */
.date-btn.selected {
  background: #ff3b30 !important;
  border-color: #ff3b30 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;
}

/* 隱藏的日期按鈕 - 提高優先級 */
.date-selector .date-btn.date-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ========================================
   日期按鈕內容
   ======================================== */

/* 星期 */
.date-weekday {
  font-size: 14px !important;
  font-weight: 400 !important;
  margin-bottom: 8px !important;
  opacity: 0.8 !important;
}

.date-btn.selected .date-weekday {
  opacity: 1 !important;
}

/* 日期（數字） */
.date-day {
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}

/* 月份 */
.date-month {
  font-size: 14px !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
}

.date-btn.selected .date-month {
  opacity: 1 !important;
}

/* 今天標記 */
.date-today-badge {
  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;
}

.date-btn.selected .date-today-badge {
  background: white !important;
  color: #ff3b30 !important;
}

/* ========================================
   展開/收起按鈕
   ======================================== */

.date-expand-btn {
  /* 佈局 - 與日期卡片相同 */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  
  /* 尺寸 - 與日期卡片相同 */
  min-height: 120px !important;
  padding: 16px !important;
  
  /* Grid 位置 - 明確指定在第 4 行第 2 列（29 號右邊） */
  grid-row: 4 !important;
  grid-column: 2 !important;
  
  /* 外觀 - 使用 1px 邊框與日期按鈕一致 */
  background: white !important;
  border: 1px dashed #d0d0d0 !important;
  border-radius: 16px !important;
  
  /* 文字 */
  color: #666 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  
  /* 過渡效果 */
  transition: all 0.2s ease !important;
  
  /* 游標 */
  cursor: pointer !important;
  
  /* 移除默認樣式 */
  box-shadow: none !important;
}

/* 展開後，按鈕在最後一行 */
.date-selector.expanded .date-expand-btn {
  grid-row: auto !important;
  grid-column: 1 / -1 !important;
}

.date-expand-btn:hover {
  border-color: #ff3b30 !important;
  color: #ff3b30 !important;
  background: #fff5f5 !important;
}

/* 展開按鈕圖標 */
.date-expand-btn .expand-icon {
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.3s ease !important;
}

.date-expand-btn .expand-icon.expanded {
  transform: rotate(180deg) !important;
}

/* ========================================
   下一步按鈕容器
   ======================================== */

.date-next-step-container {
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;  /* 明確指定在第 5 行，不與展開按鈕衝突 */
  margin-top: 16px !important;
}

.date-next-step-btn {
  width: 100% !important;
  min-height: 56px !important;
  background: #ff3b30 !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.date-next-step-btn:hover {
  background: #e6342a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;
}

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

/* 平板和桌面 */
@media (min-width: 769px) {
  .date-selector {
    max-width: 600px !important;
  }
  
  .date-btn {
    min-height: 140px !important;
  }
  
  .date-expand-btn {
    min-height: 140px !important;
  }
  
  .date-day {
    font-size: 56px !important;
  }
}

/* 大屏幕 */
@media (min-width: 1200px) {
  .date-selector {
    max-width: 700px !important;
  }
}

/* 小屏幕優化 */
@media (max-width: 480px) {
  .date-selector {
    gap: 10px !important;
  }
  
  .date-btn {
    min-height: 110px !important;
    padding: 12px !important;
  }
  
  .date-day {
    font-size: 42px !important;
  }
  
  .date-weekday,
  .date-month {
    font-size: 13px !important;
  }
  
  .date-expand-btn {
    min-height: 110px !important;
    padding: 12px !important;
    font-size: 14px !important;
  }
}

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

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

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

/* 展開時的動畫 */
.date-btn:not(.date-hidden) {
  animation: fadeIn 0.3s ease !important;
}