/*!
 * IDBook.co.uk - Global Styles
 * Version: 1.0.0
 * Description: 全站通用样式文件，包含头部导航、组件样式、工具类等
 * Author: IDBook Team
 * =====================================================================
 */

/* =====================================================================
   Google Fonts Import
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =====================================================================
   CSS Custom Properties (Variables)
   ===================================================================== */
:root {
    /* Color Palette */
    --primary-color: #1a1a2e;
    --secondary-color: #d2e1f0;
    --accent-color: #0f4c75;
    --gold-accent: #d4af37;
    --gold-light: #f2c94c;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #b8c1ec;
    --text-muted: #fff;
    --text-dark: #2d3748;
    --text-light: #f7fafc;
    
    /* Background Colors */
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #d2e1f0;
    --bg-light: #ffffff;
    --bg-overlay: rgba(26, 26, 46, 0.95);
    
    /* Border & Divider Colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --border-solid: #e2e8f0;
    
    /* Status Colors */
    --success-color: #48bb78;
    --warning-color: #ed8936;
    --error-color: #f56565;
    --info-color: #4299e1;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-primary: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.2);
    --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.3);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f4c75 100%);
    --gradient-secondary: linear-gradient(135deg, #16213e 0%, #0f4c75 100%);
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f2c94c 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(15, 76, 117, 0.8) 100%);
    
    --bs-breadcrumb-divider-color:d4af37;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */
    
    /* Typography Scale */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
    
    /* Border Radius */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index Scale */
    --z-dropdown: 2000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* =====================================================================
   CSS Reset & Normalize
   ===================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    background-image: var(--gradient-primary);
    min-height: 100vh;
}

/* Remove default styling */
ul, ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* =====================================================================
   Typography
   ===================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted) !important; }
.text-gold { color: var(--gold-accent); }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* =====================================================================
   Button Components
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-base);
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition-smooth);
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* Button Variants */
.btn-primary {
    background: var(--gradient-gold);
    color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
    color: var(--primary-color);
}

.btn-secondary {
    background: var(--gradient-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
    border-color: var(--gold-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-outline:hover {
    background: var(--gradient-gold);
    color: var(--primary-color);
    border-color: var(--gold-accent);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    backdrop-filter: blur(10px);
}

.btn-ghost:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--text-primary);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-md) var(--space-2xl);
    font-size: var(--text-lg);
}

.btn-xl {
    padding: var(--space-lg) var(--space-3xl);
    font-size: var(--text-xl);
}

/* =====================================================================
   Form Components
   ===================================================================== */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.form-control {
    width: 100%;
    padding: var(--space-md);
    font-size: var(--text-base);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    transition: all var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.form-control:focus {
    outline: none;
    border-color: var(--gold-accent);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    background: rgba(255, 255, 255, 0.08);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23b8c1ec' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-md) center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: var(--space-2xl);
}

.form-select option{
    color:var(--text-dark);
}
.form-error {
    color: var(--error-color);
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}

.form-help {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-xs);
}

.form-floating>label
{
    top:8px;
}
.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after
{
    background-color:transparent;
}
/* =====================================================================
   Card Components
   ===================================================================== */
.card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: all var(--transition-smooth);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--gold-accent);
}

.card-header {
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-lg);
}

.card-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.card-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-base);
}

.card-body {
    color: var(--text-secondary);
}

.card-footer {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-lg);
}

/* =====================================================================
   Alert Components
   ===================================================================== */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid;
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.alert-success {
    background: rgba(72, 187, 120, 0.1);
    border-color: var(--success-color);
    color: var(--success-color);
}

