/* General Styles */
body {
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Wrapper to structure the entire page */
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%; /* Full height of the viewport */
}

/* Header styling */
header, footer {
    background-color: rgba(255, 255, 255, 0.8); /* White background with 80% opacity */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
    padding: 1rem; /* Padding for content */
}

.container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* Optional: Remove margin and padding from container */
.no-margin-padding {
    margin: 0 !important;
    padding: 0 !important;
}
/* Base styling for the sidebar */
#sidebar {
    background-color: #f9f9f9;
    padding: 20px;
    position: fixed;
    top: 0;
    height: 100%; /* Full height of the viewport */
    overflow-y: auto; /* Scrollable if content overflows */
    z-index: 1000; /* Ensure it's above the main content */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Show sidebar when active */
#sidebar.show {
    left: 0; /* Slide in the sidebar */
}

/* Adjust main content area to fit with sidebar */
#main-content {
    position: relative;
    transition: margin-left 0.3s ease; /* Smooth transition */
}

/* Sidebar styling for small screens */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        top: 0;
        /*left: -100%; /* Hidden off-screen */
        width: 100%;
        height: 100%;
        z-index: 2000; /* Higher than main content */
        overflow-y: auto;
        background-color: #fff; /* Ensure it's visible */
        transition: all 0.3s ease; /* Smooth sliding effect */
    }

    #sidebar.show {
        left: 0; /* Slide in the sidebar */
    }

    #main-content {
        margin-left: 0; /* No margin on mobile */
    }

    #toggle-sidebar {
        display:none;
        position: fixed;
        bottom: 15px;
        right: 15px;
        z-index: 3000;
        background-color: #ff5a5f;
        color: #fff;
        border: none;
        padding: 15px 20px;
        border-radius: 25px;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        font-size: 16px;
        transition: all 0.3s ease;
    }
    #toggle-sidebar.see-results {
        background-color: #4CAF50; /* Change color for "See results" */
    }
}

/* Booking process*/
.fa-spinner {
  margin-left: 10px;
  font-size: 16px;
}

/* Styling for Sidebar Elements */
#sidebar h3 {
    margin-bottom: 20px;
}

#sidebar .form-group {
    margin-bottom: 15px;
}

/* Typeahead Styles */
.twitter-typeahead {
    width: 100%;
}

.tt-menu {
    width: 100%;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    line-height: 24px;
}

.tt-suggestion:hover, .tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #007bff;
}

/* Toggle Sidebar Button */
#toggle-sidebar {
    display: inline-block;
    margin-right: 10px;
}

/* Custom styling for property cards */
#properties-grid .card {
    height: 100%;
}

#properties-grid .card-img-top {
    height: 400px;
    object-fit: cover;
}

/* Property Card Container */
.property-card-container {
  position: relative;
  margin-bottom: 30px; /* Space between cards */
}

/* Property Card */
.property-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  cursor: pointer;
}
.property-card a {
    color:#fff
}
.property-card:hover {
  transform: scale(1.05);
}

/* Property Image */
.card-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* General Styling for the Card */
/* NEW */
.property-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative; /* Ensure position context for children */
  transition: transform 0.3s;
}

.property-card:hover {
  transform: scale(1.05);
}
.property-card .centered-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff; /* Set to white or your desired color */
    /*background-color: rgba(0, 0, 0, 0.5); /* Optional: Semi-transparent background for better visibility */
    padding: 10px;
    border-radius: 8px;
    width: 80%; /* Adjust width as needed */
    text-shadow: 1px 1px 1px rgba(0,0,0,.25),2px 2px 1px rgba(0,0,0,.25);
}

.property-card .centered-title h3 {
    margin: 0;
    font-size: 1.5em; /* Adjust size as needed */
}

.property-card .centered-title p {
    margin: 0;
    font-size: 1em; /* Adjust size as needed */
    color: #ccc; /* Subtitle color */
}

