/**
 * FAQ Contact — minimal structural styles. Visual identity comes from the
 * theme (inputs/buttons are styled by the FAQ Network stylesheet); design
 * tokens are consumed with fallbacks so the plugin works on any theme.
 */

.faqc-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}

.faqc-step {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	width: 100%;
}

.faqc-field {
	flex: 1 1 100%;
	margin-bottom: 1rem;
}

.faqc-field--half {
	flex: 1 1 calc(50% - 1rem);
	min-width: 14rem;
}

.faqc-field label,
.faqc-field legend {
	display: block;
	margin-bottom: 0.25rem;
}

.faqc-field input:not([type="checkbox"]):not([type="radio"]),
.faqc-field textarea {
	width: 100%;
}

.faqc-field fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.faqc-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.faqc-req {
	color: var(--faqn-color-primary, #dda53e);
}

/* Invalid fields get a red border (no per-field message — a single
   summary shows at the bottom of the form, so nothing shifts). The theme
   styles the input border, so it may add a higher-specificity red rule. */
.faqc-field--invalid input,
.faqc-field--invalid textarea {
	border-color: #c0392b;
}

.faqc-progress {
	width: 100%;
	margin-bottom: 0.75rem;
	font-size: 0.9em;
	opacity: 0.75;
}

.faqc-nav {
	display: flex;
	gap: 0.75rem;
	width: 100%;
	margin-top: 0.5rem;
}

.faqc-nav .faqc-prev[hidden],
.faqc-nav .faqc-next[hidden],
.faqc-nav .faqc-submit[hidden] {
	display: none;
}

.faqc-message {
	width: 100%;
	margin-top: 1rem;
	padding: 1rem;
	background: var(--faqn-color-surface-alt, #f9f5ee);
}

.faqc-message--error {
	background: #fdecea;
}

/* Success confirmation — same soft-tint scheme as the error, in green. */
.faqc-message--success {
	background: #e6f4ea;
}

.faqc-note {
	border: 1px dashed #c7c1b8;
	padding: 1rem;
}

/* Reveal-after-submit container (theme markup: #directinfo.dihide). */
.dihide {
	display: none;
}

/* Custom-layout helpers: wrap groups of tokens in .faqc-row > .faqc-col
   for columns, e.g. three fields on the left, the message on the right. */
.faqc-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 3rem;
	/* The row is itself a flex item of the form — make it fill the width
	   so the columns divide the whole content width, not just half. */
	flex: 1 1 100%;
	width: 100%;
}

.faqc-col {
	flex: 1 1 0;
	min-width: 14rem;
	/* Equal-height columns (align-items:stretch on the row is default):
	   the column is a flex column so a textarea can fill the height of a
	   taller sibling column (e.g. 3 fields on the left, message right). */
	display: flex;
	flex-direction: column;
}

.faqc-col .faqc-field {
	flex: 0 0 auto; /* natural height by default */
}

.faqc-col .faqc-field--textarea {
	flex: 1 1 auto; /* the message field grows to fill the column */
	display: flex;
	flex-direction: column;
}

.faqc-col .faqc-field--textarea textarea {
	flex: 1 1 auto;
	min-height: 8rem;
}

/* In a custom layout the send button sits on the right, whether it was
   placed with [submit] inside a column or appended automatically. */
.faqc-form--custom .faqc-submit {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin-left: auto;
}

.faqc-form--custom .faqc-nav {
	justify-content: flex-end;
}