/* Namas Planas
   Every rule is scoped under .namas-planas and the visual properties carry
   !important deliberately: this widget is embedded into arbitrary themes and
   Elementor/theme stylesheets aggressively re-style button, a, p, dl/dt/dd.
   The plugin must look identical everywhere. */

/* Don't inherit the theme's box model: the panel card is width:100% with
   20px of padding, which overflows the viewport under content-box. */
.namas-planas,
.namas-planas *,
.namas-planas *::before,
.namas-planas *::after {
	box-sizing: border-box !important;
}

.namas-planas {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 1602px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	line-height: 0 !important;
}

/* Viewport clips the zoomed canvas; the canvas (img + svg together) is what
   gets scaled/panned, so the plot shapes stay registered to the artwork at
   any zoom level. The details card lives OUTSIDE the canvas and never scales. */
.namas-planas__viewport {
	position: relative !important;
	overflow: hidden !important;
	line-height: 0 !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

.namas-planas__canvas {
	position: relative !important;
	transform-origin: 0 0 !important;
}

.namas-planas__viewport.is-zoomed {
	cursor: grab !important;
}

.namas-planas__img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-user-drag: none;
}

/* Sits exactly on top of the image. preserveAspectRatio="none" plus a box
   that always matches the image means the viewBox maps 1:1 onto it at any
   width, so the plot shapes stay registered to the artwork. */
.namas-planas__svg {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	overflow: visible !important;
}

/* --namas-planas-rest / --namas-planas-hi are printed per-plot by PHP for
   statuses that paint the plan (parduotas, rezervuotas). Plots without them
   -- laisvas, or no term -- rest transparent and take the standard hover
   colour from the shortcode's `hover` attribute. */
.namas-planas__area {
	fill: var(--namas-planas-rest, transparent) !important;
	pointer-events: all !important;
	cursor: pointer !important;
	transition: fill 0.15s ease-in-out !important;
}

/* .is-current = the plot whose single page is being viewed: painted with the
   same fill it would get on hover, permanently. Shares this rule so the two
   colours can never drift apart. */
.namas-planas__area:hover,
.namas-planas__link:focus .namas-planas__area,
.namas-planas__area.is-active,
.namas-planas__area.is-current {
	fill: var( --namas-planas-hi, var( --namas-planas-hover, rgba(85, 100, 85, 0.3) ) ) !important;
}

.namas-planas__link {
	outline: none !important;
	text-decoration: none !important;
}

/* Plots with no matching namas post: inert, no hover, no pointer. */
.namas-planas__area.is-unlinked {
	pointer-events: none !important;
	cursor: default !important;
}

/* "Pasirinktas namas" — small note next to the current page's plot.
   Lives inside the SVG so it pans/zooms with the plan. */
.namas-planas__current-label {
	font-family: 'Outfit', sans-serif !important;
	font-size: 13px !important;   /* must fit the narrow margin along the west boundary */
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	fill: #556455 !important;
	pointer-events: none !important;
}

/* ---------- zoom buttons (left side of the plan) ---------- */

.namas-planas__zoom {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	z-index: 8 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal !important;
}

.namas-planas .namas-planas__zoom-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	min-width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(85, 100, 85, 1) !important;
	border-radius: 0 !important;
	background: rgba(85, 100, 85, 1) !important;
	color: rgba(232, 236, 231, 1) !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
	transition: background 0.15s ease-in-out, color 0.15s ease-in-out !important;
}

/* the border keeps its grey-green in both states, so the button stays
   outlined when the background flips to white */
.namas-planas .namas-planas__zoom-btn:hover:not(:disabled),
.namas-planas .namas-planas__zoom-btn:focus-visible {
	background: #ffffff !important;
	color: rgba(85, 100, 85, 1) !important;
}

/* the icon: block kills the inline baseline gap that pushes it off-centre;
   currentColor makes it follow the button's rest/hover colours */
.namas-planas .namas-planas__zoom-btn svg {
	display: block !important;
	width: 14px !important;
	height: 14px !important;
	margin: 0 !important;
	pointer-events: none !important;
}

