/**
 * Palmilla lightbox: brands Elementor's shared lightbox (image galleries, single images, videos).
 *
 * Matches the homes gallery dialog (template-parts/property/dialogs.php, assets/css/properties.css):
 * the same dark-teal blurred backdrop, white 8px-radius frame and shadow, Nexa labels, and the same
 * translucent-disc gallery arrows, but slimmer: no header or footer bars, just the photo in a thin
 * white frame. The close button is drawn like the header's hamburger (a #18948D disc with 1px white
 * lines) and sits where the hamburger sits, 20px from the top and 30px from the right edge.
 *
 * Every selector starts with `body .elementor-lightbox:not(.elementor-popup-modal)`:
 * - Elementor Pro popups share the .elementor-lightbox class, so they are excluded;
 * - the specificity beats Elementor's lightbox.min.css whatever order the two files load in.
 */

body .elementor-lightbox:not(.elementor-popup-modal) {
	--palmilla-lb-teal: #18948d;
	--palmilla-lb-dark: #097173;
	--palmilla-lb-frame: 8px;
	--palmilla-lb-pad-top: 88px;
	--palmilla-lb-pad-bottom: 104px;
	--palmilla-lb-pad-x: 96px;
	--lightbox-ui-color: #fff;
	--lightbox-ui-color-hover: #fff;
	--lightbox-text-color: #fff;
	background-color: rgba(7, 56, 57, .78);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* ---- Close: the hamburger's disc with the lines crossed ---- */
body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button {
	position: absolute;
	top: 20px;
	inset-inline-end: 29px;
	z-index: 20;
	display: block;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background-color: var(--palmilla-lb-teal);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	color: #fff;
	font-size: 0;
	transition: background-color .2s ease, transform .2s ease;
}

body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button > svg,
body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button > i {
	display: none;
}

body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button::before,
body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button::after {
	content: "";
	position: absolute;
	top: 21.5px;
	left: 9px;
	width: 26px;
	height: 1px;
	border-radius: 1px;
	background-color: #fff;
	transform: rotate(45deg);
}

body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button::after {
	transform: rotate(-45deg);
}

body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button:hover {
	background-color: var(--palmilla-lb-dark);
	transform: rotate(90deg);
}

body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---- Counter: bottom centre like the homes dialog's "1 / 6" (fullscreen toggle hidden, the homes dialog has none) ---- */
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__header {
	top: auto;
	bottom: 0;
	box-sizing: border-box;
	height: 84px;
	padding: 20px 84px;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	pointer-events: none;
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__header > * {
	pointer-events: auto;
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__header .e-eicon-frame-expand,
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__header .e-eicon-frame-minimize,
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__header .eicon-frame-expand,
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__header .eicon-frame-minimize {
	display: none;
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__header .elementor-slideshow__counter {
	margin-inline-end: 0;
	color: #fff;
	font: 700 12px/44px "nexa", "nunito", Arial, sans-serif;
	letter-spacing: .18em;
}

/* ---- Photo: a thin white frame, capped at the homes dialog's 1200px ---- */
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-lightbox-item {
	padding: var(--palmilla-lb-pad-top) var(--palmilla-lb-pad-x) var(--palmilla-lb-pad-bottom);
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-lightbox-image {
	box-sizing: border-box;
	max-width: min(1200px, 100%);
	max-height: 100%;
	border: var(--palmilla-lb-frame) solid #fff;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 24px 100px rgba(0, 60, 59, .25);
}

/* ---- Gallery arrows: the homes dialog's translucent disc, drawn at 44px ---- */
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-prev,
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-next {
	top: 50%;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none'%3E%3Ccircle cx='22' cy='22' r='21.5' fill='white' fill-opacity='.25' stroke='white' stroke-width='.75'/%3E%3Cpath d='M25 12L18 22L25 32' stroke='white'/%3E%3C/svg%3E") center / 44px 44px no-repeat;
	transform: translateY(-50%);
	transition: transform .18s ease, opacity .2s ease;
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-prev {
	left: 26px;
	right: auto;
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-next {
	right: 26px;
	left: auto;
	transform: translateY(-50%) rotate(180deg);
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-prev:hover {
	transform: translateY(-50%) scale(1.08);
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-next:hover {
	transform: translateY(-50%) rotate(180deg) scale(1.08);
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button > svg,
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button > i {
	display: none;
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---- Caption (image title / description, when the media library has them) ---- */
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__footer {
	box-sizing: border-box;
	padding: 0 var(--palmilla-lb-pad-x) 72px;
	color: #fff;
	text-align: center;
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__title {
	font: 700 11px/1.5 "nexa", "nunito", Arial, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__description {
	margin-top: 4px;
	font: 400 14px/1.5 "nunito", Arial, sans-serif;
}

/* ---- Video: the same frame, sized to fit inside the padding at 16:9 ---- */
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-video-container .elementor-video-landscape {
	width: min(1200px, calc(100vw - 2 * var(--palmilla-lb-pad-x)), calc((100vh - var(--palmilla-lb-pad-top) - var(--palmilla-lb-pad-bottom)) * var(--video-aspect-ratio, 1.7777)));
	max-height: none;
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-video-container .elementor-video-landscape,
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-video-container .elementor-video-portrait,
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-video-container .elementor-video-square {
	box-sizing: border-box;
	overflow: hidden;
	border: var(--palmilla-lb-frame) solid #fff;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 24px 100px rgba(0, 60, 59, .25);
}

body .elementor-lightbox:not(.elementor-popup-modal) .elementor-video-container .elementor-video-landscape iframe,
body .elementor-lightbox:not(.elementor-popup-modal) .elementor-video-container .elementor-video-landscape video {
	display: block;
	max-height: none;
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
	body .elementor-lightbox:not(.elementor-popup-modal) {
		--palmilla-lb-pad-x: 72px;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-prev {
		left: 14px;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-next {
		right: 14px;
	}
}

/* ---- Phone: photo edge to edge inside a 16px gutter, arrows move under it ---- */
@media (max-width: 767px) {
	body .elementor-lightbox:not(.elementor-popup-modal) {
		--palmilla-lb-frame: 6px;
		--palmilla-lb-pad-top: 84px;
		--palmilla-lb-pad-bottom: 104px;
		--palmilla-lb-pad-x: 16px;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button {
		inset-inline-end: 25px;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-lightbox-image {
		border-radius: 6px;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-prev,
	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-next {
		top: auto;
		bottom: 20px;
		height: 44px;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-prev {
		left: 20px;
		transform: none;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-next {
		right: 20px;
		transform: rotate(180deg);
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-prev:hover {
		transform: scale(1.08);
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-next:hover {
		transform: rotate(180deg) scale(1.08);
	}

}

/* ---- Short screens (landscape phones): tighter top and bottom, wider side gutter so the photo clears the close button ---- */
@media (max-height: 500px) {
	body .elementor-lightbox:not(.elementor-popup-modal) {
		--palmilla-lb-pad-top: 20px;
		--palmilla-lb-pad-bottom: 72px;
		--palmilla-lb-pad-x: 88px;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-slideshow__footer {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-message {
		animation: none;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button,
	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-prev,
	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-next {
		transition: none;
	}

	body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button:hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	body .elementor-lightbox:not(.elementor-popup-modal) .dialog-lightbox-close-button,
	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-prev,
	body .elementor-lightbox:not(.elementor-popup-modal) .elementor-swiper-button-next {
		border: 1px solid ButtonText;
		forced-color-adjust: none;
	}
}