.imap-root {
	--imap-pin-size: 36px;
	--imap-pin-color: #e0546b;
	--imap-pin-icon-color: #ffffff;
	--imap-pin-mobile-boost: 1;
	--imap-radius: 16px;
	--imap-modal-bg: #ffffff;
	--imap-overlay-bg: rgba(0, 0, 0, 0.35);
	--imap-gallery-h: 260px;
	direction: rtl;
}

/* Mobile-specific rules below use a plain @media query only. An earlier
   version also toggled a JS-driven class to make this also apply inside
   Elementor's editor "mobile preview" mode, since that preview doesn't
   actually narrow the document the way a real phone does — reverted, along
   with the automatic pin size boost that used to live here, after both
   caused more problems (oversized pins in the compact preview, a
   MutationObserver side effect that reset the map's zoom on every pin tap)
   than they solved. The editor's mobile preview not perfectly matching a
   real device is a known limitation, not something worth chasing further. */

.imap-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 60px 20px;
	background: #f4f5f7;
	border: 2px dashed #d5d8dc;
	border-radius: 12px;
	color: #9199a3;
	font-size: 14px;
}
.imap-placeholder i {
	font-size: 32px;
}

/* Every <button> below repeats the same handful of !important declarations.
   WP themes routinely define global button{} rules (border, padding,
   outline, background, box-sizing) that otherwise leak into ours and show
   up as a stray colored square behind the intended shape. A blanket
   `.imap-root button { all: unset !important }` was tried and reverted: it
   resets *every* property including position/display/transform, so any
   later rule for a specific button (e.g. .imap-pin's `position: absolute`)
   needs its own !important too just to not be un-set again — same amount
   of work, easier to get wrong. Per-property !important below is more
   verbose but each declaration is independently safe. */

/* ── Map viewport / canvas / frame ─────────────────────────────
   .imap-viewport  → the visible window (full-screen on mobile, overflow hidden)
   .imap-canvas    → receives the pan/zoom transform via JS
   .imap-frame     → always sized to the image's true aspect ratio, so pin
                     left/top percentages stay accurate regardless of zoom
*/
.imap-viewport {
	position: relative;
	overflow: hidden;
}

.imap-canvas {
	transform-origin: 0 0;
	will-change: transform;
}

.imap-frame {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	border-radius: var(--imap-radius);
	overflow: hidden;
	line-height: 0;
}

.imap-bg {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}

.imap-editor-hint {
	position: absolute;
	bottom: 10px;
	inset-inline: 10px;
	background: rgba(20, 20, 25, 0.75);
	color: #fff;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 6px;
	text-align: center;
	pointer-events: none;
	z-index: 5;
}

/* First-visit hint — sits over the map (not inside .imap-canvas, so mobile
   pan/zoom never moves it). pointer-events:none so it never blocks a tap on
   whatever's underneath it (including a pin) — map.js dismisses it on the
   first click/tap anywhere on the map, so the click that dismisses it still
   reaches its real target too. */
.imap-tap-hint {
	position: absolute;
	inset: 0;
	inset-inline: 14px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.imap-tap-hint span {
	display: inline-block;
	max-width: 100%;
	background: rgba(20, 20, 25, 0.82);
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	padding: 12px 20px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.imap-tap-hint.is-hidden span {
	opacity: 0;
	transform: scale(0.96);
}

@media (max-width: 767px) {
	.imap-viewport {
		width: 100vw;
		height: 100dvh;
		/* Break out of the theme's centered content container. Deliberately
		   the PHYSICAL margin-left (not margin-inline-start) — map.js's
		   fixBreakout() measures and corrects via the same physical
		   margin-left property; mixing a logical CSS property here with a
		   physical JS correction would silently target different sides in
		   RTL and never actually cancel out. */
		margin-left: calc(50% - 50vw);
		touch-action: none;
	}
	.imap-canvas {
		width: 100%;
	}
	.imap-frame {
		border-radius: 0;
	}
}
/* ── Pins ──────────────────────────────────────────────────── */
.imap-pins-layer {
	position: absolute;
	inset: 0;
}

.imap-pin {
	/* Counter-scales against .imap-canvas's mobile pan/zoom transform (map.js
	   sets --imap-pin-cscale = 1/canvasScale on .imap-root) so pins stay a
	   constant on-screen size no matter how far the map is zoomed — exactly
	   like map-marker behavior in Google Maps etc.
	   IMPORTANT: this must be a NEW variable name, not a redeclaration of
	   --imap-pin-size itself. `--imap-pin-size: calc(var(--imap-pin-size) * x)`
	   looks like it reads "the inherited value before this declaration" (the
	   way a Sass variable would), but per the CSS Custom Properties spec, a
	   custom property that references itself on the same element — even
	   indirectly through its own declaration — is a cycle, and a cyclic
	   custom property computes to its guaranteed-invalid value for that
	   element. That poisoned --imap-pin-size entirely (not just on mobile),
	   which cascaded into width/height/the icon's font-size all silently
	   collapsing to auto-sized-by-content — the "tiny icon on desktop" bug. */
	--imap-pin-size-effective: calc(var(--imap-pin-size, 36px) * var(--imap-pin-cscale, 1) * var(--imap-pin-mobile-boost, 1));
	position: absolute !important;
	/* --imap-x / --imap-y are inline per-pin custom properties written by
	   PHP (see render()) — one shared position for every screen size. */
	left: var(--imap-x, 50%) !important;
	top: var(--imap-y, 50%) !important;
	transform: translate(-50%, -100%);
	width: var(--imap-pin-size-effective) !important;
	height: var(--imap-pin-size-effective) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--imap-pin-color) !important;
	color: var(--imap-pin-icon-color);
	border: 0 !important;
	outline: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border-radius: 50% 50% 50% 0 !important;
	rotate: -45deg;
	cursor: pointer;
	touch-action: manipulation;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease, filter 0.15s ease;
	line-height: 1 !important;
}

.imap-pin:hover {
	filter: brightness(1.08);
	transform: translate(-50%, -100%) scale(1.08);
}

.imap-pin:focus-visible {
	filter: brightness(1.08);
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--imap-pin-color), 0 3px 8px rgba(0, 0, 0, 0.35);
}

