/**
 * Section: contact. Also styles the plugin-rendered widget markup
 * (.websly-contact / .websly-form*) per decisions doc A5/D4 — plugins ship
 * semantic markup only, the parent styles it. This is what keeps the
 * premium/upsell/fallback contact states visually consistent for free.
 */

.websly-contact {
	margin-block-start: var(--websly-space-lg);
}

.websly-form {
	display: flex;
	flex-direction: column;
	gap: var(--websly-space-sm);
}
.websly-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--websly-space-2xs);
}
.websly-form__label {
	font-size: var(--websly-text-sm);
	font-weight: 600;
}
.websly-form__input {
	padding: var(--websly-space-xs) var(--websly-space-sm);
	border: 1px solid var(--websly-color-border);
	border-radius: var(--websly-radius-sm);
	background-color: var(--websly-color-surface);
	color: var(--websly-color-text);
}
textarea.websly-form__input {
	min-height: 8rem;
	resize: vertical;
}
.websly-form__submit {
	align-self: flex-start;
	margin-block-start: var(--websly-space-xs);
	padding: var(--websly-space-xs) var(--websly-space-lg);
	border: none;
	border-radius: var(--websly-button-radius);
	background-color: var(--websly-color-primary);
	color: var(--websly-color-primary-contrast);
	font-weight: 600;
	cursor: pointer;
}
.websly-form__notice {
	padding: var(--websly-space-xs) var(--websly-space-sm);
	border-radius: var(--websly-radius-sm);
	font-size: var(--websly-text-sm);
}
.websly-form__notice--error {
	background-color: color-mix(in srgb, var(--websly-color-error) 12%, transparent);
	color: var(--websly-color-error);
}
.websly-form__notice--success {
	background-color: color-mix(in srgb, var(--websly-color-success) 12%, transparent);
	color: var(--websly-color-success);
}

/* Fallback state (suspended / agency-core absent, decisions doc C4) reuses
   the same .websly-form classes — a simple mailto/phone block instead of
   fields, so it inherits every rule above automatically. */
.websly-form--fallback {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--websly-space-md);
	align-items: center;
}