body.filters-active .post-title {
    margin-top: additional-space; /* Adjust this value to ensure enough space */
}

/* Base styles - applied to all sizes by default */
#filter-options {
    transition: max-height 0.5s ease, padding 0.5s ease;
    max-height: 0; /* Start with max-height at 0 */
    overflow: hidden; /* Hide the overflow content */
    padding: 0; /* No padding when filter is closed */
}

#filter-options.active {
    max-height: 500px; /* Adjust as necessary for your content */
    padding: 10px; /* Add padding when filter is open */
}

#filter-options.active + .title-container {
    padding-top: 60px; /* Adjust this value based on the actual height of the filter div */
}



/* Styles for desktops */
@media (min-width: 1025px) {
    #filter-options {
        max-height: none; /* Remove the max-height restriction */
        overflow: visible; /* Make the overflow content visible */
        margin-top: -9px;
    }
}




.hidden-filters {
    display: none;
}


.ui-datepicker-group {
    display: inline-block;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}
td.ui-datepicker-days-cell-over .ui-state-default {
    background-color: #006ce4;; /* Your desired color */
color: white;
}


button[type="submit"] {
    color: white;
    background-color: #0896FF;
    padding: 10px 20px;
    border: 2px solid #FFFFFF;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    font: bold 1em/1 Arial, Helvetica, sans-serif;
    margin: 0; /* No margin for even spacing */
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

button[type="submit"]:focus {
    outline: none;
}

button[type="submit"]:last-child {
    margin-right: 0;
}

.button-search {
    border-radius: 4px;
    background-color: #0896FF;
    border: 0px solid #FFFFFF;
    color: #FFFFFF;
    letter-spacing: 1px;
    padding: 0.3em 0.9em;
    text-transform: uppercase;
    font: bold 1.333em/1 Arial, Helvetica, sans-serif;
    position: relative;
    flex: 0 0 calc(25% - 10px);
    height: 38px;
    font-size: 16px;
}

.ui-datepicker-trigger {
    position: relative;
    left: -27px;
    top: -28px;
}

/* Center the booking container */
.booking {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
margin-bottom: -30px;
}
div#Booking_hotels {
    background-color: #feba02;
    margin-top: -29px;
    height: 101px;
    border-bottom: 10px solid;
    border-bottom-color: #6bfffc;
}

/* Styles for the form */
#frm_7738 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #6bfffc;
    height: 101px;
}

.pay-later-toggle label {
  display: flex;
  align-items: center;
  font-weight: normal;
  font-size: 14px;
  cursor: pointer;
margin-top:3px;
}

#payLaterToggle {
  margin-right: 8px;
  flex-shrink: 0;
  /* This ensures the checkbox size and vertical alignment */
}


/* Styles for the main heading above the form */
h2.booking-now {
    background-color: #6bfffc;
    font-size: 1.5rem;
    margin-bottom: 0px;
    width: 100%;
    padding: 8px;
}

/* Styles for the 'BOOK NOW, PAY LATER!' heading */
h3.booking-search {
    font-size: 1.5rem;
    position: relative;
    top: 0px;
    margin: 0;
    flex: 0 0 calc(25% - 10px); /* Adjusted width */
}
h3.booking-header {
    font-size: 25px;
    position: relative;
    top: 6px;
}

.ui-widget {
    font-size: 1em !important;
}

#ui-datepicker-div {
    z-index: 9999999 !important;
}

.border-search {
    background-color: aquamarine;
    height: 8px;
}

#homein, #homeout {
    float: left;
    padding: 0.5em 3em 0 0;
}

.avail {
    padding-top: 1em;
    clear: both;
}

.blur {
    color: #999;
}

.datepicker-input {
    padding-left: 40px!important; /* Space for the calendar icon */
    position: relative;
    flex: 1; /* Allow inputs to grow and fill the space */
    min-width: 170px; /* Minimum width for usability */
    max-width: calc(25% - 10px); /* Adjusted maximum width */
    border-color: #000000!important;
background-color: white!important;
font-size: 15px;
    background: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%3Cpath d="M12 17V9M16 13.0011L8 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat 10px 50%/20px 20px;
border-radius: 5px;
    margin-right: 3px;
margin-left: 0px;
}

