/**
 * UI Improvements CSS
 * UI 改進樣式
 * 版本: 3.0
 * 日期: 2025-11-22
 * 
 * 恢復原始設計：全寬按鈕
 */

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

/* 容器 - 全寬設計 */
.timeslot-next-step-container {
  /* 佈局 */
  width: 100% !important;
  margin-top: 20px !important;
  padding: 0 !important;
}

/* 按鈕樣式 - 全寬 */
.timeslot-next-step-btn {
  /* 外觀 */
  background: #ff3b30 !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  
  /* 全寬 */
  width: 100% !important;
  padding: 16px 32px !important;
  
  /* 文字 */
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  
  /* 佈局 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  
  /* 陰影 */
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;
  
  /* 交互 */
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

/* Hover 效果 */
.timeslot-next-step-btn:hover {
  background: #e6342a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(255, 59, 48, 0.4) !important;
}

/* Active 效果 */
.timeslot-next-step-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3) !important;
}

/* Disabled 狀態 */
.timeslot-next-step-btn:disabled {
  background: #ccc !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 按鈕內的 SVG 圖標 */
.timeslot-next-step-btn svg,
.timeslot-next-step-btn .arrow-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}

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

/* 手機版優化 */
@media (max-width: 768px) {
  .timeslot-next-step-btn {
    padding: 16px 24px !important;
  }
}

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

/* ========================================
   預約摘要手機版單行顯示
   ======================================== */

/* 預約摘要容器 */
.booking-summary {
  text-align: left !important;
}

/* 預約摘要內容 */
.booking-summary-content {
  display: block !important;
  text-align: left !important;
}

/* 預約摘要項目 */
.summary-item,
.summary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;  /* 減少間距 */
  padding-bottom: 0 !important;  /* 移除 padding */
  text-align: left !important;
}

.summary-item .label {
  text-align: left !important;
  flex-shrink: 0 !important;
}

.summary-item .value {
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* 手機版預約摘要 */
@media (max-width: 768px) {
  .booking-summary {
    text-align: left !important;
    padding: 20px !important;
  }
  
  .booking-summary-content {
    display: block !important;
    text-align: left !important;
  }
  
  .summary-item,
  .summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 4px !important;  /* 減少間距以節省空間 */
    padding-bottom: 0 !important;  /* 移除 padding */
    text-align: left !important;
  }
  
  .summary-item .label,
  .summary-row .summary-label {
    text-align: left !important;
    font-weight: 500 !important;
    color: #666 !important;
  }
  
  .summary-item .value,
  .summary-row .summary-value {
    text-align: right !important;
    font-weight: 600 !important;
    color: #333 !important;
  }
  
  /* 確保總價格也是單行顯示 */
  .summary-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 16px !important;
    border-top: 2px solid #e0e0e0 !important;
    margin-top: 16px !important;
  }
  
  .summary-total .label {
    text-align: left !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
  }
  
  .summary-total .value {
    text-align: right !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ff3b30 !important;
  }
}

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

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

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