/* Modern Product Detail Styles */


/* Modern Breadcrumb */
.modern-breadcrumb {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gray-200);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all var(--transition-base);
}

.modern-breadcrumb .breadcrumb {
    margin: 0;
    background: none;
    padding: 0;
    font-size: 0.875rem;
}

.modern-breadcrumb .breadcrumb-item a {
    color: var(--gray-600);
    text-decoration: none;
    transition: all var(--transition-fast);
   
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.modern-breadcrumb .breadcrumb-item a:hover {
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.1);
}

.modern-breadcrumb .breadcrumb-item.active {
    color: var(--gray-900);
    font-weight: 600;
}

/* Modern Product Hero */
.modern-product-hero {
    padding: 3rem 0;
    background: linear-gradient(135deg, var(--gray-50) 0%, rgba(255, 255, 255, 0.9) 100%);
    position: relative;
}

.modern-product-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 40%, rgba(37, 99, 235, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.modern-product-hero .container {
    position: relative;
    z-index: 1;
}

/* Modern Gallery Container */
.modern-gallery-container {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-slow);
}

.modern-gallery-container:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl);
}

.modern-gallery-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

/* Enhanced Video Section Styles */
.modern-video-section {
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
}

.modern-video-section:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

.video-header {
    padding: 1.5rem 2rem 1rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(139, 92, 246, 0.05));
    border-bottom: 1px solid rgba(37, 99, 235, 0.1);
}

.video-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.video-title i {
    color: var(--primary-color);
    font-size: 1.125rem;
}

.video-subtitle {
    color: var(--gray-600);
    margin: 0;
    font-size: 0.875rem;
}

.video-wrapper {
    position: relative;
    padding: 2rem;
    background: var(--gray-50);
}

.video-container {
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-md);
}

.video-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--gray-900), var(--gray-800));
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
}

.video-placeholder:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-xl);
}

.video-poster {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.poster-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
    z-index: 2;
}

.play-button-container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    text-align: center;
}

.play-button {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 1rem;
    transition: all var(--transition-base);
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
}

.play-button:hover {
    transform: scale(1.1);
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-xl);
}

.play-text {
    color: white;
    text-align: center;
}

.play-label {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.video-duration {
    font-size: 0.875rem;
    opacity: 0.9;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    backdrop-filter: blur(5px);
}

.product-video {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
    background: var(--gray-900);
}

.video-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: white;
    border-top: 1px solid var(--gray-200);
}

.video-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.video-stats {
    display: flex;
    gap: 1rem;
}

.video-stat {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.video-stat i {
    color: var(--primary-color);
}

.video-actions {
    display: flex;
    gap: 0.75rem;
}

.video-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
}

.video-action-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.1);
}

/* Video Placeholder for Empty State */
.video-placeholder-container {
    opacity: 0.8;
}

.video-placeholder-empty {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
    border-radius: var(--radius-lg);
    border: 2px dashed var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.placeholder-content {
    text-align: center;
    max-width: 400px;
}

.placeholder-icon {
    width: 80px;
    height: 80px;
    background: var(--gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--gray-500);
    font-size: 2rem;
}

.placeholder-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 1rem;
}

.placeholder-text {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.placeholder-actions .btn {
    font-weight: 600;
}

/* Video Thumbnail Styles */
.video-thumbnail {
    position: relative;
    border: 2px solid var(--primary-color) !important;
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.thumbnail-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.video-thumbnail .thumbnail-overlay {
    background: rgba(37, 99, 235, 0.9);
}

/* Enhanced Gallery Navigation */
.gallery-counter .current-item {
    color: var(--primary-color);
    font-weight: 700;
}

.gallery-counter .total-items {
    color: var(--gray-600);
}

/* Responsive Design */
@media (max-width: 768px) {
    .video-header {
        padding: 1rem 1.5rem 0.75rem;
    }
    
    .video-wrapper {
        padding: 1.5rem 1rem;
    }
    
    .play-button {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .play-label {
        font-size: 1rem;
    }
    
    .video-controls {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .video-stats {
        gap: 0.75rem;
    }
    
    .placeholder-content {
        padding: 1rem;
    }
    
    .placeholder-text {
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    .video-title {
        font-size: 1.125rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .video-subtitle {
        text-align: center;
    }
    
    .play-button {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .placeholder-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .placeholder-title {
        font-size: 1.125rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .modern-video-section {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(51, 65, 85, 0.3);
    }
    
    .video-header {
        background: rgba(15, 23, 42, 0.8);
        border-color: rgba(51, 65, 85, 0.3);
    }
    
    .video-wrapper {
        background: rgba(30, 41, 59, 0.5);
    }
    
    .video-controls {
        background: rgba(15, 23, 42, 0.9);
        border-color: rgba(51, 65, 85, 0.3);
    }
    
    .video-placeholder-empty {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.8));
        border-color: rgba(71, 85, 105, 0.5);
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .video-placeholder,
    .play-button,
    .video-action-btn {
        transition: none;
    }
    
    .video-placeholder:hover {
        transform: none;
    }
    
    .play-button:hover {
        transform: none;
    }
}

/* Focus States */
.play-button:focus,
.video-action-btn:focus {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 2px;
}

/* Modern Product Gallery */
.modern-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.modern-main-image-container {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-lg);
}

.modern-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.modern-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modern-zoom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modern-main-image-container:hover .modern-zoom-overlay {
    opacity: 1;
}

.modern-main-image-container:hover .modern-main-image {
    transform: scale(1.05);
}

.modern-zoom-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all var(--transition-base);
}

.modern-zoom-icon:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
}

.modern-zoom-icon span {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Product Badges */
.modern-product-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modern-product-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all var(--transition-base);
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

.modern-product-badge.featured {
    background: linear-gradient(135deg, var(--warning-color), #f97316);
    color: white;
}

.modern-product-badge.discount {
    background: linear-gradient(135deg, var(--success-color), #16a34a);
    color: white;
}

.modern-product-badge.new {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

/* Country Flag */
.modern-country-flag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    backdrop-filter: blur(15px);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.modern-country-flag:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.country-flag-img {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.country-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
}

/* Security Indicators */
.modern-security-indicators {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.75rem;
    border-radius: var(--radius-xl);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.security-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--success-color), #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}

.security-indicator:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.security-indicator::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--success-color), #16a34a);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
}

.security-indicator:hover::before {
    opacity: 0.3;
    animation: pulse 2s infinite;
}

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

/* Thumbnail Gallery */
.modern-thumbnail-gallery {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--gray-200);
}

.modern-thumbnail-gallery::-webkit-scrollbar {
    height: 6px;
}

.modern-thumbnail-gallery::-webkit-scrollbar-track {
    background: var(--gray-200);
    border-radius: var(--radius-full);
}

.modern-thumbnail-gallery::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: var(--radius-full);
}

.modern-thumbnail-item {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-base);
    position: relative;
    box-shadow: var(--shadow-sm);
}

.modern-thumbnail-item.active {
    border-color: var(--primary-color);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.modern-thumbnail-item:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-lg);
}

.modern-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(37, 99, 235, 0.8);
    opacity: 0;
    transition: opacity var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.modern-thumbnail-item:hover .thumbnail-overlay {
    opacity: 1;
}

/* Gallery Navigation */
.modern-gallery-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.gallery-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: white;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 1.125rem;
}

.gallery-nav-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
    transform: scale(1.1);
}

.gallery-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.gallery-counter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-600);
}

.current-image {
    color: var(--primary-color);
    font-weight: 700;
}

/* Gallery Info */
.modern-gallery-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(37, 99, 235, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.gallery-tips {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.gallery-actions {
    display: flex;
    gap: 1rem;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-base);
    cursor: pointer;
}

.action-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
    transform: translateY(-1px);
}
/* Enhanced Product Info - Data-Driven Styles */

.modern-product-info-content {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.1);
    position: sticky;
    top: 2rem;
    transition: all 0.3s ease;
}

.modern-product-info-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Enhanced Category Badge */
.product-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    animation: badgeGlow 2s ease-in-out infinite alternate;
}

@keyframes badgeGlow {
    from { box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
    to { box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); }
}

/* Main Title */
.product-main-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 900;
    color: #1e293b;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #1e293b, #475569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Cool Tagline */
.product-tagline {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Rating Section */
.product-rating-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.1);
}

.star-display {
    display: flex;
    gap: 0.25rem;
}

.star-display i {
    font-size: 1.2rem;
    color: #fbbf24;
    transition: all 0.2s ease;
}

.star-display i:not(.bi-star-fill) {
    color: #e5e7eb;
}

