:root {
	--sfcf-green: #1e3b2c;
	--sfcf-terracotta: #c1652f;
	--sfcf-sage-tint: #eef1e6;
	--sfcf-charcoal: #2b2b28;
	--sfcf-button-color: #e4572e;
	--sfcf-input-bg: #f7f4ec;
}

.sfcf-wrap {
	max-width: 640px;
	margin: 0 auto;
	font-family: inherit;
}

/* Grid (rather than flex) so that within a row, all labels share row 1 and
   all inputs share row 2 - if one label wraps to 2 lines, only that row
   grows to fit it, and every input in the row still starts at the same
   height. */
.sfcf-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	column-gap: 16px;
	row-gap: 0;
	margin-bottom: 20px;
}

.sfcf-row .sfcf-field {
	display: contents;
}

.sfcf-row .sfcf-field label {
	grid-row: 1;
}

.sfcf-row .sfcf-field input,
.sfcf-row .sfcf-field select,
.sfcf-row .sfcf-field textarea {
	grid-row: 2;
	margin-top: 10px;
}

.sfcf-field {
	margin-bottom: 20px;
}

.sfcf-wrap label {
	display: block;
	font-weight: 600;
	color: var(--sfcf-green);
	margin-bottom: 6px;
	font-size: 0.95rem;
}

.sfcf-wrap input[type="text"],
.sfcf-wrap input[type="email"],
.sfcf-wrap input[type="tel"],
.sfcf-wrap select,
.sfcf-wrap textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d3d8c9;
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--sfcf-charcoal);
	background: var(--sfcf-input-bg, #f7f4ec);
	box-sizing: border-box;
}

.sfcf-wrap input:focus,
.sfcf-wrap select:focus,
.sfcf-wrap textarea:focus {
	outline: none;
	border-color: var(--sfcf-terracotta);
	background: #ffffff;
}

.sfcf-wrap textarea {
	min-height: 130px;
	resize: vertical;
}

.sfcf-actions--left {
	text-align: left;
}

.sfcf-actions--right {
	text-align: right;
}

.sfcf-submit-btn {
	background: var(--sfcf-button-color, #e4572e);
	color: #ffffff;
	border: none;
	padding: 14px 28px;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.sfcf-submit-btn:hover {
	filter: brightness(0.88);
}

.sfcf-note {
	font-size: 0.85rem;
	color: #6b6b63;
	margin-top: 8px;
}

.sfcf-demo-message {
	display: none;
	margin-top: 20px;
	padding: 14px 18px;
	border-radius: 6px;
	background: var(--sfcf-sage-tint);
	border-left: 4px solid var(--sfcf-green);
	color: var(--sfcf-charcoal);
	font-size: 0.95rem;
}

.sfcf-demo-message.is-visible {
	display: block;
}

@media (max-width: 600px) {
	/* .sfcf-field uses display:contents so its label/input become direct
	   grid items of .sfcf-row (placed via explicit grid-row). Just collapsing
	   to one column isn't enough - with two items still targeting each row,
	   the grid would create extra implicit columns instead of truly
	   stacking. Drop back to normal block flow so each field gets its own
	   line, in DOM order. */
	.sfcf-row {
		display: block;
	}

	.sfcf-row .sfcf-field {
		display: block;
	}
}