/**
 * Desktop Layout Alignment - 桌面版佈局對齊
 * 1. 預約摘要與選擇連續時段卡片對齊
 * 2. 選擇連續時段卡片添加下一步按鈕
 */

/* ========== 桌面版佈局對齊 ========== */

@media (min-width: 1025px) {
  /* 預約摘要與選擇日期卡片頂部對齊 */
  .booking-summary {
    top: 0 !important; /* 移除偏移，與日期卡片頂部對齊 */
  }
  
  /* 確保預約摘要容器正確定位 */
  .booking-container {
    align-items: flex-start !important;
  }
}

/* ========== 選擇連續時段卡片下一步按鈕 ========== */

/* 時段選擇器容器添加相對定位 */
.time-slots-container {
  position: relative !important;
  padding-bottom: 80px !important; /* 為下一步按鈕留出空間 */
}

/* 下一步按鈕容器 */
.timeslot-next-step-container {
  position: absolute !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 10 !important;
}

/* 下一步按鈕樣式 */
.timeslot-next-step-btn {
  /* 與首頁「立即預約」按鈕一致 */
  background: var(--primary-color) !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important; /* 膠囊形狀 */
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.timeslot-next-step-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4) !important;
}

.timeslot-next-step-btn:active {
  transform: translateY(0) !important;
}

/* 箭頭圖標 */
.timeslot-next-step-btn::after {
  content: '→' !important;
  font-size: 18px !important;
  transition: transform 0.3s ease !important;
}

.timeslot-next-step-btn:hover::after {
  transform: translateX(4px) !important;
}

/* 移動端：下一步按鈕全寬，在底部 */
@media (max-width: 1024px) {
  .timeslot-next-step-container {
    position: static !important;
    margin-top: 20px !important;
    width: 100% !important;
  }
  
  .timeslot-next-step-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 16px 24px !important;
  }
  
  .time-slots-container {
    padding-bottom: 0 !important;
  }
}

/* 平板端調整 */
@media (max-width: 768px) {
  .timeslot-next-step-btn {
    font-size: 15px !important;
    padding: 14px 20px !important;
  }
}

/* 小屏幕調整 */
@media (max-width: 480px) {
  .timeslot-next-step-btn {
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
}

/* ========== 確保按鈕可見性 ========== */

/* 確保按鈕不被其他元素遮擋 */
.timeslot-next-step-btn {
  position: relative !important;
  z-index: 100 !important;
}

/* 確保按鈕在選中狀態下也可見 */
.time-slots-container.has-selection .timeslot-next-step-container {
  display: block !important;
}

/* 沒有選擇時隱藏按鈕 */
.time-slots-container:not(.has-selection) .timeslot-next-step-container {
  display: none !important;
}

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

/* 鍵盤焦點 */
.timeslot-next-step-btn:focus-visible {
  outline: 3px solid #d32f2f !important;
  outline-offset: 2px !important;
}

/* 減少動畫（用戶偏好） */
@media (prefers-reduced-motion: reduce) {
  .timeslot-next-step-btn,
  .timeslot-next-step-btn::after {
    transition: none !important;
  }
  
  .timeslot-next-step-btn:hover {
    transform: none !important;
  }
}