/**
 * ECShop 基礎樣式與變數
 * base.css
 * 
 * 檔案說明：
 * 此檔案為 ECShop 電商系統的基礎樣式定義，包含全站共用的CSS變數、
 * 重置樣式、通用元件樣式等核心設定。為整個網站提供一致的視覺基礎。
 * 
 * 主要功能：
 * - CSS 變數定義（顏色、陰影、圓角、過渡效果等）
 * - 全域重置樣式（margin、padding、box-sizing）
 * - 通用按鈕樣式定義
 * - 卡片基礎樣式（service-card、store-card等）
 * - Action組件樣式（現代化設計風格）
 * - 圖片元件樣式（thumbnail等）
 * - 滾動條自定義樣式
 * - 無障礙設計支援（focus狀態、減少動畫等）
 * 
 * 技術特點：
 * - 使用CSS變數提高維護性
 * - 提供IE11向下兼容的fallback值
 * - 支援現代瀏覽器的backdrop-filter等特效
 * - 遵循無障礙設計原則
 * - 支援用戶偏好設定（減少動畫等）
 * 
 * 適用版本：
 * - PHP 7.3+
 * - ECShop 4.x
 * - cls_template 模板系統
 * 
 * 相依性：
 * - 字體：Microsoft JhengHei、PingFang TC、Noto Sans TC
 * - 無外部框架依賴，純CSS實現
 * 
 * 更新日期：2024
 * 版本：1.0
 */

/* ==========================================================================
  基礎設定與重置
  ========================================================================== */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* CSS變數定義 - 提供IE兼容性fallback */
:root {
   --primary-color: #3b82f6;
   --primary-hover: #2563eb;
   --secondary-color: #8b7355;
   --secondary-hover: #a08654;
   --text-primary: #1f2937;
   --text-secondary: #64748b;
   --border-color: #e5e7eb;
   --background: #ffffff;
   --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
   --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
   --shadow-lg: 0 8px 25px rgba(44, 62, 80, 0.08);
   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --transition: all 0.3s ease;
}

body, html {
   font-size: 16px;
   line-height: 1.6;
   color: #1f2937; /* IE fallback */
   color: var(--text-primary);
   font-family: 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif;
   background: #ffffff; /* IE fallback */
   background: var(--background);
}

a {
   color: #1f2937; /* IE fallback */
   color: var(--text-primary);
   text-decoration: none;
   transition: color 0.2s ease;
}

a:hover {
   color: #2563eb; /* IE fallback */
   color: var(--primary-hover);
}

/* 通用按鈕樣式 */
.btn, 
button, 
input[type="submit"], 
input[type="button"] {
   border-radius: 12px; /* IE fallback */
   border-radius: var(--radius-md);
   transition: all 0.3s ease; /* IE fallback */
   transition: var(--transition);
   font-size: 16px;
   font-weight: 600;
   padding: 12px 25px;
   border: none;
   cursor: pointer;
}

/* 通用卡片基礎樣式 */
.card-base,
.service-card,
.store-card,
.mobile-card,
.footer-card {
   background: #ffffff; /* IE fallback */
   background: var(--background);
   border-radius: 16px; /* IE fallback */
   border-radius: var(--radius-lg);
   border: 2px solid #f1f2f6;
   transition: all 0.3s ease; /* IE fallback */
   transition: var(--transition);
   box-shadow: 0 8px 25px rgba(44, 62, 80, 0.08); /* IE fallback */
   box-shadow: var(--shadow-lg);
   position: relative;
   overflow: hidden;
}

.card-base::before,
.service-card::before,
.store-card::before,
.mobile-card::before,
.footer-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, #8b7355, #a08654); /* IE fallback */
   background: linear-gradient(90deg, var(--secondary-color), var(--secondary-hover));
   transform: scaleX(0);
   transition: transform 0.3s ease;
   transform-origin: left;
}

.card-base:hover,
.service-card:hover,
.store-card:hover,
.mobile-card:hover,
.footer-card:hover {
   transform: translateY(-8px);
   border-color: #8b7355; /* IE fallback */
   border-color: var(--secondary-color);
   box-shadow: 0 15px 40px rgba(44, 62, 80, 0.15);
}

.card-base:hover::before,
.service-card:hover::before,
.store-card:hover::before,
.mobile-card:hover::before,
.footer-card:hover::before {
   transform: scaleX(1);
}