.input-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto; /* Center the container */
    padding: 0 10px; /* Padding on the sides */
    flex-wrap: wrap; /* Allow wrapping if needed */
    margin-top: 20px;
}
.filter-button {
    color: black;
    border: 0px;
    margin-top: -11px;
    font-weight: 600;
}
.filters {
    font-size: 13px;
    font-family: system-ui;
    color: black;
    margin-top: 14px;
}

/* Align checkboxes and text within .filters class */
.filters label {
    display: inline-flex;
    align-items: center; /* This will vertically center the checkbox with the text */
    margin-right: 5px; /* Adjust spacing between checkboxes as needed */
font-weight: 600;
}

.filters input[type='checkbox'] {
    margin-right: 5px; /* Space between checkbox and label text */
    vertical-align: middle; /* This will align the checkbox vertically */
}
div#filter-container {
    margin-top: 5px;
width: 100%;
}

select {
    border: 1px solid #feba02; 
width: 150px; 
    background-color: white; 
color: black;
}

input#num_adults {
    width: 100px;
    border: 0px;
    height: 37px;
font-size: 15px;
margin-left: 2px;
    margin-right: 3px;
border-radius: 5px;
}
input#num_rooms {
    width: 100px;
    border: 0px;
    height: 37px;
    font-size: 15px;
margin-left: 2px;
    margin-right: 3px;
border-radius: 5px;
}
input#num_children {
    width: 100px;
    border: 0px;
    height: 37px;
    font-size: 15px;
margin-left: 2px;
    margin-right: 5px;
border-radius: 5px;
}
#children_ages_container {
    width: 100%; /* Makes the container take full width */
    padding: 0; /* Adjust padding as needed */
    box-sizing: border-box; /* Ensures padding is included in width calculation */
  }

/* Add this below */
#children_ages_container label {
    color: white;
    font-size: 15px;
    font-weight: 600;
    margin-top: 10px;
}

  .child-age-selector {
    width: 80%; /* Makes each dropdown take full width */
    margin-bottom: 2px; /* Adds space between the dropdowns */
max-width: 80%;
margin-top: 10px;
  }

  /* Adjust the last child-age-selector to remove the margin at the bottom if not needed */
  .child-age-selector:last-child {
    margin-bottom: 10px;
  }

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: unset;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #0896FF;
    padding: 20px;
    border: 1px solid #888;
    position: absolute; /* Absolute position within the fixed positioned modal */
    box-sizing: border-box; /* Padding included in the width */
    left: 50%; /* Initially position at the center */
    transform: translateX(-50%); /* Center the modal */
    max-width: 379px!important;
    width: max-content;
}

/* Quantity Controls: Minus Button, Input Field, Plus Button */
.quantity-controls {
    display: flex; /* Align children in a row */
    justify-content: center; /* Center children horizontally */
    align-items: center; /* Center children vertically */
    gap: 10px; /* Space between controls */
}

.quantity-controls input {
    width: auto; /* Let the input size naturally */
    text-align: center;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Done Button */
.done-button {
    text-align: center; /* Center the done button horizontally */
    padding-top: 10px; /* Space above the done button */
}



/* Centered modal fallback */
.modal-centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
input#popup_num {
    width: 43%;
    text-align: center;
    height: 46px;
    border-color: #0896FF;
    margin-right: 3px;
    margin-left: 3px;
}
button {
    height: 44px;
    border: solid 1px;
    color: #ffffff;
}
button.button-done {
    width: 80%;
    margin: auto;
    margin-top: 10px;
    font-weight: 600;
text-transform: capitalize;
}
button.button-de {
    font-size: 24px;
    line-height: 11px;
    text-align: center;
    font-weight: 700;
height: 46px;
}
button.button-in {
    font-size: 24px;
    line-height: 5px;
    text-align: center;
    font-weight: 700;
height: 46px;
}
    .input-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .input-wrapper {
        margin: 5px;
    }

    .input-wrapper select {
        background-color: white;
        padding: 5px;
    }
button.button-seacrh {
    border-radius: 5px;
    background-color: #0896FF;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    letter-spacing: 1px;
    padding: 0.3em 0.9em;
    text-transform: uppercase;
    font: bold 1em/1 Arial, Helvetica, sans-serif;
    position: relative;
    flex: 0 0 calc(25% - 10px);
    height: 39px;
}