.namas-planas .namas-planas__zoom-btn:disabled {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
}

/* ---------- details card ---------- */

.namas-planas__card {
	position: absolute !important;
	top: 0;
	left: 0;
	z-index: 20 !important;   /* above the zoom buttons; pointer-events:none anyway */
	min-width: 232px !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 18px 20px 20px !important;
	border: none !important;
	border-radius: 4px !important;
	background: #243124 !important;
	color: #ffffff !important;
	line-height: 1.5 !important;
	font-size: 15px !important;
	text-align: left !important;
	pointer-events: none !important;   /* never eat the hover of the plot underneath */
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28) !important;
}

.namas-planas__card[hidden] {
	display: none !important;
}

.namas-planas__title {
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 23.18px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	color: rgba(255, 255, 255, 1) !important;
}

.namas-planas__rows {
	margin: 0 !important;
	padding: 0 !important;
}

.namas-planas__row {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 28px !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
}

.namas-planas__row:last-child {
	margin-bottom: 0 !important;
}

.namas-planas__row[hidden] {
	display: none !important;
}

.namas-planas__row dt {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 16.36px !important;
	font-weight: 200 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	color: rgba(255, 255, 255, 1) !important;
	white-space: nowrap !important;
}

.namas-planas__row dd {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 16.36px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-align: right !important;
	text-transform: capitalize !important;
	white-space: nowrap !important;   /* keep "189 000 €" on one line */
	color: rgba(255, 255, 255, 1) !important;
}

/* capitalize would turn the area unit into "M²"; square metres stay lowercase */
.namas-planas__row[data-row="plotas"] dd,
.namas-planas__row[data-row="sklypo_plotas"] dd {
	text-transform: none !important;
}

.namas-planas__row[data-row="busena"] dd {
	color: var(--namas-planas-status, #34C759) !important;
}

/* CTA only exists for the touch panel; hover cards don't need it. The panel
   rule below re-enables it with higher specificity, so !important is safe.
   No background by design — it reads as a text action inside the dark card;
   the padding stays so the tap target keeps a comfortable size. */
.namas-planas .namas-planas__cta {
	display: none !important;
	margin: 16px 0 0 !important;
	padding: 10px 18px !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	color: rgba(232, 236, 231, 1) !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 18.83px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
}

.namas-planas .namas-planas__cta:hover,
.namas-planas .namas-planas__cta:focus {
	background: none !important;
	color: rgba(255, 255, 255, 1) !important;
	text-decoration: underline !important;
}

/* ---------- touch: the card opens as a centred modal ---------- */

.namas-planas__card.is-modal {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 100000 !important;
	max-width: calc(100vw - 32px) !important;
	pointer-events: auto !important;   /* the ✕ and the CTA must be tappable */
}

.namas-planas__card.is-modal .namas-planas__cta {
	display: block !important;
}

/* room for the ✕ so the title never runs underneath it */
.namas-planas__card.is-modal .namas-planas__title {
	padding-right: 36px !important;
}

.namas-planas__backdrop {
	position: fixed !important;
	inset: 0 !important;
	z-index: 99999 !important;
	background: rgba(0, 0, 0, 0.45) !important;
}

.namas-planas__backdrop[hidden] {
	display: none !important;
}

/* ---------- modal close button ---------- */

.namas-planas .namas-planas__close {
	display: none !important;          /* only the modal shows it */
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	color: rgba(232, 236, 231, 1) !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.namas-planas__card.is-modal .namas-planas__close {
	display: flex !important;
}

.namas-planas .namas-planas__close:hover,
.namas-planas .namas-planas__close:focus-visible {
	color: #ffffff !important;
	background: none !important;
}

.namas-planas .namas-planas__close svg {
	display: block !important;
	width: 14px !important;
	height: 14px !important;
	pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.namas-planas__area,
	.namas-planas .namas-planas__zoom-btn {
		transition: none !important;
	}
}