/* Custom CSS for FILBA Election Platform */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  --color-primary: #000613;
  --color-secondary: #005eb2;
  --color-tertiary: #705d00;
  --color-tertiary-fixed-dim: #e9c400;
  --color-background: #f8f9fa;
  --color-surface: rgba(255, 255, 255, 0.7);
  --color-outline: rgba(255, 255, 255, 0.4);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* Glassmorphism Styles */
.glass-effect {
  background: var(--color-surface);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid var(--color-outline);
  box-shadow: 0 8px 32px 0 rgba(0, 6, 19, 0.04);
}

.glass-effect-dark {
  background: rgba(0, 6, 19, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 6, 19, 0.02);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 6, 19, 0.15);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 6, 19, 0.3);
}

/* Image overlays */
.candidate-img-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 6, 19, 0.85) 100%);
  transition: opacity 0.3s ease;
}

/* Active status pulse animation */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 0.4; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.pulse-active {
  animation: pulse-ring 2s infinite ease-in-out;
}

/* Interactive Card Hover effects */
.hover-card-trigger {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-card-trigger:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 20px 40px -15px rgba(0, 6, 19, 0.12);
  border-color: rgba(112, 93, 0, 0.4);
}

/* Micro-interaction for buttons click */
.btn-micro-active {
  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-micro-active:active {
  transform: scale(0.96);
}

/* Success Checkmark Animation */
.success-checkmark {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: var(--color-tertiary);
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke-width: 3;
  stroke: var(--color-tertiary);
  fill: none;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% { stroke-dashoffset: 0; }
}

/* Custom Overlay screens */
.overlay-blur-active {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(0, 6, 19, 0.7);
}

/* Tab styling for dashboard */
.tab-active {
  color: var(--color-tertiary);
  border-bottom: 2px solid var(--color-tertiary);
}