/**
 * AVM Template: Tailwind Plus (Elements-inspired, light dialog)
 * - White panel, gray-500/75 overlay by preset, smooth overlay/dialog transitions.
 * - Icon badge at top-left with configurable icon color (via avm_tailwind_icon_color) and faint badge bg.
 * - Primary button (red-600 by preset), secondary button white with inset ring gray-300 and hover gray-50.
 * - Action bar uses row-reverse so primary sits on the right, matching the example layout.
 *
 * Note: Colors (bg/text/buttons/overlay) are primarily driven by plugin settings via inline CSS.
 * This file focuses on structure, motion and subtle effects to emulate the Tailwind Plus example.
 */

.avm-modal {
	--tp-overlay-in: 300ms cubic-bezier(0.0, 0.0, 0.2, 1);  /* ease-out */
	--tp-overlay-out: 200ms cubic-bezier(0.4, 0.0, 1, 1);   /* ease-in */
	--tp-dialog-in: 300ms cubic-bezier(0.0, 0.0, 0.2, 1);   /* ease-out */
	--tp-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(--tp-overlay-in);
}

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

/* Dialog: rounded-lg, white surface, outline ring, shadow-xl, entry transform */
.avm-modal .avm-dialog {
	border-radius: 0.5rem; /* rounded-lg */
	background-color: #ffffff;
	color: #374151; /* gray-700 default; overridden by inline CSS */
	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(17, 24, 39, 0.06); /* subtle outline */
	outline-offset: -1px;
	padding: 1.5rem; /* sm:p-6 */
	transform: translateY(1rem) scale(0.98); /* entry motion akin to translate-y-4 & sm:scale-95 */
	opacity: 0;
	transition:
	transform var(--tp-dialog-in),
	opacity var(--tp-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-gray-900 */
.avm-modal .avm-dialog h2 {
	font-size: 1rem; /* text-base */
	line-height: 1.5rem;
	font-weight: 600; /* font-semibold */
	color: #111827; /* gray-900; overridden by inline CSS primary color if needed */
	margin: 0 0 0.5rem 0;
}

/* Description/body copy similar to text-sm text-gray-500 */
.avm-modal .avm-description,
.avm-modal .avm-consent-hint,
.avm-modal .avm-consent-fallback,
.avm-modal .avm-body p {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem; /* text-sm */
	line-height: 1.25rem;
	color: #6b7280; /* gray-500; can be overridden by inline CSS */
}

/* Lead area with icon badge (example-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(220, 38, 38, 0.10); /* red-600/10 baseline; inline CSS sets exact via avm_tailwind_icon_color */
	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: 1.5rem;   /* size-6 */
	height: 1.5rem;  /* size-6 */
	color: #dc2626;  /* red-600 baseline; inline CSS will override */
}
.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: inline-flex w/spacing */
.avm-modal .avm-methods {
	display: inline-flex;
	align-items: center;
	gap: 1rem; /* gap-4 */
	margin: 0.75rem 0; /* 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; /* text-sm */
	line-height: 1.25rem;
	color: #111827; /* gray-900 on light surfaces */
	background-color: transparent;
	transition: background-color 120ms ease, color 120ms ease;
}
.avm-modal .avm-methods label:hover {
	background-color: rgba(17, 24, 39, 0.04); /* subtle 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 */
.avm-modal .avm-dob {
	margin-top: 0.75rem;
}
.avm-modal .avm-dob label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600; /* font-semibold */
	font-size: 0.875rem; /* text-sm */
	line-height: 1.25rem;
	color: #374151; /* gray-700 */
}
.avm-modal .avm-dob input {
	width: 100%;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.5rem; /* rounded-md */
	padding: 0.5rem 0.75rem; /* px-3 py-2 */
	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 and reverse order (primary on right) */
.avm-modal .avm-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: row-reverse; /* match example where primary appears at the right */
	gap: 0.75rem;
	margin-top: 1rem; /* mt-4/5 */
}

/* Buttons: shared behavior */
.avm-modal .avm-actions .avm-submit,
.avm-modal .avm-actions .avm-cancel {
	border-radius: 0.375rem; /* 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,
	border-color 140ms ease;
}

/* Primary hover to red-500 */
.avm-modal .avm-actions .avm-submit:hover {
	filter: brightness(1.02);
}

/* Secondary button: white bg + inset ring gray-300, hover gray-50 */
.avm-modal .avm-actions .avm-cancel {
	background-color: #ffffff;
	color: #111827;
	box-shadow: inset 0 0 0 1px rgba(209, 213, 219, 1); /* inset ring gray-300 */
	margin-right: 0 !important; /* override base template margin to rely on flex gap */
}
.avm-modal .avm-actions .avm-cancel:hover {
	background-color: #f9fafb; /* gray-50 */
}

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

/* Close button: simple "×" with subtle hover background */
.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:active {
	transform: scale(0.96);
}

/* Error line similar to text-sm in red tones */
.avm-modal .avm-error {
	color: #dc2626; /* red-600 */
	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: 15% 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 */
	margin: 6vh 12px;
	width: calc(100% - 24px);
	max-width: none;
	}
}