/* ----------- City Search CSS Start ----------- */

.city-search-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto 56px;
  padding: 0 20px;
  max-width: 550px;
  width: 100%;
}

.city-search-input {
  background-image: url('../img/search-input.webp') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
  font-family: Playfair Display, serif;
  font-weight: 700;
  outline: 0 !important;
  color: #b57a3d !important;
  padding: 17px 40px !important;
  padding: 0 20px !important;
  height: 60px;
  border-radius: 0 !important;
  font-size: 18px;
  width: 100%;
}
input#city-search::placeholder {
    color: #b57a3d;
}
.city-search-input:focus {
  border-color: #ff6b35;
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.3);
}

.city-search-input::placeholder {
  color: #999;
}

/* Smooth fade animation for search results */
.location-row {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.location-row.fade-out {
  opacity: 0;
  pointer-events: none;
}

.no-cities-message {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.no-cities-message.fade-out {
  opacity: 0;
  pointer-events: none;
}

.no-cities-message.fade-in {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .city-search-wrapper {
    margin: 20px 0;
  }

  .city-search-input {
    max-width: 100%;
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* Pagination styling */


@media (max-width: 768px) {
  .city-search-input {
    max-width: 100%;
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ----------- City Search CSS End ----------- */