.rating-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.rating-reviews {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Price Section */
.product-price-section {
    margin-bottom: 2rem;
}

.price-main {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.current-price {
    font-size: 3rem;
    font-weight: 900;
    color: #3b82f6;
    line-height: 1;
}

.price-note {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

.price-savings {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.old-price {
    font-size: 1.2rem;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 600;
}

.save-badge {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
    animation: pulse 2s infinite;
}

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

/* Product Highlights */
.product-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.highlight-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.highlight-item i {
    font-size: 1.1rem;
    color: #22c55e;
}

/* Quantity Section */
.quantity-section {
    margin-bottom: 2rem;
}

.quantity-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 1rem;
}

.quantity-picker {
    display: flex;
    align-items: center;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 0.75rem;
}

.qty-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    font-weight: 700;
}

.qty-btn:hover {
    background: #3b82f6;
    color: white;
}

.qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.qty-input {
    border: none;
    background: white;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    width: 60px;
    padding: 0.75rem 0.5rem;
    outline: none;
    color: #1e293b;
}

.bulk-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #f59e0b;
    font-weight: 600;
}

.bulk-hint i {
    font-size: 1rem;
    animation: blink 1.5s ease-in-out infinite alternate;
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

/* Bulk Deals */
.bulk-deals {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(249, 115, 22, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.deals-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ea580c;
    margin-bottom: 1rem;
    text-align: center;
}

.deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.deal-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.deal-card:hover {
    border-color: #f97316;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.2);
}

.deal-card.popular {
    border-color: #f97316;
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
    transform: scale(1.05);
}

.deal-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 25px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
}

.deal-qty {
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.deal-price {
    font-size: 1.2rem;
    font-weight: 900;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.deal-save {
    font-size: 0.8rem;
    font-weight: 700;
    color: #22c55e;
    text-transform: uppercase;
}

/* Main Action Section */
.main-action-section {
    margin-bottom: 2rem;
}

.main-cta-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

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

.main-cta-btn:hover::before {
    left: 100%;
}

.main-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
    color: white;
}

.main-cta-btn:active {
    transform: translateY(-1px);
}

.main-cta-btn.login-required {
    background: linear-gradient(135deg, #64748b, #475569);
    box-shadow: 0 8px 25px rgba(100, 116, 139, 0.3);
}

.main-cta-btn.login-required:hover {
    box-shadow: 0 15px 40px rgba(100, 116, 139, 0.4);
}

.btn-text {
    font-weight: 800;
}

.btn-price {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 800;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.quick-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e5e7eb;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.quick-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.quick-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* Trust Badges */
.trust-badges {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(34, 197, 94, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.1);
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    flex: 1;
    transition: all 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-2px);
}

.trust-item i {
    font-size: 1.5rem;
    color: #22c55e;
    transition: all 0.3s ease;
}

.trust-item:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
}

.trust-item span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
}

/* Quick Specs */
.quick-specs {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

.specs-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.specs-list {
    display: grid;
    gap: 0.75rem;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
}

.spec-row:hover {
    background: white;
    border-color: #e5e7eb;
    transform: translateX(3px);
}

.spec-label {
    font-weight: 700;
    color: #64748b;
    font-size: 0.85rem;
    min-width: 80px;
}

.spec-value {
    color: #374151;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    flex: 1;
    margin-left: 1rem;
}

/* Region Info */
.region-info {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.region-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.region-title i {
    color: #3b82f6;
    font-size: 1.2rem;
}

.region-details {
    display: grid;
    gap: 0.75rem;
}

.region-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 235, 0.1);
    transition: all 0.3s ease;
}

.region-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.region-item i {
    color: #3b82f6;
    font-size: 1rem;
}

.region-item span {
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-product-info-content {
        padding: 1.5rem;
        position: static;
        margin-bottom: 2rem;
    }
    
    .product-main-title {
        font-size: 1.8rem;
    }
    
    .current-price {
        font-size: 2.5rem;
    }
    
    .product-highlights {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .highlight-item {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .deals-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .trust-badges {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    
    .trust-item {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
    
    .trust-item i {
        font-size: 1.2rem;
    }
    
    .region-details {
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .modern-product-info-content {
        padding: 1rem;
        border-radius: 16px;
    }
    
    .product-rating-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .price-main {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }
    
    .price-savings {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .deals-grid {
        grid-template-columns: 1fr;
    }
    
    .trust-badges {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .trust-item {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        gap: 1rem;
    }
    
    .quick-actions {
        gap: 0.75rem;
    }
    
    .quick-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
    
    .spec-row {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .spec-value {
        text-align: left;
        margin-left: 0;
    }
}

/* Loading State */
.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    border-top-color: #3b82f6;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

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

/* Animation Effects */
.highlight-item,
.deal-card,
.trust-item,
.spec-row,
.region-item {
    animation: fadeInUp 0.6s ease forwards;
}

.highlight-item:nth-child(2) { animation-delay: 0.1s; }
.highlight-item:nth-child(3) { animation-delay: 0.2s; }
.highlight-item:nth-child(4) { animation-delay: 0.3s; }

.deal-card:nth-child(2) { animation-delay: 0.15s; }
.deal-card:nth-child(3) { animation-delay: 0.3s; }

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

/* Focus States for Accessibility */
.main-cta-btn:focus,
.quick-btn:focus,
.qty-btn:focus,
.deal-card:focus {
    outline: 3px solid rgba(59, 130, 246, 0.3);
    outline-offset: 2px;
}

/* Success State Animations */
.success-animation {
    animation: successPulse 0.6s ease;
}

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

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .modern-product-info-content {
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        border-color: rgba(71, 85, 105, 0.3);
        color: #e2e8f0;
    }
    
    .product-main-title {
        color: #f1f5f9;
        background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .highlight-item,
    .deal-card,
    .quick-specs,
    .region-item {
        background: rgba(30, 41, 59, 0.8);
        border-color: rgba(71, 85, 105, 0.3);
        color: #e2e8f0;
    }
    
    .qty-input {
        background: rgba(30, 41, 59, 0.8);
        color: #e2e8f0;
    }
    
    .spec-row {
        background: rgba(30, 41, 59, 0.5);
        border-color: rgba(71, 85, 105, 0.3);
    }
    
    .spec-row:hover {
        background: rgba(30, 41, 59, 0.8);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0000ff;
        --gray-700: #000000;
        --gray-400: #666666;
    }
    
    .modern-product-info-content {
        border: 2px solid #000;
    }
    
    .main-cta-btn {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .badgeGlow,
    .pulse,
    .blink,
    .fadeInUp {
        animation: none;
    }
}

/* Print Styles */
@media print {
    .modern-product-info-content {
        box-shadow: none;
        border: 1px solid #ccc;
        background: white;
        position: static;
    }
    
    .quick-actions,
    .main-action-section {
        display: none;
    }
    
    .product-main-title {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }
}

/* Modern Product Tabs */
.modern-product-tabs {
    padding: 4rem 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    position: relative;
}

.modern-product-tabs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.modern-product-tabs .container {
    position: relative;
    z-index: 1;
}

.modern-tabs-header {
    margin-bottom: 1rem;
    
}

.modern-nav-tabs {
    border: none;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-2xl);
    padding: 0.5rem;
    box-shadow: var(--shadow-xl);
    display: flex;
    gap: 0.25rem;
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

.modern-nav-tabs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.modern-nav-tabs .nav-link {
    border: none;
    border-radius: var(--radius-xl);
    padding: 1rem 1.5rem;
    color: var(--gray-600);
    font-weight: 600;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.modern-nav-tabs .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    opacity: 0.1;
    transition: left var(--transition-base);
}

.modern-nav-tabs .nav-link:hover::before {
    left: 0;
}

.modern-nav-tabs .nav-link:hover {
    color: var(--primary-color);
    transform: translateY(-1px);
}

.modern-nav-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.modern-nav-tabs .nav-link.active::before {
    display: none;
}

.modern-tab-content {
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--radius-2xl);
    padding: 3rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(25px);
    min-height: 600px;
    position: relative;
}

.modern-content-section {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modern-content-section.show,
.modern-content-section.active {
    opacity: 1;
    transform: translateY(0);
}

/* Modern Related Products */
.modern-related-products {
    margin-top: 6rem;
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--gray-50) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.modern-section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.modern-section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: 1rem;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--gray-900), var(--gray-700));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-section-subtitle {
    color: var(--gray-600);
    font-size: 1.25rem;
    font-weight: 500;
}

.modern-related-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Floating Actions */
.floating-actions {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 1000;
}

.floating-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
    font-size: 1.25rem;
}

.floating-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}

.floating-btn.contact-btn {
    background: linear-gradient(135deg, var(--success-color), #16a34a);
}

.floating-btn.back-to-top {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
}

/* Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    z-index: 9999;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}

/* Responsive Design */
@media (max-width: 1199.98px) {
    .modern-product-info {
        position: static;
        margin-top: 2rem;
    }
    
    .modern-features-grid {
        grid-template-columns: 1fr;
    }
    
    .modern-pricing-tiers {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .modern-product-hero {
        padding: 2rem 0;
    }
    
    .modern-gallery-container,
    .modern-product-info,
    .modern-tab-content {
        padding: 1.5rem;
    }
    
    .modern-nav-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .modern-nav-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .modern-trust-signals {
        grid-template-columns: 1fr;
    }
    
    .modern-secondary-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .modern-breadcrumb {
        padding: 0.5rem 0;
    }
    
    .modern-breadcrumb .breadcrumb-item a {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .modern-product-hero {
        padding: 1.5rem 0;
    }
    
    .modern-gallery-container,
    .modern-product-info {
        margin-bottom: 1.5rem;
        padding: 1rem;
    }
    
    .modern-current-price {
        font-size: 2rem;
    }
    
    .modern-product-tabs {
        padding: 2rem 0;
    }
    
    .modern-tab-content {
        padding: 1.5rem;
        min-height: auto;
    }
    
    .modern-nav-tabs {
        padding: 0.25rem;
        flex-direction: column;
        align-items: stretch;
    }
    
    .modern-nav-tabs .nav-link {
        justify-content: center;
        text-align: center;
    }
    
    .floating-actions {
        bottom: 1rem;
        right: 1rem;
    }
    
    .floating-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .modern-related-products {
        padding: 2rem 0;
    }
    
    .modern-related-products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .modern-features-grid {
        gap: 0.75rem;
    }
    
    .modern-feature-item {
        padding: 0.75rem;
    }
    
    .modern-feature-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    
    .modern-feature-title {
        font-size: 0.8rem;
    }
    
    .modern-feature-description {
        font-size: 0.7rem;
    }
}

/* Loading and Animation States */
.modern-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.modern-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid rgba(37, 99, 235, 0.2);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s linear infinite;
    z-index: 1000;
}

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

/* Print Styles */
@media print {
    .modern-breadcrumb,
    .modern-secondary-actions,
    .modern-product-tabs,
    .modern-related-products,
    .floating-actions,
    .scroll-progress {
        display: none !important;
    }
    
    .modern-product-info,
    .modern-gallery-container {
        box-shadow: none;
        border: 1px solid #ccc;
        background: white;
    }
    
    .modern-product-title,
    .modern-current-price,
    .modern-section-title {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-50: #0f172a;
        --gray-100: #1e293b;
        --gray-200: #334155;
        --gray-300: #475569;
        --gray-400: #64748b;
        --gray-500: #94a3b8;
        --gray-600: #cbd5e1;
        --gray-700: #e2e8f0;
        --gray-800: #f1f5f9;
        --gray-900: #f8fafc;
    }
    
    .modern-gallery-container,
    .modern-product-info,
    .modern-tab-content {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(51, 65, 85, 0.3);
    }
    
    .modern-nav-tabs {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(51, 65, 85, 0.3);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0000ff;
        --gray-700: #000000;
        --gray-400: #666666;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .modern-product-badge,
    .security-indicator,
    .floating-btn {
        animation: none;
    }
}


/* Modern Description Component Styles */
.modern-description-container {
    padding: 0;
}

.modern-description-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--gray-200);
    position: relative;
}

.modern-description-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.description-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
}

.description-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.2;
}

.description-subtitle {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    font-weight: 500;
}

.modern-description-content {
    margin-bottom: 3rem;
}

.description-text {
    color: var(--gray-700);
    line-height: 1.8;
    font-size: 1rem;
}

.description-text h4 {
    color: var(--gray-900);
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    font-size: 1.25rem;
}

.description-text ul {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.description-text li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.description-text strong {
    color: var(--gray-900);
    font-weight: 600;
}

/* Highlights Section */
.modern-highlights-section {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
}

.highlights-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2rem;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.highlight-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.highlight-card:hover::before {
    transform: scaleX(1);
}

.highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.highlight-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    background: rgba(37, 99, 235, 0.1);
}

.highlight-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

.highlight-description {
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
    font-size: 0.9rem;
}

/* Technical Information */
.modern-technical-info {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
}

.technical-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2rem;
}

.technical-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.technical-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
    transition: all var(--transition-fast);
}

.technical-item:hover {
    background: white;
    border-color: var(--gray-200);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.technical-label {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.technical-value {
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: right;
    max-width: 60%;
}

/* Security Features Detail */
.modern-security-details {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(16, 163, 74, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.1);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
}

.security-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2rem;
}

.security-features-list {
    display: grid;
    gap: 2rem;
}

.security-feature-item {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.security-feature-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--success-color);
}

.security-feature-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--success-color), #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-md);
}

.security-feature-content {
    flex: 1;
}

.security-feature-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

.security-feature-description {
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Usage Guidelines */
.modern-usage-guidelines {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
}

.guidelines-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2rem;
}

.guidelines-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.guideline-section {
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.guideline-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
}

.guideline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guideline-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.guideline-list.positive li {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.1);
}

.guideline-list.warning li {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.1);
}