.alert-warning {
    background: rgba(237, 137, 54, 0.1);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.alert-error {
    background: rgba(245, 101, 101, 0.1);
    border-color: var(--error-color);
    color: var(--error-color);
}

.alert-info {
    background: rgba(66, 153, 225, 0.1);
    border-color: var(--info-color);
    color: var(--info-color);
}

/* =====================================================================
   Badge Components
   ===================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-primary {
    background: var(--gradient-gold);
    color: var(--primary-color);
}

.badge-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.badge-success {
    background: var(--success-color);
    color: white;
}

.badge-warning {
    background: var(--warning-color);
    color: white;
}

.badge-error {
    background: var(--error-color);
    color: white;
}

/* =====================================================================
   Loading & Skeleton Components
   ===================================================================== */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    border-top-color: var(--gold-accent);
    animation: spin 1s linear infinite;
}

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

.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =====================================================================
   Header Navigation Styles (从之前的设计整合)
   ===================================================================== */

/* Top Info Bar */
.premium-top-bar {
    background: var(--gradient-primary);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.premium-top-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.1) 50%, transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.premium-top-content {
    position: relative;
    z-index: 1;
    padding: 8px 0;
}

.premium-social-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.premium-social-link:hover {
    background: var(--gradient-gold);
    border-color: var(--gold-accent);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.premium-contact-info {
    display: flex;
    align-items: center;
    gap: 24px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.premium-contact-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.premium-contact-item i {
    color: var(--gold-accent);
}

.premium-cta-button {
    background: var(--gradient-gold);
    color: var(--primary-color);
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-primary);
    position: relative;
    overflow: hidden;
}

.premium-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.premium-cta-button:hover::before {
    left: 100%;
}

.premium-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    color: var(--primary-color);
}

/* Main Header */
.premium-main-header {
    background: var(--bg-overlay);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    transition: all var(--transition-base);
}

.premium-main-header.scrolled {
    background: rgba(26, 26, 46, 0.98);
    box-shadow: var(--shadow-primary);
}

.premium-scroll-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--gradient-gold);
    transition: width 0.1s ease;
    border-radius: 0 3px 3px 0;
}

.premium-navbar {
    padding: var(--space-md) 0;
}

/* Brand/Logo */
.premium-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    transition: all var(--transition-base);
}

.premium-brand:hover {
    color: var(--gold-accent);
    transform: scale(1.05);
}

.premium-brand-logo {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    background: var(--gradient-gold);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-weight: 700;
    font-size: var(--text-lg);
}

/* Mobile Toggle */
.premium-mobile-toggle {
    background: transparent;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    color: var(--text-primary);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
   
}

.premium-mobile-toggle:hover {
    border-color: var(--gold-accent);
    background: rgba(212, 175, 55, 0.1);
}

.premium-mobile-toggle-icon {
    width: 24px;
    height: 18px;
    position: relative;
    transform: rotate(0deg);
    transition: 0.3s ease-in-out;
}

.premium-mobile-toggle-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--text-primary);
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
}

.premium-mobile-toggle-icon span:nth-child(1) { top: 0px; }
.premium-mobile-toggle-icon span:nth-child(2) { top: 8px; }
.premium-mobile-toggle-icon span:nth-child(3) { top: 16px; }

.premium-mobile-toggle.open .premium-mobile-toggle-icon span:nth-child(1) {
    top: 8px;
    transform: rotate(135deg);
}

.premium-mobile-toggle.open .premium-mobile-toggle-icon span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.premium-mobile-toggle.open .premium-mobile-toggle-icon span:nth-child(3) {
    top: 8px;
    transform: rotate(-135deg);
}

/* Navigation */
.premium-nav {
    display: flex;
    align-items: center;
    list-style: none;
    gap: var(--space-2xl);
    margin: 0;
    margin-left: var(--space-3xl); /* 增加与logo的间距 */
    padding: 0;
}

.premium-nav-item {
    position: relative;
}

.premium-nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-base);
    padding: var(--space-sm) 0;
    position: relative;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: 6px;
}

.premium-nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-gold);
    transition: width var(--transition-base);
}

.premium-nav-link:hover,
.premium-nav-link.active {
    color: var(--text-primary);
}

.premium-nav-link:hover::after,
.premium-nav-link.active::after {
    width: 100%;
}

