/* HOLIDAY OFFERS SINGLE PAGE */
.holiday-offers-sorting-filtering {
	margin: 10px 20px;
	position: relative;
}

.open-filters-button.button {
	background: var(--pastel-blue-color);
	/* padding: 10px; */
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: 14px;
	border-radius: 3px;
	cursor: pointer;
	padding: 10px 20px;
	gap: 10px;
	/* text-transform: uppercase; */
	font-weight: 500;
	margin: 5px 0;
	position: relative;
	transition: all 0.3s;
}

.open-filters-button.button i {
	font-size: 20px;
}

.open-filters-button.button span {
	background: var(--copper-color);
	color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 22px;
	border-radius: 50px;
	transform: translate(3px, -8px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}

.open-filters-button.button span:empty{
	display:none;
}

.open-filters-button.close {
	position: absolute;
	right: 0;
	top: 0;
	background: var(--copper-color);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	/* z-index: 1000; */
	transform: translate(25%, -25%);
}

.open-filters-button.button:hover{
	background:var(--copper-color);
}

.holiday-offers-sorting-filtering .aurora-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.holiday-offers-filters {
	width: 330px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: #fff;
	padding: .25rem;
	border-radius: 2px;
	filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

.holiday-offers-filters h3 {
	margin: 0;
	color: var(--pastel-blue-color);
	text-transform: none;
}
.holiday-offers-filters input[type="range"] {
	-webkit-appearance: none;
	width: 100%;
	height: 8px;
	background: var(--copper-color);
	border-radius: 5px;
	outline: none;
	margin: 10px 0 0 0;
}

.holiday-offers-filters input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* WebKit browsers */
  appearance: none;
  width: 21px;
  height: 21px;
  background: #fff;
  border-radius: 25px;
  cursor: pointer;
  border: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  box-shadow: 0 0 0 2px var(--copper-color);
}

.holiday-offers-filters input[type="range"]::-moz-range-thumb {
	width: 21px;
	height: 21px;
	background: #fff;
	border-radius: 25px;
	cursor: pointer;
	border: none;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
	box-shadow: 0 0 0 2px var(--copper-color);
}

.holiday-offers-filters .form-group{
	margin:0;
	padding: 1rem 0.5rem;
}

.holiday-offers-filters .form-group.border-bottom{
	border-bottom:1px solid #f2f2f2;
}

.holiday-offers-filters .form-group.range{
	display: flex;
	flex-direction: column;
}
.holiday-offers-filters .form-group.aurora-row{
	display: flex;
	flex-direction: row;
	gap:10px;
}
.holiday-offers-filters .form-group.aurora-row input{
	width:100%;
}
.holiday-offers-filters .form-group.range label{
	display:block;
}

.holiday-offers-filters .form-group.search {
	background-color: var(--light-grey-color-lighter);
	padding: 15px;
	border-radius: 12px;
	display:flex;
	justify-content:space-between;
}

.holiday-offers-filters .form-group.search button {
	background: var(--accent-color);
	border: none;
	padding: 0.5em;
	color: #fff;
	text-transform: uppercase;
	border-radius: 5px;
}
.holiday-offers-filters label {
	font-weight: 500;
	font-size: 14px;
	display: inline-block;
	margin-bottom: 5px;
}
.holiday-offers-filters input[type = "text"],
.holiday-offers-filters input[type = "number"] {
	padding: 10px;
	border-radius: 5px;
	border: none;
}

.holiday-offers-filters select{
	width:100%;
}

.holiday-offers-filters select,
.holiday-offers-sorting-filtering select {
	border: none;
	padding: 10px 35px 10px 15px;
	border-radius: 3px;
	/* font-family: var(--paragraph-font); */
	font-weight: 500;
	background: var(--pastel-blue-color);
	color: #fff;
	appearance: none;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="0,0 10,0 5,5" style="fill:%23fff"/></svg>');
	background-repeat: no-repeat;
	background-position: right 15px top 16px;
	background-size: 10px;
	margin: 1px 0;
	/* height: 40px; */
	font-size: .875rem;
}

.holiday-offers-filters select:disabled {
	background-color: #e0e0e0; /* Light gray background */
	color: #999999; /* Gray text */
	cursor: not-allowed; /* Change the cursor to indicate it's disabled */
}
.holiday-offers-filters .form-group.checkbox{
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	padding: 15px;
}


.holiday-offers-filters .form-group.checkbox label{
	margin:0;
}
.holiday-offers-filters .form-group.checkbox p{
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}
.holiday-offers-filters .checkbox input{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.holiday-offers-filters .checkbox .checkmark {
	display: block;
	height: 25px;
	width: 45px;
	cursor: pointer;
	border: none;
	position: relative;
	border-radius: 14px;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.25);
}
.holiday-offers-filters .checkbox input ~ .checkmark {
	background-color: var(--light-grey-color);
	transition: all 0.3s;
}

.holiday-offers-filters .checkbox input:checked ~ .checkmark {
  background-color: var(--copper-color);
  /*box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);*/
}
.holiday-offers-filters .checkmark:after {
  content: "";
  position: absolute;
  display: block;
  width:21px;
  height:21px;
  background:#fff;
  border-radius: 50%;
  top:2px;
  left:2px;
  transition:all 0.2s;
  box-shadow:0 0 2px rgba(0,0,0,0.2), 0 0 4px rgba(0,0,0,0.2) inset;
}

.holiday-offers-filters .checkbox input:checked ~ .checkmark:after {
  left:22px
}

section.holiday-offers-list{
	padding:150px 0 50px 0;
}

section.holiday-offers-list .holiday-offer-list-messages{
	text-align:center;
}

section.holiday-offers-list p.no-results-message {
	padding: 20px;
	background: #eee;
	margin: 20px;
	border-radius: 3px;
	color: var(--copper-color);
}

section.holiday-offers-list div.number-offers {
	position: relative;
	background: var(--copper-color);
	padding: 5px 20px;
	border-radius: 3px;
	height: 40px;
	display: flex;
	align-items: center;
	min-width: 180px;
	transition: all 0.3s;
	justify-content: center;
}
section.holiday-offers-list div.number-offers:empty,
section.holiday-offers-list div.number-offers.loading
{
	background:var(--light-grey-color-darker);
}
section.holiday-offers-list div.number-offers.mobile{
	display:none;
}
section.holiday-offers-list div.number-offers.loading:before{
	content:'\f110';
	color:#fff;
	animation: spin 1s infinite linear;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-family:'Font Awesome 5 Pro';
	font-size:24px;
}
section.holiday-offers-list p.number-offers-found {
	font-weight: 500;
	display: flex;
	text-align: center;
	font-size: 14px;
	margin: 0;
	align-items: center;
	justify-content: center;
	color: #fff;
}
@media screen and (max-width:540px){
	section.holiday-offers-list div.number-offers.mobile {
		display: flex;
		margin-top: 5px;
		width: 100%;
		justify-content: center;
	}
	section.holiday-offers-list div.number-offers.desktop{
		display:none;
	}
}
section.holiday-offers-list .list-wrapper{
	margin: 0 auto;
	max-width:1200px;
}
section.holiday-offers-list .list-wrapper.full-width{
	max-width:none;
}

section.holiday-offers-list .pagination-controls,
section.holiday-offer-list-block .pagination-controls
{
	display: flex;
	justify-content: center;
}

/* OUTER WRAPPER */
section.holiday-offers-list div.holiday-offer-list-container {
  display: flex;
  position: relative;
  height: 100%; /* Ensures full height of the container */
  width:100%;
}

section.holiday-offers-list .holiday-offer-list-container.show-filters{
	/*overflow:hidden;*/
}

/* Filters wrapper */
section.holiday-offers-list div.holiday-offer-filters-wrapper {
	width: 350px;
	padding: 10px;
	position: fixed;
	transition: transform 0.3s ease, height 0.3s ease;
	margin-left: -350px;
	z-index:10;
}

/* Results wrapper */
section.holiday-offers-list div.holiday-offer-list-results-wrapper {
  width: 100%; /* Keep it 100% width */
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden; /* Crop the right side when filters are open */
  container-type: inline-size;
}
/* PLAIN BLOCK VERSION */


/* Open state */
div.holiday-offer-list-container.show-filters div.holiday-offer-filters-wrapper {
  transform: translateX(350px);
}

div.holiday-offer-list-container.show-filters div.holiday-offer-list-results-wrapper {
	/*transform: translateX(370px);*/
	/*width: calc(100% - 370px);*/
}
section.holiday-offers-list div.holiday-offer-list-results-wrapper.filters-open ul.holiday-offer-list-results{
	opacity:0.75;
	filter:blur(4px);
} 

ul.holiday-offer-list-results {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	justify-content: center;
	width: 100vw;
	width: calc(100vw - var(--scrollbar-width, 15px)); /* Adjust the 15px to the average scrollbar width */
	position: relative;
	transition: all 0.3s;
	padding:0;
}
div.holiday-offer-list-results-wrapper.loading ul.holiday-offer-list-results{
	height:75vh;
	overflow:hidden;
}
div.holiday-offer-list-results-wrapper.loading ul.holiday-offer-list-results li{
	opacity:0;
}
div.holiday-offer-list-results-wrapper.loading:before {
	content: '\f110';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100;
	font-family: 'Font Awesome 5 Pro';
	font-size: 60px;
	transform: translate(-50%, -50%);
	animation: spin 1s infinite linear;
	color:var(--copper-color);
}

@keyframes spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

ul.holiday-offer-list-results li{
	background-color: #fff;
	margin: 15px;
	position: relative;
	padding-bottom: 60px;
	overflow: hidden;
	transition: all 0.3s;

}

ul.holiday-offer-list-results li a{

}
ul.holiday-offer-list-results li.filtered{
	display:none;
}
ul.holiday-offer-list-results li .image{
	overflow:hidden;
}

ul.holiday-offer-list-results li .image .wrapper{
	position:relative;
}
ul.holiday-offer-list-results li .image a{
	display:block;
}
ul.holiday-offer-list-results li .image img{
	display:block;
	width:100%;
	height:auto;
	transition:all 1s;
}
ul.holiday-offer-list-results .image a:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.15);
	transition:all 0.3s;
}
ul.holiday-offer-list-results .image:hover a:after{
	background:rgba(0,0,0,0.5);
}

