/**
 * SweetAlert2 品牌主題覆寫
 * 對齊「樓上那間共享工作室」設計系統（new-base.css）
 * 使用方案二：全域覆寫，現有 Swal.fire() 呼叫零修改自動套用品牌樣式
 *
 * 色彩均透過 CSS 自訂屬性（CSS Custom Properties）引用，
 * 並附 fallback 值以確保在尚未定義變數的環境下仍正常顯示。
 */

/* ============================================================
   彈窗容器
   ============================================================ */
.swal2-popup {
  font-family: 'Noto Sans TC', 'Inter', sans-serif;
  background: var(--bg-surface, #FFFFFF);
  border-radius: 16px;                                  /* --radius-card */
  box-shadow: 0 10px 30px rgba(170, 145, 119, 0.15),
              0 4px 12px rgba(60, 58, 56, 0.08);
  padding: 32px 28px 28px;
}

/* ============================================================
   標題
   ============================================================ */
.swal2-title {
  color: var(--text-primary, #3C3A38);                  /* --text-primary */
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 1.25rem;
  padding: 0 0 8px;
}

/* ============================================================
   內容文字
   ============================================================ */
.swal2-html-container {
  color: var(--text-secondary, #7B7874);                /* --text-secondary */
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-top: 8px;
}

/* ============================================================
   按鈕容器
   ============================================================ */
.swal2-actions {
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   確認按鈕（品牌主色 — 質感咖）
   使用 !important 確保品牌樣式覆蓋 Swal2 注入的 inline style
   ============================================================ */
.swal2-confirm,
.swal2-upstairs-confirm {
  background-color: var(--color-primary, #AA9177) !important;   /* --color-primary */
  color: var(--bg-surface, #FFFFFF) !important;                 /* --text-on-primary */
  border: none !important;
  border-radius: 50px !important;                       /* --radius-btn：藥丸型 */
  padding: 10px 28px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background-color 0.3s ease,
              transform 0.3s ease,
              box-shadow 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(170, 145, 119, 0.3) !important;
}

.swal2-confirm:hover,
.swal2-upstairs-confirm:hover {
  background-color: var(--color-primary-dark, #8A725A) !important;  /* --color-primary-dark */
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(170, 145, 119, 0.4) !important;
}

.swal2-confirm:focus,
.swal2-upstairs-confirm:focus {
  box-shadow: 0 0 0 3px rgba(170, 145, 119, 0.35) !important;
  outline: none !important;
}

/* ============================================================
   取消按鈕（燕麥白底、灰色文字）
   ============================================================ */
.swal2-cancel,
.swal2-upstairs-cancel {
  background-color: var(--color-primary-light, #F9F8F6) !important;  /* --color-primary-light */
  color: var(--text-secondary, #7B7874) !important;                  /* --text-secondary */
  border: 1px solid var(--border-color, #EAE9E8) !important;         /* --border-color */
  border-radius: 50px !important;                       /* --radius-btn */
  padding: 10px 28px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background-color 0.3s ease,
              transform 0.3s ease !important;
}

.swal2-cancel:hover,
.swal2-upstairs-cancel:hover {
  background-color: var(--border-color, #EAE9E8) !important;         /* --border-color */
  transform: translateY(-1px) !important;
}

.swal2-cancel:focus,
.swal2-upstairs-cancel:focus {
  box-shadow: 0 0 0 3px rgba(170, 145, 119, 0.2) !important;
  outline: none !important;
}

/* ============================================================
   拒絕按鈕（危險紅）
   ============================================================ */
.swal2-deny {
  background-color: var(--color-danger, #dc3545) !important;  /* --color-danger */
  color: var(--bg-surface, #FFFFFF) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 10px 28px !important;
  font-weight: 500;
  transition: background-color 0.3s ease,
              transform 0.3s ease !important;
}

.swal2-deny:hover {
  background-color: #b02a37 !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   圖示（Icon）顏色對齊品牌語義
   ============================================================ */

/* 成功 — 綠色 */
.swal2-icon.swal2-success {
  border-color: var(--color-success, #28a745) !important;  /* --color-success */
  color: var(--color-success, #28a745) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(40, 167, 69, 0.3) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--color-success, #28a745) !important;
}

/* 警告 — 黃色 */
.swal2-icon.swal2-warning {
  border-color: var(--color-warning, #ffc107) !important;  /* --color-warning */
  color: var(--color-warning, #ffc107) !important;
}

/* 錯誤 — 紅色 */
.swal2-icon.swal2-error {
  border-color: var(--color-danger, #dc3545) !important;   /* --color-danger */
  color: var(--color-danger, #dc3545) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--color-danger, #dc3545) !important;
}

/* 資訊 — 品牌主色 */
.swal2-icon.swal2-info {
  border-color: var(--color-primary, #AA9177) !important;  /* --color-primary */
  color: var(--color-primary, #AA9177) !important;
}

/* 問題 — 品牌主色 */
.swal2-icon.swal2-question {
  border-color: var(--color-primary, #AA9177) !important;
  color: var(--color-primary, #AA9177) !important;
}

/* ============================================================
   Backdrop 遮罩（輕量半透明）
   ============================================================ */
.swal2-backdrop-show {
  background: var(--swal-backdrop, rgba(60, 58, 56, 0.4)) !important;  /* 以品牌深色為基底 */
}

/* ============================================================
   輸入框（若使用 input 類型）
   ============================================================ */
.swal2-input,
.swal2-textarea,
.swal2-select {
  border: 1px solid var(--border-color, #EAE9E8) !important;
  border-radius: 10px !important;
  color: var(--text-primary, #3C3A38) !important;
  font-family: 'Noto Sans TC', 'Inter', sans-serif;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--color-primary, #AA9177) !important;
  box-shadow: 0 0 0 3px rgba(170, 145, 119, 0.2) !important;
  outline: none;
}

/* ============================================================
   進度條（timerProgressBar）
   ============================================================ */
.swal2-timer-progress-bar {
  background: rgba(170, 145, 119, 0.6) !important;     /* --color-primary */
}

/* ============================================================
   RWD — 手機版
   ============================================================ */
@media (max-width: 768px) {
  .swal2-popup {
    padding: 24px 20px 20px;
    border-radius: 12px;
    width: calc(100% - 32px) !important;
    max-width: 360px;
  }

  .swal2-title {
    font-size: 1.1rem;
  }

  .swal2-html-container {
    font-size: 0.9rem;
  }

  /* 手機版按鈕全寬，符合 44px 最小點擊區域 */
  .swal2-actions {
    flex-direction: column;
    gap: 8px;
  }

  .swal2-confirm,
  .swal2-cancel,
  .swal2-deny,
  .swal2-upstairs-confirm,
  .swal2-upstairs-cancel {
    width: 100% !important;
    min-height: 44px !important;                        /* 手機最小點擊區域 */
    justify-content: center;
  }
}