/* 2026-05-30 20:30 v1.1
 * - Added image overlay sizing and filtered backdrop for overlay2023.
 */
div.overlay[overlay-type="html"]  {
	background-color: color-mix(in srgb, var(--color_darkest) 50%, transparent);
}
div.overlay[overlay-type="image"] {
	z-index: 889;
	background: color-mix(in srgb, var(--color_darkest) 70%, transparent);
	backdrop-filter: blur(12px) saturate(80%);
	-webkit-backdrop-filter: blur(12px) saturate(80%);
}
div.overlay[overlay-type="image"] .overlay-inner {
	box-sizing: border-box;
	display: grid;
	width: 100vw;
	min-height: 100vh;
	padding: 40px;
	overflow: hidden;
}
div.overlay[overlay-type="image"] .overlay-content {
	display: grid;
	width: 100%;
	height: 100%;
	margin: auto;
	place-items: center;
}
div.overlay[overlay-type="image"] .overlay-image-box {
	display: grid;
	max-width: calc(100vw - 80px);
	max-height: calc(100vh - 80px);
	margin: auto;
	place-items: center;
}
div.overlay[overlay-type="image"] .overlay-image-box img {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(100vw - 80px) !important;
	max-height: calc(100vh - 80px) !important;
	margin: auto !important;
	object-fit: contain !important;
}
div.overlay[overlay-type="html"] .overlay-content {
	width: 720px;
	max-width: calc(100vw - 40px);
	margin: auto;
	background-color: var(--color_darkest);
	background-color: var(--color_lightgray);
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.6);
}
div.overlay[overlay-type="html"] .overlay-content * {
	--color_text:var(--color_darkest);
}
div.overlay[overlay-type="html"] .overlay-content h2 {
	color:var(--color_darkest);
}
body[overlay-state="open"] {
	overflow: hidden;
}
body[overlay-state="open"] .toast-wrapper {
	pointer-events: none;
	opacity: 0;
}
.overlay-inner {
	overflow: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}

@media only screen and (max-width: 760px) {
	div.overlay[overlay-type="image"] .overlay-inner {
		padding: 15px;
	}
	div.overlay[overlay-type="image"] .overlay-image-box,
	div.overlay[overlay-type="image"] .overlay-image-box img {
		max-width: calc(100vw - 30px) !important;
		max-height: calc(100vh - 80px) !important;
	}
}