ul.holiday-offer-list-results li .info{
	width:100%;
}
ul.holiday-offer-list-results li .special-offer-info{
	padding: 1rem;
	text-align:left;
}
ul.holiday-offer-list-results li .info h3 {
	font-size: 1.625em;
	margin: 0;
	color: var(--dark-background-color);
	font-weight: 400;
	line-height: 1.25em;
}

ul.holiday-offer-list-results li .info p.hotel-city{
	margin: 0;
	font-family: var(--title-font);
	text-transform: uppercase;
	font-size: 0.875em;
	color: var(--copper-color);
	font-weight: 500;
	letter-spacing:0.05em;
}

ul.holiday-offer-list-results li p.offer-expires {
	margin: 0;
	font-size: 0.75em;
	display: flex;
	align-items: center;
	color: #fff;
	background-color: rgba(0,0,0,0.2);
	padding: 0.5rem 1rem;
	justify-content: flex-start;
	position: absolute;
	top: 10px;
	left: 10px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,0.5);
}

ul.holiday-offer-list-results li p.offer-expires i{
	color:#fff;
}
ul.holiday-offer-list-results li p.description{
	margin: 10px 0;
	font-size: 0.875em;
	font-style: italic;
	font-family: var(--title-font);
	color:var(--dark-background-color);
	
}
ul.holiday-offer-list-results li p strong{
}
ul.holiday-offer-list-results li .aurora-row{
	display:flex;
}

