/*
Name: Main search results styles
Theme URI: https://www.caravans2let.com
Author: Daniel Tuck
Author URI: https://www.danieltuck.co.uk
Description: public search resutls styles
Version: 1.0
*/


/* Filter Sidebar */
.filter-sidebar {
    max-width: 380px;
	width:25%;
    padding: 20px;
    border-right: 0px solid #ddd;
    background-color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 0;
	border-radius:10px;
	margin-right:20px;
	box-shadow: 0px 2px 5px #33333320;
}



#resultsWrapper.sidebar-hidden .filter-sidebar {
    transform: translateX(-100%);
    position: absolute;
    z-index: 1050;
    background: #fff;
    height: 100%;
    box-shadow: 2px 0 6px rgba(0,0,0,0.1);
}

/* Main Results Area */
.results-main {
    transition: margin-left 0.3s ease;
    width: 100%;
}

/* Sidebar Toggle Buttons */
.toggle-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
}

#closeSidebarBtn {
    top: 8px;
    right: 8px;
    z-index: 1060;
      background:#999;
  padding:10px 12px;
border-radius: 10px;
  color:#fff;
  font-size:14px;
  position:absolute;
}
#closeSidebarBtn:hover {background-color:#F7941D;}


/* ? Hide sidebar on desktop by setting display: none */
@media (min-width: 992px) {
    #resultsWrapper.sidebar-hidden .filter-sidebar {
        display: none;
    }
}

/* ? Slide sidebar off-screen on mobile */
@media (max-width: 991px) {
    #resultsWrapper.sidebar-hidden .filter-sidebar {
        transform: translateX(-100%);
    }
}

/* When hidden, move it left (used only on mobile) */
@media (max-width: 991px) {
    #resultsWrapper.sidebar-hidden .filter-sidebar {
        transform: translateX(-100%);
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background: #fff;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
        z-index: 1050;
    }

    .filter-sidebar {
        position: absolute;
        left: 0;
        top: 0;
        width:100%;
        background: #fff;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
        z-index: 1050;
        transform: translateX(0%);
		min-width:320px;
		border-radius:0px;
    }
}

/* Hide filter sidebar completely when hidden on mobile */
@media (max-width: 991px) {
	transform: translateX(-100%);
    #resultsWrapper.sidebar-hidden .filter-sidebar {
        display: none;
    }
}

.search-results-form
{background:#fff; border-radius:0 0 40px 40px;z-index:1;
box-shadow: 0 0 120px #fff;}
@media (max-width: 991px) {.search-results-form{box-shadow:none;}}
.search-results-header
{margin-top:25px;}
.search-results-buttons
{width:400px;}

#listView {
  margin:0px;padding:0px;width:100%;
}
.search-results-container
{margin:-70px 0 0!important; padding:0px; ;}

.col-md-8.d-flex.flex-column.justify-content-between {
  padding:0 20px;
}

