/**
 * Prada Design Tokens System
 * 高端電商 Modal 設計系統 - 設計 Token
 *
 * 設計理念：奢華、極簡、優雅、專業
 * 品牌精神：義大利精品、高端時尚、工藝細節
 *
 * @version 1.0.0
 * @author Naily E-Commerce Team
 */

:root {
  /* ========================================
     色彩系統 - 使用 Naily 設計系統現有色彩
     ======================================== */

  /* 主色 - 引用 Naily 品牌色 */
  --prada-primary: var(--naily-primary);           /* #BE1F48 深紅色 */
  --prada-primary-light: var(--naily-primary-300); /* #fca5a5 淺紅色 */
  --prada-primary-dark: var(--naily-primary-700);  /* #8B1538 深紅色 */

  /* 輔助色 */
  --prada-accent: var(--naily-accent);             /* #D8626E 粉紅色 */
  --prada-accent-light: var(--naily-accent-light); /* #FF6B8A 亮粉紅 */
  --prada-gold: var(--naily-gold);                 /* #f59e0b 金色 */
  --prada-gold-light: var(--naily-gold-light);     /* #fbbf24 淺金色 */

  /* 黑白色 */
  --prada-white: var(--naily-white);               /* #ffffff */
  --prada-black: var(--naily-black);               /* #000000 */

  /* 灰階系統 - 引用 Naily 灰階 */
  --prada-gray-50: var(--naily-gray-50);
  --prada-gray-100: var(--naily-gray-100);
  --prada-gray-200: var(--naily-gray-200);
  --prada-gray-300: var(--naily-gray-300);
  --prada-gray-400: var(--naily-gray-400);
  --prada-gray-500: var(--naily-gray-500);
  --prada-gray-600: var(--naily-gray-600);
  --prada-gray-700: var(--naily-gray-700);
  --prada-gray-800: var(--naily-gray-800);
  --prada-gray-900: var(--naily-gray-900);

  /* 功能色 - 引用 Naily 語義色 */
  --prada-success: var(--naily-success);           /* #10b981 */
  --prada-success-light: var(--naily-success-light);
  --prada-warning: var(--naily-warning);           /* #f59e0b */
  --prada-warning-light: var(--naily-warning-light);
  --prada-error: var(--naily-error);               /* #ef4444 */
  --prada-error-light: var(--naily-error-light);
  --prada-info: var(--naily-info);                 /* #3b82f6 */
  --prada-info-light: var(--naily-info-light);

  /* ========================================
     字體系統 - 引用 Naily 設計系統
     ======================================== */

  /* 字體家族 */
  --prada-font-primary: var(--naily-font-primary);
  --prada-font-heading: var(--naily-font-heading);
  --prada-font-mono: var(--naily-font-mono);

  /* 字體大小 - 引用 Naily 系統 */
  --prada-text-xs: var(--naily-text-xs);       /* 12px */
  --prada-text-sm: var(--naily-text-sm);       /* 14px */
  --prada-text-base: var(--naily-text-base);   /* 16px */
  --prada-text-lg: var(--naily-text-lg);       /* 18px */
  --prada-text-xl: var(--naily-text-xl);       /* 20px */
  --prada-text-2xl: var(--naily-text-2xl);     /* 24px */
  --prada-text-3xl: var(--naily-text-3xl);     /* 30px */
  --prada-text-4xl: var(--naily-text-4xl);     /* 36px */

  /* 字重 */
  --prada-font-light: var(--naily-font-light);
  --prada-font-normal: var(--naily-font-normal);
  --prada-font-medium: var(--naily-font-medium);
  --prada-font-semibold: var(--naily-font-semibold);
  --prada-font-bold: var(--naily-font-bold);

  /* 行高 */
  --prada-leading-none: var(--naily-leading-none);
  --prada-leading-tight: var(--naily-leading-tight);
  --prada-leading-snug: var(--naily-leading-snug);
  --prada-leading-normal: var(--naily-leading-normal);
  --prada-leading-relaxed: var(--naily-leading-relaxed);
  --prada-leading-loose: var(--naily-leading-loose);

  /* ========================================
     間距系統 - 引用 Naily 設計系統（4px 基準）
     ======================================== */
  --prada-space-0: var(--naily-space-0);
  --prada-space-px: var(--naily-space-px);
  --prada-space-1: var(--naily-space-1);       /* 4px */
  --prada-space-2: var(--naily-space-2);       /* 8px */
  --prada-space-3: var(--naily-space-3);       /* 12px */
  --prada-space-4: var(--naily-space-4);       /* 16px */
  --prada-space-5: var(--naily-space-5);       /* 20px */
  --prada-space-6: var(--naily-space-6);       /* 24px */
  --prada-space-8: var(--naily-space-8);       /* 32px */
  --prada-space-10: var(--naily-space-10);     /* 40px */
  --prada-space-12: var(--naily-space-12);     /* 48px */
  --prada-space-16: var(--naily-space-16);     /* 64px */
  --prada-space-20: var(--naily-space-20);     /* 80px */
  --prada-space-24: var(--naily-space-24);     /* 96px */

  /* ========================================
     圓角系統 - 引用 Naily 設計系統
     ======================================== */
  --prada-radius-none: var(--naily-radius-none);
  --prada-radius-sm: var(--naily-radius-sm);   /* 2px */
  --prada-radius-md: var(--naily-radius-md);   /* 6px */
  --prada-radius-lg: var(--naily-radius-lg);   /* 8px */
  --prada-radius-xl: var(--naily-radius-xl);   /* 12px */
  --prada-radius-2xl: var(--naily-radius-2xl); /* 16px */
  --prada-radius-full: var(--naily-radius-full);

  /* ========================================
     陰影系統 - 引用 Naily 設計系統
     ======================================== */

  /* 標準陰影 */
  --prada-shadow-xs: var(--naily-shadow-xs);
  --prada-shadow-sm: var(--naily-shadow-sm);
  --prada-shadow-md: var(--naily-shadow-md);
  --prada-shadow-lg: var(--naily-shadow-lg);
  --prada-shadow-xl: var(--naily-shadow-xl);
  --prada-shadow-2xl: var(--naily-shadow-2xl);

  /* 特殊陰影 - 使用 Naily 的著色陰影 */
  --prada-shadow-primary: var(--naily-shadow-primary);   /* 主色陰影 */
  --prada-shadow-accent: var(--naily-shadow-accent);     /* 輔助色陰影 */
  --prada-shadow-gold: var(--naily-shadow-warning);      /* 金色陰影 (使用 warning) */
  --prada-shadow-inner: var(--naily-shadow-inner);

  /* ========================================
     邊框系統 - 引用 Naily 設計系統
     ======================================== */
  --prada-border-width-thin: var(--naily-border);
  --prada-border-width-medium: var(--naily-border-2);
  --prada-border-width-thick: var(--naily-border-4);

  --prada-border-light: var(--naily-border) solid var(--naily-border-primary);
  --prada-border-normal: var(--naily-border) solid var(--naily-border-secondary);
  --prada-border-accent: var(--naily-border) solid var(--naily-border-accent);
  --prada-border-gold: var(--naily-border) solid var(--prada-gold);

  /* ========================================
     動畫系統 - 引用 Naily 設計系統
     ======================================== */

  /* 時長 */
  --prada-duration-instant: var(--naily-duration-100);
  --prada-duration-fast: var(--naily-duration-150);
  --prada-duration-normal: var(--naily-duration-300);
  --prada-duration-slow: var(--naily-duration-500);
  --prada-duration-slower: var(--naily-duration-700);

  /* 緩動函數 */
  --prada-ease-linear: var(--naily-ease-linear);
  --prada-ease-in: var(--naily-ease-in);
  --prada-ease-out: var(--naily-ease-out);
  --prada-ease-in-out: var(--naily-ease-in-out);
  --prada-ease-luxury: var(--naily-ease-spring);

  /* ========================================
     Modal 專用 Token
     ======================================== */

  /* 尺寸 */
  --prada-modal-xs: 360px;
  --prada-modal-sm: 440px;
  --prada-modal-md: 520px;
  --prada-modal-lg: 680px;
  --prada-modal-xl: 920px;
  --prada-modal-2xl: 1200px;

  /* 間距 */
  --prada-modal-padding-sm: var(--prada-space-6);   /* 24px */
  --prada-modal-padding-md: var(--prada-space-8);   /* 32px */
  --prada-modal-padding-lg: var(--prada-space-12);  /* 48px */
  --prada-modal-padding-xl: var(--prada-space-16);  /* 64px */

  /* Z-Index - 引用統一 Z-Index 系統 */
  --prada-modal-z-backdrop: var(--z-modal-backdrop);
  --prada-modal-z-base: var(--z-modal);
  --prada-modal-z-dialog: var(--z-modal-dialog);
  --prada-modal-z-content: var(--z-modal-content);
  --prada-modal-z-header: var(--z-modal-header);
  --prada-modal-z-close: var(--z-modal-close-btn);

  /* ========================================
     響應式斷點 - 引用 Naily 設計系統
     ======================================== */
  --prada-breakpoint-xs: var(--naily-screen-xs);
  --prada-breakpoint-sm: var(--naily-screen-sm);
  --prada-breakpoint-md: var(--naily-screen-md);
  --prada-breakpoint-lg: var(--naily-screen-lg);
  --prada-breakpoint-xl: var(--naily-screen-xl);
  --prada-breakpoint-2xl: var(--naily-screen-2xl);

  /* ========================================
     不透明度
     ======================================== */
  --prada-opacity-0: 0;
  --prada-opacity-5: 0.05;
  --prada-opacity-10: 0.1;
  --prada-opacity-20: 0.2;
  --prada-opacity-30: 0.3;
  --prada-opacity-40: 0.4;
  --prada-opacity-50: 0.5;
  --prada-opacity-60: 0.6;
  --prada-opacity-70: 0.7;
  --prada-opacity-80: 0.8;
  --prada-opacity-90: 0.9;
  --prada-opacity-100: 1;

  /* ========================================
     模糊效果
     ======================================== */
  --prada-blur-sm: 4px;
  --prada-blur-md: 8px;
  --prada-blur-lg: 16px;
  --prada-blur-xl: 24px;
}

/* ========================================
   深色模式支援
   注意：深色模式由 Naily 設計系統統一管理
   ======================================== */

/* ========================================
   減少動畫偏好支援
   注意：動畫偏好由 Naily 設計系統統一管理
   ======================================== */

/**
 * Prada Modal Base Styles
 * 基礎 Modal 樣式系統
 *
 * 設計原則：
 * - 使用 Naily 品牌色系（深紅色主題）
 * - 極簡優雅的設計語言
 * - 完美的響應式體驗
 * - 無障礙支援
 *
 * @version 1.0.0
 */

/* ========================================
   Modal Backdrop - 背景遮罩
   ======================================== */

.prada-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: var(--prada-modal-z-backdrop);
  opacity: 0;
  pointer-events: none; /* 關鍵修復：opacity 為 0 時不阻擋點擊 */
  transition: opacity var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-backdrop.show {
  opacity: 1;
  pointer-events: auto; /* show 時才可以點擊 */
}

/* ========================================
   Modal Container - Modal 容器
   ======================================== */

.prada-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--prada-modal-z-base);
  overflow: hidden;
  outline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal.show {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
   Modal Dialog - 對話框
   ======================================== */

.prada-modal-dialog {
  position: relative;
  width: auto;
  max-width: var(--prada-modal-md);
  min-width: 400px; /* 預設最小寬度 */
  margin: var(--prada-space-4);
  z-index: var(--prada-modal-z-dialog);
  transform: scale(0.9) translateY(-20px);
  transition: transform var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal.show .prada-modal-dialog {
  transform: scale(1) translateY(0);
}

/* 尺寸變體 */
.prada-modal-dialog-xs {
  max-width: var(--prada-modal-xs);
  min-width: 280px; /* 超小型 modal 最小寬度 */
}

.prada-modal-dialog-sm {
  max-width: var(--prada-modal-sm);
  min-width: 360px; /* 小型 modal 最小寬度 */
}

.prada-modal-dialog-md {
  max-width: var(--prada-modal-md);
  min-width: 400px; /* 中型 modal 最小寬度 */
}

.prada-modal-dialog-lg {
  max-width: var(--prada-modal-lg);
  min-width: 500px; /* 大型 modal 最小寬度 */
}

.prada-modal-dialog-xl {
  max-width: var(--prada-modal-xl);
  min-width: 700px; /* 特大型 modal 最小寬度 */
}

.prada-modal-dialog-2xl {
  max-width: var(--prada-modal-2xl);
  min-width: 900px; /* 超大型 modal 最小寬度 */
}

/* 置中對齊 */
.prada-modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - (var(--prada-space-4) * 2));
}

/* ========================================
   Modal Content - 內容區域
   ======================================== */

.prada-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--prada-white);
  background-clip: padding-box;
  border: none;
  border-radius: var(--prada-radius-lg);
  box-shadow: var(--prada-shadow-2xl);
  outline: 0;
  z-index: var(--prada-modal-z-content);
  overflow: hidden;
}

/* ========================================
   Modal Header - 標題列
   ======================================== */

.prada-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--prada-modal-padding-md);
  border-bottom: var(--prada-border-light);
  z-index: var(--prada-modal-z-header);
  position: relative;
}

/* 無邊框變體 */
.prada-modal-header-borderless {
  border-bottom: none;
}

/* ========================================
   Modal Title - 標題
   ======================================== */

.prada-modal-title {
  margin: 0;
  font-size: var(--prada-text-xl);
  font-weight: var(--prada-font-semibold);
  line-height: var(--prada-leading-tight);
  color: var(--naily-text-primary);
  font-family: var(--prada-font-heading);
}

/* ========================================
   Modal Close Button - 關閉按鈕
   ======================================== */

.prada-modal-close {
  position: absolute !important;
  top: var(--prada-space-4) !important;
  right: var(--prada-space-4) !important;
  left: auto !important;
  left: initial !important;  /* 明確取消 left 定位，防止 CSS 污染 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  z-index: var(--prada-modal-z-close);
  color: var(--naily-text-secondary);
}

.prada-modal-close:hover {
  background-color: var(--naily-gray-100);
  color: var(--naily-text-primary);
}

.prada-modal-close:active {
  background-color: var(--naily-gray-200);
}

.prada-modal-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

/* 關閉按鈕圖示 */
.prada-modal-close::before,
.prada-modal-close::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
}

.prada-modal-close::before {
  transform: rotate(45deg);
}

.prada-modal-close::after {
  transform: rotate(-45deg);
}

/* ========================================
   Modal Body - 內容主體
   ======================================== */

.prada-modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--prada-modal-padding-md);
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

/* 滾動優化 */
.prada-modal-body::-webkit-scrollbar {
  width: 8px;
}

.prada-modal-body::-webkit-scrollbar-track {
  background: var(--naily-gray-100);
  border-radius: var(--prada-radius-sm);
}

.prada-modal-body::-webkit-scrollbar-thumb {
  background: var(--naily-gray-400);
  border-radius: var(--prada-radius-sm);
}