/* Mostra i filtri quando hanno la classe 'active' */
#filter-options.active {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Due colonne per i filtri */
  gap: 10px; /* Spazio tra i filtri */
  /* Altri stili se necessario */
}

.child-age-selector:last-child {
    margin-bottom: 2px;
margin-top: 10px;
}







 /* mobile - mobile - mobile - mobile - mobile - mobile */






@media only screen and (min-width: 1037px) and (max-width: 1200px) {
    #filter-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: -2px;
    margin: auto;
    padding-left: 5%;
}}




@media screen and (max-width: 1036px) {
  
  /* Make each date input field take full width of its container */
  .datepicker-input {
    width: 100%;
    margin-bottom: 10px; /* Add space between the rows */
    max-width: none;
  }

  /* Set the container of the inputs to stack its children vertically */
  .input-container {
    flex-direction: column;
  }

  /* Set the adult, rooms, and children fields to display in a row */
  #num_adults, #num_rooms, #num_children {
    flex: 1 1 33%; /* Allows each field to take up one-third of the container's width */
  }

  /* Set the container of the adult, rooms, and children fields to display flex and wrap */
  .input-container > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px; /* Maintain gap between fields */
  }

  /* Set the search and filter buttons to take full width */
  .button-search,
    .filter-button {
        width: 100%; /* Full width for both buttons on mobile */
        margin-top: 2px!important; /* Add spacing between buttons */
margin-left: 0px!important;
    }

  /* Optional: Add styles to show filter options when filter button is active */
  #filter-btn.active + #filter-options {
    display: block;
  }
/* Ensure the main container div occupies 100% width and no space around */
    .grouped-inputs {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    /* Style for child divs to fill the container equally and align inputs */
    .grouped-inputs > div {
        flex: 1; /* Each child div takes equal space */
        padding: 0 0.5px; /* 1px total space between divs */
        box-sizing: border-box;
    }

    /* First child div has no left padding */
    .grouped-inputs > div:first-child {
        padding-left: 0;
    }

    /* Last child div has no right padding */
    .grouped-inputs > div:last-child {
        padding-right: 0;
    }

/* Specificity increased by using ID selectors */
    input#num_adults, input#num_rooms, input#num_children {
        width: calc(100% - 1px); /* Adjust for the padding */
        margin: 0;
        border: 0;
        height: 37px;
        font-size: 15px;
        border-radius: 5px;
        box-sizing: border-box;
    }
   
#frm_7738 {
    height: 240px;
    margin-bottom: 78px;
}
.pay-later-toggle label {
    margin-top: 11px;
    font-size:11px !important;
}
#children_ages_container {
    width: 100%; /* Makes the container take full width */
    padding: 0; /* Adjust padding as needed */
    box-sizing: border-box; /* Ensures padding is included in width calculation */
  }

  .child-age-selector {
    width: 80%; /* Makes each dropdown take full width */
    margin-bottom: 0px; /* Adds space between the dropdowns */
    max-width:245px;
  }
.child-age-selector:last-child {
  margin-bottom: 3px;
}

    #filter-options {
    /* Initially hide the filter options on mobile */
    display: none;
    overflow: hidden;
    max-height: 0; /* Start with max-height at 0 */
    transition: max-height 0.5s ease;
  }

  #filter-options.active {
    /* When active, display the filter options on mobile */
    display: grid;
    max-height: 1000px!important; /* Maximum height when expanded */
    grid-template-columns: repeat(4, 1fr); /* Two columns for filters */
    gap: 10px;
padding-left: 6%;
  }

  #filter-btn {
    width: 100%;
    margin-bottom: 10px;
    border: 0px;
    margin-top: 3px!important;
    color: black;
display: block;
}
}

.with-filters {
    margin-top: 10.5em!important;
}

@media only screen and (min-width: 1024px) and (max-width: 1035px) {

button.button-in {
    text-align: center;
    font-weight: 700;
    left: 0px;
    max-width: 0px;
    padding-left: 15px!important;
    padding-right: 28px!important;
    height: 46px!important;
    font-size: 24px!important;
}
button.button-done {
    width: 73%;
    margin: auto;
    margin-top: 10px!important;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
    left: 0px;
}
input#popup_num {
    position: relative;
    top: -1px;
}}





