/**
 * R2 SoMo Forme — front-end form styles (theme-relative stopgap).
 *
 * IMPORTANT: this stylesheet uses ONLY `em` and `px`, never root `rem`.
 * The host theme's root font-size may be scaled large (the SoMo design system
 * sizes everything against a big root, e.g. ~100px), so rem-based spacing would
 * balloon. By inheriting font-size and expressing spacing in em (proportional
 * to the form's own text) the form stays correctly sized inside any theme.
 *
 * Scoped under .r2sf-form so the host theme can override freely.
 */

.r2sf-form {
	--r2sf-gap: 1.15em;
	--r2sf-radius: 6px;
	--r2sf-border: #d0d5dd;
	--r2sf-border-focus: #2f6fed;
	--r2sf-invalid: #d92d20;
	--r2sf-muted: #667085;
	--r2sf-submit-bg: #1a1a1a;
	--r2sf-submit-text: #fff;
	--r2sf-bg-soft: #f7f8fa;

	max-width: 640px;
	margin: 0 auto;
	color: inherit;
	font-size: inherit;
	line-height: 1.5;
}

.r2sf-form *,
.r2sf-form *::before,
.r2sf-form *::after {
	box-sizing: border-box;
}

.r2sf-field {
	margin-bottom: var(--r2sf-gap);
}

.r2sf-field[hidden],
.r2sf-payment[hidden],
.r2sf-remark[hidden] {
	display: none !important;
}

.r2sf-label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 700;
}

.r2sf-input {
	display: block;
	width: 100%;
	padding: 0.55em 0.7em;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid var(--r2sf-border);
	border-radius: var(--r2sf-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.r2sf-input:focus {
	outline: none;
	border-color: var(--r2sf-border-focus);
	box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.18);
}

.r2sf-textarea {
	min-height: 7em;
	resize: vertical;
}

.r2sf-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75em center;
	background-size: 0.7em auto;
	padding-right: 2em;
}

.r2sf-hint {
	display: block;
	margin-top: 0.3em;
	font-size: 0.85em;
	color: var(--r2sf-muted);
}

.r2sf-counter {
	display: block;
	margin-top: 0.25em;
	font-size: 0.8em;
	color: var(--r2sf-muted);
	text-align: right;
}

/* Past the soft limit: a light red field and a red counter — the text is
   still accepted. Past the hard limit: a red border and the line under the
   field saying by how much; the form is not sent until it is shortened. */
.r2sf-field.r2sf-over .r2sf-textarea {
	border-color: #fda29b;
	background-color: #fef3f2;
}

.r2sf-field.r2sf-over .r2sf-counter,
.r2sf-limit-msg {
	color: var(--r2sf-invalid, #d92d20);
}

.r2sf-field.r2sf-over-max .r2sf-textarea {
	border-color: var(--r2sf-invalid, #d92d20);
}

.r2sf-limit-msg {
	display: block;
	font-size: 0.8em;
	text-align: right;
}

.r2sf-limit-msg:not(:empty) {
	margin-top: 0.15em;
}

.r2sf-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	cursor: pointer;
	font-weight: 400;
}

.r2sf-checkbox input {
	margin-top: 0.15em;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

.r2sf-payment {
	margin: 1.4em 0;
	padding: 1em 1.1em;
	background: var(--r2sf-bg-soft);
	border: 1px solid var(--r2sf-border);
	border-radius: var(--r2sf-radius);
}

.r2sf-section-title {
	margin: 0 0 0.8em;
	font-size: 1.05em;
}

.r2sf-remark {
	margin: 0 0 var(--r2sf-gap);
	padding: 0.8em 0.9em;
	background: #fff8e6;
	border: 1px solid #f4d27a;
	border-radius: var(--r2sf-radius);
	font-size: 0.95em;
}

.r2sf-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7em 1.5em;
	font: inherit;
	font-weight: 700;
	color: var(--r2sf-submit-text);
	background: var(--r2sf-submit-bg);
	border: 0;
	border-radius: var(--r2sf-radius);
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.05s ease;
}

.r2sf-submit:hover {
	opacity: 0.9;
}

.r2sf-submit:active {
	transform: translateY(1px);
}

.r2sf-submit.is-loading,
.r2sf-submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* Field column widths (set per field in the builder). Fields default to full
   width, so existing forms are unchanged; half/third opt into side-by-side. */
.r2sf-form,
.r2sf-payment {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r2sf-gap);
	align-items: flex-start;
}
.r2sf-form > *,
.r2sf-payment > * { flex: 1 1 100%; min-width: 0; }
.r2sf-field { margin-bottom: 0; }
.r2sf-field--w-half  { flex: 1 1 calc(50% - (var(--r2sf-gap) / 2)); }
.r2sf-field--w-third { flex: 1 1 calc(33.333% - (var(--r2sf-gap) * 2 / 3)); }
.r2sf-submit { flex: 0 0 auto; }
@media (max-width: 480px) {
	.r2sf-field--w-half,
	.r2sf-field--w-third { flex-basis: 100%; }
}