ul.holiday-offer-list-results li .col{
	margin: 0.5rem 0;

}

ul.holiday-offer-list-results li .col.grid-row {
	display: grid;
	align-items: center;
	grid-template-columns: 30px 1fr;
}

ul.holiday-offer-list-results li i{
	color: var(--mid-grey-font-color);
	display: block;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	margin-right: 5px;
	font-size:18px
}
ul.holiday-offer-list-results li p.rating{
	color: var(--copper-color);
	margin: 0 !important;
}
ul.holiday-offer-list-results li p.rating i{
	display: inline-block;
	font-size: 8px;
	width: initial;
	height: auto;
	line-height:1;
	margin: 0;
	color:var(--copper-color);
}

ul.holiday-offer-list-results li p.price {
	font-size: 0.75rem;
	text-align: right;
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	margin: 0;
}

ul.holiday-offer-list-results li p.price span {
	font-size: 0.75rem;
}

ul.holiday-offer-list-results li p.price strong{
	font-size:28px;
	color:var(--copper-color);
	font-weight: 800;
	font-family:var(--title-font);
}
ul.holiday-offer-list-results li svg{
	width:20px;
	height:20px;
	margin-right:10px;
	fill:var(--light-grey-color-darker);
}
ul.holiday-offer-list-results li a.btn {
	position: absolute;
	bottom: 1rem;
}
ul.holiday-offer-list-results li .select-airport{
	position:relative;
}
ul.holiday-offer-list-results li select.airport-select {
	padding: 10px 35px 10px 40px;
	font-family: var(--paragraph-font);
	font-weight: 500;
	color: var(--mid-grey-font-color);
	appearance: none;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="0,0 10,0 5,5" style="fill:%23ccc"/></svg>');
	background-repeat: no-repeat;
	background-position: right 15px top 16px;
	background-size: 10px;
	position:relative;
	max-width:245px;
	font-size:0.75rem;
}

