/**
 * CustomForms – frontend styles.
 *
 * Customize via CSS custom properties, e.g.:
 *   .cfrm-container { --cfrm-accent: #0a7d4f; --cfrm-radius: 0; }
 */

.cfrm-container {
	--cfrm-accent: #2563eb;
	--cfrm-accent-contrast: #fff;
	--cfrm-text: inherit;
	--cfrm-muted: #5f6672;
	--cfrm-border: #c3c8d0;
	--cfrm-border-focus: var(--cfrm-accent);
	--cfrm-bg: #fff;
	--cfrm-error: #c42b1c;
	--cfrm-error-bg: #fdf3f2;
	--cfrm-radius: 6px;
	--cfrm-gap: 1.25rem;
	--cfrm-input-padding: 0.6em 0.75em;
	--cfrm-font-size: 1rem;

	color: var(--cfrm-text);
	font-size: var(--cfrm-font-size);
	line-height: 1.5;
	margin: 1.5em 0;
}

.cfrm-container *,
.cfrm-container *::before,
.cfrm-container *::after {
	box-sizing: border-box;
}

.cfrm-form {
	margin: 0;
}

.cfrm-head {
	margin-bottom: var(--cfrm-gap);
}

.cfrm-title {
	margin: 0 0 0.25em;
}

.cfrm-description > :last-child {
	margin-bottom: 0;
}

.cfrm-fields {
	display: flex;
	flex-direction: column;
	gap: var(--cfrm-gap);
}

/* Field container (div or fieldset). */
.cfrm-field {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.cfrm-field-label {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 0.35em;
	font-weight: 600;
}

.cfrm-required-label {
	color: var(--cfrm-error);
	font-weight: 400;
}

.cfrm-sublabel {
	display: block;
	margin-top: 0.25em;
	font-size: 0.85em;
	color: var(--cfrm-muted);
}

.cfrm-field-description {
	margin-top: 0.35em;
	font-size: 0.875em;
	color: var(--cfrm-muted);
}

.cfrm-field-description > :last-child {
	margin-bottom: 0;
}

/* Inputs. */
.cfrm-container input[type="text"],
.cfrm-container input[type="email"],
.cfrm-container input[type="url"],
.cfrm-container input[type="tel"],
.cfrm-container input[type="number"],
.cfrm-container input[type="password"],
.cfrm-container input[type="search"],
.cfrm-container input[type="date"],
.cfrm-container input[type="time"],
.cfrm-container .cfrm-richtext-editor,
.cfrm-container select,
.cfrm-container textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: var(--cfrm-input-padding);
	font: inherit;
	color: inherit;
	background: var(--cfrm-bg);
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cfrm-container textarea {
	resize: vertical;
	min-height: 6em;
}

.cfrm-container select[multiple] {
	min-height: 8em;
}

.cfrm-container input:focus-visible,
.cfrm-container select:focus-visible,
.cfrm-container textarea:focus-visible {
	outline: none;
	border-color: var(--cfrm-border-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfrm-accent) 25%, transparent);
}

/* Sizes (apply to the field row / input). */
.cfrm-container .cfrm-size-small,
.cfrm-container input.cfrm-size-small,
.cfrm-container select.cfrm-size-small,
.cfrm-container textarea.cfrm-size-small {
	max-width: 25rem;
}

.cfrm-container .cfrm-size-medium,
.cfrm-container input.cfrm-size-medium,
.cfrm-container select.cfrm-size-medium,
.cfrm-container textarea.cfrm-size-medium {
	max-width: 40rem;
}

.cfrm-container .cfrm-size-large,
.cfrm-container input.cfrm-size-large,
.cfrm-container select.cfrm-size-large,
.cfrm-container textarea.cfrm-size-large {
	max-width: 100%;
}

.cfrm-field.cfrm-size-small,
.cfrm-field.cfrm-size-medium,
.cfrm-field.cfrm-size-large {
	max-width: none;
}

/* Multi-column rows (name, email confirmation). */
.cfrm-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.cfrm-field-col {
	flex: 1 1 10rem;
	min-width: 0;
}

