.signup-card {
	width: 576px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

	.signup-form-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		margin-bottom: 32px;
		text-align: center;
		padding: 0 24px;
		width: 100%;

		.signup-header-icon {
			width: 32px;
			height: 32px;
			font-size: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.signup-header-title {
			font-family: Inter, sans-serif;
			font-size: 18px;
			font-weight: 600;
			line-height: 1;
			letter-spacing: 0;
			color: var(--l1-foreground);
			margin: 0 !important;
		}

		.signup-header-subtitle {
			font-family: Inter, sans-serif;
			font-size: 13px;
			font-weight: 400;
			line-height: 20px;
			letter-spacing: -0.065px;
			color: var(--l2-foreground);
			max-width: 360px;
			margin: 0 !important;
			text-align: center;
		}
	}

	.signup-form {
		width: 100%;

		.signup-form-container {
			width: 100%;
			background: var(--l1-background);
			border: 1px solid var(--l1-border);
			border-radius: 4px;
			padding: 24px;

			.signup-form-fields {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 24px;
			}

			.signup-field-container {
				display: flex;
				flex-direction: column;
				gap: 12px;
			}

			.signup-form-input,
			.signup-antd-input {
				height: 32px;
				width: 100%;
				border-radius: 2px;

				&.ant-input,
				&.ant-input-password,
				&.ant-input-affix-wrapper {
					height: 32px;
					border-radius: 2px;
					background: var(--l2-background);
					border-color: var(--l2-border);
					color: var(--l2-foreground);
				}

				&.ant-input-affix-wrapper {
					.ant-input {
						height: auto;
						background: transparent;
					}
				}

				&::placeholder {
					color: var(--l2-foreground);
				}

				&:focus {
					border-color: var(--primary);
				}
			}

			.signup-form-input {
				height: 32px;
				background: var(--l2-background);
				border: 1px solid var(--l1-border);
				border-radius: 2px;
				padding: 6px 8px;
				font-family: Inter, sans-serif;
				font-size: 13px;
				font-weight: 400;
				line-height: 1;
				letter-spacing: -0.065px;
				color: var(--l1-foreground);

				&::placeholder {
					color: var(--l2-foreground);
				}

				&:hover {
					border-color: var(--l1-border);
				}

				&:focus {
					border-color: var(--primary);
					box-shadow: none;
				}
			}
		}

		.signup-error-callout,
		.signup-info-callout {
			margin-top: 24px;
		}

		.signup-error-callout {
			background: color-mix(in srgb, var(--danger-background) 10%, transparent);
			border: 1px solid
				color-mix(in srgb, var(--danger-background) 20%, transparent);
			border-radius: 4px;
			animation: horizontal-shaking 300ms ease-out;
		}

		.signup-info-message {
			color: var(--l2-foreground);
			font-size: 11px;
			font-weight: 400;
			line-height: 1.45;
			margin: 24px 0 0 0;
		}

		.signup-form-actions {
			margin-top: 24px;
			display: flex;
			width: 100%;

			.signup-submit-button {
				width: 100%;
			}
		}

		.ant-form-item {
			margin-bottom: 0;
		}
	}

	@media (max-width: 768px) {
		width: 100%;
		padding: 0 16px;

		.signup-form-header {
			padding: 0;
		}
	}
}

@keyframes horizontal-shaking {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(5px);
	}
	50% {
		transform: translateX(-5px);
	}
	75% {
		transform: translateX(5px);
	}
	100% {
		transform: translateX(0);
	}
}
