/**
 * Sparkles Countdown Timer Components
 * Sale countdowns, event timers, and promotional displays
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* ========== BASE COUNTDOWN ========== */
.sparkles-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--white);
    border-radius: .5rem;
    box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;
    container-type: inline-size;
}

.sparkles-countdown-unit,
.sparkles-countdown-unit-base {
    min-width: 3rem;
}

.sparkles-countdown-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--color-secondary);
}

.sparkles-countdown-label {
    font-size: .75rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.sparkles-countdown-separator,
.sparkles-countdown-separator-base {
    font-size: 1.25rem;
    color: var(--gray-400);
    font-weight: 700;
}

/* ========== COUNTDOWN VARIANTS ========== */

/* Luxury variant with premium styling */
.sparkles-countdown-luxury {
    color: var(--white);
    box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;
    background: linear-gradient(to bottom right,var(--color-primary),var(--color-primary-dark));
}

.sparkles-countdown-luxury .sparkles-countdown-number {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Keep raw for complex text-shadow */ --tw-text-opacity: 1; color: rgba(255,255,255,var(--tw-text-opacity,1)); font-size: 1.875rem; line-height: 2.25rem;
}

.sparkles-countdown-luxury .sparkles-countdown-label {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
}

.sparkles-countdown-luxury .sparkles-countdown-separator {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
}

/* Minimal variant */
.sparkles-countdown-minimal {
    gap: .5rem;
}

/* .sparkles-countdown-minimal .sparkles-countdown-unit - inherits base styles */

.sparkles-countdown-minimal .sparkles-countdown-number {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.sparkles-countdown-minimal .sparkles-countdown-label {
    font-size: .75rem;
    line-height: 1rem;
}

/* Compact variant for small spaces */
.sparkles-countdown-compact {
    gap: .25rem;
    font-size: .875rem;
    line-height: 1.25rem;
}

.sparkles-countdown-compact .sparkles-countdown-unit {
    flex-direction: row;
    gap: .25rem;
}

.sparkles-countdown-compact .sparkles-countdown-number {
    font-size: 1rem;
    line-height: 1.5rem;
}

.sparkles-countdown-compact .sparkles-countdown-label {
    font-size: .75rem;
    line-height: 1rem;
    margin-top: 0;
}

/* Boxed variant */
.sparkles-countdown-boxed .sparkles-countdown-unit {
    background-color: var(--gray-100);
    border-radius: .5rem;
    padding: .75rem;
    box-shadow: 0 1px 2px 0 #0000000d;
}

.sparkles-countdown-boxed .sparkles-countdown-separator {
    background-color: initial;
    border-width: 0;
    margin-left: .5rem;
    margin-right: .5rem;
}

/* Neon variant for special events */
/* TW v4.1 upgrade path: drop-shadow() below can use native colored drop-shadow utilities,
   and text-shadow is now a first-class utility. Consider @utility definitions or
   drop-shadow-primary/30 + text-shadow-* tokens for the neon effect. */
.sparkles-countdown-neon {
    box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;
    filter: drop-shadow(0 0 10px rgb(var(--color-primary-rgb)/.3));
}

.sparkles-countdown-neon .sparkles-countdown-number {
    text-shadow: 0 0 10px rgb(var(--color-primary-rgb)/.5);
}

.sparkles-countdown-neon .sparkles-countdown-label {
    color: var(--color-accent);
}

/* ========== COUNTDOWN STATES ========== */

/* Urgent state (less than 1 hour) */
.sparkles-countdown-urgent .sparkles-countdown-number {
    background-color: var(--color-error);
    color: var(--white);
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

.sparkles-countdown-urgent .sparkles-countdown-unit {
    --tw-border-opacity: 1;
    border-color: rgba(239,68,68,var(--tw-border-opacity,1));
}

/* Expired state */
.sparkles-countdown-expired {
    opacity: .5;
    --tw-grayscale: grayscale(100%);
}

.sparkles-countdown-expired .sparkles-countdown-number {
    color: var(--gray-400);
}

/* Warning state (less than 24 hours) */
.sparkles-countdown-warning .sparkles-countdown-number {
    --tw-text-opacity: 1;
    color: rgba(245,158,11,var(--tw-text-opacity,1));
}

/* ========== COUNTDOWN WITH PROGRESS ========== */
.sparkles-countdown-progress {
    position: relative;
    flex-direction: column;
    gap: 1rem;
}

.sparkles-countdown-progress-bar,
.sparkles-progress-bar-thin {
    width: 100%;
    height: .25rem;
    background-color: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.sparkles-countdown-progress-fill {
    height: 100%;
    transition: all .5s ease-out;
    background-color: var(--color-primary);
}

.sparkles-countdown-progress-fill::after {
    animation: sparkles-progress-shine 2s ease-in-out infinite;
}

/* ========== RESPONSIVE COUNTDOWN ========== */
.sparkles-countdown-responsive {
    flex-wrap: wrap;
    justify-content: center;
}

@container (max-width: 768px) {
    .sparkles-countdown-responsive {
        gap: .5rem;
    }
    
    .sparkles-countdown-responsive .sparkles-countdown-number {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    
    .sparkles-countdown-responsive .sparkles-countdown-label {
        font-size: .75rem;
        line-height: 1rem;
    }
}

@container (max-width: 475px) {
    .sparkles-countdown-responsive.sparkles-countdown-luxury {
        padding: 1rem;
    }
    
    /* .sparkles-countdown-responsive .sparkles-countdown-unit - inherits base styles */
}

/* ========== ANIMATIONS - MOVED TO CENTRAL LOCATION ========== */
/* sparkles-countdown-blink keyframe moved to sparkles-animations.css */
/* sparkles-countdown-pulse keyframe moved to sparkles-animations.css */
/* sparkles-neon-glow keyframe moved to sparkles-animations.css */

/* sparkles-progress-shine keyframe moved to sparkles-utilities.css */

/* Flip animation for number changes */
.sparkles-countdown-flip {
    perspective: 1000px; /* Keep raw for perspective */ position: relative;
}

.sparkles-countdown-flip .sparkles-countdown-number {
    transform-style: preserve-3d; /* Keep raw for 3D transforms */
}

.sparkles-countdown-flip.flipping .sparkles-countdown-number {
    transform: rotateX(90deg);
}

/* ========== ACCESSIBILITY ========== */
.sparkles-countdown[aria-live="polite"] {
    /* Screen reader announcements */
}

.sparkles-countdown:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary),0 0 0 4px rgb(var(--color-primary-rgb)/.1);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sparkles-countdown-luxury,
    .sparkles-countdown-neon {
        border-width: 2px;
        border-style: solid;
    }
    
    /* .sparkles-countdown-number - inherits base high contrast styles */
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .sparkles-countdown-flip .sparkles-countdown-number {
        transition-property: none;
    }
}

/* ========== SALE BANNER INTEGRATION ========== */
.sparkles-sale-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    color: var(--white);
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;
    background: linear-gradient(to right,var(--color-primary),var(--color-primary-dark));
    container-type: inline-size;
}

.sparkles-sale-banner .sparkles-sale-info {
    flex: 1 1 0%;
}

.sparkles-sale-banner .sparkles-sale-title {
    margin-bottom: .5rem;
}

.sparkles-sale-banner .sparkles-sale-subtitle {
    opacity: .9;
    font-size: .875rem;
    line-height: 1.25rem;
}

.sparkles-sale-banner .sparkles-countdown {
    flex-shrink: 0;
}