/* Choice lists. */
.cfrm-choices {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4em 1.25em;
}

.cfrm-choices.cfrm-layout-two-columns {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cfrm-choices.cfrm-layout-three-columns {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cfrm-choices.cfrm-layout-inline {
	display: flex;
	flex-wrap: wrap;
}

.cfrm-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin: 0;
}

.cfrm-choice-input {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	margin: 0.2em 0 0;
	accent-color: var(--cfrm-accent);
}

.cfrm-choice-label {
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

@media (max-width: 600px) {
	.cfrm-choices.cfrm-layout-two-columns,
	.cfrm-choices.cfrm-layout-three-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Character / word limit counter. */
.cfrm-limit-counter {
	margin-top: 0.25em;
	font-size: 0.8em;
	color: var(--cfrm-muted);
}

.cfrm-limit-counter:empty {
	display: none;
}

/* Errors. */
.cfrm-field-error {
	margin-top: 0.35em;
	font-size: 0.875em;
	color: var(--cfrm-error);
}

.cfrm-field-error[hidden],
.cfrm-form-error[hidden],
.cfrm-spinner[hidden] {
	display: none !important;
}

.cfrm-has-error input:not([type="checkbox"]):not([type="radio"]),
.cfrm-has-error select,
.cfrm-has-error textarea,
.cfrm-container [aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) {
	border-color: var(--cfrm-error);
}

.cfrm-form-error {
	margin-bottom: var(--cfrm-gap);
	padding: 0.75em 1em;
	color: var(--cfrm-error);
	background: var(--cfrm-error-bg);
	border: 1px solid currentColor;
	border-radius: var(--cfrm-radius);
}

/* Footer / submit. */
.cfrm-footer {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-top: var(--cfrm-gap);
}

.cfrm-container .cfrm-submit {
	display: inline-block;
	padding: 0.7em 1.6em;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cfrm-accent-contrast);
	background: var(--cfrm-accent);
	border: 1px solid var(--cfrm-accent);
	border-radius: var(--cfrm-radius);
	cursor: pointer;
	transition: filter 0.15s ease;
}

.cfrm-container .cfrm-submit:hover {
	filter: brightness(0.92);
}

.cfrm-container .cfrm-submit:focus-visible {
	outline: 2px solid var(--cfrm-accent);
	outline-offset: 2px;
}

.cfrm-container .cfrm-submit[disabled] {
	cursor: wait;
	opacity: 0.7;
}

.cfrm-spinner {
	width: 1.25em;
	height: 1.25em;
	border: 2px solid var(--cfrm-border);
	border-top-color: var(--cfrm-accent);
	border-radius: 50%;
	animation: cfrm-spin 0.8s linear infinite;
}

@keyframes cfrm-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cfrm-spinner {
		animation-duration: 2s;
	}
}

/* Confirmation message (used from milestone 4). */
.cfrm-confirmation {
	padding: 1em 1.25em;
	background: color-mix(in srgb, var(--cfrm-accent) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--cfrm-accent) 35%, transparent);
	border-radius: var(--cfrm-radius);
}

/* Editor-only notice. */
.cfrm-notice {
	padding: 0.75em 1em;
	border-left: 4px solid var(--cfrm-error, #c42b1c);
	background: #fdf3f2;
}

/* Honeypot: off-screen, never visible. */
.cfrm-container .cfrm-hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Screen reader only. */
.cfrm-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ==========================================================================
 * Fancy fields
 * ========================================================================== */

/* Number slider. */
.cfrm-slider .cfrm-slider-input {
	display: block;
	width: 100%;
	margin: 0.5em 0 0;
	accent-color: var(--cfrm-accent);
}

.cfrm-slider-display {
	display: block;
	margin-top: 0.35em;
	font-size: 0.9em;
	color: var(--cfrm-muted);
}

/* Password strength. */
.cfrm-password-strength {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-top: 0.4em;
	font-size: 0.85em;
	color: var(--cfrm-muted);
}

.cfrm-password-strength[hidden] {
	display: none;
}

.cfrm-password-strength-bar {
	position: relative;
	flex: 0 0 8em;
	height: 0.4em;
	border-radius: 1em;
	background: var(--cfrm-border);
	overflow: hidden;
}

.cfrm-password-strength-bar::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 25%;
	background: var(--cfrm-error);
	transition: width 0.2s ease;
}

