/**
 * @ownership modal
 *
 * dsp-modal.css
 * ----------------
 * Allowed selectors:
 *   .dsp-modal*
 *   .dsp-dialog*
 *   :root
 *   .dsp-quote-wizard*
 *   .dsp-consent*
 *   body.dsp-modal*
 *
 * Forbidden:
 *   body
 *   html
 *   main
 *   .dsp-product-card*
 */

:root {
	--dsp-modal-width-sm: min(24rem, 100%);
	--dsp-modal-width-md: min(32rem, 100%);
	--dsp-modal-width-lg: min(42rem, 100%);
	--dsp-modal-width-wide: min(56rem, 100%);
	--dsp-modal-padding: var(--dsp-space-6);
	--dsp-modal-padding-mobile: var(--dsp-space-5);
	--dsp-modal-viewport-padding: var(--dsp-space-4);
	--dsp-modal-radius: var(--dsp-radius-2xl);
	--dsp-modal-shadow: var(--dsp-shadow-xl);
	--dsp-modal-bg: var(--dsp-elevation-2-bg);
	--dsp-modal-border: 1px solid var(--dsp-color-border-subtle);
	--dsp-modal-backdrop: var(--dsp-color-bg-overlay);
	--dsp-modal-duration: var(--dsp-transition-duration-normal);
	--dsp-modal-easing: var(--dsp-transition-easing-standard);
	--dsp-modal-scale-from: 0.95;
	--dsp-modal-header-gap: var(--dsp-space-4);
	--dsp-modal-header-margin-bottom: var(--dsp-space-4);
	--dsp-modal-title-font: var(--dsp-font-family-heading);
	--dsp-modal-title-size: var(--dsp-font-size-xl);
	--dsp-modal-title-line-height: var(--dsp-line-height-snug);
	--dsp-modal-close-size: 2.25rem;
	--dsp-modal-close-font-size: 1.5rem;
	--dsp-modal-footer-gap: var(--dsp-space-3);
	--dsp-modal-footer-margin-top: var(--dsp-space-5);
}

/* -------------------------------------------------------------------------
 * Shared surface — every modal panel uses identical shell styling
 * ------------------------------------------------------------------------- */

.dsp-modal__dialog,
.dsp-quote-wizard__success-dialog,
.dsp-consent__panel-inner {
	display: flex;
	flex-direction: column;
	width: var(--dsp-modal-width-md);
	max-width: calc(100vw - 2 * var(--dsp-modal-viewport-padding));
	max-height: calc(100vh - 2 * var(--dsp-modal-viewport-padding));
	padding: var(--dsp-modal-padding);
	overflow-y: auto;
	background: var(--dsp-modal-bg);
	color: var(--dsp-color-text-primary);
	border: var(--dsp-modal-border);
	border-radius: var(--dsp-modal-radius);
	box-shadow: var(--dsp-modal-shadow);
}

.dsp-modal__dialog--sm {
	width: var(--dsp-modal-width-sm);
}

.dsp-modal__dialog--md {
	width: var(--dsp-modal-width-md);
}

.dsp-modal__dialog--lg {
	width: var(--dsp-modal-width-lg);
}

.dsp-modal__dialog--wide {
	width: var(--dsp-modal-width-wide);
}

/* -------------------------------------------------------------------------
 * Shared header, title, close button
 * ------------------------------------------------------------------------- */

.dsp-modal__header,
.dsp-consent__panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--dsp-modal-header-gap);
	margin-bottom: var(--dsp-modal-header-margin-bottom);
}

.dsp-modal__title,
.dsp-consent__panel-title {
	margin: 0;
	font-family: var(--dsp-modal-title-font);
	font-size: var(--dsp-modal-title-size);
	font-weight: var(--dsp-font-weight-semibold);
	line-height: var(--dsp-modal-title-line-height);
	color: var(--dsp-color-text-primary);
}

.dsp-modal__close,
.dsp-consent__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--dsp-modal-close-size);
	height: var(--dsp-modal-close-size);
	padding: 0;
	border: 0;
	border-radius: var(--dsp-radius-md);
	background: transparent;
	color: var(--dsp-color-text-secondary);
	font-size: var(--dsp-modal-close-font-size);
	line-height: 1;
	cursor: pointer;
	transition:
		background var(--dsp-transition-fast),
		color var(--dsp-transition-fast);
}

.dsp-modal__close:hover,
.dsp-consent__close:hover {
	background: var(--dsp-color-accent-subtle);
	color: var(--dsp-color-text-primary);
}

.dsp-modal__close:focus-visible,
.dsp-consent__close:focus-visible {
	outline: 2px solid var(--dsp-color-focus-ring);
	outline-offset: 2px;
}

/* Header-less dialogs: pin close button top-right. */
.dsp-modal__dialog > .dsp-modal__close {
	position: absolute;
	top: var(--dsp-space-3);
	right: var(--dsp-space-3);
}

/* -------------------------------------------------------------------------
 * Shared body and footer
 * ------------------------------------------------------------------------- */

.dsp-modal__body {
	flex: 1 1 auto;
}

