/**
 * HI Hostel Search modal
 *
 * On focus, HI portals <hi-hostel-search> to document.body with position:fixed.
 * Do not set width/position on the custom element itself — those rules would
 * follow it out of the modal and shift the field + button.
 */

.yh-modal.yh-hi-search-modal {
	z-index: 1000001;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	animation: none;
}

.yh-modal.yh-hi-search-modal .modal-content {
	width: min(48rem, calc(100% - 2rem));
	max-width: 48rem;
	max-height: none;
	overflow: visible;
	margin: auto;
	background-color: var(--wp--preset--color--white, #fff);
}

.yh-modal.yh-hi-search-modal .modal-content-wrapper {
	max-height: none;
	overflow: visible;
}

.yh-modal.yh-hi-search-modal .modal-title {
	padding-right: 3.5rem;
}

.yh-modal.yh-hi-search-modal .modal-body {
	padding-bottom: var(--wp--preset--spacing--large, 2rem);
}

.yh-hi-search-modal__widget {
	display: block;
	width: 100%;
	min-height: 3.5rem;
}

.yh-hi-search-modal__widget a {
	color: inherit;
}

.yh-hi-search-modal__loading,
.yh-hi-search-modal__error {
	margin: 0;
	padding: var(--wp--preset--spacing--medium, 1rem) 0;
	text-align: center;
}

.yh-hi-search-modal__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.yh-hi-search-modal__loading[hidden],
.yh-hi-search-modal__error[hidden] {
	display: none !important;
}

.yh-hi-search-modal__loading-spinner {
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--wp--preset--color--primary-border, #ccc);
	border-top-color: var(--wp--preset--color--secondary, #e87722);
	border-radius: 50%;
	animation: yh-hi-search-spin 0.8s linear infinite;
}

@keyframes yh-hi-search-spin {
	to {
		transform: rotate(360deg);
	}
}

.yh-hi-search-modal__error a {
	display: inline-block;
	margin-top: 0.75rem;
}

@media (max-width: 781px) {
	.yh-modal.yh-hi-search-modal {
		align-items: center;
		justify-content: center;
	}

	.yh-modal.yh-hi-search-modal .modal-content {
		width: 80%;
		max-width: 768px;
		max-height: 80vh;
		overflow-y: hidden;
		margin: auto;
	}

	.yh-modal.yh-hi-search-modal .modal-content-wrapper {
		max-height: 100%;
		overflow-y: auto;
	}

	/* Widget dans la modal (flux normal) */
	.yh-modal.yh-hi-search-modal .yh-hi-search-modal__widget hi-hostel-search {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/*
	 * HI peut poser width / left / max-height en inline sur le host (portal).
	 * On aligne sur la modal sans toucher au mode mobile natif du widget.
	 */
	body.hi-search-modal-is-open > hi-hostel-search,
	body.hi-search-modal-is-open hi-hostel-search[data-portal='desktop'],
	body.hi-search-modal-is-open hi-hostel-search[data-portal='mobile'] {
		/*width: 80% !important;*/
		max-width: 768px !important;
		/*max-height: 80vh !important;*/
		box-sizing: border-box;
		left: 50% !important;
		transform: translateX(-50%);
	}
}

body.hi-search-modal-is-open {
	overflow: hidden;
}

.hostel-booking-international [data-hi-search-modal-trigger] {
	cursor: pointer;
}