.cfrm-password-strength[data-level="medium"] .cfrm-password-strength-bar::after {
	width: 60%;
	background: #b7791f;
}

.cfrm-password-strength[data-level="strong"] .cfrm-password-strength-bar::after {
	width: 100%;
	background: #2f855a;
}

/* Date / time. */
.cfrm-date-time .cfrm-field-col {
	flex-basis: 12rem;
}

/* Layout fields. */
.cfrm-divider-line {
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--cfrm-border);
}

.cfrm-divider-title {
	margin: 0.5em 0 0.25em;
}

.cfrm-divider-description,
.cfrm-content,
.cfrm-html {
	color: inherit;
}

.cfrm-divider-description > :last-child,
.cfrm-content > :last-child,
.cfrm-html > :last-child {
	margin-bottom: 0;
}

/* Rating. */
.cfrm-rating {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.15em;
	--cfrm-rating-size: 1.75rem;
	--cfrm-rating-off: #c3c8d0;
	--cfrm-rating-on: #f2b01e;
}

.cfrm-rating-heart {
	--cfrm-rating-on: #e0245e;
}

.cfrm-rating-thumb,
.cfrm-rating-smiley {
	--cfrm-rating-on: var(--cfrm-accent);
}

.cfrm-rating-size-small {
	--cfrm-rating-size: 1.25rem;
}

.cfrm-rating-size-large {
	--cfrm-rating-size: 2.5rem;
}

.cfrm-rating-item {
	position: relative;
}

.cfrm-rating-label {
	display: block;
	cursor: pointer;
	line-height: 0;
	padding: 0.1em;
	border-radius: var(--cfrm-radius);
}

.cfrm-rating-icon {
	width: var(--cfrm-rating-size);
	height: var(--cfrm-rating-size);
	fill: var(--cfrm-rating-off);
	transition: fill 0.12s ease, transform 0.12s ease;
}

/* Checked item and all items before it. */
.cfrm-rating-item:has( ~ .cfrm-rating-item .cfrm-rating-input:checked ) .cfrm-rating-icon,
.cfrm-rating-input:checked + .cfrm-rating-label .cfrm-rating-icon {
	fill: var(--cfrm-rating-on);
}

/* Pointer preview (script) overrides the checked state. */
.cfrm-rating.cfrm-rating-hovering .cfrm-rating-item .cfrm-rating-icon {
	fill: var(--cfrm-rating-off);
}

.cfrm-rating.cfrm-rating-hovering .cfrm-rating-item.cfrm-rating-hover .cfrm-rating-icon {
	fill: var(--cfrm-rating-on);
	transform: scale(1.08);
}

.cfrm-rating-input:focus-visible + .cfrm-rating-label {
	outline: 2px solid var(--cfrm-accent);
	outline-offset: 1px;
}

