/*
 * Custom apartment picker (SVG) — replaces image-map-pro.
 * Hotspot colour is driven by the apartment's availability status.
 */

/* View tabs and (multi-building) sections: only the active one is shown. */
.appartment-picker.tabcontent {
	display: none;
}

.appartment-picker.tabcontent.is-active {
	display: block;
}

.linnestad-building-section {
	display: none;
}

.linnestad-building-section.is-active {
	display: block;
}

.linnestad-building-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 24px auto 0;
}

/*
 * Block (not inline-block): as an inline element it sat on the text baseline,
 * leaving a few pixels below the image where the panel's dark green background
 * (.appartment-picker) showed through as a strip.
 */
.linnestad-picker {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
	border-radius: 10px;
	overflow: hidden;
}

.linnestad-picker__img {
	display: block;
	width: 100%;
	height: auto;
}

.linnestad-picker__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Clickable regions. Transparent fill still captures pointer events. */
.linnestad-hotspot__shape {
	fill: transparent;
	stroke: transparent;
	stroke-width: 0.15;
	cursor: pointer;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

/*
 * All hotspots are invisible by default (no pre-selection). Status is revealed
 * on hover: the shape lights up in its status colour and the tooltip shows the
 * price / "Solgt" / "Reservert". (Per client: don't pre-tint sold/reserved.)
 */
/*
 * Suppress the browser's default focus ring on the SVG link (Chrome draws it
 * as a black/white rounded box over the shape when the link is clicked or
 * ctrl-clicked) and the grey tap flash on touch. Keyboard users still get a
 * clear indicator via :focus-visible below.
 */
.linnestad-hotspot,
.linnestad-hotspot:focus {
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

/* [data-active] = tapped on touch devices, same treatment as hover. */
.linnestad-hotspot:hover .linnestad-hotspot__shape,
.linnestad-hotspot:focus-visible .linnestad-hotspot__shape,
.linnestad-hotspot[data-active] .linnestad-hotspot__shape {
	fill: rgba(0, 190, 255, 0.35);
	stroke: rgba(0, 190, 255, 0.9);
	outline: none;
}

/* Keyboard focus: dashed white outline so it's visible on any background. */
.linnestad-hotspot:focus-visible .linnestad-hotspot__shape {
	stroke: #fff;
	stroke-width: 0.4;
	stroke-dasharray: 1.2 0.8;
}

.linnestad-hotspot:hover .linnestad-hotspot__shape.status-solgt,
.linnestad-hotspot[data-active] .linnestad-hotspot__shape.status-solgt {
	fill: rgba(190, 0, 0, 0.45);
	stroke: rgba(190, 0, 0, 0.9);
}

.linnestad-hotspot:hover .linnestad-hotspot__shape.status-reservert,
.linnestad-hotspot[data-active] .linnestad-hotspot__shape.status-reservert {
	fill: rgba(224, 148, 0, 0.48);
	stroke: rgba(224, 148, 0, 0.9);
}

/* Tooltip (matches the site's dark-green surface). */
.linnestad-picker__tooltip {
	position: absolute;
	z-index: 5;
	max-width: 280px;
	padding: 20px 22px;
	background-color: #405244;
	color: #fff;
	border-radius: 10px;
	font-family: "CanelaText", serif;
	line-height: 1.35;
	/* Not interactive until shown, so it never blocks hovering other units. */
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.12s ease, transform 0.12s ease;
}

/* Once visible the tooltip is hoverable/clickable ("Se leilighet"). */
.linnestad-picker__tooltip.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/*
 * Typography mirrors production's picker styling, which lived in the
 * Customizer as:  .squares-container h3 { font-size: 1.4rem }
 *                 .squares-element p, .squares-element div a { font-size: 1rem }
 * Heading declared no font-weight there, so keep it un-bolded, with the
 * small 5px gap the tooltip paragraph used.
 */
.linnestad-picker__tooltip h3 {
	margin: 0 0 5px;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.25;
	color: #fff;
}

.linnestad-picker__tooltip p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

/* Taken units: compact box, plain "Solgt!" line (matches production). */
.linnestad-picker__tooltip.is-taken {
	max-width: 200px;
}

.linnestad-picker__status {
	margin: 0 !important;
	color: #fff;
}

.linnestad-picker__btn {
	display: inline-block;
	margin-top: 16px;
	padding: 10px 20px;
	background: #111;
	color: #fff;
	border-radius: 6px;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
}

.linnestad-picker__btn:hover,
.linnestad-picker__btn:focus {
	background: #000;
	color: #fff;
}

/* Small screens: keep the preview box compact so it fits over the image. */
@media only screen and (max-width: 600px) {
	.linnestad-picker__tooltip {
		max-width: 62%;
		padding: 14px 16px;
	}

	.linnestad-picker__tooltip h3 {
		font-size: 1.15rem;
	}

	.linnestad-picker__tooltip p {
		font-size: 0.9rem;
	}

	.linnestad-picker__btn {
		margin-top: 12px;
		padding: 8px 14px;
		font-size: 0.9rem;
	}
}