.prada-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--naily-gray-500);
}

/* ========================================
   Modal Footer - 底部操作區
   ======================================== */

.prada-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--prada-space-3);
  padding: var(--prada-modal-padding-md);
  border-top: var(--prada-border-light);
}

/* 無邊框變體 */
.prada-modal-footer-borderless {
  border-top: none;
}

/* 置中對齊 */
.prada-modal-footer-centered {
  justify-content: center;
}

/* 間距平均分配 */
.prada-modal-footer-between {
  justify-content: space-between;
}

/* ========================================
   Modal Buttons - 按鈕樣式
   ======================================== */

.prada-modal-btn {
  padding: var(--prada-space-2) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-medium);
  line-height: var(--prada-leading-normal);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  outline: none;
}

/* 主要按鈕 */
.prada-modal-btn-primary {
  background-color: var(--prada-primary);
  color: var(--prada-white);
}

.prada-modal-btn-primary:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-btn-primary:active {
  background-color: var(--naily-primary-800);
}

/* 次要按鈕 */
.prada-modal-btn-secondary {
  background-color: var(--naily-gray-100);
  color: var(--naily-text-primary);
}

.prada-modal-btn-secondary:hover {
  background-color: var(--naily-gray-200);
}

.prada-modal-btn-secondary:active {
  background-color: var(--naily-gray-300);
}

/* 金色強調按鈕 */
.prada-modal-btn-gold {
  background-color: var(--prada-gold);
  color: var(--prada-white);
}

.prada-modal-btn-gold:hover {
  background-color: var(--naily-warning-dark);
  box-shadow: var(--prada-shadow-gold);
}

/* 危險操作按鈕 */
.prada-modal-btn-danger {
  background-color: var(--prada-error);
  color: var(--prada-white);
}

.prada-modal-btn-danger:hover {
  background-color: var(--prada-error-light);
  box-shadow: var(--naily-shadow-error);
}

/* 按鈕焦點狀態 */
.prada-modal-btn:focus {
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

/* ========================================
   響應式設計
   ======================================== */

/* 平板 */
@media (max-width: 768px) {
  .prada-modal-dialog {
    margin: var(--prada-space-3);
    max-width: calc(100% - var(--prada-space-6));
    min-width: 320px; /* 平板最小寬度 */
  }

  /* 尺寸變體在平板上的最小寬度調整 */
  .prada-modal-dialog-xs {
    min-width: 280px;
  }

  .prada-modal-dialog-sm {
    min-width: 320px;
  }

  .prada-modal-dialog-md {
    min-width: 360px;
  }

  .prada-modal-dialog-lg {
    min-width: 400px;
  }

  .prada-modal-dialog-xl {
    min-width: 450px;
  }

  .prada-modal-dialog-2xl {
    min-width: 500px;
  }

  .prada-modal-header,
  .prada-modal-body,
  .prada-modal-footer {
    padding: var(--prada-modal-padding-sm);
  }

  .prada-modal-title {
    font-size: var(--prada-text-lg);
  }

  .prada-modal-body {
    max-height: calc(100vh - 160px);
  }
}

/* 手機 */
@media (max-width: 480px) {
  .prada-modal-dialog {
    margin: var(--prada-space-2);
    max-width: calc(100% - var(--prada-space-4));
    min-width: 280px; /* 手機最小寬度 */
  }

  /* 所有尺寸變體在手機上統一最小寬度 */
  .prada-modal-dialog-xs,
  .prada-modal-dialog-sm,
  .prada-modal-dialog-md,
  .prada-modal-dialog-lg,
  .prada-modal-dialog-xl,
  .prada-modal-dialog-2xl {
    min-width: 280px;
  }

  .prada-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .prada-modal-btn {
    width: 100%;
  }

  .prada-modal-body {
    max-height: calc(100vh - 140px);
  }
}

/* ========================================
   無障礙支援
   ======================================== */

/* 鍵盤導航焦點指示 */
.prada-modal *:focus-visible {
  outline: 2px solid var(--prada-primary);
  outline-offset: 2px;
}

/* 減少動畫偏好支援 - 由 Naily 系統統一處理 */
@media (prefers-reduced-motion: reduce) {
  .prada-modal,
  .prada-modal-backdrop,
  .prada-modal-dialog,
  .prada-modal-btn {
    transition: none;
  }
}

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
  .prada-modal-content {
    border: 2px solid var(--naily-gray-900);
  }

  .prada-modal-header,
  .prada-modal-footer {
    border-width: 2px;
  }
}

/* ========================================
   滾動鎖定輔助類
   ======================================== */

/* 當 Modal 開啟時，body 會被加上此類 */
body.prada-modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ========================================
   動畫效果
   ======================================== */

/* ========================================
   載入狀態（通用）
   ======================================== */

.prada-modal .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border-radius: inherit;
}

.prada-modal .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border: 3px solid var(--naily-gray-200, #e5e7eb);
  border-top-color: #BE1F48;
  border-top-color: var(--prada-primary, #BE1F48);
  border-radius: 50%;
  animation: prada-spin 0.8s linear infinite;
}

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

@keyframes prada-modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes prada-modal-slide-up {
  from {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* 進場動畫 */
.prada-modal-animate-in .prada-modal-backdrop {
  animation: prada-modal-fade-in var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-animate-in .prada-modal-dialog {
  animation: prada-modal-slide-up var(--prada-duration-normal) var(--prada-ease-out);
}

/**
 * Prada Modal - Address Manager (地址管理器)
 * 用於管理收件地址（新增、編輯、選擇）
 *
 * 設計特點：
 * - 卡片式地址列表
 * - 預設地址標記
 * - 快速編輯功能
 * - 地址驗證
 *
 * @version 1.0.0
 */

/* ========================================
   地址管理器 Modal - 尺寸與佈局
   ======================================== */

.prada-modal-address .prada-modal-dialog {
  max-width: var(--prada-modal-lg); /* 680px */
}

/* ========================================
   Header 設計
   ======================================== */

.prada-modal-address .prada-modal-header {
  padding: var(--prada-space-6) var(--prada-modal-padding-md);
  border-bottom: var(--prada-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prada-modal-address .prada-modal-title {
  font-size: var(--prada-text-xl);
  font-weight: var(--prada-font-bold);
  color: var(--naily-text-primary);
}

.prada-modal-address .btn-add-address {
  padding: var(--prada-space-2) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
}

.prada-modal-address .btn-add-address:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

/* ========================================
   Body - 地址列表或表單
   ======================================== */

.prada-modal-address .prada-modal-body {
  padding: var(--prada-space-5) var(--prada-modal-padding-md);
  max-height: 500px;
  overflow-y: auto;
}

/* 地址列表視圖 */
.prada-modal-address .address-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--prada-space-4);
  gap: var(--prada-space-4);
}

/* 地址卡片 */
.prada-modal-address .address-card {
  position: relative;
  padding: var(--prada-space-5);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-lg);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-address .address-card:hover {
  border-color: var(--prada-primary);
  box-shadow: var(--prada-shadow-sm);
}

.prada-modal-address .address-card.selected {
  border-color: var(--prada-primary);
  background-color: rgba(190, 31, 72, 0.02);
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

/* 預設標籤 */
.prada-modal-address .address-default-badge {
  position: absolute;
  top: var(--prada-space-3);
  right: var(--prada-space-3);
  padding: var(--prada-space-1) var(--prada-space-2);
  font-size: var(--prada-text-xs);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-gold);
  border-radius: var(--prada-radius-sm);
}

/* 地址資訊 */
.prada-modal-address .address-header {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
  margin-bottom: var(--prada-space-3);
}

.prada-modal-address .address-type-icon {
  width: 20px;
  height: 20px;
  color: var(--prada-primary);
}

.prada-modal-address .address-name {
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
}

.prada-modal-address .address-phone {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  margin-bottom: var(--prada-space-2);
}

.prada-modal-address .address-details {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
  margin-bottom: var(--prada-space-4);
}

/* 地址操作按鈕 */
.prada-modal-address .address-actions {
  display: flex;
  gap: var(--prada-space-2);
}

.prada-modal-address .address-action-btn {
  flex: 1 1;
  padding: var(--prada-space-2) var(--prada-space-3);
  font-size: var(--prada-text-xs);
  font-weight: var(--prada-font-medium);
  background-color: var(--naily-bg-secondary);
  color: var(--naily-text-primary);
  border: none;
  border-radius: var(--prada-radius-sm);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-address .address-action-btn:hover {
  background-color: var(--naily-bg-active);
}

.prada-modal-address .address-action-btn.danger {
  color: var(--prada-error);
}

.prada-modal-address .address-action-btn.danger:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

/* 空狀態 */
.prada-modal-address .address-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--prada-space-16);
  text-align: center;
}

.prada-modal-address .empty-icon {
  width: 80px;
  height: 80px;
  color: var(--naily-gray-300);
  margin-bottom: var(--prada-space-4);
}

.prada-modal-address .empty-text {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  margin-bottom: var(--prada-space-4);
}

/* 地址表單視圖 */
.prada-modal-address .address-form {
  display: none;
}

.prada-modal-address .address-form.active {
  display: block;
}

.prada-modal-address .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--prada-space-3);
  gap: var(--prada-space-3);
  margin-bottom: var(--prada-space-4);
}

.prada-modal-address .form-group {
  margin-bottom: var(--prada-space-4);
}

.prada-modal-address .form-group.full-width {
  grid-column: 1 / -1;
}

.prada-modal-address .form-label {
  display: block;
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
  margin-bottom: var(--prada-space-2);
}

.prada-modal-address .form-label.required::after {
  content: '*';
  color: var(--prada-error);
  margin-left: var(--prada-space-1);
}

.prada-modal-address .form-input,
.prada-modal-address .form-select,
.prada-modal-address .form-textarea {
  width: 100%;
  padding: var(--prada-space-3) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  color: var(--naily-text-primary);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  outline: none;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-address .form-input:focus,
.prada-modal-address .form-select:focus,
.prada-modal-address .form-textarea:focus {
  border-color: var(--prada-primary);
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

.prada-modal-address .form-input.is-invalid,
.prada-modal-address .form-select.is-invalid {
  border-color: var(--prada-error);
}

.prada-modal-address .form-error {
  font-size: var(--prada-text-xs);
  color: var(--prada-error);
  margin-top: var(--prada-space-1);
}

.prada-modal-address .form-hint {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  margin-top: var(--prada-space-1);
}

/* 地址類型選擇 */
.prada-modal-address .address-type-group {
  display: flex;
  gap: var(--prada-space-3);
  margin-bottom: var(--prada-space-4);
}

.prada-modal-address .address-type-option {
  flex: 1 1;
  padding: var(--prada-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--prada-space-2);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-address .address-type-option:hover {
  border-color: var(--prada-primary);
  background-color: rgba(190, 31, 72, 0.02);
}

.prada-modal-address .address-type-option.selected {
  border-color: var(--prada-primary);
  background-color: rgba(190, 31, 72, 0.05);
}

.prada-modal-address .address-type-icon {
  width: 20px;
  height: 20px;
}

.prada-modal-address .address-type-label {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
}

/* 設為預設 Checkbox */
.prada-modal-address .set-default-checkbox {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
  margin-top: var(--prada-space-4);
  padding: var(--prada-space-3);
  background-color: var(--naily-bg-secondary);
  border-radius: var(--prada-radius-md);
}

.prada-modal-address .set-default-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--prada-primary);
}

.prada-modal-address .set-default-checkbox label {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-primary);
  cursor: pointer;
}

/* ========================================
   Footer - 操作按鈕
   ======================================== */

.prada-modal-address .prada-modal-footer {
  padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
  border-top: var(--prada-border-light);
  display: flex;
  justify-content: space-between;
}

/* 列表視圖 Footer */
.prada-modal-address .footer-list-view {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.prada-modal-address .btn-confirm-address {
  padding: var(--prada-space-3) var(--prada-space-8);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-address .btn-confirm-address:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-address .btn-confirm-address:disabled {
  background-color: var(--naily-gray-300);
  cursor: not-allowed;
  box-shadow: none;
}

/* 表單視圖 Footer */
.prada-modal-address .footer-form-view {
  width: 100%;
  display: flex;
  gap: var(--prada-space-3);
}

.prada-modal-address .btn-cancel-form {
  padding: var(--prada-space-3) var(--prada-space-5);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-secondary);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-address .btn-cancel-form:hover {
  background-color: var(--naily-bg-hover);
}

.prada-modal-address .btn-save-address {
  flex: 1 1;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-address .btn-save-address:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-address .btn-save-address:disabled {
  background-color: var(--naily-gray-300);
  cursor: not-allowed;
  box-shadow: none;
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 768px) {
  .prada-modal-address .address-list {
    grid-template-columns: 1fr;
  }

  .prada-modal-address .form-row {
    grid-template-columns: 1fr;
  }

  .prada-modal-address .address-type-group {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .prada-modal-address .prada-modal-header,
  .prada-modal-address .prada-modal-body,
  .prada-modal-address .prada-modal-footer {
    padding-left: var(--prada-space-4);
    padding-right: var(--prada-space-4);
  }

  .prada-modal-address .btn-add-address {
    padding: var(--prada-space-2) var(--prada-space-3);
    font-size: var(--prada-text-xs);
  }

  .prada-modal-address .footer-list-view,
  .prada-modal-address .footer-form-view {
    flex-direction: column;
  }

  .prada-modal-address .btn-confirm-address,
  .prada-modal-address .btn-save-address,
  .prada-modal-address .btn-cancel-form {
    width: 100%;
  }
}

/**
 * Prada Modal - Authentication (會員認證)
 * 用於登入、註冊、忘記密碼等會員認證場景
 *
 * 設計特點：
 * - 簡潔優雅的表單設計
 * - 社交登入按鈕組
 * - 品牌色強調（Naily 深紅色）
 * - 完整的表單驗證視覺回饋
 *
 * @version 1.0.0
 */

/* ========================================
   會員認證 Modal - 尺寸與佈局
   ======================================== */

.prada-modal-auth .prada-modal-dialog {
  width: 100%;
  max-width: var(--prada-modal-sm); /* 440px - 預設值 */
}

/* 桌面版：高度由內容決定，JS 控制伸縮動畫期間的 overflow */
.prada-modal-auth .prada-modal-content {
  overflow: hidden;
}

/* 桌面版 - 使用百分比寬度 */
@media (min-width: 769px) {
  .prada-modal-auth .prada-modal-dialog {
    width: 40%;
    max-width: 560px; /* 限制最大寬度 */
    min-width: 440px; /* 確保最小可用寬度 */
  }
}

/* 大螢幕桌面 (>1200px) - 稍微放大 */
@media (min-width: 1200px) {
  .prada-modal-auth .prada-modal-dialog {
    width: 38%;
    max-width: 600px;
  }
}

/* 超大螢幕 (>1600px) - 維持固定最大寬度 */
@media (min-width: 1600px) {
  .prada-modal-auth .prada-modal-dialog {
    width: 35%;
    max-width: 640px;
  }
}

/* ========================================
   Header 設計
   ======================================== */

.prada-modal-auth .prada-modal-header {
  text-align: center;
  padding: var(--prada-space-6) var(--prada-modal-padding-md) var(--prada-space-4);
  border-bottom: none;
}

/* Tab 切換按鈕 */
.prada-modal-auth .auth-tabs {
  display: flex;
  justify-content: center;
  gap: var(--prada-space-2);
  margin: 0 auto;
}

.prada-modal-auth .auth-tab {
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  outline: none;
}

.prada-modal-auth .auth-tab:hover {
  color: var(--prada-primary);
}

.prada-modal-auth .auth-tab.active {
  color: var(--prada-primary);
  font-weight: var(--prada-font-semibold);
  border-bottom-color: var(--prada-primary);
}

.prada-modal-auth .prada-modal-title {
  font-size: var(--prada-text-2xl);
  font-weight: var(--prada-font-bold);
  color: var(--prada-primary);
  margin-bottom: var(--prada-space-2);
}

.prada-modal-auth .prada-modal-subtitle {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  font-weight: var(--prada-font-normal);
}

/* ========================================
   Body - 表單區域
   ======================================== */

.prada-modal-auth .prada-modal-body {
  padding: var(--prada-space-6) var(--prada-modal-padding-md);
}

/* 表單群組 */
.prada-modal-auth .form-group {
  margin-bottom: var(--prada-space-5);
}

.prada-modal-auth .form-label {
  display: block;
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
  margin-bottom: var(--prada-space-2);
}

/* 表單輸入框 */
.prada-modal-auth .form-input {
  width: 100%;
  padding: var(--prada-space-3) var(--prada-space-4);
  font-size: var(--prada-text-base);
  line-height: var(--prada-leading-normal);
  color: var(--naily-text-primary);
  background-color: var(--prada-white);
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-md);
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  outline: none;
}

.prada-modal-auth .form-input::placeholder {
  color: var(--naily-text-muted);
}

.prada-modal-auth .form-input:focus {
  border-color: var(--prada-primary);
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

.prada-modal-auth .form-input:disabled {
  background-color: var(--naily-bg-disabled);
  cursor: not-allowed;
}

/* 表單驗證狀態 */
.prada-modal-auth .form-input.is-invalid {
  border-color: var(--prada-error);
}

.prada-modal-auth .form-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.prada-modal-auth .form-input.is-valid {
  border-color: var(--prada-success);
}

.prada-modal-auth .invalid-feedback,
.prada-modal-auth .valid-feedback {
  display: block;
  font-size: var(--prada-text-xs);
  margin-top: var(--prada-space-1);
}

.prada-modal-auth .invalid-feedback {
  color: var(--prada-error);
}

.prada-modal-auth .valid-feedback {
  color: var(--prada-success);
}

/* 密碼輸入框（帶顯示/隱藏按鈕）*/
.prada-modal-auth .password-wrapper {
  position: relative;
}

.prada-modal-auth .password-toggle {
  position: absolute;
  right: var(--prada-space-3);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--naily-text-secondary);
  cursor: pointer;
  padding: var(--prada-space-2);
  transition: color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-auth .password-toggle:hover {
  color: var(--naily-text-primary);
}

/* 記住我 & 忘記密碼 */
.prada-modal-auth .form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--prada-space-5);
}

.prada-modal-auth .form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
}

.prada-modal-auth .form-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--prada-primary);
}

