.ppf-secure-widget {
	--ppf-ink: #18212f;
	--ppf-muted: #4b5565;
	--ppf-line: #cbd5e1;
	--ppf-surface: #ffffff;
	--ppf-soft: #f5f7fb;
	--ppf-accent: #2954c8;
	--ppf-accent-dark: #193a96;
	--ppf-warning: #6b4d08;
	--ppf-focus-dark: #0b1f3a;
	--ppf-focus-light: #ffffff;
	box-sizing: border-box;
	width: 100%;
	max-width: 54rem;
	margin: 1.5rem auto;
	padding: clamp(1rem, 3vw, 2rem);
	border: 1px solid var(--ppf-line);
	border-radius: 0.875rem;
	background: var(--ppf-surface);
	color: var(--ppf-ink);
	box-shadow: 0 0.5rem 1.5rem rgb(15 23 42 / 8%);
	font: inherit;
	line-height: 1.55;
}

.ppf-secure-widget,
.ppf-secure-widget * {
	box-sizing: border-box;
}

.ppf-secure-widget__intro h2,
.ppf-secure-widget__output h3 {
	margin: 0 0 0.625rem;
	color: var(--ppf-ink);
	line-height: 1.25;
}

.ppf-secure-widget__intro > p {
	margin: 0 0 1.25rem;
	color: var(--ppf-muted);
}

.ppf-secure-widget__form {
	display: grid;
	gap: 1rem;
}

.ppf-secure-widget__field {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.ppf-secure-widget label {
	font-weight: 700;
}

.ppf-secure-widget textarea,
.ppf-secure-widget select {
	width: 100%;
	max-width: 100%;
	border: 1px solid #8491a5;
	border-radius: 0.5rem;
	background: #fff;
	color: var(--ppf-ink);
	font: inherit;
	line-height: 1.45;
}

.ppf-secure-widget textarea {
	min-height: 9rem;
	padding: 0.75rem;
	resize: vertical;
}

.ppf-secure-widget select {
	min-height: 2.75rem;
	padding: 0.55rem 2.25rem 0.55rem 0.7rem;
}

.ppf-secure-widget button {
	width: fit-content;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.65rem 1rem;
	border: 2px solid transparent;
	border-radius: 0.5rem;
	background: var(--ppf-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.ppf-secure-widget button:hover {
	background: var(--ppf-accent-dark);
}

.ppf-secure-widget button:disabled {
	cursor: wait;
	opacity: 0.65;
}

.ppf-secure-widget textarea:focus-visible,
.ppf-secure-widget select:focus-visible,
.ppf-secure-widget button:focus-visible,
.ppf-secure-widget__result:focus-visible {
	outline: 3px solid var(--ppf-focus-light);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--ppf-focus-dark);
}

.ppf-secure-widget__warning,
.ppf-secure-widget__processing,
.ppf-secure-widget__storage,
.ppf-secure-widget__fallback-notice,
.ppf-secure-widget__validation-detail,
.ppf-secure-widget__status {
	margin: 0.55rem 0 0;
	overflow-wrap: anywhere;
}

.ppf-secure-widget__warning {
	color: var(--ppf-warning);
	font-size: 0.9375rem;
}

.ppf-secure-widget__processing,
.ppf-secure-widget__storage {
	color: var(--ppf-muted);
	font-size: 0.9375rem;
}

.ppf-secure-widget__status,
.ppf-secure-widget__validation-detail {
	font-weight: 700;
}

.ppf-secure-widget__output {
	min-width: 0;
	margin-top: 1.25rem;
	padding: 1rem;
	border-radius: 0.625rem;
	background: var(--ppf-soft);
}

.ppf-secure-widget__result {
	width: 100%;
	max-width: 100%;
	margin: 0.85rem 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ppf-ink);
	font: inherit;
	line-height: 1.55;
	overflow: visible;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	user-select: text;
}

.ppf-secure-widget [hidden] {
	display: none;
}

@media (max-width: 40rem) {
	.ppf-secure-widget {
		margin: 1rem 0;
		border-radius: 0.625rem;
	}

	.ppf-secure-widget button {
		width: 100%;
	}
}

@media (forced-colors: active) {
	.ppf-secure-widget,
	.ppf-secure-widget textarea,
	.ppf-secure-widget select,
	.ppf-secure-widget button,
	.ppf-secure-widget__result {
		border: 1px solid CanvasText;
	}

	.ppf-secure-widget textarea:focus-visible,
	.ppf-secure-widget select:focus-visible,
	.ppf-secure-widget button:focus-visible,
	.ppf-secure-widget__result:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 2px;
		box-shadow: none;
	}
}