/*
 * Home (página 9382, Elementor). Só o que o Elementor não resolve pelos controles:
 * o card de quarto do Loop Carousel (área e preço vêm do shortcode [hw_room_card]) e os pontinhos dos carrosséis.
 */

/* ---------- Card de quarto (Loop Item "Card de quarto (home)") ---------- */

/* O item do loop recebe as classes do produto, e o CSS do tema dá margin-top:-80px a .product-type-ovacrs_car_rental. */
.hw-home-rooms .e-loop-item {
	margin-top: 0;
}

.hw-home-room__area .hw-pill {
	padding: 6px 16px;
	font-size: 16px;
}

.hw-home-room__price .hw-price--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.hw-home-room__price .hw-price__currency {
	font-size: 24px;
}

.hw-home-room__price .hw-price__value {
	font-size: clamp(72px, 8vw, 108px);
	line-height: 0.85;
}

.hw-home-room__price .hw-price__unit {
	padding-left: 48px;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1;
}

/* A foto ocupa toda a altura do card, ao lado do bloco preto. */
.hw-home-room__photo-box > .hw-home-room__photo,
.hw-home-room__photo-box > .hw-home-room__photo > .elementor-widget-container {
	flex-grow: 1;
	height: 100%;
}

.hw-home-room__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	min-height: inherit;
	object-fit: cover;
}

/* ---------- Barra de reserva (ova_room_search, seção .ova-search-style2) ---------- */

/*
 * O style-elementor.css do tema pinta o botão de branco com !important; no desktop ele perde para a regra
 * com ID do CSS do widget, mas abaixo de 1024px ganharia. Aqui o botão fica verde em largura total.
 */
@media (max-width: 1023px) {
	.ova-search-style2 .ova_search .style2.ovahotel_search .wrap-check-form .hotel_field.btn_search .btn_tran {
		justify-content: center;
		width: 100%;
		min-height: 56px;
		background: #ACCC0C !important;
		color: #000 !important;
		font-weight: 600;
		text-align: center;
		text-transform: uppercase;
	}
}

