/* Frontend UI: professional, responsive, and scoped to plugin wrappers. */
.fodes-form-wrapper {
	--fodes-bg: linear-gradient(155deg, #f5f7fb 0%, #eef4f1 100%);
	--fodes-surface: #ffffff;
	--fodes-border: #d7e0e6;
	--fodes-text: #1b2a34;
	--fodes-muted: #516572;
	--fodes-accent: #0f766e;
	--fodes-accent-hover: #0b5b55;
	--fodes-focus: #22a39f;
	--fodes-success-bg: #ecfdf3;
	--fodes-success-text: #156f3c;
	--fodes-error-bg: #fff1f0;
	--fodes-error-text: #a8312b;
	--fodes-shadow: 0 14px 34px rgba(16, 38, 56, 0.12);
	--fodes-radius-lg: 18px;
	--fodes-radius-md: 10px;
	--fodes-space-1: 6px;
	--fodes-space-2: 10px;
	--fodes-space-3: 14px;
	--fodes-space-4: 18px;
	--fodes-space-5: 24px;
	--fodes-font: "Manrope", "Nunito Sans", "Trebuchet MS", "Segoe UI", sans-serif;

	margin: 0 0 28px;
	padding: var(--fodes-space-5);
	border: 1px solid var(--fodes-border);
	border-radius: var(--fodes-radius-lg);
	background: var(--fodes-bg);
	box-shadow: var(--fodes-shadow);
	color: var(--fodes-text);
	max-width: 720px;
	position: relative;
	overflow: hidden;
}

.fodes-form-wrapper.fodes-style-boxed {
	background: #ffffff;
	border-color: rgba(15, 118, 110, 0.22);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.fodes-form-wrapper.fodes-style-transparent {
	background: rgba(255, 255, 255, 0.82);
	border-color: rgba(255, 255, 255, 0.8);
	box-shadow: none;
}

.fodes-form-wrapper,
.fodes-form-wrapper * {
	box-sizing: border-box;
}

.fodes-honeypot-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.fodes-form-wrapper::before {
	content: "";
	position: absolute;
	top: -42px;
	right: -42px;
	width: 140px;
	height: 140px;
	border-radius: 999px;
	background: radial-gradient(circle at center, rgba(15, 118, 110, 0.18) 0%, rgba(15, 118, 110, 0) 72%);
	pointer-events: none;
}

.fodes-form-wrapper .fodes-form-title {
	margin: 0 0 var(--fodes-space-4);
	color: var(--fodes-text);
	font: 700 2rem/1.1 var(--fodes-font);
	letter-spacing: -0.02em;
}

.fodes-form {
	position: relative;
	z-index: 1;
	background: var(--fodes-surface);
	border-radius: calc(var(--fodes-radius-lg) - 4px);
	border: 1px solid rgba(27, 42, 52, 0.08);
	padding: var(--fodes-space-4);
}

.fodes-form-fields {
	display: grid;
	gap: var(--fodes-space-3);
}

.fodes-layout-flex {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fodes-layout-column {
	grid-template-columns: 1fr;
}

.fodes-field {
	min-width: 0;
}

.fodes-field > label,
.fodes-field legend {
	display: block;
	margin: 0 0 var(--fodes-space-1);
	color: var(--fodes-text);
	font: 700 1rem/1.3 var(--fodes-font);
}

.fodes-field label input,
.fodes-field label textarea,
.fodes-field label select,
.fodes-field label .fodes-option,
.fodes-field > input,
.fodes-field > textarea,
.fodes-field > select {
	margin-top: var(--fodes-space-1);
}

.fodes-field input[type="text"],
.fodes-field input[type="email"],
.fodes-field input[type="number"],
.fodes-field input[type="date"],
.fodes-field input[type="url"],
.fodes-field input[type="color"],
.fodes-field input[type="tel"],
.fodes-field input[type="password"],
.fodes-field input[type="month"],
.fodes-field input[type="week"],
.fodes-field input[type="datetime-local"],
.fodes-field input[type="time"],
.fodes-field input[type="search"],
.fodes-field input[type="range"],
.fodes-field textarea,
.fodes-field select,
.fodes-field input[type="file"] {
	width: 100%;
	border: 1px solid rgba(15, 118, 110, 0.16);
	border-radius: var(--fodes-radius-md);
	background: #ffffff;
	background-clip: padding-box;
	color: var(--fodes-text);
	font: 500 0.98rem/1.4 var(--fodes-font);
	margin: 0;
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.fodes-field input:not([type="checkbox"]):not([type="radio"]),
.fodes-field textarea,
.fodes-field select {
	min-height: 44px;
	padding: 10px 14px;
}

.fodes-field textarea {
	min-height: 96px;
	height: auto;
	resize: vertical;
}

.fodes-field input[type="file"] {
	padding: 10px;
}

.fodes-field input:focus,
.fodes-field textarea:focus,
.fodes-field select:focus {
	outline: none;
	border-color: var(--fodes-focus);
	box-shadow: 0 0 0 3px rgba(34, 163, 159, 0.18);
}

.fodes-field ::placeholder {
	color: #7a8f9c;
	opacity: 1;
}

.fodes-form input,
.fodes-form textarea,
.fodes-form select {
	color: var(--fodes-text) !important;
	background: #ffffff !important;
	border-color: rgba(15, 118, 110, 0.18) !important;
}

.fodes-field .fodes-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 14px 10px 0;
	font: 500 0.95rem/1.2 var(--fodes-font);
	color: var(--fodes-muted);
}

.fodes-field .fodes-option input[type="radio"],
.fodes-field .fodes-option input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--fodes-accent);
}

.fodes-form-result {
	margin-top: var(--fodes-space-3);
}

.fodes-success,
.fodes-error {
	border-radius: var(--fodes-radius-md);
	padding: 10px 12px;
	border: 1px solid transparent;
	font: 700 0.95rem/1.35 var(--fodes-font);
}

.fodes-success {
	color: var(--fodes-success-text);
	background: var(--fodes-success-bg);
	border-color: #b8ebcb;
}

.fodes-error {
	color: var(--fodes-error-text);
	background: var(--fodes-error-bg);
	border-color: #f3b0ac;
}

.fodes-form-submit {
	margin-top: var(--fodes-space-3);
	border: 0;
	border-radius: var(--fodes-radius-md);
	background: linear-gradient(135deg, var(--fodes-accent) 0%, #15958b 100%);
	color: #ffffff;
	padding: 12px 22px;
	min-height: 46px;
	font: 800 0.98rem/1 var(--fodes-font);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
	box-shadow: 0 8px 16px rgba(15, 118, 110, 0.25);
}

.fodes-form-submit:hover {
	transform: translateY(-1px);
	background: linear-gradient(135deg, var(--fodes-accent-hover) 0%, #11756f 100%);
	box-shadow: 0 10px 20px rgba(15, 118, 110, 0.31);
}

.fodes-form-submit:active {
	transform: translateY(0);
}

.fodes-form-submit[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@keyframes fodes-fade-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fodes-form-wrapper {
	animation: fodes-fade-up 360ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.fodes-form-wrapper,
	.fodes-form-submit {
		animation: none;
		transition: none;
	}
}

@media (max-width: 640px) {
	.fodes-form-wrapper {
		padding: var(--fodes-space-4);
		border-radius: 14px;
	}

	.fodes-form-wrapper .fodes-form-title {
		font-size: 1.6rem;
	}

	.fodes-form {
		padding: var(--fodes-space-3);
	}

	.fodes-layout-flex {
		grid-template-columns: 1fr;
	}

	.fodes-form-submit {
		width: 100%;
	}
}