/*------ FILTERS --------*/
 
.ah_experiences_filters {
	margin-bottom: 40px;
}

.amh_experiences-content  .ah_experiences_filters .ah_experiences_filter_hotels span,
.amh_experiences-content  .ah_experiences_filters .ah_experiences_filter_categories span {
	display:inline-block;
	font-family: "Cera", sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	line-height: 1em;
	letter-spacing: 0.8px;
    padding: 8px 20px 8px 20px;
    margin-right: 12px;
	margin-bottom: 12px;
    color: #1A1A1A;
	cursor: pointer;
	
	transition: all 0.2s linear;
}

.amh_experiences-content .ah_experiences_filters .ah_experiences_filter_hotels span.ah_experiences_filter_hotels_all,
.amh_experiences-content .ah_experiences_filters .ah_experiences_filter_categories span.ah_experiences_filter_categories_all {
	color: #ffffff;
	background: #22475E;
}

.amh_experiences-content .ah_experiences_filters .ah_experiences_filter_hotels span.ah_experiences_filter_hotels_all:hover,
.amh_experiences-content .ah_experiences_filters .ah_experiences_filter_categories span.ah_experiences_filter_categories_all:hover {
	background: #0D1D27;
}

.amh_experiences-content  .ah_experiences_filters .ah_experiences_filter_hotels span.ah_experiences_filter_hotels_hotel,
.amh_experiences-content .ah_experiences_filters .ah_experiences_filter_categories span.ah_experiences_filter_categories_category {
	border: 1px solid #ECE6E1;
} 

.amh_experiences-content .ah_experiences_filters .ah_experiences_filter_hotels span.ah_experiences_filter_hotels_hotel:hover,
.amh_experiences-content .ah_experiences_filters .ah_experiences_filter_categories span.ah_experiences_filter_categories_category:hover {
	background: #F9F7EF;
}

.amh_experiences-content .ah_experiences_filters .ah_experiences_filter_hotels span.ah_experiences_filter_hotels_hotel.active,
.amh_experiences-content .ah_experiences_filters .ah_experiences_filter_categories span.ah_experiences_filter_categories_category.active {
	color: #22475E;
	background: #22475E17;
	border-color: #22475E;
}



/*------ GRID experiences --------*/
 
.amh_experiences-content .ah_experiences {
 	display: grid;
	grid-gap: 40px;
	grid-template-columns: repeat(3, 1fr);
 }



/*------ BOXES experiences --------*/

.amh_experiences-content .ah_experiences_experience .ah_experiences_experience_content {
	display: flex;
	position: relative;
	flex-direction: column;
}

.amh_experiences-content .ah_experiences_experience_content h2, .amh_experiences-content .ah_experiences_experience_content h3, .amh_experiences-content .ah_experiences_experience_content h4 {
	order: 2;
	font-family: "Butler", Sans-serif;
	font-size: 30px;
	line-height: 1em;
	color: #22475E !important;
	margin: 0;
}

.amh_experiences-content .ah_experiences_experience .ah_experiences_experience_content > p {
	order: 1;
	display: inline-flex;
	width: fit-content;
	font-size: 16px;
	line-height: 1.1em;
	background: #ECE6E1;
	color: #22475E;
	padding: 6px 20px;
	margin-top: -16px;
	margin-bottom: 20px;
}


/*------ MODAL --------*/

.modal_open {
	overflow: hidden;
}

.ah_experience_modal {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #22475eb0;
	padding: 0;
	overflow: auto;
	z-index: 1001;
	
	transform: translateY(100vh);
	
	transition: transform .4s ease-in-out,-webkit-transform .4s ease-in-out;
}

.ah_experience_modal.load {
	display: grid;
}

.ah_experience_modal.open {
	transform: translateY(0);
}

.ah_experience_modal .ah_experience_modal_container {
	max-width: 800px;
    letter-spacing: 0;
    
	padding: 20px;
}

.ah_experience_modal .ah_experience_modal_container .ah_experience_modal_container_inner {
	position: relative;
	background: #ffffff;
}

.ah_experience_modal .ah_experience_modal_close {
	width: 40px;
	height: 40px;
    position: absolute;
    top: 18px;
    right: 20px;
    color: #ffffff;
	cursor: pointer;
	background-image: url("https://dev.amarehotels.com/wp-content/uploads/2025/09/ah-icon-close.svg");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
	border-radius: 100%;
	z-index: 2;
	transform:rotate(0);
	
	transition: all 0.5s;
}

.ah_experience_modal .ah_experience_modal_close:hover {
	transform:rotate(360deg);
}


/*---- modal - CONTENT ----*/

.ah_experience_modal_content {
	padding: 0 40px 40px;
}


 /*-- modal - content - TITLE --*/
 
.ah_experience_modal .ah_experience_modal_title {
	font-family: "Butler", Sans-serif;
    font-size: 40px;
	line-height: 1em;
	padding: 18px 70px 18px 18px;
	background: #fff;
	color: #22475E;
 }


 /*-- modal - content - SUBTITLE / PRICE --*/

.ah_experience_modal .amh_experience_modal_content_subtitle,
.ah_experience_modal .amh_experience_modal_content_price {
	background: #ECE6E1;
	padding: 6px 20px;
	margin-top: -20px;
	margin-bottom: 30px !important;
	margin-left: -40px;
}

.ah_experience_modal .amh_experience_modal_content_subtitle span,
.ah_experience_modal .amh_experience_modal_content_price span {
	font-size: 20px;
	text-transform: uppercase;
	line-height: 1em;
	letter-spacing: 2px;
}


/*-- modal - content - DESCRIPTION --*/

.ah_experience_modal .amh_experience_modal_content_description { 
	font-size: 21px;
	line-height: 1.2em;
	padding-bottom: 18px;
}

/*-- modal - content - LOGO HOTEL --*/

.ah_experience_modal_hotels {
	display: flex;
	justify-content: right;
	align-items: center;
	
}

.ah_experience_modal_hotels .ah_experience_modal_hotel {
    width: 120px;
    height: 120px;
	background: #ffffff;
	background-size: 80%;
	background-position: center center;
	background-repeat: no-repeat;
	margin: -180px 40px 0 0;
	box-shadow: 0 0 3px -1px rgb(0 0 0 / 53%);
	z-index: 1;
}

.ah_experience_modal_hotels .ah_experience_modal_hotel[data-hotel="amare-marbella"] {
	background-image: url('https://dev.amarehotels.com/wp-content/uploads/2025/09/logo-amare-marbella-vertical.svg');
}

.ah_experience_modal_hotels .ah_experience_modal_hotel[data-hotel="amare-ibiza"] {
	background-image: url('https://dev.amarehotels.com/wp-content/uploads/2025/09/logo-amare-ibiza-vertical.svg');
}

.ah_experience_modal_hotels .ah_experience_modal_hotel[data-hotel="amare-sancti-petri"] {
	background-image: url('https://dev.amarehotels.com/wp-content/uploads/2025/09/logo-amare-sancti-petri-vertical.svg');
}