.ungal-form-shell {
	display: grid;
	gap: 18px;
}

.ungal-form-shell.is-card .ungal-form {
	padding: 24px;
	border: 1px solid #dbe6f2;
	border-radius: 24px;
	background: #ffffff;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.ungal-form-head h3 {
	margin: 0 0 8px;
	color: #0f172a;
}

.ungal-form-head p {
	margin: 0;
	color: #64748b;
}

.ungal-form,
.ungal-form-grid {
	display: grid;
	gap: 16px;
}

.ungal-form-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ungal-form-field {
	display: grid;
	gap: 8px;
}

.ungal-form-field.is-textarea,
.ungal-form-field.is-html,
.ungal-form-field.is-checkbox,
.ungal-form-field.is-radio,
.ungal-form-field.is-submit {
	grid-column: 1 / -1;
}

.ungal-form-field label,
.ungal-form-consent span {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
}

.ungal-form-field small {
	color: #64748b;
}

.ungal-form-field input[type="text"],
.ungal-form-field input[type="email"],
.ungal-form-field input[type="tel"],
.ungal-form-field input[type="number"],
.ungal-form-field input[type="date"],
.ungal-form-field input[type="url"],
.ungal-form-field input[type="file"],
.ungal-form-field select,
.ungal-form-field textarea {
	width: 100%;
	border: 1px solid #cbd5e1;
	border-radius: 14px;
	background: #ffffff;
	padding: 12px 14px;
	font-size: 14px;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ungal-form-field input[type="text"]:focus-visible,
.ungal-form-field input[type="email"]:focus-visible,
.ungal-form-field input[type="tel"]:focus-visible,
.ungal-form-field input[type="number"]:focus-visible,
.ungal-form-field input[type="date"]:focus-visible,
.ungal-form-field input[type="url"]:focus-visible,
.ungal-form-field input[type="file"]:focus-visible,
.ungal-form-field select:focus-visible,
.ungal-form-field textarea:focus-visible,
.ungal-form-options input:focus-visible,
.ungal-form-consent input:focus-visible {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.ungal-form-field.has-invalid label,
.ungal-form-consent.has-invalid span {
	color: #b91c1c;
}

.ungal-form-field input.is-invalid,
.ungal-form-field select.is-invalid,
.ungal-form-field textarea.is-invalid,
.ungal-form-options input.is-invalid,
.ungal-form-consent input.is-invalid {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.ungal-form-field textarea {
	min-height: 140px;
	resize: vertical;
}

.ungal-form-options {
	display: grid;
	gap: 10px;
}

.ungal-form-options label,
.ungal-form-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.ungal-form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.ungal-form-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.ungal-form-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16), 0 14px 28px rgba(15, 23, 42, 0.18);
}

.ungal-form-submit:disabled {
	opacity: 0.7;
	cursor: wait;
}

.ungal-form-response {
	display: none;
	font-size: 14px;
	padding: 13px 15px;
	border-radius: 16px;
	border: 1px solid transparent;
}

.ungal-form-response.is-loading {
	display: block;
	color: #475569;
	background: #f8fafc;
	border-color: #dbe3ef;
}

.ungal-form-response.is-success {
	display: block;
	color: #166534;
	background: #effcf5;
	border-color: #bbf7d0;
}

.ungal-form-response.is-error {
	display: block;
	color: #be123c;
	background: #fff1f2;
	border-color: #fecdd3;
}

.ungal-form-replaced-message {
	padding: 18px;
	border-radius: 16px;
	background: #effcf5;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.ungal-form-honeypot {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.ungal-form-divider {
	grid-column: 1 / -1;
	height: 1px;
	background: #e2e8f0;
}

.ungal-form-step-break {
	grid-column: 1 / -1;
	padding-top: 8px;
	border-top: 1px solid #e2e8f0;
}

.ungal-form-editor-note {
	padding: 16px;
	border-radius: 16px;
	background: #f8fbff;
	border: 1px solid #dbe6f2;
	color: #64748b;
}

.ungal-form[aria-busy="true"] {
	opacity: 0.92;
}

@media (max-width: 767px) {
	.ungal-form-grid {
		grid-template-columns: 1fr;
	}
}