/*!
 * Keser Mapper Mobile — v2 vizuelni sloj. v1.1.3
 *
 * Stilizuje ISKLJUCIVO nase .kmm2-* elemente (kontrole zuma + CTA panel).
 * Nema selektora za Image Map Pro elemente i nema transformacija na IMP canvas-u.
 * Elementi postoje samo u v2 rezimu na telefonima/tabletima (JS ih ne kreira
 * na desktop-u). Kontrole zuma postoje samo u 'touch' rezimu.
 *
 * Raspored: telefon (osnovna pravila) -> tablet portrait (>= 768px) ->
 * landscape red (tablet landscape, ili nizak landscape telefon). Sve ostaje u
 * toku dokumenta; svi ciljevi >= 44x44px, CTA >= 52px visine.
 *
 * CTA panel je u toku dokumenta ispod mape (nije position:fixed), pa nikad ne
 * prekriva mapu, kontrole zuma ni navigaciju lamela/spratova. Neaktivno i
 * aktivno stanje imaju istu visinu — izbor stana ne pomera sadrzaj ispod.
 *
 * Selektori su namerno dvoklasni da nadjacaju globalne button/a stilove
 * Hello Elementor teme ([type=button]:hover i sl.).
 */

/* ============================================================
 * KONTROLE ZUMA (ispod mape, van IMP canvas-a)
 * ============================================================ */
.kmm2-controls {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
}

.kmm2-controls .kmm2-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid #c8c8c8;
	border-radius: 10px;
	background: #ffffff;
	color: #1a1a1a;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.kmm2-controls .kmm2-btn:hover,
.kmm2-controls .kmm2-btn:focus {
	background: #ffffff;
	color: #1a1a1a;
	border-color: #8f8f8f;
}

.kmm2-controls .kmm2-btn:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}

.kmm2-controls .kmm2-btn:active {
	background: #f0f0f0;
}

.kmm2-controls .kmm2-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.kmm2-controls .kmm2-btn svg {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* ============================================================
 * CTA PANEL (u toku dokumenta, ispod kontrola zuma)
 * ============================================================ */
.kmm2-panel {
	position: relative;
	box-sizing: border-box;
	margin: 8px 0 0;
	padding: 14px 16px 16px;
	border: 1px solid #e2e2e2;
	border-radius: 14px;
	background: #ffffff;
	color: #1a1a1a;
}

.kmm2-panel.kmm2-panel--active {
	border-color: #bba052;
	box-shadow: 0 0 0 2px rgba(187, 160, 82, 0.35);
}

.kmm2-panel .kmm2-panel__status {
	box-sizing: border-box;
	min-height: 24px;
	margin: 0 52px 12px 0;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #1a1a1a;
	overflow-wrap: anywhere;
}

/* Tamni tekst na brand zlatnoj (#bba052): kontrast ~6.8:1 (WCAG AA). */
.kmm2-panel .kmm2-cta {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	border: 0;
	border-radius: 999px;
	background: #bba052;
	color: #1a1a1a;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.kmm2-panel .kmm2-cta[hidden],
.kmm2-panel .kmm2-panel__close[hidden] {
	display: none !important;
}

.kmm2-panel a.kmm2-cta:hover,
.kmm2-panel a.kmm2-cta:focus,
.kmm2-panel a.kmm2-cta:active {
	background: #a68c48;
	color: #1a1a1a;
	text-decoration: none;
}

.kmm2-panel a.kmm2-cta:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 3px;
}

/* Neaktivno stanje: isti oblik, prigusen, nije link. */
.kmm2-panel .kmm2-cta--idle {
	background: #efe9d8;
	color: #6b6b6b;
	cursor: default;
}

.kmm2-panel .kmm2-panel__close {
	position: absolute;
	top: 6px;
	right: 6px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #1a1a1a;
	cursor: pointer;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.kmm2-panel .kmm2-panel__close:hover,
.kmm2-panel .kmm2-panel__close:focus {
	background: #f0f0f0;
	color: #1a1a1a;
}

.kmm2-panel .kmm2-panel__close:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}

.kmm2-panel .kmm2-panel__close svg {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* ============================================================
 * TABLET (>= 768px) — portrait i landscape
 * Bez gornje granice: tablet ucitan u portrait-u (npr. 820px) zadrzava v2
 * i posle rotacije u landscape (> 1024px) — stilovi moraju i tada da vaze.
 * ============================================================ */
@media (min-width: 768px) {
	.kmm2-controls {
		gap: 10px;
		margin-top: 10px;
	}

	.kmm2-controls .kmm2-btn {
		width: 48px;
		height: 48px;
		min-width: 48px;
	}

	.kmm2-panel {
		max-width: 720px;
		margin: 10px auto 0;
		padding: 16px 20px 18px;
	}

	.kmm2-panel .kmm2-panel__status,
	.kmm2-panel .kmm2-cta {
		font-size: 18px;
	}

	.kmm2-panel .kmm2-panel__close {
		top: 8px;
		right: 8px;
	}
}

/* ============================================================
 * LANDSCAPE RED — ime levo, CTA desno, zatvaranje krajnje desno.
 * Tablet landscape (>= 768px) ili nizak landscape telefon (visina <= 500px):
 * stedi visinu, CTA i dalje u toku dokumenta (bez preklapanja).
 * ============================================================ */
@media (orientation: landscape) and (min-width: 768px),
	(orientation: landscape) and (max-height: 500px) {
	.kmm2-panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(240px, 40%) 44px;
		align-items: center;
		column-gap: 16px;
		max-width: 960px;
		padding: 12px 12px 12px 20px;
	}

	.kmm2-panel .kmm2-panel__status {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.kmm2-panel .kmm2-cta {
		grid-column: 2;
		grid-row: 1;
	}

	.kmm2-panel .kmm2-panel__close {
		position: static;
		grid-column: 3;
		grid-row: 1;
	}
}