/*
  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: Tailwind theme() appears in custom properties below (build-time).
  Focus uses standard outline (not invalid ring/ring-offset property names).
*/

/* 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; select-cards handle their own static hover) */
@media (hover: hover) {
  .amenity-button:hover:not([aria-pressed="true"]):not(.amenity-button--select-card) {
    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:not(.amenity-button--select-card) {
  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 (keyboard / focus-visible) */
.amenity-button:focus {
  outline: none;
}

.amenity-button:focus-visible {
  outline: 2px solid var(--amenity-focus-ring);
  outline-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:not(.amenity-button--select-card) {
    /* More pronounced hover effects on desktop */
    transform: translateY(-2px);
  }

  .amenity-button.variant-card:hover:not(.amenity-button--select-card) {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

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

/* Smooth entrance animation (legacy tiles only — select-cards skip this) */
.amenity-button:not(.amenity-button--select-card) {
  animation: amenityFadeIn 0.3s ease-out;
}

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

/* Selection animation (legacy tiles only — select-cards paint selected immediately) */
.amenity-button[aria-pressed="true"]:not(.amenity-button--select-card) {
  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;
}

.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); }
}

/* Dark overlay/text contrast: themes/dark-mode.css */

/* ========================================
 * LISTSPOT STEP 1 — AMENITY TILES (wrap long labels)
 * Base .amenity-button uses white-space: nowrap; tiles need multi-line text.
 * ======================================== */

.amenities-container .amenity-button,
#amenities-grid .amenity-button {
  white-space: normal;
  min-width: 0;
  flex-shrink: 1;
}

.amenities-container .amenity-button > span,
#amenities-grid .amenity-button > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* List Spot / Edit spot parity: max 5 selections — dim tiles that cannot be toggled on */
.amenity-option.amenity-option-at-cap .amenity-button {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (hover: hover) {
  .amenity-option.amenity-option-at-cap .amenity-button:hover {
    transform: none;
    box-shadow: var(--amenity-shadow);
  }
}

/* ========================================
 * SELECT-CARD — List Spot + Edit Spot shared amenity tiles
 * Polished selectable cards: border, surface, icon, label, checkmark.
 * ======================================== */

.amenity-select-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .amenity-select-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }
}

@media (min-width: 1536px) {
  .amenity-select-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

/* Small option sets (Privacy & security, Inside the space) — chip row, not large tiles */
.amenity-select-grid--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.375rem;
}

.amenity-select-grid--compact label.amenity-select-card,
.amenity-select-grid--compact .amenity-button--select-card {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 0.3125rem 0.625rem;
  gap: 0.375rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
}

.amenity-select-grid--compact .amenity-button__label {
  overflow-wrap: anywhere;
}

.amenity-select-grid--compact .amenity-button__icon {
  width: 0.875rem;
  height: 0.875rem;
}

.amenity-select-grid--compact .amenity-button__icon-svg {
  width: 0.875rem;
  height: 0.875rem;
}

.amenity-select-grid--compact .amenity-button__check {
  display: none;
}

.amenity-select-grid--compact label.amenity-select-card.selected,
.amenity-select-grid--compact .amenity-button--select-card[aria-pressed="true"],
.amenity-select-grid--compact .amenity-button--select-card.amenity-button--selected {
  box-shadow: none;
}

.es-amenity-section-notes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.625rem;
}

.es-amenity-section-notes > p,
.es-amenity-section-notes > .es-field-note {
  margin-bottom: 0;
}

.amenity-button--select-card,
label.amenity-select-card {
  --amenity-card-bg: #ffffff;
  --amenity-card-border: #e5e7eb;
  --amenity-card-text: #111827;
  --amenity-card-icon: #4b5563;
  --amenity-card-hover-bg: #f9fafb;
  --amenity-card-hover-border: #d1d5db;
  --amenity-card-selected-bg: #eff6ff;
  --amenity-card-selected-border: #3b82f6;
  --amenity-card-selected-text: #1e40af;
  --amenity-card-selected-icon: #2563eb;
  --amenity-card-check-bg: #3b82f6;
  --amenity-card-check-icon: #ffffff;
  --amenity-card-focus-ring: #3b82f6;

  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  margin: 0;
  border: 1px solid var(--amenity-card-border);
  border-radius: 0.625rem;
  background: var(--amenity-card-bg);
  color: var(--amenity-card-text);
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
  transform: none;
  position: relative;
  overflow: visible;
}