@media (max-width: 767px) {
	.ova-search-style2 .ova_search .style2.ovahotel_search .wrap-check-form .hotel_field.room_adults {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	/*
	 * Três camadas (.ova_search, .container, form) somavam 30px fora da caixa preta e sobravam ~11px dentro dela.
	 * Aqui a caixa fica a 20px da borda, alinhada ao texto do hero, com ~15px de respiro interno.
	 * O CSS do ova-hotel (até 768px) põe esses paddings com !important, por isso o !important aqui.
	 */
	.ova-search-style2 .ova_search {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.ova-search-style2 .ova_search > .container {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}

	.ova-search-style2 .ova_search form.style2.ovahotel_search {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.ova-search-style2 .ova_search .style2.ovahotel_search .wrap-check-form {
		padding-right: 16px !important;
		padding-left: 16px !important;
	}

	.ova-search-style2 .ova_search .style2.ovahotel_search .wrap-check-form .hotel_field {
		padding-right: 14px !important;
		padding-left: 14px !important;
	}

	/* Botão colado nas laterais e no fundo da caixa; o overflow:hidden da caixa arredonda os cantos de baixo. */
	.ova-search-style2 .ova_search .style2.ovahotel_search .wrap-check-form {
		padding-bottom: 0 !important;
	}

	.ova-search-style2 .ova_search .style2.ovahotel_search .wrap-check-form .hotel_field.btn_search {
		flex: 0 0 calc(100% + 2px) !important;
		max-width: calc(100% + 2px) !important;
		margin: 0 -1px;
		padding: 30px 0 0 !important;
	}

	.ova-search-style2 .ova_search .style2.ovahotel_search .wrap-check-form .hotel_field.btn_search .btn_tran {
		margin: 0;
		border-radius: 0 !important;
	}
}

/* O CSS do widget reduz todo span a 13px no celular; o número de hóspedes fica com o mesmo peso dos dias, como na busca. */
@media (max-width: 768px) {
	.ova-search-style2 .ova_search .ovahotel_search .wrap-check-form .hotel_field.room_adults .select2-selection__rendered {
		height: 50px;
		font-size: 36px !important;
		font-weight: 700;
		line-height: 40px;
	}
}

/* ---------- Pontinhos dos carrosséis (classe hw-dots no widget) ---------- */

/*
 * Posição dos pontinhos, independente da ordem em que os CSS chegam. O Swiper (left:0; width:100%) e o carrossel aninhado
 * do Elementor Pro (left:50%; translate(-50%); width:max-content) têm a mesma especificidade: quando o do Swiper vinha
 * depois, os pontos ficavam deslocados para a esquerda. Aqui vale sempre a regra do Elementor, com especificidade maior.
 */
.elementor-widget-n-carousel .swiper-pagination-bullets.swiper-pagination-horizontal {
	left: calc(var(--e-n-carousel-dots-horizontal-position) + var(--e-n-carousel-dots-horizontal-offset));
	width: max-content;
	transform: translate(calc(var(--e-n-carousel-dots-horizontal-transform) * var(--e-n-carousel-horizontal-transform-modifier)), var(--e-n-carousel-dots-vertical-transform));
}

/* Loop Carousel (acomodações) e cards .hw-xp: centrados no próprio container. */
.elementor-widget-loop-carousel .swiper-pagination-bullets.swiper-pagination-horizontal,
.hw-xp > .swiper-pagination-bullets.swiper-pagination-horizontal {
	left: 0;
	width: 100%;
	transform: none;
	text-align: center;
}

.hw-dots .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border: 1px solid #8c8c86;
	background: transparent;
	opacity: 1;
}

.hw-dots .swiper-pagination-bullet-active {
	background: #8c8c86;
}

.hw-dots--light .swiper-pagination-bullet {
	border-color: #fff;
}

.hw-dots--light .swiper-pagination-bullet-active {
	background: #fff;
}

@media (max-width: 767px) {
	/* As quebras de linha dos títulos e textos (<br class="hw-br">) reproduzem o layout de desktop; no celular o texto corre livre. */
	.elementor-9382 .hw-br {
		display: none;
	}

	.hw-home-room__price .hw-price__value {
		font-size: 72px;
	}

	.hw-home-room__price .hw-price__unit {
		padding-left: 36px;
		font-size: 28px;
	}
}

/* ---------- Cards "Seu fim de semana cheio de possibilidades" (containers do Elementor) ---------- */

/*
 * Estrutura no Elementor: container .hw-xp.swiper > container .swiper-wrapper > containers .swiper-slide.hw-xp-card,
 * cada um com imagem (.hw-xp-card__photo), título .hw-xp-card__category, .hw-xp-card__title e texto .hw-xp-card__text.
 * home-cards.js liga o Swiper; no editor e sem JS os cards ficam em fila rolável.
 * Medidas do layout (card 760 × 1560, foto até 845 px) em cqw, que acompanham a largura do card.
 */
.elementor .hw-xp.e-con {
	display: block;
	overflow: hidden;
	padding: 0 0 50px;
}

.elementor .hw-xp .swiper-wrapper.e-con {
	display: flex;
	flex-direction: row;
	/* No celular o Elementor põe os containers em "wrap": os cards empilhavam e o carrossel sumia. */
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
}

/* Fila rolável enquanto o Swiper não está ligado (editor ou sem JS). */
.elementor .hw-xp:not(.swiper-initialized) .swiper-wrapper.e-con {
	overflow-x: auto;
}

.elementor .hw-xp .swiper-slide.hw-xp-card {
	--gap: 0px;
	--padding-top: 0px;
	--padding-bottom: 24px;
	--padding-left: 0px;
	--padding-right: 0px;
	/*
	 * No celular o Elementor também põe o card em "wrap": quando o texto passava da altura do card, ele ia para uma
	 * segunda coluna, no topo, atrás da foto, e sumia. Sem quebra o card cresce, como no desktop.
	 */
	--flex-wrap: nowrap;
	--flex-wrap-mobile: nowrap;
	flex-wrap: nowrap;
	container-type: inline-size;
	flex: 0 0 calc((100% - 40px) / 3);
	min-width: 0;
	margin-right: 20px;
	/* Formato do card do layout (327 × 537). Com clip (e não hidden), um texto mais longo faz o card crescer. */
	aspect-ratio: 327 / 537;
	height: auto;
	border-radius: 20px;
	overflow: clip;
	background: #000;
}

/* A foto desce até 62% do card, por trás do texto; só o fim dela escurece (degradê abaixo). */
.hw-xp-card .hw-xp-card__photo {
	position: absolute;
	inset: 0 0 auto;
	height: 62%;
	margin: 0;
}

.hw-xp-card .hw-xp-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A foto se funde com o preto onde começa o texto. */
.hw-xp-card .hw-xp-card__photo::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 45%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) 55%, #000);
}

