/**
 * AVM Template: Tailwind Elements-style modal
 * Based on https://tw-elements.com/docs/standard/components/modal/
 * Scope: .avm-modal subtree only. Color tokens are controlled by plugin settings via inline CSS.
 */

.avm-modal {
	--avm-te-overlay-duration: 300ms;
	--avm-te-dialog-duration: 300ms;
	--avm-te-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Overlay fade */
.avm-modal .avm-overlay {
	opacity: 0;
	transition: opacity var(--avm-te-overlay-duration) var(--avm-te-ease);
}

.avm-modal.avm-open .avm-overlay {
	opacity: 1;
}

/* Dialog: rounded, elevated, animated entrance similar to TE */
.avm-modal .avm-dialog {
	border: none; /* TE: border-none */
	background: #ffffff; /* TE: bg-white (overridden by inline custom styles if provided) */
	color: #111827;      /* TE: text-current (defaults) */
	padding: 0;          /* Remove base dialog padding; header/body/footer handle their own */
	box-shadow:
	0 20px 25px -5px rgba(0, 0, 0, 0.10),
	0 10px 10px -5px rgba(0, 0, 0, 0.04);
	transform: translateY(-50px);
	opacity: 0;
	transition:
	transform var(--avm-te-dialog-duration) var(--avm-te-ease),
	opacity var(--avm-te-dialog-duration) var(--avm-te-ease);
}

.avm-modal.avm-open .avm-dialog {
	transform: translateY(0);
	opacity: 1;
}

/* Header: title + inline close, with bottom border */
.avm-modal .avm-header {
	display: flex;                /* TE: flex */
	align-items: center;          /* TE: items-center */
	justify-content: space-between; /* TE: justify-between */
	padding: 1rem;                /* TE: p-4 */
	border-bottom: 2px solid rgba(17, 24, 39, 0.06); /* TE: border-b-2 border-neutral-100 */
}

/* Title text */
.avm-modal .avm-title,
.avm-modal h2#avm-title {
	font-size: 1.25rem; /* TE: text-xl */
	line-height: 1.75rem;
	font-weight: 500;   /* TE: font-medium */
	margin: 0;
}

/* Place close button within header on TE template */
.avm-modal .avm-header .avm-close {
	position: static; /* override base absolute */
	top: auto;
	right: auto;
	width: auto; /* SVG dictates size */
	height: auto;
	line-height: 1;
	background: transparent;
	border: none;
	color: #737373; /* TE: text-neutral-500 */
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	transition: color 150ms ease, opacity 150ms ease, transform 80ms ease;
	cursor: pointer;
}
.avm-modal .avm-header .avm-close:hover,
.avm-modal .avm-header .avm-close:focus {
	color: #262626; /* TE: hover:text-neutral-800 */
	outline: none;
}
.avm-modal .avm-header .avm-close:active {
	transform: scale(0.96);
}
/* Size the inline SVG like TE utility [&>svg]:h-6 [&>svg]:w-6 */
.avm-modal .avm-header .avm-close > span > svg {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

/* Body */
.avm-modal .avm-body {
	position: relative; /* TE: relative */
	flex: 1 1 auto;     /* TE: flex-auto */
	padding: 1rem;      /* TE: p-4 */
}

/* Methods: inline with gap similar to TE spacing */
.avm-modal .avm-methods {
	display: inline-flex;
	gap: 1rem;
	margin-bottom: 0.75rem;
	padding-top: 0.75rem; /* extra space above checkbox/radios */
}
.avm-modal .avm-methods label {
	font-weight: 500;
}

/* DOB input */
.avm-modal .avm-dob {
	margin-top: 1rem; /* extra space above DOB section */
}
.avm-modal .avm-dob label {
	display: block;
	margin-bottom: 0.5rem; /* more space between label and input */
	font-weight: 500;
}
.avm-modal .avm-dob input {
	display: block;
	width: 100%;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.5rem;        /* rounded-md-ish */
	padding: 0.625rem 0.75rem;    /* pb-2 pt-2.5 px-6 (approx) */
	transition: box-shadow 150ms ease, border-color 150ms ease, outline-color 150ms ease;
}

/* Footer/actions: top border, right-aligned, TE spacing */
.avm-modal .avm-actions {
	display: flex;                 /* TE: flex */
	flex-shrink: 0;               /* TE: flex-shrink-0 */
	flex-wrap: wrap;              /* TE: flex-wrap */
	align-items: center;          /* TE: items-center */
	justify-content: flex-end;    /* TE: justify-end */
	padding: 1rem 0;                /* TE: p-4 */
	border-top: 2px solid rgba(17, 24, 39, 0.06); /* TE: border-t-2 border-neutral-100 */
	gap: 0.5rem;                  /* spacing between buttons */
	margin-top: 0;                /* keep tight to body */
}

/* Buttons: uppercase, compact, rounded, transitions like TE */
.avm-modal .avm-actions .avm-submit,
.avm-modal .avm-actions .avm-cancel {
	border-radius: 0.375rem;   /* TE: rounded */
	padding: 0.5rem 1rem;      /* TE: pb-2 pt-2.5 px-6 (approx) */
	font-size: 0.85rem;        /* TE: text-xs */
	font-weight: bold;          /* TE: font-medium */
	text-transform: uppercase; /* TE: uppercase */
	line-height: 1.25rem;
	border: none;
	transition: transform 80ms ease, filter 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
/* Remove inline margin-right from JS for TE look */
.avm-modal .avm-actions .avm-cancel {
	margin-right: 0 !important;
}

/* Hover/active states (colors themselves are provided by inline custom styles) */
.avm-modal .avm-actions .avm-submit:hover,
.avm-modal .avm-actions .avm-cancel:hover {
	filter: brightness(0.98);
}
.avm-modal .avm-actions .avm-submit:active,
.avm-modal .avm-actions .avm-cancel:active {
	transform: translateY(1px);
}

/* Primary button subtle shadow like TE */
.avm-modal .avm-actions .avm-submit {
	box-shadow:
	0 1px 2px rgba(0,0,0,0.06),
	0 4px 6px -1px rgba(0,0,0,0.08);
}

/* Error text */
.avm-modal .avm-error {
	color: #b91c1c;
	font-size: 0.9375rem;
	margin-top: 0.5rem;
	min-height: 1.125rem;
}

/* Dark mode (optional best-effort) */
.dark .avm-modal .avm-dialog {
	background: #1f2937; /* dark:bg-surface-dark approximation */
	color: #e5e7eb;
}
.dark .avm-modal .avm-header {
	border-bottom-color: rgba(255,255,255,0.10); /* dark:border-white/10 */
}
.dark .avm-modal .avm-actions {
	border-top-color: rgba(255,255,255,0.10);
}
.dark .avm-modal .avm-header .avm-close {
	color: #9ca3af; /* dark:text-neutral-400 */
}
.dark .avm-modal .avm-header .avm-close:hover,
.dark .avm-modal .avm-header .avm-close:focus {
	color: #d1d5db; /* dark:hover:text-neutral-300 */
}

/* Mobile adjustments */
@media (max-width: 480px) {
	.avm-modal .avm-dialog {
	border-radius: 1rem;
	transform: translateY(-30px);
	}
}