/*
 * Select-card tiles: never transform the wrapper or button on hover.
 * translateY/scale on hover causes edge flicker when the hit box moves under the cursor.
 */
#listspot-wizard-form .amenity-option:has(.amenity-button--select-card),
#listspot-wizard-form .amenity-option:has(.amenity-button--select-card):hover,
#listspot-wizard-form .amenity-option:has(.amenity-button--select-card):active,
#listspot-wizard-form .amenity-option:has(.amenity-button--select-card):focus,
#listspot-wizard-form .amenity-option.amenity-selected:has(.amenity-button--select-card),
#listspot-wizard-form .amenity-option.amenity-selected:has(.amenity-button--select-card):hover,
.amenity-option:has(.amenity-button--select-card),
.amenity-option:has(.amenity-button--select-card):hover,
.amenity-option:has(.amenity-button--select-card):active,
.amenity-option.amenity-selected:has(.amenity-button--select-card),
.amenity-option.amenity-selected:has(.amenity-button--select-card):hover {
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease !important;
}

#listspot-wizard-form .wizard-step .amenity-option .amenity-button--select-card,
.amenities-container .amenity-option .amenity-button--select-card,
.amenity-option .amenity-button--select-card {
  transform: none !important;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease !important;
}

#listspot-wizard-form .wizard-step .amenity-option .amenity-button--select-card:hover,
.amenities-container .amenity-option .amenity-button--select-card:hover,
.amenity-option .amenity-button--select-card:hover,
#listspot-wizard-form .wizard-step .amenity-option .amenity-button--select-card:active,
.amenity-option .amenity-button--select-card:active,
#listspot-wizard-form .wizard-step .amenity-option.amenity-selected .amenity-button--select-card,
.amenity-option.amenity-selected .amenity-button--select-card {
  transform: none !important;
}

/*
 * Amenity chip hover tips use a body-level floating tip (AmenitySelectCard JS).
 * CSS ::after tips are disabled — parent cards clip overflow and never showed reliably.
 */
.amenity-button--select-card[data-tooltip]::after,
.amenity-button--select-card[data-tooltip]::before,
label.amenity-select-card[data-tooltip]::after,
label.amenity-select-card[data-tooltip]::before {
  content: none !important;
  display: none !important;
}

.listspot-amenity-hover-tip {
  position: fixed;
  z-index: 2147483000;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.28);
  transition: opacity 60ms ease-out;
}

.listspot-amenity-hover-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0ms linear;
}

.dark .listspot-amenity-hover-tip {
  background: #0f172a;
  color: #e2e8f0;
}

@media (hover: none) and (pointer: coarse) {
  .listspot-amenity-hover-tip {
    display: none !important;
  }
}

.dark .amenity-button--select-card,
.dark label.amenity-select-card {
  --amenity-card-bg: #1f2937;
  --amenity-card-border: #4b5563;
  --amenity-card-text: #f3f4f6;
  --amenity-card-icon: #d1d5db;
  --amenity-card-hover-bg: #374151;
  --amenity-card-hover-border: #6b7280;
  --amenity-card-selected-bg: rgba(59, 130, 246, 0.18);
  --amenity-card-selected-border: #60a5fa;
  --amenity-card-selected-text: #dbeafe;
  --amenity-card-selected-icon: #93c5fd;
  --amenity-card-check-bg: #3b82f6;
  --amenity-card-check-icon: #ffffff;
}

.amenity-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--amenity-card-icon);
}

.amenity-button__icon-svg {
  width: 1.125rem;
  height: 1.125rem;
}

.amenity-button__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.amenity-button__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--amenity-card-check-bg);
  color: var(--amenity-card-check-icon);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.amenity-button__check-icon {
  width: 0.75rem;
  height: 0.75rem;
}