.prada-modal-auth .form-checkbox label {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  cursor: pointer;
  margin: 0;
}

.prada-modal-auth .form-link {
  font-size: var(--prada-text-sm);
  color: var(--prada-primary);
  text-decoration: none;
  font-weight: var(--prada-font-medium);
  transition: color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-auth .form-link:hover {
  color: var(--prada-primary-dark);
  text-decoration: underline;
}

/* 提交按鈕 */
.prada-modal-auth .btn-submit {
  width: 100%;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  margin-bottom: var(--prada-space-5);
}

.prada-modal-auth .btn-submit:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-auth .btn-submit:active {
  background-color: var(--naily-primary-800);
}

.prada-modal-auth .btn-submit:disabled {
  background-color: var(--naily-gray-300);
  cursor: not-allowed;
  box-shadow: none;
}

/* ========================================
   分隔線（「或」）
   ======================================== */

.prada-modal-auth .divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--prada-space-6) 0;
}

.prada-modal-auth .divider::before,
.prada-modal-auth .divider::after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid var(--naily-gray-200);
}

.prada-modal-auth .divider-text {
  padding: 0 var(--prada-space-4);
  font-size: var(--prada-text-sm);
  color: var(--naily-text-tertiary);
  font-weight: var(--prada-font-normal);
}

/* ========================================
   社交登入按鈕
   ======================================== */

.prada-modal-auth .social-login {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-3);
}

.prada-modal-auth .btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--prada-space-3);
  width: 100%;
  padding: var(--prada-space-3) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-auth .btn-social:hover {
  background-color: var(--naily-bg-hover);
  border-color: var(--naily-gray-400);
}

.prada-modal-auth .btn-social-icon {
  width: 20px;
  height: 20px;
}

/* Google 品牌色 */
.prada-modal-auth .btn-social-google:hover {
  background-color: rgba(66, 133, 244, 0.05);
  border-color: #4285F4;
}

/* Facebook 品牌色 */
.prada-modal-auth .btn-social-facebook:hover {
  background-color: rgba(24, 119, 242, 0.05);
  border-color: #1877F2;
}

/* LINE 品牌色 */
.prada-modal-auth .btn-social-line:hover {
  background-color: rgba(0, 185, 0, 0.05);
  border-color: #00B900;
}

/* Apple 品牌色 */
.prada-modal-auth .btn-social-apple:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-color: var(--prada-black);
}

/* ========================================
   Footer - 註冊提示
   ======================================== */

.prada-modal-auth .prada-modal-footer {
  justify-content: center;
  padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
  border-top: none;
}

.prada-modal-auth .footer-text {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
}

.prada-modal-auth .footer-link {
  color: var(--prada-primary);
  font-weight: var(--prada-font-semibold);
  text-decoration: none;
  margin-left: var(--prada-space-1);
  transition: color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-auth .footer-link:hover {
  color: var(--prada-primary-dark);
  text-decoration: underline;
}

/* ========================================
   載入狀態
   ======================================== */

.prada-modal-auth .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.prada-modal-auth .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--naily-gray-200);
  border-top-color: var(--prada-primary);
  border-radius: 50%;
  animation: prada-spin 0.8s linear infinite;
}

/* ========================================
   Login 專屬樣式
   ======================================== */

/* 登入選項列（記住我 + 忘記密碼）*/
.prada-modal-auth .prada-login-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--prada-space-5);
}

.prada-modal-auth .prada-remember-section {
  display: flex;
  align-items: center;
}

.prada-modal-auth .prada-forgot-password-link {
  font-size: var(--prada-text-sm);
  color: var(--prada-primary);
  text-decoration: none;
  font-weight: var(--prada-font-medium);
  cursor: pointer;
  transition: color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-auth .prada-forgot-password-link:hover {
  color: var(--prada-primary-dark);
  text-decoration: underline;
}

/* 社交登入區塊 */
.prada-modal-auth .prada-social-login-section {
  margin-bottom: var(--prada-space-5);
}

/* 分隔線（已有基礎樣式，這裡是兼容舊類名）*/
.prada-modal-auth .prada-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--prada-space-6) 0;
}

.prada-modal-auth .prada-divider hr {
  flex: 1 1;
  border: none;
  border-top: 1px solid var(--naily-gray-200);
  margin: 0;
}

.prada-modal-auth .prada-divider span {
  padding: 0 var(--prada-space-4);
  font-size: var(--prada-text-sm);
  color: var(--naily-text-tertiary);
  font-weight: var(--prada-font-normal);
}

/* 錯誤訊息區塊 */
.prada-modal-auth .prada-error-zone {
  margin-bottom: var(--prada-space-4);
}

.prada-modal-auth .prada-error-zone .alert {
  padding: var(--prada-space-3) var(--prada-space-4);
  border-radius: var(--prada-radius-md);
  border: 1px solid transparent;
  font-size: var(--prada-text-sm);
}

.prada-modal-auth .prada-error-zone .alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: var(--prada-error);
  color: var(--prada-error);
}

.prada-modal-auth .prada-error-zone .alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: var(--prada-warning);
  color: var(--prada-warning);
}

/* 條款聲明文字 */
.prada-modal-auth .prada-terms-text {
  text-align: center;
  font-size: var(--prada-text-xs);
  color: var(--naily-text-secondary);
  line-height: 1.6;
  margin-top: var(--prada-space-4);
  padding-top: var(--prada-space-3);
  border-top: 1px solid var(--naily-gray-100);
}

.prada-modal-auth .prada-terms-text a {
  color: var(--prada-primary);
  text-decoration: none;
  font-weight: var(--prada-font-medium);
}

.prada-modal-auth .prada-terms-text a:hover {
  text-decoration: underline;
}

/* Bootstrap Form.Check 兼容 */
.prada-modal-auth .form-check {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
}

.prada-modal-auth .form-check-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--prada-primary);
  margin: 0;
}

.prada-modal-auth .form-check-label {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  cursor: pointer;
  margin: 0;
}

/* ========================================
   響應式設計
   ======================================== */

/* 平板 (≤768px) - 占用大部分螢幕 */
@media (max-width: 768px) {
  .prada-modal-auth .prada-modal-dialog {
    width: 90%;
    max-width: 90%;
    height: 95%;
    max-height: 95vh;
    margin: var(--prada-space-4);
    overflow-y: auto;
  }
}

/* 手機 (≤480px) - 接近滿版 */
@media (max-width: 480px) {
  .prada-modal-auth .prada-modal-dialog {
    width: calc(100% - 32px); /* 左右各留16px margin */
    max-width: calc(100% - 32px);
    height: 95%;
    max-height: 95vh;
    margin: var(--prada-space-4);
    overflow-y: auto;
  }

  .prada-modal-auth .prada-modal-header {
    padding: var(--prada-space-6) var(--prada-space-5) var(--prada-space-4);
  }

  .prada-modal-auth .prada-modal-body {
    padding: var(--prada-space-4) var(--prada-space-5);
  }

  .prada-modal-auth .prada-modal-footer {
    padding: var(--prada-space-4) var(--prada-space-5) var(--prada-space-6);
  }

  .prada-modal-auth .form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--prada-space-3);
  }

  .prada-modal-auth .prada-login-options-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--prada-space-3);
  }

  /* Tab 按鈕在手機上稍微小一點 */
  .prada-modal-auth .auth-tab {
    padding: var(--prada-space-2) var(--prada-space-5);
    font-size: var(--prada-text-sm);
  }
}

/**
 * Prada Modal - Cart Summary (購物車總覽)
 * 用於快速查看購物車內容和結帳
 *
 * 設計特點：
 * - 卡片式商品列表
 * - 即時價格計算
 * - 優惠券輸入
 * - 快速結帳按鈕
 *
 * @version 1.0.0
 */

/* ========================================
   購物車總覽 Modal - 尺寸與佈局
   ======================================== */

.prada-modal-cart .prada-modal-dialog {
  max-width: var(--prada-modal-sm); /* 440px */
}

/* ========================================
   Header 設計
   ======================================== */

.prada-modal-cart .prada-modal-header {
  padding: var(--prada-space-6) var(--prada-modal-padding-md);
  border-bottom: var(--prada-border-light);
}

.prada-modal-cart .prada-modal-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--prada-text-xl);
  font-weight: var(--prada-font-bold);
  color: var(--naily-text-primary);
}

.prada-modal-cart .cart-count {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-normal);
  color: var(--naily-text-secondary);
}

/* ========================================
   Body - 商品列表
   ======================================== */

.prada-modal-cart .prada-modal-body {
  padding: var(--prada-space-4) var(--prada-modal-padding-md);
  max-height: 500px;
  overflow-y: auto;
}

/* 空購物車狀態 */
.prada-modal-cart .cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--prada-space-12) var(--prada-space-4);
  text-align: center;
}

.prada-modal-cart .cart-empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: var(--prada-space-4);
  color: var(--naily-gray-300);
}

.prada-modal-cart .cart-empty-text {
  font-size: var(--prada-text-base);
  color: var(--naily-text-secondary);
  margin-bottom: var(--prada-space-4);
}

.prada-modal-cart .btn-continue-shopping {
  padding: var(--prada-space-2) var(--prada-space-6);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--prada-primary);
  background-color: rgba(190, 31, 72, 0.1);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-cart .btn-continue-shopping:hover {
  background-color: rgba(190, 31, 72, 0.15);
}

/* 商品項目 */
.prada-modal-cart .cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-4);
}

.prada-modal-cart .cart-item {
  display: flex;
  gap: var(--prada-space-3);
  padding: var(--prada-space-4);
  background-color: var(--prada-white);
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-md);
  transition: box-shadow var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-cart .cart-item:hover {
  box-shadow: var(--prada-shadow-sm);
}

/* 商品圖片 */
.prada-modal-cart .item-image {
  flex: 0 0 80px;
  height: 80px;
  border-radius: var(--prada-radius-sm);
  overflow: hidden;
  background-color: var(--naily-gray-50);
}

.prada-modal-cart .item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 商品資訊 */
.prada-modal-cart .item-details {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.prada-modal-cart .item-name {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
  line-height: var(--prada-leading-tight);
  margin-bottom: var(--prada-space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prada-modal-cart .item-specs {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  margin-bottom: var(--prada-space-2);
}

.prada-modal-cart .item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 數量調整 */
.prada-modal-cart .item-quantity {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
}

.prada-modal-cart .qty-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--naily-gray-100);
  border: none;
  border-radius: var(--prada-radius-sm);
  cursor: pointer;
  color: var(--naily-text-primary);
  font-size: var(--prada-text-xs);
  transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-cart .qty-btn:hover {
  background-color: var(--naily-gray-200);
}

.prada-modal-cart .qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.prada-modal-cart .qty-value {
  min-width: 24px;
  text-align: center;
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
}

/* 價格與刪除 */
.prada-modal-cart .item-price {
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-primary);
}

.prada-modal-cart .btn-remove {
  padding: var(--prada-space-1) var(--prada-space-2);
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-cart .btn-remove:hover {
  color: var(--prada-error);
}

/* ========================================
   優惠券輸入
   ======================================== */

.prada-modal-cart .coupon-section {
  margin-top: var(--prada-space-5);
  padding-top: var(--prada-space-5);
  border-top: var(--prada-border-light);
}

.prada-modal-cart .coupon-input-group {
  display: flex;
  gap: var(--prada-space-2);
}

.prada-modal-cart .coupon-input {
  flex: 1 1;
  padding: var(--prada-space-2) var(--prada-space-3);
  font-size: var(--prada-text-sm);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  outline: none;
  transition: border-color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-cart .coupon-input:focus {
  border-color: var(--prada-primary);
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

.prada-modal-cart .btn-apply-coupon {
  padding: var(--prada-space-2) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--prada-primary);
  background-color: rgba(190, 31, 72, 0.1);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-cart .btn-apply-coupon:hover {
  background-color: rgba(190, 31, 72, 0.15);
}

.prada-modal-cart .coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--prada-space-3);
  padding: var(--prada-space-2) var(--prada-space-3);
  background-color: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--prada-success);
  border-radius: var(--prada-radius-sm);
  font-size: var(--prada-text-xs);
  color: var(--prada-success);
}

.prada-modal-cart .btn-remove-coupon {
  background: none;
  border: none;
  color: var(--prada-success);
  cursor: pointer;
  padding: 0;
  margin-left: var(--prada-space-2);
}

/* ========================================
   Footer - 價格總計與結帳
   ======================================== */

.prada-modal-cart .prada-modal-footer {
  flex-direction: column;
  padding: var(--prada-space-5) var(--prada-modal-padding-md);
  border-top: var(--prada-border-light);
  gap: var(--prada-space-4);
}

/* 價格明細 */
.prada-modal-cart .price-summary {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-2);
}

