/**
 * Optional minimal styles for EmDash forms.
 *
 * Uses CSS custom properties for theming.
 * Import this stylesheet in your site to get basic form styling:
 *
 *   import "@emdash-cms/plugin-forms/styles";
 */

.ec-form {
	--ec-form-gap: 1rem;
	--ec-form-field-border: 1px solid #d1d5db;
	--ec-form-field-radius: 6px;
	--ec-form-field-padding: 0.5rem 0.75rem;
	--ec-form-field-bg: #fff;
	--ec-form-error-color: #dc2626;
	--ec-form-required-color: #dc2626;
	--ec-form-help-color: #6b7280;
	--ec-form-submit-bg: #111827;
	--ec-form-submit-color: #fff;
	--ec-form-submit-radius: 6px;
	--ec-form-submit-padding: 0.625rem 1.25rem;

	display: flex;
	flex-direction: column;
	gap: var(--ec-form-gap);
}

.ec-form-page {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-form-gap);
	border: none;
	margin: 0;
	padding: 0;
}

.ec-form-page-title {
	width: 100%;
	font-size: 1.125rem;
	font-weight: 600;
	padding: 0;
	margin-bottom: 0.25rem;
}

.ec-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	width: 100%;
}

.ec-form-field--half {
	width: calc(50% - var(--ec-form-gap) / 2);
}

.ec-form-label {
	font-size: 0.875rem;
	font-weight: 500;
}

.ec-form-required {
	color: var(--ec-form-required-color);
	margin-left: 0.125rem;
}

.ec-form-input,
.ec-form select,
.ec-form textarea {
	border: var(--ec-form-field-border);
	border-radius: var(--ec-form-field-radius);
	padding: var(--ec-form-field-padding);
	background: var(--ec-form-field-bg);
	font: inherit;
	width: 100%;
	box-sizing: border-box;
}

.ec-form-input:focus,
.ec-form select:focus,
.ec-form textarea:focus {
	outline: 2px solid #2563eb;
	outline-offset: -1px;
}

.ec-form textarea {
	min-height: 6rem;
	resize: vertical;
}

.ec-form-help {
	font-size: 0.75rem;
	color: var(--ec-form-help-color);
}

.ec-form-error {
	font-size: 0.75rem;
	color: var(--ec-form-error-color);
	min-height: 1em;
}

.ec-form-error:empty {
	display: none;
}

.ec-form-radio-group,
.ec-form-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	border: none;
	padding: 0;
	margin: 0;
}

.ec-form-radio-label,
.ec-form-checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.ec-form-nav {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.ec-form-submit,
.ec-form-next {
	background: var(--ec-form-submit-bg);
	color: var(--ec-form-submit-color);
	border: none;
	border-radius: var(--ec-form-submit-radius);
	padding: var(--ec-form-submit-padding);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.ec-form-submit:hover,
.ec-form-next:hover {
	opacity: 0.9;
}

.ec-form-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ec-form-prev {
	background: transparent;
	border: var(--ec-form-field-border);
	border-radius: var(--ec-form-submit-radius);
	padding: var(--ec-form-submit-padding);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.ec-form-progress {
	font-size: 0.875rem;
	color: var(--ec-form-help-color);
	text-align: center;
}

.ec-form-status {
	padding: 0.75rem;
	border-radius: var(--ec-form-field-radius);
	font-size: 0.875rem;
}

.ec-form-status:empty {
	display: none;
}

.ec-form-status--success {
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.ec-form-status--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.ec-form-turnstile {
	margin-top: 0.5rem;
}

/* Responsive: stack half-width fields on small screens */
@media (max-width: 640px) {
	.ec-form-field--half {
		width: 100%;
	}
}