@media (hover: hover) {
  .amenity-button--select-card:hover:not([aria-pressed="true"]):not(.amenity-button--selected):not(:disabled),
  label.amenity-select-card:hover:not(.selected) {
    background: var(--amenity-card-hover-bg);
    border-color: var(--amenity-card-hover-border);
    transform: none !important;
    box-shadow: none;
  }
}

.amenity-button--select-card:focus-visible,
label.amenity-select-card:focus-within {
  outline: 2px solid var(--amenity-card-focus-ring);
  outline-offset: 2px;
}

.amenity-button--select-card[aria-pressed="true"],
.amenity-button--select-card.amenity-button--selected,
label.amenity-select-card.selected {
  background: var(--amenity-card-selected-bg);
  border-color: var(--amenity-card-selected-border);
  color: var(--amenity-card-selected-text);
  box-shadow: 0 0 0 1px var(--amenity-card-selected-border);
}

.amenity-button--select-card[aria-pressed="true"] .amenity-button__icon,
.amenity-button--select-card.amenity-button--selected .amenity-button__icon,
label.amenity-select-card.selected .amenity-button__icon {
  color: var(--amenity-card-selected-icon);
}

.amenity-button--select-card[aria-pressed="true"] .amenity-button__check,
.amenity-button--select-card.amenity-button--selected .amenity-button__check,
label.amenity-select-card.selected .amenity-button__check {
  opacity: 1;
}

/* List Spot wrapper: card styling is on the button, not the outer option cell */
#listspot-wizard-form .amenity-option:has(.amenity-button--select-card),
.amenity-option:has(.amenity-button--select-card) {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: inherit !important;
}

#listspot-wizard-form .amenity-option.amenity-selected:has(.amenity-button--select-card),
.amenity-option.amenity-selected:has(.amenity-button--select-card) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  color: inherit !important;
}

/* Override legacy interactive-elements amenity button rules for select-card (unselected only) */
#listspot-wizard-form .wizard-step .amenity-option:not(.amenity-selected) .amenity-button--select-card,
.amenities-container .amenity-option:not(.amenity-selected) .amenity-button--select-card,
.amenity-option:not(.amenity-selected) .amenity-button--select-card,
.dark #listspot-wizard-form .wizard-step .amenity-option:not(.amenity-selected) .amenity-button--select-card,
.dark .amenities-container .amenity-option:not(.amenity-selected) .amenity-button--select-card,
.dark .amenity-option:not(.amenity-selected) .amenity-button--select-card {
  background: var(--amenity-card-bg) !important;
  border: 1px solid var(--amenity-card-border) !important;
  border-width: 1px !important;
  color: var(--amenity-card-text) !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 500 !important;
  animation: none !important;
}

/* Select-cards: no entrance/select pulse — those fight hover and delay selected paint */
.amenity-button--select-card,
.amenity-button--select-card[aria-pressed="true"],
.amenity-button--select-card.amenity-button--selected {
  animation: none !important;
}

#listspot-wizard-form .wizard-step .amenity-option.amenity-selected .amenity-button--select-card,
.amenities-container .amenity-option.amenity-selected .amenity-button--select-card,
.amenity-option.amenity-selected .amenity-button--select-card,
.amenity-button--select-card[aria-pressed="true"],
.amenity-button--select-card.amenity-button--selected,
#listspot-wizard-form .wizard-step .amenity-option.amenity-selected .amenity-button--select-card:hover,
.amenities-container .amenity-option.amenity-selected .amenity-button--select-card:hover,
.amenity-option.amenity-selected .amenity-button--select-card:hover,
.amenity-button--select-card[aria-pressed="true"]:hover,
.amenity-button--select-card.amenity-button--selected:hover,
.dark #listspot-wizard-form .wizard-step .amenity-option.amenity-selected .amenity-button--select-card,
.dark .amenities-container .amenity-option.amenity-selected .amenity-button--select-card,
.dark .amenity-option.amenity-selected .amenity-button--select-card,
.dark #listspot-wizard-form .wizard-step .amenity-option.amenity-selected .amenity-button--select-card:hover,
.dark .amenity-option.amenity-selected .amenity-button--select-card:hover {
  background: var(--amenity-card-selected-bg) !important;
  border: 1px solid var(--amenity-card-selected-border) !important;
  border-color: var(--amenity-card-selected-border) !important;
  color: var(--amenity-card-selected-text) !important;
  box-shadow: 0 0 0 1px var(--amenity-card-selected-border) !important;
  transform: none !important;
  font-weight: 500 !important;
  animation: none !important;
}

