/**
 * Fluent Forms & Custom Form Design System for Conceito Sul
 *
 * Automatically harmonizes Fluent Forms (and native form blocks) with
 * the official Conceito Sul brand identity, tokens, and typography.
 *
 * @package Malamute_WP_HTML_Theme
 */

:root {
	--ff-primary: var(--ink, #011744);
	--ff-accent: var(--accent, #eeb31b);
	--ff-accent-hover: #d19d0f;
	--ff-cta-text: var(--cta-text, #111111);
	--ff-border: var(--line-strong, #ccd3e0);
	--ff-border-focus: var(--accent, #eeb31b);
	--ff-bg-input: #ffffff;
	--ff-radius: 4px;
	--ff-text: #1a1d24;
	--ff-muted: #5a5f6b;
	--ff-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   1. Form Container
   ========================================================================== */
.fluentform,
.fluentform-step,
.cs-form-wrapper,
.malamute-form-container {
	font-family: var(--ff-font);
	color: var(--ff-text);
	width: 100%;
}

.fluentform .ff-el-group {
	margin-bottom: 18px;
}

/* ==========================================================================
   2. Labels
   ========================================================================== */
.fluentform .ff-el-input--label label,
.fluentform label.ff-el-input--label,
.cs-form-wrapper label,
.malamute-form-container label {
	display: block;
	font-family: var(--ff-font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ff-primary);
	margin-bottom: 7px;
	letter-spacing: -0.01em;
}

.fluentform .ff-el-input--label label.ff-el-is-required::after,
.fluentform .ff-el-input--label.ff-el-is-required label::after,
.cs-form-wrapper .required-asterisk {
	content: " *";
	color: #e53e3e;
	font-weight: 700;
}

/* ==========================================================================
   3. Inputs, Selects & Textareas
   ========================================================================== */
.fluentform input.ff-el-form-control,
.fluentform select.ff-el-form-control,
.fluentform textarea.ff-el-form-control,
.cs-form-wrapper input[type="text"],
.cs-form-wrapper input[type="email"],
.cs-form-wrapper input[type="tel"],
.cs-form-wrapper input[type="url"],
.cs-form-wrapper input[type="number"],
.cs-form-wrapper select,
.cs-form-wrapper textarea {
	width: 100%;
	background-color: var(--ff-bg-input);
	border: 1.5px solid var(--ff-border);
	border-radius: var(--ff-radius);
	padding: 13px 16px;
	font-family: var(--ff-font);
	font-size: 15px;
	font-weight: 500;
	color: var(--ff-primary);
	line-height: 1.4;
	box-shadow: none;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.fluentform input.ff-el-form-control::placeholder,
.fluentform textarea.ff-el-form-control::placeholder,
.cs-form-wrapper input::placeholder,
.cs-form-wrapper textarea::placeholder {
	color: #9aa1af;
	font-weight: 400;
}

.fluentform input.ff-el-form-control:focus,
.fluentform select.ff-el-form-control:focus,
.fluentform textarea.ff-el-form-control:focus,
.cs-form-wrapper input:focus,
.cs-form-wrapper select:focus,
.cs-form-wrapper textarea:focus {
	border-color: var(--ff-border-focus) !important;
	box-shadow: 0 0 0 3px rgba(238, 179, 27, 0.18) !important;
	outline: none !important;
	background-color: #ffffff;
}

.fluentform select.ff-el-form-control,
.cs-form-wrapper select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23011744'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
	padding-right: 40px;
	cursor: pointer;
}

.fluentform textarea.ff-el-form-control,
.cs-form-wrapper textarea {
	resize: vertical;
	min-height: 110px;
}

/* ==========================================================================
   4. Buttons & Submit
   ========================================================================== */
.fluentform .ff-btn-submit,
.fluentform button.ff-btn-submit,
.fluentform input[type="submit"].ff-btn-submit,
.cs-form-wrapper button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--ff-accent) !important;
	color: var(--ff-cta-text) !important;
	border: none !important;
	border-radius: var(--ff-radius) !important;
	padding: 16px 28px !important;
	font-family: var(--ff-font) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: -0.01em;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(238, 179, 27, 0.3) !important;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.fluentform .ff-btn-submit:hover,
.fluentform button.ff-btn-submit:hover,
.cs-form-wrapper button[type="submit"]:hover {
	background: var(--ff-accent-hover) !important;
	box-shadow: 0 6px 20px rgba(238, 179, 27, 0.45) !important;
	transform: translateY(-1px);
}

.fluentform .ff-btn-submit:active,
.fluentform button.ff-btn-submit:active,
.cs-form-wrapper button[type="submit"]:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(238, 179, 27, 0.3) !important;
}

.fluentform .ff-btn-submit:disabled,
.fluentform button.ff-btn-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none !important;
}

/* ==========================================================================
   5. Checkboxes and Radio Buttons
   ========================================================================== */
.fluentform .ff-el-form-check {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	cursor: pointer;
}

.fluentform .ff-el-form-check-input {
	accent-color: var(--ff-primary);
	width: 18px;
	height: 18px;
	margin-right: 10px;
	cursor: pointer;
}

.fluentform .ff-el-form-check-label {
	font-family: var(--ff-font);
	font-size: 14px;
	color: var(--ff-text);
	cursor: pointer;
}

/* ==========================================================================
   6. Messages, Alerts & Validation
   ========================================================================== */
.fluentform .ff-message-success,
.fluentform-success,
.cs-form-success {
	background-color: #f0fdf4 !important;
	border: 1px solid #86efac !important;
	border-radius: 6px !important;
	color: #166534 !important;
	padding: 20px 24px !important;
	font-family: var(--ff-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	margin: 20px 0 !important;
	box-shadow: 0 4px 12px rgba(22, 101, 52, 0.08) !important;
	display: flex;
	align-items: center;
	gap: 12px;
}

.fluentform .ff-message-success::before,
.cs-form-success::before {
	content: "\f058";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 22px;
	color: #22c55e;
	flex-shrink: 0;
}

.fluentform .ff-errors-in-stack,
.fluentform .text-danger,
.fluentform .error {
	font-family: var(--ff-font);
	color: #dc2626 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	margin-top: 5px !important;
	line-height: 1.4;
}

.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error select,
.fluentform .ff-el-is-error textarea {
	border-color: #ef4444 !important;
	background-color: #fef2f2 !important;
}

.fluentform .ff-help-text {
	font-family: var(--ff-font);
	font-size: 12px;
	color: var(--ff-muted);
	margin-top: 5px;
	line-height: 1.4;
}

/* ==========================================================================
   7. Multi-step Progress Bar
   ========================================================================== */
.fluentform-step .ff-step-header {
	margin-bottom: 28px;
}

.fluentform-step .ff-step-progress-bar {
	background-color: var(--line, #e1e6ef) !important;
	border-radius: 999px !important;
	height: 6px !important;
}

.fluentform-step .ff-step-progress-bar-fill {
	background-color: var(--ff-accent) !important;
	border-radius: 999px !important;
}

.fluentform-step .ff-step-item.ff-step-active .ff-step-circle {
	background-color: var(--ff-primary) !important;
	border-color: var(--ff-accent) !important;
	color: #ffffff !important;
}

.fluentform-step .ff-step-item.ff-step-completed .ff-step-circle {
	background-color: var(--ff-accent) !important;
	color: var(--ff-cta-text) !important;
}

/* ==========================================================================
   8. Responsive Adjustments
   ========================================================================== */
@media (max-width: 640px) {
	.fluentform .ff-el-group {
		margin-bottom: 14px;
	}

	.fluentform input.ff-el-form-control,
	.fluentform select.ff-el-form-control,
	.fluentform textarea.ff-el-form-control {
		padding: 12px 14px;
		font-size: 14.5px;
	}

	.fluentform .ff-btn-submit,
	.fluentform button.ff-btn-submit {
		padding: 15px 22px !important;
		font-size: 15px !important;
	}
}