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

@layer utilities {
  /* Custom animation for fading out */
  @keyframes fadeOut {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(100%);
    }
  }

  .animate-fadeOutAction {
    animation: fadeOut 0.5s ease-out forwards;
  }

  /* Hide scrollbar but maintain scrolling functionality */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }
}

/* Calendar Styles */
.date-group-header {
  position: relative;
}

.date-group-header::after {
  content: "";
  position: absolute;
  left: 240px;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
}

.platform-tag {
  font-size: 10px;
  padding: 2px 6px;
}

.calendar-day {
  transition: all 0.2s ease;
}

.movie-card {
  transition: all 0.3s ease;
}

.movie-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.platform-tab.active {
  background-color: rgba(79, 70, 229, 0.2);
  color: #fff;
  border-bottom: 2px solid #4f46e5;
}

.month-tab.active {
  background-color: #4f46e5;
  color: #fff;
}

/* Cookie Consent Banner Visibility */
#cookie-consent-banner {
  display: none;
}

html.show-cookie-consent #cookie-consent-banner {
  display: block; /* Or flex, grid, etc., depending on the banner's layout */
}

/* Prevent body scroll when modal is open */
body.overflow-hidden {
  overflow: hidden;
}