/* Scales (Net Promoter Score). */
.cfrm-scale-list {
	display: grid;
	grid-template-columns: repeat(11, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
	overflow: hidden;
}

.cfrm-scale-item {
	position: relative;
	margin: 0;
}

.cfrm-scale-item + .cfrm-scale-item {
	border-left: 1px solid var(--cfrm-border);
}

.cfrm-scale-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.cfrm-scale-label {
	display: block;
	padding: 0.6em 0;
	text-align: center;
	cursor: pointer;
	background: var(--cfrm-bg);
	transition: background 0.12s ease;
}

.cfrm-scale-label:hover {
	background: color-mix(in srgb, var(--cfrm-accent) 10%, var(--cfrm-bg));
}

.cfrm-scale-input:checked + .cfrm-scale-label {
	background: var(--cfrm-accent);
	color: var(--cfrm-accent-contrast);
	font-weight: 600;
}

.cfrm-scale-input:focus-visible + .cfrm-scale-label {
	outline: 2px solid var(--cfrm-accent);
	outline-offset: -4px;
}

.cfrm-scale-legend {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin-top: 0.35em;
	font-size: 0.85em;
	color: var(--cfrm-muted);
}

/* Likert scale. */
.cfrm-likert {
	overflow-x: auto;
}

.cfrm-likert-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.cfrm-likert-table th,
.cfrm-likert-table td {
	padding: 0.5em;
	border: 0;
	border-bottom: 1px solid var(--cfrm-border);
	text-align: center;
	vertical-align: middle;
	font-weight: 400;
}

.cfrm-likert-table thead th {
	font-size: 0.875em;
	color: var(--cfrm-muted);
}

.cfrm-likert-table tbody th {
	text-align: left;
	font-weight: 600;
}

.cfrm-likert-input {
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	accent-color: var(--cfrm-accent);
}

.cfrm-likert-table td {
	position: relative;
}

/* The whole cell is clickable. */
.cfrm-likert-label {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.cfrm-likert-column {
	display: none;
}

@media (max-width: 600px) {
	.cfrm-likert-table thead {
		display: none;
	}

	.cfrm-likert-table tr,
	.cfrm-likert-table th,
	.cfrm-likert-table td {
		display: block;
		text-align: left;
	}

	.cfrm-likert-table tbody th {
		border-bottom: 0;
		padding-bottom: 0.25em;
	}

	.cfrm-likert-table td {
		display: flex;
		align-items: center;
		gap: 0.5em;
		border-bottom: 0;
		padding: 0.2em 0.5em;
	}

	.cfrm-likert-row {
		border-bottom: 1px solid var(--cfrm-border);
		padding-bottom: 0.5em;
	}

	.cfrm-likert-label {
		position: static;
		display: inline;
	}

	.cfrm-likert-column {
		display: inline;
	}
}

/* Ranking. */
.cfrm-ranking {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 40rem;
}

.cfrm-ranking-item {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em 0.75em;
	background: var(--cfrm-bg);
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
}

.cfrm-ranking-text {
	flex: 1 1 auto;
	margin: 0;
}

.cfrm-ranking .cfrm-ranking-select {
	flex: 0 0 5em;
	width: 5em;
}

.cfrm-ranking-position:empty {
	display: none;
}

.cfrm-ranking-position {
	flex: 0 0 auto;
	min-width: 1.6em;
	height: 1.6em;
	line-height: 1.6em;
	text-align: center;
	border-radius: 50%;
	font-size: 0.85em;
	font-weight: 600;
	background: var(--cfrm-accent);
	color: var(--cfrm-accent-contrast);
}

/* Enhanced list: drag handle cursor, selects replaced by buttons. */
.cfrm-ranking-js .cfrm-ranking-item {
	cursor: grab;
}

.cfrm-ranking-js .cfrm-ranking-select {
	display: none;
}

.cfrm-ranking-dragging {
	opacity: 0.5;
}

.cfrm-ranking-controls {
	display: inline-flex;
	gap: 0.25em;
}

.cfrm-container .cfrm-ranking-move {
	width: 2em;
	height: 2em;
	padding: 0;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	background: transparent;
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
}

.cfrm-container .cfrm-ranking-move:hover:not([disabled]) {
	border-color: var(--cfrm-accent);
	color: var(--cfrm-accent);
}

.cfrm-container .cfrm-ranking-move[disabled] {
	opacity: 0.35;
	cursor: default;
}

.cfrm-container .cfrm-ranking-move:focus-visible {
	outline: 2px solid var(--cfrm-accent);
	outline-offset: 1px;
}

/* Custom captcha. */
.cfrm-captcha-question {
	margin: 0 0 0.4em;
	font-weight: 600;
}

/* ==========================================================================
 * Structure: layout, repeater, pages, entry preview
 * ========================================================================== */

/* Layout columns. */
.cfrm-layout-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cfrm-gap);
}

