/**
 * Chalets Grid Listing Styles
 * Copied from theme to ensure compatibility when theme is deactivated
 */

/* Z-index quand filtre sticky - classe add_z_index_sticky sur la section */
.add_z_index_sticky.chalet-sticky-z-active {
	z-index: 10000 !important;
	position: relative !important;
}

/* Filtre dispo — parité listing / dispo_home (widget Elementor) */
.elementor-widget-chalets-grid,
.elementor-widget-chalets-grid .dispo-form.dispo-listing {
	overflow: visible;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing {
	overflow-x: hidden;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .dispo-input {
	box-sizing: border-box;
	min-width: 0;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .dispo-input.prs.infos-wrapper {
	overflow-x: hidden;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .dispo-value.ic,
.elementor-widget-chalets-grid .dispo-form.dispo-listing .trigger-filters .ic.dispo-value {
	font-size: 18px;
	display: block;
	text-align: center;
	margin-top: 5px;
	line-height: 1;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .ic-calendar {
	font-size: 25px;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .trigger-filters-mobile .dispo-label {
	order: 2;
	margin: 0;
	font-size: 12px;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .trigger-filters-mobile .dispo-value {
	margin-top: 0;
	margin-right: 6px;
}

/* Bouton « Voir les disponibilités » — animation :before comme dispo_home */
.elementor-widget-chalets-grid .dispo-form.dispo-listing .btn.btn-default {
	color: #000 !important;
	background-color: #8d785c !important;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .btn.btn-default:before {
	content: '';
	width: 0;
	height: 100%;
	position: absolute;
	background-color: #b09e86;
	top: 0;
	left: 0;
	border-radius: inherit;
	z-index: 0;
	transition: width 0.3s ease;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .btn.btn-default:hover:before,
.elementor-widget-chalets-grid .dispo-form.dispo-listing .btn.btn-default:focus:before {
	width: 100%;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .btn.btn-default span {
	position: relative;
	z-index: 1;
}

.elementor-widget-chalets-grid .dispo-form.dispo-listing .filters .filters-inner .row {
	--bs-gutter-x: 0;
	--bs-gutter-y: 0;
	gap: 0;
}

.dispo-form .filters .filters-inner > .row > .col-md-3.fs-12:first-child {
	padding-left: 8px;
}

/* Options (1 ou 2 max.) — parité dispo_home / listing-chalets.js */
.dispo-form .filters-inner .form-check.filter-option-at-max,
.dispo-form .filters-inner input[type="checkbox"]:not(.cats-filters):disabled + .form-check-label {
	opacity: 0.5;
	cursor: default;
}

.dispo-form .filters-inner input[type="checkbox"]:not(.cats-filters):disabled {
	pointer-events: none;
}

/*
 * Le thème réduit .dispo-listing à 160px (1024–1520). La home garde 260px.
 * On annule cette réduction dans le widget pour coller au shortcode dispo_home.
 */
@media (min-width: 1024px) and (max-width: 1520px) {
	.elementor-widget-chalets-grid .dispo-form.dispo-listing .dispo-input {
		width: 260px;
	}

	.elementor-widget-chalets-grid .dispo-form.dispo-listing .dispo-input.prs {
		width: auto;
	}
}

/* Desktop étroit : même logique que .form-dispo-home (_form_dispo.scss) */
@media (max-width: 1365px) {
	.elementor-widget-chalets-grid .dispo-form.dispo-listing form > .d-md-flex {
		flex-wrap: wrap;
		justify-content: center;
	}

	.elementor-widget-chalets-grid .dispo-form.dispo-listing form > .d-md-flex .dispo-input {
		margin-bottom: 20px;
	}
}

@media (min-width: 1024px) and (max-width: 1365px) {
	.elementor-widget-chalets-grid .dispo-form.dispo-listing .filters.on_desktop {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* Bouton Recherche mobile — parité .listing_chalets .filter_chalet_mobile */
.elementor-widget-chalets-grid .filter_chalet_mobile.elementor-mobile-filter-btn,
#open-filter-chalets-grid,
a#open-filter-chalets-grid,
.filter_chalet_mobile.elementor-mobile-filter-btn {
	display: none !important;
}

@media (max-width: 1023px) {
	/* Formulaire inline masqué : le bouton ouvre l’offcanvas dispo_mobile */
	.elementor-widget-chalets-grid .dispo-form.dispo-listing {
		display: none !important;
	}

	.elementor-widget-chalets-grid .filter_chalet_mobile.elementor-mobile-filter-btn,
	.elementor-widget-chalets-grid .sticky-wrapper .filter_chalet_mobile.elementor-mobile-filter-btn,
	#open-filter-chalets-grid,
	a#open-filter-chalets-grid,
	.filter_chalet_mobile.elementor-mobile-filter-btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: calc(100% - 60px);
		max-width: 260px;
		margin: 17px auto;
		padding: 10px 20px;
		border-radius: 10px;
		cursor: pointer;
		font-family: 'Montserrat', sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-align: center;
		background-color: #e8e2d2 !important;
		color: #8d785c !important;
		text-decoration: none;
		box-sizing: border-box;
	}

	.elementor-widget-chalets-grid .filter_chalet_mobile.elementor-mobile-filter-btn .ic.dispo-value,
	.elementor-widget-chalets-grid .sticky-wrapper .filter_chalet_mobile.elementor-mobile-filter-btn .ic.dispo-value {
		font-size: 18px;
		line-height: 1;
		margin-right: 15px;
		margin-top: 0;
		flex-shrink: 0;
		display: inline-block;
	}

	.elementor-widget-chalets-grid .sticky-wrapper.is-sticky .filter_chalet_mobile.elementor-mobile-filter-btn {
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Datepicker - z-index au-dessus du sticky, position via JS pour sticky filter */
body:has(.elementor-chalets-grid) #ui-datepicker-div {
	z-index: 9999999999 !important;
}
@media (max-width: 767px) {
	body:has(.elementor-chalets-grid) #ui-datepicker-div {
		left: 35px !important;
		width: calc(100vw - 70px) !important;
		right: 36px !important;
	}
}

.listing-chalets {
	padding-top: 25px;
	padding-bottom: 140px;
}

.listing-chalets .found-post-text {
	font-size: 24px;
	font-weight: 600;
	color: #fff;
	padding-bottom: 25px;
}

@media (max-width: 575px) {
	.listing-chalets .found-post-text {
		font-size: 18px;
	}
}

.nos_chalet_listing_placeholder {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.nos_chalet_listing_items {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	width: 100%;
	justify-content: center;
}

.nos_chalet_listing_items > * {
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-top: var(--bs-gutter-y);
}

@media (max-width: 767px) {
	.nos_chalet_listing_items > * {
		width: 100%;
	}
}

.chalet-item-wrap {
	position: relative;
}

.chalet-item-wrap.col-md-4 {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

@media (max-width: 991px) {
	.chalet-item-wrap.col-md-4 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media (max-width: 767px) {
	.chalet-item-wrap.col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.chalet-item {
	position: relative;
}

.chalet-image-wrap {
	position: relative;
}

.chalet-image {
	position: relative;
	overflow: hidden;
}

.chalet-image-item {
	position: relative;
	background: #e8e8e8;
	min-height: 180px;
}

.chalet-image-item img {
	width: 100%;
	height: auto;
	display: block;
}

/* Pagination Styles */
.listing-chalets .ajax-pagination {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding-top: 1rem;
	position: relative;
	transition: all 0.35s;
	margin-bottom: 2rem;
}

.listing-chalets .ajax-pagination.loading::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
}

/* Loading states - override theme styles */
.nos_chalet_listing_placeholder.loading .chalet-item-wrap .chalet-item::before {
	display: block !important;
}

.nos_chalet_listing_placeholder.loading .chalet-item-wrap .chalet-item::after {
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 101 !important;
}

/* Hide loading when class is removed */
.nos_chalet_listing_placeholder:not(.loading) .chalet-item-wrap .chalet-item::before {
	display: none !important;
}

.nos_chalet_listing_placeholder:not(.loading) .chalet-item-wrap .chalet-item::after {
	opacity: 0 !important;
	visibility: hidden !important;
	z-index: -1 !important;
}

.listing-chalets .ajax-pagination .pagination-prev,
.listing-chalets .ajax-pagination .pagination-next {
	display: flex;
	width: 36px;
	height: 36px;
	background-color: #8d785c;
	border-radius: 100%;
	font-size: 0.75rem;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.listing-chalets .ajax-pagination .pagination-prev:hover,
.listing-chalets .ajax-pagination .pagination-next:hover {
	opacity: 1;
	background-color: #b09e86;
}

.listing-chalets .ajax-pagination .pagination-prev.disabled,
.listing-chalets .ajax-pagination .pagination-next.disabled {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

.listing-chalets .ajax-pagination .pagination-prev {
	padding-right: 3px;
	margin-right: auto;
}

.listing-chalets .ajax-pagination .pagination-next {
	padding-left: 3px;
	margin-left: auto;
}

.listing-chalets .ajax-pagination .pagination-numbers {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}

.listing-chalets .ajax-pagination .pagination-numbers .pagination-number {
	display: block;
	visibility: hidden;
	opacity: 0;
	padding: 0;
	font-size: 0;
	font-weight: 600;
	color: #fff;
	transition: all 0.35s;
	text-decoration: none;
	margin: 0 5px;
}

.listing-chalets .ajax-pagination .pagination-numbers .pagination-number.visible {
	font-size: 1.3rem;
	visibility: visible;
	padding: 3px 8px;
	opacity: 1;
}

.listing-chalets .ajax-pagination .pagination-numbers .pagination-number.current {
	text-decoration: underline;
	cursor: default;
}

.listing-chalets .ajax-pagination .pagination-numbers .pagination-number:hover {
	opacity: 1;
	color: #8d785c;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.listing-chalets .ajax-pagination {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 1rem 0.5rem;
		gap: 10px;
	}

	.listing-chalets .ajax-pagination .pagination-prev,
	.listing-chalets .ajax-pagination .pagination-next {
		width: 36px;
		height: 36px;
		flex-shrink: 0;
		font-size: 0.75rem;
	}

	.listing-chalets .ajax-pagination .pagination-numbers {
		flex: 1;
		min-width: 0;
		gap: 5px;
	}

	.listing-chalets .ajax-pagination .pagination-numbers .pagination-number {
		font-size: 1rem;
		padding: 3px 8px;
		margin: 0 2px;
		min-width: 30px;
	}
}

/* Elementor Chalets Grid - CSS Grid layout */
.elementor-chalets-grid .nos_chalet_listing_placeholder {
	display: block !important;
	width: 100%;
	margin: 0;
}

.elementor-chalets-grid .row.nos_chalet_listing_placeholder {
	justify-content: center;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.elementor-chalets-grid .row.nos_chalet_listing_placeholder > .nos_chalet_listing_items {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}

.elementor-chalets-grid .nos_chalet_listing_items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	width: 100% !important;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	column-gap: 35px;
	row-gap: 30px;
	justify-items: stretch;
	align-items: stretch;
	justify-content: center;
	box-sizing: border-box;
}

/* Pages masquées par la pagination AJAX (override .hide() qui n'a pas !important). */
.elementor-chalets-grid .nos_chalet_listing_items.chalets-grid-page-hidden {
	display: none !important;
}

@media (max-width: 767px) {
	.elementor-chalets-grid article.chalet-item-wrap.col-md-4 {
		display: flex;
		justify-content: center;
	}
	.elementor-chalets-grid .col-md-12.found-post-text {
		justify-content: center;
		display: flex;
	}
}

/* Tablette (768–1024) : 2 colonnes alignées, gap réduit, titre centré comme la grille */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-chalets-grid > .container > .row:first-child,
	.elementor-chalets-grid .row.nos_chalet_listing_placeholder {
		--bs-gutter-x: 0;
		margin-left: 0;
		margin-right: 0;
		justify-content: center;
	}

	.elementor-chalets-grid .found-post-text,
	.elementor-chalets-grid .col-md-12.found-post-text {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center;
		display: block;
	}

	.elementor-chalets-grid .nos_chalet_listing_items {
		column-gap: 25px;
		row-gap: 10px;
		justify-content: stretch;
		justify-items: stretch;
	}

	.elementor-chalets-grid .nos_chalet_listing_items .col-md-4,
	.elementor-chalets-grid .nos_chalet_listing_items .chalet-item-wrap.col-md-4 {
		display: flex;
		justify-content: center;
	}
}

.elementor-chalets-grid .nos_chalet_listing_items > * {
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	box-sizing: border-box;
}

/* Override Bootstrap col-md-4 (flex: 0 0 auto; width: 33.33%) - grid defines layout */
.elementor-chalets-grid .nos_chalet_listing_items .col-md-4,
.elementor-chalets-grid .nos_chalet_listing_items .chalet-item-wrap.col-md-4 {
	flex: none !important;
	width: 100% !important;
	max-width: 100% !important;
}

@media (min-width: 768px) {
	.elementor-chalets-grid .nos_chalet_listing_items .col-md-4,
	.elementor-chalets-grid .nos_chalet_listing_items .chalet-item-wrap.col-md-4 {
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

.elementor-chalets-grid .chalet-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
}

.elementor-chalets-grid .chalet-image-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.elementor-chalets-grid .chalet-image {
	width: 100%;
	overflow: hidden;
}

.elementor-chalets-grid .chalet-image-item {
	width: 100%;
}

.elementor-chalets-grid .chalet-image-item img {
	width: 100%;
	height: auto;
	display: block;
}