.imap-pin-icon {
	rotate: 45deg;
	display: flex;
	font-size: calc(var(--imap-pin-size-effective, var(--imap-pin-size, 36px)) * 0.58);
	line-height: 1;
	color: var(--imap-pin-icon-color);
}
.imap-pin-icon svg,
.imap-pin-icon i {
	width: 1em;
	height: 1em;
	font-size: 1em;
	color: var(--imap-pin-icon-color);
	fill: currentColor;
}

.imap-pin::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--imap-pin-color);
	opacity: 0.6;
	animation: imap-pulse 1.8s ease-out infinite;
	z-index: -1;
}

@keyframes imap-pulse {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

/* If animations are globally disabled (OS "reduce motion" setting, or a
   performance/accessibility plugin), a frozen ::after would otherwise sit
   as a solid opaque square behind the pin instead of fading out. Hide it
   outright in that case rather than let it freeze mid-frame. */
@media (prefers-reduced-motion: reduce) {
	.imap-pin::after {
		display: none;
	}
}

/* ── Modal ─────────────────────────────────────────────────── */
/* Rendered inside .imap-root in the PHP output, but map.js moves it to
   document.body immediately on page load (see portalModal() in map.js).
   That's required because Elementor sections sometimes apply `transform`
   for entrance animations, which silently turns `position: fixed` into
   something scoped to that section instead of the viewport — the exact bug
   that made the modal appear pinned to one side of the screen instead of
   centered. map.js freezes the resolved colors/typography as inline styles
   on the modal before moving it, so per-instance Style-tab settings survive
   the move even though this stylesheet's {{WRAPPER}} selectors no longer
   reach it afterwards. `!important` on position/inset here too, in case a
   theme has its own blanket `[class*="modal"]` or similar override. */
.imap-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000;
	display: none;
	direction: rtl;
}
.imap-modal.is-open {
	display: block;
}

.imap-modal-overlay {
	position: absolute;
	inset: 0;
	background: var(--imap-overlay-bg);
	animation: imap-overlay-fade 0.2s ease;
}
@keyframes imap-overlay-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.imap-modal-panel {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%);
	width: min(420px, calc(100% - 32px));
	max-width: 100vw;
	box-sizing: border-box;
	overflow-x: hidden;
	max-height: min(85vh, 720px);
	overflow-y: auto;
	background: var(--imap-modal-bg);
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	animation: imap-pop 0.22s ease;
}