.guideline-list li:hover {
    transform: translateX(3px);
    box-shadow: var(--shadow-sm);
}

.guideline-list li::before {
    content: '•';
    color: var(--success-color);
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1;
    margin-top: 0.125rem;
}

.guideline-list.warning li::before {
    color: var(--warning-color);
}

/* Warranty Information */
.modern-warranty-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(29, 78, 216, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
}

.warranty-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2rem;
}

.warranty-content {
    display: grid;
    gap: 2rem;
}

.warranty-item {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.warranty-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--info-color);
}

.warranty-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.warranty-details h6 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
}

.warranty-details p {
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .modern-description-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .technical-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .guidelines-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 767.98px) {
    .modern-description-container {
        padding: 0;
    }
    
    .modern-highlights-section,
    .modern-technical-info,
    .modern-security-details,
    .modern-usage-guidelines,
    .modern-warranty-info {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .description-title {
        font-size: 1.5rem;
    }
    
    .highlights-title,
    .technical-title,
    .security-title,
    .guidelines-title,
    .warranty-title {
        font-size: 1.25rem;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .security-feature-item,
    .warranty-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .security-feature-icon,
    .warranty-icon {
        align-self: center;
    }
    
    .technical-item {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .technical-value {
        text-align: center;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .highlight-card {
        padding: 1.5rem;
    }
    
    .security-feature-item,
    .warranty-item {
        padding: 1.5rem;
    }
    
    .guideline-section {
        padding: 1.5rem;
    }
    
    .description-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .highlight-icon,
    .security-feature-icon,
    .warranty-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}

/* Modern Specifications Styles */
.modern-specifications-container {
    padding: 0;
}

.modern-specs-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--gray-200);
    position: relative;
}

.modern-specs-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.specs-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
}

.specs-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.2;
}

.specs-subtitle {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    font-weight: 500;
}

/* Custom Features */
.modern-custom-features {
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}

.features-header {
    margin-bottom: 2rem;
}

.features-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.features-content {
    color: var(--gray-700);
    line-height: 1.7;
}

.features-content h1,
.features-content h2,
.features-content h3,
.features-content h4,
.features-content h5,
.features-content h6 {
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.features-content ul,
.features-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.features-content li {
    margin-bottom: 0.5rem;
}

/* Specifications Categories */
.modern-specs-categories {
    display: grid;
    gap: 3rem;
}

.specs-category {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
}

.specs-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.specs-category:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.category-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--success-color), #16a34a);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: var(--shadow-md);
}

.category-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.specs-table {
    display: grid;
    gap: 1rem;
}

.spec-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
    transition: all var(--transition-base);
    align-items: center;
}

.spec-row:hover {
    background: white;
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
    border-color: var(--gray-200);
}

.spec-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.spec-arrow {
    color: var(--primary-color);
    font-size: 0.8rem;
    transition: transform var(--transition-fast);
}

.spec-row:hover .spec-arrow {
    transform: translateX(3px);
}

.spec-value {
    color: var(--gray-600);
    line-height: 1.5;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Comparison Chart */
.modern-comparison-chart {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
}

.chart-header {
    text-align: center;
    margin-bottom: 3rem;
}

.chart-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.chart-subtitle {
    color: var(--gray-600);
    font-size: 1rem;
    font-weight: 500;
}

.comparison-table {
    display: grid;
    gap: 1rem;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.comparison-header {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 1.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    align-items: center;
    transition: all var(--transition-base);
}

.comparison-row:hover {
    background: rgba(37, 99, 235, 0.02);
}

.comparison-row:last-child {
    border-bottom: none;
}

.feature-column {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9rem;
}

.value-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    justify-content: center;
}

.value-badge.our-badge {
    background: linear-gradient(135deg, var(--success-color), #16a34a);
    color: white;
    box-shadow: var(--shadow-sm);
}

.value-badge.standard-badge {
    background: var(--gray-200);
    color: var(--gray-700);
}

.advantage-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--warning-color), #f97316);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.8rem;
    box-shadow: var(--shadow-sm);
}

/* Certifications */
.modern-certifications {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: 3rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
}

.certifications-header {
    text-align: center;
    margin-bottom: 3rem;
}

.certifications-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.certifications-subtitle {
    color: var(--gray-600);
    font-size: 1rem;
    font-weight: 500;
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.certification-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.certification-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.cert-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--warning-color), #f97316);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.cert-name {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.cert-description {
    color: var(--gray-600);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1199.98px) {
    .comparison-header,
    .comparison-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    
    .comparison-header > *,
    .comparison-row > * {
        padding: 0.5rem;
    }
}