.cfrm-layout-column {
	display: flex;
	flex-direction: column;
	gap: var(--cfrm-gap);
	flex: 1 1 calc(var(--cfrm-column-width, 50%) - var(--cfrm-gap));
	min-width: 0;
}

.cfrm-layout-column:empty {
	display: none;
}

/* Fields inside columns use the full column width. */
.cfrm-layout-column .cfrm-size-small,
.cfrm-layout-column .cfrm-size-medium,
.cfrm-layout-column input.cfrm-size-small,
.cfrm-layout-column input.cfrm-size-medium,
.cfrm-layout-column select.cfrm-size-small,
.cfrm-layout-column select.cfrm-size-medium,
.cfrm-layout-column textarea.cfrm-size-small,
.cfrm-layout-column textarea.cfrm-size-medium {
	max-width: 100%;
}

@media (max-width: 600px) {
	.cfrm-layout-row {
		flex-direction: column;
	}

	.cfrm-layout-column {
		flex-basis: auto;
	}
}

/* Repeater. */
.cfrm-repeater-rows {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.cfrm-repeater-row {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--cfrm-gap);
}

.cfrm-repeater-display-blocks .cfrm-repeater-row {
	padding: 1em;
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
}

.cfrm-repeater-rows {
	margin-bottom: 0.75em;
}

.cfrm-repeater-row > .cfrm-repeater-remove {
	align-self: flex-end;
}

.cfrm-repeater-display-rows .cfrm-repeater-row {
	flex-direction: row;
	align-items: flex-end;
}

.cfrm-repeater-display-rows .cfrm-repeater-row > .cfrm-layout-row {
	flex: 1 1 auto;
}

.cfrm-container .cfrm-repeater-add,
.cfrm-container .cfrm-repeater-remove,
.cfrm-container .cfrm-page-prev,
.cfrm-container .cfrm-page-next {
	padding: 0.55em 1.1em;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	color: var(--cfrm-accent);
	background: transparent;
	border: 1px solid var(--cfrm-accent);
	border-radius: var(--cfrm-radius);
}

.cfrm-container .cfrm-repeater-remove {
	color: var(--cfrm-error);
	border-color: currentColor;
	font-size: 0.9em;
	padding: 0.35em 0.8em;
}

.cfrm-container .cfrm-page-next {
	color: var(--cfrm-accent-contrast);
	background: var(--cfrm-accent);
}

.cfrm-container .cfrm-repeater-add[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.cfrm-container .cfrm-repeater-add:focus-visible,
.cfrm-container .cfrm-repeater-remove:focus-visible,
.cfrm-container .cfrm-page-prev:focus-visible,
.cfrm-container .cfrm-page-next:focus-visible {
	outline: 2px solid var(--cfrm-accent);
	outline-offset: 2px;
}

.cfrm-repeater-add[hidden],
.cfrm-repeater-remove[hidden],
.cfrm-page-prev[hidden],
.cfrm-page-next[hidden] {
	display: none;
}

/* Compact rows: labels only in the first row (still read by screen readers). */
.cfrm-repeater-display-rows .cfrm-repeater-row:not(:first-child) .cfrm-field-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

/* Pages. */
.cfrm-page {
	display: flex;
	flex-direction: column;
	gap: var(--cfrm-gap);
}

.cfrm-page[hidden],
.cfrm-page-indicator[hidden],
.cfrm-page-nav[hidden],
.cfrm-field[hidden] {
	display: none;
}

.cfrm-page-nav {
	display: flex;
	gap: 0.75em;
	justify-content: space-between;
}

.cfrm-page-nav .cfrm-page-next:only-child,
.cfrm-page-nav .cfrm-page-prev[hidden] + .cfrm-page-next {
	margin-left: auto;
}

.cfrm-paged .cfrm-fields {
	gap: 1.5rem;
}

.cfrm-footer.cfrm-footer-hidden .cfrm-submit,
.cfrm-footer.cfrm-footer-hidden .cfrm-spinner {
	display: none;
}

.cfrm-page-indicator {
	margin: 0 0 1.25rem;
}

.cfrm-page-indicator-text {
	margin-bottom: 0.4em;
	font-weight: 600;
}

.cfrm-progress {
	height: 0.5em;
	border-radius: 1em;
	background: color-mix(in srgb, var(--cfrm-accent) 15%, var(--cfrm-bg));
	overflow: hidden;
}

.cfrm-progress-bar {
	width: 0;
	height: 100%;
	background: var(--cfrm-accent);
	transition: width 0.25s ease;
}

.cfrm-page-indicator-circles {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25em;
	padding: 0;
	list-style: none;
}

.cfrm-page-step {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--cfrm-muted);
}

