/*
Table of contents:
1. Appearance shell tokens
2. Field token styling
3. Button and feedback styling
4. Entry error-state accessibility

Envato exception: required !important rules below normalize browser-generated anchors inside the error summary only within FormFlow-owned elements.
*/

.ffos-form-shell {
	max-width: var(--ff-max-width, 760px);
}

.ffos-form {
	background:
		radial-gradient(circle at top left, color-mix(in srgb, var(--ff-primary) 8%, transparent), transparent 32%),
		linear-gradient(180deg, color-mix(in srgb, var(--ff-surface) 96%, #fff), var(--ff-surface));
	border-color: var(--ff-border);
	box-shadow: 0 16px 48px rgba(23, 32, 51, .08);
}

.ffos-form-shell[style*="--ff-shadow:none"] .ffos-form {
	box-shadow: none;
}

.ffos-form-shell[style*="--ff-shadow:deep"] .ffos-form {
	box-shadow: 0 28px 90px rgba(15, 23, 42, .18);
}

.ffos-form-shell[style*="--ff-shadow:glow"] .ffos-form {
	box-shadow: 0 24px 80px color-mix(in srgb, var(--ff-primary) 24%, transparent);
}

.ffos-grid {
	gap: var(--ff-gap, 20px);
}

.ffos-help,
.ffos-pricing-line-note,
.ffos-signature-consent {
	color: var(--ff-muted);
	opacity: 1;
}

.ffos-field input:not([type=checkbox]):not([type=radio]),
.ffos-field textarea,
.ffos-field select,
.ffos-rich-text-editor,
.ffos-signature-pad {
	background: var(--ff-field-bg);
	border-color: var(--ff-border);
}

.ffos-submit,
.ffos-step-next {
	background: linear-gradient(135deg, var(--ff-primary), color-mix(in srgb, var(--ff-secondary) 42%, var(--ff-primary)));
	border-radius: var(--ff-button-radius, var(--ff-radius));
	color: var(--ff-button-text);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--ff-primary) 22%, transparent);
}

.ffos-submit:hover,
.ffos-step-next:hover {
	filter: saturate(1.08) brightness(1.02);
	transform: translateY(-1px);
}

.ffos-submit,
.ffos-step-next,
.ffos-step-back,
.ffos-field input,
.ffos-field textarea,
.ffos-field select {
	transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease, transform .18s ease;
}

.ffos-screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.ffos-required {
	color: #b42318;
	font-weight: 800;
}

.ffos-error-summary {
	background: #fff7f7;
	border: 2px solid #b42318;
	border-radius: var(--ff-radius);
	color: #7a271a;
	margin-top: 20px;
	padding: 14px 16px;
}

.ffos-error-summary:focus {
	box-shadow: 0 0 0 4px color-mix(in srgb, #b42318 18%, transparent);
	outline: 0;
}

.ffos-error-summary h3 {
	font-size: 1rem;
	margin: 0 0 8px;
}

.ffos-error-summary ul {
	margin: 0;
	padding-left: 1.2rem;
}

.ffos-error-summary a {
	color: #b42318;
	font-weight: 700;
	text-decoration: underline;
}

.ffos-field.has-error input:not([type=checkbox]):not([type=radio]),
.ffos-field.has-error textarea,
.ffos-field.has-error select,
.ffos-field.has-error .ffos-rich-text-editor,
.ffos-field.has-error .ffos-signature-stage {
	border-color: #b42318;
	box-shadow: 0 0 0 3px color-mix(in srgb, #b42318 14%, transparent);
}

.ffos-field [aria-invalid="true"] {
	outline-color: #b42318;
}
/* Popup and slide-in publishing modes */
.ffos-overlay-trigger{border:0;border-radius:10px;background:#635bff;color:#fff;cursor:pointer;font:inherit;font-weight:700;padding:11px 18px}.ffos-form-shell[data-overlay-form]{position:fixed;z-index:999999}.ffos-form-shell[data-overlay-form] .ffos-overlay-close{position:absolute;right:14px;top:12px;z-index:2;width:36px;height:36px;border:1px solid var(--ff-border,#d8dce5);border-radius:50%;background:#fff;color:#172033;cursor:pointer;font-size:22px;line-height:1}.ffos-layout-popup[data-overlay-form]{inset:0;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.58)}.ffos-layout-popup[data-overlay-form] .ffos-form{max-height:calc(100vh - 48px);overflow:auto}.ffos-layout-slide-in[data-overlay-form]{right:0;top:0;bottom:0;width:min(560px,100vw);padding:24px;background:#fff;box-shadow:-18px 0 48px rgba(15,23,42,.2);overflow:auto}.ffos-layout-slide-in[data-overlay-form] .ffos-form{min-height:100%}.ffos-overlay-open{overflow:hidden}@media(max-width:600px){.ffos-layout-popup[data-overlay-form]{padding:0}.ffos-layout-popup[data-overlay-form] .ffos-form{max-height:100vh;border-radius:0}}

/* Glassmorphism Preset */
.ffos-form-shell.ffos-theme-glass .ffos-form {
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.ffos-form-shell.ffos-theme-glass .ffos-field input:not([type=checkbox]):not([type=radio]),
.ffos-form-shell.ffos-theme-glass .ffos-field textarea,
.ffos-form-shell.ffos-theme-glass .ffos-field select,
.ffos-form-shell.ffos-theme-glass .ffos-rich-text-editor,
.ffos-form-shell.ffos-theme-glass .ffos-signature-pad {
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(4px);
	border-color: rgba(255, 255, 255, 0.25);
}

/* Dark Mode Preset */
.ffos-form-shell.ffos-theme-dark {
	--ff-text: #f8fafc;
	--ff-muted: #94a3b8;
	--ff-surface: #0f172a;
	--ff-field-bg: #1e293b;
	--ff-border: #334155;
}

.ffos-form-shell.ffos-theme-dark .ffos-form {
	background:
		radial-gradient(circle at top left, color-mix(in srgb, var(--ff-primary) 12%, transparent), transparent 35%),
		linear-gradient(180deg, #0f172a, #020617);
	border-color: #334155;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.ffos-form-shell.ffos-theme-dark .ffos-signature-pad {
	background: #1e293b;
}

.ffos-form-shell.ffos-theme-dark .ffos-rich-toolbar {
	background: #334155;
	border-bottom-color: #475569;
}

.ffos-form-shell.ffos-theme-dark .ffos-rich-toolbar button {
	background: #1e293b;
	color: #f8fafc;
	border-color: #475569;
}

.ffos-form-shell.ffos-theme-dark .ffos-pricing-line-note {
	background: rgba(255, 255, 255, 0.03);
	border-color: #334155;
}

.ffos-form-shell.ffos-theme-dark .ffos-pricing-summary {
	background: color-mix(in srgb, var(--ff-primary) 12%, #1e293b);
}

.ffos-payment-container {
	margin-top: var(--ff-gap, 20px);
	padding: 16px;
	border: 1px solid var(--ff-border);
	border-radius: var(--ff-radius);
	background: rgba(0, 0, 0, 0.02);
}

.ffos-payment-errors {
	color: #ef4444;
	margin-top: 8px;
	font-size: 14px;
}