.btn-outline-primary,
.btn.btn-sm.open-facility-modal {
  border: 1px solid #091626;color:#091626;
}
.btn-outline-primary:hover,
.btn.btn-sm.open-facility-modal:hover
{color:#fff; background:#f7941d;border-color:#f7941d;}
.btn-outline-primary.active{background:#091626;border-color:#091626;}


/*  Image Slider Container */
.image-slider {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    border-radius: 8px;
}

/*  Images (Ensures consistency) */
.image-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*  Navigation Buttons */
.image-slider .prev-btn,
.image-slider .next-btn {
    position: absolute;
    bottom: -10px;
    transform: translateY(-50%);
    background-color: rgba(255, 2550, 255, 0.5); /* Semi-transparent black */
    color: #333;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5%;
    transition: background-color 0.3s ease;
		box-shadow: 0 5px 4px #00000050;
}

/*  Positioning */
.image-slider .prev-btn {
    left: 10px;
}

.image-slider .next-btn {
    right: 10px;
}

/*  Hover Effect */
.image-slider .prev-btn:hover,
.image-slider .next-btn:hover {
    background-color: rgba(255, 2550, 255, 0.9);

}



.mb-3.p-3.card.caravan-result {
background: 0% 0% / 50px 50px repeat repeating-radial-gradient(farthest-corner at 50% 50%, #ffffff50 0% 10%, #e7e5ff70 10% 13%);
box-shadow: 0px 2px 5px #33333320;
  
}


         .caravan-result a.btn.btn-primary.btn-sm {background-image: linear-gradient(to right, #FF512F 0%, #F09819  51%, #FF512F  100%)}
         .caravan-result a.btn.btn-primary.btn-sm {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
			border: 0px solid transparent;
			font-weight:900;
          }

          .caravan-result a.btn.btn-primary.btn-sm:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }


/* Map  resultsstyling */
#guest-details-box{  z-index: 20!important;}
#mapView {
  height: 600px;
  width: 100%;
  display: none
position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 0!important;

}

#map {
  height: 100%;
  width: 100%;
}
#map {
    left: 0; 
    right: 0; 
    bottom:0; 
    z-index: 1; 
    overflow: hidden;
    border:solid 3px #f5f5f5; 
    border-radius:15px; 
    -moz-border-radius:15px;
    -webkit-mask-border-radius:15px;
    -webkit-border-radius:15px;
	  box-shadow: 0 0 60px #00000040;
}
.custom-price-marker {
	background-color: #091626;
	color: white;
	font-weight: bold;
	padding: 6px 10px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	border: 2px solid white;
	font-size: 13px;
	white-space: nowrap;
	position: relative;
}

.custom-price-marker::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #091626;
}




/* Hide default checkbox inputs */
.form-check-input.facility-checkbox {
	display: none;
}

/* Custom label styled as a button */
.form-check-label {
	display: block;
	width: 100%;
	padding: 6px 6px;
	background-color: #f0f0f0;
	border: 2px solid #ccc;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	text-align: left;
	font-weight: 500;
	position: relative;
	font-size:14px;

}

/* Tick/Count inside label */
.form-check-label span {
	float: right;
	color: #888;
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 1.5px
}

/* Checked state */
.form-check-input.facility-checkbox:checked + .form-check-label {
	background-color: #ffffff;
	color: #007bff;
	border-color: #007bff;
	box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
	font-weight: bold;
}

/* Hover effect */
.form-check-label:hover {
	background-color: #e2e2e2;
}

/* Responsive spacing */
.facility-item {
	margin-bottom: 8px;
	padding:0px;
}


/* Active filter section */

.active-filter-badge {
    display: inline-flex;
    align-items: center;
    background-color: #e7f1ff;
    border: 1px solid #007bff;
    color: #007bff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 14px;
    cursor: default;
}
.active-filter-badge .remove-filter {
    margin-left: 8px;
    font-weight: bold;
    cursor: pointer;
}



.btn-group,
.btn-group .btn,
.search-results-buttons {
  position: relative;
  z-index: 0 !important;
}


/* Date Picker Popup */
.date-popup {
    position: absolute;
    background: white;
    padding: 18px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    width: 100%; /* Set fixed width */
    height: 465px; /* Set fixed height */
    z-index: 100;
    overflow: hidden;
    display: none; /* Initially hidden */
    flex-direction: column;
    justify-content: space-between;
 top:200px;
    max-width:420px;
}
@media only screen and (max-width: 768px) {
 .date-popup {position: absolute;top:200px;left:0px!important;}
}
/* Show popup when active */
.date-popup.active {
    display: flex !important;
}

/* Ensure FullCalendar fills the popup */
#date-picker-container {
    flex-grow: 1; /* Allow calendar to fill space but not expand beyond */
    overflow-y: auto; /* Prevent overflow */
}

