/* public/css/components/coupon.css */
/* 優惠券組件 - 完整整合版 */

/* ==================== 基礎卡片樣式 (所有頁面共用) ==================== */

.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 基礎優惠券卡片 */
.coupon-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  border: 1px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.coupon-card:hover,
.coupon-card:focus-within {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* 選中狀態 (購物車/結帳頁使用) */
.coupon-card.selected {
  border-color: var(--color-primary);
  background: #3b82f608;
}

/* 左側折扣區域 */
.coupon-left {
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  border-bottom: 2px dashed var(--color-border);
}

.coupon-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-white);
}

.discount-number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.discount-unit {
  font-size: 14px;
  margin-top: 0.25rem;
  opacity: 0.9;
}

/* 右側資訊區域 */
.coupon-right {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
}

.coupon-right .coupon-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.coupon-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

.coupon-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.condition-tag {
  font-size: 11px;
  padding: 0.25rem 0.5rem;
  background: var(--color-bg-subtle);
  border-radius: 4px;
  color: var(--color-text-secondary);
}

.coupon-expiry {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

/* ==================== 會員中心專用 (三欄版本) ==================== */

/* 三欄版本:左側折扣 + 中間資訊 + 右側操作 */
.coupon-card--user {
  grid-template-columns: 120px 1fr 150px;
}

/* 操作區域 (會員中心專用) */
.coupon-action-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 0.75rem;
  border-left: 2px dashed var(--color-border);
  background: var(--color-bg-subtle);
}

.coupon-code-display {
  text-align: center;
  width: 100%;
}

.coupon-code-display small {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.coupon-code {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 1px;
}

/* ==================== 購物車/結帳頁專用 ==================== */

/* 優惠券選擇區域 */
.coupon-section {
  margin: 1rem 0;
}

/* 優惠碼輸入表單 */
.coupon-code-form {
  margin-bottom: 0.5rem;
}

.coupon-input-row {
  display: flex;
}

.coupon-code-input {
  flex: 1;
  padding: 0.75rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-black);
  border-right: none;
  font-size: 14px;
  color: var(--color-text);
  outline: none;
  transition: all 0.3s;
}

.coupon-code-input::placeholder {
  color: var(--color-text-muted);
}

.coupon-code-input:focus {
  background: var(--color-white);
  border-color: var(--color-text);
}

.btn-coupon-apply {
  padding: 0.75rem 1.25rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
}

.btn-coupon-apply:hover,
.btn-coupon-apply:focus {
  background: #555;
  border-color: #555;
}

.btn-coupon-apply:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* 選擇優惠券按鈕 */
.btn-coupon {
  width: 100%;
  padding: 0.75rem;
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-black);
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-coupon:hover,
.btn-coupon:focus {
  background: var(--color-white);
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn-coupon:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* 已選擇的優惠券顯示 */
.selected-coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-primary);
}

.coupon-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.coupon-info .coupon-name {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
}

.coupon-info .coupon-discount {
  font-size: 15px;
  color: var(--color-primary);
  font-weight: 600;
}

/* 刪除優惠券按鈕 */
.btn-remove-coupon {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.5rem;
  font-size: 18px;
  transition: all 0.3s;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove-coupon:hover,
.btn-remove-coupon:focus {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.btn-remove-coupon:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* ==================== Desktop: 1025px 以上 ==================== */
/* (保持預設樣式) */

/* ==================== Laptop: 769px - 1024px ==================== */
@media (max-width: 1024px) {
  .coupon-card {
    grid-template-columns: 110px 1fr;
  }

  .coupon-card--user {
    grid-template-columns: 110px 1fr 140px;
  }

  .coupon-left {
    padding: 1.25rem 0.875rem;
  }

  .discount-number {
    font-size: 28px;
  }

  .discount-unit {
    font-size: 13px;
  }

  .coupon-right {
    padding: 0.875rem 1.125rem;
  }

  .coupon-action-area {
    padding: 0.875rem;
  }
}

/* ==================== Tablet: 481px - 768px ==================== */
@media (max-width: 768px) {
  .coupon-card {
    grid-template-columns: 100px 1fr;
  }

  /* 會員中心版本改為兩欄 */
  .coupon-card--user {
    grid-template-columns: 100px 1fr;
  }

  /* 操作區域移到底部 */
  .coupon-card--user .coupon-action-area {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 2px dashed var(--color-border);
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
  }

  .coupon-card--user .coupon-code-display {
    text-align: left;
  }

  .coupon-left {
    padding: 1.25rem 0.75rem;
  }

  .discount-number {
    font-size: 26px;
  }

  .discount-unit {
    font-size: 13px;
  }

  .coupon-right {
    padding: 1rem;
  }

  /* 選擇按鈕 */
  .btn-coupon {
    padding: 0.625rem;
    font-size: 13px;
  }

  /* 優惠碼輸入 */
  .coupon-code-input {
    padding: 0.625rem;
    font-size: 16px; /* NOTE: <16px 會觸發 iOS focus 自動縮放 */
  }

  .btn-coupon-apply {
    padding: 0.625rem 1rem;
    font-size: 13px;
  }

  /* 已選擇優惠券 */
  .selected-coupon {
    padding: 0.625rem 0.875rem;
  }

  .coupon-info .coupon-name {
    font-size: 12px;
  }

  .coupon-info .coupon-discount {
    font-size: 14px;
  }
}

/* ==================== Mobile: 480px 以下 ==================== */
@media (max-width: 480px) {
  .coupon-card {
    grid-template-columns: 80px 1fr;
  }

  .coupon-card--user {
    grid-template-columns: 80px 1fr;
  }

  .coupon-left {
    padding: 1rem 0.5rem;
  }

  .discount-number {
    font-size: 22px;
  }

  .discount-unit {
    font-size: 11px;
  }

  .coupon-right {
    padding: 0.75rem 0.875rem;
  }

  .coupon-right .coupon-name {
    font-size: 14px;
  }

  .coupon-desc {
    font-size: 12px;
  }

  .condition-tag {
    font-size: 10px;
    padding: 0.2rem 0.4rem;
  }

  .coupon-expiry {
    font-size: 11px;
  }

  /* 操作區域 */
  .coupon-action-area {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .coupon-code {
    font-size: 11px;
    padding: 0.375rem 0.5rem;
  }

  /* 按鈕 */
  .btn-coupon {
    padding: 0.5rem;
    font-size: 12px;
  }

  .coupon-code-input {
    padding: 0.5rem;
    font-size: 16px; /* NOTE: <16px 會觸發 iOS focus 自動縮放 */
  }

  .btn-coupon-apply {
    padding: 0.5rem 0.75rem;
    font-size: 12px;
  }

  .selected-coupon {
    padding: 0.5rem 0.75rem;
  }

  .coupon-info .coupon-name {
    font-size: 11px;
  }

  .coupon-info .coupon-discount {
    font-size: 13px;
  }

  .btn-remove-coupon {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}

/* ==================== 無障礙設計 ==================== */
.coupon-card:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.coupon-card[role="button"] {
  cursor: pointer;
}

/* 鍵盤導航支援 */
.coupon-card:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}