/* Dropdown */
.premium-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: var(--bg-overlay);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    /* padding: var(--space-sm); */
    box-shadow: var(--shadow-hover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-smooth);
    z-index: var(--z-dropdown);
}

.premium-nav-item:hover .premium-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.premium-dropdown-item {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-md) var(--space-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    font-size: var(--text-sm);
    font-weight: 500;
}

.premium-dropdown-item:hover,
.premium-dropdown-item.active {
    background: rgba(212, 175, 55, 0.1);
    color: var(--text-primary);
    transform: translateX(var(--space-sm));
}

.premium-dropdown-item i {
    color: var(--gold-accent);
    width: 20px;
}

.premium-dropdown-divider {
    margin: var(--space-sm) var(--space-md);
    border-color: var(--border-color);
}


.premium-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: var(--bg-overlay);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-sm);
    box-shadow: var(--shadow-hover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-smooth);
    z-index: var(--z-dropdown);
}

/* 悬停显示（桌面端） */
.premium-nav-item:hover .premium-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Bootstrap .show 类支持（点击显示） */
.premium-nav-item.show .premium-dropdown,
.dropdown.show .premium-dropdown,
.premium-dropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* 如果使用标准Bootstrap类名 */
.dropdown-menu {
    background: var(--bg-overlay);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-sm);
    box-shadow: var(--shadow-hover);
    min-width: 280px;
}

.dropdown-menu .dropdown-item {
    color: var(--text-secondary);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    font-size: var(--text-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item.active {
    background: rgba(212, 175, 55, 0.1);
    color: var(--text-primary);
    transform: translateX(var(--space-sm));
}

.dropdown-menu .dropdown-item i {
    color: var(--gold-accent);
    width: 20px;
}

/* 用户菜单特殊样式 */
.premium-user-actions .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 220px;
    margin-top: 8px;
}

/* 移动端下拉菜单样式 */
@media (max-width: 991.98px) {
    .premium-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(255, 255, 255, 0.05);
        border: none;
        border-radius: 0;
        margin-top: 0;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base);
        padding: 0;
    }

    .premium-nav-item.show .premium-dropdown,
    .premium-nav-item:hover .premium-dropdown {
        max-height: 400px;
        padding: var(--space-sm);
    }
}

/* 确保下拉菜单在正确的层级 */
.navbar-nav .dropdown-menu {
    z-index: var(--z-dropdown);
}

/* 修复可能的Bootstrap冲突 */
.navbar-nav .nav-item .dropdown-menu {
    margin-top: 0;
}

.navbar-nav .nav-item.dropdown.show .dropdown-menu {
    display: block;
}

/* 下拉菜单动画增强 */
.dropdown-menu.show {
    animation: dropdownFadeIn 0.3s ease-out;
}

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

/* User Actions */
.premium-user-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-left: var(--space-2xl);
}

.premium-user-toggle,
.premium-cart-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-smooth);
    position: relative;
    backdrop-filter: blur(10px);
}

.premium-user-toggle:hover,
.premium-cart-link:hover,
.premium-cart-link.active {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold-accent);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.premium-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--gradient-gold);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* =====================================================================
   Utility Classes
   ===================================================================== */

/* Spacing */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }

.m-1 { margin: var(--space-xs); }
.mt-1 { margin-top: var(--space-xs); }
.mr-1 { margin-right: var(--space-xs); }
.mb-1 { margin-bottom: var(--space-xs); }
.ml-1 { margin-left: var(--space-xs); }

.m-2 { margin: var(--space-sm); }
.mt-2 { margin-top: var(--space-sm); }
.mr-2 { margin-right: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-sm); }
.ml-2 { margin-left: var(--space-sm); }

.m-3 { margin: var(--space-md); }
.mt-3 { margin-top: var(--space-md); }
.mr-3 { margin-right: var(--space-md); }
.mb-3 { margin-bottom: var(--space-md); }
.ml-3 { margin-left: var(--space-md); }

.m-4 { margin: var(--space-lg); }
.mt-4 { margin-top: var(--space-lg); }
.mr-4 { margin-right: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-lg); }
.ml-4 { margin-left: var(--space-lg); }