.prada-modal-cart .price-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
}

.prada-modal-cart .price-row.discount {
  color: var(--prada-success);
}

.prada-modal-cart .price-row.total {
  padding-top: var(--prada-space-3);
  border-top: var(--prada-border-light);
  font-size: var(--prada-text-lg);
  font-weight: var(--prada-font-bold);
  color: var(--naily-text-primary);
}

.prada-modal-cart .price-row.total .price-value {
  color: var(--prada-primary);
}

/* 結帳按鈕 */
.prada-modal-cart .btn-checkout {
  width: 100%;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-cart .btn-checkout:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-cart .btn-checkout:disabled {
  background-color: var(--naily-gray-300);
  cursor: not-allowed;
  box-shadow: none;
}

/* 繼續購物連結 */
.prada-modal-cart .continue-shopping-link {
  text-align: center;
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
}

.prada-modal-cart .continue-shopping-link a {
  color: var(--prada-primary);
  text-decoration: none;
  font-weight: var(--prada-font-medium);
}

.prada-modal-cart .continue-shopping-link a:hover {
  text-decoration: underline;
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 480px) {
  .prada-modal-cart .prada-modal-header,
  .prada-modal-cart .prada-modal-body,
  .prada-modal-cart .prada-modal-footer {
    padding-left: var(--prada-space-4);
    padding-right: var(--prada-space-4);
  }

  .prada-modal-cart .cart-item {
    padding: var(--prada-space-3);
  }

  .prada-modal-cart .item-image {
    flex: 0 0 60px;
    height: 60px;
  }
}

/**
 * Prada Modal - Live Chat (即時客服)
 * 用於即時客服對話
 *
 * 設計特點：
 * - 固定右下角位置
 * - 聊天氣泡設計
 * - 訊息輸入框
 * - 客服狀態指示
 *
 * @version 1.0.0
 */

/* ========================================
   即時客服 Modal - 固定位置佈局
   ======================================== */

.prada-modal-chat .prada-modal {
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--prada-space-5);
}

.prada-modal-chat .prada-modal-dialog {
  max-width: 400px;
  width: 100%;
  height: 600px;
  margin: 0;
  transform: translateY(100%);
  transition: transform var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-chat .prada-modal.show .prada-modal-dialog {
  transform: translateY(0);
}

.prada-modal-chat .prada-modal-content {
  height: 100%;
  border-radius: var(--prada-radius-2xl);
  display: flex;
  flex-direction: column;
  box-shadow: var(--prada-shadow-2xl);
}

/* ========================================
   Header - 客服資訊
   ======================================== */

.prada-modal-chat .prada-modal-header {
  padding: var(--prada-space-5) var(--prada-modal-padding-md);
  border-bottom: var(--prada-border-light);
  background: linear-gradient(135deg,
    rgba(190, 31, 72, 0.05) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  border-radius: var(--prada-radius-2xl) var(--prada-radius-2xl) 0 0;
  flex-shrink: 0;
}

.prada-modal-chat .chat-header-content {
  display: flex;
  align-items: center;
  gap: var(--prada-space-3);
}

/* 客服頭像 */
.prada-modal-chat .agent-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.prada-modal-chat .agent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prada-modal-chat .agent-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--prada-success);
  border: 2px solid var(--prada-white);
}

.prada-modal-chat .agent-status.away {
  background-color: var(--prada-warning);
}

.prada-modal-chat .agent-status.offline {
  background-color: var(--naily-gray-400);
}

/* 客服資訊 */
.prada-modal-chat .agent-info {
  flex: 1 1;
  min-width: 0;
}

.prada-modal-chat .agent-name {
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
  margin-bottom: var(--prada-space-1);
}

.prada-modal-chat .agent-status-text {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
}

.prada-modal-chat .agent-status-text.online {
  color: var(--prada-success);
}

/* ========================================
   Body - 聊天訊息區
   ======================================== */

.prada-modal-chat .prada-modal-body {
  flex: 1 1;
  padding: var(--prada-space-5) var(--prada-modal-padding-md);
  overflow-y: auto;
  background-color: var(--naily-bg-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-4);
}

/* 日期分隔線 */
.prada-modal-chat .message-date-divider {
  display: flex;
  align-items: center;
  gap: var(--prada-space-3);
  margin: var(--prada-space-3) 0;
}

.prada-modal-chat .message-date-divider::before,
.prada-modal-chat .message-date-divider::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background-color: var(--naily-gray-200);
}

.prada-modal-chat .message-date-text {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  white-space: nowrap;
}

/* 訊息群組 */
.prada-modal-chat .message-group {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-2);
}

.prada-modal-chat .message-group.user {
  align-items: flex-end;
}

.prada-modal-chat .message-group.agent {
  align-items: flex-start;
}

/* 訊息氣泡 */
.prada-modal-chat .message-bubble {
  max-width: 75%;
  padding: var(--prada-space-3) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  line-height: var(--prada-leading-relaxed);
  border-radius: var(--prada-radius-lg);
  word-wrap: break-word;
  animation: message-fade-in var(--prada-duration-fast) var(--prada-ease-out);
}

/* 使用者訊息 */
.prada-modal-chat .message-group.user .message-bubble {
  background-color: var(--prada-primary);
  color: var(--prada-white);
  border-bottom-right-radius: var(--prada-radius-sm);
}

/* 客服訊息 */
.prada-modal-chat .message-group.agent .message-bubble {
  background-color: var(--prada-white);
  color: var(--naily-text-primary);
  border: var(--prada-border-light);
  border-bottom-left-radius: var(--prada-radius-sm);
}

/* 訊息時間戳 */
.prada-modal-chat .message-time {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  padding: 0 var(--prada-space-1);
}

/* 訊息狀態（已讀/未讀）*/
.prada-modal-chat .message-status {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--prada-space-1);
}

.prada-modal-chat .message-status.read {
  color: var(--prada-primary);
}

/* 系統訊息 */
.prada-modal-chat .system-message {
  align-self: center;
  padding: var(--prada-space-2) var(--prada-space-3);
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: var(--prada-radius-full);
  text-align: center;
}

/* 正在輸入指示器 */
.prada-modal-chat .typing-indicator {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
  padding: var(--prada-space-3) var(--prada-space-4);
  background-color: var(--prada-white);
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-lg);
  max-width: 75px;
}

.prada-modal-chat .typing-dot {
  width: 6px;
  height: 6px;
  background-color: var(--naily-gray-400);
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite;
}

.prada-modal-chat .typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.prada-modal-chat .typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* 快速回覆按鈕 */
.prada-modal-chat .quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--prada-space-2);
  margin-top: var(--prada-space-3);
}

.prada-modal-chat .quick-reply-btn {
  padding: var(--prada-space-2) var(--prada-space-3);
  font-size: var(--prada-text-xs);
  color: var(--prada-primary);
  background-color: var(--prada-white);
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-full);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-chat .quick-reply-btn:hover {
  background-color: rgba(190, 31, 72, 0.05);
  border-color: var(--prada-primary);
}

/* ========================================
   Footer - 訊息輸入區
   ======================================== */

.prada-modal-chat .prada-modal-footer {
  padding: var(--prada-space-4) var(--prada-modal-padding-md);
  border-top: var(--prada-border-light);
  flex-shrink: 0;
}

/* 輸入框區域 */
.prada-modal-chat .chat-input-area {
  display: flex;
  gap: var(--prada-space-2);
  align-items: flex-end;
}

/* 附件按鈕 */
.prada-modal-chat .btn-attachment {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--naily-bg-secondary);
  border: none;
  border-radius: var(--prada-radius-md);
  color: var(--naily-text-secondary);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-chat .btn-attachment:hover {
  background-color: var(--naily-bg-active);
  color: var(--naily-text-primary);
}

/* 訊息輸入框 */
.prada-modal-chat .chat-input-wrapper {
  flex: 1 1;
  position: relative;
}

.prada-modal-chat .chat-input {
  width: 100%;
  min-height: 36px;
  max-height: 100px;
  padding: var(--prada-space-2) var(--prada-space-3);
  font-size: var(--prada-text-sm);
  line-height: var(--prada-leading-normal);
  color: var(--naily-text-primary);
  background-color: var(--naily-bg-secondary);
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-md);
  outline: none;
  resize: none;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-chat .chat-input:focus {
  background-color: var(--prada-white);
  border-color: var(--prada-primary);
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

.prada-modal-chat .chat-input::placeholder {
  color: var(--naily-text-muted);
}

/* 發送按鈕 */
.prada-modal-chat .btn-send {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  color: var(--prada-white);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-chat .btn-send:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-chat .btn-send:disabled {
  background-color: var(--naily-gray-300);
  cursor: not-allowed;
  box-shadow: none;
}

.prada-modal-chat .btn-send-icon {
  width: 16px;
  height: 16px;
}

/* 字數統計 */
.prada-modal-chat .char-count {
  position: absolute;
  bottom: -20px;
  right: 0;
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
}

.prada-modal-chat .char-count.limit-reached {
  color: var(--prada-error);
}

/* ========================================
   動畫
   ======================================== */

@keyframes message-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 768px) {
  .prada-modal-chat .prada-modal {
    padding: 0;
  }

  .prada-modal-chat .prada-modal-dialog {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .prada-modal-chat .prada-modal-content {
    border-radius: 0;
  }

  .prada-modal-chat .prada-modal-header {
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .prada-modal-chat .prada-modal-header,
  .prada-modal-chat .prada-modal-body,
  .prada-modal-chat .prada-modal-footer {
    padding-left: var(--prada-space-4);
    padding-right: var(--prada-space-4);
  }

  .prada-modal-chat .message-bubble {
    max-width: 85%;
  }
}

/* ========================================
   滾動優化
   ======================================== */

.prada-modal-chat .prada-modal-body::-webkit-scrollbar {
  width: 6px;
}

.prada-modal-chat .prada-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.prada-modal-chat .prada-modal-body::-webkit-scrollbar-thumb {
  background: var(--naily-gray-300);
  border-radius: var(--prada-radius-full);
}

.prada-modal-chat .prada-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--naily-gray-400);
}

/**
 * Prada Modal - Checkout Confirmation (結帳確認)
 * 用於最終確認訂單資訊
 *
 * 設計特點：
 * - 清晰的資訊層級
 * - 完整的訂單摘要
 * - 重要資訊強調
 * - 明確的確認/取消動作
 *
 * @version 1.0.0
 */

/* ========================================
   結帳確認 Modal - 尺寸與佈局
   ======================================== */

.prada-modal-checkout .prada-modal-dialog {
  max-width: var(--prada-modal-md); /* 520px */
}

/* ========================================
   Header 設計
   ======================================== */

.prada-modal-checkout .prada-modal-header {
  padding: var(--prada-space-6) var(--prada-modal-padding-md);
  border-bottom: var(--prada-border-light);
  background: linear-gradient(135deg,
    rgba(190, 31, 72, 0.03) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.prada-modal-checkout .prada-modal-title {
  font-size: var(--prada-text-xl);
  font-weight: var(--prada-font-bold);
  color: var(--prada-primary);
}

.prada-modal-checkout .checkout-subtitle {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  margin-top: var(--prada-space-1);
}

/* ========================================
   Body - 訂單資訊區域
   ======================================== */

.prada-modal-checkout .prada-modal-body {
  padding: var(--prada-space-6) var(--prada-modal-padding-md);
  max-height: 500px;
  overflow-y: auto;
}

/* 資訊區塊 */
.prada-modal-checkout .info-section {
  margin-bottom: var(--prada-space-6);
}

.prada-modal-checkout .section-title {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--prada-space-3);
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
}

.prada-modal-checkout .section-icon {
  width: 16px;
  height: 16px;
  color: var(--prada-primary);
}

.prada-modal-checkout .info-card {
  padding: var(--prada-space-4);
  background-color: var(--naily-bg-secondary);
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-md);
}

/* 收件資訊 */
.prada-modal-checkout .recipient-info {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-2);
}

.prada-modal-checkout .info-row {
  display: flex;
  gap: var(--prada-space-2);
  font-size: var(--prada-text-sm);
}

.prada-modal-checkout .info-label {
  flex: 0 0 60px;
  color: var(--naily-text-tertiary);
}

.prada-modal-checkout .info-value {
  flex: 1 1;
  color: var(--naily-text-primary);
  font-weight: var(--prada-font-medium);
}

/* 商品列表 */
.prada-modal-checkout .order-items {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-3);
}

.prada-modal-checkout .order-item {
  display: flex;
  align-items: center;
  gap: var(--prada-space-3);
  padding: var(--prada-space-3);
  background-color: var(--prada-white);
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-sm);
}

.prada-modal-checkout .item-thumbnail {
  flex: 0 0 50px;
  height: 50px;
  border-radius: var(--prada-radius-sm);
  overflow: hidden;
  background-color: var(--naily-gray-50);
}

.prada-modal-checkout .item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prada-modal-checkout .item-info {
  flex: 1 1;
  min-width: 0;
}

.prada-modal-checkout .item-name {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.prada-modal-checkout .item-specs {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
}

.prada-modal-checkout .item-quantity {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  white-space: nowrap;
}

.prada-modal-checkout .item-price {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-primary);
  white-space: nowrap;
}

/* 付款方式 */
.prada-modal-checkout .payment-method {
  display: flex;
  align-items: center;
  gap: var(--prada-space-3);
  padding: var(--prada-space-4);
}

.prada-modal-checkout .payment-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--prada-white);
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-sm);
}

.prada-modal-checkout .payment-details {
  flex: 1 1;
}

.prada-modal-checkout .payment-name {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
  margin-bottom: 2px;
}

.prada-modal-checkout .payment-info {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
}

/* 價格摘要 */
.prada-modal-checkout .price-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-2);
}

.prada-modal-checkout .price-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
}

.prada-modal-checkout .price-row.discount {
  color: var(--prada-success);
}

.prada-modal-checkout .price-row.total {
  padding-top: var(--prada-space-3);
  margin-top: var(--prada-space-2);
  border-top: 2px solid var(--naily-gray-200);
  font-size: var(--prada-text-lg);
  font-weight: var(--prada-font-bold);
  color: var(--naily-text-primary);
}

