/**
 * Interactive SVG World Map for Elementor — widget styles.
 *
 * Everything here is a sensible default; the Elementor Style tab overrides
 * colors, typography, spacing and shadows via {{WRAPPER}} selectors.
 */

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.eswm-widget {
	position: relative;
}

/* The author `display` values below would defeat the [hidden] attribute
   (UA stylesheet always loses), so enforce it explicitly. */
.eswm-widget [hidden] {
	display: none !important;
}

.eswm-layout {
	display: flex;
	gap: 0;
	align-items: stretch;
}

/* Sidebar placement variants */
.eswm-sidebar-left .eswm-layout {
	flex-direction: row-reverse;
}

.eswm-sidebar-bottom .eswm-layout {
	flex-direction: column;
}

.eswm-map-area {
	position: relative;
	flex: 1 1 auto;
	min-width: 0; /* allow the flex item to shrink below content size */
	overflow: hidden;
}

.eswm-map {
	width: 100%;
	height: 480px; /* overridden by the Map Height control */
	background-color: #eaf2f8;
	touch-action: pan-x pan-y; /* keep native page scroll on touch devices */
}

/* The library sizes its own container; make sure it fills our box. */
.eswm-map .jvm-container {
	width: 100%;
	height: 100%;
}

/* Kadence (and many themes) apply `svg { max-width: 100% }` globally —
   neutralize any sizing interference inside the map. */
.eswm-map svg {
	max-width: none;
	width: 100%;
	height: 100%;
	display: block;
}

/* ------------------------------------------------------------------ */
/* Pins (HTML overlay layer)                                           */
/* ------------------------------------------------------------------ */

.eswm-pins {
	position: absolute;
	inset: 0;
	pointer-events: none; /* the layer is transparent; only pins are clickable */
	z-index: 3;
	overflow: hidden;
}

/* The !important flags fight global `button` styling from themes and the
   Elementor kit (`.elementor-kit-N button` outranks a lone class), which
   otherwise paints pins as solid buttons: colored box + white glyph. */