.dsp-modal__footer,
.dsp-consent__panel-footer,
.dsp-quote-wizard__reset-dialog-actions,
.dsp-quote-wizard__success-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dsp-modal-footer-gap);
	justify-content: flex-end;
	align-items: center;
	margin-top: var(--dsp-modal-footer-margin-top);
}

/* -------------------------------------------------------------------------
 * Shared backdrop (div-based + native <dialog>)
 * ------------------------------------------------------------------------- */

.dsp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--dsp-modal-backdrop);
	opacity: 0;
	transition: opacity var(--dsp-modal-duration) var(--dsp-modal-easing);
}

.dsp-quote-wizard__reset-dialog::backdrop,
.dsp-quote-wizard__success-dialog::backdrop {
	background: var(--dsp-modal-backdrop);
}

/* -------------------------------------------------------------------------
 * Shared open / close animation (div-based + native <dialog>)
 * ------------------------------------------------------------------------- */

.dsp-modal__dialog,
.dsp-quote-wizard__success-dialog {
	opacity: 0;
	transform: scale(var(--dsp-modal-scale-from));
	transition:
		opacity var(--dsp-modal-duration) var(--dsp-modal-easing),
		transform var(--dsp-modal-duration) var(--dsp-modal-easing);
}

.dsp-modal.is-open .dsp-modal__dialog,
.dsp-quote-wizard__success-dialog.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* Close = fade out only (no downward scale). */
.dsp-modal.is-closing .dsp-modal__dialog {
	opacity: 0;
	transform: scale(1);
}

/* -------------------------------------------------------------------------
 * Div-based modal root (behavior in dsp-modal.js)
 * ------------------------------------------------------------------------- */

.dsp-modal {
	position: fixed;
	inset: 0;
	z-index: var(--dsp-z-modal, 500);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--dsp-modal-viewport-padding);
}

.dsp-modal[hidden] {
	display: none;
}

.dsp-modal.is-open .dsp-modal__backdrop {
	opacity: 1;
}

.dsp-modal.is-closing .dsp-modal__backdrop {
	opacity: 0;
}

.dsp-modal__dialog {
	position: relative;
	z-index: 1;
}

body.dsp-modal-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Native <dialog> — reset (hidden unless opened via showModal)
 * ------------------------------------------------------------------------- */

.dsp-quote-wizard__reset-dialog[hidden],
.dsp-quote-wizard__reset-dialog:not([open]) {
	display: none !important;
}

.dsp-quote-wizard__reset-dialog[open] {
	display: flex;
	flex-direction: column;
	width: var(--dsp-modal-width-sm);
	max-width: calc(100vw - 2 * var(--dsp-modal-viewport-padding));
	max-height: calc(100vh - 2 * var(--dsp-modal-viewport-padding));
	padding: var(--dsp-modal-padding);
	overflow-y: auto;
	background: var(--dsp-modal-bg);
	color: var(--dsp-color-text-primary);
	border: var(--dsp-modal-border);
	border-radius: var(--dsp-modal-radius);
	box-shadow: var(--dsp-modal-shadow);
	margin: auto;
}

/* -------------------------------------------------------------------------
 * Native <dialog> centering (browser top layer)
 * ------------------------------------------------------------------------- */

.dsp-quote-wizard__success-dialog {
	margin: auto;
	border: var(--dsp-modal-border);
}

.dsp-quote-wizard__reset-dialog-form {
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Consent panel shell (overlay handled separately for z-index)
 * ------------------------------------------------------------------------- */

.dsp-consent__panel {
	padding: var(--dsp-modal-viewport-padding);
}

.dsp-consent__panel-inner {
	width: var(--dsp-modal-width-md);
	max-height: min(90vh, calc(100dvh - 2 * var(--dsp-modal-viewport-padding)));
}

/* -------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.dsp-modal,
	.dsp-consent__panel {
		padding: var(--dsp-modal-viewport-padding);
	}

	.dsp-modal__dialog,
	.dsp-quote-wizard__success-dialog,
	.dsp-consent__panel-inner {
		width: 100%;
		max-height: calc(100dvh - 2 * var(--dsp-modal-viewport-padding));
		padding: var(--dsp-modal-padding-mobile);
	}

	.dsp-quote-wizard__reset-dialog[open] {
		width: 100%;
		max-height: calc(100dvh - 2 * var(--dsp-modal-viewport-padding));
		padding: var(--dsp-modal-padding-mobile);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dsp-modal__backdrop,
	.dsp-modal__dialog,
	.dsp-quote-wizard__success-dialog {
		transition: none;
	}

	.dsp-modal__dialog,
	.dsp-quote-wizard__success-dialog {
		transform: none;
	}

	.dsp-modal.is-closing .dsp-modal__dialog,
	.dsp-modal.is-open .dsp-modal__dialog,
	.dsp-quote-wizard__success-dialog.is-visible {
		transform: none;
	}
}

/* Light theme: identical modal surfaces across all implementations */
[data-dsp-theme="light"] .dsp-modal__dialog,
[data-dsp-theme="light"] .dsp-quote-wizard__reset-dialog[open],
[data-dsp-theme="light"] .dsp-quote-wizard__success-dialog,
[data-dsp-theme="light"] .dsp-consent__panel-inner {
	background: var(--dsp-color-brand-white);
	border-color: var(--dsp-color-graphite-200);
}