@media only screen and (min-width: 769px) and (max-width: 1023px) {
    .modal-content {
        /* Adjust the modal content styles for the specified screen size */
        width: auto; /* Example: set width to auto */
        padding: 20px; /* Maintain padding */
        box-sizing: border-box; /* Include padding and border in the width */
        max-width: 500px; /* Set a maximum width if necessary */
        margin: auto; /* Center the modal content within the modal */
        left: 50%;
        right: 0;
    }

    .quantity-controls input,
    .quantity-controls button {
        /* Adjust the size of the input and buttons within the modal */
        flex: 1; /* Example: allow buttons and input to grow and fill the space equally */
        margin: 5px; /* Add space between buttons and input */
    }

    .button-done {
        /* Adjust the style of the Done button */
        width: 100%; /* Example: set the width to full container width */
        margin-top: 20px; /* Add some margin on top of the Done button */
    }

/* Centered modal fallback */
.modal-centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
button.button-in {
    text-align: center;
    font-weight: 700;
    left: 200px;
    max-width: 0px;
    padding-left: 15px!important;
    padding-right: 28px!important;
height: 46px!important;
font-size: 24px!important;
}
button.button-de {
    font-size: 24px;
    line-height: 5px;
    text-align: center;
    font-weight: 700;
    padding-left: 17px!important;
    padding-right: 14px!important;
height: 46px!important;
}
button.button-done {
    width: 73%;
    margin: auto;
    margin-top: 10px!important;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
    left: 100px;
}
input#popup_num {
    height: 46px!important;
}
#filter-options {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.filter-button {
    display: block; 
}
#filter-options.active {
    display: grid;
    max-height: 1000px!important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-left: 6%;
}}











@media screen and (max-width: 768px) {
    .input-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
 section#content {
        /* Default margin-top when filters are not active */
        margin-top: 64px;
    }

    /* Only apply the margin-top when filters are active */
    section#content.with-filters {
        margin-top: 10.5em; /* Adjusted margin-top when filters are active */
    }

     .input-wrapper {
        width: 48%; /* Adjust the width as needed */
        box-sizing: border-box;
    }

    #checkin_display,
    #checkout_display {
        box-sizing: border-box; /* Include padding and border in the width calculation */
        max-width: none; /* Remove the max-width setting, or set it to what you prefer */
        min-width: 50px; /* Set a minimum width to ensure usability */
    }

    .button-search,
    .filter-button {
        width: 100%; /* Full width for both buttons on mobile */
        margin-top: 0px; /* Add spacing between buttons */
    }
div#Booking_hotels {
    height: 250px;
}
.filter-button {
    display: block; 
}
#filter-btn {
    width: 100%;
    margin-bottom: 10px;
    border: 0px;
    margin-top: 3px!important;
    color: black;
    box-shadow: none;
}
button.button-in {
    padding: 10px;
    height: 46px;
    padding-top: 7px;
}
button.button-de {
    padding: 10px;
    height: 46px;
    padding-top: 8px;
}
button.button-done {
    width: 80%;
}
.modal-content {
    padding: 30px!important;
width: max-content;
max-width:336px;
}
input#popup_num {
    font-size: 15px;
    height: 46px!important;
width: 49%!important;
}
#filter-options {
    grid-template-columns: repeat(3, 1fr)!important;
    gap: 5px!important;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: 100%;
    padding-left: 4%!important;
font-size: 2.8vw;
}
filter-options.active {
    display: grid;
    max-height: 1000px!important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-left: 6%;
}

  /* Aumenta la dimensione dei checkbox per facilitare la selezione su touchscreen */
  #filter-options input[type='checkbox'] {
    transform: scale(1.5);
    margin-right: 7px;
  }

  /* Aumenta la dimensione del testo per migliorare la leggibilita
  #filter-options label {
    font-size: calc(10px + (38 - 12) * ((100vw - 360px) / (1200 - 360)));
  }

  /* Assicurati che il bottone dei filtri occupi l'intera larghezza disponibile per facilitare la selezione */
  #filter-btn {
    width: 100%;
    margin-bottom: 10px;
  }
.child-age-selector:last-child {
    margin-bottom: 1px;
}}