.m-5 { margin: var(--space-xl); }
.mt-5 { margin-top: var(--space-xl); }
.mr-5 { margin-right: var(--space-xl); }
.mb-5 { margin-bottom: var(--space-xl); }
.ml-5 { margin-left: var(--space-xl); }

.m-6 { margin: var(--space-2xl); }
.mt-6 { margin-top: var(--space-2xl); }
.mr-6 { margin-right: var(--space-2xl); }
.mb-6 { margin-bottom: var(--space-2xl); }
.ml-6 { margin-left: var(--space-2xl); }

/* Padding */
.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

.p-1 { padding: var(--space-xs); }
.pt-1 { padding-top: var(--space-xs); }
.pr-1 { padding-right: var(--space-xs); }
.pb-1 { padding-bottom: var(--space-xs); }
.pl-1 { padding-left: var(--space-xs); }

.p-2 { padding: var(--space-sm); }
.pt-2 { padding-top: var(--space-sm); }
.pr-2 { padding-right: var(--space-sm); }
.pb-2 { padding-bottom: var(--space-sm); }
.pl-2 { padding-left: var(--space-sm); }

.p-3 { padding: var(--space-md); }
.pt-3 { padding-top: var(--space-md); }
.pr-3 { padding-right: var(--space-md); }
.pb-3 { padding-bottom: var(--space-md); }
.pl-3 { padding-left: var(--space-md); }

.p-4 { padding: var(--space-lg); }
.pt-4 { padding-top: var(--space-lg); }
.pr-4 { padding-right: var(--space-lg); }
.pb-4 { padding-bottom: var(--space-lg); }
.pl-4 { padding-left: var(--space-lg); }

.p-5 { padding: var(--space-xl); }
.pt-5 { padding-top: var(--space-xl); }
.pr-5 { padding-right: var(--space-xl); }
.pb-5 { padding-bottom: var(--space-xl); }
.pl-5 { padding-left: var(--space-xl); }

.p-6 { padding: var(--space-2xl); }
.pt-6 { padding-top: var(--space-2xl); }
.pr-6 { padding-right: var(--space-2xl); }
.pb-6 { padding-bottom: var(--space-2xl); }
.pl-6 { padding-left: var(--space-2xl); }

/* Display */
.d-none { display: none; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }

/* Flexbox */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Borders */
.border { border: 1px solid var(--border-color); }
.border-t { border-top: 1px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-l { border-left: 1px solid var(--border-color); }
.border-0 { border: none; }

.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Transitions */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* Transforms */
.transform { transform: translateZ(0); }
.scale-90 { transform: scale(0.9); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }

/* Background */
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary { background: var(--bg-tertiary); }
.bg-light { background: var(--bg-light); }
.bg-transparent { background: transparent; }

.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-gold { background: var(--gradient-gold); }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Width & Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* =====================================================================
   Animation Classes
   ===================================================================== */
.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

.animate-slide-down {
    animation: slideDown 0.5s ease-out;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
    40%, 43% { transform: translate3d(0, -30px, 0); }
    70% { transform: translate3d(0, -15px, 0); }
    90% { transform: translate3d(0, -4px, 0); }
}

/* =====================================================================
   Responsive Design
   ===================================================================== */

/* Mobile First Approach */
@media (max-width: 576px) {
    .premium-brand {
        font-size: var(--text-2xl);
    }
    
    .premium-brand-logo {
        width: 36px;
        height: 36px;
        font-size: var(--text-base);
    }
    
    .premium-cta-button {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-xs);
    }
    
    /* Mobile utility classes */
    .d-sm-none { display: none; }
    .d-sm-block { display: block; }
    .d-sm-flex { display: flex; }
    
    .text-sm-center { text-align: center; }
    .text-sm-left { text-align: left; }
}

@media (max-width: 768px) {
    .d-md-none { display: none; }
    .d-md-block { display: block; }
    .d-md-flex { display: flex; }
    
    .text-md-center { text-align: center; }
    .text-md-left { text-align: left; }
}

