/* ============================================================
 * Sarana Villas — Floor Plan Popover (v0.4.0)
 *
 * Brand-aligned floating trigger + modal for [sarana_villa_floor_plan].
 * Inherits Sarana theme CSS variables (--gold, --deep, --cream,
 * --dark, --font-body) — falls back to safe defaults when the
 * theme is not active.
 *
 * Selectors prefixed `.sv-floorplan*` (avoids collision with
 * .sv-card-* / .sv-grid-* / .sv-specs-* / .sv-sidebar-* / etc.)
 * ============================================================ */

/* ── Wrap (positioning context only) ─────────────────────── */
.sv-floorplan {
	/* container — no layout impact */
}

/* ── Trigger — floating variant (fixed bottom-left) ──────── */
.sv-floorplan--floating .sv-floorplan__trigger {
	position: fixed;
	bottom: 30px;
	left: 30px;
	z-index: 99;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	background: var(--deep, #111410);
	color: var(--gold, #b8955a);
	border: 1px solid var(--gold, #b8955a);
	border-radius: 0;
	cursor: pointer;
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	transition: background 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.sv-floorplan--floating .sv-floorplan__trigger:hover,
.sv-floorplan--floating .sv-floorplan__trigger:focus-visible {
	background: var(--gold, #b8955a);
	color: var(--dark, #0d0d0d);
	transform: translateY(-2px);
	outline: none;
}

.sv-floorplan--floating .sv-floorplan__trigger svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ── Trigger — inline variant (no fixed positioning) ─────── */
.sv-floorplan--inline .sv-floorplan__trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	background: transparent;
	color: var(--gold, #b8955a);
	border: 1px solid var(--gold, #b8955a);
	border-radius: 0;
	cursor: pointer;
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	transition: background 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sv-floorplan--inline .sv-floorplan__trigger:hover,
.sv-floorplan--inline .sv-floorplan__trigger:focus-visible {
	background: var(--gold, #b8955a);
	color: var(--dark, #0d0d0d);
	outline: none;
}

.sv-floorplan--inline .sv-floorplan__trigger svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ── Modal ────────────────────────────────────────────────── */
.sv-floorplan__modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sv-floorplan__modal:not([hidden]) {
	opacity: 1;
	pointer-events: auto;
}

/* Overlay (click-to-close backdrop) */
.sv-floorplan__overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 13, 13, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: zoom-out;
}

/* Content (image + caption + close) */
.sv-floorplan__content {
	position: relative;
	max-width: min(1100px, 90vw);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	transform: scale(0.96);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sv-floorplan__modal:not([hidden]) .sv-floorplan__content {
	transform: scale(1);
}

/* Image — cream backdrop for floor-plan readability */
.sv-floorplan__image {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	display: block;
	background: var(--cream, #f5f0e8);
	padding: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Caption */
.sv-floorplan__caption {
	font-family: var(--font-body, 'Montserrat', sans-serif);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--gold, #b8955a);
	margin: 0;
	text-align: center;
}

/* Close button (top-right, outside image) */
.sv-floorplan__close {
	position: absolute;
	top: -50px;
	right: 0;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--gold, #b8955a);
	color: var(--gold, #b8955a);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, color 0.3s ease;
}

.sv-floorplan__close:hover,
.sv-floorplan__close:focus-visible {
	background: var(--gold, #b8955a);
	color: var(--dark, #0d0d0d);
	outline: none;
}

.sv-floorplan__close svg {
	width: 20px;
	height: 20px;
}

/* Body scroll lock when modal open */
body.sv-floorplan-open {
	overflow: hidden;
}

/* ── Responsive ──────────────────────────────────────────── */
/* Tablet — slightly tighter padding, keep label visible (v0.4.1) */
@media (max-width: 900px) {
	.sv-floorplan--floating .sv-floorplan__trigger {
		padding: 12px 16px;
		gap: 8px;
		font-size: 10px;
		letter-spacing: 2px;
	}
	.sv-floorplan--floating .sv-floorplan__trigger svg {
		width: 16px;
		height: 16px;
	}
}

/* Mobile — tighter trigger position + close offset (label still visible v0.4.1) */
@media (max-width: 600px) {
	.sv-floorplan--floating .sv-floorplan__trigger {
		bottom: 20px;
		left: 20px;
		padding: 10px 14px;
		gap: 7px;
		font-size: 9px;
		letter-spacing: 1.5px;
	}
	.sv-floorplan--floating .sv-floorplan__trigger svg {
		width: 14px;
		height: 14px;
	}
	.sv-floorplan__modal {
		padding: 16px;
	}
	.sv-floorplan__image {
		padding: 12px;
	}
	.sv-floorplan__close {
		top: -45px;
		width: 36px;
		height: 36px;
	}
}

/* Reduced motion — skip transitions but preserve open/close visibility */
@media (prefers-reduced-motion: reduce) {
	.sv-floorplan--floating .sv-floorplan__trigger,
	.sv-floorplan--inline .sv-floorplan__trigger,
	.sv-floorplan__modal,
	.sv-floorplan__content,
	.sv-floorplan__close {
		transition: none;
	}
	.sv-floorplan--floating .sv-floorplan__trigger:hover {
		transform: none;
	}
}