/**
 * 下一步按鈕修復
 * 版本: 1.0
 * 日期: 2025-11-07
 * 
 * 修復問題:
 * - 巨大的圓形按鈕
 * - 位置不正常
 * - 樣式混亂
 */

/* ========================================
   日期選擇器下一步按鈕
   ======================================== */

.date-next-step-container {
  margin-top: 24px !important;
  padding: 0 !important;
  border-top: none !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.date-next-step-btn {
  /* 重置所有可能的異常樣式 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* 尺寸 */
  min-width: 200px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  padding: 14px 32px !important;
  
  /* 外觀 */
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  
  /* 文字 */
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.5 !important;
  
  /* 陰影 */
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3) !important;
  
  /* 交互 */
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  
  /* 重置異常屬性 */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  
  /* 確保不是圓形 */
  aspect-ratio: auto !important;
}

.date-next-step-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4) !important;
  background: linear-gradient(135deg, #b71c1c 0%, #8b1414 100%) !important;
}

.date-next-step-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3) !important;
}

.date-next-step-btn svg,
.date-next-step-btn .arrow-icon {
  width: 20px !important;
  height: 20px !important;
  margin-left: 8px !important;
  transition: transform 0.3s ease !important;
}

.date-next-step-btn:hover svg,
.date-next-step-btn:hover .arrow-icon {
  transform: translateX(4px) !important;
}

/* ========================================
   時段選擇器下一步按鈕
   ======================================== */

.timeslot-next-step-container {
  margin-top: 24px !important;
  padding: 0 !important;
  border-top: none !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.timeslot-next-step-btn {
  /* 重置所有可能的異常樣式 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* 尺寸 */
  min-width: 200px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  padding: 14px 32px !important;
  
  /* 外觀 */
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  
  /* 文字 */
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.5 !important;
  
  /* 陰影 */
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3) !important;
  
  /* 交互 */
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  
  /* 重置異常屬性 */
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  
  /* 確保不是圓形 */
  aspect-ratio: auto !important;
}

.timeslot-next-step-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4) !important;
  background: linear-gradient(135deg, #b71c1c 0%, #8b1414 100%) !important;
}

.timeslot-next-step-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3) !important;
}

.timeslot-next-step-btn svg,
.timeslot-next-step-btn .arrow-icon {
  width: 20px !important;
  height: 20px !important;
  margin-left: 8px !important;
  transition: transform 0.3s ease !important;
}

.timeslot-next-step-btn:hover svg,
.timeslot-next-step-btn:hover .arrow-icon {
  transform: translateY(4px) !important;
}

/* ========================================
   移動端優化
   ======================================== */

@media (max-width: 768px) {
  .date-next-step-container,
  .timeslot-next-step-container {
    margin-top: 20px !important;
    padding: 0 !important;
  }
  
  .date-next-step-btn,
  .timeslot-next-step-btn {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
    padding: 16px 24px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .date-next-step-btn,
  .timeslot-next-step-btn {
    padding: 14px 20px !important;
    font-size: 15px !important;
  }
}

/* ========================================
   桌面端優化
   ======================================== */

@media (min-width: 769px) {
  .date-next-step-btn,
  .timeslot-next-step-btn {
    min-width: 240px !important;
    max-width: 400px !important;
  }
}

/* ========================================
   可訪問性
   ======================================== */

.date-next-step-btn:focus-visible,
.timeslot-next-step-btn:focus-visible {
  outline: 3px solid #d32f2f !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .date-next-step-btn,
  .timeslot-next-step-btn {
    transition: none !important;
  }
  
  .date-next-step-btn:hover,
  .timeslot-next-step-btn:hover {
    transform: none !important;
  }
  
  .date-next-step-btn svg,
  .timeslot-next-step-btn svg,
  .date-next-step-btn .arrow-icon,
  .timeslot-next-step-btn .arrow-icon {
    transition: none !important;
  }
  
  .date-next-step-btn:hover svg,
  .timeslot-next-step-btn:hover svg,
  .date-next-step-btn:hover .arrow-icon,
  .timeslot-next-step-btn:hover .arrow-icon {
    transform: none !important;
  }
}

/* ========================================
   覆蓋任何可能導致圓形的樣式
   ======================================== */

.date-next-step-btn,
.timeslot-next-step-btn {
  /* 確保不是圓形 */
  border-radius: 12px !important;
  
  /* 確保不是固定寬高比 */
  aspect-ratio: auto !important;
  
  /* 確保不是絕對定位 */
  position: relative !important;
  
  /* 確保不是固定尺寸 */
  width: auto !important;
  height: auto !important;
  
  /* 確保不是圓形容器 */
  overflow: visible !important;
}

/* 移動端全寬 */
@media (max-width: 768px) {
  .date-next-step-btn,
  .timeslot-next-step-btn {
    width: 100% !important;
  }
}