@media (max-width: 991.98px) {
    .premium-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-md) 0;
    }

    .premium-nav-item {
        border-bottom: 1px solid var(--border-color);
    }

    .premium-nav-item:last-child {
        border-bottom: none;
    }

    .premium-nav-link {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-base);
    }

    .premium-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(255, 255, 255, 0.05);
        border: none;
        border-radius: 0;
        margin-top: 0;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base);
    }

    .premium-nav-item.show .premium-dropdown {
        max-height: 400px;
    }

    .premium-user-actions {
        margin-left: 0;
        justify-content: center;
        padding: var(--space-md) var(--space-lg);
        border-top: 1px solid var(--border-color);
    }

    .premium-contact-info {
        display: none !important;
    }
    
    /* Tablet utility classes */
   
    .d-lg-block { display: block; }
    .d-lg-flex { display: flex; }
    
    .text-lg-center { text-align: center; }
    .text-lg-left { text-align: left; }
}

@media (min-width: 992px) {
    /* 确保桌面端汉堡菜单隐藏 */
    .premium-mobile-toggle {
        display: none !important;
    }
    
    /* 确保桌面端导航菜单显示 */
    .navbar-collapse {
        display: flex !important;
    }
    
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}

/* =====================================================================
   Navigation Collapsed State (移动端菜单折叠状态)
   ===================================================================== */

@media (max-width: 991.98px) {
    /* 移动端菜单默认隐藏 */
    .navbar-collapse:not(.show) {
        display: none;
    }
    
    /* 移动端菜单显示时的样式 */
    .navbar-collapse.show {
        display: block;
        background: var(--bg-overlay);
        border-top: 1px solid var(--border-color);
        margin-top: var(--space-md);
        border-radius: var(--radius-lg);
        backdrop-filter: blur(20px);
    }
    
    /* 移动端菜单过渡动画 */
    .navbar-collapse.collapsing {
        transition: height 0.35s ease;
        overflow: hidden;
    }
}

/* =====================================================================
   Accessibility
   ===================================================================== */

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
.premium-nav-link:focus,
.premium-dropdown-item:focus,
.premium-user-toggle:focus,
.premium-cart-link:focus,
.premium-cta-button:focus,
.premium-social-link:focus,
.premium-mobile-toggle:focus,
.btn:focus,
.form-control:focus {
    /* outline: 2px solid var(--gold-accent); */
    /* outline-offset: 2px; */
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   Print Styles
   ===================================================================== */
@media print {
    .premium-top-bar,
    .premium-main-header,
    .btn,
    .premium-social-links,
    .premium-user-actions {
        display: none !important;
    }
    
    body {
        color: #000;
        background: #fff;
    }
    
    .card {
        border: 1px solid #000;
        background: #fff;
    }
}

/* =====================================================================
   Dark Mode Support (if needed for future)
   ===================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #ffffff;
        --text-secondary: #b8c1ec;
        --text-muted: #8892b0;
    }
}

@media (max-width: 991.98px) {
    .hide-on-mobile {
        display: none;
    }
}


/* Product Card Container */
.product-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-smooth);
    position: relative;
    box-shadow: var(--shadow-md);
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.product-card:hover::before {
    left: 100%;
}

.product-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--gold-accent);
    box-shadow: var(--shadow-xl);
    background: rgba(255, 255, 255, 0.08);
}

/* Product Image Container */
.product-image-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--gradient-secondary);
}

.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--transition-smooth);
}

.product-card:hover .product-image-container img {
    transform: scale(1.1);
}

/* Product Badges */
.product-badge {
    top: var(--space-md);
    left: var(--space-md);
    background: var(--gradient-gold);
    color: var(--primary-color);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    z-index: 3;
    box-shadow: var(--shadow-md);
    animation: pulse 2s infinite;
}