/* Styling for the Image Container */
.card-img-top {
  position: relative;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* Styling for Corner Info */
.corner-info {
  position: absolute;
  padding: 5px 10px;
  color: white;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
}

/* Upper Left */
.upper-left {
  top: 10px;
  left: 10px;
}

/* Upper Right */
.upper-right {
  top: 10px;
  right: 10px;
}

/* Lower Left */
.lower-left {
  bottom: 10px;
  left: 10px;
}

/* Lower Right */
.lower-right {
  bottom: 10px;
  right: 10px;
}

/* Styling for the Card Body */
.card-body {
  padding: 15px;
  background-color: #fff;
  text-align: center;
}

.card-title {
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.card-text {
  font-size: 1em;
  margin-bottom: 0.5em;
}

.card-price {
  font-size: 1.1em;
  color: #28a745; /* Price Color */
}
@media (max-width: 768px) {
  .card-img-top {
    height: 200px; /* Adjust image height for smaller screens */
  }

  .corner-info {
    font-size: 12px; /* Smaller font size for corner info */
    padding: 3px 7px;
  }
}

/* Overlay Styling */
.property-overlay {
  /*position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  text-align: center;
  z-index: 2;*/
    padding: 20px 40px 20px 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the overlay */
    width: 90%; /* Adjust width as needed */
    max-width: 500px; /* Optional: Limit maximum width */
    background: rgba(0, 0, 0, 0.9); /* Dark background */
    color: #fff; /* White text */
    padding: 20px; /* Add padding */
    border-radius: 10px; /* Rounded corners */
    z-index: 1000; /* High z-index to appear on top */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    visibility: hidden; /* Hide by default */
    opacity: 0; /* Hide by default */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

/* Show overlay on hover for desktop */
.property-card-container:hover .property-overlay {
    opacity: 1;
    visibility: visible;
}
/* For mobile devices */
@media (max-width: 768px) {
    .property-overlay {
        position: fixed; /* Fixed position for full-screen effect */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Translate to center */
        width: 90vw; /* Adjust width as needed */
        max-width: 90vw; /* Limit maximum width to viewport width */
        height: auto; /* Adjust height based on content */
        max-height: 90vh; /* Limit maximum height */
        overflow-y: auto; /* Make it scrollable if content exceeds */
        padding: 20px;
    }

    /* Close button styling */
    .close-overlay {
        position: absolute;
        top: 10px; /* Adjust position */
        right: 10px; /* Adjust position */
        background: #fff; /* White background for visibility */
        color: #333;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
}

/* Overlay Elements */
.property-overlay h4 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}

/* Container for the whole list item */
.property-overlay ul {
    width: 100%;
}
.property-overlay ul li, .kids-score ul li {
    display: flex;
    align-items: center; /* Align items vertically centered */
    margin: 10px 0; /* Adjust spacing between items */
}

/* Container for the icon */
.property-overlay ul li .icon {
    width: 30px; /* Fixed width for icons */
    display: flex; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
    align-items: center; /* Center icon vertically */
    margin-right: 10px; /* Space between icon and text */
}

/* Container for the text */
.property-overlay ul li .text {
    flex: 1; /* Use remaining space */
    text-align: left; /* Align text to the left */
}

/* Container for the progress bar */
.property-overlay ul li .progress-container {
    flex: 3; /* Use more space for the progress bar */
    margin-left: 10px; /* Space between text and progress bar */
}

.property-overlay .progress {
    margin: 0; /* Remove any margins */
    padding: 0; /* Remove any padding */
    border: none; /* Remove any borders */
    height: 20px; /* Adjust height as needed */
}

/* Remove border and adjust the appearance of the progress bar */
.property-overlay .progress-bar {
    border: none; /* Remove any border */
    margin: 0; /* Remove any margins */
    padding: 0; /* Remove any padding */
    height: 100%; /* Ensure it fills the progress container */
}

.close-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}
.progress-container{
    padding:0px 0px 0px 0px;
    width: 100%
}
.progress-kids-score .progress {
    height:20px;
}

/* Styling for profile icon */
.profile-icon img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* Styling for filter button */
.btn-filter {
    background-color: #ff5a5f; /* Matching the color scheme */
    color: #fff;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    margin-right: 20px;
}

/* Styling for search bar */
.search-bar {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border-radius: 50px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-bar input {
    border: none;
    padding: 10px 15px;
    flex-grow: 1;
    border-radius: 50px 0 0 50px;
    outline: none;
}

.search-bar input::placeholder {
    font-size: 16px;
    color: #999;
}

.search-bar button.btn-add {
    background-color: #ff5a5f;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 0 50px 50px 0;
    cursor: pointer;
}

/* Adjust the layout of the row */
#search-filter-row {
    padding: 10px 0;
    margin-bottom: 20px;
    background-color: #f7f7f7; /* Background color similar to the screenshot */
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for the search bar */
@media (max-width: 768px) {
    .search-bar input {
        font-size: 14px;
    }

    .btn-filter {
        padding: 8px 15px;
        font-size: 16px;
    }

    .search-bar button.btn-add {
        padding: 8px 15px;
        font-size: 18px;
    }

    #search-filter-row {
        flex-direction: column;
    }
}

/* General container styling */
.filters-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Styling for filter section headers */
.filter-section h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
}

/* Container for filter buttons */
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* Filter button styling */
.filter-btn {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    color: #555;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filter-btn:hover {
    background-color: #ff5a5f;
    color: #ffffff;
    border-color: #ff5a5f;
}

.filter-btn.active {
    background-color: #ff5a5f;
    color: #ffffff;
    border-color: #ff5a5f;
}

/* Input fields hidden to be controlled by button clicks */
#sidebar #min_price, #sidebar #max_price, #sidebar #location, #sidebar #kid_friendly, #sidebar #selected_amenities {
    display: none;
}

