.filter-container {
    width: 20rem;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
    justify-content: flex-start;
    gap: 2rem;
}
.filters {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid #E7E6E6;  
}
.filters .top {
    height: 20%;
    background-color: #05A351;
    border-radius: 12px 12px 0px 0px;
}

.secondary-search {
    width: 100%;
    height: 3.5rem;
    position: relative;
}

.secondary-search input {
    width: 100%;
    height: 100%;
    margin-bottom: 2rem;
    border-radius: 200px;
    border: 1px #CDCDCD;
    background: #FFF;
    color: #757575;

    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;

}

.secondary-search-button {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #05A351;
    z-index: 999;
    position: absolute;
    right: -3%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: none;
    cursor: pointer;
}
.secondary-search-button i {
    width: 1rem;
    color: #FFF;
}

.secondary-search .loc {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(-50%,-50%);
    color: #757575;
    width: 1rem;
}

.secondary-search form {
    width: 100%;
    height: 100%;
}

.range-input form {
    width: 100%;
    height: 100%;
}

.filters .bottom {
    height: auto;
    width: 100%;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


.your-trip {
    width: 100%;
}

.you-type-filter-body , .price-slider-header ,.rating-slider-header{
    color: #05073C;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 27px; /* 150% */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 2.5rem;
    padding: 1rem;
}

.you-type-filter-content{
    width: 100%;
    height :auto;
}


.you-type-filter-content form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#filterToggle , #priceFilterToggle{
    cursor: pointer;
}

.style-img {
    width: 30px;
}

#categoryFilterForm label {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding-left: 1rem;
    align-items: center;
    gap: 1rem;
    font-family: Poppins;
    color: #9A9A9A;
    font-size: 18px;
}

#categoryFilterForm input {
    border-radius: 4px;
    border: none;
    border: 1px #9A9A9A;
    margin-left: 0.5rem;
}




.price-filter-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 100%;
    padding: 10px 25px;
}

.price-input {
    width: 100%;
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

.price-input .field {
    display: flex;
    width: 100%;
    height: 45px;
    align-items: center;
}

.field input {
    width: 100%;
    height: 100%;
    text-align: center;
    -moz-appearance: textfield;
    border: none;
    color: #A6A6A6;
    background-color: transparent;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.slider {
    height: 5px;
    position: relative;
    background: #ddd;
    border-radius: 5px;
}

.slider .progress {
    height: 100%;
    position: absolute;
    border-radius: 5px;
    background: linear-gradient(90deg, #2ECB79 0%, #44C1E8 100%);
}

.range-input {
    position: relative;
}

.range-input input {
    position: absolute;
    width: 100%;
    height: 5px;
    top: -5px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: #fff;
    pointer-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

input[type="range"]::-moz-range-thumb {
    height: 17px;
    width: 17px;
    border: none;
    border-radius: 50%;
    background: #fff;
    pointer-events: auto;
    -moz-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}


.languages-filter-container {
    width: 100%;
    padding: 1rem;
    
}

.languages-filter-container form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;

}


#languageToggle , #daysToggle {
    cursor: pointer;
}

.languages-filter-container label {
    display: flex;
  width: 100%;
  justify-content: flex-start;
  padding-left: 1rem;
  align-items: center;
  gap: 1rem;
  font-family: Poppins;
  color: #9A9A9A;
  font-size: 18px;
}

.languages-filter-container input {
    border-radius: 4px;
  border: none;
  border: 1px #9A9A9A;
  margin-left: 0.5rem;
}


.days-filter-container {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.days {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.days label {
    font-family: Poppins;
    color: #9A9A9A;
    font-size: 18px;
}

.days input {
    padding: 0.5rem 1rem;
    border: 2px solid #757575;

}









.range-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

/* Label Styling */
#ratingValue {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #9A9A9A;
}

/* Custom Styling for #rating */
#rating {
    -webkit-appearance: none;
    appearance: none;
    width: 80%;
    height: 10px;
    background: #D3D3D3; /* Initial light gray */
    border-radius: 5px;
    outline: none;
    transition: background 0.3s;
    cursor: pointer;
    position: relative;
}

/* Dynamic background update */
#rating::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 5px;
    background: #D3D3D3;
    transition: background 0.3s;
}

/* Thumb Styling */
#rating::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #00cec9;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 206, 201, 0.5);
    position: relative;
    margin-top: -4px; /* Center thumb on track */
}

/* Apply gradient dynamically */
#rating:focus::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #2ecc71, #00cec9);
}










.filter-hide {
    display: none;
}


/* #filterToggle {
    transform: rotate(180deg);
} */

.filter-controller {
    opacity: 0.6;
    
}

.filters .top {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}

.filters .top h1 {
    font-size: 15px;
    font-family: Poppins;
    font-weight: 500;
    color: #FFF;
}

