/**
 * file-upload.css
 * v9.1.6: 卡片高度增加、SUCCESS 狀態不變暗
 *
 * v9.1.6 改進：
 * - 卡片 padding 增加（20px 上下 + 32px 底部）讓進度條不卡框線
 *
 * v9.1.2 改進：
 * - 卡片移除 cursor:pointer 和點擊縮放
 * - Glow 區域變成主要點擊目標（cursor:pointer）
 * - 優化過渡動畫（減少卡頓）
 *
 * v9.1.1 改進：
 * - 移除 Action Sheet 樣式（iOS 原生選擇器）
 * - 新增 .locked 鎖定卡片樣式
 * - 新增第一張卡片脈衝動畫（引導用戶）
 *
 * v9.1.0 改進：
 * - X 按鈕位於卡片右上角
 * - 卡片可點擊選擇檔案
 * - 進度條動畫
 * - 失敗狀態重試覆蓋層
 * - 右側編號 spinner
 *
 * 設計特點：
 * - 深色漸層背景（#1C1917 → #0C0A09）
 * - 橘色主色調（#F59E0B）
 * - 三張卡片（橘/綠/紅漸層光暈）
 * - 圓角 44px 主容器
 */

/* ========================================
   1. 主容器
   ======================================== */
.upload-ui-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(180deg, #1C1917 0%, #0C0A09 100%);
  border-radius: 44px;
  padding: 50px 24px 28px;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
}

/* ========================================
   2. 頭部區
   ======================================== */
.upload-ui-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* Badge（橘色漸層圓圈 + 圖示）*/
.upload-ui-badge {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 2px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-ui-badge svg {
  width: 28px;
  height: 28px;
  stroke: #F59E0B;
}

/* 標題區 */
.upload-ui-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.upload-ui-title {
  font-size: 20px;
  font-weight: 700;
  color: #FAFAF9;
  text-align: center;
}

.upload-ui-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: #A8A29E;
  text-align: center;
}

/* ========================================
   3. 間距
   ======================================== */
.upload-ui-spacer {
  flex-shrink: 0;
}

.upload-ui-spacer-flex {
  flex: 1;
  min-height: 20px;
}

/* ========================================
   4. 卡片區
   ======================================== */
.upload-ui-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* 單張卡片（v9.1.2: 卡片本身不可點擊，只有 Glow 可點）*/
.upload-ui-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  /* v9.1.6: 增加高度（padding 20px 上下 + 32px 底部）讓進度條不卡框線 */
  padding: 20px 20px 32px;
  background: #1C1917;
  border: 1px solid #292524;
  border-radius: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
  /* v9.1.2: 移除 cursor:pointer，卡片本身不可點擊 */
}

/* v9.1.2: 移除卡片的 :active 縮放動畫（減少卡頓）*/

/* v9.1.0: X 按鈕（卡片右上角）*/
.upload-ui-card-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #44403C;
  border: 2px solid #1C1917;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}

.upload-ui-card-remove svg {
  width: 12px;
  height: 12px;
  stroke: #A8A29E;
}

.upload-ui-card-remove:hover {
  background: #EF4444;
}

.upload-ui-card-remove:hover svg {
  stroke: #fff;
}

/* v9.1.2: 進度條（內縮到卡片內部）*/
.upload-ui-card-progress {
  position: absolute;
  bottom: 12px;
  left: 20px;
  right: 20px;
  height: 4px;
  background: #292524;
  border-radius: 2px;
  overflow: hidden;
}

.upload-ui-card-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
  border-radius: 2px;
  transition: width 0.2s ease-out;
}

/* v9.1.0: 失敗重試覆蓋層 */
.upload-ui-card-retry-overlay {
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.upload-ui-card-retry-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #EF4444;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-ui-card-retry-btn svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
}

.upload-ui-card-retry-btn:hover {
  background: #DC2626;
  transform: scale(1.05);
}

/* v9.1.0: 右側編號 spinner */
.upload-ui-card-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-top-color: #F59E0B;
  border-radius: 50%;
  animation: upload-ui-spin 0.8s linear infinite;
}

