/* Festival Countdown — Styles */
.festival-selector { max-width: 400px; margin: 0 auto; }

.countdown-display {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-12);
  background: var(--gradient-card);
  position: relative;
  overflow: hidden;
}

.countdown-display::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, var(--color-primary-glow) 0%, transparent 50%);
  opacity: 0.3;
  pointer-events: none;
}

.festival-name {
  font-size: var(--text-3xl);
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-2);
  position: relative;
}

.festival-date {
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
  position: relative;
}

.timer-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: relative;
}

.timer-unit { text-align: center; }

.timer-value {
  font-size: var(--text-5xl);
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  min-width: 90px;
  transition: all var(--transition-fast);
}

.timer-value.flip {
  animation: flipDigit 0.3s ease;
}

@keyframes flipDigit {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

.timer-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.timer-sep {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-primary);
  padding-bottom: 24px;
}

.festivals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
  max-width: 900px;
  margin: var(--space-8) auto 0;
}

.festival-card {
  padding: var(--space-6);
  cursor: pointer;
  transition: all var(--transition-base);
}

.festival-card:hover { transform: translateY(-4px); }

.festival-card .emoji { font-size: 2.5rem; margin-bottom: var(--space-3); }
.festival-card .name { font-weight: 600; font-size: var(--text-lg); margin-bottom: var(--space-1); }
.festival-card .date { color: var(--color-text-secondary); font-size: var(--text-sm); }
.festival-card .days-left { color: var(--color-accent); font-weight: 700; font-size: var(--text-sm); margin-top: var(--space-2); }

@media (max-width: 768px) {
  .timer-value { font-size: var(--text-3xl); padding: var(--space-3) var(--space-4); min-width: 65px; }
  .timer-sep { font-size: var(--text-2xl); }
  .festival-name { font-size: var(--text-2xl); }
}