/* .filters .top input[type="date"] {
    border: none;
    color: white;
    height: auto;
    padding: 0.5rem;
    font-family: Poppins;
    font-size: 0.6rem;
    border-radius: 200px;
    background-color: #05A351;
} */


.filters-dates {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.filters .top input {
    width: 7rem;
    height: 2rem;
    text-align: center;
}





input[type="date"]:hover {
    background-color: #fff;
    color: #05A351;
    transition: 0.2s ease-in;
    box-shadow: 0 0 5px rgba(0, 255, 47, 0.5);
    cursor: pointer;

}

.filters .top [type="date"] {
    border: none;
    color: #05A351;
    height: auto;
    padding: 0.5rem;
    font-family: Poppins;
    font-size: 0.6rem;
    border-radius: 200px;
    background-color: #fff;
}

.filters .top [type="date"] {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}







.wishlist-active {
    color: red;
}



.close-filter-btn , .open-filter-btn {
    display: none;
}

.filter-popup-overlay {
    display: flex;
    align-self: flex-start;  
}


@media ( max-width: 1345px ) {


    .filter-container {
        width: 20rem;
    }

    .secondary-search input {
        font-size: 11px;
    }

    .secondary-search-button {
        width: 2rem;
        height: 2rem;
    }
}

@media (max-width:1100px) {

    .secondary-search input {
        width: 100%;
    }

    /* .secondary-search-button {
        right: -23.5%;
    } */

    .cards-container {
        width: 38vw;
      }
}


@media (max-width: 950px) {
    .cards-container {
      width: 98vw;
      justify-content: center;
    }

    .filters-mb{
        display: inline-block;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .close-filter-btn , .open-filter-btn {
        display: inline-block;
    }

    main {
        margin-top: 1rem;
        padding-top: 4rem;
        margin-bottom: 0rem;

    }
    
    .open-filter-btn {
        border: none;
        padding: 0.5rem 1rem;
        font-family: poppins;
        font-size: 0.7rem;
        font-weight: 500;
        border-radius: 10px;
        position: absolute;
        top: 0;
        right: 6rem;
        margin-top: 1rem;
        color: white;
        background-color: #05A351;
        cursor: pointer;
    }
    .secondary-search input {
        background-color: #fff;
        color: #05A351;
        border: 2px solid #05A351;

    }
    .secondary-search .loc {
        color: #05A351;
    }
    .secondary-search {
        width: 80%;
    }
    .secondary-search-button {
        display: none;
    }
    .filter-submit {
        display: none;
    }


    .suborclose {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 1.5rem;

    }

    .suborclose .filter-submit {
        display: inline-block;
    }
  
    /* Overlay that covers the entire screen */
    .filter-popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.7);
      display: none; /* Hidden by default */
      justify-content: center;
      align-items: flex-start;
      z-index: 9999;
      overflow-y: auto;
    }
  
    /* Filter content box */
    .filter-container {
      background-color: #F5F5F5;
      width: 90vw;
      padding: 20px;
      margin-top: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      position: relative;
    }
    .sortdiv {
        width: 650%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: -1rem;
        margin-right: 0rem;
        gap: 5rem;
        margin-top: 0.5rem;
    }
    /* Close button */
    .close-filter-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #333;
    }
  }
  

  @media (max-width:580px) {
    .cards-container {
        gap: 1rem;
      }
      .card-container {
        width: 10rem;
        height: auto;
      }

      .card-img{
        height: 45%;
      }

      .route img {
        width: 1rem;
      }
      .card-title {
        line-height: 0;
        margin-bottom: 0;
      }
      .card-title a {
        font-size: 11px;
        line-height: 17px;

      }
      .title-container {
        height: auto;
      }
      .title-container h4 {
        font-size: 10px;
      }
      .ratio-container p {
        font-size: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .rating-container p {
        font-size: 8px;
      }

      .card-bottom h4, .price-container {
        font-size: 8px;
      }
      .price-container span {
        font-size: 10px;
      }

  }

  .card-bottom {
    position: relative;
  }

@media (max-width:480px) {
    .card-container {
        width: 10rem;
      }
      .cards-container {
        gap: 1rem;
      }

      .sortdiv{
        gap: 2.5rem;
      }
}

.sortdiv i {
    cursor: pointer;
}


#filterToggle, #priceFilterToggle ,#ratingToggle{
    transform: rotate(180deg);
    transition: transform 0.3s ease;
    cursor: pointer;
}


#languageToggle,
#daysToggle,#ratingToggle {
    transition: transform 0.3s ease;
    cursor: pointer;
}






@media(max-width:650px) {
    .open-filter-btn {
        right: 0rem;
        margin-right: 2rem;
    }



}