.product-badge.featured {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Country Flag */
.product-country-flag {
    top: var(--space-md);
    right: var(--space-md);
    width: 32px;
    height: 24px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid var(--text-primary);
    z-index: 3;
    box-shadow: var(--shadow-md);
}

.product-country-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Actions (Desktop Hover) */
.product-actions {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: var(--space-sm);
    opacity: 0;
    transition: all var(--transition-smooth);
    z-index: 3;
}

.product-card:hover .product-actions {
    opacity: 1;
}

.action-btn {
    /*width: 44px;*/
    /*height: 44px;*/
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    text-decoration: none;
    transition: all var(--transition-smooth);
    font-size: var(--text-lg);
}

.action-btn:hover {
    background: var(--gradient-gold);
    border-color: var(--gold-accent);
    color: var(--primary-color);
    transform: scale(1.1);
}

.action-btn.view-btn:hover {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    color: white;
}

.action-btn.cart-btn:hover {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
}

.action-btn.wishlist-btn:hover {
    background: linear-gradient(135deg, #ed64a6 0%, #d53f8c 100%);
    color: white;
}

/* Product Overlay (Alternative Action Display) */
.product-overlay {
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-smooth);
    z-index: 2;
}

.product-card:hover .product-overlay {
    opacity: 1;
    transform: translateY(0);
}

.overlay-actions .btn {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    padding: var(--space-sm) var(--space-lg);
}

/* Product Content */
.product-content {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(5px);
}

/* Product Title */
.product-title {
    margin-bottom: var(--space-md);
}

.product-title a {
    color: #ffffff; /* 提高对比度，使用纯白色 */
    font-weight: 600;
    line-height: 1.3;
    transition: color var(--transition-base);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 添加文字阴影增强可读性 */
}

.product-title a:hover {
    color: var(--gold-accent);
}

/* Product Rating */
.product-rating {
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.product-rating i {
    color: #f2c94c; /* 更亮的金黄色 */
    font-size: var(--text-sm);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); /* 添加阴影 */
}

.product-rating i.bi-star {
    color: #4a5568; /* 更暗的灰色，与背景对比更强 */
}

.rating-count {
    color: #cbd5e0; /* 更亮的灰色文字 */
    font-size: var(--text-xs);
    font-weight: 500; /* 增加字重 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Product Price */
.product-price {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.price-current {
    color: #f2c94c !important; /* 更亮的金黄色，提高对比度 */
    font-size: var(--text-xl);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 添加文字阴影 */
}

.price-original {
    color: #a0aec0 !important; /* 更亮的灰色，提高对比度 */
    font-size: var(--text-base);
    text-decoration: line-through;
    font-weight: 500; /* 增加字重 */
}

.price-discount {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
    color: white !important;
    font-size: var(--text-xs);
    font-weight: 700; /* 增加字重 */
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    animation: discount-pulse 2s infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes discount-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Product Features */
.product-features {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.feature-item {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.08); /* 提高背景不透明度 */
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600; /* 增加字重 */
    color: #e2e8f0; /* 更亮的文字颜色，提高对比度 */
    border: 1px solid rgba(255, 255, 255, 0.15); /* 更明显的边框 */
    transition: all var(--transition-base);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 添加文字阴影 */
}

.feature-item:hover {
    background: rgba(212, 175, 55, 0.15); /* 提高悬停背景不透明度 */
    border-color: var(--gold-accent);
    color: #ffffff; /* 悬停时使用纯白色 */
}

.feature-item i {
    font-size: var(--text-sm);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); /* 为图标添加阴影 */
}

/* Product Actions Bottom */
.product-actions-bottom {
    margin-top: auto;
}

.product-actions-bottom .btn {
    font-weight: 700; /* 增加字重 */
    padding: var(--space-sm) var(--space-lg);
    border-width: 2px;
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 为按钮文字添加阴影 */
}

.product-actions-bottom .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.product-actions-bottom .btn:hover::before {
    left: 100%;
}

.product-actions-bottom .btn-primary {
    background: var(--gradient-gold);
    border-color: var(--gold-accent);
    color: #1a1a2e; /* 确保深色文字与金色背景对比 */
    font-weight: 700;
}

.product-actions-bottom .btn-primary:hover {
    background: linear-gradient(135deg, #f2c94c 0%, #d4af37 100%);
    border-color: var(--gold-accent);
    color: #1a1a2e; /* 保持深色文字 */
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.product-actions-bottom .btn-outline-primary {
    border-color: #f2c94c; /* 更亮的边框色 */
    color: #f2c94c; /* 更亮的文字色 */
    background: rgba(0, 0, 0, 0.2); /* 添加半透明背景提高对比度 */
    font-weight: 600;
}

.product-actions-bottom .btn-outline-primary:hover {
    background: var(--gradient-gold);
    border-color: var(--gold-accent);
    color: #1a1a2e; /* 悬停时深色文字 */
    transform: translateY(-2px);
}

.product-actions-bottom .btn-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    border-color: #48bb78;
    color: white;
    font-weight: 700;
}

.product-actions-bottom .btn-success:hover {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
    border-color: #38a169;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: white; /* 确保悬停时文字仍然是白色 */
}

/* Demo Action Container */
.demo-action {
    margin-top: auto;
}

.demo-action .btn {
    font-weight: 700; /* 增加字重 */
    /*padding: var(--space-md) var(--space-lg);*/
    border-width: 2px;
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-sm);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影 */
}

.demo-action .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.demo-action .btn:hover::before {
    left: 100%;
}

.demo-action .btn-outline-primary {
    border-color: #f2c94c; /* 更亮的边框 */
    color: #f2c94c; /* 更亮的文字 */
    background: rgba(0, 0, 0, 0.25); /* 深色半透明背景提高对比度 */
    font-weight: 600;
}

.demo-action .btn-outline-primary:hover {
    background: var(--gradient-gold);
    border-color: var(--gold-accent);
    color: #1a1a2e; /* 悬停时深色文字 */
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.purchase-btn-container .btn-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    border-color: #48bb78;
    color: white;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 添加文字阴影 */
}

.purchase-btn-container .btn-success:hover {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
    border-color: #38a169;
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: white; /* 确保悬停时文字仍然是白色 */
}

/* Loading States */
.product-card.loading {
    pointer-events: none;
    opacity: 0.7;
}

.product-card.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-radius: 50%;
    border-top-color: var(--gold-accent);
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 10;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Product Grid Responsive */
.products-grid {
    display: grid;
    gap: var(--space-xl);
}

@media (min-width: 576px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile Specific Styles */
@media (max-width: 767.98px) {
    .product-card {
        border-radius: var(--radius-lg);
    }
    
    .product-image-container {
        /*aspect-ratio: 4/3;*/
    }
    
    .product-content {
        padding: var(--space-lg) !important;
    }
    
    .product-badge {
        top: var(--space-sm);
        left: var(--space-sm);
        padding: var(--space-xs);
        font-size: 11px; /* 稍微增大移动端字体 */
        font-weight: 700; /* 增加字重提高可读性 */
    }
    
    .product-country-flag {
        top: var(--space-sm);
        right: var(--space-sm);
        width: 24px;
        height: 18px;
    }
    
    .product-features {
        gap: var(--space-sm);
    }
    
    .feature-item {
        font-size: 11px; /* 增大移动端字体 */
        padding: 4px var(--space-sm); /* 增加内边距 */
        font-weight: 600; /* 增加字重 */
        background: rgba(255, 255, 255, 0.12); /* 提高移动端背景不透明度 */
        color: #f7fafc; /* 更亮的文字颜色 */
    }
    
    .product-price {
        margin-bottom: var(--space-md);
    }
    
    .price-current {
        font-size: var(--text-lg);
        font-weight: 700; /* 确保移动端价格字重足够 */
    }
    
    .price-original {
        color: #cbd5e0 !important; /* 移动端使用更亮的灰色 */
        font-weight: 500;
    }
    
    .demo-action .btn,
    .product-actions-bottom .btn {
        padding: var(--space-md) var(--space-lg); /* 增加移动端按钮内边距 */
        font-size: var(--text-base); /* 增大移动端按钮字体 */
        font-weight: 700; /* 确保移动端按钮字重足够 */
    }
    
    /* 移动端产品标题优化 */
    .product-title a {
        font-size: var(--text-lg); /* 增大移动端标题字体 */
        font-weight: 700; /* 增加字重 */
        color: #ffffff; /* 确保纯白色 */
    }
    
    /* Hide desktop-only elements on mobile */
    .product-actions,
    .product-overlay {
        display: none !important;
    }
}

/* Tablet Specific Styles */
@media (min-width: 768px) and (max-width: 991.98px) {
    .product-card:hover {
        transform: translateY(-6px) scale(1.01);
    }
    
    .product-image-container {
        aspect-ratio: 3/2;
    }
    
    .action-btn {
        width: 40px;
        height: 40px;
        font-size: var(--text-base);
    }
}

/* High DPI Displays */
@media (min-resolution: 2dppx) {
    .product-card {
        border-width: 0.5px;
    }
    
    .action-btn {
        border-width: 0.5px;
    }
}

/* Dark Mode Preferences */
@media (prefers-color-scheme: dark) {
    .product-card {
        background: rgba(255, 255, 255, 0.03);
    }
    
    .product-card:hover {
        background: rgba(255, 255, 255, 0.06);
    }
    
    .action-btn {
        background: rgba(255, 255, 255, 0.95);
    }
}

/* Accessibility Improvements */
.product-card:focus-within {
    outline: 2px solid var(--gold-accent);
    outline-offset: 2px;
}

.action-btn:focus,
.product-actions-bottom .btn:focus,
.demo-action .btn:focus {
    outline: 2px solid var(--gold-accent);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card::before,
    .product-image-container img,
    .action-btn,
    .product-actions,
    .product-overlay,
    .demo-action .btn,
    .product-actions-bottom .btn {
        transition: none;
        animation: none;
    }
    
    .product-card:hover {
        transform: none;
    }
    
    .product-badge,
    .price-discount {
        animation: none;
    }
}

/* Print Styles */
@media print {
    .product-card {
        background: white;
        border: 1px solid #000;
        box-shadow: none;
        break-inside: avoid;
    }
    
    .product-actions,
    .product-overlay,
    .demo-action,
    .product-actions-bottom {
        display: none;
    }
    
    .product-title a {
        color: #000;
        text-decoration: none;
    }
    
    .price-current {
        color: #000 !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .product-card {
        border: 2px solid #ffffff;
        background: rgba(0, 0, 0, 0.9);
    }
    
    .product-title a {
        color: #ffffff;
        font-weight: 800;
    }
    
    .price-current {
        color: #ffff00 !important; /* 高对比度模式使用黄色 */
    }
    
    .price-original {
        color: #cccccc !important;
    }
    
    .feature-item {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid #ffffff;
        color: #ffffff;
        font-weight: 700;
    }
    
    .demo-action .btn-outline-primary {
        border-color: #ffffff;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.8);
    }
    
    .product-actions-bottom .btn-outline-primary {
        border-color: #ffffff;
        color: #ffffff;
        background: rgba(0, 0, 0, 0.8);
    }
}

/* Forced Colors Mode (Windows High Contrast) */
@media (forced-colors: active) {
    .product-card {
        border: 1px solid ButtonText;
        background: ButtonFace;
    }
    
    .product-title a {
        color: LinkText;
    }
    
    .price-current {
        color: Highlight;
    }
    
    .feature-item {
        border: 1px solid ButtonText;
        color: ButtonText;
        background: ButtonFace;
    }
    
    .demo-action .btn,
    .product-actions-bottom .btn {
        border: 1px solid ButtonText;
        color: ButtonText;
        background: ButtonFace;
    }
}

.breadcrumb-item+.breadcrumb-item::before{
    color: var(--gold-accent) !important;
}