.prada-modal-checkout .price-row.total .price-value {
  color: var(--prada-primary);
  font-size: var(--prada-text-2xl);
}

/* ========================================
   重要提示區
   ======================================== */

.prada-modal-checkout .notice-box {
  margin-top: var(--prada-space-6);
  padding: var(--prada-space-4);
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--prada-warning);
  border-radius: var(--prada-radius-sm);
}

.prada-modal-checkout .notice-title {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-warning);
  margin-bottom: var(--prada-space-2);
}

.prada-modal-checkout .notice-text {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
}

/* ========================================
   條款同意
   ======================================== */

.prada-modal-checkout .terms-agreement {
  margin-top: var(--prada-space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--prada-space-2);
}

.prada-modal-checkout .terms-agreement input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--prada-primary);
}

.prada-modal-checkout .terms-text {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
}

.prada-modal-checkout .terms-link {
  color: var(--prada-primary);
  text-decoration: none;
  font-weight: var(--prada-font-medium);
}

.prada-modal-checkout .terms-link:hover {
  text-decoration: underline;
}

/* ========================================
   Footer - 操作按鈕
   ======================================== */

.prada-modal-checkout .prada-modal-footer {
  padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
  border-top: var(--prada-border-light);
  display: flex;
  gap: var(--prada-space-3);
  background: linear-gradient(0deg,
    rgba(190, 31, 72, 0.02) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.prada-modal-checkout .btn-cancel {
  flex: 0 0 auto;
  padding: var(--prada-space-3) var(--prada-space-5);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-secondary);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-checkout .btn-cancel:hover {
  background-color: var(--naily-bg-hover);
  border-color: var(--naily-gray-400);
}

.prada-modal-checkout .btn-confirm {
  flex: 1 1;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--prada-space-2);
}

.prada-modal-checkout .btn-confirm:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-checkout .btn-confirm:disabled {
  background-color: var(--naily-gray-300);
  cursor: not-allowed;
  box-shadow: none;
}

.prada-modal-checkout .btn-confirm-icon {
  width: 20px;
  height: 20px;
}

/* 處理中狀態 */
.prada-modal-checkout .btn-confirm.processing {
  pointer-events: none;
}

.prada-modal-checkout .btn-confirm.processing::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--prada-white);
  border-radius: 50%;
  animation: prada-spin 0.6s linear infinite;
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 480px) {
  .prada-modal-checkout .prada-modal-header,
  .prada-modal-checkout .prada-modal-body,
  .prada-modal-checkout .prada-modal-footer {
    padding-left: var(--prada-space-4);
    padding-right: var(--prada-space-4);
  }

  .prada-modal-checkout .order-item {
    flex-wrap: wrap;
  }

  .prada-modal-checkout .item-quantity,
  .prada-modal-checkout .item-price {
    flex: 0 0 100%;
    margin-top: var(--prada-space-2);
  }

  .prada-modal-checkout .prada-modal-footer {
    flex-direction: column-reverse;
  }

  .prada-modal-checkout .btn-cancel,
  .prada-modal-checkout .btn-confirm {
    width: 100%;
  }
}

/**
 * Prada Modal - Confirmation Dialog (確認對話框)
 * 用於重要操作的二次確認
 *
 * 設計特點：
 * - 清晰的視覺層級
 * - 危險操作警告色
 * - 明確的確認/取消按鈕
 * - 支援多種警告級別
 *
 * @version 1.0.0
 */

/* ========================================
   確認對話框 Modal - 尺寸與佈局
   ======================================== */

.prada-modal-confirm .prada-modal-dialog {
  max-width: var(--prada-modal-xs); /* 360px */
}

/* ========================================
   Header 設計 - 根據類型顯示不同顏色
   ======================================== */

.prada-modal-confirm .prada-modal-header {
  padding: var(--prada-space-6) var(--prada-modal-padding-md) var(--prada-space-4);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 圖示容器 */
.prada-modal-confirm .confirm-icon-wrapper {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: var(--prada-space-4);
}

.prada-modal-confirm .confirm-icon {
  width: 30px;
  height: 30px;
}

/* 標題 */
.prada-modal-confirm .prada-modal-title {
  font-size: var(--prada-text-lg);
  font-weight: var(--prada-font-bold);
  color: var(--naily-text-primary);
  margin-bottom: 0;
}

/* ========================================
   警告級別變體 - 預設（資訊）
   ======================================== */

.prada-modal-confirm.level-info .confirm-icon-wrapper {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--prada-info);
}

.prada-modal-confirm.level-info .prada-modal-title {
  color: var(--prada-info);
}

/* 警告級別變體 - 警告 */
.prada-modal-confirm.level-warning .confirm-icon-wrapper {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--prada-warning);
}

.prada-modal-confirm.level-warning .prada-modal-title {
  color: var(--prada-warning);
}

/* 警告級別變體 - 危險 */
.prada-modal-confirm.level-danger .confirm-icon-wrapper {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--prada-error);
}

.prada-modal-confirm.level-danger .prada-modal-title {
  color: var(--prada-error);
}

/* 警告級別變體 - 成功 */
.prada-modal-confirm.level-success .confirm-icon-wrapper {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--prada-success);
}

.prada-modal-confirm.level-success .prada-modal-title {
  color: var(--prada-success);
}

/* ========================================
   Body - 訊息內容
   ======================================== */

.prada-modal-confirm .prada-modal-body {
  padding: var(--prada-space-4) var(--prada-modal-padding-md) var(--prada-space-6);
  text-align: center;
}

.prada-modal-confirm .confirm-message {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
  margin-bottom: var(--prada-space-4);
}

/* 重點強調文字 */
.prada-modal-confirm .confirm-highlight {
  display: block;
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
  margin-top: var(--prada-space-2);
}

/* 警告提示框 */
.prada-modal-confirm .confirm-warning-box {
  padding: var(--prada-space-3);
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 3px solid var(--prada-warning);
  border-radius: var(--prada-radius-sm);
  text-align: left;
  margin-top: var(--prada-space-4);
}

.prada-modal-confirm .warning-box-title {
  font-size: var(--prada-text-xs);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-warning);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--prada-space-2);
}

.prada-modal-confirm .warning-box-text {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
}

/* 確認輸入框（用於刪除操作等） */
.prada-modal-confirm .confirm-input-group {
  margin-top: var(--prada-space-5);
  text-align: left;
}

.prada-modal-confirm .confirm-input-label {
  display: block;
  font-size: var(--prada-text-xs);
  color: var(--naily-text-secondary);
  margin-bottom: var(--prada-space-2);
}

.prada-modal-confirm .confirm-input {
  width: 100%;
  padding: var(--prada-space-2) var(--prada-space-3);
  font-size: var(--prada-text-sm);
  font-family: var(--prada-font-mono);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  outline: none;
  transition: border-color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-confirm .confirm-input:focus {
  border-color: var(--prada-primary);
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

.prada-modal-confirm .confirm-input.is-invalid {
  border-color: var(--prada-error);
}

.prada-modal-confirm .confirm-input-hint {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  margin-top: var(--prada-space-1);
}

/* ========================================
   Footer - 操作按鈕
   ======================================== */

.prada-modal-confirm .prada-modal-footer {
  padding: var(--prada-space-4) var(--prada-modal-padding-md) var(--prada-space-6);
  border-top: none;
  display: flex;
  gap: var(--prada-space-3);
}

/* 取消按鈕 */
.prada-modal-confirm .btn-cancel {
  flex: 1 1;
  padding: var(--prada-space-2) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-secondary);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-confirm .btn-cancel:hover {
  background-color: var(--naily-bg-hover);
  border-color: var(--naily-gray-400);
}

/* 確認按鈕 - 預設樣式 */
.prada-modal-confirm .btn-confirm {
  flex: 1 1;
  padding: var(--prada-space-2) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-confirm .btn-confirm:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-confirm .btn-confirm:disabled {
  background-color: var(--naily-gray-300);
  cursor: not-allowed;
  box-shadow: none;
}

/* 確認按鈕 - 資訊級別 */
.prada-modal-confirm.level-info .btn-confirm {
  background-color: var(--prada-info);
}

.prada-modal-confirm.level-info .btn-confirm:hover {
  background-color: var(--prada-info-light);
  box-shadow: var(--naily-shadow-info);
}

/* 確認按鈕 - 警告級別 */
.prada-modal-confirm.level-warning .btn-confirm {
  background-color: var(--prada-warning);
}

.prada-modal-confirm.level-warning .btn-confirm:hover {
  background-color: var(--prada-warning-light);
  box-shadow: var(--prada-shadow-gold);
}

/* 確認按鈕 - 危險級別 */
.prada-modal-confirm.level-danger .btn-confirm {
  background-color: var(--prada-error);
}

.prada-modal-confirm.level-danger .btn-confirm:hover {
  background-color: var(--prada-error-light);
  box-shadow: var(--naily-shadow-error);
}

/* 確認按鈕 - 成功級別 */
.prada-modal-confirm.level-success .btn-confirm {
  background-color: var(--prada-success);
}

.prada-modal-confirm.level-success .btn-confirm:hover {
  background-color: var(--prada-success-light);
  box-shadow: var(--naily-shadow-success);
}

/* ========================================
   載入狀態
   ======================================== */

.prada-modal-confirm .btn-confirm.loading {
  pointer-events: none;
  position: relative;
}

.prada-modal-confirm .btn-confirm.loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--prada-white);
  border-radius: 50%;
  animation: prada-spin 0.6s linear infinite;
  top: 50%;
  left: 50%;
  margin-top: -7px;
  margin-left: -7px;
}

.prada-modal-confirm .btn-confirm.loading span {
  opacity: 0;
}

/* ========================================
   倒數計時功能（可選）
   ======================================== */

.prada-modal-confirm .countdown-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--prada-space-1);
  margin-left: var(--prada-space-2);
  font-size: var(--prada-text-xs);
  font-weight: var(--prada-font-bold);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: var(--prada-radius-full);
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 480px) {
  .prada-modal-confirm .prada-modal-header {
    padding: var(--prada-space-5) var(--prada-space-4) var(--prada-space-3);
  }

  .prada-modal-confirm .prada-modal-body {
    padding: var(--prada-space-3) var(--prada-space-4) var(--prada-space-5);
  }

  .prada-modal-confirm .prada-modal-footer {
    padding: var(--prada-space-3) var(--prada-space-4) var(--prada-space-5);
    flex-direction: column-reverse;
  }

  .prada-modal-confirm .btn-cancel,
  .prada-modal-confirm .btn-confirm {
    width: 100%;
  }

  .prada-modal-confirm .confirm-icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .prada-modal-confirm .confirm-icon {
    width: 25px;
    height: 25px;
  }
}

/**
 * Prada Modal - Coupon Selector (優惠券選擇器)
 * 用於選擇可用優惠券
 *
 * 設計特點：
 * - 卡片式優惠券設計
 * - 虛線邊框（票券感）
 * - 可用/不可用狀態
 * - 優惠金額強調
 *
 * @version 1.0.0
 */

/* ========================================
   優惠券選擇器 Modal - 尺寸與佈局
   ======================================== */

.prada-modal-coupon .prada-modal-dialog {
  max-width: var(--prada-modal-md); /* 520px */
}

/* ========================================
   Header 設計
   ======================================== */

.prada-modal-coupon .prada-modal-header {
  padding: var(--prada-space-6) var(--prada-modal-padding-md);
  border-bottom: var(--prada-border-light);
}

.prada-modal-coupon .prada-modal-title {
  font-size: var(--prada-text-xl);
  font-weight: var(--prada-font-bold);
  color: var(--naily-text-primary);
}

.prada-modal-coupon .coupon-summary {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  margin-top: var(--prada-space-2);
}

/* ========================================
   Body - 優惠券列表
   ======================================== */

.prada-modal-coupon .prada-modal-body {
  padding: var(--prada-space-5) var(--prada-modal-padding-md);
  max-height: 500px;
  overflow-y: auto;
}

/* 分類標籤 */
.prada-modal-coupon .coupon-tabs {
  display: flex;
  gap: var(--prada-space-2);
  margin-bottom: var(--prada-space-5);
  border-bottom: var(--prada-border-light);
}

.prada-modal-coupon .coupon-tab {
  padding: var(--prada-space-2) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-coupon .coupon-tab:hover {
  color: var(--prada-primary);
}

.prada-modal-coupon .coupon-tab.active {
  color: var(--prada-primary);
  border-bottom-color: var(--prada-primary);
}

.prada-modal-coupon .coupon-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--prada-space-1);
  margin-left: var(--prada-space-1);
  font-size: var(--prada-text-xs);
  font-weight: var(--prada-font-bold);
  background-color: var(--prada-primary);
  color: var(--prada-white);
  border-radius: var(--prada-radius-full);
}

/* 優惠券列表 */
.prada-modal-coupon .coupon-list {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-4);
}

/* 優惠券卡片 */
.prada-modal-coupon .coupon-card {
  position: relative;
  display: flex;
  background-color: var(--prada-white);
  border: 2px dashed var(--naily-gray-300);
  border-radius: var(--prada-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-coupon .coupon-card:hover {
  border-color: var(--prada-primary);
  box-shadow: var(--prada-shadow-sm);
  transform: translateY(-2px);
}

.prada-modal-coupon .coupon-card.selected {
  border-color: var(--prada-primary);
  border-style: solid;
  background-color: rgba(190, 31, 72, 0.02);
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

.prada-modal-coupon .coupon-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-style: solid;
}

.prada-modal-coupon .coupon-card.disabled:hover {
  border-color: var(--naily-gray-300);
  box-shadow: none;
  transform: none;
}

/* 左側：優惠金額 */
.prada-modal-coupon .coupon-amount {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    rgba(190, 31, 72, 0.1) 0%,
    rgba(190, 31, 72, 0.05) 100%
  );
  padding: var(--prada-space-4);
  position: relative;
}

.prada-modal-coupon .coupon-amount::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: var(--prada-white);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--naily-gray-300);
}

.prada-modal-coupon .amount-symbol {
  font-size: var(--prada-text-lg);
  color: var(--prada-primary);
  font-weight: var(--prada-font-semibold);
}

.prada-modal-coupon .amount-value {
  font-size: var(--prada-text-3xl);
  color: var(--prada-primary);
  font-weight: var(--prada-font-bold);
  line-height: 1;
  margin-top: var(--prada-space-1);
}

.prada-modal-coupon .amount-type {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  margin-top: var(--prada-space-2);
}

/* 右側：優惠券資訊 */
.prada-modal-coupon .coupon-info {
  flex: 1 1;
  padding: var(--prada-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-2);
}

.prada-modal-coupon .coupon-title {
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
  line-height: var(--prada-leading-tight);
}

.prada-modal-coupon .coupon-code {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  font-family: var(--prada-font-mono);
  background-color: var(--naily-bg-secondary);
  padding: var(--prada-space-1) var(--prada-space-2);
  border-radius: var(--prada-radius-sm);
  display: inline-block;
  align-self: flex-start;
}