/* Calendar navigation buttons */
.calendar-buttons {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    background: white; /* Ensure it's visible */
    padding-bottom: 5px;
     font-family: 'Raleway', sans-serif;

}

.calendar-buttons .btn {
    padding: 6px 15px;
    font-size: 14px;
    margin: 0 2px;

}
/* Adjust FullCalendar styles */
.fc-dayGridMonth-view {
    height: auto !important;
}

.fc-day-header {
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    width: 14.28%; /* Each day takes equal space */
}

.fc-day {
    min-height: 40px; /* Ensure day cells are properly sized */
}

/* Adjust FullCalendar Month Grid */
.fc-daygrid-day {
    min-height: 30px !important; /* Reduce day cell height */
    padding: 2px 0 !important; /* Minimize padding */
}

/* Reduce header size (Mon, Tue, etc.) */
.fc-day-header {
    font-size: 10px !important; /* Make headers smaller */
    padding: 2px !important;
    width: 14.28%; /* Ensure equal width */
}

/* Reduce text size inside days */
.fc-daygrid-day-number {
    font-size: 12px !important;
    padding: 2px !important;
}

/* Ensure the entire month grid fits within the popup */
#date-picker-container {
    height: 300px !important; /* Make the calendar fit */
    width: 100% !important;
}


.fc-daygrid-day-frame.fc-scrollgrid-sync-inner {
     font-family: 'Raleway', sans-serif;
  max-height:40px!important;
}
th.fc-col-header-cell.fc-day div.fc-scrollgrid-sync-inner a
{color:#333;text-decoration:none;}

.fc-daygrid-day-frame .fc-daygrid-day-top a.fc-daygrid-day-number
{color:#333;text-decoration:none;font-size:16px!important;}

.fc .fc-toolbar-title {
     font-family: 'Raleway', sans-serif;
  font-size: 1.5em!important;
  margin: 0;font-weight:600;
}
.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 1em;
}
div#publicCalendar  .fc-daygrid-day-bg .fc-daygrid-bg-harness .fc-event.fc-event-future.available-period.fc-bg-event
{pointer-events: none;}



/* Live Search Dropdown */

.search-results {
    position: absolute;
    background: white;
    width: 100%;
    max-height: 350px; /* ✅ Limit height */
    overflow-y: auto; /* ✅ Enable scrolling */
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.8);
    top:50px;
    left:2px;
}


/* Section Headings */
.result-heading {
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    background: #f1f1f1;
    border-bottom: 1px solid #ddd;
    color: #333;
    text-transform: uppercase;
}

/* Search Result Items */
.search-result-item {
    padding: 10px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
}

/* Search Icons */
.search-icon {
    font-size: 16px;
    margin-right: 8px;
}

/* Locations: Ensure white background */
.location-result {
    background: white !important;
}

/* Holiday Park Results */
.search-result-item:hover {
    background: #f5f5f5;

}

/* Town/City & County Display */
.search-result-item .location-meta {
    font-size: 12px;
    color: #666;
    display: block;
    margin-top: 3px;
    padding: 0 8px;
}

/* Caravan Availability */
.caravan-count {
    font-size: 12px;
    color: #28a745;
    font-weight: bold;
    padding-top:4px;
}

/* Unavailable parks (0 caravans) */

.unavailable {
    opacity: 0.5; /* Fade out */
    pointer-events: none; /* Prevent clicking */
    cursor: not-allowed;
}

/* Ensure locations & active parks remain selectable */
.location-result {
    background: white !important;
    pointer-events: auto; /* ✅ Ensure clickable */
}

.search-result-item {
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.btn-primary {
    opacity: 1;
    cursor: pointer;
}

/* Reference Results */
.reference-result {
    background: #fff !important;
    border-left: 4px solid #F7941D; /* Orange highlight */
}

.reference-result:hover {
    background: #f9f9f9;
}

#search-button {max-width:95%;margin: 0 -10px -16px 0;
}