.eswm-pin {
	position: absolute;
	left: -9999px; /* parked until JS computes coordsToPoint() */
	top: -9999px;
	transform: translate(-50%, -100%); /* anchor: bottom-center = geo point */
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 1;
	font-size: var(--eswm-pin-size, 24px);
	color: var(--eswm-pin-color, #e0245e) !important;
	transition: transform 0.15s ease;
}

.eswm-pin:hover,
.eswm-pin:focus-visible {
	transform: translate(-50%, -100%) scale(1.15);
	z-index: 4;
}

.eswm-pin i,
.eswm-pin svg {
	font-size: inherit;
	width: 1em;
	height: 1em;
	fill: currentColor;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.eswm-pin img {
	width: var(--eswm-pin-size, 24px);
	height: auto;
	max-width: none; /* guard against theme img resets */
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ------------------------------------------------------------------ */
/* Floating zoom controls                                              */
/* ------------------------------------------------------------------ */

.eswm-zoom {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 5;
}

.eswm-zoom--top-right    { top: 12px;    right: 12px; }
.eswm-zoom--top-left     { top: 12px;    left: 12px; }
.eswm-zoom--bottom-right { bottom: 12px; right: 12px; }
.eswm-zoom--bottom-left  { bottom: 12px; left: 12px; }

.eswm-zoom-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background-color: #ffffff;
	color: #333333;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.eswm-zoom-btn:hover,
.eswm-zoom-btn:focus-visible {
	background-color: #f2f2f2;
}

.eswm-zoom-btn svg {
	max-width: none; /* theme reset guard */
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------ */
/* Floating directional pan arrows (D-pad)                             */
/* ------------------------------------------------------------------ */

.eswm-pan {
	position: absolute;
	z-index: 5;
	display: grid;
	/* 3x3 D-pad: the arrows sit in the cross, corners stay empty. */
	grid-template-columns: repeat(3, auto);
	gap: 4px;
}

/* Per-device visibility. Elementor's own `elementor-hidden-{device}` rules are
   `display: none` at a higher specificity than `.eswm-pan`, so they already
   win — but they require the `.elementor` ancestor and no `!important`, so we
   restate them here to keep the arrows hidden even outside that context
   (e.g. the editor preview, or a theme that raises the display specificity). */
.eswm-pan.elementor-hidden-desktop,
.eswm-pan.elementor-hidden-tablet,
.eswm-pan.elementor-hidden-mobile {
	display: grid;
}

@media (max-width: 767px) {
	.eswm-widget .eswm-pan.elementor-hidden-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.eswm-widget .eswm-pan.elementor-hidden-tablet {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.eswm-widget .eswm-pan.elementor-hidden-desktop {
		display: none !important;
	}
}

.eswm-pan-btn--up    { grid-area: 1 / 2; }
.eswm-pan-btn--left  { grid-area: 2 / 1; }
.eswm-pan-btn--right { grid-area: 2 / 3; }
.eswm-pan-btn--down  { grid-area: 3 / 2; }

.eswm-pan--top-right     { top: 12px;    right: 12px; }
.eswm-pan--top-left      { top: 12px;    left: 12px; }
.eswm-pan--bottom-right  { bottom: 12px; right: 12px; }
.eswm-pan--bottom-left   { bottom: 12px; left: 12px; }
.eswm-pan--center-right  { top: 50%; right: 12px; transform: translateY(-50%); }
.eswm-pan--center-left   { top: 50%; left: 12px;  transform: translateY(-50%); }
.eswm-pan--bottom-center { bottom: 12px; left: 50%; transform: translateX(-50%); }

.eswm-pan-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background-color: #ffffff;
	color: #333333;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.eswm-pan-btn:hover,
.eswm-pan-btn:focus-visible {
	background-color: #f2f2f2;
}

/* Set by the handler when the map is already flush against that edge. */
.eswm-pan-btn[disabled] {
	opacity: 0.4;
	cursor: default;
}

.eswm-pan-btn svg {
	max-width: none; /* theme reset guard */
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------------------------ */
/* Shared content block (inside modal / sidebar / tooltip)             */
/* ------------------------------------------------------------------ */

.eswm-content__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 0 0 12px;
}

.eswm-content__title {
	margin: 0 0 8px;
	font-size: 1.15em;
	line-height: 1.3;
}

.eswm-content__text {
	margin: 0 0 12px;
	font-size: 0.95em;
	line-height: 1.55;
}

.eswm-content__text p:last-child {
	margin-bottom: 0;
}

.eswm-content__button {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 4px;
	background-color: #2c3e50;
	color: #ffffff;
	text-decoration: none;
	font-size: 0.9em;
	transition: opacity 0.15s ease;
}

.eswm-content__button:hover,
.eswm-content__button:focus-visible {
	opacity: 0.85;
	color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Panel chrome (shared by modal + sidebar)                            */
/* ------------------------------------------------------------------ */

.eswm-panel {
	position: relative;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.eswm-panel__body {
	padding: 24px;
	overflow-y: auto;
}

.eswm-panel__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #666666;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease;
}

.eswm-panel__close:hover,
.eswm-panel__close:focus-visible {
	color: #000000;
}

/* ------------------------------------------------------------------ */
/* Modal / Popup mode                                                  */
/* ------------------------------------------------------------------ */

.eswm-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.eswm-overlay.is-open {
	opacity: 1;
}

.eswm-panel--modal {
	width: 100%;
	max-width: 440px;
	max-height: min(85vh, 640px);
	display: flex;
	flex-direction: column;
	transform: translateY(12px);
	transition: transform 0.2s ease;
}

.eswm-overlay.is-open .eswm-panel--modal {
	transform: translateY(0);
}

/* ------------------------------------------------------------------ */
/* Sidebar / Card mode                                                 */
/* ------------------------------------------------------------------ */

.eswm-panel--sidebar {
	flex: 0 0 320px;
	max-width: 320px;
	border-radius: 0;
	box-shadow: none;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.eswm-sidebar-left .eswm-panel--sidebar {
	border-left: 0;
	border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.eswm-sidebar-bottom .eswm-panel--sidebar {
	flex-basis: auto;
	max-width: none;
	border-left: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.eswm-panel--sidebar[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Tooltip mode                                                        */
/* ------------------------------------------------------------------ */

.eswm-tooltip {
	position: absolute;
	z-index: 6;
	max-width: 260px;
	padding: 12px 14px;
	background-color: #ffffff;
	border-radius: 6px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
	pointer-events: none; /* never steal the hover from the map */
	font-size: 0.9em;
}

.eswm-tooltip .eswm-content__image {
	max-height: 120px;
	object-fit: cover;
}

.eswm-tooltip .eswm-content__button {
	pointer-events: auto;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/* Sidebar collapses under the map on small screens. */
	.eswm-layout {
		flex-direction: column !important;
	}

	.eswm-panel--sidebar {
		flex-basis: auto;
		max-width: none;
		border: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}

	.eswm-panel--modal {
		max-width: 100%;
	}

	.eswm-zoom-btn {
		width: 40px;  /* bigger touch targets */
		height: 40px;
	}

	.eswm-pan-btn {
		width: 38px;  /* bigger touch targets */
		height: 38px;
	}
}