.prada-modal-coupon .coupon-description {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
}

.prada-modal-coupon .coupon-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--prada-space-2);
  margin-top: var(--prada-space-2);
}

.prada-modal-coupon .coupon-condition {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  background-color: var(--naily-bg-secondary);
  padding: var(--prada-space-1) var(--prada-space-2);
  border-radius: var(--prada-radius-sm);
}

.prada-modal-coupon .coupon-expiry {
  font-size: var(--prada-text-xs);
  color: var(--prada-warning);
  margin-top: var(--prada-space-2);
  display: flex;
  align-items: center;
  gap: var(--prada-space-1);
}

.prada-modal-coupon .coupon-expiry.urgent {
  color: var(--prada-error);
  font-weight: var(--prada-font-semibold);
}

/* 選擇指示器 */
.prada-modal-coupon .coupon-selected-badge {
  position: absolute;
  top: var(--prada-space-2);
  right: var(--prada-space-2);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--prada-primary);
  color: var(--prada-white);
  border-radius: 50%;
  font-size: var(--prada-text-xs);
  opacity: 0;
  transform: scale(0);
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-coupon .coupon-card.selected .coupon-selected-badge {
  opacity: 1;
  transform: scale(1);
}

/* 不可用原因標籤 */
.prada-modal-coupon .coupon-unavailable {
  position: absolute;
  top: var(--prada-space-2);
  right: var(--prada-space-2);
  padding: var(--prada-space-1) var(--prada-space-2);
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  background-color: var(--naily-gray-100);
  border-radius: var(--prada-radius-sm);
}

/* 空狀態 */
.prada-modal-coupon .coupon-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--prada-space-12);
  text-align: center;
}

.prada-modal-coupon .empty-icon {
  width: 60px;
  height: 60px;
  color: var(--naily-gray-300);
  margin-bottom: var(--prada-space-4);
}

.prada-modal-coupon .empty-text {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
}

/* ========================================
   Footer - 確認選擇
   ======================================== */

.prada-modal-coupon .prada-modal-footer {
  padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
  border-top: var(--prada-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-3);
}

/* 節省金額提示 */
.prada-modal-coupon .savings-info {
  text-align: center;
  padding: var(--prada-space-3);
  background-color: rgba(16, 185, 129, 0.1);
  border-radius: var(--prada-radius-md);
}

.prada-modal-coupon .savings-label {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-secondary);
  margin-bottom: var(--prada-space-1);
}

.prada-modal-coupon .savings-amount {
  font-size: var(--prada-text-xl);
  font-weight: var(--prada-font-bold);
  color: var(--prada-success);
}

/* 操作按鈕 */
.prada-modal-coupon .footer-buttons {
  display: flex;
  gap: var(--prada-space-3);
}

.prada-modal-coupon .btn-cancel {
  flex: 0 0 auto;
  padding: var(--prada-space-3) var(--prada-space-5);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-secondary);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-coupon .btn-cancel:hover {
  background-color: var(--naily-bg-hover);
}

.prada-modal-coupon .btn-apply {
  flex: 1 1;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-coupon .btn-apply:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-coupon .btn-apply:disabled {
  background-color: var(--naily-gray-300);
  cursor: not-allowed;
  box-shadow: none;
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 480px) {
  .prada-modal-coupon .prada-modal-header,
  .prada-modal-coupon .prada-modal-body,
  .prada-modal-coupon .prada-modal-footer {
    padding-left: var(--prada-space-4);
    padding-right: var(--prada-space-4);
  }

  .prada-modal-coupon .coupon-card {
    flex-direction: column;
  }

  .prada-modal-coupon .coupon-amount {
    flex: 1 1;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--prada-space-3);
  }

  .prada-modal-coupon .coupon-amount::after {
    display: none;
  }

  .prada-modal-coupon .amount-value {
    font-size: var(--prada-text-2xl);
  }

  .prada-modal-coupon .footer-buttons {
    flex-direction: column-reverse;
  }

  .prada-modal-coupon .btn-cancel,
  .prada-modal-coupon .btn-apply {
    width: 100%;
  }
}

/**
 * Prada Modal - Filter Panel (篩選面板)
 * 用於商品篩選、搜尋條件設定
 *
 * 設計特點：
 * - 側邊滑入動畫
 * - 分類折疊面板
 * - 即時篩選結果數量
 * - 快速清除功能
 *
 * @version 1.0.0
 */

/* ========================================
   篩選面板 Modal - 側邊滑入佈局
   ======================================== */

.prada-modal-filter .prada-modal {
  align-items: flex-end;
  justify-content: flex-end;
}

.prada-modal-filter .prada-modal-dialog {
  max-width: 380px;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: translateX(100%);
  transition: transform var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-filter .prada-modal.show .prada-modal-dialog {
  transform: translateX(0);
}

.prada-modal-filter .prada-modal-content {
  height: 100%;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

/* ========================================
   Header - 篩選標題與清除
   ======================================== */

.prada-modal-filter .prada-modal-header {
  padding: var(--prada-space-6) var(--prada-modal-padding-md);
  border-bottom: var(--prada-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.prada-modal-filter .prada-modal-title {
  font-size: var(--prada-text-lg);
  font-weight: var(--prada-font-bold);
  color: var(--naily-text-primary);
}

.prada-modal-filter .btn-clear-all {
  font-size: var(--prada-text-sm);
  color: var(--prada-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: var(--prada-font-medium);
  padding: var(--prada-space-1) var(--prada-space-2);
  transition: color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-filter .btn-clear-all:hover {
  color: var(--prada-primary-dark);
  text-decoration: underline;
}

.prada-modal-filter .btn-clear-all:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: none;
}

/* ========================================
   Body - 篩選項目
   ======================================== */

.prada-modal-filter .prada-modal-body {
  flex: 1 1;
  padding: 0;
  overflow-y: auto;
}

/* 篩選群組 */
.prada-modal-filter .filter-group {
  border-bottom: var(--prada-border-light);
}

.prada-modal-filter .filter-group:last-child {
  border-bottom: none;
}

/* 群組標題（可折疊）*/
.prada-modal-filter .filter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--prada-space-4) var(--prada-modal-padding-md);
  cursor: pointer;
  background-color: var(--prada-white);
  transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-filter .filter-group-header:hover {
  background-color: var(--naily-bg-hover);
}

.prada-modal-filter .filter-group-title {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
}

.prada-modal-filter .filter-group-count {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  margin-left: var(--prada-space-2);
}

.prada-modal-filter .filter-group-icon {
  width: 16px;
  height: 16px;
  color: var(--naily-text-tertiary);
  transition: transform var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-filter .filter-group.collapsed .filter-group-icon {
  transform: rotate(-90deg);
}

/* 群組內容 */
.prada-modal-filter .filter-group-content {
  padding: var(--prada-space-3) var(--prada-modal-padding-md) var(--prada-space-4);
  background-color: var(--naily-bg-secondary);
  max-height: 400px;
  overflow: hidden;
  transition: max-height var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-filter .filter-group.collapsed .filter-group-content {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* 篩選選項 */
.prada-modal-filter .filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-3);
}

/* Checkbox 選項 */
.prada-modal-filter .filter-option {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
  cursor: pointer;
  padding: var(--prada-space-2);
  border-radius: var(--prada-radius-sm);
  transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-filter .filter-option:hover {
  background-color: rgba(190, 31, 72, 0.05);
}

.prada-modal-filter .filter-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--prada-primary);
}

.prada-modal-filter .filter-label {
  flex: 1 1;
  font-size: var(--prada-text-sm);
  color: var(--naily-text-primary);
  cursor: pointer;
}

.prada-modal-filter .filter-count {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  font-family: var(--prada-font-mono);
}

/* 顏色選擇器 */
.prada-modal-filter .color-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--prada-space-2);
}

.prada-modal-filter .color-swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--prada-radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  position: relative;
}

.prada-modal-filter .color-swatch:hover {
  transform: scale(1.1);
  box-shadow: var(--prada-shadow-sm);
}

.prada-modal-filter .color-swatch.selected {
  border-color: var(--prada-primary);
  box-shadow: 0 0 0 2px rgba(190, 31, 72, 0.2);
}

.prada-modal-filter .color-swatch.selected::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--prada-white);
  font-size: var(--prada-text-xs);
  font-weight: var(--prada-font-bold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 價格範圍滑桿 */
.prada-modal-filter .price-range {
  padding: var(--prada-space-3) 0;
}

.prada-modal-filter .price-range-values {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--prada-space-4);
}

.prada-modal-filter .price-input {
  width: calc(50% - var(--prada-space-2));
  padding: var(--prada-space-2) var(--prada-space-3);
  font-size: var(--prada-text-sm);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  text-align: center;
  font-family: var(--prada-font-mono);
  outline: none;
}

.prada-modal-filter .price-input:focus {
  border-color: var(--prada-primary);
}

.prada-modal-filter .price-slider {
  width: 100%;
  height: 4px;
  background-color: var(--naily-gray-200);
  border-radius: var(--prada-radius-sm);
  position: relative;
  cursor: pointer;
}

.prada-modal-filter .price-slider-track {
  position: absolute;
  height: 100%;
  background-color: var(--prada-primary);
  border-radius: var(--prada-radius-sm);
}

.prada-modal-filter .price-slider-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: var(--prada-primary);
  border: 2px solid var(--prada-white);
  border-radius: 50%;
  top: -6px;
  cursor: grab;
  box-shadow: var(--prada-shadow-sm);
}

.prada-modal-filter .price-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.2);
}

/* 評分篩選 */
.prada-modal-filter .rating-options {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-2);
}

.prada-modal-filter .rating-option {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
  padding: var(--prada-space-2);
  cursor: pointer;
  border-radius: var(--prada-radius-sm);
  transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-filter .rating-option:hover {
  background-color: rgba(190, 31, 72, 0.05);
}

.prada-modal-filter .rating-stars {
  display: flex;
  gap: 2px;
  color: var(--prada-gold);
  font-size: var(--prada-text-sm);
}

.prada-modal-filter .rating-text {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
}

/* ========================================
   Footer - 套用篩選
   ======================================== */

.prada-modal-filter .prada-modal-footer {
  padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
  border-top: var(--prada-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-3);
  flex-shrink: 0;
}

/* 結果數量 */
.prada-modal-filter .result-count {
  text-align: center;
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
}

.prada-modal-filter .result-number {
  font-weight: var(--prada-font-bold);
  color: var(--prada-primary);
}

/* 套用按鈕 */
.prada-modal-filter .btn-apply {
  width: 100%;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-filter .btn-apply:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 480px) {
  .prada-modal-filter .prada-modal-dialog {
    max-width: 100%;
  }

  .prada-modal-filter .prada-modal-header,
  .prada-modal-filter .filter-group-header,
  .prada-modal-filter .filter-group-content,
  .prada-modal-filter .prada-modal-footer {
    padding-left: var(--prada-space-4);
    padding-right: var(--prada-space-4);
  }
}

/**
 * Prada Modal - Image Gallery (圖片畫廊)
 * 用於全屏查看商品圖片
 *
 * 設計特點：
 * - 全屏黑色背景
 * - 左右切換按鈕
 * - 縮圖導航
 * - 縮放功能
 *
 * @version 1.0.0
 */

/* ========================================
   圖片畫廊 Modal - 全屏佈局
   ======================================== */

.prada-modal-gallery .prada-modal {
  background-color: rgba(0, 0, 0, 0.95);
}

.prada-modal-gallery .prada-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.98);
}

.prada-modal-gallery .prada-modal-dialog {
  max-width: 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prada-modal-gallery .prada-modal-content {
  background-color: transparent;
  border: none;
  box-shadow: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ========================================
   Header - 最小化工具欄
   ======================================== */

.prada-modal-gallery .prada-modal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--prada-space-5);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--prada-modal-z-header);
}

.prada-modal-gallery .gallery-title {
  font-size: var(--prada-text-sm);
  color: var(--prada-white);
  font-weight: var(--prada-font-medium);
}

.prada-modal-gallery .gallery-counter {
  font-size: var(--prada-text-xs);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--prada-font-mono);
}

.prada-modal-gallery .gallery-controls {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
}

/* 工具按鈕 */
.prada-modal-gallery .gallery-tool-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--prada-radius-md);
  color: var(--prada-white);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.prada-modal-gallery .gallery-tool-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.prada-modal-gallery .prada-modal-close {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--prada-white);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.prada-modal-gallery .prada-modal-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ========================================
   Body - 圖片展示區
   ======================================== */

.prada-modal-gallery .prada-modal-body {
  flex: 1 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* 主圖片容器 */
.prada-modal-gallery .gallery-main-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--prada-space-20) var(--prada-space-12);
}

.prada-modal-gallery .gallery-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
          user-select: none;
  transition: transform var(--prada-duration-normal) var(--prada-ease-out);
  cursor: zoom-in;
}

.prada-modal-gallery .gallery-image.zoomed {
  cursor: zoom-out;
  transform: scale(2);
}

/* 左右切換按鈕 */
.prada-modal-gallery .gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--prada-white);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 1;
}

.prada-modal-gallery .gallery-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.prada-modal-gallery .gallery-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: translateY(-50%) scale(1);
}

.prada-modal-gallery .gallery-nav-btn.prev {
  left: var(--prada-space-5);
}

.prada-modal-gallery .gallery-nav-btn.next {
  right: var(--prada-space-5);
}

.prada-modal-gallery .gallery-nav-icon {
  width: 24px;
  height: 24px;
}

/* 載入狀態 */
.prada-modal-gallery .gallery-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--prada-space-3);
}

.prada-modal-gallery .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--prada-white);
  border-radius: 50%;
  animation: prada-spin 0.8s linear infinite;
}

.prada-modal-gallery .loading-text {
  font-size: var(--prada-text-sm);
  color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   Footer - 縮圖導航
   ======================================== */

.prada-modal-gallery .prada-modal-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--prada-space-5);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  border: none;
  display: flex;
  justify-content: center;
  z-index: var(--prada-modal-z-header);
}

.prada-modal-gallery .gallery-thumbnails {
  display: flex;
  gap: var(--prada-space-2);
  overflow-x: auto;
  max-width: 100%;
  padding: var(--prada-space-2);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.prada-modal-gallery .gallery-thumbnails::-webkit-scrollbar {
  height: 4px;
}

.prada-modal-gallery .gallery-thumbnails::-webkit-scrollbar-track {
  background: transparent;
}

.prada-modal-gallery .gallery-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--prada-radius-sm);
}

