/**
 * Modal component
 *
 * Built on native <dialog> opened with showModal(), so focus trapping, Escape
 * to close, top-layer stacking and focus restoration come from the browser
 * rather than from script. The <dialog> itself is a transparent full-viewport
 * flex container; `.modal__dialog` is the visible panel, which keeps clicking
 * the backdrop easy to detect (the click lands on the dialog, not the panel).
 *
 * Render with thyme_modal_open() / thyme_modal_close() — see inc/modal.php.
 *
 *   <dialog class="modal modal--prompt" id="otp">
 *     <div class="modal__dialog">
 *       <button class="modal__close" data-modal-close>…</button>
 *       <h2 class="modal__title">Verify OTP</h2>
 *       <p class="modal__text">We've sent a 6-digit code…</p>
 *       <div class="modal__body"> … </div>
 *     </div>
 *   </dialog>
 */

.modal {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	padding: var(--space-4);
	background: transparent;
	border: 0;
	overflow: auto;
	overscroll-behavior: contain;
}

.modal[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal::backdrop {
	background: rgba(31, 31, 31, 0.6);
}

/* Set by main.js while any modal is open. */
.has-modal-open,
.has-modal-open body {
	overflow: hidden;
}

.modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(100%, var(--container-md));
	max-height: calc(100dvh - var(--space-8));
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-none);
	overflow: hidden;
}

/* --- Close --- */

.modal__close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 1;
	flex: none;
	display: grid;
	place-content: center;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	color: var(--color-heading);
	background: transparent;
	border: var(--border-width) solid currentcolor;
	cursor: pointer;
	transition: color var(--transition-fast), background var(--transition-fast);
}

.modal__close svg {
	display: block;
	width: 100%;
	height: 100%;
}

.modal__close:hover {
	color: var(--color-accent);
}

.modal__close:focus-visible {
	outline: var(--border-width-strong) solid var(--color-border-strong);
	outline-offset: 2px;
}

/* --- Standard variant: divided header / body / footer --- */

.modal__header,
.modal__body,
.modal__footer {
	padding: var(--space-5) var(--space-6);
}

.modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-right: var(--space-12);
	border-bottom: var(--border-width) solid var(--color-border);
}

.modal__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0;
}

.modal__body {
	overflow-y: auto;
}

.modal__body > :last-child {
	margin-bottom: 0;
}

.modal__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-3);
	border-top: var(--border-width) solid var(--color-border);
}

/**
 * Prompt variant — narrow, centred, undivided. For short single-purpose asks:
 * OTP entry, confirmations, "you're on the list".
 */

.modal--prompt .modal__dialog {
	width: min(100%, 28rem);
	align-items: center;
	padding: clamp(var(--space-10), 7vw, var(--space-16)) var(--space-8);
	text-align: center;
}

.modal--prompt .modal__title {
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	margin: 0 0 var(--space-3);
}

.modal--prompt .modal__text {
	font-size: var(--text-xs);
	line-height: var(--line-normal);
	color: var(--color-text);
	text-wrap: pretty;
	margin: 0;
}

.modal--prompt .modal__body,
.modal--prompt .modal__footer {
	width: 100%;
	padding: 0;
	border: 0;
	overflow: visible;
}

.modal--prompt .modal__body {
	margin-top: var(--space-8);
}

/* Stacked, centred controls — the OTP field and its confirm button. */
.modal__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.modal__form .input {
	width: min(100%, 14rem);
	text-align: center;
}

/* Small print under the controls — "Didn't receive the code?" */
.modal__note {
	margin: var(--space-6) 0 0;
	font-size: var(--text-xs);
	line-height: var(--line-normal);
	color: var(--color-muted);
}

.modal__note strong {
	display: block;
	font-weight: var(--weight-semibold);
	color: var(--color-heading);
}

/* --- Drawer variant — cart, filters --- */

.modal--drawer {
	padding: 0;
}

.modal--drawer[open] {
	justify-content: flex-end;
}

.modal--drawer .modal__dialog {
	width: min(100%, 26rem);
	height: 100%;
	max-height: 100%;
	border: 0;
	border-left: var(--border-width) solid var(--color-border-strong);
}

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