/* 
  SWIFTSPOT UNIFIED AMENITY BUTTON SYSTEM
  ========================================
  
  Modern, consistent styling for amenity buttons across all contexts.
  Replaces fragmented emoji-based implementations with a unified design system.
  
  FEATURES:
  ✅ Consistent visual hierarchy
  ✅ Smooth animations and transitions  
  ✅ Full dark mode support
  ✅ Responsive design
  ✅ Accessibility optimized
  ✅ Touch-friendly interactions
  
  NOTE: This file uses Tailwind CSS utilities (ring, ring-offset, etc.)
  VS Code's CSS linter may show warnings - these are safe to ignore.
*/

/* stylelint-disable property-no-unknown */

/* ========================================
 * BASE AMENITY BUTTON STYLES
 * ======================================== */

.amenity-button {
  /* CSS Custom Properties for easy theming */
  --amenity-bg: theme('colors.gray.200');
  --amenity-text: theme('colors.gray.900');
  --amenity-border: theme('colors.gray.300');
  --amenity-hover-bg: theme('colors.gray.300');
  --amenity-hover-border: theme('colors.gray.400');
  --amenity-selected-bg: theme('colors.blue.600');
  --amenity-selected-text: theme('colors.white');
  --amenity-selected-border: theme('colors.blue.600');
  --amenity-focus-ring: theme('colors.blue.500');
  --amenity-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --amenity-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --amenity-selected-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  
  /* Base styling */
  background-color: var(--amenity-bg);
  color: var(--amenity-text);
  border: 1px solid var(--amenity-border);
  box-shadow: var(--amenity-shadow);
  
  /* Ensure consistent typography */
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  
  /* Interaction states */
  cursor: pointer;
  user-select: none;
  
  /* Smooth transitions for all properties */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Prevent button from shrinking in flex containers */
  flex-shrink: 0;
}

/* Hover state (not for touch devices) */
@media (hover: hover) {
  .amenity-button:hover:not([aria-pressed="true"]) {
    background-color: var(--amenity-hover-bg);
    border-color: var(--amenity-hover-border);
    box-shadow: var(--amenity-hover-shadow);
    transform: translateY(-1px);
  }
}

/* Active/pressed state */
.amenity-button:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

/* Selected state */
.amenity-button[aria-pressed="true"] {
  background-color: var(--amenity-selected-bg);
  color: var(--amenity-selected-text);
  border-color: var(--amenity-selected-border);
  box-shadow: var(--amenity-selected-shadow);
}

/* Focus state for accessibility */
.amenity-button:focus {
  outline: none;
  ring: 2px solid var(--amenity-focus-ring);
  ring-offset: 2px;
}

/* Disabled state */
.amenity-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--amenity-shadow) !important;
}

/* Non-clickable display-only buttons */
.amenity-button[role="presentation"],
.amenity-button:not([role="button"]):not(button) {
  cursor: default;
  user-select: text;
}

/* ========================================
 * DARK MODE SUPPORT
 * ======================================== */

