/*
 * Yahoo Ads template styles
 *
 * This file styles the template-side ad containers such as #adView and #adBanner.
 * It controls where the Yahoo ad area appears inside the WebGL template,
 * but it does not fully control the real ad creative rendered by the Yahoo SDK.
 *
 * In production:
 * - The template controls the outer slot position and layout.
 * - Yahoo SDK / ad content controls most inner ad markup and rendering.
 *
 * In mock mode:
 * - The template renders its own placeholder elements.
 * - The .yahoo-ads-mock* rules below style those test-only placeholders.
 */

/* Template-controlled slot containers */
#adView,
#adBanner {
	position: absolute;
	z-index: 20;
	pointer-events: none;
}

#adView {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

#adBanner {
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
	transform: translateX(-50%);
	width: min(100%, 360px);
	display: flex;
	justify-content: center;
}

#adView:empty,
#adBanner:empty {
	display: none;
}

#adView > *,
#adBanner > * {
	pointer-events: auto;
	max-width: 100%;
}

/* Mock placeholders for test environments only */
.yahoo-ads-mock {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.yahoo-ads-mock-reward,
.yahoo-ads-mock-interstitial {
	width: min(100%, 480px);
	height: min(100%, 720px);
	border-radius: 24px;
	position: relative;
}

.yahoo-ads-mock-banner {
	width: 320px;
	height: 50px;
	border-radius: 12px;
}

.yahoo-ads-mock-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.yahoo-ads-mock-close:disabled {
	opacity: 0.45;
	cursor: default;
}