/* ═══════════════════════════════════════════════════════════════
   Charlie's Garage — Forminator Pro Styles
   Overrides Forminator Pro's default form appearance to match
   the site design. Target classes begin with .forminator-.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Form Container ──────────────────────────────────────────── */

.forminator-ui.forminator-custom-form {
	font-family: var(--cg-font-body);
}

/* ─── Field Rows ──────────────────────────────────────────────── */

.forminator-row {
	margin-bottom: 4px;
}

/* ─── Labels ──────────────────────────────────────────────────── */

.forminator-label,
.forminator-field label {
	display: block;
	font-family: var(--cg-font-heading);
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--cg-navy);
	margin-bottom: 6px;
	letter-spacing: 0.2px;
}

/* Required asterisk */
.forminator-required {
	color: var(--cg-red);
}

/* ─── Input Fields ────────────────────────────────────────────── */

.forminator-input,
.forminator-textarea,
.forminator-select,
.forminator-field input[type="text"],
.forminator-field input[type="email"],
.forminator-field input[type="tel"],
.forminator-field input[type="number"],
.forminator-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius);
	font-family: var(--cg-font-body);
	font-size: 1rem;
	color: var(--cg-text);
	background-color: var(--cg-white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.forminator-input:focus,
.forminator-textarea:focus,
.forminator-select:focus,
.forminator-field input:focus,
.forminator-field textarea:focus {
	border-color: var(--cg-navy);
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 35, 50, 0.12);
}

.forminator-textarea,
.forminator-field textarea {
	min-height: 140px;
	resize: vertical;
}

/* ─── Submit Button ───────────────────────────────────────────── */

.forminator-btn,
.forminator-btn-submit {
	display: inline-block;
	background-color: var(--cg-red) !important;
	color: var(--cg-white) !important;
	border: 2px solid var(--cg-red) !important;
	border-radius: var(--cg-radius) !important;
	font-family: var(--cg-font-heading);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	padding: 14px 36px !important;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	width: auto;
}

.forminator-btn:hover,
.forminator-btn-submit:hover {
	background-color: var(--cg-red-hover) !important;
	border-color: var(--cg-red-hover) !important;
}

/* ─── Response / Notification Messages ───────────────────────── */

.forminator-response-message {
	border-radius: var(--cg-radius);
	padding: 14px 18px;
	margin-top: 16px;
	font-weight: 600;
	font-size: 0.95rem;
}

/* Success */
.forminator-response-message.forminator-success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

/* Error */
.forminator-response-message.forminator-error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

/* Inline field error */
.forminator-error-message {
	color: var(--cg-red);
	font-size: 0.82rem;
	margin-top: 4px;
	display: block;
}

/* ─── Forminator on Light Gray Background ─────────────────────── */

/* If the form is placed on a cg-bg-light section, keep fields white */
.cg-bg-light .forminator-input,
.cg-bg-light .forminator-textarea {
	background-color: var(--cg-white);
}

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 767px) {
	.forminator-btn,
	.forminator-btn-submit {
		width: 100%;
		text-align: center;
	}
}