.cfrm-page-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	border: 2px solid currentColor;
	font-weight: 600;
}

.cfrm-page-step.is-active,
.cfrm-page-step.is-complete {
	color: var(--cfrm-accent);
}

.cfrm-page-step.is-active .cfrm-page-step-number {
	background: var(--cfrm-accent);
	border-color: var(--cfrm-accent);
	color: var(--cfrm-accent-contrast);
}

@media (prefers-reduced-motion: reduce) {
	.cfrm-progress-bar {
		transition: none;
	}
}

/* Entry preview. */
.cfrm-entry-preview-notice {
	margin-bottom: 0.75em;
	padding: 0.6em 0.85em;
	border-left: 4px solid var(--cfrm-accent);
	background: color-mix(in srgb, var(--cfrm-accent) 8%, var(--cfrm-bg));
}

.cfrm-entry-preview-row {
	padding: 0.5em 0;
	border-bottom: 1px solid var(--cfrm-border);
}

.cfrm-entry-preview-label {
	font-weight: 600;
}

.cfrm-entry-preview-table {
	width: 100%;
	border-collapse: collapse;
}

.cfrm-entry-preview-table th,
.cfrm-entry-preview-table td {
	padding: 0.5em;
	border: 1px solid var(--cfrm-border);
	text-align: left;
	vertical-align: top;
}

.cfrm-entry-preview-table th {
	width: 35%;
}

.cfrm-entry-preview-loading,
.cfrm-entry-preview-empty {
	color: var(--cfrm-muted);
}

/* ==========================================================================
 * Media: uploads, camera, signature, rich text
 * ========================================================================== */

.cfrm-container input[type="file"] {
	display: block;
	max-width: 100%;
	font: inherit;
}

.cfrm-upload-hint {
	margin-top: 0.35em;
	font-size: 0.85em;
	color: var(--cfrm-muted);
}

/* Drop zone: the real file input covers the zone (keyboard + screen readers keep working). */
.cfrm-dropzone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6.5em;
	padding: 1em;
	text-align: center;
	color: var(--cfrm-muted);
	background: var(--cfrm-bg);
	border: 2px dashed var(--cfrm-border);
	border-radius: var(--cfrm-radius);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.cfrm-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.cfrm-dropzone:focus-within,
.cfrm-dropzone.is-dragover,
.cfrm-dropzone:hover {
	border-color: var(--cfrm-accent);
	background: color-mix(in srgb, var(--cfrm-accent) 6%, var(--cfrm-bg));
}

.cfrm-dropzone:focus-within {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfrm-accent) 25%, transparent);
}

.cfrm-dropzone-icon {
	font-size: 1.4em;
	color: var(--cfrm-accent);
}

.cfrm-file-list {
	margin: 0.5em 0 0;
	padding: 0;
	list-style: none;
}

.cfrm-file-list:empty {
	display: none;
}

.cfrm-file-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.35em 0.6em;
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
}

.cfrm-file-list li + li {
	margin-top: 0.35em;
}

.cfrm-container .cfrm-file-remove,
.cfrm-container .cfrm-signature-clear,
.cfrm-container .cfrm-camera-open,
.cfrm-container .cfrm-camera-capture,
.cfrm-container .cfrm-camera-cancel,
.cfrm-container .cfrm-richtext-link button {
	padding: 0.35em 0.8em;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	color: var(--cfrm-accent);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--cfrm-radius);
}