.dark .amenity-button {
  --amenity-bg: theme('colors.gray.700');
  --amenity-text: theme('colors.gray.200');
  --amenity-border: theme('colors.gray.600');
  --amenity-hover-bg: theme('colors.gray.600');
  --amenity-hover-border: theme('colors.gray.500');
  --amenity-selected-bg: theme('colors.blue.600');
  --amenity-selected-text: theme('colors.white');
  --amenity-selected-border: theme('colors.blue.600');
  --amenity-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --amenity-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  --amenity-selected-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* ========================================
 * VARIANT-SPECIFIC STYLES
 * ======================================== */

/* Chip variant - for filter buttons */
.amenity-button.variant-chip {
  --amenity-bg: theme('colors.gray.300');
  --amenity-text: theme('colors.gray.900');
  --amenity-border: theme('colors.gray.400');
  --amenity-hover-bg: theme('colors.gray.400');
  --amenity-hover-border: theme('colors.gray.500');
  
  border-radius: 9999px; /* rounded-full */
  font-size: 0.75rem; /* text-xs */
  font-weight: 500;
}

.dark .amenity-button.variant-chip {
  --amenity-bg: theme('colors.gray.700');
  --amenity-text: theme('colors.gray.200');
  --amenity-border: theme('colors.gray.600');
  --amenity-hover-bg: theme('colors.gray.600');
}

/* Badge variant - for display-only */
.amenity-button.variant-badge {
  --amenity-bg: theme('colors.blue.100');
  --amenity-text: theme('colors.blue.800');
  --amenity-border: theme('colors.blue.200');
  
  border-radius: 9999px; /* rounded-full */
  cursor: default;
  pointer-events: none;
}

.dark .amenity-button.variant-badge {
  --amenity-bg: theme('colors.blue.900');
  --amenity-text: theme('colors.blue.200');
  --amenity-border: theme('colors.blue.800');
}

/* Card variant - for listspot wizard */
.amenity-button.variant-card {
  --amenity-bg: linear-gradient(135deg, theme('colors.slate.50'), rgba(59, 130, 246, 0.05));
  --amenity-border: theme('colors.gray.300');
  --amenity-hover-bg: linear-gradient(135deg, theme('colors.white'), theme('colors.blue.50'));
  --amenity-hover-border: theme('colors.blue.300');
  --amenity-selected-bg: linear-gradient(135deg, theme('colors.blue.100'), rgba(59, 130, 246, 0.2));
  --amenity-selected-border: theme('colors.blue.400');
  
  border-radius: 0.75rem; /* rounded-xl */
  border-width: 2px;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  position: relative;
  min-height: 5.5rem;
}

.dark .amenity-button.variant-card {
  --amenity-bg: linear-gradient(135deg, theme('colors.gray.800'), rgba(59, 130, 246, 0.1));
  --amenity-hover-bg: linear-gradient(135deg, theme('colors.gray.700'), rgba(59, 130, 246, 0.15));
  --amenity-selected-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
  --amenity-selected-border: theme('colors.blue.500');
}

/* Checkbox variant - for form inputs */
.amenity-button.variant-checkbox {
  border-radius: 0.5rem; /* rounded-lg */
  justify-content: flex-start;
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: normal;
  word-wrap: break-word;
  text-align: left;
}

.amenity-button.variant-checkbox[aria-pressed="true"] {
  --amenity-bg: theme('colors.blue.50');
  --amenity-text: theme('colors.blue.700');
  --amenity-border: theme('colors.blue.300');
}

.dark .amenity-button.variant-checkbox[aria-pressed="true"] {
  --amenity-bg: rgba(59, 130, 246, 0.2);
  --amenity-text: theme('colors.blue.200');
  --amenity-border: theme('colors.blue.500');
}

/* ========================================
 * SIZE VARIANTS
 * ======================================== */

.amenity-button.size-small {
  padding: 0.25rem 0.5rem; /* py-1 px-2 */
  font-size: 0.75rem; /* text-xs */
  gap: 0.25rem;
  min-height: 1.75rem;
}

.amenity-button.size-medium {
  padding: 0.375rem 0.75rem; /* py-1.5 px-3 */
  font-size: 0.875rem; /* text-sm */
  gap: 0.5rem;
  min-height: 2rem;
}

.amenity-button.size-large {
  padding: 0.75rem 1rem; /* py-3 px-4 */
  font-size: 1rem; /* text-base */
  gap: 0.75rem;
  min-height: 3.5rem;
}

/* ========================================
 * RESPONSIVE DESIGN
 * ======================================== */

/* Mobile optimizations */
@media (max-width: 640px) {
  .amenity-button {
    /* Increase touch target size */
    min-height: 2.75rem; /* 44px minimum for touch */
    padding: 0.5rem 0.75rem;
  }
  
  .amenity-button.size-small {
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
  }
  
  .amenity-button.variant-card {
    min-height: 4rem;
    padding: 0.75rem;
  }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
  .amenity-button.variant-chip {
    font-size: 0.875rem; /* slightly larger text on tablets */
    padding: 0.375rem 0.75rem;
  }
}

/* Desktop enhancements */
@media (min-width: 1025px) {
  .amenity-button:hover {
    /* More pronounced hover effects on desktop */
    transform: translateY(-2px);
  }
  
  .amenity-button.variant-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

/* ========================================
 * ANIMATION ENHANCEMENTS
 * ======================================== */

/* Smooth entrance animation */
.amenity-button {
  animation: amenityFadeIn 0.3s ease-out;
}

@keyframes amenityFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Selection animation */
.amenity-button[aria-pressed="true"] {
  animation: amenitySelect 0.2s ease-out;
}

@keyframes amenitySelect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* ========================================
 * GRID CONTAINERS
 * ======================================== */

.amenity-grid {
  gap: 0.5rem; /* Default gap */
}

.amenity-grid.variant-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.amenity-grid.variant-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.amenity-grid.variant-card {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.amenity-grid.variant-checkbox {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ========================================
 * ACCESSIBILITY ENHANCEMENTS
 * ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .amenity-button {
    border-width: 2px;
    --amenity-border: theme('colors.gray.900');
    --amenity-selected-border: theme('colors.blue.900');
  }
  
  .dark .amenity-button {
    --amenity-border: theme('colors.gray.100');
    --amenity-selected-border: theme('colors.blue.100');
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .amenity-button {
    transition: none;
    animation: none;
  }
  
  .amenity-button:hover {
    transform: none;
  }
}

/* Screen reader improvements */
.amenity-button .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
 * SPOT DETAILS PAGE - AMENITY POSITIONING
 * ======================================== */

/* Force amenity badges to the right on spot details page - DESKTOP ONLY */
@media (min-width: 1024px) {
  .bg-gray-50.dark\:bg-gray-700 .flex.flex-wrap.gap-3.lg\:ml-24,
  h4.text-md.font-medium + .flex.flex-wrap.gap-3.lg\:ml-24 {
    margin-left: 0rem !important;
    padding-left: 2rem !important;
    justify-content: flex-start !important;
  }
}

/* Mobile and tablet: Keep amenities normally positioned */
@media (max-width: 1023px) {
  .bg-gray-50.dark\:bg-gray-700 .flex.flex-wrap.gap-3,
  h4.text-md.font-medium + .flex.flex-wrap.gap-3 {
    margin-left: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
  }
}

/* ========================================
 * LOADING AND ERROR STATES
 * ======================================== */

.amenity-button.loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

.amenity-button.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.amenity-button.error {
  --amenity-bg: theme('colors.red.50');
  --amenity-text: theme('colors.red.700');
  --amenity-border: theme('colors.red.200');
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* ULTRA-AGGRESSIVE CONTRAST FIX - Override any remaining gray-800 text in dark mode */

/* NUCLEAR OPTION: Force white text on any element with gray-800 color in dark contexts */
html.dark *[style*="color: rgb(31, 41, 55)"],
body.dark *[style*="color: rgb(31, 41, 55)"],
.dark *[style*="color: rgb(31, 41, 55)"],
html.dark *[style*="color:rgb(31, 41, 55)"],
body.dark *[style*="color:rgb(31, 41, 55)"],
.dark *[style*="color:rgb(31, 41, 55)"],
html.dark *[style*="color: rgb(31,41,55)"],
body.dark *[style*="color: rgb(31,41,55)"],
.dark *[style*="color: rgb(31,41,55)"],
html.dark *[style*="color:rgb(31,41,55)"],
body.dark *[style*="color:rgb(31,41,55)"],
.dark *[style*="color:rgb(31,41,55)"] {
  color: #ffffff !important;
}

/* Cover computed styles that might result in gray-800 */