#price-od,
#price-do,
#area-od,
#area-do {
    text-align: center; /* Centers text inside input */
    appearance: textfield; /* Hides default number styles (some browsers) */
    -moz-appearance: textfield; /* Firefox */
}

/* Remove up/down arrows for Chrome, Safari, Edge, Opera */
#price-od::-webkit-outer-spin-button,
#price-od::-webkit-inner-spin-button,
#price-do::-webkit-outer-spin-button,
#price-do::-webkit-inner-spin-button,
#area-od::-webkit-outer-spin-button,
#area-od::-webkit-inner-spin-button,
#area-do::-webkit-outer-spin-button,
#area-do::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.loading-spinner {
  z-index: 1000;
}

.loading-spinner .spinner {
  width: 70px;
  height: 70px;
  border: 7px solid rgba(0, 0, 0, 0.1);
  border-top-color: #9E895D;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
  margin-bottom: 120px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.page-button:hover {
  background-color: #71613b;
}

.page-button:focus {
  background-color: #71613b;
}

.activePageButton {
  background-color: #71613b;
}

.page-buttons {
  display: flex;
  gap: 15px;
}

.page-button {
  display: flex;
  justify-content: center;
  place-items: center;
  font-size: 16px;
  border: none;
}

.page-nav button {
  width: 55px;
  height: 55px;
}

.page-nav {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.listing-container {
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  grid-template-rows: repeat(2, auto);
  row-gap: 60px;
  padding-top: 30px;
}

.listing-container::after {
  content: "";
  display: block;
  grid-column: 1 / -1; /* Spans across all columns */
  height: 20px; /* Matches the row gap */
}

.flip-card {
  perspective: 1200px;
  width: 310px;
  height: 400px;
  margin: 0 auto;
}

.flip-card-inner {
  position: relative
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: right center;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
}

.flip-card-front {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  text-align: center;
}

.is-flipped {
  transform: translateX(-310px) rotateY(-180deg);
}

.property-image {
  width: 100%;
  height: 220px;
  background-size: cover;
}

.front-text-container {
  padding: 20px 10px;
}

.front-heading {
  font-size: 18px;
  font-weight: 300;
  min-height: 40px;
  padding-bottom: 5px;
}

.front-description {
  font-size: 16px;
  font-weight: 300;
  color: #9e895d;
}

.front-buttons {
  display: flex;
  justify-content: center;
  padding: 15px 5px;
}

.front-button-one, .front-button-two {
    padding: 12px 18px;
    font-weight: 400;
    width: 90px;
    margin: 0 15px;
    transition: all 0.15s linear;
}

.front-button-one:hover, .front-button-two:hover {
    background-color: #7e6e4a !important;
    color: white !important;
}

.front-button-one:active, .front-button-two:active {
  background-color: #7e6e4a;
}


/* BACK SIDE */

.flip-card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background-color: #14203d;
  color: white;
}


.makler-image {
  margin: 0 auto;
  height: 150px;
  background-image: url(https://www.wilsoncenter.org/sites/default/files/media/images/person/james-person-1.jpg);
  background-size: cover;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-position: center 0;
}

.makler-image-container {
  margin: 35px 7px 10px;
}

.back-text-container {
  padding: 20px 6px 10px;
  text-align: center;
}

.back-heading {
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 15px;
}

.back-phone, .back-email {
  font-weight: 300;
}

.back-description {
  font-size: 16px;
  font-weight: 300;
  font-size: 12px;
  padding: 15px 0 22px;
}

.back-buttons {
  display: flex;
  justify-content: center;
  padding: 15px 5px;
}

.back-button-one, .back-button-two {
    padding: 12px 18px;
    font-weight: 400;
    width: 90px;
    margin: 0 15px;
    transition: all 0.15s linear;
    border: 0;
}

.back-button-one:hover, .back-button-two:hover {
  background-color: #7e6e4a;
}

.back-button-one:active, .back-button-two:active {
  background-color: #7e6e4a;
}

.listings-heading {
  font-size: 18px;
  font-weight: 300;
}
  
.filter-container input {
  height: 20px;
  width: 20px;
  margin: 0 5px;
}

.filter-container label {
  font-size: 12px;
  padding-left: 7px;
}

.listing-filters-row {
  margin: 7px auto;
  display: flex;
  flex-wrap: wrap;
  padding: 12px 0!important;
}

.listing-filters-row-last {
  margin: 0 0 7px 0;
  padding: 0 0 12px 0!important;
  flex: 0 0 44%;
}

.field-inputs {
  display: flex;
  gap: 20px;
  padding: 15px 0;
}

.filter-last {
  display: flex;
}

.listing-input {
  display: flex;
  flex: 0 0 22%;
  max-width: 22%;
  align-items: center;
  padding: 3px 0;
}

.listing-input-field {
  flex: 0 0 42%;
  max-width: 42%;
  align-items: center;
  padding: 0 15px 7px 0;
}

.hidden {
  display: none;
}

.filtered {
  display: none; 
}

.filter-button-container {
  display: flex;
  justify-content: center;
}

.filter-button, .search-button {
  padding: 12px 18px;
}

.filter-button:focus, .filter-button:focus {
  background-color: #9e895d;
  border: solid 1px #9e895d;
}

.cards-amount-container {
  padding-top: 50px;
}

.reset-button:focus {
  background-color: #766135 !important;
  border: solid 2px #766135 !important;
}

.invisable {
  visibility: hidden;
}