.cfrm-container .cfrm-camera-capture {
	color: var(--cfrm-accent-contrast);
	background: var(--cfrm-accent);
	border-color: var(--cfrm-accent);
}

.cfrm-container .cfrm-file-remove {
	padding: 0 0.5em;
	font-size: 1.2em;
	color: var(--cfrm-error);
}

.cfrm-camera-open[hidden],
.cfrm-camera-live[hidden],
.cfrm-richtext-link[hidden] {
	display: none;
}

/* Camera. */
.cfrm-camera {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6em;
}

.cfrm-camera-live {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.cfrm-camera-video {
	display: block;
	width: 100%;
	max-width: 30rem;
	border-radius: var(--cfrm-radius);
	background: #000;
}

.cfrm-camera-photo {
	display: block;
	max-width: 16rem;
	border-radius: var(--cfrm-radius);
}

/* Signature. */
.cfrm-signature {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5em;
	max-width: 40rem;
}

.cfrm-signature-pad {
	display: block;
	width: 100%;
	height: 10rem;
	touch-action: none;
	cursor: crosshair;
	background: var(--cfrm-bg);
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
}

.cfrm-signature-pad:focus-visible {
	outline: 2px solid var(--cfrm-accent);
	outline-offset: 2px;
}

.cfrm-has-error .cfrm-signature-pad {
	border-color: var(--cfrm-error);
}

/* Rich text. */
.cfrm-richtext-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	padding: 0.3em;
	border: 1px solid var(--cfrm-border);
	border-bottom: 0;
	border-radius: var(--cfrm-radius) var(--cfrm-radius) 0 0;
	background: color-mix(in srgb, var(--cfrm-border) 25%, var(--cfrm-bg));
}

.cfrm-container .cfrm-richtext-button {
	min-width: 2.2em;
	padding: 0.25em 0.5em;
	font: inherit;
	cursor: pointer;
	color: inherit;
	background: var(--cfrm-bg);
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
}

.cfrm-richtext-bold {
	font-weight: 700 !important;
}

.cfrm-richtext-italic {
	font-style: italic !important;
}

.cfrm-container .cfrm-richtext-editor {
	min-height: 8em;
	border-radius: 0 0 var(--cfrm-radius) var(--cfrm-radius);
	overflow-wrap: anywhere;
}

.cfrm-richtext-editor:focus {
	outline: none;
	border-color: var(--cfrm-border-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cfrm-accent) 25%, transparent);
}

.cfrm-richtext-editor > :first-child {
	margin-top: 0;
}

.cfrm-richtext-editor > :last-child {
	margin-bottom: 0;
}

.cfrm-richtext-link {
	display: flex;
	gap: 0.5em;
	padding: 0.4em;
	border: 1px solid var(--cfrm-border);
	border-bottom: 0;
}

/* Anything hidden (conditional logic, inactive pages, replaced inputs) stays hidden. */
.cfrm-container [hidden] {
	display: none !important;
}

.cfrm-file-list {
	max-width: 40rem;
}

/* ==========================================================================
 * External services: CAPTCHA, map
 * ========================================================================== */

.cfrm-captcha-widget:empty {
	display: none;
}

.cfrm-map {
	margin-bottom: 0.6em;
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
	overflow: hidden;
}

.cfrm-map-consent {
	padding: 1em;
	text-align: center;
	background: color-mix(in srgb, var(--cfrm-border) 20%, var(--cfrm-bg));
}

.cfrm-map-consent p {
	margin: 0 0 0.6em;
	font-size: 0.9em;
	color: var(--cfrm-muted);
}

.cfrm-container .cfrm-map-load,
.cfrm-container .cfrm-map-search-button,
.cfrm-container .cfrm-map-results button {
	padding: 0.45em 1em;
	font: inherit;
	cursor: pointer;
	color: var(--cfrm-accent);
	background: var(--cfrm-bg);
	border: 1px solid var(--cfrm-accent);
	border-radius: var(--cfrm-radius);
}

.cfrm-map-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 0.5em;
	border-bottom: 1px solid var(--cfrm-border);
}

.cfrm-map-search .cfrm-map-query {
	flex: 1 1 12rem;
	width: auto;
}

