/* Flash Sale — Content, Header, Meta & Timer */

.flash-content {
    position: relative; max-width: 1180px; margin: 0 auto;
    padding: 0 max(1.25rem, var(--safe-area-inset-left));
    padding-right: max(1.25rem, var(--safe-area-inset-right));
    display: grid; gap: 1rem; z-index: 1;
}

.flash-header { text-align: center; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .flash-header { text-align: left; margin-bottom: 0.25rem; } }

.flash-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: clamp(1.25rem, 4vw, 1.5rem); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    background: linear-gradient(135deg, #9bb8f5 0%, #d8deff 50%, #e8d5e0 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; color: transparent;
    animation: gradient-shift 8s ease infinite;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

@supports not (-webkit-background-clip: text) {
    .flash-title { background: none; color: var(--flash-primary); }
}

@keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .flash-title { animation: none; } }

.flash-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between; }

.flash-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.9rem; border-radius: 999px;
    background: var(--flash-depth); color: #e8edff;
    font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(155, 184, 245, 0.15); position: relative;
}

.flash-pill::before {
    content: ''; width: 8px; height: 8px; background: #00ff9d;
    border-radius: 50%; box-shadow: 0 0 8px #00ff9d; animation: pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } }
@media (prefers-reduced-motion: reduce) { .flash-pill::before { animation: none; } }

.flash-timer {
    display: flex; gap: 0.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500; color: var(--flash-primary);
    background: rgba(255, 255, 255, 0.04); padding: 0.5rem 0.75rem;
    border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    min-width: fit-content; flex-shrink: 0;
}

.timer-segment { display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 36px; }
.timer-segment span:first-child { font-size: clamp(1.1rem, 3.5vw, 1.5rem); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"1; min-width: 2ch; text-align: center; }
.timer-label { font-size: 0.55rem; color: rgba(205, 210, 225, 0.65); text-transform: uppercase; margin-top: 2px; letter-spacing: 0.08em; }
.timer-dot { color: rgba(255, 255, 255, 0.5); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; padding-bottom: 10px; animation: blink-dots 1s ease-in-out infinite; }

@keyframes blink-dots { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .timer-dot { animation: none; } }