/**
 * Iframe Facade Stylesheet
 *
 * Scopes layout and overlay positions for blocked YouTube, Vimeo, and Google Maps iframes.
 * Pure CSS triangles and clip-paths, zero external assets or icon fonts.
 */

.bst-facade {
	position: relative;
	overflow: hidden;
	background-color: #0b0f17;
	display: block;
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.bst-facade__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

/* Neutral maps/thumbnail fallback placeholders (grey bg + map-pin SVG background) */
.bst-facade__placeholder {
	width: 100%;
	height: 100%;
	background-color: #1e293b;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b' width='48' height='48'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 56px;
}

/* Specific background icon for YouTube fallbacks */
.bst-facade--youtube .bst-facade__placeholder {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b' width='48' height='48'%3E%3Cpath d='M23 12s-2 5-11 5-11-5-11-5 2-5 11-5 11 5 11 5zm-11-3c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

/* Overlay covering the entire block */
.bst-facade__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(15, 23, 42, 0.45);
	cursor: pointer;
}

/* Circular Play Button Centered (Triangle via CSS clip-path, zero SVG or icons) */
.bst-facade__play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--bst-cc-accent, #2271b1);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bst-facade:hover .bst-facade__play {
	transform: scale(1.1);
}

.bst-facade__play::after {
	content: "";
	width: 18px;
	height: 20px;
	background-color: #fff;
	margin-left: 4px;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* Blocked Notice Panel (absolute centered) */
.bst-facade__notice {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px);
	max-width: 340px;
	background-color: rgba(15, 23, 42, 0.95);
	border: 1px solid #334155;
	padding: 24px;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
}

.bst-facade__notice p {
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 18px 0;
	color: #e2e8f0;
}

.bst-facade__consent-btn {
	font-size: 12px;
	font-weight: 600;
	background-color: var(--bst-cc-accent, #2271b1);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transition: background-color 0.15s ease;
}

.bst-facade__consent-btn:hover {
	filter: brightness(1.1);
}

/* Resolved true enqueued iframe layout */
.bst-cc-resolved-iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	border-radius: 6px;
}