/* MW Popup: front-end styles. Colours, width, padding and timing arrive as CSS variables on .mwp. */

html.mwp-scroll-locked { overflow: hidden; }

.mwp[hidden] { display: none !important; }

.mwp {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	pointer-events: none;
}

.mwp__overlay {
	position: absolute;
	inset: 0;
	background: var(--mwp-overlay, rgba(0, 0, 0, .6));
	opacity: 0;
	transition: opacity var(--mwp-dur, 400ms) ease;
	pointer-events: auto;
}

.mwp--no-overlay { pointer-events: none; }
.mwp--no-overlay .mwp__overlay { pointer-events: none; }

.mwp__box {
	position: relative;
	box-sizing: border-box;
	width: var(--mwp-width, 600px);
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
	padding: var(--mwp-pad, 0);
	background: var(--mwp-bg, #fff);
	border-radius: var(--mwp-radius, 8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	opacity: 0;
	pointer-events: auto;
	transition: opacity var(--mwp-dur, 400ms) ease, transform var(--mwp-dur, 400ms) ease;
	outline: none;
}

.mwp__content > :first-child { margin-top: 0; }
.mwp__content > :last-child { margin-bottom: 0; }
.mwp__content img { display: block; max-width: 100%; height: auto; }

/* `all: unset` plus a two-class selector: themes restyle every <button> (colour,
   padding, position), and this one has to look the same on every site. */
.mwp .mwp__close {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font: 400 24px/36px Arial, sans-serif;
	text-align: center;
	cursor: pointer;
}
.mwp .mwp__close:hover, .mwp .mwp__close:focus-visible { background: rgba(0, 0, 0, .8); }
.mwp .mwp__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Positions */
.mwp--pos-top { align-items: flex-start; }
.mwp--pos-bottom-right { align-items: flex-end; justify-content: flex-end; }
.mwp--pos-bottom-left { align-items: flex-end; justify-content: flex-start; }

/* Open state */
.mwp--open .mwp__overlay { opacity: 1; }
.mwp--open .mwp__box { opacity: 1; transform: none; }

/* Animations: where the box starts from */
.mwp--anim-zoom .mwp__box { transform: scale(.9); }
.mwp--anim-slide .mwp__box { transform: translateY(40px); }
.mwp--anim-none .mwp__box, .mwp--anim-none .mwp__overlay { transition: none; }

@media (max-width: 480px) {
	.mwp { padding: 10px; }
	.mwp--pos-bottom-right, .mwp--pos-bottom-left { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.mwp__box, .mwp__overlay { transition: none; }
}