ul.holiday-offer-list-results li .select-airport:before {
	content: '\f5b0';
	font-family: 'Font Awesome 5 Pro';
	pointer-events: none;
	color: var(--mid-grey-font-color);
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 10px;
	font-weight: 200;
	transform: translateY(-50%);
}

@container (max-width: 2000px) {
	ul.holiday-offer-list-results {
		grid-template-columns: repeat(4, 1fr);
	}
}
@container (max-width: 1280px) {
	ul.holiday-offer-list-results {
		grid-template-columns: repeat(3, 1fr);
	}
}
@container (max-width: 920px) {
	ul.holiday-offer-list-results {
		grid-template-columns: repeat(2, 1fr);
	}
}
@container (max-width: 640px) {
	ul.holiday-offer-list-results {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media screen and (max-width:1600px){
	.holiday-offers-sorting-filtering{
		margin:10px 10px 0 10px;
	}
	ul.holiday-offer-list-results li{
		margin:10px;
	}
	ul.holiday-offer-list-results li .info h3 {
		font-size: 1.5em;
	}
}


@media screen and (max-width:640px){

	section.holiday-offers-list div.holiday-offer-list-container{
		display:block;
	}
	
	section.holiday-offers-list div.holiday-offer-filters-wrapper{
		margin-left:initial;
		padding:0;
		width:100%;
		height:0px;
		overflow:hidden;
		
	}
	
	section.holiday-offers-list .holiday-offers-filters {
		width: calc(100% - 20px);
		position: relative;
		top: 0;
		margin: 10px;
		background: none;
		padding: 0;
		filter: none;
		gap: 5px;
	}
	
	div.holiday-offer-list-container.show-filters div.holiday-offer-list-results-wrapper {
		transform: none;
		width: auto;
	}
	
	section.holiday-offers-list div.holiday-offer-list-results-wrapper.filters-open ul.holiday-offer-list-results{
		opacity:1;
		filter:none;
	}
	div.holiday-offer-list-container.show-filters div.holiday-offer-filters-wrapper{
		transform: none;
	}
	.open-filters-button.close{
		display:none;
	}
}

/* HOLIDAY OFFER */

section.holiday-offer-details div.departure-airport {
	padding: .875rem;
	border-radius: 5px;
	/* box-shadow: 0 0 4px #dddcdc; */
	background: rgba(255, 255, 255, 0.5);
	margin: 0 0 1rem 0;
}

section.holiday-offer-details div.departure-airport p{
	font-weight: 600;
	margin:0;
}

section.holiday-offer-details div.departure-airport i{
	color: var(--copper-color);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

section.holiday-offer-details div.departure-airport .airport-select {
	border-top: 1px solid #eee;
	padding: .875rem 0 0 0;
}

section.holiday-offer-details div.departure-airport .airport-select select {
	width: 100%;
	color: #fff;
	padding: .5rem;
	border-radius: 5px;
	border: none;
	font-family: var(--paragraph-font);
	font-weight: 500;
	background: var(--pastel-blue-color-darker);
	appearance: none;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="0,0 10,0 5,5" style="fill:%23fff"/></svg>');
	background-repeat: no-repeat;
	background-position: right 15px top 16px;
	background-size: 10px;
	font-size: .875rem;
}

a.cta{
	width: 100%;
	border: 1px solid var(--copper-color);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-transform:uppercase;
	font-size:1.125rem;
	transition:all 0.3s;
	cursor:pointer;
	border-radius:5px;
}

a.cta:hover{
	background:#fff;
}

section.holiday-offer-details div.holiday-summary {
	padding: 1rem;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
}

section.holiday-offer-details ul.holiday-summary-list {
	list-style: none;
	margin:0;
	padding:0;
}

section.holiday-offer-details ul.holiday-summary-list li {
	position: relative;
	display: grid;
	grid-template-columns: 120px 1fr;
	margin: .75rem 0;
	font-size: .875rem;
}

section.holiday-offer-details ul.holiday-summary-list li:not(:last-of-type){
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}

section.holiday-offer-details div.single-price {
	background: var(--copper-color);
	padding: 1rem;
	border-radius: 3px;
	margin: 1rem 0;
	display:flex;
	flex-direction:column;
	text-align:center;
	align-items:center;
	color:#fff;
	font-size:1rem;
}

section.holiday-offer-details div.single-price span{
	color:#fff;
	text-transform:uppercase;
}

section.holiday-offer-details div.single-price span.x-small{
	font-size:0.625em;
}

section.holiday-offer-details div.single-price span.lrg {
	font-size: 2em;
	line-height: 1.125em;
}

section.holiday-offer-details div.single-price span strong{
	font-weight:600;
}