/**
 * Wandhaus — Branded modal dialog (`wh-modal`).
 *
 * Replaces `window.confirm()` / `window.alert()` everywhere a customer- or
 * admin-facing decision needs Wandhaus chrome.
 *
 * Markup (rendered by `template-parts/components/modal.php` or the JS
 * controller in `js/wh-modal.js`):
 *
 *   <div class="wh-modal" role="dialog" aria-modal="true" aria-labelledby="…" hidden>
 *     <div class="wh-modal__scrim"   data-wh-modal-dismiss></div>
 *     <div class="wh-modal__card">
 *       <header class="wh-modal__head">
 *         <span class="wh-modal__icon" aria-hidden="true">…lucide…</span>
 *         <h2 class="wh-modal__title" id="…">…</h2>
 *       </header>
 *       <div class="wh-modal__body">…</div>
 *       <footer class="wh-modal__actions">
 *         <button class="wh-btn wh-btn--ghost"   data-wh-modal-cancel>…</button>
 *         <button class="wh-btn wh-btn--primary" data-wh-modal-confirm>…</button>
 *       </footer>
 *     </div>
 *   </div>
 *
 * Variants:
 *   .wh-modal--danger  → confirm button styled as destructive (terracotta
 *                        border, accent fill, used for "Verwijder", "Annuleer
 *                        bestelling" and similar irreversible actions).
 *   .wh-modal--alert   → no cancel button (single OK).
 *
 * Tokens only — no raw hex / px in rule values. Spec mirror in
 * Vault/01 Brand & Design System/Popup Inventory.md §3.
 */

.wh-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s-4);
}

.wh-modal[hidden] {
	display: none !important;
}

.wh-modal__scrim {
	position: absolute;
	inset: 0;
	/* Modal scrim — ink @ ~62% (design system s-09; was the lighter --scrim .42). */
	background: color-mix(in srgb, var(--ink) 62%, transparent);
	cursor: pointer;
	animation: wh-modal-fade-in 160ms var(--ease) both;
}
/* AlertDialog has no click-outside dismiss → the scrim isn't interactive. */
.wh-modal--no-dismiss .wh-modal__scrim { cursor: default; }

.wh-modal__card {
	position: relative;
	width: 100%;
	max-width: 512px;                 /* DS md (was 440) */
	max-height: min(640px, 85vh);     /* long content scrolls; head + actions stay put */
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);  /* D2 — elevated surfaces are soft (micro-chrome stays sharp) */
	box-shadow: var(--shadow-modal);
	padding: var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	animation: wh-modal-pop 150ms var(--ease) both;  /* DS fade + scale .96→1 */
}

.wh-modal__head {
	flex: 0 0 auto;                   /* sticky head — only the body scrolls */
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
}

.wh-modal__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: var(--bg-alt);
	color: var(--ink);
}

.wh-modal__icon svg {
	width: 20px;
	height: 20px;
}

.wh-modal--danger .wh-modal__icon {
	background: var(--err-soft);
	color: var(--err);
}

.wh-modal__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
}

.wh-modal__body {
	flex: 1 1 auto;          /* the only scroll region when content exceeds max-height */
	overflow-y: auto;
	min-height: 0;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-2);
}

.wh-modal__body p {
	margin: 0 0 var(--s-3);
}

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

.wh-modal__actions {
	flex: 0 0 auto;          /* sticky footer — stays below the scrolling body */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--s-2);
	margin-top: var(--s-2);
}

/* Buttons — kept self-contained so the modal can render anywhere
   without depending on theme button utilities being on the page. */
.wh-modal .wh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	/* Pill per the design-system button canon (preview §Buttons: "Pill
	 * 999px") — every sitewide button family (.btn, ACTIES, filters) is a
	 * pill; the missing radius here was an undocumented divergence, caught
	 * in the 2026-08-05 welcome-popup styling audit. Interactive chrome is
	 * soft; only micro-chrome (badges, code blocks) stays sharp. */
	border-radius: var(--radius-pill);
	padding: var(--s-3) var(--s-6);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
	background: transparent;
}

.wh-modal .wh-btn--primary {
	background: var(--ink);
	color: var(--on-ink);
	border-color: var(--ink);
}

.wh-modal .wh-btn--primary:hover,
.wh-modal .wh-btn--primary:focus-visible {
	background: var(--ink-2);
	border-color: var(--ink-2);
	outline: none;
}

.wh-modal .wh-btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--border-strong);
}

.wh-modal .wh-btn--ghost:hover,
.wh-modal .wh-btn--ghost:focus-visible {
	background: var(--bg-alt);
	border-color: var(--ink);
	outline: none;
}

.wh-modal .wh-btn--danger {
	background: var(--err);
	color: var(--on-ink);
	border-color: var(--err);
}

.wh-modal .wh-btn--danger:hover,
.wh-modal .wh-btn--danger:focus-visible {
	background: var(--err-soft-ink);
	border-color: var(--err-soft-ink);
	outline: none;
}

.wh-modal .wh-btn:focus-visible {
	box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}

/* Mobile — full-bleed sheet with bottom-anchored card. */
@media (max-width: 640px) {
	.wh-modal {
		padding: 0;
		align-items: flex-end;
	}

	.wh-modal__card {
		max-width: none;
		/* Bottom-sheet on phones: soft top corners, flush to the screen edge. */
		border-radius: var(--radius-md) var(--radius-md) 0 0;
		padding: var(--s-5);
		padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
	}

	.wh-modal__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.wh-modal .wh-btn {
		width: 100%;
	}
}

/* Body scroll lock — JS toggles `wh-modal-open` on <html>. */
html.wh-modal-open,
html.wh-modal-open body {
	overflow: hidden;
}

/* Animations */
@keyframes wh-modal-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wh-modal-pop {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.wh-modal__scrim,
	.wh-modal__card {
		animation: none;
	}
}