/**
 * Christmas Theme Styles - Light and Elegant
 * Adds subtle Christmas touches without overwhelming the design
 */

/* Christmas color accent - subtle gradient overlay on logo text */
.logo h3 span {
    background: linear-gradient(135deg, #e74c3c 0%, #27ae60 50%, #e74c3c 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: christmas-shimmer 4s ease-in-out infinite;
}

@keyframes christmas-shimmer {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* Subtle Christmas accent on primary buttons */
.btn-primary:hover,
.cta-btn:hover {
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3), 0 4px 20px rgba(39, 174, 96, 0.3);
}

/* Christmas promo banner styling */
.christmas-promo-banner {
    background: linear-gradient(135deg, #c0392b 0%, #27ae60 50%, #c0392b 100%);
    background-size: 200% auto;
    animation: christmas-gradient 5s ease-in-out infinite;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}

.christmas-promo-banner::before {
    content: '❄ ';
}

.christmas-promo-banner::after {
    content: ' ❄';
}

@keyframes christmas-gradient {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* Festive discount badge */
.christmas-discount-badge {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.christmas-discount-badge::before {
    content: '🎄';
    font-size: 0.9em;
}

/* Subtle festive glow on cart summary during promo */
.cart-summary.has-christmas-promo {
    border-color: rgba(231, 76, 60, 0.4);
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.15), 0 4px 20px rgba(39, 174, 96, 0.15);
}

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .logo h3 span,
    .christmas-promo-banner {
        animation: none;
        background-position: 0% center;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .christmas-promo-banner {
        font-size: 0.8rem;
        padding: 8px 15px;
    }
}