/* public/stylesheets/campgrounds-index.css */

/* Page fade-in */
.fade-in {
  animation: fadeIn 200ms ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0.01;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* General spacing */
#nearbyHeading {
  letter-spacing: -0.2px;
}

/* Cards */
.card {
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.card.shadow-sm {
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
}
.card .card-body {
  padding: 1rem;
}
@media (min-width: 768px) {
  .card .card-body {
    padding: 1.25rem;
  }
}

/* Filters */
#nearbyForm .form-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
#nearbyForm .form-text {
  font-size: 0.8125rem;
}

/* Buttons */
.btn-outline-secondary {
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #f8f9fa;
}
.btn-outline-primary {
  --bs-btn-hover-bg: rgba(13, 110, 253, 0.08);
}

/* View toggle group */
#viewToggleLabel {
  margin-right: 0.5rem;
}
.btn-group .btn {
  min-width: 92px;
}

/* Grid */
#gridContainer .card-img-top {
  aspect-ratio: 3 / 2; /* Stabilize layout */
  object-fit: cover;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
#gridContainer .card-title a {
  color: inherit;
}
#gridContainer .card-title a:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

/* Info line and badges */
.badge.bg-info-subtle.text-info.border {
  background-color: #e7f4ff !important;
  color: #0b84d8 !important;
  border-color: #b8e1ff !important;
  font-weight: 600;
}

/* Favorite buttons inside cards */
.toggle-fav-btn i {
  margin-right: 0.375rem;
}

/* Map section */
#mapContainer .card-body {
  padding: 0.5rem;
}
#nearbyStaticMap {
  background: #f1f3f5;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition:
    filter 120ms ease-in-out,
    background-color 120ms ease-in-out;
}
#nearbyStaticMap.is-loading {
  background-image: linear-gradient(
    90deg,
    #f1f3f5 25%,
    #e9ecef 37%,
    #f1f3f5 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  filter: saturate(0.85);
}
#nearbyStaticMap.is-error {
  background: #fff0f0;
  border-color: #f8d7da;
}
@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Responsive tweaks */
@media (max-width: 575.98px) {
  .d-flex.align-items-center.justify-content-between.mb-3 {
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .d-flex.align-items-center.justify-content-between.mb-3 > .d-flex.gap-2 {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Filters: tighter, aligned, readable */
.filter-form .form-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.filter-form .input-group-text {
  min-width: 2.25rem;
  justify-content: center;
}
.filter-form .form-text {
  margin-top: 0.25rem;
}

/* Make number inputs look consistent across platforms */
.filter-form input[type='number']::-webkit-outer-spin-button,
.filter-form input[type='number']::-webkit-inner-spin-button {
  margin: 0;
}
.filter-form input[type='number'] {
  -moz-appearance: textfield;
}

/* Align actions nicely on md+ screens (already handled with grid order) */
@media (min-width: 768px) {
  .filter-form .btn {
    white-space: nowrap;
  }
}