.hero-background-image {
    background-image: url("/assets/HeroImage-76cade02.png"); /* Rails will handle asset_path for this */
}

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


/* Flash Messages - Liquid Glass Effect */

.flash-liquid-glass {
  backdrop-filter: blur(8px) brightness(1.1); /* Adjust blur and brightness as needed */
  background-color: rgba(255, 255, 255, 0.85); /* Much lighter white tint for readability */
}

/* Optional: Darker version for alert/error messages, or if you have dark mode */
.flash-liquid-glass-dark {
  backdrop-filter: blur(8px) brightness(0.9);
  background-color: rgba(0, 0, 0, 0.1);
}

/* Countdown Timer Styles */

/* Hide scrollbar for a cleaner look on mobile, but allow scrolling */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Custom styles for will_paginate to integrate better with Tailwind CSS */
/* Custom styles for will_paginate to integrate better with Tailwind CSS */
/* Custom styles for will_paginate to integrate better with Tailwind CSS */
.apple_pagination a,
.apple_pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem; /* Equivalent to w-10 */
  height: 2.5rem;   /* Equivalent to h-10 */
  padding: 0 0.75rem; /* Adjust padding as needed */
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
}

.apple_pagination a {
  color: #4A5568; /* gray-700 */
  background-color: #ffffff; /* bg-white */
  border: 1px solid #E2E8F0; /* border-gray-200 */
}

.apple_pagination a:hover {
  background-color: #F0F4F8; /* Light gray for hover */
  border-color: #CBD5E0; /* gray-300 */
  transform: translateY(-1px); /* Slight lift on hover */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* More pronounced shadow */
}

.apple_pagination .current {
  color: #ffffff; /* text-white */
  background-color: #a3a3a3; /* New salmon/red color */
  border: 1px solid #c4c4c4; /* Darker border for the new color */
  cursor: default;
  padding: 5px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Shadow for active element */
  /* Ensure border-radius is consistently applied if it ever gets overridden */
  border-radius: 0.5rem; /* Explicitly set to confirm rounded corners */
}

.apple_pagination .disabled {
  color: #A0AEC0; /* gray-400 */
  background-color: #ffffff; /* bg-white */
  border: 1px solid #E2E8F0; /* border-gray-200 */
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none; /* No shadow for disabled items */
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .apple_pagination a {
    color: #CBD5E0; /* gray-300 */
    background-color: #2D3748; /* gray-800 */
    border-color: #4A5568; /* gray-700 */
  }
  .apple_pagination a:hover {
    background-color: #4A5568; /* gray-700 */
    border-color: #616E7F; /* gray-600 */
    transform: translateY(-1px); /* Slight lift on hover */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* More pronounced shadow */
  }
  .apple_pagination .current {
    background-color: #393939; /* Darker red/salmon for dark mode current */
    border-color: #404040; /* Darker red/salmon border */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Shadow for active element */
    border-radius: 0.5rem; /* Explicitly set for dark mode as well */
  }
  .apple_pagination .disabled {
    color: #718096; /* gray-500 */
    background-color: #2D3748; /* gray-800 */
    border-color: #4A5568; /* gray-700 */
    box-shadow: none; /* No shadow for disabled items */
  }
}