/*
 * Styling for the [vtd_splash_ad] shortcode.
 *
 * Both elements ship hidden. mmgwatads.js reveals them only after an ad image
 * has been rendered into the placement, so a placement with no live creative
 * never flashes an empty box.
 *
 * Everything is scoped to the plugin's own IDs and uses no theme variables, so
 * these rules behave the same on any WordPress property.
 */

#vtd_overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 99998;
}

#vtd_splashscreen {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	z-index: 99999;
	/* Kills the inline-element descender gap under the ad image. */
	line-height: 0;
}

#vtd_splashscreen img {
	display: block;
	max-width: 100%;
	height: auto;
}

#vtd_close_splashscreen {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #000;
	font-family: sans-serif;
	font-size: 22px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	/* Themes routinely restyle every <button>; these keep the control round,
	   small and legible without needing !important. */
	min-width: 0;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
}

@media (max-width: 480px) {
	#vtd_close_splashscreen {
		top: -10px;
		right: -10px;
	}
}