@tailwind base;
@tailwind components;
@tailwind utilities;

@import "components/map_popup";

@layer components {
  .calendar-card {
    @apply w-12 h-16 bg-white dark:bg-white rounded-lg overflow-hidden border border-gray-300 dark:border-gray-300 flex flex-col shadow-md relative;
  }

  .calendar-month {
    @apply w-full text-center py-0.5 text-white text-xs font-bold absolute top-0 left-0 right-0;
    background-color: #cb0808;
  }

  .calendar-day {
    @apply text-center text-base font-bold text-gray-800 py-0.5 mt-4;
  }

  .calendar-weekday {
    @apply text-center text-xs text-gray-600;
  }

  /* Mapbox popup styling */
  .custom-popup .mapboxgl-popup-close-button {
    @apply text-xs text-gray-600 p-1 bg-transparent rounded-none m-0.5 right-0.5 top-0.5 leading-none border-none;
  }
  
  .custom-popup .mapboxgl-popup-close-button:hover {
    @apply bg-gray-100 text-gray-800;
  }
  
  .custom-popup .mapboxgl-popup-content {
    @apply p-0 rounded-2xl shadow;
  }

  .custom-popup .mapboxgl-popup-tip {
    @apply border-t-white;
  }

  /* Animated subscribe button for non-logged in users */
  .subscribe-button-glow {
    @apply relative overflow-hidden;
  }

  /* Different animation patterns for each button */
  .subscribe-button-0 {
    animation: glow 2.5s ease-in-out infinite alternate, shake 3.5s infinite;
    animation-delay: 0s;
  }

  .subscribe-button-1 {
    animation: glow 3.2s ease-in-out infinite alternate, shake-1 4.1s infinite;
    animation-delay: 0.7s;
  }

  .subscribe-button-2 {
    animation: glow 2.8s ease-in-out infinite alternate, shake-2 3.8s infinite;
    animation-delay: 1.4s;
  }

  .subscribe-button-3 {
    animation: glow 3.5s ease-in-out infinite alternate, shake-3 4.3s infinite;
    animation-delay: 0.3s;
  }

  .subscribe-button-4 {
    animation: glow 2.9s ease-in-out infinite alternate, shake-4 3.7s infinite;
    animation-delay: 1.1s;
  }

  .subscribe-button-glow::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-green-400 via-green-500 to-green-600 opacity-0 transition-opacity duration-300;
    animation: shimmer 3s ease-in-out infinite;
  }

  .subscribe-button-glow:hover::before {
    @apply opacity-20;
  }

  @keyframes glow {
    from {
      box-shadow: 0 0 5px #10b981, 0 0 10px #10b981, 0 0 15px #10b981;
    }
    to {
      box-shadow: 0 0 10px #10b981, 0 0 20px #10b981, 0 0 30px #10b981;
    }
  }

  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes shake {
    0%, 100% {
      transform: translateX(0) translateY(0);
    }
    10% {
      transform: translateX(-1px) translateY(-1px);
    }
    20% {
      transform: translateX(1px) translateY(1px);
    }
    30% {
      transform: translateX(-1px) translateY(0);
    }
    40% {
      transform: translateX(1px) translateY(-1px);
    }
    50% {
      transform: translateX(-1px) translateY(1px);
    }
    60% {
      transform: translateX(1px) translateY(0);
    }
    70% {
      transform: translateX(-1px) translateY(-1px);
    }
    80% {
      transform: translateX(1px) translateY(1px);
    }
    90% {
      transform: translateX(-1px) translateY(0);
    }
  }

  @keyframes shake-1 {
    0%, 100% {
      transform: translateX(0) translateY(0) rotate(0deg);
    }
    25% {
      transform: translateX(2px) translateY(-1px) rotate(0.3deg);
    }
    50% {
      transform: translateX(-1px) translateY(2px) rotate(-0.2deg);
    }
    75% {
      transform: translateX(1px) translateY(-2px) rotate(0.1deg);
    }
  }

  @keyframes shake-2 {
    0%, 100% {
      transform: translateX(0) translateY(0) scale(1);
    }
    33% {
      transform: translateX(-2px) translateY(1px) scale(1.02);
    }
    66% {
      transform: translateX(2px) translateY(-1px) scale(0.98);
    }
  }

  @keyframes shake-3 {
    0%, 100% {
      transform: translateX(0) translateY(0);
    }
    20% {
      transform: translateX(1px) translateY(-2px);
    }
    40% {
      transform: translateX(-2px) translateY(1px);
    }
    60% {
      transform: translateX(2px) translateY(-1px);
    }
    80% {
      transform: translateX(-1px) translateY(2px);
    }
  }

  @keyframes shake-4 {
    0%, 100% {
      transform: translateX(0) translateY(0) rotate(0deg);
    }
    50% {
      transform: translateX(1px) translateY(-1px) rotate(0.5deg);
    }
  }

  @keyframes random-shake {
    0%, 100% {
      transform: translateX(0) translateY(0) rotate(0deg);
    }
    25% {
      transform: translateX(2px) translateY(-1px) rotate(0.5deg);
    }
    50% {
      transform: translateX(-1px) translateY(2px) rotate(-0.5deg);
    }
    75% {
      transform: translateX(1px) translateY(-2px) rotate(0.3deg);
    }
  }

  /* Mapbox tooltip styling */
  .mapboxgl-popup-content {
    @apply text-black bg-white rounded-2xl;
  }
  
  .dark .mapboxgl-popup-content {
    @apply text-black bg-white rounded-2xl;
  }
}