/**
 * AVM Template: Tailwind dark dialog (Headless UI-inspired)
 * - Dark panel (#1f2937), gray-400 text, white title, red-500 primary button.
 * - Outline ring on panel (outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px).
 * - Overlay fade and dialog transform transitions.
 * - Cancel button uses white/10 with inset ring white/5, hover white/20.
 *
 * Note: Colors for bg/text/buttons are driven by plugin settings via inline CSS.
 * This file focuses on structure, motion, and subtle effects to match the Tailwind example.
 */

.avm-modal {
	--tw-overlay-in: 300ms cubic-bezier(0.0, 0.0, 0.2, 1);  /* ease-out */
	--tw-overlay-out: 200ms cubic-bezier(0.4, 0.0, 1, 1);   /* ease-in */
	--tw-dialog-in: 300ms cubic-bezier(0.0, 0.0, 0.2, 1);   /* ease-out */
	--tw-dialog-out: 200ms cubic-bezier(0.4, 0.0, 1, 1);    /* ease-in */
}

/* Overlay transitions (opacity) */
.avm-modal .avm-overlay {
	opacity: 0;
	transition: opacity var(--tw-overlay-in);
}

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

/* Dialog: rounded-lg, dark surface, outline ring, shadow-xl */
.avm-modal .avm-dialog {
	border-radius: 0.5rem; /* rounded-lg */
	box-shadow:
	0 20px 25px -5px rgba(0, 0, 0, 0.1),
	0 8px 10px -6px rgba(0, 0, 0, 0.1);
	outline: 1px solid rgba(255,255,255,0.10); /* outline-white/10 */
	outline-offset: -1px; /* -outline-offset-1 */
	padding: 1.5rem; /* sm:p-6 */
	transform: translateY(1rem) scale(0.98); /* data-closed:translate-y-4 + sm:scale-95 */
	opacity: 0;
	transition:
	transform var(--tw-dialog-in),
	opacity var(--tw-dialog-in);
}

/* Open state animation end */
.avm-modal.avm-open .avm-dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Title similar to text-base font-semibold text-white */
.avm-modal .avm-dialog h2 {
	font-size: 1rem; /* text-base */
	line-height: 1.5rem;
	font-weight: 600; /* font-semibold */
	margin: 0 0 0.75rem 0; /* slightly more space below heading */
}

/* Body copy spacing similar to mt-2 and text-sm */
.avm-modal .avm-description,
.avm-modal .avm-consent-hint,
.avm-modal .avm-consent-fallback,
.avm-modal .avm-body p {
	margin-top: 0.75rem; /* slightly more space from heading */
	margin-bottom: 0.5rem; /* space before labels/controls */
	font-size: 0.875rem; /* text-sm */
	line-height: 1.25rem;
}

/* Lead area with icon badge (Tailwind demo-inspired) */
.avm-modal .avm-lead {
	display: flex;
	align-items: flex-start;
	gap: 1rem; /* gap-4 */
}
.avm-modal .avm-icon-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;  /* size-12 */
	height: 3rem; /* size-12 */
	border-radius: 9999px; /* rounded-full */
	background-color: rgba(239, 68, 68, 0.10); /* red-500/10 */
	flex-shrink: 0; /* shrink-0 */
}
@media (min-width: 640px) {
	.avm-modal .avm-icon-badge {
	width: 2.5rem;  /* sm:size-10 */
	height: 2.5rem; /* sm:size-10 */
	}
}
.avm-modal .avm-icon {
	width: 2rem;   /* size-8 - bigger icon */
	height: 2rem;  /* size-8 */
	color: #f87171; /* text-red-400 */
}
.avm-modal .avm-lead-content {
	margin-top: 0.125rem; /* slight optical alignment */
}

/* Indent main content to align with text column (so controls don't sit under the icon) */
.avm-modal .avm-lead + .avm-body {
	padding-left: calc(3rem + 1rem); /* badge 3rem + gap 1rem = 4rem */
}
@media (min-width: 640px) {
	.avm-modal .avm-lead + .avm-body {
	padding-left: calc(2.5rem + 1rem); /* sm: badge 2.5rem + gap 1rem = 3.5rem */
	}
}

/* Methods row: flex w/spacing like sm:flex sm:items-start gap-4 */
.avm-modal .avm-methods {
	display: inline-flex;
	align-items: center;
	gap: 1rem; /* gap-4 */
	margin: 0.75rem 0 0.75rem; /* more separation from description and following content */
}

