/**
 * AVM Template: Flowbite-inspired modal styling
 * Scope: .avm-modal subtree only. Colors are primarily set by plugin inline CSS (custom styles).
 * This template focuses on spacing, rounded corners, shadow, and motion similar to Flowbite modals.
 */

.avm-modal {
	--avm-fb-overlay-duration: 200ms;
	--avm-fb-dialog-duration: 220ms;
	--avm-fb-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

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

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

/* Dialog: rounded-lg/xl, shadow-xl/2xl, comfortable padding, subtle translate/scale */
.avm-modal .avm-dialog {
	border-radius: 0.75rem; /* rounded-xl */
	padding: 1.5rem;        /* p-6 */
	box-shadow:
	0 20px 25px -5px rgba(0,0,0,0.1),
	0 10px 10px -5px rgba(0,0,0,0.04);
	transform: translateY(12px) scale(0.985);
	opacity: 0.98;
	transition:
	transform var(--avm-fb-dialog-duration) var(--avm-fb-ease),
	opacity var(--avm-fb-dialog-duration) var(--avm-fb-ease);
}

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

/* Heading spacing and weight */
.avm-modal .avm-dialog h2 {
	font-weight: 700;
	font-size: 1.5rem; /* text-2xl */
	margin: 0 0 0.75rem 0;
}

/* Description spacing */
.avm-modal .avm-description,
.avm-modal .avm-consent-hint,
.avm-modal .avm-consent-fallback {
	margin-bottom: 1rem;
	font-size: inherit;    /* match settings-driven body size */
	font-weight: 300;      /* font-light */
	color: #6b7280;        /* text-gray-500 */
}

/* Methods: inline with spacing */
.avm-modal .avm-methods {
	display: inline-flex;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.avm-modal .avm-methods label {
	font-weight: 500;
}

/* DOB input block */
.avm-modal .avm-dob label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 500;
}

/* Inputs: rounded, border, smooth focus ring (actual colors via inline style) */
.avm-modal .avm-dob input {
	display: block;
	width: 100%;
	border-width: 1px;
	border-style: solid;
	border-radius: 0.5rem; /* rounded-md */
	padding: 0.625rem 0.75rem; /* px-3 py-2.5 */
	transition: box-shadow 160ms ease, border-color 160ms ease, outline-color 160ms ease;
}

/* Inherit global font size for labels, inputs, and placeholders */
.avm-modal .avm-methods label,
.avm-modal .avm-dob label,
.avm-modal .avm-dob input { font-size: inherit !important; line-height: inherit; }
.avm-modal .avm-dob input::placeholder { font-size: inherit !important; }
/* Cross-browser placeholder sizing */
.avm-modal .avm-dob input::-webkit-input-placeholder { font-size: inherit !important; }
.avm-modal .avm-dob input::-moz-placeholder { font-size: inherit !important; }
.avm-modal .avm-dob input:-ms-input-placeholder { font-size: inherit !important; }
.avm-modal .avm-dob input::-ms-input-placeholder { font-size: inherit !important; }

/* Actions: right aligned buttons with subtle hover/active */
.avm-modal .avm-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.avm-modal .avm-actions .avm-submit,
.avm-modal .avm-actions .avm-cancel {
	border-radius: 0.5rem; /* rounded-md */
	padding: 0.625rem 1rem;
	font-weight: 600;
	transition: transform 80ms ease, filter 140ms ease, background-color 140ms ease, color 140ms ease;
}

/* Flowbite-style cancel button */
.avm-modal .avm-actions .avm-cancel {
	background: #ffffff;
	color: #6b7280;           /* text-gray-500 */
	border: 1px solid #e5e7eb;/* border-gray-200 */
}
.avm-modal .avm-actions .avm-cancel:hover,
.avm-modal .avm-actions .avm-cancel:focus {
	background: #f3f4f6;      /* hover:bg-gray-100 */
	color: #111827;           /* hover:text-gray-900 */
}

.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);
}

/* Close button: pill with hover feedback */
.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-close:hover {
	filter: brightness(50%); /* makes it 50% darker */
}

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

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

/* Mobile adjustments */
@media (max-width: 480px) {
	.avm-modal .avm-dialog {
	padding: 1rem; /* p-4 */
	border-radius: 0.75rem; /* rounded-xl */
	}
}