/* ==========================================================================
   Modal Templates — Frontend Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS custom properties — design tokens

   Override any of these in your theme CSS to customise the modal appearance.
   Site admins can adjust the most common values via Settings > Modal Templates.
   -------------------------------------------------------------------------- */

:root {
	--mt-backdrop-color: rgba(0, 0, 0, 0.6);
	--mt-dialog-bg: #fff;
	--mt-dialog-radius: 8px;
	--mt-dialog-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	--mt-dialog-padding: 2rem;
	--mt-dialog-width-custom: 800px;
	--mt-close-color: #555;
	--mt-close-bg-hover: #f0f0f0;
	--mt-z-index: 99999;
}

/* --------------------------------------------------------------------------
   Triggers
   -------------------------------------------------------------------------- */

[data-modal-content-id] {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Shell (backdrop + positioner wrapper)
   -------------------------------------------------------------------------- */

#mt-modal-shell {
	display: none; /* hidden by default; JS adds .mt-modal--open */
	position: fixed;
	inset: 0;
	z-index: var(--mt-z-index);
}

#mt-modal-shell.mt-modal--open,
#mt-modal-shell.mt-modal--closing {
	display: block;
}

/* --------------------------------------------------------------------------
   Backdrop
   -------------------------------------------------------------------------- */

.mt-modal__backdrop {
	position: fixed;
	inset: 0;
	background-color: var(--mt-backdrop-color);
	cursor: pointer;

	/* Fade in */
	animation: mt-backdrop-in 180ms ease forwards;
}

@keyframes mt-backdrop-in {

	from { opacity: 0; }

	to   { opacity: 1; }
}

#mt-modal-shell.mt-modal--closing .mt-modal__backdrop {
	animation: mt-backdrop-out 150ms ease forwards;
}

@keyframes mt-backdrop-out {

	from { opacity: 1; }

	to   { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Positioner — centers the dialog on screen
   -------------------------------------------------------------------------- */

.mt-modal__positioner {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	pointer-events: none; /* clicks fall through to backdrop */
}

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */

.mt-modal__dialog {
	position: relative;
	background: var(--mt-dialog-bg);
	border-radius: var(--mt-dialog-radius);
	box-shadow: var(--mt-dialog-shadow);
	max-height: calc(100dvh - 3rem);
	width: 100%;
	display: flex;
	flex-direction: column;
	pointer-events: all; /* re-enable for dialog itself */

	/* Slide + fade in */
	animation: mt-dialog-in 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mt-dialog-in {

	from {
		opacity: 0;
		transform: translateY(12px) scale(0.97);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

#mt-modal-shell.mt-modal--closing .mt-modal__dialog {
	animation: mt-dialog-out 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mt-dialog-out {

	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	to {
		opacity: 0;
		transform: translateY(8px) scale(0.97);
	}
}

/* Width variants */
.mt-modal__dialog[data-mt-width="small"]  { max-width: 480px; }

.mt-modal__dialog[data-mt-width="medium"] { max-width: 640px; }

.mt-modal__dialog[data-mt-width="large"]  { max-width: 960px; }

.mt-modal__dialog[data-mt-width="full"]   { max-width: calc(100vw - 3rem); }

.mt-modal__dialog[data-mt-width="custom"] { max-width: var(--mt-dialog-width-custom); }

/* --------------------------------------------------------------------------
   Close button
   -------------------------------------------------------------------------- */

.mt-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.125rem;
	color: var(--mt-close-color);
	transition: background 150ms ease, color 150ms ease;
	z-index: 1;
}

.mt-modal__close:hover,
.mt-modal__close:focus-visible {
	background: var(--mt-close-bg-hover);
	color: #111;
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Content area
   -------------------------------------------------------------------------- */

.mt-modal__content {
	overflow-y: auto;
	padding: var(--mt-dialog-padding);
	flex: 1;
	-webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Responsive — small viewports
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	.mt-modal__positioner {
		padding: 1rem;
	}

	.mt-modal__dialog {
		max-height: calc(100dvh - 2rem);
	}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.mt-modal__backdrop,
	.mt-modal__dialog,
	#mt-modal-shell.mt-modal--closing .mt-modal__backdrop,
	#mt-modal-shell.mt-modal--closing .mt-modal__dialog {
		animation: none;
	}
}