/*
 * FIG Forms front end.
 * Visual values come only from CSS custom properties (--figforms-*), set per form by its
 * appearance preset. Modes: .figforms--fig (full styles), .figforms--theme (layout only,
 * theme supplies the look), .figforms--none (only the essentials below).
 */

/* ---------- essentials (every mode) ---------- */
.figforms [hidden] { display: none !important; }
.figforms__hp,
.figforms__field--offscreen {
	position: absolute !important; left: -10000px !important; top: auto !important;
	width: 1px !important; height: 1px !important; overflow: hidden !important;
}
.figforms-editor-preview { pointer-events: none; }
.figforms-edit-link { margin: 0 0 6px; font-size: 13px; text-align: right; }
.figforms-admin-note { padding: 10px 14px; border-left: 4px solid #dba617; background: #fcf9e8; font-size: 14px; }

/* ---------- layout (fig + theme) ---------- */
.figforms--fig,
.figforms--theme { box-sizing: border-box; max-width: 100%; }
.figforms--fig *,
.figforms--fig *::before,
.figforms--fig *::after,
.figforms--theme *,
.figforms--theme *::before,
.figforms--theme *::after { box-sizing: border-box; }

.figforms--fig .figforms__grid,
.figforms--theme .figforms__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--figforms-gap, 20px) 16px;
}
.figforms--fig .figforms__field,
.figforms--theme .figforms__field { grid-column: span 12; min-width: 0; margin: 0; }
.figforms--fig .figforms__col-9, .figforms--theme .figforms__col-9 { grid-column: span 9; }
.figforms--fig .figforms__col-8, .figforms--theme .figforms__col-8 { grid-column: span 8; }
.figforms--fig .figforms__col-6, .figforms--theme .figforms__col-6 { grid-column: span 6; }
.figforms--fig .figforms__col-4, .figforms--theme .figforms__col-4 { grid-column: span 4; }
.figforms--fig .figforms__col-3, .figforms--theme .figforms__col-3 { grid-column: span 3; }
@media (max-width: 640px) {
	.figforms--fig .figforms__field,
	.figforms--theme .figforms__field { grid-column: span 12 !important; }
}
.figforms--fig .figforms__subgrid,
.figforms--theme .figforms__subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 16px; }
.figforms--fig .figforms__sub--street,
.figforms--fig .figforms__sub--line2,
.figforms--theme .figforms__sub--street,
.figforms--theme .figforms__sub--line2 { grid-column: 1 / -1; }
.figforms--fig .figforms__group,
.figforms--theme .figforms__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.figforms--fig .figforms__label,
.figforms--theme .figforms__label { display: block; margin: 0 0 6px; padding: 0; }
.figforms--fig .figforms__input,
.figforms--theme .figforms__input { display: block; width: 100%; max-width: 100%; }
.figforms--fig select[multiple].figforms__input,
.figforms--theme select[multiple].figforms__input { height: auto; }
.figforms--fig .figforms__options,
.figforms--theme .figforms__options { display: flex; flex-direction: column; gap: 8px; }
.figforms--fig .figforms__options--horizontal,
.figforms--theme .figforms__options--horizontal { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
.figforms--fig .figforms__option,
.figforms--theme .figforms__option { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; margin: 0; }
.figforms--fig .figforms__option input,
.figforms--theme .figforms__option input { flex: none; margin: 0.2em 0 0; }
.figforms--fig .figforms__other-text,
.figforms--theme .figforms__other-text { margin-top: 8px; }
.figforms--fig .figforms__nav,
.figforms--theme .figforms__nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: var(--figforms-gap, 20px); }
.figforms--fig .figforms__btn--next,
.figforms--fig .figforms__submit,
.figforms--theme .figforms__btn--next,
.figforms--theme .figforms__submit { margin-left: auto; }
.figforms--fig .figforms__error:empty,
.figforms--theme .figforms__error:empty { display: none; }
.figforms--fig .figforms__error,
.figforms--theme .figforms__error { margin-top: 6px; color: var(--figforms-error, #b42318); font-size: 0.875em; }
.figforms--fig .figforms__affix,
.figforms--theme .figforms__affix { display: flex; align-items: stretch; }
.figforms--fig .figforms__affix .figforms__input,
.figforms--theme .figforms__affix .figforms__input { flex: 1; min-width: 0; }
.figforms--fig .figforms__count,
.figforms--theme .figforms__count { text-align: right; font-size: 0.8em; opacity: 0.75; margin-top: 4px; }
.figforms--fig .figforms__message,
.figforms--theme .figforms__message { margin: 0 0 var(--figforms-gap, 20px); }
.figforms--fig .figforms__message p:last-child,
.figforms--theme .figforms__message p:last-child { margin-bottom: 0; }
.figforms--fig .figforms__message:focus,
.figforms--theme .figforms__message:focus { outline: none; }
.figforms--theme .figforms__message--error { color: var(--figforms-error, #b42318); }
.figforms--fig .figforms__page-title,
.figforms--theme .figforms__page-title { margin: 0 0 16px; }
.figforms--fig .figforms__page-title:focus,
.figforms--theme .figforms__page-title:focus { outline: none; }

/* ---------- FIG styles (preset-driven) ---------- */
.figforms--fig {
	font-family: var(--figforms-font, inherit);
	font-size: var(--figforms-font-size, 16px);
	line-height: 1.5;
	color: var(--figforms-text, #1f2328);
	background: var(--figforms-bg, transparent);
	padding: var(--figforms-padding, 0);
	border-radius: var(--figforms-form-radius, 0);
}
.figforms--fig .figforms__label { font-weight: var(--figforms-label-weight, 600); font-size: 0.95em; color: var(--figforms-text, #1f2328); }
.figforms--fig .figforms__label--sub { font-weight: 400; font-size: 0.85em; color: var(--figforms-muted, #5b6168); margin-bottom: 4px; }
.figforms--fig .figforms__req { color: var(--figforms-error, #b42318); }
.figforms--fig .figforms__desc,
.figforms--fig .figforms__hint { color: var(--figforms-muted, #5b6168); font-size: 0.875em; margin: -2px 0 8px; }
.figforms--fig .figforms__hint { margin: 6px 0 0; }
.figforms--fig .figforms__input {
	font: inherit;
	color: var(--figforms-field-text, #1f2328);
	background: var(--figforms-field-bg, #fff);
	border: 1px solid var(--figforms-field-border, #b9bec4);
	border-radius: var(--figforms-field-radius, 6px);
	min-height: var(--figforms-field-height, 46px);
	padding: 10px 12px;
	margin: 0;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none; appearance: none;
}
.figforms--fig textarea.figforms__input { min-height: 0; resize: vertical; }
.figforms--fig select.figforms__input:not([multiple]) {
	padding-right: 36px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.figforms--fig .figforms__file { padding: 9px 10px; min-height: 0; }
.figforms--fig .figforms__input::placeholder { color: var(--figforms-muted, #5b6168); opacity: 0.7; }
.figforms--fig .figforms__input:hover { border-color: var(--figforms-muted, #5b6168); }
.figforms--fig .figforms__input:focus,
.figforms--fig .figforms__option input:focus-visible,
.figforms--fig .figforms__btn:focus-visible {
	outline: none;
	border-color: var(--figforms-focus, #2563eb);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--figforms-focus, #2563eb) 30%, transparent);
}
.figforms--fig .figforms__option input { accent-color: var(--figforms-accent, #2563eb); width: 1.15em; height: 1.15em; }
.figforms--fig .is-invalid .figforms__input,
.figforms--fig .figforms__input[aria-invalid="true"] { border-color: var(--figforms-error, #b42318); }
.figforms--fig .figforms__affix .figforms__prefix,
.figforms--fig .figforms__affix .figforms__suffix {
	display: flex; align-items: center; padding: 0 12px;
	background: color-mix(in srgb, var(--figforms-field-border, #b9bec4) 25%, var(--figforms-field-bg, #fff));
	border: 1px solid var(--figforms-field-border, #b9bec4); color: var(--figforms-muted, #5b6168);
}
.figforms--fig .figforms__affix .figforms__prefix { border-right: 0; border-radius: var(--figforms-field-radius, 6px) 0 0 var(--figforms-field-radius, 6px); }
.figforms--fig .figforms__affix .figforms__suffix { border-left: 0; border-radius: 0 var(--figforms-field-radius, 6px) var(--figforms-field-radius, 6px) 0; }
.figforms--fig .figforms__affix .figforms__prefix + .figforms__input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.figforms--fig .figforms__affix .figforms__input:has(+ .figforms__suffix) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.figforms--fig .figforms__calc { font-size: 1.5em; font-weight: 700; color: var(--figforms-text, #1f2328); }
.figforms--fig .figforms__section-title { margin: 8px 0 4px; font-size: 1.2em; padding-bottom: 6px; border-bottom: 1px solid var(--figforms-field-border, #b9bec4); }
.figforms--fig .figforms__html > :first-child { margin-top: 0; }
.figforms--fig .figforms__html > :last-child { margin-bottom: 0; }
.figforms--fig .figforms__consent { font-size: 0.95em; }

.figforms--fig .figforms__btn {
	font: inherit; font-weight: 600; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: var(--figforms-field-height, 46px);
	padding: 10px 26px;
	border-radius: var(--figforms-button-radius, 6px);
	border: 1px solid var(--figforms-accent, #2563eb);
	background: var(--figforms-accent, #2563eb);
	color: var(--figforms-accent-text, #fff);
	transition: filter .15s, transform .05s;
	text-decoration: none;
}
.figforms--fig .figforms__btn:hover { filter: brightness(1.08); }
.figforms--fig .figforms__btn:active { transform: translateY(1px); }
.figforms--fig .figforms__btn--prev { background: transparent; color: var(--figforms-accent, #2563eb); }
.figforms--fig .figforms__btn[disabled] { opacity: 0.7; cursor: progress; }

.figforms__spinner { display: none; }
.figforms.is-loading .figforms__spinner {
	display: inline-block; width: 1em; height: 1em; border-radius: 50%;
	border: 2px solid currentColor; border-right-color: transparent;
	animation: figforms-spin .7s linear infinite;
}
@keyframes figforms-spin { to { transform: rotate(360deg); } }

.figforms--fig .figforms__message {
	padding: 14px 16px; border-radius: var(--figforms-field-radius, 6px);
	border-left: 4px solid currentColor;
}
.figforms--fig .figforms__message--success { color: var(--figforms-success, #1b7f3b); background: color-mix(in srgb, var(--figforms-success, #1b7f3b) 10%, transparent); }
.figforms--fig .figforms__message--error { color: var(--figforms-error, #b42318); background: color-mix(in srgb, var(--figforms-error, #b42318) 9%, transparent); }
.figforms--fig .figforms__message--info { color: var(--figforms-text, #1f2328); background: color-mix(in srgb, var(--figforms-muted, #5b6168) 12%, transparent); }

/* Progress */
.figforms--fig .figforms__progress { margin-bottom: calc(var(--figforms-gap, 20px) + 4px); }
.figforms--fig .figforms__progress-text { font-size: 0.85em; color: var(--figforms-muted, #5b6168); margin-bottom: 6px; }
.figforms--fig .figforms__progress-bar { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--figforms-field-border, #b9bec4) 45%, transparent); overflow: hidden; }
.figforms--fig .figforms__progress-bar span { display: block; height: 100%; width: 0; background: var(--figforms-accent, #2563eb); transition: width .3s; }
.figforms--fig .figforms__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; counter-reset: none; }
.figforms--fig .figforms__step { display: flex; align-items: center; gap: 8px; color: var(--figforms-muted, #5b6168); font-size: 0.9em; margin: 0; }
.figforms--fig .figforms__step-num {
	display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%;
	border: 2px solid var(--figforms-field-border, #b9bec4); font-weight: 700; font-size: 0.85em;
}
.figforms--fig .figforms__step.is-current { color: var(--figforms-text, #1f2328); font-weight: 600; }
.figforms--fig .figforms__step.is-current .figforms__step-num,
.figforms--fig .figforms__step.is-done .figforms__step-num { border-color: var(--figforms-accent, #2563eb); background: var(--figforms-accent, #2563eb); color: var(--figforms-accent-text, #fff); }

@media (prefers-reduced-motion: reduce) {
	.figforms--fig *, .figforms.is-loading .figforms__spinner { transition: none !important; animation-duration: 2s !important; }
}

/* Signature pad and image choices */
.figforms__sig { position: relative; }
.figforms__sig canvas { display: block; width: 100%; height: var(--figforms-sig-h, 180px); background: var(--figforms-field-bg, #fff); border: 1px solid var(--figforms-field-border, #cbd5e1); border-radius: var(--figforms-field-radius, 6px); touch-action: none; cursor: crosshair; }
.figforms__sig-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.figforms__sig-clear { background: none; border: 0; padding: 4px 2px; color: var(--figforms-accent, #2563eb); text-decoration: underline; cursor: pointer; font: inherit; }
.figforms__field.is-invalid .figforms__sig canvas { border-color: var(--figforms-error, #b91c1c); }
.figforms__option-img { display: block; max-width: 120px; max-height: 120px; height: auto; border-radius: 4px; }
.figforms__option:has(.figforms__option-img) { flex-direction: column; align-items: flex-start; }

/* Layout follows the width of the form itself (not the screen), so it also works inside narrow columns. */
.figforms-wrap { container-type: inline-size; container-name: figforms; }
.figforms--fig .figforms__row-start.figforms__col-12, .figforms--theme .figforms__row-start.figforms__col-12 { grid-column: 1 / span 12; }
.figforms--fig .figforms__row-start.figforms__col-9, .figforms--theme .figforms__row-start.figforms__col-9 { grid-column: 1 / span 9; }
.figforms--fig .figforms__row-start.figforms__col-8, .figforms--theme .figforms__row-start.figforms__col-8 { grid-column: 1 / span 8; }
.figforms--fig .figforms__row-start.figforms__col-6, .figforms--theme .figforms__row-start.figforms__col-6 { grid-column: 1 / span 6; }
.figforms--fig .figforms__row-start.figforms__col-4, .figforms--theme .figforms__row-start.figforms__col-4 { grid-column: 1 / span 4; }
.figforms--fig .figforms__row-start.figforms__col-3, .figforms--theme .figforms__row-start.figforms__col-3 { grid-column: 1 / span 3; }
@container figforms (max-width: 760px) {
	.figforms--fig .figforms__col-3, .figforms--theme .figforms__col-3,
	.figforms--fig .figforms__col-4, .figforms--theme .figforms__col-4 { grid-column: span 6; }
	.figforms--fig .figforms__row-start.figforms__col-3, .figforms--theme .figforms__row-start.figforms__col-3,
	.figforms--fig .figforms__row-start.figforms__col-4, .figforms--theme .figforms__row-start.figforms__col-4 { grid-column: 1 / span 6; }
}
@container figforms (max-width: 520px) {
	.figforms--fig .figforms__field, .figforms--theme .figforms__field,
	.figforms--fig .figforms__row-start, .figforms--theme .figforms__row-start { grid-column: 1 / span 12 !important; }
}