/* search dialog related */
.search-container {
   display: flex;
   flex-direction: column;
   gap: var(--padding-close);
}

#search-dialog {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;

   margin: 0;
   padding-inline: 0;
   padding-block: 0;

   min-height: 66vh;

   border-radius: var(--padding-close) var(--padding-close) 0 0;

   width: 100%;

   transform: translateY(100%);
   /* Moves the dialog down by 100% of its own height */
   transition: transform 0.3s ease-in-out;
   z-index: 1;

   border: 0;
   background-color: hsl(0, 0%, 99%, 0.8);
   /* Lower alpha for more blur effect */
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   /* Add for Safari support */
}

/* Animation */
#search-dialog.show {
   transform: translateY(0);
}

#modal-backdrop {
   position: fixed;
   inset: 0;

   display: none;

   opacity: 0;
   background-color: rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(5px);

   transition: opacity 300ms ease-in-out;
}

#modal-backdrop.fade-in-backdrop {
   opacity: 1;
}

.search-field {
   position: relative;
   width: 100%;
}

.search-field::before {
   content: '';
   display: block;

   position: absolute;
   /* Absolute to position within the container */
   left: 6px;
   /* Adjust this based on how close you want the icon */
   top: 50%;
   transform: translateY(-50%);

   background-image: url('/img/icon_search.svg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;

   z-index: 2;
   width: 32px;
   height: 32px;
}

.dialog-header {
   border-radius: var(--padding-close) var(--padding-close) 0 0;
   width: 100%;
   margin-block: 0 var(--padding-close);
   padding-block: var(--padding-close) 0;
   background: var(--primary-bg);
   /* Lower alpha for more blur effect */
   border-top: 1px solid var(--clr-lightcta);
   border-bottom: 1px solid var(--clr-lightgray);

}

.search-input {
   color: var(--clr-black);
   border-radius: var(--padding-tight);
   border: 1px solid transparent;
   position: relative;

   background: var(--clr-white);
   border: 1px solid var(--clr-lightgray);

   width: 100%;

   font-family: inherit;
   font-size: inherit;

   padding: 0.7rem 0.6rem;
   padding-left: calc(var(--padding-normal) + 20px);
   /* Extra padding to account for the icon */

   isolation: isolate;
}

.search-input:focus {
   border: 1px solid var(--clr-accent);
   outline: none;
}

.search-input::placeholder {
   color: var(--clr-gray);
}

.slider-input {
   -webkit-appearance: none;
   appearance: none;

   height: 5px;
   background: var(--clr-lightgray);
   border-radius: 5px;
   outline: none;
   opacity: 0.8;
   transition: opacity 0.3s;
}

/* Change opacity on hover */
.slider-input:hover {
   opacity: 1;
}

/* Customize the thumb (the draggable part of the slider) */
.slider-input::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: var(--padding-close);
   height: var(--padding-close);
   background-color: var(--clr-accent);
   /* Custom color for the thumb */
   border-radius: 6px;
   cursor: pointer;
   transition: background-color 0.3s, transform 0.3s;
}

.slider-input::-moz-range-thumb {
   width: var(--padding-close);
   height: var(--padding-close);
   background-color: #4caf50;
   border-radius: var(--padding-close);
   cursor: pointer;
   transition: background-color 0.3s, transform 0.3s;
}

.amount-field {
   position: relative;
   isolation: isolate;
}

.amount-label {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
}

.slider-mobile-layout {
   display: none;
}

.autocomplete-box {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background: white;
   border: 1px solid #ccc;
   border-top: none;
   max-height: 200px;
   overflow-y: auto;
   z-index: 1000;
   font-size: 14px;
}

.autocomplete-box div {
   padding: 8px;
   cursor: pointer;
   border-bottom: 1px solid #eee;
}

.autocomplete-box div:hover {
   background-color: var(--clr-cta);
}

.search-selected {
   background-color: var(--clr-cta);
   color: var(--clr-white);
}

/* Validation error states */
.field-error {
   color: #c0392b;
   font-size: 0.82rem;
   margin-top: 0.3rem;
   display: none;
}
.field-error.visible {
   display: block;
}
.has-error .search-input,
.has-error .icon-input {
   border-color: #c0392b;
}
.has-error .icon-button-house {
   outline: 2px solid #c0392b;
   border-radius: var(--padding-tight, 4px);
}