@tailwind base;@layer base {
  html {
    @apply scroll-smooth;
  }
}
@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 */
  }
}

@keyframes heartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.animate-heart-pulse {
  animation: heartPulse 0.3s ease-in-out;
}

/* --- View Modes: CSS Logic --- */

/* GRID VIEW: Square & Filled */
.view-grid .photo-wrapper {
  aspect-ratio: 1 / 1;
}
.view-grid .feed-header,
.view-grid .feed-footer {
  display: none;
}
/* Force image to fill the square absolute container */
.view-grid .image-container {
  width: 100%;
  height: 100%;
}
.view-grid .photo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}


/* FEED VIEW: Natural Height */
.view-feed .photo-wrapper {
  aspect-ratio: auto;
  border-radius: 0.75rem; /* rounded-xl */
  border-color: rgb(19, 78, 74); /* teal-900 */
}
.view-feed .feed-header {
  display: flex;
}
.view-feed .feed-footer {
  display: flex;
}
/* Image flows naturally */
.view-feed .photo-image {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensures it fills width without distortion */
  object-position: center; /* Focuses on the center of the image */
}
/* Cap max height for very tall portraits in feed */
.view-feed .image-container {
  max-height: 650px; 
  width: 100%;
  
  /* THE FIX: Hides any part of the image that goes beyond 650px */
  overflow: hidden; 
  
  /* Optional: Centers the image vertically if we change sizing logic later */
  display: flex;
  align-items: center; 
  justify-content: center;
  background-color: #134e4a; /* teal-900 (fallback color) */
}

/* --- Custom Utilities & Animations --- */
@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Custom Animation Utilities */
  .animate-blob {
    animation: blob 7s infinite;
  }
  
  .animate-spin-slow {
    animation: spin 8s linear infinite;
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }
}

/* Keyframes must be defined at the root level */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}