/**
 * Local fallback + CTA for Google Maps / Street View iframes blocked by Complianz.
 *
 * Styles the markup injected by lib/cmplz-google-maps-fallback.php via the
 * `cmplz_iframe_html` filter. Server-rendered, so visible immediately with
 * no dependency on Complianz's own JS having run yet.
 *
 * @see lib/cmplz-google-maps-fallback.php
 * @see lib/js/cmplz-google-maps-fallback.js
 */

.cmplz-placeholder-parent {
	position: relative;
}

/*
 * Complianz makes this container `display:flex` and may force a height
 * from its own placeholder's aspect ratio. Reset to block flow so height
 * comes from the iframe's own width/height attributes instead.
 */
.cmplz-placeholder-parent:has(> .ihv-cmplz-maps-fallback) {
	display: block !important;
	height: auto !important;
}

.ihv-cmplz-maps-fallback {
	/* Out of flow so it overlays the iframe instead of competing with it as
	 * a flex sibling (works in every browser, independent of :has() above). */
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	border-radius: 3px;
	background-color: #cfdcea;
}

.ihv-cmplz-maps-fallback__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ihv-cmplz-maps-fallback__cta {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 20px;
	padding: 12px 24px;
	border: 0;
	border-radius: 30px;
	background-color: #0073e5;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: background-color 0.15s ease-in-out;
}

.ihv-cmplz-maps-fallback__cta:hover,
.ihv-cmplz-maps-fallback__cta:focus-visible {
	background-color: #005bb8;
}

.ihv-cmplz-maps-fallback__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/*
 * Complianz's duplicate-detection only skips elements carrying its own
 * `.cmplz-blocked-content-notice` class, which our button avoids (that
 * class's styling would fight with ours) -- so it may still insert its
 * default notice. Simplest is to hide it here instead.
 */
.ihv-cmplz-maps-fallback ~ .cmplz-blocked-content-notice {
	display: none !important;
}

/*
 * Hide the fallback once Complianz activates the real iframe. `:has()`
 * gives modern browsers an instant, JS-free transition; the
 * `--activated` class (added by the companion JS) covers browsers without
 * `:has()` support.
 */
.ihv-cmplz-maps-fallback:has(~ iframe.cmplz-activated),
.ihv-cmplz-maps-fallback--activated {
	display: none;
}

@media (max-width: 480px) {
	.ihv-cmplz-maps-fallback__cta {
		margin: 12px;
		padding: 10px 18px;
		font-size: 14px;
	}
}