#listspot-wizard-form .wizard-step .amenity-option.amenity-selected .amenity-button--select-card[aria-pressed="true"],
.amenity-option.amenity-selected .amenity-button--select-card[aria-pressed="true"],
.amenity-button--select-card[aria-pressed="true"],
.amenity-button--select-card.amenity-button--selected,
.dark #listspot-wizard-form .wizard-step .amenity-option.amenity-selected .amenity-button--select-card,
.dark .amenity-option.amenity-selected .amenity-button--select-card {
  background: var(--amenity-card-selected-bg) !important;
  border-color: var(--amenity-card-selected-border) !important;
  color: var(--amenity-card-selected-text) !important;
  box-shadow: 0 0 0 1px var(--amenity-card-selected-border) !important;
}

#listspot-wizard-form .wizard-step .amenity-option.amenity-selected .amenity-button--select-card svg,
.amenity-option.amenity-selected .amenity-button--select-card svg,
.dark #listspot-wizard-form .wizard-step .amenity-option.amenity-selected .amenity-button--select-card svg,
.dark .amenity-option.amenity-selected .amenity-button--select-card svg {
  stroke: currentColor !important;
  color: inherit !important;
}

#listspot-wizard-form .amenity-option {
  padding: 0 !important;
  overflow: visible;
}

@media (max-width: 767px) {
  #listspot-wizard-form #amenities-grid,
  #listspot-wizard-form #list-spot-privacy-security-grid,
  #listspot-wizard-form #list-spot-storage-interior-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #listspot-wizard-form #list-spot-privacy-security-grid.amenity-select-grid--compact,
  #listspot-wizard-form #list-spot-storage-interior-grid.amenity-select-grid--compact {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
  }

  #listspot-wizard-form .amenity-option {
    min-height: 0 !important;
    width: 100% !important;
  }

  #listspot-wizard-form .amenity-select-grid--compact .amenity-option {
    width: auto !important;
    max-width: 100% !important;
  }

  .amenity-button--select-card,
  label.amenity-select-card {
    min-height: 2.875rem !important;
  }

  .amenity-select-grid--compact .amenity-button--select-card,
  .amenity-select-grid--compact label.amenity-select-card {
    min-height: 0 !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  #listspot-wizard-form .amenity-option:hover {
    transform: none !important;
  }
}

/*
 * Hard stop: select-card chips never lift, scale, or pulse.
 * Remaining hover is border/background only (see rules above).
 */
#listspot-wizard-form .amenity-button--select-card,
#listspot-wizard-form .amenity-button--select-card:hover,
#listspot-wizard-form .amenity-button--select-card:active,
#listspot-wizard-form .amenity-button--select-card:focus,
#listspot-wizard-form .amenity-button--select-card[aria-pressed="true"],
#listspot-wizard-form .amenity-button--select-card.amenity-button--selected,
#listspot-wizard-form .amenity-button--select-card[aria-pressed="true"]:hover,
#listspot-wizard-form .amenity-button--select-card.amenity-button--selected:hover,
#listspot-wizard-form .amenity-option:has(.amenity-button--select-card),
#listspot-wizard-form .amenity-option:has(.amenity-button--select-card):hover,
#listspot-wizard-form .amenity-option.amenity-selected:has(.amenity-button--select-card),
#listspot-wizard-form .amenity-option.amenity-selected:has(.amenity-button--select-card):hover {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
}

#listspot-wizard-form .amenity-button--select-card {
  transition-property: border-color, background-color, box-shadow, color !important;
  transition-duration: 0.12s !important;
  transition-timing-function: ease !important;
}