/* 已選擇狀態（亮燈效果）*/
.upload-ui-card.selected {
  background: linear-gradient(135deg, #292524 0%, #1C1917 100%);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

/* v9.1.0: 上傳中狀態 */
.upload-ui-card.uploading {
  background: linear-gradient(135deg, #292524 0%, #1C1917 100%);
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.2);
  cursor: not-allowed;
}

/* v9.1.0: 成功狀態 */
.upload-ui-card.success {
  background: linear-gradient(135deg, #292524 0%, #1C1917 100%);
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
}

/* v9.1.0: 失敗狀態 */
.upload-ui-card.failed {
  background: linear-gradient(135deg, #292524 0%, #1C1917 100%);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
  cursor: pointer;
}

/* ========================================
   v9.1.1: 鎖定狀態（依序上傳）
   ======================================== */
.upload-ui-card.locked {
  opacity: 0.4;
  /* v9.1.2: 不再需要 pointer-events: none，因為卡片本身不可點 */
}

/* v9.1.2: 鎖定時 Glow 不可點擊 */
.upload-ui-card.locked .upload-ui-card-glow {
  filter: grayscale(0.5);
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
   v9.1.1: 第一張卡片脈衝動畫（引導用戶）
   ======================================== */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(245, 158, 11, 0.3);
    transform: scale(1.05);
  }
}

/* v9.1.2: 所有解鎖且未選擇的卡片都有脈衝動畫（引導用戶點擊 Glow）*/
.upload-ui-card:not(.selected):not(.uploading):not(.success):not(.failed):not(.locked) .upload-ui-card-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* 第一張卡片（橘色漸層邊框）*/
.upload-ui-card[data-index="0"] {
  background: linear-gradient(135deg, #292524 0%, #1C1917 100%);
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.upload-ui-card[data-index="0"]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.4) 0%, rgba(245, 158, 11, 0.1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 卡片左側 Glow 圖示（v9.1.2: 主要點擊區域）*/
.upload-ui-card-glow {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}

/* v9.1.2: Glow 點擊回饋 */
.upload-ui-card-glow:active {
  transform: scale(0.92);
}

.upload-ui-card-glow svg {
  width: 24px;
  height: 24px;
  stroke: #0C0A09;
}

/* 第一張卡片 Glow */
.upload-ui-card[data-index="0"] .upload-ui-card-glow {
  background: rgba(245, 158, 11, 0.7);
}

.upload-ui-card[data-index="0"] .upload-ui-card-glow svg {
  stroke: #0C0A09;
}

/* 第二張卡片 Glow */
.upload-ui-card[data-index="1"] .upload-ui-card-glow {
  background: rgba(34, 197, 94, 0.7);
}

.upload-ui-card[data-index="1"] .upload-ui-card-glow svg {
  stroke: #FAFAF9;
}

/* 第三張卡片 Glow */
.upload-ui-card[data-index="2"] .upload-ui-card-glow {
  background: rgba(239, 68, 68, 0.7);
}

.upload-ui-card[data-index="2"] .upload-ui-card-glow svg {
  stroke: #FAFAF9;
}

/* 卡片中間文字區 */
.upload-ui-card-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.upload-ui-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #FAFAF9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-ui-card-sub {
  font-size: 12px;
  font-weight: 400;
  color: #78716C;
  transition: color 0.2s;
}

/* 非第一張卡片的預設文字顏色 */
.upload-ui-card[data-index="1"] .upload-ui-card-title,
.upload-ui-card[data-index="2"] .upload-ui-card-title {
  font-weight: 500;
  color: #A8A29E;
}

.upload-ui-card[data-index="1"] .upload-ui-card-sub,
.upload-ui-card[data-index="2"] .upload-ui-card-sub {
  color: #57534E;
}

/* 已選擇狀態 */
.upload-ui-card.selected .upload-ui-card-title {
  font-weight: 600;
  color: #FAFAF9;
}

.upload-ui-card.selected .upload-ui-card-sub {
  color: #78716C;
}

/* 卡片右側編號圓圈 */
.upload-ui-card-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s;
}

.upload-ui-card-num svg {
  width: 14px;
  height: 14px;
}

/* 第一張卡片編號 */
.upload-ui-card[data-index="0"] .upload-ui-card-num {
  background: #F59E0B;
  color: #0C0A09;
}

/* 其他卡片編號 */
.upload-ui-card[data-index="1"] .upload-ui-card-num,
.upload-ui-card[data-index="2"] .upload-ui-card-num {
  background: #292524;
  color: #57534E;
}

/* ========================================
   5. 格式提示
   ======================================== */
.upload-ui-format {
  font-size: 13px;
  font-weight: 500;
  color: #A8A29E;
  text-align: center;
  width: 100%;
}

/* ========================================
   6. 按鈕區
   ======================================== */
.upload-ui-btns {
  display: flex;
  gap: 12px;
  width: 100%;
}

/* 稍後補件按鈕 */
.upload-ui-btn-skip {
  flex: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #292524;
  border: 1px solid #44403C;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-ui-btn-skip svg {
  width: 18px;
  height: 18px;
  stroke: #A8A29E;
}

.upload-ui-btn-skip span {
  font-size: 15px;
  font-weight: 500;
  color: #A8A29E;
}

.upload-ui-btn-skip:hover {
  border-color: #57534E;
}

.upload-ui-btn-skip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 選擇檔案按鈕（主按鈕）*/
.upload-ui-btn-select {
  flex: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-ui-btn-select svg {
  width: 18px;
  height: 18px;
  stroke: #0C0A09;
}

.upload-ui-btn-select span {
  font-size: 15px;
  font-weight: 600;
  color: #0C0A09;
}

.upload-ui-btn-select:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.upload-ui-btn-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: #44403C;
}

.upload-ui-btn-select:disabled svg {
  stroke: #78716C;
}

.upload-ui-btn-select:disabled span {
  color: #78716C;
}

/* 上傳中 Spinner */
.upload-ui-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(12, 10, 9, 0.3);
  border-top-color: #0C0A09;
  border-radius: 50%;
  animation: upload-ui-spin 0.8s linear infinite;
}

@keyframes upload-ui-spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   7. 響應式調整
   ======================================== */
@media (max-width: 375px) {
  .upload-ui-overlay {
    padding: 40px 20px 24px;
    border-radius: 36px;
  }

  .upload-ui-badge {
    width: 56px;
    height: 56px;
  }

  .upload-ui-badge svg {
    width: 24px;
    height: 24px;
  }

  .upload-ui-title {
    font-size: 18px;
  }

  .upload-ui-card {
    padding: 14px 16px;
  }

  .upload-ui-card-glow {
    width: 44px;
    height: 44px;
  }

  .upload-ui-btn-skip,
  .upload-ui-btn-select {
    height: 48px;
  }
}