@keyframes imap-pop {
	from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Close button: white X on a soft black circle — a plain glyph with only a
   drop-shadow (no backing plate) turned out to disappear against light
   photos, so the circle is back, just translucent instead of solid.
   The <svg> needs an EXPLICIT size (width/height, not just viewBox) — left
   unconstrained it doesn't reliably fill the button across browsers, which
   is what made it look tiny even with a large tappable button area. */
.imap-modal-close {
	position: absolute !important;
	top: 8px;
	inset-inline-end: 8px;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	outline: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: rgba(0, 0, 0, 0.55) !important;
	border-radius: 50% !important;
	color: #fff !important;
	z-index: 2;
	cursor: pointer;
}
.imap-modal-close:hover {
	background: rgba(0, 0, 0, 0.75) !important;
}
.imap-modal-close svg {
	width: 20px;
	height: 20px;
	display: block;
}

.imap-modal-body {
	padding: 20px 24px 26px;
}

.imap-modal-title {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 700;
}

.imap-modal-desc {
	font-size: 15px;
	line-height: 1.7;
	color: #444;
}
.imap-modal-desc p:first-child {
	margin-top: 0;
}

/* ── Gallery slider ────────────────────────────────────────── */
.imap-modal-gallery {
	position: relative;
	width: 100%;
	height: var(--imap-gallery-h);
	overflow: hidden;
	background: #eee;
	border-radius: 18px 18px 0 0;
	/* Claim horizontal gestures for our own swipe handler; let the browser
	   keep handling vertical scroll of the (possibly taller-than-viewport)
	   modal panel normally. */
	touch-action: pan-y;
}

.imap-slide-track {
	display: flex;
	height: 100%;
	transition: transform 0.25s ease;
}

.imap-slide {
	flex: 0 0 100%;
	height: 100%;
}
.imap-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.imap-slide-nav {
	position: absolute !important;
	top: 50%;
	transform: translateY(-50%);
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	outline: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	color: #fff !important;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
	z-index: 2;
	cursor: pointer;
}
.imap-slide-nav svg {
	width: 22px;
	height: 22px;
	display: block;
}
.imap-slide-nav:hover {
	opacity: 0.85;
}
.imap-slide-prev { inset-inline-start: 2px; }
.imap-slide-next { inset-inline-end: 2px; }

/* Dots sit under the photo, not floating on top of it. */
.imap-slide-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 0 0;
}
.imap-dot {
	width: 6px !important;
	height: 6px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	border-radius: 50% !important;
	background: #d7d7d7 !important;
	cursor: pointer;
}
.imap-dot.is-active {
	background: #111 !important;
	width: 16px !important;
	border-radius: 4px !important;
}

body.imap-lock-scroll {
	overflow: hidden;
}

/* ── Mobile: bottom-sheet modal ───────────────────────────── */
@media (max-width: 767px) {
	/* !important here matches the base .imap-modal-panel rule's !important
	   (added to survive theme overrides) — without it, these mobile
	   overrides would silently lose to that base rule regardless of the
	   media query, since a plain declaration never beats an !important one. */
	.imap-modal-panel {
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: 0 !important;
		transform: translateY(0);
		/* auto, not a percentage/fixed value — with left:0 AND right:0 both
		   already pinned, an explicit width here over-constrains the box, and
		   in this RTL context the browser resolves that by recalculating
		   `left` instead of honoring it — which is what let the panel drift
		   slightly past the left edge. `width:auto` removes the conflict:
		   the box's width becomes unambiguously "whatever's between the two
		   pinned edges", regardless of direction. Also needs !important —
		   without it, this loses outright to the desktop rule's
		   `width: min(560px, calc(100% - 32px))`, which isn't itself
		   `!important` but still wins over a plain declaration here. */
		width: auto !important;
		max-width: 100vw !important;
		max-height: 88vh;
		border-radius: 20px 20px 0 0;
		/* No horizontal spread — a symmetric shadow bleeds visibly past a
		   screen-edge-flush sheet's left/right sides, which reads as "the
		   panel pokes out past the edge" even though nothing is actually
		   misaligned. Bottom sheets conventionally only shadow upward. */
		box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
		animation: imap-slide-up 0.25s ease;
	}
	.imap-modal-gallery {
		border-radius: 20px 20px 0 0;
	}

	/* Extra breathing room at the bottom of the sheet, plus the iPhone home-
	   indicator safe area so text/edges never sit flush against it. */
	.imap-modal-body {
		padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
	}

	.imap-modal-desc {
		font-size: 16.5px;
	}

	@keyframes imap-slide-up {
		from { transform: translateY(100%); }
		to { transform: translateY(0); }
	}
}

/* ── Mobile zoom-out button ──────────────────────────────────
   Fixed to the viewport corner (sibling of .imap-canvas, so the pan/zoom
   transform never moves it). Hidden entirely on desktop — map.js's
   apply()/resetToFill() also no-op there via isMobile(), this is belt-and-
   braces so it's never even clickable when it wouldn't do anything. */
.imap-zoom-out {
	display: none;
}
@media (max-width: 767px) {
	.imap-zoom-out {
		display: flex !important;
		position: absolute !important;
		bottom: 20px;
		inset-inline-end: 16px;
		width: 44px !important;
		height: 44px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		align-items: center;
		justify-content: center;
		border: 0 !important;
		outline: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		appearance: none !important;
		-webkit-appearance: none !important;
		border-radius: 50% !important;
		background: rgba(0, 0, 0, 0.55) !important;
		color: #fff !important;
		z-index: 10;
		cursor: pointer;
	}
}