/* iCreate Rex Listings — gallery slider + per-card modal.
   Classes are prefixed icr- so they can't collide with the Rex plugins' own markup.
   Several rules are deliberately high-specificity (html body …): the Hello theme reset,
   the Elementor Kit's button styles and Elementor's `.elementor img { height:auto }`
   all print after this file and would otherwise win. */

/* ---------- Gallery ---------- */
.icr-gallery {
	--icr-ar: 4 / 3;
	--icr-fit: cover;
	--icr-bg: #eff1ef;
	--icr-arrow-bg: rgba(255, 255, 255, 0.9);
	--icr-arrow-color: #222322;
	--icr-radius: 0px;
	position: relative;
	width: 100%;
}
.icr-gallery .icr-gallery__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	border-radius: var(--icr-radius);
	background: var(--icr-bg);
	outline-offset: 2px;
}
.icr-gallery .icr-gallery__track::-webkit-scrollbar { display: none; }
.icr-gallery .icr-gallery__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	aspect-ratio: var(--icr-ar);
}
html body .icr-gallery .icr-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--icr-fit);
}
html body .icr-gallery button.icr-gallery__arrow,
html body .icr-gallery button.icr-gallery__arrow:hover,
html body .icr-gallery button.icr-gallery__arrow:focus {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--icr-arrow-bg);
	color: var(--icr-arrow-color);
	font-family: inherit;
	font-size: 26px;
	font-weight: 400;
	line-height: 38px;
	text-align: center;
	text-transform: none;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	transition: opacity 0.2s;
	cursor: pointer;
}
html body .icr-gallery button.icr-gallery__arrow:focus-visible { outline: 2px solid var(--icr-arrow-color); outline-offset: 2px; }
html body .icr-gallery button.icr-gallery__arrow--prev { left: 12px; }
html body .icr-gallery button.icr-gallery__arrow--next { right: 12px; }
html body .icr-gallery button.icr-gallery__arrow[disabled] { opacity: 0.35; cursor: default; }
.icr-gallery .icr-gallery__counter {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
}
.icr-gallery--empty {
	padding: 24px;
	border: 1px dashed #cfd7cf;
	color: #6b706b;
	font-size: 13px;
	text-align: center;
}

/* ---------- Modal ---------- */
/* On the page the modal content is hidden until opened. In the Elementor editor it stays
   visible (outlined and labelled) so its widgets can be edited in place. */
body:not(.elementor-editor-active) .icr-modal { display: none !important; }
/* Must out-rank the hide rule above (which carries body:not(...)). */
html body:not(.elementor-editor-active) .icr-dialog .icr-modal { display: var(--display, flex) !important; }

body.elementor-editor-active .icr-modal {
	outline: 1px dashed #3e9a3c;
	outline-offset: -1px;
}
/* ::after, not ::before: Elementor uses .e-con::before as the background overlay. Every
   overlay-ish property is reset so the label can't become a block covering the content. */
body.elementor-editor-active .icr-modal::after {
	content: "Listing modal (hidden on the page, opens on click)";
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	z-index: 5;
	width: auto;
	height: auto;
	padding: 2px 8px;
	border: 0;
	border-radius: 0;
	opacity: 1;
	mix-blend-mode: normal;
	background: #3e9a3c;
	color: #fff;
	font: 600 11px/1.6 sans-serif;
	pointer-events: none;
}

.icr-modal-open { cursor: pointer; }

.icr-dialog {
	width: min(var(--icr-dialog-width, 1040px), calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #fff;
	overflow: auto;
	overscroll-behavior: contain;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
}
.icr-dialog::backdrop { background: rgba(11, 41, 10, 0.6); }
html body .icr-dialog button.icr-dialog__close,
html body .icr-dialog button.icr-dialog__close:hover,
html body .icr-dialog button.icr-dialog__close:focus {
	position: sticky;
	top: 0;
	float: right;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin: 0 0 -44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.92);
	color: #222322;
	font-family: inherit;
	font-size: 28px;
	font-weight: 400;
	line-height: 44px;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
}
html body .icr-dialog button.icr-dialog__close:focus-visible { outline: 2px solid #222322; outline-offset: -4px; }
html.icr-dialog-open { overflow: hidden; }
/* The wrapper copies the card's Elementor document classes (so its CSS still applies);
   neutralise any layout those classes carry. */
.icr-dialog__body { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; }