/* Responsive layout adjustments */
@media (max-width: 768px) {
    .filters-container {
        /*display: none; /* Hide filters on smaller screens */
    }

    .show-filters {
        display: block;
        background-color: #ff5a5f;
        color: #ffffff;
        border: none;
        padding: 10px 20px;
        border-radius: 25px;
        cursor: pointer;
    }
}

/* Specific styles to address issues with overlapping */
@media (min-width: 768px) {
    #sidebar {
        position: relative;
    }

    #main-content {
        margin-left: 0; /* Adjust according to sidebar width */
    }
}

/* Swiper Container */
/* Swiper container should have a fixed height */
.swiper-container {
    height: 400px; /* Adjust this based on your design */
}

.swiper-bg-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

/* Fullscreen modal swiper */
.modal-fullscreen .swiper-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; /* Fullscreen */
}

.swiper-button-next, .swiper-button-prev {
    color: white; /* Make the buttons visible */
}
/* Manage criteria */
.table {
    margin-top: 20px;
}
.table th {
    cursor: pointer; /* Change cursor to indicate sorting */
}
.swiper-pagination {
    display:none;
}
.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.skeleton-loader {
    background-color: #e2e5e7;
    background-image: linear-gradient(90deg, #e2e5e7, #f0f3f5, #e2e5e7);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
#roomTypeCarousel .carousel-item img {
    object-fit: contain;
    height: 50vh;
    max-height: 500px;
}

@media (max-width: 768px) {
    #roomTypeCarousel .carousel-item img {
        height: 40vh;
    }
}
#fullScreenCarouselModal .modal-content {
    height: 100vh;
}
#fullScreenCarouselModal .carousel-item img {
    max-height: calc(100vh - 56px);
    max-width: 100%;
    object-fit: contain;
}

.gallery-row {
    /*height: 70vh;*/
    max-height: 600px;
  }

  .object-fit-cover {
    object-fit: cover;
    object-position: center;
  }

  @media (max-width: 767.98px) {
    .gallery-row {
      height: 50vh;
    }
  }

/* NEW PROPERTY CARDS SPLIT */
.property-image-container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.property-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.happyscore-overlay {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 33.33%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    color: white;
    padding: 20px;
    overflow-y: auto;
    border-radius: 0 10px 10px 0;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.happyscore-overlay h4 {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 20px;
}

.score-value {
    font-size: 1.2em;
    color: #4e73df;
}

.progress-list {
    padding-right: 10px;
    padding-left: 0px !important;
}

.score-item {
    margin-bottom: 15px;
}

.category-name {
    font-size: 0.9em;
    color: #e0e0e0;
}

.category-score {
    font-size: 0.9em;
    font-weight: 600;
    color: #ffffff;
}

.detail-page .category-name, .detail-page .category-score {
    color: #212529;
}

.progress {
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.6s ease;
    border-radius: 4px;
}

.progress-bar.bg-info {
    background-color: #4e73df!important;
}

.score-item:hover .progress-bar {
    box-shadow: 0 0 10px rgba(78, 115, 223, 0.5);
}

@media screen and (min-width: 768px) {
    .property-image {
        width: 66.67%;
    }
    
    .happyscore-overlay.desktop-only {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .property-image {
        width: 100%;
    }
    
    .happyscore-overlay {
        display: none !important;
    }
}

/* Hotel room type badges*/
.badge-container {
    position: relative;
    overflow: hidden;
}

.badge-scroll {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    padding-bottom: 10px; /* To ensure badges aren't cut off */
}

.badge-scroll::-webkit-scrollbar { 
    display: none;  /* WebKit */
}

.badge {
    flex: 0 0 auto;
}

.checkbox-container {
    z-index: 10;
}
.card-img-top {
    z-index: 1;
}