/* Action 樣式 - 現代化設計 */
.action {
   background: #ffffff; /* IE fallback */
   background: var(--background);
   padding: 16px 20px;
   border-radius: 12px; /* IE fallback */
   border-radius: var(--radius-md);
   border: 1px solid #e5e7eb; /* IE fallback */
   border: 1px solid var(--border-color);
   box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* IE fallback */
   box-shadow: var(--shadow-sm);
   transition: all 0.3s ease; /* IE fallback */
   transition: var(--transition);
   position: relative;
   overflow: hidden;
}

.action::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, #3b82f6, #8b7355); /* IE fallback */
   background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
   transform: scaleX(0);
   transition: transform 0.3s ease;
   transform-origin: left;
}

.action:hover {
   transform: translateY(-4px);
   border-color: #3b82f6; /* IE fallback */
   border-color: var(--primary-color);
   box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.action:hover::before {
   transform: scaleX(1);
}

/* Action 內容樣式 */
.action .action-title {
   font-size: 18px;
   font-weight: 600;
   color: #1f2937; /* IE fallback */
   color: var(--text-primary);
   margin-bottom: 8px;
   line-height: 1.4;
}

.action .action-description {
   font-size: 14px;
   color: #64748b; /* IE fallback */
   color: var(--text-secondary);
   line-height: 1.5;
   margin-bottom: 12px;
}

.action .action-button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: linear-gradient(135deg, #3b82f6, #2563eb); /* IE fallback */
   background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
   color: white;
   padding: 10px 16px;
   border-radius: 8px; /* IE fallback */
   border-radius: var(--radius-sm);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   transition: all 0.2s ease; /* IE fallback */
   transition: var(--transition);
   border: none;
   cursor: pointer;
}

.action .action-button:hover {
   background: linear-gradient(135deg, #2563eb, #1d4ed8);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
   color: white;
}

.action .action-button:active {
   transform: translateY(0);
}

/* Action 圖標樣式 */
.action .action-icon {
   width: 20px;
   height: 20px;
   opacity: 0.8;
   transition: opacity 0.2s ease;
}

.action:hover .action-icon {
   opacity: 1;
}

/* Action 變體樣式 */
.action.action-secondary {
   border-color: #8b7355; /* IE fallback */
   border-color: var(--secondary-color);
}

.action.action-secondary::before {
   background: linear-gradient(90deg, #8b7355, #a08654); /* IE fallback */
   background: linear-gradient(90deg, var(--secondary-color), var(--secondary-hover));
}

.action.action-secondary:hover {
   border-color: #8b7355; /* IE fallback */
   border-color: var(--secondary-color);
   box-shadow: 0 8px 25px rgba(139, 115, 85, 0.15);
}

.action.action-secondary .action-button {
   background: linear-gradient(135deg, #8b7355, #a08654); /* IE fallback */
   background: linear-gradient(135deg, var(--secondary-color), var(--secondary-hover));
}

.action.action-secondary .action-button:hover {
   background: linear-gradient(135deg, #a08654, #8b7355);
}

/* 緊湊版本 */
.action.action-compact {
   padding: 12px 16px;
}

.action.action-compact .action-title {
   font-size: 16px;
   margin-bottom: 4px;
}

.action.action-compact .action-description {
   font-size: 13px;
   margin-bottom: 8px;
}

.action.action-compact .action-button {
   padding: 8px 12px;
   font-size: 13px;
}

/* 商品卡片圓角 */
.thumbnail, 
.shop-pd .thumbnail {
   border-radius: 16px; /* IE fallback */
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* IE fallback */
   box-shadow: var(--shadow-md);
   transition: all 0.3s ease; /* IE fallback */
   transition: var(--transition);
}

/* 自定義滾動條 */
::-webkit-scrollbar {
   width: 8px;
}

::-webkit-scrollbar-track {
   background: #f1f2f6;
}

::-webkit-scrollbar-thumb {
   background: linear-gradient(135deg, #8b7355, #a08654); /* IE fallback */
   background: linear-gradient(135deg, var(--secondary-color), var(--secondary-hover));
   border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(135deg, #a08654, #8b7355); /* IE fallback */
   background: linear-gradient(135deg, var(--secondary-hover), var(--secondary-color));
}

/* 聚焦狀態增強 */
.btn:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
   outline: 2px solid #3b82f6; /* IE fallback */
   outline: 2px solid var(--primary-color);
   outline-offset: 2px;
}

/* 減少動畫設定 */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
       animation-duration: 0.01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: 0.01ms !important;
   }
}