/* ==========================================================================
   Rooah CRM — Public Form Styles
   ========================================================================== */

.rooah-form-wrapper {
	--rooah-primary: #2271b1;
	--rooah-primary-hover: #1d5d8d;
	--rooah-text: #1f2937;
	--rooah-text-muted: #6b7280;
	--rooah-border: #d1d5db;
	--rooah-border-focus: #2271b1;
	--rooah-bg: #fff;
	--rooah-error: #b91c1c;
	--rooah-error-bg: #fef2f2;
	--rooah-success: #166534;
	--rooah-success-bg: #dcfce7;
	--rooah-radius: 6px;
	--rooah-input-height: 40px;
	--rooah-font-size: 15px;
	--rooah-spacing: 14px;
	/* Default outer padding so the form doesn't kiss the container edge when
	 * embedded directly in a page-builder column (v1.1.0). Override with the
	 * shortcode `padding=""` attribute, e.g. [rooah_form id="1" padding="0"]. */
	--rooah-form-padding: 1.25rem;
	max-width: 100%;
	padding: var(--rooah-form-padding);
	box-sizing: border-box;
}

.rooah-form { display: flex; flex-wrap: wrap; gap: var(--rooah-spacing); margin: 0 0 24px; }
.rooah-form:last-child { margin-bottom: 0; } /* don't double-pad inside the wrapper */

.rooah-field { width: var(--rooah-field-width, 100%); display: flex; flex-direction: column; }
@media (max-width: 600px) { .rooah-field { width: var(--rooah-field-mobile-width, 100%); } }

.rooah-field-label { display: block; font-weight: 600; font-size: 14px; color: var(--rooah-text); margin-bottom: 6px; }
.rooah-required { color: var(--rooah-error); margin-left: 2px; }

/* Inputs */
.rooah-field-input { width: 100%; min-height: var(--rooah-input-height); padding: 8px 12px; font-size: var(--rooah-font-size); color: var(--rooah-text); background: var(--rooah-bg); border: 1px solid var(--rooah-border); border-radius: var(--rooah-radius); box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; }
.rooah-field-input:focus { border-color: var(--rooah-border-focus); outline: none; box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15); }
.rooah-field-textarea { min-height: 100px; resize: vertical; }
.rooah-field-select, .rooah-field-multiselect { background-image: linear-gradient(45deg, transparent 50%, var(--rooah-text-muted) 50%), linear-gradient(135deg, var(--rooah-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; -webkit-appearance: none; appearance: none; padding-right: 32px; }
.rooah-field-multiselect { background-image: none; -webkit-appearance: listbox; appearance: listbox; padding-right: 12px; }

.rooah-field-help { font-size: 13px; color: var(--rooah-text-muted); margin: 4px 0 0; }

/* Radio and checkbox */
.rooah-field-radio-group, .rooah-field-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.rooah-radio-label, .rooah-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rooah-text); cursor: pointer; }
.rooah-radio-label input, .rooah-checkbox-label input { margin: 0; }

.rooah-consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--rooah-text); cursor: pointer; padding: 4px 0; }
.rooah-consent-label input { margin: 4px 0 0; flex-shrink: 0; }
.rooah-consent-text a { color: var(--rooah-primary); text-decoration: underline; }

/* Section break */
.rooah-field-section { width: 100%; padding-top: 8px; }
.rooah-section-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--rooah-text); border-bottom: 1px solid var(--rooah-border); padding-bottom: 6px; }
.rooah-section-description { font-size: 13px; color: var(--rooah-text-muted); margin: 8px 0 0; }

/* Errors */
.rooah-field-errors { font-size: 13px; color: var(--rooah-error); margin-top: 4px; }
.rooah-field-error .rooah-field-input { border-color: var(--rooah-error); background: var(--rooah-error-bg); }
.rooah-form-error { width: 100%; padding: 12px 14px; background: var(--rooah-error-bg); border: 1px solid var(--rooah-error); border-radius: var(--rooah-radius); color: var(--rooah-error); font-size: 14px; }

/* Success */
.rooah-form-success { padding: 16px; background: var(--rooah-success-bg); border: 1px solid var(--rooah-success); border-radius: var(--rooah-radius); color: var(--rooah-success); font-size: 15px; }

/* Submit */
.rooah-form-submit { width: 100%; }
.rooah-form-wrapper .rooah-submit-button { background: var(--rooah-primary); color: #fff; padding: 10px 24px; font-size: var(--rooah-font-size); font-weight: 600; border: 0; border-radius: var(--rooah-radius); cursor: pointer; transition: background 0.15s, opacity 0.15s; min-height: var(--rooah-input-height); text-decoration: none; }
.rooah-form-wrapper .rooah-submit-button:hover:not(:disabled),
.rooah-form-wrapper .rooah-submit-button:focus:not(:disabled) { background: var(--rooah-primary-hover); color: #fff; text-decoration: none; }
.rooah-form-wrapper .rooah-submit-button:disabled { opacity: 0.7; cursor: not-allowed; }
.rooah-submit-button.is-loading .rooah-submit-spinner { display: inline-block; }

/* Theme: minimal */
.rooah-theme-minimal { --rooah-radius: 0; --rooah-border: #1f2937; }
.rooah-theme-minimal .rooah-submit-button { background: #1f2937; }
.rooah-theme-minimal .rooah-submit-button:hover:not(:disabled) { background: #111827; }

/* Theme: rounded */
.rooah-theme-rounded { --rooah-radius: 24px; --rooah-input-height: 44px; }
.rooah-theme-rounded .rooah-submit-button { padding-left: 28px; padding-right: 28px; }

/* v0.18.0 — captcha widget spacing inside forms */
.rooah-form-captcha { margin: 14px 0; }
.rooah-form-captcha--recaptcha-v2 .g-recaptcha { display: inline-block; }

/* ---------------------------------------------------------------------------
 * v1.1.0 additions: full-width submit, name field, theme tweaks
 * ------------------------------------------------------------------------- */

/* Full-width submit button option — stretches both the wrapper and the button
 * itself. The wrapper rule is what actually positions the button across the
 * full row; the button rule makes its background fill the wrapper. */
.rooah-form-submit--full { flex-basis: 100%; }
.rooah-form-wrapper .rooah-submit-button--full { width: 100%; display: block; }

/* Composite "Name" field — full / first+last / first+middle+last variants.
 * Renders as a row of equal-width inputs inside the field wrapper. The outer
 * `.rooah-field` already supplies width / mobile-width via CSS var, so this
 * row just lays out the sub-inputs side by side with the same gap rhythm. */
.rooah-field-name-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rooah-spacing);
}
.rooah-field-name-row .rooah-field-name-part {
	flex: 1 1 0;
	min-width: 0;
}
.rooah-field-name-row .rooah-field-name-part-label {
	display: block;
	font-size: 12px;
	color: var(--rooah-text-muted);
	margin: 4px 0 0;
}
/* On very narrow screens, stack the name sub-inputs vertically — wrapping
 * flexbox handles this automatically, but force it below 380px viewport so a
 * "First | Middle | Last" trio doesn't get squeezed to unusable widths. */
@media (max-width: 380px) {
	.rooah-field-name-row { flex-direction: column; }
}