.prada-modal-gallery .thumbnail-item {
  flex: 0 0 80px;
  height: 80px;
  border: 2px solid transparent;
  border-radius: var(--prada-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  opacity: 0.5;
}

.prada-modal-gallery .thumbnail-item:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.prada-modal-gallery .thumbnail-item.active {
  border-color: var(--prada-primary);
  opacity: 1;
}

.prada-modal-gallery .thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   鍵盤提示
   ======================================== */

.prada-modal-gallery .keyboard-hints {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--prada-space-4);
  padding: var(--prada-space-3) var(--prada-space-4);
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: var(--prada-radius-lg);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-gallery .keyboard-hints.visible {
  opacity: 1;
}

.prada-modal-gallery .keyboard-hint {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
  font-size: var(--prada-text-xs);
  color: rgba(255, 255, 255, 0.8);
}

.prada-modal-gallery .keyboard-key {
  padding: var(--prada-space-1) var(--prada-space-2);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--prada-radius-sm);
  font-family: var(--prada-font-mono);
  font-size: var(--prada-text-xs);
  color: var(--prada-white);
}

/* ========================================
   手勢提示（觸控裝置）
   ======================================== */

.prada-modal-gallery .gesture-hint {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--prada-space-2) var(--prada-space-4);
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: var(--prada-radius-full);
  font-size: var(--prada-text-xs);
  color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  white-space: nowrap;
  opacity: 0;
  animation: gesture-hint-fade 3s ease-in-out;
}

@keyframes gesture-hint-fade {
  0%, 100% { opacity: 0; }
  10%, 90% { opacity: 1; }
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 768px) {
  .prada-modal-gallery .gallery-main-image {
    padding: var(--prada-space-16) var(--prada-space-5);
  }

  .prada-modal-gallery .gallery-nav-btn {
    width: 40px;
    height: 40px;
  }

  .prada-modal-gallery .gallery-nav-btn.prev {
    left: var(--prada-space-3);
  }

  .prada-modal-gallery .gallery-nav-btn.next {
    right: var(--prada-space-3);
  }

  .prada-modal-gallery .thumbnail-item {
    flex: 0 0 60px;
    height: 60px;
  }

  .prada-modal-gallery .keyboard-hints {
    display: none;
  }
}

@media (max-width: 480px) {
  .prada-modal-gallery .prada-modal-header {
    padding: var(--prada-space-4);
  }

  .prada-modal-gallery .prada-modal-footer {
    padding: var(--prada-space-4);
  }

  .prada-modal-gallery .gallery-tool-btn {
    width: 36px;
    height: 36px;
  }

  .prada-modal-gallery .gallery-nav-btn {
    display: none; /* 手機上使用滑動手勢 */
  }
}

/* ========================================
   動畫
   ======================================== */

/* ========================================
   觸控支援
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* 觸控裝置上啟用滑動手勢 */
  .prada-modal-gallery .gallery-main-image {
    touch-action: pan-x pinch-zoom;
  }
}

/**
 * Prada Modal - Multi-Step (多步驟流程)
 * 用於引導式多步驟流程（結帳、表單填寫等）
 *
 * 設計特點：
 * - 清晰的步驟指示器
 * - 步驟進度視覺化
 * - 前進/後退導航
 * - 步驟驗證狀態
 *
 * @version 1.0.0
 */

/* ========================================
   多步驟 Modal - 尺寸與佈局
   ======================================== */

.prada-modal-multistep .prada-modal-dialog {
  max-width: var(--prada-modal-lg); /* 680px */
}

/* ========================================
   Header - 步驟指示器
   ======================================== */

.prada-modal-multistep .prada-modal-header {
  padding: var(--prada-space-6) var(--prada-modal-padding-md);
  border-bottom: var(--prada-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-5);
}

/* 標題區域 */
.prada-modal-multistep .header-title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prada-modal-multistep .prada-modal-title {
  font-size: var(--prada-text-xl);
  font-weight: var(--prada-font-bold);
  color: var(--naily-text-primary);
}

/* 步驟指示器 */
.prada-modal-multistep .step-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.prada-modal-multistep .step-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--prada-space-2);
  position: relative;
  z-index: 1;
}

/* 步驟連接線 */
.prada-modal-multistep .step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background-color: var(--naily-gray-200);
  z-index: 0;
  transition: background-color var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-multistep .step-item.completed:not(:last-child)::after {
  background-color: var(--prada-primary);
}

/* 步驟圓圈 */
.prada-modal-multistep .step-circle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--prada-white);
  border: 2px solid var(--naily-gray-300);
  border-radius: 50%;
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-tertiary);
  transition: all var(--prada-duration-normal) var(--prada-ease-out);
  z-index: 1;
  position: relative;
}

/* 步驟狀態 - 當前 */
.prada-modal-multistep .step-item.active .step-circle {
  border-color: var(--prada-primary);
  background-color: var(--prada-primary);
  color: var(--prada-white);
  box-shadow: 0 0 0 4px rgba(190, 31, 72, 0.1);
}

/* 步驟狀態 - 已完成 */
.prada-modal-multistep .step-item.completed .step-circle {
  border-color: var(--prada-primary);
  background-color: var(--prada-primary);
  color: var(--prada-white);
}

.prada-modal-multistep .step-item.completed .step-circle::after {
  content: '✓';
  position: absolute;
}

/* 步驟標籤 */
.prada-modal-multistep .step-label {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  text-align: center;
  white-space: nowrap;
  transition: color var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-multistep .step-item.active .step-label {
  color: var(--prada-primary);
  font-weight: var(--prada-font-semibold);
}

.prada-modal-multistep .step-item.completed .step-label {
  color: var(--naily-text-secondary);
}

/* ========================================
   Body - 步驟內容區
   ======================================== */

.prada-modal-multistep .prada-modal-body {
  padding: var(--prada-space-8) var(--prada-modal-padding-md);
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
}

/* 步驟容器 */
.prada-modal-multistep .step-content {
  display: none;
  animation: step-fade-in var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-multistep .step-content.active {
  display: block;
}

/* 步驟標題 */
.prada-modal-multistep .step-title {
  font-size: var(--prada-text-lg);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
  margin-bottom: var(--prada-space-3);
}

.prada-modal-multistep .step-description {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
  margin-bottom: var(--prada-space-6);
}

/* 表單群組 */
.prada-modal-multistep .form-group {
  margin-bottom: var(--prada-space-5);
}

.prada-modal-multistep .form-label {
  display: block;
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
  margin-bottom: var(--prada-space-2);
}

.prada-modal-multistep .form-label.required::after {
  content: '*';
  color: var(--prada-error);
  margin-left: var(--prada-space-1);
}

.prada-modal-multistep .form-input,
.prada-modal-multistep .form-select,
.prada-modal-multistep .form-textarea {
  width: 100%;
  padding: var(--prada-space-3) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  line-height: var(--prada-leading-normal);
  color: var(--naily-text-primary);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  outline: none;
}

.prada-modal-multistep .form-textarea {
  min-height: 100px;
  resize: vertical;
}

.prada-modal-multistep .form-input:focus,
.prada-modal-multistep .form-select:focus,
.prada-modal-multistep .form-textarea:focus {
  border-color: var(--prada-primary);
  box-shadow: 0 0 0 3px rgba(190, 31, 72, 0.1);
}

.prada-modal-multistep .form-input.is-invalid,
.prada-modal-multistep .form-select.is-invalid,
.prada-modal-multistep .form-textarea.is-invalid {
  border-color: var(--prada-error);
}

.prada-modal-multistep .form-hint {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  margin-top: var(--prada-space-1);
}

.prada-modal-multistep .form-error {
  font-size: var(--prada-text-xs);
  color: var(--prada-error);
  margin-top: var(--prada-space-1);
}

/* 選項群組（Radio/Checkbox）*/
.prada-modal-multistep .option-group {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-3);
}

.prada-modal-multistep .option-item {
  display: flex;
  align-items: center;
  padding: var(--prada-space-4);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-multistep .option-item:hover {
  border-color: var(--prada-primary);
  background-color: rgba(190, 31, 72, 0.02);
}

.prada-modal-multistep .option-item.selected {
  border-color: var(--prada-primary);
  background-color: rgba(190, 31, 72, 0.05);
}

.prada-modal-multistep .option-radio,
.prada-modal-multistep .option-checkbox {
  margin-right: var(--prada-space-3);
  accent-color: var(--prada-primary);
}

.prada-modal-multistep .option-content {
  flex: 1 1;
}

.prada-modal-multistep .option-title {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
  margin-bottom: var(--prada-space-1);
}

.prada-modal-multistep .option-description {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
}

/* 摘要卡片（最後一步）*/
.prada-modal-multistep .summary-card {
  padding: var(--prada-space-5);
  background-color: var(--naily-bg-secondary);
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-md);
  margin-bottom: var(--prada-space-4);
}

.prada-modal-multistep .summary-section {
  margin-bottom: var(--prada-space-4);
}

.prada-modal-multistep .summary-section:last-child {
  margin-bottom: 0;
}

.prada-modal-multistep .summary-title {
  font-size: var(--prada-text-xs);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--prada-space-2);
}

.prada-modal-multistep .summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  margin-bottom: var(--prada-space-2);
}

.prada-modal-multistep .summary-value {
  color: var(--naily-text-primary);
  font-weight: var(--prada-font-medium);
}

/* ========================================
   Footer - 導航按鈕
   ======================================== */

.prada-modal-multistep .prada-modal-footer {
  padding: var(--prada-space-5) var(--prada-modal-padding-md) var(--prada-space-6);
  border-top: var(--prada-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 左側：返回按鈕 */
.prada-modal-multistep .footer-left {
  display: flex;
  gap: var(--prada-space-3);
}

.prada-modal-multistep .btn-back,
.prada-modal-multistep .btn-cancel {
  padding: var(--prada-space-2) var(--prada-space-5);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-secondary);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-multistep .btn-back:hover,
.prada-modal-multistep .btn-cancel:hover {
  background-color: var(--naily-bg-hover);
  border-color: var(--naily-gray-400);
}

.prada-modal-multistep .btn-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 右側：下一步/完成按鈕 */
.prada-modal-multistep .footer-right {
  display: flex;
  gap: var(--prada-space-3);
  align-items: center;
}

.prada-modal-multistep .btn-next,
.prada-modal-multistep .btn-finish {
  padding: var(--prada-space-2) var(--prada-space-6);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
}

.prada-modal-multistep .btn-next:hover,
.prada-modal-multistep .btn-finish:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-multistep .btn-next:disabled,
.prada-modal-multistep .btn-finish:disabled {
  background-color: var(--naily-gray-300);
  cursor: not-allowed;
  box-shadow: none;
}

/* 步驟進度文字 */
.prada-modal-multistep .step-progress-text {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  font-family: var(--prada-font-mono);
}

/* ========================================
   動畫
   ======================================== */

@keyframes step-fade-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 768px) {
  .prada-modal-multistep .step-indicator {
    gap: var(--prada-space-2);
  }

  .prada-modal-multistep .step-label {
    display: none;
  }

  .prada-modal-multistep .step-circle {
    width: 28px;
    height: 28px;
    font-size: var(--prada-text-xs);
  }
}

@media (max-width: 480px) {
  .prada-modal-multistep .prada-modal-header,
  .prada-modal-multistep .prada-modal-body,
  .prada-modal-multistep .prada-modal-footer {
    padding-left: var(--prada-space-4);
    padding-right: var(--prada-space-4);
  }

  .prada-modal-multistep .prada-modal-footer {
    flex-wrap: wrap;
  }

  .prada-modal-multistep .footer-left,
  .prada-modal-multistep .footer-right {
    width: 100%;
    justify-content: space-between;
  }

  .prada-modal-multistep .btn-back,
  .prada-modal-multistep .btn-cancel {
    flex: 1 1;
  }

  .prada-modal-multistep .btn-next,
  .prada-modal-multistep .btn-finish {
    flex: 1 1;
  }
}

/**
 * Prada Modal - Product Detail (商品詳情)
 * 用於快速查看商品詳細資訊
 *
 * 設計特點：
 * - 左右分欄佈局（圖片 40% + 資訊 60%）
 * - 大圖展示區
 * - 完整的商品資訊（價格、規格、庫存）
 * - 快速加入購物車
 *
 * @version 1.0.0
 */

/* ========================================
   商品詳情 Modal - 尺寸與佈局
   ======================================== */

.prada-modal-product .prada-modal-dialog {
  max-width: var(--prada-modal-xl); /* 920px */
}

.prada-modal-product .prada-modal-content {
  overflow: visible; /* 允許圖片放大效果溢出 */
}

/* ========================================
   Header 設計 - 極簡無邊框
   ======================================== */

.prada-modal-product .prada-modal-header {
  position: absolute !important;
  top: var(--prada-space-4) !important;
  right: var(--prada-space-4) !important;
  left: auto !important;
  left: initial !important;
  padding: 0;
  border: none;
  background: transparent;
  z-index: var(--prada-modal-z-close);
}

.prada-modal-product .prada-modal-close {
  background-color: var(--prada-white);
  box-shadow: var(--prada-shadow-md);
}

.prada-modal-product .prada-modal-close:hover {
  background-color: var(--naily-gray-50);
}

/* ========================================
   Body - 分欄佈局
   ======================================== */

.prada-modal-product .prada-modal-body {
  padding: 0;
  display: flex;
  gap: 0;
  max-height: 600px;
}

/* 左側：圖片區 (40%) */
.prada-modal-product .product-gallery {
  flex: 0 0 40%;
  background-color: var(--naily-gray-50);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.prada-modal-product .product-main-image {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--prada-space-8);
  position: relative;
  overflow: hidden;
}

.prada-modal-product .product-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform var(--prada-duration-normal) var(--prada-ease-out);
}

.prada-modal-product .product-image:hover {
  transform: scale(1.05);
}

/* 圖片縮圖列表 */
.prada-modal-product .product-thumbnails {
  display: flex;
  gap: var(--prada-space-2);
  padding: var(--prada-space-4);
  overflow-x: auto;
  background-color: var(--prada-white);
}

.prada-modal-product .product-thumbnails::-webkit-scrollbar {
  height: 4px;
}

.prada-modal-product .product-thumbnails::-webkit-scrollbar-thumb {
  background: var(--naily-gray-400);
  border-radius: var(--prada-radius-sm);
}

