/* MageyAds Manager — front-end */

.mgads-ad {
	position: relative;
	margin: 26px auto;
	max-width: 100%;
	opacity: 0;
	transform: translateY(10px);
	animation: mgads-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.mgads-align-center { margin-left: auto; margin-right: auto; text-align: center; }
.mgads-align-left { margin-left: 0; margin-right: auto; text-align: left; }
.mgads-align-right { margin-left: auto; margin-right: 0; text-align: right; }

.mgads-label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-bottom: 6px;
}

.mgads-creative { display: block; line-height: 0; }
.mgads-img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: inline-block;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.mgads-link { display: inline-block; text-decoration: none; border: 0; }
.mgads-link:focus-visible { outline: 2px solid var(--mgads-accent, #5b5bd6); outline-offset: 3px; border-radius: 12px; }
.mgads-link:hover .mgads-img { transform: translateY(-3px) scale(1.008); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.6); }

.mgads-sticky { position: sticky; top: 20px; }

/* ---------- Popup ---------- */
.mgads-popup {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* Without an overlay the container must not swallow clicks on the page behind it. */
	pointer-events: none;
}
.mgads-popup[hidden] { display: none; }
.mgads-popup__overlay,
.mgads-popup__box { pointer-events: auto; }
.mgads-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 10, 20, 0.62);
	backdrop-filter: blur(3px);
	animation: mgads-fade 0.3s ease both;
}
.mgads-popup__box {
	position: relative;
	max-width: min(94vw, 720px);
	/* Scrolling lives on the body so close buttons placed outside are not clipped. */
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.mgads-popup__body { max-height: 88vh; overflow: auto; line-height: 0; border-radius: 18px; }
.mgads-popup__body img { max-width: 100%; height: auto; display: block; border-radius: 18px; }

.mgads-anim-fade { animation: mgads-fade 0.35s ease both; }
.mgads-anim-zoom { animation: mgads-zoom 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.mgads-anim-slide-up { animation: mgads-slide 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.mgads-anim-flip { animation: mgads-flip 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) both; }

.mgads-popup__close {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	border: 0;
	color: #111;
	background: #fff;
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.7);
	transition: transform 0.2s ease, background 0.2s ease;
}
.mgads-popup__close:hover { transform: scale(1.08) rotate(90deg); }
.mgads-close-style--circle { border-radius: 50%; }
.mgads-close-style--square { border-radius: 8px; }
.mgads-close-style--soft { border-radius: 12px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); }
.mgads-close-style--text {
	background: transparent;
	box-shadow: none;
	color: #111;
	text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}
/* Outside the white box the button sits on the page/overlay, so invert it. */
.mgads-close--outside-tr.mgads-close-style--text,
.mgads-close--bottom.mgads-close-style--text {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.mgads-close--inside-tr { top: 8px; right: 8px; }
.mgads-close--inside-tl { top: 8px; left: 8px; }
.mgads-close--outside-tr { top: -16px; right: -16px; }
.mgads-close--bottom { bottom: -46px; left: 50%; transform: translateX(-50%); }
.mgads-close--bottom:hover { transform: translateX(-50%) scale(1.08); }

@keyframes mgads-in { to { opacity: 1; transform: none; } }
@keyframes mgads-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mgads-zoom { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes mgads-slide { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes mgads-flip { from { opacity: 0; transform: perspective(900px) rotateX(-16deg) translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.mgads-ad, .mgads-popup *, .mgads-img { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}