/* =============================================
   SITE.CSS - Main Stylesheet
   ============================================= */

/* Root Variables */
:root {
    --primary: #0d6efd;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --text-muted: #6c757d;
    --border-radius: 12px;
    --shadow: 0 2px 15px rgba(0,0,0,0.08);
}

/* Base */
body {
    font-family: 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', -apple-system, sans-serif;
    color: #333;
    background-color: #f8f9fa;
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

/* Product Card */
.product-card {
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    transition: all 0.2s ease;
}
.product-card .card-img-top {
    transition: transform 0.3s ease;
}
.product-card:hover .card-img-top {
    transform: scale(1.03);
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Category Card */
.category-card {
    border-radius: var(--border-radius) !important;
    transition: all 0.2s ease;
}
/* S8 佈景：hover 底色吃店家主色（同樣有 color-mix fallback） */
.category-card:hover {
    background-color: #e8f0fe !important;
    background-color: color-mix(in srgb, var(--shop-primary, #0d6efd) 10%, #ffffff) !important;
}

/* Navbar */
.navbar {
    border-bottom: 1px solid #e9ecef;
}
.navbar-brand {
    font-size: 1.5rem !important;
}

/* Cart Badge */
#cartCount {
    font-size: 0.65rem;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Forms */
/* S8 佈景：焦點框吃店家主色。
   ⚠ 兩行 box-shadow 是刻意的 fallback：舊瀏覽器不認得 color-mix() 會整行丟掉，
      留在前面那行 rgba 就會生效；認得的瀏覽器則用後面那行覆蓋。 */
.form-control:focus, .form-select:focus {
    border-color: var(--shop-primary, var(--primary));
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--shop-primary, #0d6efd) 22%, transparent);
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
}
/* ⚠⚠ S8 佈景：這一段以前是寫死的紫色漸層，導致「每一家店的主要按鈕長得一模一樣」。⚠⚠
   原因不是層疊順序（佈景 <style> 確實排在 site.css 之後），而是 CSS 是「逐屬性」比較的：
   ThemeService.BuildCss 對 .btn-primary 只設定了 --bs-btn-bg 這類自訂屬性，
   從來沒有再寫一次 background/background-image，所以這裡的 background 簡寫
   （它同時定案了 background-color 與 background-image）永遠是最終贏家。
   改成直接吃 --shop-primary / --shop-primary-dark 之後，漸層質感保留，但每家店各自不同。

   ⚠ var() 的第二個參數是後備值：後台 Areas/Admin 與 Areas/Platform 不載入 site.css，
     而前台以外若因故沒有輸出佈景變數，按鈕會退回原本的紫色，不會變成透明。 */
.btn-primary {
    background: linear-gradient(135deg, var(--shop-primary, #667eea), var(--shop-primary-dark, #764ba2));
    border: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, var(--shop-primary-dark, #5a67d8), var(--shop-primary-dark, #6b3fa0));
    border: none;
}
/* 危險色吃佈景的輔助色 --shop-accent。
   ⚠ 佈景沒有「輔助色的深色版」這個欄位，所以 hover 用 filter 壓暗，
      不另外要求後端多存一個顏色。 */
.btn-danger {
    background: linear-gradient(135deg, #f12711, #f5af19);
    background: var(--shop-accent, #f12711);
    border: none;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background: linear-gradient(135deg, #d4200e, #e09a0f);
    background: var(--shop-accent, #d4200e);
    filter: brightness(0.9);
}

/* Hero Banner */
.hero-banner {
    overflow: hidden;
}

/* Card shadows */
.card {
    border-radius: var(--border-radius) !important;
}
.shadow-sm {
    box-shadow: var(--shadow) !important;
}

/* Toast Notification */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

/* Breadcrumb */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
}

/* Badge adjustments */
.badge {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Order Status Colors */
.status-pending { color: #f59e0b; }
.status-paid { color: #3b82f6; }
.status-processing { color: #8b5cf6; }
.status-shipped { color: #6366f1; }
.status-completed { color: #10b981; }
.status-cancelled { color: #ef4444; }

/* Sticky header scroll */
.sticky-top {
    z-index: 1020;
}

/* Footer */
footer a:hover {
    color: white !important;
    text-decoration: underline !important;
}

/* Pagination */
.page-link {
    border-radius: 6px !important;
    margin: 0 2px;
}
.page-item.active .page-link {
    background: var(--primary);
}

/* Alert */
.alert {
    border-radius: 10px;
    border: none;
}
.alert-success { background-color: #d1fae5; color: #065f46; }
.alert-danger { background-color: #fee2e2; color: #7f1d1d; }

/* Checkout Steps */
.checkout-step {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}