.avm-modal .avm-methods label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem; /* space between control and text */
	padding: 0.25rem 0; /* small clickable area */
	border-radius: 0.375rem; /* rounded-md */
	font-weight: 600; /* font-semibold */
	font-size: 0.875rem; /* match content text-sm */
	line-height: 1.25rem;
	color: #e5e7eb; /* gray-200 */
	background-color: transparent;
	transition: background-color 120ms ease, color 120ms ease;
}
.avm-modal .avm-methods label:hover {
	background-color: rgba(255,255,255,0.06); /* white/10-ish hover surface */
}

/* Make native controls a touch larger and aligned */
.avm-modal .avm-methods input[type="radio"],
.avm-modal .avm-methods input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	flex: none;
}

/* DOB block: label + input tweaked for dark panel */
.avm-modal .avm-dob {
	margin-top: 0.75rem; /* more separation from description/radios */
}

.avm-modal .avm-dob label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600; /* font-semibold */
	font-size: 0.875rem; /* match content text-sm */
	line-height: 1.25rem;
	color: #e5e7eb; /* gray-200 for dark surfaces */
}

/* Add smooth transitions on the input for border/outline to echo focus ring */
.avm-modal .avm-dob input {
	width: 100%;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.5rem; /* rounded-md */
	padding: 0.625rem 0.75rem; /* px-3 py-2.5 */
	font-size: 0.875rem;
	transition:
	outline-color 160ms ease,
	border-color 160ms ease,
	box-shadow 160ms ease,
	background-color 160ms ease,
	color 160ms ease;
}

/* Actions: place buttons to the right with spacing */
.avm-modal .avm-actions {
	display: flex;
	justify-content: flex-end; /* sm:flex-row-reverse look comes from HTML order; we keep right-justified */
	align-items: center;
	gap: 0.75rem; /* a bit more spacing */
	margin-top: 1rem; /* mt-5 sm:mt-4 */
}

/* Buttons: shared behavior */
.avm-modal .avm-actions .avm-submit,
.avm-modal .avm-actions .avm-cancel {
	border-radius: 0.5rem; /* rounded-md */
	padding: 0.5rem 0.75rem; /* px-3 py-2 */
	font-size: 0.875rem; /* text-sm */
	line-height: 1.25rem;
	font-weight: 600; /* font-semibold */
	transition:
	transform 80ms ease,
	filter 140ms ease,
	background-color 140ms ease,
	color 140ms ease,
	box-shadow 140ms ease;
}

/* Primary button hover to red-400 (approx) */
.avm-modal .avm-actions .avm-submit:hover {
	background-color: #f87171; /* red-400 */
}

/* Secondary button: white/10 bg + inset ring white/5, hover white/20 */
.avm-modal .avm-actions .avm-cancel {
	/* inset ring */
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.avm-modal .avm-actions .avm-cancel:hover {
	background-color: rgba(255,255,255,0.20);
}

/* Subtle press effect */
.avm-modal .avm-actions .avm-submit:active,
.avm-modal .avm-actions .avm-cancel:active {
	transform: translateY(1px);
}

/* Close button: subtle hover background similar to white/10 surfaces */
.avm-modal .avm-close {
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	border-radius: 9999px;
	transition: background-color 140ms ease, color 140ms ease, transform 80ms ease;
}

.avm-modal .avm-close:hover {
	background-color: rgba(255,255,255,0.08);
}

.avm-modal .avm-close:active {
	transform: scale(0.96);
}

/* Error line similar to text-sm and red tones */
.avm-modal .avm-error {
	color: #fca5a5; /* red-300-ish for dark bg readability */
	font-size: 0.875rem;
	line-height: 1.25rem;
	margin-top: 0.75rem;
	min-height: 1.125rem;
}

/* Responsive tweaks similar to sm:my-8 sm:max-w-lg */
@media (min-height: 600px) {
	.avm-modal .avm-dialog {
	margin: 8vh auto;
	max-width: 32rem; /* sm:max-w-lg */
	}
}

/* Small screens: tighter padding but keep rounded and ring */
@media (max-width: 480px) {
	.avm-modal .avm-dialog {
	padding: 1rem; /* p-4 */
	border-radius: 0.5rem; /* rounded-lg */
	}
}