.hw-xp-card .hw-xp-card__category,
.hw-xp-card .hw-xp-card__title,
.hw-xp-card .hw-xp-card__text {
	margin: 0;
	padding: 0 10cqw;
	color: #fff;
	font-family: "Montserrat", sans-serif;
}

/* Como a foto saiu do fluxo, o texto começa sobre o fim dela, como no layout. */
.hw-xp-card .hw-xp-card__category,
.hw-xp-card .hw-xp-card__title,
.hw-xp-card .hw-xp-card__text {
	position: relative;
	z-index: 1;
}

.hw-xp-card .hw-xp-card__category {
	margin-top: 92cqw;
}

.hw-xp-card .hw-xp-card__category .elementor-heading-title {
	margin: 0;
	color: #fff;
	font-family: inherit;
	font-size: 5.8cqw;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.hw-xp-card .hw-xp-card__category .elementor-heading-title::before {
	content: "";
	display: block;
	width: 3.8cqw;
	height: 3.8cqw;
	margin-bottom: 3.4cqw;
	background: #b0c80e;
}

.hw-xp-card .hw-xp-card__title {
	margin-top: 9cqw;
}

.hw-xp-card .hw-xp-card__title .elementor-heading-title {
	margin: 0;
	color: #fff;
	font-family: inherit;
	font-size: 6.4cqw;
	font-weight: 400;
	line-height: 1.15;
}

.hw-xp-card .hw-xp-card__text {
	margin-top: 6.5cqw;
}

.hw-xp-card .hw-xp-card__text,
.hw-xp-card .hw-xp-card__text p {
	margin-bottom: 0;
	color: #fff;
	font-size: 4.3cqw;
	font-weight: 400;
	line-height: 1.33;
}

/*
 * Link "Ver cardápios" do card de gastronomia: o azul padrão dos links do tema não vale aqui, e margem, recuo e tamanho
 * acompanham a largura do card como os demais textos (no Elementor estão em px: 20 e 38, medidas do card no desktop).
 */
.elementor .hw-xp-card > .elementor-widget-heading:not(.hw-xp-card__category):not(.hw-xp-card__title) > .elementor-widget-container {
	position: relative;
	z-index: 1;
	margin: 5.3cqw 0 0;
	padding: 0 10cqw;
}

/* O Elementor faz o <a> herdar o tamanho (font-size: inherit), então o tamanho vai no título. */
.elementor .hw-xp-card > .elementor-widget-heading:not(.hw-xp-card__category):not(.hw-xp-card__title) .elementor-heading-title {
	font-size: 4.3cqw;
	line-height: 1.33;
}

.hw-xp-card .elementor-heading-title a {
	color: #ACCC0C;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	text-decoration: none;
}

.hw-xp-card .elementor-heading-title a:hover,
.hw-xp-card .elementor-heading-title a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.elementor .hw-xp .swiper-slide.hw-xp-card {
		flex-basis: calc((100% - 10px) / 2);
		margin-right: 10px;
	}
}

@media (max-width: 767px) {
	.elementor .hw-xp .swiper-slide.hw-xp-card {
		flex-basis: 87%;
	}
}

/* ---------- Galeria de abas: foto em carregamento ---------- */

/* Sem src o navegador mostra o texto alternativo (nome do arquivo) no lugar da foto; some até o Swiper carregá-la. */
.hw-home-gallery__carousel .swiper-slide-image.swiper-lazy:not(.swiper-lazy-loaded) {
	opacity: 0;
	color: transparent;
}

.hw-home-gallery__carousel .swiper-slide-image.swiper-lazy {
	transition: opacity 0.3s ease;
}