/* Flash Sale Module - Variables & Base Module Styles */
/* Version 3.0 - Cross-Platform Optimized */

:root {
    --flash-primary: #9bb8f5;
    --flash-secondary: #e8d5e0;
    --flash-accent: #8cb4ff;
    --flash-success: #00ff9d;
    --flash-discount: #b9ff66;
    --flash-bg: rgba(12, 15, 22, 0.95);
    --flash-bg-light: rgba(12, 15, 22, 0.85);
    --flash-text: rgba(245, 247, 252, 0.92);
    --flash-text-muted: rgba(205, 210, 225, 0.65);
    --flash-glass: rgba(255, 255, 255, 0.04);
    --flash-glass-hover: rgba(255, 255, 255, 0.06);
    --flash-border: rgba(255, 255, 255, 0.08);
    --flash-border-hover: rgba(155, 184, 245, 0.35);
    --flash-gradient-text: linear-gradient(135deg, #9bb8f5 0%, #d8deff 50%, #e8d5e0 100%);
    --flash-gradient-cta: linear-gradient(135deg, #8cb4ff, #c2a5ff);
    --flash-gradient-depth: linear-gradient(135deg, rgba(155, 184, 245, 0.18), rgba(232, 213, 224, 0.18));
    --flash-spacing-xs: clamp(0.25rem, 1vw, 0.5rem);
    --flash-spacing-sm: clamp(0.5rem, 2vw, 0.75rem);
    --flash-spacing-md: clamp(0.75rem, 3vw, 1rem);
    --flash-spacing-lg: clamp(1rem, 4vw, 1.5rem);
    --flash-card-width: clamp(240px, 75vw, 300px);
    --flash-img-size: clamp(70px, 20vw, 95px);
    --flash-touch-target: 44px;
    --flash-radius-sm: 0.5rem;
    --flash-radius-md: 0.75rem;
    --flash-radius-lg: 1rem;
    --flash-radius-full: 999px;
    --flash-transition-fast: 0.2s ease;
    --flash-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

#flash-sale-module {
    position: relative; width: 100%;
    background: rgba(12, 15, 22, 0.98);
    background: radial-gradient(circle at 10% 20%, rgba(155, 184, 245, 0.12), transparent 32%),
        radial-gradient(circle at 80% 0%, rgba(232, 213, 224, 0.12), transparent 30%), var(--flash-bg);
    border-top: 1px solid var(--flash-border);
    border-bottom: 1px solid var(--flash-border);
    padding: 1.5rem 0 1.25rem; overflow: hidden;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); z-index: 40;
    -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

@supports (-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px)) {
    #flash-sale-module { background: rgba(12, 15, 22, 0.85); }
}
@supports not ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
    #flash-sale-module { background: rgba(12, 15, 22, 0.98); }
}

#flash-sale-module::before {
    content: ''; position: absolute; inset: -40%;
    background: radial-gradient(circle at 50% 50%, rgba(155, 184, 245, 0.08), transparent 70%);
    pointer-events: none; z-index: 0;
}