.prada-modal-product .thumbnail-item {
  flex: 0 0 60px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: var(--prada-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-product .thumbnail-item:hover {
  border-color: var(--naily-gray-400);
}

.prada-modal-product .thumbnail-item.active {
  border-color: var(--prada-primary);
}

.prada-modal-product .thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右側：商品資訊 (60%) */
.prada-modal-product .product-info {
  flex: 0 0 60%;
  padding: var(--prada-space-8);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 商品標題 */
.prada-modal-product .product-title {
  font-size: var(--prada-text-2xl);
  font-weight: var(--prada-font-bold);
  color: var(--naily-text-primary);
  line-height: var(--prada-leading-tight);
  margin-bottom: var(--prada-space-2);
}

.prada-modal-product .product-subtitle {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  margin-bottom: var(--prada-space-6);
}

/* 評分 */
.prada-modal-product .product-rating {
  display: flex;
  align-items: center;
  gap: var(--prada-space-2);
  margin-bottom: var(--prada-space-6);
}

.prada-modal-product .rating-stars {
  display: flex;
  gap: 2px;
  color: var(--prada-gold);
}

.prada-modal-product .rating-text {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-tertiary);
}

/* 價格 */
.prada-modal-product .product-price {
  display: flex;
  align-items: baseline;
  gap: var(--prada-space-3);
  margin-bottom: var(--prada-space-6);
  padding-bottom: var(--prada-space-6);
  border-bottom: var(--prada-border-light);
}

.prada-modal-product .price-current {
  font-size: var(--prada-text-3xl);
  font-weight: var(--prada-font-bold);
  color: var(--prada-primary);
}

.prada-modal-product .price-original {
  font-size: var(--prada-text-lg);
  color: var(--naily-text-tertiary);
  text-decoration: line-through;
}

.prada-modal-product .price-discount {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-error);
  background-color: rgba(239, 68, 68, 0.1);
  padding: var(--prada-space-1) var(--prada-space-2);
  border-radius: var(--prada-radius-sm);
}

/* 商品描述 */
.prada-modal-product .product-description {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
  margin-bottom: var(--prada-space-6);
}

/* 規格選擇 */
.prada-modal-product .product-options {
  margin-bottom: var(--prada-space-6);
}

.prada-modal-product .option-group {
  margin-bottom: var(--prada-space-5);
}

.prada-modal-product .option-label {
  display: block;
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
  margin-bottom: var(--prada-space-3);
}

.prada-modal-product .option-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--prada-space-2);
}

.prada-modal-product .option-item {
  padding: var(--prada-space-2) var(--prada-space-4);
  font-size: var(--prada-text-sm);
  color: var(--naily-text-primary);
  background-color: var(--prada-white);
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-product .option-item:hover {
  border-color: var(--prada-primary);
  background-color: rgba(190, 31, 72, 0.05);
}

.prada-modal-product .option-item.active {
  border-color: var(--prada-primary);
  background-color: var(--prada-primary);
  color: var(--prada-white);
}

.prada-modal-product .option-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* 數量選擇 */
.prada-modal-product .quantity-selector {
  display: flex;
  align-items: center;
  gap: var(--prada-space-4);
  margin-bottom: var(--prada-space-6);
}

.prada-modal-product .quantity-label {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
}

.prada-modal-product .quantity-control {
  display: flex;
  align-items: center;
  border: var(--prada-border-normal);
  border-radius: var(--prada-radius-md);
  overflow: hidden;
}

.prada-modal-product .quantity-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--prada-white);
  border: none;
  cursor: pointer;
  color: var(--naily-text-primary);
  transition: background-color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-product .quantity-btn:hover {
  background-color: var(--naily-bg-hover);
}

.prada-modal-product .quantity-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.prada-modal-product .quantity-input {
  width: 50px;
  height: 32px;
  text-align: center;
  border: none;
  border-left: var(--prada-border-light);
  border-right: var(--prada-border-light);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  outline: none;
}

.prada-modal-product .stock-status {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
}

.prada-modal-product .stock-status.in-stock {
  color: var(--prada-success);
}

.prada-modal-product .stock-status.low-stock {
  color: var(--prada-warning);
}

.prada-modal-product .stock-status.out-of-stock {
  color: var(--prada-error);
}

/* ========================================
   Footer - 操作按鈕
   ======================================== */

.prada-modal-product .prada-modal-footer {
  padding: var(--prada-space-6) var(--prada-space-8);
  border-top: var(--prada-border-light);
  display: flex;
  gap: var(--prada-space-3);
}

.prada-modal-product .btn-add-cart {
  flex: 1 1;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-product .btn-add-cart:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-product .btn-buy-now {
  flex: 1 1;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-primary);
  background-color: var(--prada-white);
  border: 2px solid var(--prada-primary);
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-product .btn-buy-now:hover {
  background-color: var(--prada-primary);
  color: var(--prada-white);
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 768px) {
  .prada-modal-product .prada-modal-body {
    flex-direction: column;
    max-height: 80vh;
  }

  .prada-modal-product .product-gallery,
  .prada-modal-product .product-info {
    flex: 1 1 auto;
  }

  .prada-modal-product .product-gallery {
    max-height: 300px;
  }

  .prada-modal-product .product-info {
    padding: var(--prada-space-5);
  }

  .prada-modal-product .prada-modal-footer {
    padding: var(--prada-space-4) var(--prada-space-5);
  }
}

@media (max-width: 480px) {
  .prada-modal-product .product-title {
    font-size: var(--prada-text-xl);
  }

  .prada-modal-product .price-current {
    font-size: var(--prada-text-2xl);
  }

  .prada-modal-product .prada-modal-footer {
    flex-direction: column;
  }

  .prada-modal-product .btn-add-cart,
  .prada-modal-product .btn-buy-now {
    width: 100%;
  }
}

/**
 * Prada Modal - Order Success (訂單成功)
 * 用於顯示訂單成功訊息和後續動作
 *
 * 設計特點：
 * - 慶祝式視覺設計
 * - 清晰的訂單號碼
 * - 明確的下一步動作
 * - 品牌色強調
 *
 * @version 1.0.0
 */

/* ========================================
   訂單成功 Modal - 尺寸與佈局
   ======================================== */

.prada-modal-success .prada-modal-dialog {
  max-width: var(--prada-modal-sm); /* 440px */
}

.prada-modal-success .prada-modal-content {
  text-align: center;
  overflow: visible;
}

/* ========================================
   Header 設計 - 最小化
   ======================================== */

.prada-modal-success .prada-modal-header {
  position: absolute !important;
  top: var(--prada-space-4) !important;
  right: var(--prada-space-4) !important;
  left: auto !important;
  left: initial !important;
  padding: 0;
  border: none;
  z-index: var(--prada-modal-z-close);
}

/* ========================================
   Body - 成功訊息區域
   ======================================== */

.prada-modal-success .prada-modal-body {
  padding: var(--prada-space-12) var(--prada-modal-padding-md) var(--prada-space-8);
}

/* 成功圖示動畫 */
.prada-modal-success .success-icon-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto var(--prada-space-6);
}

.prada-modal-success .success-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(190, 31, 72, 0.1) 0%,
    rgba(190, 31, 72, 0.05) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: success-scale-in 0.5s var(--prada-ease-out);
}

.prada-modal-success .success-checkmark {
  width: 50px;
  height: 50px;
  color: var(--prada-primary);
  animation: success-checkmark-in 0.6s 0.3s var(--prada-ease-out) both;
}

/* 裝飾性圓環 */
.prada-modal-success .success-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--prada-primary);
  border-radius: 50%;
  opacity: 0;
  animation: success-ring-pulse 1.5s 0.5s ease-out;
}

/* 成功標題 */
.prada-modal-success .success-title {
  font-size: var(--prada-text-2xl);
  font-weight: var(--prada-font-bold);
  color: var(--prada-primary);
  margin-bottom: var(--prada-space-3);
  animation: success-fade-up 0.5s 0.4s var(--prada-ease-out) both;
}

.prada-modal-success .success-message {
  font-size: var(--prada-text-base);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
  margin-bottom: var(--prada-space-6);
  animation: success-fade-up 0.5s 0.5s var(--prada-ease-out) both;
}

/* 訂單資訊卡片 */
.prada-modal-success .order-info-card {
  padding: var(--prada-space-5);
  background: linear-gradient(135deg,
    rgba(190, 31, 72, 0.03) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  border: var(--prada-border-light);
  border-radius: var(--prada-radius-lg);
  margin-bottom: var(--prada-space-6);
  animation: success-fade-up 0.5s 0.6s var(--prada-ease-out) both;
}

.prada-modal-success .order-number-label {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--prada-space-2);
}

.prada-modal-success .order-number {
  font-size: var(--prada-text-xl);
  font-weight: var(--prada-font-bold);
  color: var(--prada-primary);
  font-family: var(--prada-font-mono);
  letter-spacing: 0.02em;
  margin-bottom: var(--prada-space-4);
}

/* 訂單詳情 */
.prada-modal-success .order-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--prada-space-3);
  gap: var(--prada-space-3);
  text-align: left;
}

.prada-modal-success .detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-1);
}

.prada-modal-success .detail-label {
  font-size: var(--prada-text-xs);
  color: var(--naily-text-tertiary);
}

.prada-modal-success .detail-value {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--naily-text-primary);
}

/* 下一步提示 */
.prada-modal-success .next-steps {
  padding: var(--prada-space-4);
  background-color: var(--naily-bg-secondary);
  border-radius: var(--prada-radius-md);
  margin-bottom: var(--prada-space-6);
  text-align: left;
  animation: success-fade-up 0.5s 0.7s var(--prada-ease-out) both;
}

.prada-modal-success .next-steps-title {
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-semibold);
  color: var(--naily-text-primary);
  margin-bottom: var(--prada-space-3);
}

.prada-modal-success .next-steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--prada-space-2);
}

.prada-modal-success .next-step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--prada-space-2);
  font-size: var(--prada-text-sm);
  color: var(--naily-text-secondary);
  line-height: var(--prada-leading-relaxed);
}

.prada-modal-success .step-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--prada-primary);
  color: var(--prada-white);
  border-radius: 50%;
  font-size: var(--prada-text-xs);
  font-weight: var(--prada-font-bold);
}

/* ========================================
   Footer - 操作按鈕
   ======================================== */

.prada-modal-success .prada-modal-footer {
  flex-direction: column;
  padding: var(--prada-space-6) var(--prada-modal-padding-md) var(--prada-space-8);
  border-top: none;
  gap: var(--prada-space-3);
  animation: success-fade-up 0.5s 0.8s var(--prada-ease-out) both;
}

.prada-modal-success .btn-primary-action {
  width: 100%;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-base);
  font-weight: var(--prada-font-semibold);
  color: var(--prada-white);
  background-color: var(--prada-primary);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-success .btn-primary-action:hover {
  background-color: var(--prada-primary-dark);
  box-shadow: var(--prada-shadow-primary);
}

.prada-modal-success .btn-secondary-action {
  width: 100%;
  padding: var(--prada-space-3) var(--prada-space-6);
  font-size: var(--prada-text-sm);
  font-weight: var(--prada-font-medium);
  color: var(--prada-primary);
  background-color: rgba(190, 31, 72, 0.1);
  border: none;
  border-radius: var(--prada-radius-md);
  cursor: pointer;
  transition: all var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-success .btn-secondary-action:hover {
  background-color: rgba(190, 31, 72, 0.15);
}

.prada-modal-success .btn-text-action {
  font-size: var(--prada-text-sm);
  color: var(--naily-text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--prada-space-2);
  transition: color var(--prada-duration-fast) var(--prada-ease-out);
}

.prada-modal-success .btn-text-action:hover {
  color: var(--prada-primary);
  text-decoration: underline;
}

/* ========================================
   動畫定義
   ======================================== */

@keyframes success-scale-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes success-checkmark-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes success-ring-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes success-fade-up {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ========================================
   響應式設計
   ======================================== */

@media (max-width: 480px) {
  .prada-modal-success .prada-modal-body {
    padding: var(--prada-space-8) var(--prada-space-4) var(--prada-space-6);
  }

  .prada-modal-success .success-icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .prada-modal-success .success-circle {
    width: 80px;
    height: 80px;
  }

  .prada-modal-success .success-checkmark {
    width: 40px;
    height: 40px;
  }

  .prada-modal-success .success-title {
    font-size: var(--prada-text-xl);
  }

  .prada-modal-success .order-details {
    grid-template-columns: 1fr;
  }

  .prada-modal-success .prada-modal-footer {
    padding: var(--prada-space-4) var(--prada-space-4) var(--prada-space-6);
  }
}

/* ========================================
   減少動畫偏好支援
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .prada-modal-success .success-circle,
  .prada-modal-success .success-checkmark,
  .prada-modal-success .success-ring,
  .prada-modal-success .success-title,
  .prada-modal-success .success-message,
  .prada-modal-success .order-info-card,
  .prada-modal-success .next-steps,
  .prada-modal-success .prada-modal-footer {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/**
 * Prada Modal System - Unified Import
 * 統一導入所有 Prada Modal 樣式
 *
 * 使用方式：
 * import 'assets/css/prada/prada-modals.css';
 *
 * 或者根據需要選擇性導入：
 * import 'assets/css/prada/prada-design-tokens.css';
 * import 'assets/css/prada/prada-modal-base.css';
 * import 'assets/css/prada/prada-modal-auth.css';
 *
 * @version 1.0.0
 * @date 2026-01-28
 */

/* ========================================
   核心系統
   ======================================== */

/* 設計 Token 系統 - 必須最先載入 */

/* 基礎 Modal 樣式 - 第二優先 */

/* ========================================
   場景專用 Modal (按字母順序)
   ======================================== */

/* 1. 地址管理器 - Address Manager */

/* 2. 會員認證 - Authentication */

/* 3. 購物車總覽 - Cart Summary */

/* 4. 即時客服 - Live Chat */

/* 5. 結帳確認 - Checkout Confirmation */

/* 6. 確認對話框 - Confirmation Dialog */

/* 7. 優惠券選擇器 - Coupon Selector */

/* 8. 篩選面板 - Filter Panel */

/* 9. 圖片畫廊 - Image Gallery */

/* 10. 多步驟流程 - Multi-Step Modal */

/* 11. 商品詳情 - Product Detail */

/* 12. 訂單成功 - Order Success */

/**
 * ========================================
 * 檔案清單
 * ========================================
 *
 * 核心檔案 (2):
 * - prada-design-tokens.css    (4.2 KB) - 設計變數系統
 * - prada-modal-base.css        (9.8 KB) - 基礎 Modal 樣式
 *
 * 場景檔案 (12):
 * - prada-modal-address.css     - 地址管理器
 * - prada-modal-auth.css        - 會員認證
 * - prada-modal-cart.css        - 購物車總覽
 * - prada-modal-chat.css        - 即時客服
 * - prada-modal-checkout.css    - 結帳確認
 * - prada-modal-confirm.css     - 確認對話框
 * - prada-modal-coupon.css      - 優惠券選擇器
 * - prada-modal-filter.css      - 篩選面板
 * - prada-modal-gallery.css     - 圖片畫廊
 * - prada-modal-multistep.css   - 多步驟流程
 * - prada-modal-product.css     - 商品詳情
 * - prada-modal-success.css     - 訂單成功
 *
 * ========================================
 * 設計原則
 * ========================================
 *
 * 1. 零技術債
 *    - 所有色彩引用 Naily 設計系統
 *    - 所有 z-index 使用統一變數
 *    - 無硬編碼值
 *
 * 2. 品牌一致性
 *    - 使用 Naily 深紅色 (#BE1F48) 作為主色
 *    - 統一圓角、間距、陰影
 *
 * 3. 無障礙支援
 *    - 符合 WCAG 2.1 AA 標準
 *    - 鍵盤導航支援
 *    - 高對比度模式
 *    - 減少動畫偏好
 *
 * 4. 響應式設計
 *    - 手機優先設計
 *    - 三個斷點 (桌面、平板、手機)
 *
 * 5. 效能優化
 *    - CSS 變數優化
 *    - 無重複樣式
 *    - 合理的選擇器權重
 */