.alphabet-nav {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.alphabet-nav .nav-link {
  min-width: 40px;
  text-align: center;
}

.back-to-top.show {
  opacity: 1;
}

.heading-anchor {
  padding-top: 80px;
  margin-top: -70px;
}

/* Hide the boat search container initially (will be shown with JS) */
.boat-search-container {
  display: none;
}

/* Custom styling for the free shipping banner */
#freeShippingBanner {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border-radius: 8px;
}

#freeShippingBanner:hover {
  transform: scale(1.02);
  box-shadow: 0 5px 15px rgba(0, 119, 182, 0.2);
}

/* Enhance select dropdown */
.form-select {
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select:focus {
  border-color: #0077b6;
  box-shadow: 0 0 0 0.25rem rgba(0, 119, 182, 0.25);
}

/* Custom styling for optgroup labels */
optgroup {
  font-weight: 600;
  color: #0077b6;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  form button[type="submit"] {
    margin-top: 1rem;
  }
}

/* Simple animation for alerts */
.alert {
  animation: fadeIn 0.5s;
}

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

/* Card hover effects */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Badge styling */
.badge {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.badge:hover {
  background-color: #00607d !important;
}