/* CountDown Pro — Custom Styles */

.countdown-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.countdown-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.15);
}

.time-unit {
  min-width: 64px;
  text-align: center;
}

.time-value {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #4338ca, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .time-value {
  background: linear-gradient(135deg, #818cf8, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.time-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .time-label {
  color: #94a3b8;
}

.icon-btn.selected {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}

.event-done {
  opacity: 0.6;
  position: relative;
}
.event-done::after {
  content: '🎉 انتهى!';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 900;
  color: #22c55e;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.2); }
}
.countdown-card.soon {
  animation: pulse-glow 2s ease-in-out infinite;
}