@media (max-width: 991.98px) {
    .modern-specifications-container {
        padding: 0;
    }
    
    .modern-specs-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .specs-title {
        font-size: 1.75rem;
    }
    
    .spec-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    
    .certifications-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .modern-custom-features,
    .specs-category,
    .modern-comparison-chart,
    .modern-certifications {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .specs-title {
        font-size: 1.5rem;
    }
    
    .category-title,
    .chart-title,
    .certifications-title {
        font-size: 1.25rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .certification-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .spec-row {
        padding: 1rem;
    }
    
    .comparison-header,
    .comparison-row {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .specs-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .category-icon,
    .cert-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .spec-label,
    .spec-value {
        font-size: 0.8rem;
    }
    
    .value-badge,
    .advantage-badge {
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Modern Reviews Section Styles */
.modern-reviews-section {
    position: relative;
}

/* Modern Review Summary */
.modern-review-summary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border-radius: var(--radius-2xl);
    padding: 3rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(99, 102, 241, 0.1);
    position: relative;
    overflow: hidden;
}

.modern-review-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-gradient);
}

.modern-average-rating {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.rating-score-large {
    font-size: 4rem;
    font-weight: 900;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 1rem;
}

.star-rating-display {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.star-rating-display i {
    font-size: 1.8rem;
}

.rating-summary-text {
    font-size: 1.1rem;
    color: var(--gray-700);
    margin-bottom: 1rem;
}

.review-authenticity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Modern Rating Breakdown */
.modern-rating-breakdown {
    padding: 1.5rem;
}

.rating-breakdown-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rating-label {
    min-width: 80px;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modern-rating-progress {
    flex: 1;
    height: 12px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.modern-progress-fill {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
    position: relative;
}

.modern-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.rating-count, .rating-percentage {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    color: var(--gray-600);
}

/* Modern Review Filters */
.modern-review-filters {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-label {
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    min-width: 120px;
}

.modern-filter-select {
    border-radius: var(--radius-lg);
    border: 2px solid rgba(99, 102, 241, 0.2);
    padding: 0.75rem 1rem;
    background: white;
    transition: all var(--transition-base);
}

.modern-filter-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}

.quick-filter-tags {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.filter-tags-label {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 1rem;
    display: block;
}

.filter-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-full);
    color: var(--gray-700);
    font-weight: 500;
    transition: all var(--transition-base);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
}

.filter-tag:hover,
.filter-tag.active {
    background: var(--primary-gradient);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Modern Review Highlights */
.modern-review-highlights {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.highlights-title {
    text-align: center;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.highlight-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.highlight-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.highlight-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(99, 102, 241, 0.1);
    flex-shrink: 0;
}

.highlight-content h6 {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.highlight-content p {
    color: var(--gray-600);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Modern Write Review Section */
.modern-write-review-section {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border-radius: var(--radius-2xl);
    padding: 3rem;
    margin-top: 4rem;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.write-review-header {
    text-align: center;
    margin-bottom: 3rem;
}

.write-review-title {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.write-review-subtitle {
    color: var(--gray-600);
    font-size: 1.1rem;
}

.write-review-form-container {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

/* Modern Star Rating Input */
.modern-star-rating-input {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.star-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    transition: all var(--transition-base);
    border-radius: var(--radius-md);
}

.star-btn i {
    font-size: 2rem;
    color: var(--gray-300);
    transition: all var(--transition-base);
}

.star-btn:hover i,
.star-btn.active i {
    color: var(--warning-color);
    transform: scale(1.1);
}

.rating-feedback {
    font-weight: 600;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.rating-feedback.show {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
}

/* Modern Form Controls */
.modern-form-control {
    border-radius: var(--radius-lg);
    border: 2px solid rgba(99, 102, 241, 0.2);
    padding: 1rem 1.25rem;
    transition: all var(--transition-base);
    background: rgba(255, 255, 255, 0.9);
}

.modern-form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
    background: white;
}

.modern-form-check {
    padding: 1.5rem;
    background: rgba(99, 102, 241, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.modern-form-check .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.1em;
}

.modern-form-check .form-check-label {
    font-weight: 500;
    color: var(--gray-700);
    line-height: 1.5;
}

/* Modern Submit Button */
.modern-submit-btn {
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    padding: 1.25rem 2.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modern-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left var(--transition-base);
}

.modern-submit-btn:hover::before {
    left: 100%;
}

.modern-submit-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-2xl);
    color: white;
}

.modern-submit-btn:disabled {
    opacity: 0.7;
    transform: none;
    cursor: not-allowed;
}

.submit-info {
    margin-top: 1rem;
    text-align: center;
}

/* Character Counter */
.char-counter {
    font-size: 0.875rem;
    color: var(--gray-500);
    transition: color var(--transition-fast);
}

.char-counter.warning {
    color: var(--warning-color);
}

.char-counter.danger {
    color: var(--danger-color);
}

/* Photo Upload */
.photo-upload-container {
    border: 2px dashed rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    transition: all var(--transition-base);
    background: rgba(99, 102, 241, 0.02);
}

.photo-upload-container:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.05);
}

.photo-preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.photo-preview-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--gray-100);
    border: 2px solid rgba(99, 102, 241, 0.2);
}

.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-remove-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0.75rem;
}

.photo-remove-btn:hover {
    background: var(--danger-color);
    transform: scale(1.1);
}

/* Login Prompt */
.login-prompt {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.login-prompt-content {
    max-width: 400px;
    margin: 0 auto;
}

.login-prompt-icon {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1.5rem;
}

.login-prompt h5 {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.login-prompt p {
    color: var(--gray-600);
    margin-bottom: 2rem;
}

/* No Reviews State */
.no-reviews-state {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.no-reviews-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.no-reviews-icon::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    animation: pulse 3s infinite;
}

.no-reviews-icon i {
    font-size: 3rem;
    color: var(--primary-color);
}

.no-reviews-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.no-reviews-subtitle {
    font-size: 1.1rem;
    color: var(--gray-600);
    margin-bottom: 2.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.review-benefits {
    margin-top: 3rem;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.review-benefits h6 {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
    text-align: center;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--gray-600);
    font-size: 0.95rem;
}

/* Modern Review Pagination */
.modern-review-pagination {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.pagination-container {
    display: flex;
    justify-content: center;
}

/* Loading States */
.review-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--gray-500);
}

.review-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .modern-review-summary {
        padding: 2rem;
    }
    
    .modern-average-rating {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .rating-score-large {
        font-size: 3rem;
    }
    
    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .modern-review-filters .row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .filter-tags-container {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .modern-review-summary,
    .modern-review-filters,
    .modern-write-review-section {
        padding: 1.5rem;
    }
    
    .write-review-form-container {
        padding: 1.5rem;
    }
    
    .rating-breakdown-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .rating-label {
        min-width: auto;
        font-size: 0.9rem;
    }
    
    .modern-rating-progress {
        min-width: 120px;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .filter-label {
        min-width: auto;
    }
    
    .modern-filter-select {
        width: 100%;
    }
    
    .filter-tags-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-tag {
        justify-content: center;
    }
    
    .modern-star-rating-input {
        justify-content: center;
    }
    
    .star-btn i {
        font-size: 1.5rem;
    }
    
    .modern-submit-btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 2rem;
    }
    
    .photo-preview-container {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    
    .no-reviews-state {
        padding: 3rem 1rem;
    }
    
    .no-reviews-icon {
        width: 100px;
        height: 100px;
    }
    
    .no-reviews-icon i {
        font-size: 2.5rem;
    }
    
    .no-reviews-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .modern-review-summary .row {
        flex-direction: column;
    }
    
    .modern-average-rating {
        margin-bottom: 2rem;
    }
    
    .rating-breakdown-row {
        font-size: 0.875rem;
    }
    
    .highlight-item {
        padding: 1rem;
    }
    
    .highlight-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .write-review-title {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modern-submit-btn {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }
}

/* Animation Keyframes */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .modern-review-summary,
    .modern-review-filters,
    .modern-write-review-section {
        background: rgba(26, 26, 46, 0.9);
        border-color: rgba(99, 102, 241, 0.2);
    }
    
    .modern-average-rating,
    .write-review-form-container,
    .login-prompt {
        background: rgba(15, 15, 35, 0.95);
    }
    
    .modern-form-control {
        background: rgba(26, 26, 46, 0.8);
        border-color: rgba(99, 102, 241, 0.3);
        color: var(--gray-200);
    }
    
    .modern-form-control:focus {
        background: rgba(26, 26, 46, 0.9);
    }
}

/* Print Styles */
@media print {
    .modern-review-filters,
    .modern-write-review-section,
    .review-photo-modal {
        display: none !important;
    }
    
    .modern-review-summary,
    .modern-reviews-list {
        box-shadow: none;
        border: 1px solid #ccc;
        background: white;
    }
}

/* Modern FAQ Component Styles */
.modern-faq-container {
    padding: 0;
}

.modern-faq-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--gray-200);
    position: relative;
}

.modern-faq-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.faq-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
}

.faq-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.2;
}

.faq-subtitle {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    font-weight: 500;
}

/* FAQ Search */
.modern-faq-search {
    margin-bottom: 2.5rem;
}

.search-container {
    max-width: 600px;
    margin: 0 auto;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    font-size: 1rem;
    background: white;
    transition: all var(--transition-base);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-icon {
    position: absolute;
    left: 1rem;
    color: var(--gray-400);
    font-size: 1.125rem;
    z-index: 2;
}

.search-clear {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.search-clear:hover {
    color: var(--gray-600);
    background: var(--gray-100);
}

.search-results-count {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* FAQ Filters */
.modern-faq-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-label {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
    white-space: nowrap;
}

.filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-full);
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Popular Questions */
.modern-popular-questions {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 191, 36, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.1);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
}

.popular-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2rem;
}

.popular-questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.popular-question-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.popular-question-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--warning-color);
}

.question-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.question-header i {
    font-size: 1.25rem;
    margin-top: 0.125rem;
}

.question-text {
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
    margin: 0;
    font-size: 0.95rem;
}

.answer-preview {
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.expand-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.expand-btn:hover {
    color: var(--primary-dark);
    transform: translateX(2px);
}

/* FAQ Accordion */
.modern-faq-accordion {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.accordion-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.accordion-controls {
    display: flex;
    gap: 1rem;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.control-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.modern-faq-item {
    border-bottom: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.modern-faq-item:last-child {
    border-bottom: none;
}

.modern-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-base);
}

.modern-faq-question:hover {
    color: var(--primary-color);
}

.question-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.question-text {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 1rem;
    line-height: 1.4;
}

.popular-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--warning-color), #f97316);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.question-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.category-tag {
    padding: 0.25rem 0.75rem;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.faq-toggle-icon {
    font-size: 1.125rem;
    color: var(--gray-400);
    transition: transform var(--transition-base);
}

.modern-faq-question[aria-expanded="true"] .faq-toggle-icon {
    transform: rotate(45deg);
}

.modern-faq-answer {
    padding: 0 0 1.5rem 0;
}

.answer-content {
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.answer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
}

.helpful-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.helpful-text {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

.helpful-buttons {
    display: flex;
    gap: 0.5rem;
}

.helpful-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    color: var(--gray-600);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.helpful-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    color: var(--gray-600);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.share-btn:hover {
    border-color: var(--info-color);
    color: var(--info-color);
}

/* No Results State */
.modern-no-results {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--gray-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
}

.no-results-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--gray-400);
}

.no-results-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.no-results-text {
    color: var(--gray-600);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.no-results-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.no-results-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* Contact Support CTA */
.modern-faq-support {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(29, 78, 216, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
}

.support-container {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.support-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.support-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: var(--shadow-lg);
}

.support-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.support-subtitle {
    color: var(--gray-600);
    font-size: 1rem;
    margin: 0;
}

.support-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.support-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.support-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: var(--shadow-md);
}

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

.support-btn.secondary {
    background: white;
    color: var(--gray-700);
    border: 2px solid var(--gray-200);
}

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

/* Responsive Design */
@media (max-width: 991.98px) {
    .modern-faq-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .popular-questions-grid {
        grid-template-columns: 1fr;
    }
    
    .accordion-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .accordion-controls {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .modern-faq-container {
        padding: 0;
    }
    
    .modern-popular-questions,
    .modern-faq-accordion,
    .modern-faq-support {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .faq-title {
        font-size: 1.5rem;
    }
    
    .modern-faq-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .filter-buttons {
        justify-content: center;
    }
    
    .modern-faq-question {
        padding: 1rem 0;
    }
    
    .question-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .question-controls {
        gap: 0.5rem;
    }
    
    .answer-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .helpful-section {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    
    .support-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .support-btn {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .popular-question-card {
        padding: 1rem;
    }
    
    .modern-faq-accordion {
        padding: 1rem;
    }
    
    .faq-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .support-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .filter-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Modern Product Card Styles */
.modern-product-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: all var(--transition-slow);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modern-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
    border-color: rgba(37, 99, 235, 0.3);
}

.modern-product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.modern-product-card:hover::before {
    transform: scaleX(1);
}

/* Image Container */
.modern-card-image-container {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
}

.modern-card-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.modern-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Image Overlay */
.modern-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-card-image-container:hover .modern-card-overlay {
    opacity: 1;
}

.overlay-actions {
    display: flex;
    gap: 0.75rem;
}

.overlay-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: none;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 1.125rem;
}

.overlay-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

/* Product Badges */
.modern-card-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modern-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all var(--transition-base);
}

.modern-card-badge.featured {
    background: linear-gradient(135deg, var(--warning-color), #f97316);
    color: white;
}

.modern-card-badge.discount {
    background: linear-gradient(135deg, var(--success-color), #16a34a);
    color: white;
    animation: pulse 2s ease-in-out infinite;
}

.modern-card-badge.new {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

.modern-card-badge.low-stock {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    color: white;
    animation: blink 2s infinite;
}

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

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.7; }
}

/* Country Flag */
.modern-card-country {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.modern-card-country:hover {
    transform: scale(1.05);
}

.country-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.country-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
}

/* Security Indicators */
.modern-card-security {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.modern-card-security:hover {
    transform: scale(1.05);
}

.security-dots {
    display: flex;
    gap: 0.375rem;
}

.security-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--success-color), #16a34a);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
}

.security-dot:hover {
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.security-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card Content */
.modern-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1rem;
}

.modern-card-category {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    align-self: flex-start;
}

.modern-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.modern-card-title-link {
    color: var(--gray-900);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.modern-card-title-link:hover {
    color: var(--primary-color);
}

/* Rating */
.modern-card-rating {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rating-stars {
    display: flex;
    gap: 0.125rem;
}

.rating-stars i {
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.star-active {
    color: var(--warning-color);
}

.star-inactive {
    color: var(--gray-300);
}

.rating-text {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Features */
.modern-card-features {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-100);
    transition: all var(--transition-fast);
    flex: 1;
    text-align: center;
}

.feature-item:hover {
    background: white;
    border-color: var(--gray-200);
    transform: translateY(-1px);
}

.feature-item i {
    font-size: 1rem;
}

.feature-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
}

/* Description */
.modern-card-description {
    color: var(--gray-600);
    font-size: 0.875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pricing */
.modern-card-pricing {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-lg);
    margin-top: auto;
}

.pricing-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.price-group {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.price-current {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
}

.price-original {
    font-size: 1rem;
    color: var(--gray-500);
    text-decoration: line-through;
    font-weight: 600;
}

.price-contact {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-700);
}

.price-savings {
    font-size: 0.875rem;
    color: var(--success-color);
    font-weight: 600;
    background: rgba(34, 197, 94, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    align-self: flex-start;
}

/* Actions */
.modern-card-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.primary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.modern-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.modern-card-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left var(--transition-base);
}

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

.modern-card-btn.add-to-cart {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: var(--shadow-sm);
}

.modern-card-btn.add-to-cart:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: white;
}

.modern-card-btn.login-required {
    background: linear-gradient(135deg, var(--secondary-color), var(--gray-600));
    color: white;
    box-shadow: var(--shadow-sm);
}

.modern-card-btn.login-required:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: white;
}

.modern-card-btn.view-details {
    background: white;
    color: var(--gray-700);
    border: 2px solid var(--gray-200);
}

.modern-card-btn.view-details:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.secondary-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--gray-200);
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0.875rem;
}

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

.action-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Quick Info */
.modern-card-quick-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--gray-600);
    text-align: center;
}

.info-item i {
    font-size: 1rem;
}

/* Loading State */
.modern-card-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner {
    width: 40px;
    height: 40px;
}

.spinner {
    width: 100%;
    height: 100%;
    border: 3px solid rgba(37, 99, 235, 0.2);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s linear infinite;
}

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

/* Responsive Design */
@media (max-width: 767.98px) {
    .modern-card-content {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .modern-card-features {
        gap: 0.5rem;
    }
    
    .feature-item {
        padding: 0.375rem;
    }
    
    .feature-item span {
        font-size: 0.7rem;
    }
    
    .primary-actions {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .modern-card-btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .modern-card-quick-info {
        gap: 0.25rem;
    }
    
    .info-item {
        font-size: 0.7rem;
    }
    
    .info-item i {
        font-size: 0.875rem;
    }
    
    .modern-card-badges {
        top: 0.75rem;
        left: 0.75rem;
        gap: 0.375rem;
    }
    
    .modern-card-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
    
    .modern-card-country {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .modern-card-security {
        bottom: 0.75rem;
        right: 0.75rem;
        padding: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .modern-card-title {
        font-size: 1rem;
    }
    
    .price-current {
        font-size: 1.25rem;
    }
    
    .secondary-actions {
        gap: 0.75rem;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* Hover Effects Enhancement */
.modern-product-card:hover .modern-card-badges .modern-card-badge {
    transform: translateY(-2px);
}

.modern-product-card:hover .modern-card-country {
    transform: scale(1.05) translateY(-2px);
}

.modern-product-card:hover .modern-card-security {
    transform: scale(1.05) translateY(2px);
}

.modern-product-card:hover .security-dot {
    animation: securityPulse 1s infinite;
}

@keyframes securityPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); 
    }
    50% { 
        transform: scale(1.2); 
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); 
    }
}

/* Focus States for Accessibility */
.modern-card-btn:focus,
.overlay-btn:focus,
.action-btn:focus {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 2px;
}

.modern-card-title-link:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .modern-product-card {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(51, 65, 85, 0.3);
    }
    
    .modern-card-content {
        color: var(--gray-200);
    }
    
    .modern-card-title-link {
        color: var(--gray-100);
    }
    
    .feature-item {
        background: rgba(51, 65, 85, 0.5);
        border-color: rgba(71, 85, 105, 0.3);
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .modern-product-card {
        border: 2px solid #000;
    }
    
    .modern-card-btn {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .modern-product-card,
    .modern-card-image,
    .modern-card-btn,
    .overlay-btn,
    .action-btn {
        transition: none;
    }
    
    .modern-card-badge,
    .security-dot {
        animation: none;
    }
}

/* Modern Reviews CSS - 现代化评论样式 */
/* 请将此CSS添加到您的主样式文件中或单独创建 reviews.css 文件 */


/* 现代化评论区域样式 */
.modern-reviews-section {
    position: relative;
    margin: 2rem 0;
}

/* 评论摘要区域 */
.modern-review-summary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border-radius: var(--radius-2xl);
    padding: 3rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(99, 102, 241, 0.1);
    position: relative;
    overflow: hidden;
}

.modern-review-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.modern-average-rating {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.rating-score-large {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 1rem;
}

.star-rating-display {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.star-rating-display i {
    font-size: 1.8rem;
    transition: all var(--transition-fast);
}

.rating-summary-text {
    font-size: 1.1rem;
    color: var(--gray-700);
    margin-bottom: 1rem;
}

.review-authenticity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
}

/* 评分分布 */
.modern-rating-breakdown {
    padding: 1.5rem;
}

.rating-breakdown-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rating-label {
    min-width: 80px;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modern-rating-progress {
    flex: 1;
    height: 12px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.modern-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
    position: relative;
}

.modern-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.rating-count, .rating-percentage {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    color: var(--gray-600);
}

/* 评论筛选器 */
.modern-review-filters {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.filter-label {
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    min-width: 120px;
}

.modern-filter-select {
    border-radius: var(--radius-lg);
    border: 2px solid rgba(99, 102, 241, 0.2);
    padding: 0.75rem 1rem;
    background: white;
    transition: all var(--transition-base);
}

.modern-filter-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}

.quick-filter-tags {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.filter-tags-label {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 1rem;
    display: block;
}

.filter-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-full);
    color: var(--gray-700);
    font-weight: 500;
    transition: all var(--transition-base);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
}

.filter-tag:hover,
.filter-tag.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 评论亮点 */
.modern-review-highlights {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.highlights-title {
    text-align: center;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.highlight-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.highlight-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.highlight-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(99, 102, 241, 0.1);
    flex-shrink: 0;
}

.highlight-content h6 {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.highlight-content p {
    color: var(--gray-600);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 评论列表 */
.modern-reviews-list {
    margin-bottom: 3rem;
}

/* 评论卡片 */
.modern-review-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: all var(--transition-slow);
    position: relative;
    margin-bottom: 2rem;
    padding: 2rem;
}

.modern-review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl);
    border-color: rgba(37, 99, 235, 0.3);
}

.modern-review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, var(--success-color), var(--info-color));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.modern-review-card:hover::before {
    transform: scaleX(1);
}

/* 评论头部 */
.review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.reviewer-profile-section {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.reviewer-avatar-container {
    position: relative;
}

.reviewer-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: var(--shadow-md);
}

.verified-purchase-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 20px;
    height: 20px;
    background: var(--success-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    border: 2px solid white;
}

.reviewer-info {
    flex: 1;
}

.reviewer-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.reviewer-metadata {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.verified-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.review-date {
    color: var(--gray-500);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.star-rating-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.star-rating-display {
    display: flex;
    gap: 0.25rem;
}

.star-rating-display i {
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.star-filled {
    color: var(--warning-color);
}

.star-empty {
    color: var(--gray-300);
}

.rating-value-text {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
}

/* 评论操作 */
.review-actions-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.menu-toggle-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
}

.menu-toggle-button:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.1);
}

/* 评论内容 */
.review-card-content {
    margin-bottom: 1.5rem;
}

.review-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.review-body-section {
    margin-bottom: 1.5rem;
}

.review-text-content {
    color: var(--gray-700);
    line-height: 1.7;
    font-size: 0.95rem;
}

.read-more-toggle {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--transition-fast);
}

.read-more-toggle:hover {
    color: var(--primary-dark);
}

.toggle-icon {
    transition: transform var(--transition-base);
}

.read-more-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* 优缺点部分 */
.pros-cons-section {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.pros-subsection, .cons-subsection {
    padding: 1rem;
    border-radius: var(--radius-md);
}

.pros-subsection {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.1);
}

.cons-subsection {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.1);
}

.pros-title, .cons-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pros-title {
    color: var(--success-color);
}

.cons-title {
    color: var(--warning-color);
}

.pros-list, .cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pros-item, .cons-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.pros-item i {
    color: var(--success-color);
    margin-top: 0.125rem;
}

.cons-item i {
    color: var(--warning-color);
    margin-top: 0.125rem;
}

/* 评论底部 */
.review-card-footer {
    border-top: 1px solid var(--gray-200);
    padding-top: 1.5rem;
}

.helpfulness-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.helpfulness-question {
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
}

.helpfulness-buttons {
    display: flex;
    gap: 0.75rem;
}

.helpfulness-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    color: var(--gray-700);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.helpfulness-btn:hover {
    border-color: var(--success-color);
    color: var(--success-color);
    background: rgba(34, 197, 94, 0.05);
    transform: translateY(-1px);
}

.helpfulness-btn.voted {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.vote-count {
    font-weight: 700;
}

/* 商家回复 */
.seller-response-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(139, 92, 246, 0.05));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.seller-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.9rem;
}

.response-date {
    color: var(--gray-500);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.response-content p {
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0;
    font-size: 0.9rem;
}

/* 写评论区域 */
.modern-write-review-section {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border-radius: var(--radius-2xl);
    padding: 3rem;
    margin-top: 4rem;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.write-review-header {
    text-align: center;
    margin-bottom: 3rem;
}

.write-review-title {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.write-review-subtitle {
    color: var(--gray-600);
    font-size: 1.1rem;
}

.write-review-form-container {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

/* 星级评分输入 */
.modern-star-rating-input {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.star-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    transition: all var(--transition-base);
    border-radius: var(--radius-md);
}

.star-btn i {
    font-size: 2rem;
    color: var(--gray-300);
    transition: all var(--transition-base);
}

.star-btn:hover i,
.star-btn.active i {
    color: var(--warning-color);
    transform: scale(1.1);
}

.rating-feedback {
    font-weight: 600;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.rating-feedback.show {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
}

/* 现代表单控件 */
.modern-form-control {
    border-radius: var(--radius-lg);
    border: 2px solid rgba(99, 102, 241, 0.2);
    padding: 1rem 1.25rem;
    transition: all var(--transition-base);
    background: rgba(255, 255, 255, 0.9);
}

.modern-form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
    background: white;
}

.modern-form-check {
    padding: 1.5rem;
    background: rgba(99, 102, 241, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.modern-form-check .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.1em;
}

.modern-form-check .form-check-label {
    font-weight: 500;
    color: var(--gray-700);
    line-height: 1.5;
}

/* 提交按钮 */
.modern-submit-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    padding: 1.25rem 2.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modern-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left var(--transition-base);
}

.modern-submit-btn:hover::before {
    left: 100%;
}

.modern-submit-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-2xl);
    color: white;
}

.modern-submit-btn:disabled {
    opacity: 0.7;
    transform: none;
    cursor: not-allowed;
}

.submit-info {
    margin-top: 1rem;
    text-align: center;
}

/* 字符计数器 */
.char-counter {
    font-size: 0.875rem;
    color: var(--gray-500);
    transition: color var(--transition-fast);
}

.char-counter.warning {
    color: var(--warning-color);
}

.char-counter.danger {
    color: var(--danger-color);
}

/* 登录提示 */
.login-prompt {
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.login-prompt-content {
    max-width: 400px;
    margin: 0 auto;
}

.login-prompt-icon {
    font-size: 4rem;
    color: var(--gray-400);
    margin-bottom: 1.5rem;
}

.login-prompt h5 {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.login-prompt p {
    color: var(--gray-600);
    margin-bottom: 2rem;
}

/* 无评论状态 */
.no-reviews-state {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.no-reviews-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.no-reviews-icon::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    animation: pulse 3s infinite;
}

.no-reviews-icon i {
    font-size: 3rem;
    color: var(--primary-color);
}

.no-reviews-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.no-reviews-subtitle {
    font-size: 1.1rem;
    color: var(--gray-600);
    margin-bottom: 2.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.review-benefits {
    margin-top: 3rem;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.review-benefits h6 {
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1rem;
    text-align: center;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--gray-600);
    font-size: 0.95rem;
}

/* 评论分页 */
.modern-review-pagination {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.pagination-container {
    display: flex;
    justify-content: center;
}

.reviews-pagination-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
}

/* 加载状态 */
.review-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--gray-500);
}

.review-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

/* 无评论信息 */
.no-reviews-message {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--gray-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
}

.no-reviews-message .no-reviews-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--gray-400);
}

.no-reviews-message h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.no-reviews-message p {
    color: var(--gray-600);
    margin: 0;
    font-size: 1rem;
}

/* 动画效果 */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* 响应式设计 */
@media (max-width: 991.98px) {
    .modern-review-summary {
        padding: 2rem;
    }
    
    .modern-average-rating {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .rating-score-large {
        font-size: 3rem;
    }
    
    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .modern-review-filters .row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .filter-tags-container {
        justify-content: center;
    }
    
    .modern-review-card {
        padding: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .modern-review-summary,
    .modern-review-filters,
    .modern-write-review-section {
        padding: 1.5rem;
    }
    
    .write-review-form-container {
        padding: 1.5rem;
    }
    
    .rating-breakdown-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .rating-label {
        min-width: auto;
        font-size: 0.9rem;
    }
    
    .modern-rating-progress {
        min-width: 120px;
    }
    
    .filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .filter-label {
        min-width: auto;
    }
    
    .modern-filter-select {
        width: 100%;
    }
    
    .filter-tags-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-tag {
        justify-content: center;
    }
    
    .review-card-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .reviewer-profile-section {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .reviewer-metadata {
        justify-content: center;
    }
    
    .review-actions-section {
        justify-content: center;
    }
    
    .pros-cons-section {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .helpfulness-section {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .helpfulness-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .helpfulness-btn {
        justify-content: center;
    }
    
    .modern-star-rating-input {
        justify-content: center;
    }
    
    .star-btn i {
        font-size: 1.5rem;
    }
    
    .modern-submit-btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 2rem;
    }
    
    .no-reviews-state {
        padding: 3rem 1rem;
    }
    
    .no-reviews-icon {
        width: 100px;
        height: 100px;
    }
    
    .no-reviews-icon i {
        font-size: 2.5rem;
    }
    
    .no-reviews-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .modern-review-summary .row {
        flex-direction: column;
    }
    
    .modern-average-rating {
        margin-bottom: 2rem;
    }
    
    .rating-breakdown-row {
        font-size: 0.875rem;
    }
    
    .highlight-item {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }
    
    .highlight-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
        align-self: center;
    }
    
    .write-review-title {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modern-submit-btn {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }
    
    .modern-review-card {
        padding: 1rem;
    }
    
    .reviewer-avatar {
        width: 48px;
        height: 48px;
    }
    
    .verified-purchase-badge {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
}

/* 无障碍支持 */
.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;
}

/* Focus states */
.star-btn:focus,
.filter-tag:focus,
.helpfulness-btn:focus,
.menu-toggle-button:focus,
.modern-submit-btn:focus {
    outline: 3px solid rgba(37, 99, 235, 0.3);
    outline-offset: 2px;
}

.modern-form-control:focus {
    outline: none;
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-50: #0f172a;
        --gray-100: #1e293b;
        --gray-200: #334155;
        --gray-300: #475569;
        --gray-400: #64748b;
        --gray-500: #94a3b8;
        --gray-600: #cbd5e1;
        --gray-700: #e2e8f0;
        --gray-800: #f1f5f9;
        --gray-900: #f8fafc;
    }
    
    .modern-review-summary,
    .modern-review-filters,
    .modern-write-review-section,
    .write-review-form-container,
    .login-prompt {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(51, 65, 85, 0.3);
    }
    
    .modern-review-card {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(51, 65, 85, 0.3);
    }
    
    .modern-form-control {
        background: rgba(26, 26, 46, 0.8);
        border-color: rgba(99, 102, 241, 0.3);
        color: var(--gray-200);
    }
    
    .modern-form-control:focus {
        background: rgba(26, 26, 46, 0.9);
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0000ff;
        --gray-700: #000000;
        --gray-400: #666666;
    }
    
    .modern-review-card {
        border: 2px solid #000;
    }
    
    .modern-submit-btn {
        border: 2px solid currentColor;
    }
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .no-reviews-icon::before {
        animation: none;
    }
    
    .modern-progress-fill::after {
        animation: none;
    }
}

/* 打印样式 */
@media print {
    .modern-review-filters,
    .modern-write-review-section,
    .review-actions-section,
    .helpfulness-section {
        display: none !important;
    }
    
    .modern-review-summary,
    .modern-review-card {
        box-shadow: none;
        border: 1px solid #ccc;
        background: white;
    }
    
    .modern-review-card {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
}
/* ==========================================
   快速修复方案：处理不同比例的缩略图
   ========================================== */

/* 方案1: 使用 object-fit: contain 确保图片完整显示 */
.modern-thumbnail-item {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #f8f9fa; /* 背景色填充空白区域 */
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-thumbnail-item .modern-thumbnail-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* 关键：完整显示图片内容 */
    object-position: center;
    transition: transform 0.3s ease;
    background: white; /* 图片背景 */
}

/* 方案2: 动态高度版本（如果你想要更灵活的布局） */
.modern-thumbnail-item.flexible {
    width: 80px;
    min-height: 60px;
    max-height: 100px;
    height: auto; /* 允许高度自适应 */
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-thumbnail-item.flexible .modern-thumbnail-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* 主图片容器也使用相同原理 */
.modern-main-image-container {
    width: 100%;
     /* height: 500px;固定高度 */
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.modern-main-image-container .modern-main-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* 确保完整显示，不裁剪 */
    object-position: center;
    transition: opacity 0.3s ease;
}

/* 活跃状态 */
.modern-thumbnail-item.active {
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.modern-thumbnail-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modern-thumbnail-item:hover .modern-thumbnail-image {
    transform: scale(1.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .modern-thumbnail-item {
        width: 60px;
        height: 45px;
    }
    
    .modern-thumbnail-item.flexible {
        width: 60px;
        min-height: 45px;
        max-height: 75px;
    }
}

/* 缩略图画廊容器 */
.modern-thumbnail-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center; /* 居中对齐 */
    justify-content: flex-start;
    padding: 1rem 0;
}

/* 如果你想要左对齐不同高度的缩略图 */
.modern-thumbnail-gallery.align-top {
    align-items: flex-start;
}

/* 如果你想要底部对齐 */
.modern-thumbnail-gallery.align-bottom {
    align-items: flex-end;
}

/* Related Products Section Styles */
.related-products-section {
    background: linear-gradient(145deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    padding: 2rem;
    margin-top: 3rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.section-title i {
    color: #3498db;
    font-size: 1.5rem;
}

.section-subtitle {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 0;
    max-width: 600px;
    margin: 0 auto;
}

.related-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.related-product-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #f0f0f0;
}

.related-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #3498db;
}

.related-product-image {
    position: relative;
    
    overflow: hidden;
    background: #f8f9fa;
}

.related-product-image .image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-product-card:hover .product-thumbnail {
    transform: scale(1.05);
}

.country-flag-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.flag-mini {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.quick-actions {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

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

.quick-action-btn {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    background: rgba(52, 152, 219, 0.9);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.quick-action-btn:hover {
    background: #3498db;
    transform: scale(1.1);
}

.related-product-info {
    padding: 1.25rem;
}

.product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.product-name-link {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-name-link:hover {
    color: #3498db;
}

.country-label {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.product-pricing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.price-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.current-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #27ae60;
}

.original-price {
    font-size: 0.9rem;
    color: #95a5a6;
    text-decoration: line-through;
}

.discount-badge .discount-text {
    background: #e74c3c;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.product-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-view-details,
.btn-order-now,
.btn-login-required {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-view-details {
    background: #3498db;
    color: white;
    border: none;
}

.btn-view-details:hover {
    background: #2980b9;
    color: white;
}

.btn-order-now {
    background: #27ae60;
    color: white;
    border: none;
}

.btn-order-now:hover {
    background: #219a52;
    color: white;
}

.btn-login-required {
    background: transparent;
    color: #27ae60;
    border: 1px solid #27ae60;
}

.btn-login-required:hover {
    background: #27ae60;
    color: white;
}

.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.badge-item {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-featured {
    background: rgba(255, 193, 7, 0.9);
    color: #000;
}

.badge-new {
    background: rgba(220, 53, 69, 0.9);
}

.view-all-section {
    text-align: center;
    margin-top: 1.5rem;
}

.btn-view-all {
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.legacy-info-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 1.5rem;
    margin-top: 2rem;
    color: white;
}

.legacy-info-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.legacy-icon {
    font-size: 2rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.legacy-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.legacy-description {
    margin: 0;
    opacity: 0.9;
    line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .related-products-section {
        padding: 1.5rem;
        margin-top: 2rem;
        border-radius: 15px;
    }
    
    .related-products-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .section-title {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .product-actions {
        flex-direction: column;
    }
    
    .legacy-info-content {
        flex-direction: column;
        text-align: center;
    }
    
    .legacy-icon {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .related-product-image {
        height: 160px;
    }
    
    .product-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .country-label {
        align-self: flex-start;
    }
}

/**
 * Reviews System CSS
 * 支持评论系统的样式
 * Version: 1.0.1
 */

/* 评论系统基础样式 */
.modern-reviews-section {
    margin-top: 2rem;
}

/* 星级评分样式 */
.modern-star-rating-input {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.star-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.5rem;
    color: #d1d5db;
}

.star-btn:hover {
    transform: scale(1.1);
}

.star-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.star-btn.error,
.modern-star-rating-input.error {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 评分反馈样式 */
.rating-feedback {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    transition: all 0.3s ease;
}

.rating-feedback.rating-1 { color: #ef4444; }
.rating-feedback.rating-2 { color: #f97316; }
.rating-feedback.rating-3 { color: #eab308; }
.rating-feedback.rating-4 { color: #22c55e; }
.rating-feedback.rating-5 { color: #16a34a; }

/* 评论卡片样式 */
.modern-review-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: #ffffff;
    transition: all 0.3s ease;
}

.modern-review-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 评论者信息样式 */
.reviewer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.reviewer-avatar-container {
    position: relative;
}

.verified-purchase-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 2px solid white;
}

/* 星级显示样式 */
.star-rating-display {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 0.5rem;
}

.star-rating-display i {
    font-size: 1rem;
}

.star-filled {
    color: #fbbf24;
}

.star-empty {
    color: #d1d5db;
}

/* 阅读更多按钮样式 */
.read-more-toggle {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
}

.read-more-toggle:hover {
    color: #2563eb;
    text-decoration: underline;
}

.read-more-toggle .toggle-icon {
    transition: transform 0.2s ease;
}

/* 有用性投票按钮样式 */
.helpfulness-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.helpfulness-btn {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.helpfulness-btn:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.helpfulness-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.helpfulness-btn.voted {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* 筛选器样式 */
.filter-tag {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 1.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.filter-tag:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.filter-tag.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* 分页样式改进 */
.reviews-pagination-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.pagination {
    margin-bottom: 0;
}

.pagination .page-link {
    color: #6b7280;
    border-color: #e5e7eb;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

.pagination .page-item.active .page-link {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.pagination-info {
    color: #6b7280;
    font-size: 0.875rem;
}

/* 表单样式 */
.modern-form-control {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.modern-form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modern-form-control.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.modern-form-control.is-valid {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* 提交按钮样式 */
.modern-submit-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 0.5rem;
    color: white;
    padding: 0.75rem 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.modern-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 加载动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modern-review-card[style*="animation"] {
    animation: fadeInUp 0.3s ease forwards;
}

/* 优缺点样式 */
.pros-cons-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.pros-subsection,
.cons-subsection {
    margin-bottom: 1rem;
}

.pros-title {
    color: #22c55e;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cons-title {
    color: #f59e0b;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pros-list,
.cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pros-item,
.cons-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.pros-item i {
    color: #22c55e;
}

.cons-item i {
    color: #f59e0b;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .modern-review-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .reviewer-avatar {
        width: 40px;
        height: 40px;
    }
    
    .filter-tag {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .helpfulness-buttons {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .modern-submit-btn {
        width: 100%;
        justify-content: center;
    }
    
    .star-btn {
        font-size: 1.25rem;
    }
}

/* 无障碍性改进 */
@media (prefers-reduced-motion: reduce) {
    .modern-review-card,
    .filter-tag,
    .helpfulness-btn,
    .star-btn,
    .read-more-toggle {
        transition: none;
    }
    
    .modern-review-card[style*="animation"] {
        animation: none;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .modern-review-card {
        border-color: #000000;
    }
    
    .filter-tag {
        border-color: #000000;
    }
    
    .helpfulness-btn {
        border-color: #000000;
    }
}

/* 打印样式 */
@media print {
    .helpfulness-buttons,
    .filter-tag,
    .modern-submit-btn,
    .pagination {
        display: none;
    }
    
    .modern-review-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000000;
    }
}

/* 修复星级评分颜色 */
.star-btn i {
    font-size: 2rem;
    color: #d1d5db; /* 默认灰色 */
    transition: all 0.3s ease;
}

/* 关键修复：选中状态的星星 */
.star-btn.filled i,
.star-btn:hover i {
    color: #fbbf24 !important; /* 黄色，使用 !important 确保优先级 */
    transform: scale(1.1);
}

/* 如果使用 Bootstrap Icons，确保图标正确切换 */
.star-btn.filled i {
    color: #fbbf24 !important;
}

 /* 现代相关产品网格容器 */
        .modern-related-products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-6);
            padding: var(--space-8) 0;
            position: relative;
        }

        /* 现代产品卡片 */
        .modern-product-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: var(--radius-3xl);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all var(--transition-normal);
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            cursor: pointer;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .modern-product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-gradient);
            opacity: 0;
            transition: opacity var(--transition-normal);
            z-index: 0;
        }

        .modern-product-card:hover::before {
            opacity: 0.03;
        }

        .modern-product-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: var(--shadow-2xl);
            border-color: rgba(99, 102, 241, 0.4);
        }

        /* 产品图片容器 */
        .product-image-container {
            position: relative;
            border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
            overflow: hidden;
            height: 220px;
            background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
        }

        .product-image-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .product-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center center;
            transition: transform var(--transition-slow);
            border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        }

        .modern-product-card:hover .product-image {
            transform: scale(1.08);
        }

        /* 图片叠加层 */
        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, 
                rgba(0, 0, 0, 0) 0%, 
                rgba(0, 0, 0, 0.1) 50%, 
                rgba(0, 0, 0, 0.3) 100%);
            opacity: 0;
            transition: opacity var(--transition-normal);
            z-index: 1;
        }

        .modern-product-card:hover .image-overlay {
            opacity: 1;
        }

        /* 产品徽章 */
        .product-badge {
            position: absolute;
            top: var(--space-4);
            left: var(--space-4);
            background: var(--primary-gradient);
            color: var(--white);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            box-shadow: var(--shadow-md);
            z-index: 2;
            display: flex;
            align-items: center;
            gap: var(--space-1);
            animation: pulse 3s infinite;
        }

        .product-badge.featured {
            background: var(--accent-gradient);
        }

        .badge-text {
            font-size: var(--text-xs);
        }

        /* 产品类型徽章 */
        .product-type-badge {
            position: absolute;
            top: var(--space-4);
            right: var(--space-4);
            z-index: 2;
        }

        .product-type-badge .badge {
            font-size: var(--text-xs);
            font-weight: 600;
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-lg);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        /* 国家旗帜 */
        .product-country-flag {
            position: absolute;
            bottom: var(--space-4);
            right: var(--space-4);
            width: 32px;
            height: 24px;
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            z-index: 2;
        }

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

        /* 安全特征指示器 */
        .security-indicators {
            position: absolute;
            bottom: var(--space-4);
            left: var(--space-4);
            display: flex;
            gap: var(--space-2);
            z-index: 2;
        }

        .security-dot {
            width: 12px;
            height: 12px;
            border-radius: var(--radius-full);
            background: var(--success-color);
            border: 2px solid var(--white);
            box-shadow: var(--shadow-sm);
            animation: glow 2s ease-in-out infinite alternate;
        }

        .security-dot[data-feature="Holographic"] {
            background: var(--primary-color);
        }

        .security-dot[data-feature="RFID"] {
            background: var(--accent-color);
        }

        .security-dot[data-feature="UV"] {
            background: var(--success-color);
        }

        .security-dot[data-feature="Barcode"] {
            background: var(--warning-color);
        }

        /* 产品内容区域 */
        .product-content {
            padding: var(--space-6);
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
        }

        /* 产品分类 */
        .product-category {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--gray-500);
            font-size: var(--text-sm);
            font-weight: 500;
            margin-bottom: var(--space-3);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .product-category i {
            color: var(--primary-color);
        }

        /* 产品标题 */
        .product-title {
            font-size: var(--text-xl);
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: var(--space-4);
            line-height: 1.3;
        }

        .product-title-link {
            color: inherit;
            text-decoration: none;
            transition: color var(--transition-normal);
        }

        .product-title-link:hover {
            color: var(--primary-color);
            text-decoration: none;
        }

        /* 产品评级 */
        .product-rating {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            margin-bottom: var(--space-4);
        }

        .rating-stars {
            display: flex;
            gap: var(--space-1);
        }

        .star-active {
            color: var(--accent-color);
        }

        .star-inactive {
            color: var(--gray-300);
        }

        .rating-count {
            color: var(--gray-500);
            font-size: var(--text-sm);
        }

        /* 产品特性标签 */
        .product-features {
            display: flex;
            gap: var(--space-4);
            margin-bottom: var(--space-5);
            flex-wrap: wrap;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            color: var(--gray-600);
            font-size: var(--text-sm);
            font-weight: 500;
        }

        .feature-item i {
            color: var(--success-color);
            font-size: var(--text-sm);
        }

        /* 产品价格 */
        .product-pricing {
            margin-bottom: var(--space-5);
            margin-top: auto;
        }

        .price-group {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            flex-wrap: nowrap;
        }

        .price-current {
            font-size: var(--text-2xl);
            font-weight: 800;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .price-original {
            font-size: var(--text-lg);
            color: var(--gray-400);
            text-decoration: line-through;
        }

        .price-discount {
            background: var(--success-color);
            color: var(--white);
            padding: var(--space-1) var(--space-2);
            border-radius: var(--radius-md);
            font-size: var(--text-xs);
            font-weight: 700;
            animation: pulse 2s infinite;
        }

        .price-contact {
            font-size: var(--text-lg);
            color: var(--gray-600);
            font-weight: 600;
        }

        /* 操作按钮 */
        .product-actions-mobile {
            display: flex;
            gap: var(--space-3);
            margin-top: auto;
            flex-direction: column;
        }

        .product-btn-detail,
        .product-btn-buy {
            flex: 1;
            padding: var(--space-3) var(--space-4);
            border-radius: var(--radius-xl);
            font-weight: 600;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            transition: all var(--transition-normal);
            position: relative;
            overflow: hidden;
        }

        .product-btn-detail {
            background: transparent;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
        }

        .product-btn-detail:hover {
            background: var(--primary-color);
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .product-btn-buy {
            background: var(--primary-gradient);
            color: var(--white);
            border: 2px solid transparent;
        }

        .product-btn-buy::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 var(--transition-normal);
        }

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

        .product-btn-buy:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-glow);
            color: var(--white);
            text-decoration: none;
        }

        /* 加载状态 */
        .product-loading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .loading-spinner .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid var(--gray-200);
            border-top: 4px solid var(--primary-color);
            border-radius: var(--radius-full);
            animation: spin 1s linear infinite;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .modern-related-products-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: var(--space-4);
                padding: var(--space-6) 0;
            }

            .product-image-container {
                /* height: 180px; */
            }

            .product-content {
                padding: var(--space-4);
            }

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

            .price-current {
                font-size: var(--text-xl);
            }

            .product-features {
                gap: var(--space-2);
            }

            .product-actions-mobile {
                flex-direction: column;
                gap: var(--space-2);
            }
        }

        @media (max-width: 576px) {
            .modern-related-products-grid {
                grid-template-columns: 1fr;
                gap: var(--space-4);
            }

            .product-image-container {
                /* height: 160px; */
            }
        }

        /* 动画关键帧 */
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        @keyframes glow {
            from {
                box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
            }
            to {
                box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* 主题样式增强 */
        .modern-product-card.theme-dark {
            background: rgba(26, 26, 46, 0.95);
            color: var(--white);
            border-color: rgba(99, 102, 241, 0.3);
        }

        .modern-product-card.theme-dark .product-title,
        .modern-product-card.theme-dark .product-category {
            color: var(--white);
        }

        .modern-product-card.theme-dark .feature-item {
            color: var(--gray-300);
        }