/* Amelia Supported Emails - Frontend Validation Styles */

/* Error state for email input */
.amelia-email-invalid,
input.amelia-email-invalid {
	border-color: #f56c6c !important;
	background-color: #fef0f0 !important;
}

.amelia-email-invalid:focus {
	border-color: #f56c6c !important;
	box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2) !important;
}

/* Error wrapper state */
.amelia-supported-email-error .el-input__inner,
.amelia-supported-email-error input {
	border-color: #f56c6c !important;
}

/* Error message styling */
.amelia-supported-email-error-msg {
	color: #f56c6c;
	font-size: 14px;
	line-height: 1.4;
	padding-top: 4px;
	padding-bottom: 4px;
	position: relative;
	animation: amelia-error-fade-in 0.3s ease;
}

@keyframes amelia-error-fade-in {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* V3 Form specific styles */
[class*='amelia-v2'] .amelia-supported-email-error-msg,
.amelia-app-booking .amelia-supported-email-error-msg {
	margin-top: 4px;
	font-size: 11px;
}

/* Ensure error is visible in different form layouts */
.am-confirm-booking .amelia-supported-email-error-msg,
.amelia-booking .amelia-supported-email-error-msg {
	display: block;
	margin-top: 5px;
}