/**
 * ACSS Design Variables for SureForms — Frontend Overrides
 *
 * These styles provide ACSS-based fallback integration for SureForms elements.
 * The actual variable overrides (with !important) are handled by StyleOutput.php
 * on [class*="srfm-form-container"]. This file provides property-level mappings
 * as a supplementary layer — no !important here to avoid blowing away SureForms'
 * own visual styling.
 */

/* Form container: inherit ACSS font family */
.srfm-form-container {
	font-family: var(--text-font-family, inherit);
}

/* Input fields */
.srfm-form-container input[type="text"],
.srfm-form-container input[type="email"],
.srfm-form-container input[type="url"],
.srfm-form-container input[type="tel"],
.srfm-form-container input[type="number"],
.srfm-form-container input[type="date"],
.srfm-form-container input[type="password"],
.srfm-form-container textarea,
.srfm-form-container select {
	font-family: var(--text-font-family, inherit);
}

/* Focus state */
.srfm-form-container input:focus,
.srfm-form-container textarea:focus,
.srfm-form-container select:focus {
	border-color: var(--srfm-color-input-border-focus, var(--primary, #ea580c));
	outline-color: var(--srfm-color-input-border-focus, var(--primary, #ea580c));
}

/* Placeholder */
.srfm-form-container input::placeholder,
.srfm-form-container textarea::placeholder {
	color: var(--srfm-color-input-placeholder, var(--neutral, #9ca3af));
}

/* Labels */
.srfm-form-container label,
.srfm-form-container .srfm-block-label {
	font-size: var(--srfm-label-font-size, var(--text-s, 0.875rem));
	font-weight: var(--srfm-label-font-weight, var(--text-font-weight, 500));
	color: var(--srfm-color-input-label, var(--heading-color, #1c1e26));
}

/* Description / help text */
.srfm-form-container .srfm-description,
.srfm-form-container .srfm-help-text {
	font-size: var(--srfm-description-font-size, var(--text-xs, 0.75rem));
	color: var(--srfm-color-input-description, var(--text-color, #6b7280));
}

/* Buttons — targets all SureForms button selectors */
.srfm-form-container .srfm-submit-button,
.srfm-form-container .srfm-submit-btn,
.srfm-form-container #srfm-submit-btn,
.srfm-form-container button[type="submit"] {
	font-family: var(--srfm-font-family, var(--text-font-family, inherit));
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.srfm-form-container .srfm-submit-button:focus-visible,
.srfm-form-container .srfm-submit-btn:focus-visible,
.srfm-form-container #srfm-submit-btn:focus-visible,
.srfm-form-container button[type="submit"]:focus-visible {
	outline: 2px solid var(--srfm-btn-primary-bg, var(--primary, #ea580c));
	outline-offset: 2px;
}

/* Error messages */
.srfm-form-container .srfm-error-message,
.srfm-form-container .srfm-error-content {
	color: var(--srfm-color-error, var(--warning, #dc2626));
}

/* Success messages */
.srfm-form-container .srfm-success-message {
	color: var(--srfm-color-success, var(--success, #16a34a));
}