/* Choice groups (radio / checkbox group) + multi-select. */
.r2sf-choices { display: flex; flex-direction: column; gap: 0.45em; }
.r2sf-choice { display: flex; align-items: flex-start; gap: 0.5em; font-weight: 400; cursor: pointer; }
.r2sf-choice input { margin-top: 0.2em; flex: 0 0 auto; }
.r2sf-choice input[type="radio"],
.r2sf-choice input[type="checkbox"] {
	width: 1.05em;
	height: 1.05em;
	accent-color: var(--r2sf-submit-bg);
	cursor: pointer;
}

/* Yes/No (Da/Ne) answers: inline radio buttons, per the SoMo design. */
.r2sf-choices--yesno { flex-direction: row; flex-wrap: wrap; gap: 1.4em; }
.r2sf-choices--yesno .r2sf-choice { align-items: center; }
.r2sf-choices--yesno .r2sf-choice input { margin-top: 0; }
.r2sf-multiselect { min-height: 6em; padding: 0.4em; }

/* ==================================================================== *
 * Validation highlight
 *
 * The server names the rejected field in an X-R2SF-Field response header;
 * r2sf-form.js puts .r2sf-invalid on that field's wrapper. One class does
 * the whole job: the label and the control's border turn red. Deliberately
 * NO extra weight or border-width — the field must not shift or bolden,
 * only change colour. The class is removed the moment the visitor edits
 * the field.
 * ==================================================================== */

.r2sf-field.r2sf-invalid > .r2sf-label,
.r2sf-field.r2sf-invalid > .r2sf-checkbox,
.r2sf-field.r2sf-invalid > .r2sf-legend {
	color: var(--r2sf-invalid, #d92d20);
}

.r2sf-field.r2sf-invalid .r2sf-input {
	border-color: var(--r2sf-invalid, #d92d20);
}

/* Keep the focus ring in the error colour too, so focusing the field the
   visitor was just sent to doesn't repaint it blue as if it were fine. */
.r2sf-field.r2sf-invalid .r2sf-input:focus {
	border-color: var(--r2sf-invalid, #d92d20);
	box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.18);
}

/* Radio / checkbox groups have no bordered control — tint the choice row
   instead so the error is still visible. */
.r2sf-field.r2sf-invalid .r2sf-choice {
	color: var(--r2sf-invalid, #d92d20);
}

/* Deadline passed — shown in place of the form. */
.r2sf-form--closed {
	padding: 20px 22px;
	border: 1px solid var(--r2sf-border);
	border-radius: var(--r2sf-radius);
	background: var(--r2sf-bg-soft);
}

.r2sf-form--closed .r2sf-closed {
	margin: 0;
	font-weight: 500;
}