/*body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: linear-gradient(45deg, greenyellow, dodgerblue);
	font-family: "Sansita Swashed", cursive;
}*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
	/*background: linear-gradient(135deg, #4ade80 0%, #3b82f6 100%);*/
	background: linear-gradient(45deg, greenyellow, dodgerblue);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.container {
	width: 100%;
	max-width: 28rem;
}

.card {
	background: white;
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	padding: 2rem;
	width: 100%;
}

.header {
	margin-bottom: 2rem;
}

.logo-line {
	width: 4px;
	height: 2rem;
	background: #3b82f6;
	border-radius: 9999px;
	display: inline-block;
	margin-right: 0.5rem;
	vertical-align: middle;
}

.logo {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 400;
	color: #1f2937;
	vertical-align: middle;
}

.logo-superscript {
	color: #ef4444;
	font-size: 1.125rem;
	vertical-align: super;
}

.subtitle {
	color: #6b7280;
	font-size: 0.875rem;
	margin-top: 1rem;
}

.form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.input-group {
	display: flex;
	flex-direction: column;
}

.input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	font-size: 1rem;
	color: #374151;
	transition: all 0.2s;
}

	.input:focus {
		outline: none;
		border-color: #3b82f6;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}

	.input::placeholder {
		color: #9ca3af;
	}

.submit-btn {
	background: #3b82f6;
	color: white;
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.2s;
}

	.submit-btn:hover {
		background: #2563eb;
	}

.button-group {
	display: flex;
	gap: 1rem;
}

.back-btn {
	flex: 1;
	background: #f3f4f6;
	color: #374151;
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.2s;
}

	.back-btn:hover {
		background: #e5e7eb;
	}

.submit-btn {
	flex: 1;
}

.password-requirements {
	margin-top: 1.5rem;
	color: #6b7280;
	font-size: 0.75rem;
}

	.password-requirements p {
		margin-bottom: 0.25rem;
	}

	.password-requirements ul {
		list-style-type: disc;
		padding-left: 1rem;
	}

	.password-requirements li {
		margin: 0.25rem 0;
	}

/* Success styles */
.success-card {
	text-align: center;
}

.success-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.success-icon {
	width: 4rem;
	height: 4rem;
	background: #dcfce7;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}

	.success-icon svg {
		width: 2rem;
		height: 2rem;
		color: #22c55e;
		stroke-width: 2;
	}

.success-title {
	font-size: 1.5rem;
	font-weight: 500;
	color: #1f2937;
	margin-bottom: 0.5rem;
}

.success-message {
	color: #6b7280;
}

/* Error message styles */
.error-message {
	color: #ef4444;
	font-size: 0.875rem;
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/*html[dir="ltr"] .error-message.field-validation-error::before {
	content: "⚠";
	font-size: 1rem;
}*/
	.error-message.field-validation-error::before {
		content: "⚠";
		font-size: 1rem;
	}



/*html[dir="rtl"] .error-message.field-validation-error::after {
	content: "⚠";
	font-size: 1rem;
}*/
/* Input validation states */
.input.error {
	border-color: #ef4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.input.success {
	border-color: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.input.warning {
	border-color: #f59e0b;
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}
.input.input-validation-error {
	border-color: rgb(239, 68, 68);
	box-shadow: rgba(239, 68, 68, 0.1) 0px 0px 0px;
}
.input.valid {
	border-color: rgb(34, 197, 94);
	box-shadow: rgba(34, 197, 94, 0.1) 0px 0px 0px;
}
/* Responsive design */
@media (max-width: 640px) {
	.container {
		padding: 0;
	}

	.card {
		padding: 1.5rem;
		border-radius: 0.75rem;
	}

	.button-group {
		flex-direction: column;
	}

	.back-btn,
	.submit-btn {
		flex: none;
	}
}