.cfrm-map-results {
	flex-basis: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

.cfrm-map-results li + li {
	margin-top: 0.25em;
}

.cfrm-container .cfrm-map-results button {
	width: 100%;
	text-align: left;
	color: inherit;
	border-color: var(--cfrm-border);
}

.cfrm-map-canvas {
	height: 18rem;
}

.cfrm-map-small .cfrm-map-canvas {
	height: 12rem;
}

.cfrm-map-large .cfrm-map-canvas {
	height: 26rem;
}

.cfrm-map-col-address {
	flex-basis: 100%;
}

.cfrm-map-col-lat,
.cfrm-map-col-lng {
	flex: 1 1 8rem;
}

/* ==========================================================================
 * Payments
 * ========================================================================== */

.cfrm-payment-hidden {
	display: none;
}

.cfrm-payment-price {
	font-size: 1.1em;
	font-weight: 600;
}

.cfrm-payment-quantity {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.4em;
}

.cfrm-payment-quantity .cfrm-sublabel {
	margin: 0;
	order: -1;
}

.cfrm-container .cfrm-payment-quantity .cfrm-input {
	width: 6em;
}

.cfrm-payment-user {
	display: flex;
	align-items: center;
	gap: 0.4em;
	max-width: 16rem;
}

.cfrm-currency-symbol {
	font-weight: 600;
	color: var(--cfrm-muted);
}

.cfrm-payment-total-amount {
	display: block;
	font-size: 1.4em;
	font-weight: 700;
}

.cfrm-payment-summary {
	width: 100%;
	max-width: 30rem;
	margin: 0 0 0.6em;
	border-collapse: collapse;
	font-size: 0.95em;
}

.cfrm-payment-summary td {
	padding: 0.3em 0;
	border-bottom: 1px solid var(--cfrm-border);
}

.cfrm-payment-summary td:last-child {
	text-align: right;
	white-space: nowrap;
}

.cfrm-coupon-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.cfrm-container .cfrm-coupon-apply {
	padding: 0.55em 1.1em;
	font: inherit;
	cursor: pointer;
	color: var(--cfrm-accent);
	background: transparent;
	border: 1px solid var(--cfrm-accent);
	border-radius: var(--cfrm-radius);
}

.cfrm-coupon-status {
	margin-top: 0.35em;
	font-size: 0.9em;
}

.cfrm-coupon-status.is-valid {
	color: #2f855a;
}

.cfrm-coupon-status.is-invalid {
	color: var(--cfrm-error);
}

.cfrm-payment-instructions {
	margin-top: 1em;
	padding: 0.75em 1em;
	border-left: 4px solid var(--cfrm-accent);
	background: color-mix(in srgb, var(--cfrm-accent) 6%, var(--cfrm-bg));
}

/* Online payments ---------------------------------------------------- */

.cfrm-gateway-stripe .cfrm-gateway-widget {
	padding: var(--cfrm-input-padding);
	border: 1px solid var(--cfrm-border);
	border-radius: var(--cfrm-radius);
	background: var(--cfrm-bg);
	max-width: 32rem;
}

.cfrm-gateway-stripe .cfrm-gateway-widget.StripeElement--focus {
	border-color: var(--cfrm-border-focus);
	box-shadow: 0 0 0 1px var(--cfrm-border-focus);
}

.cfrm-gateway-paypal .cfrm-gateway-widget {
	max-width: 32rem;
	min-height: 45px;
}

.cfrm-gateway-status:not(:empty) {
	margin-top: 0.4em;
	font-size: 0.9em;
	color: var(--cfrm-muted);
}

.cfrm-has-error .cfrm-gateway-status:not(:empty) {
	color: var(--cfrm-error);
}

.cfrm-gateway-test {
	margin: 0.4em 0 0;
	font-size: 0.85em;
	color: var(--cfrm-muted);
}

/* PDF download links in the confirmation message. */
.cfrm-pdf-links {
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
}

.cfrm-pdf-links li {
	margin: 0.25em 0;
}