/* Container handles the centering */
.auth-container
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - var(--nav-h));
	background: radial-gradient(circle at center, #2A2A2A 0%, #111111 100%);
}

.auth-box
{
	background: rgba(255, 255, 255, 0.05);
	padding: 2rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	width: 100%;
	max-width: 400px;
	backdrop-filter: blur(10px);
	text-align: center;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.auth-box h2
{
	color: #FFFFFF;
	margin-bottom: 1.5rem;
}

.auth-input
{
	width: 100%;
	padding: 12px;
	margin-bottom: 10px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	color: #FFFFFF;
	box-sizing: border-box;
	font-family: "Noto Sans", sans-serif;
}

.auth-input:focus
{
	outline: none;
	border-color: var(--accent-blue);
	background: rgba(0, 0, 0, 0.5);
}

.auth-btn
{
	width: 100%;
	padding: 12px;
	background: var(--accent-blue);
	border: none;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
	margin-top: 10px;
	text-transform: uppercase;
	transition: 0.2s;
}

.auth-btn:hover
{
	background: #FFFFFF;
	transform: scale(1.02);
}

.error-msg
{
	color: #FF4D4D;
	font-size: 0.9rem;
	margin-top: 10px;
	display: none;
}

.step-2
{
	display: none;
}

.auth-checkbox-group
{
	text-align: left;
	margin: 15px 0;
	font-size: 0.9rem;
	color: #CCCCCC;
}

.auth-checkbox-label
{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}

.auth-checkbox-label input
{
	margin-top: 4px;
	accent-color: var(--accent-blue);
}

.auth-checkbox-label a
{
	color: var(--accent-blue);
	text-decoration: none;
}

.auth-checkbox-label small
{
	display: block;
	color: #888888;
	font-size: 0.8rem;
	margin-top: 2px;
}

/* Container for the checkbox row */
.auth-checkbox-group {
	text-align: left;
	margin: 20px 0;
	font-size: 0.9rem;
	color: #ccc;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* The clickable label */
.auth-checkbox-label {
	display: grid;
	grid-template-columns: 24px auto; /* Box | Text */
	gap: 12px;
	align-items: start;
	cursor: pointer;
	position: relative;
	user-select: none;
	transition: opacity 0.2s;
}

.auth-checkbox-label:hover {
	opacity: 1;
}

/* HIDE the default ugly browser checkbox */
.auth-checkbox-label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* --- THE CUSTOM BOX --- */
.checkmark {
	position: relative;
	height: 22px;
	width: 22px;
	background-color: rgba(255, 255, 255, 0.05);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* When Checked: Change Border and Background */
.auth-checkbox-label input:checked ~ .checkmark {
	background-color: rgba(13, 205, 255, 0.15); /* Soft Blue BG */
	border-color: var(--accent-blue);
	box-shadow: 0 0 10px rgba(13, 205, 255, 0.4); /* Glow Effect */
}

/* --- THE CHECK MARK ICON (Hidden by default) --- */
.checkmark::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid var(--accent-blue);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0); /* Start tiny */
	transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); /* Pop animation */
	opacity: 0;
}

/* When Checked: Animate the Check Mark */
.auth-checkbox-label input:checked ~ .checkmark::after {
	transform: rotate(45deg) scale(1.2); /* Pop slightly bigger */
	opacity: 1;
}

/* Text Styling */
.auth-checkbox-label span {
	line-height: 1.4;
	font-weight: 400;
}

.auth-checkbox-label a {
	color: var(--accent-blue);
	text-decoration: none;
	font-weight: 600;
}

.auth-checkbox-label small {
	display: block;
	color: #888;
	font-size: 0.8rem;
	margin-top: 2px;
}

/* --- Validation Styles --- */
.validation-feedback {
	font-size: 0.8rem;
	margin-top: -10px;
	margin-bottom: 15px;
	display: none; /* Hidden by default */
}

.validation-feedback.error {
	display: block;
	color: #ff4d4d;
}

.validation-feedback.success {
	display: block;
	color: #00ff00;
}

/* Password Criteria List */
.password-criteria {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
	font-size: 0.75rem;
	color: #666;
}

.criteria-item {
	display: flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s;
}

.criteria-item.valid {
	color: #00ff00; /* Green when met */
}

.criteria-item::before {
	content: "○"; /* Empty circle */
	font-weight: bold;
}

.criteria-item.valid::before {
	content: "●"; /* Filled circle */
}

/* ... (Keep all your existing auth styles for inputs, checkboxes, etc.) ... */

/* --- VALIDATION FEEDBACK (Email & Password) --- */
.validation-feedback {
	font-size: 0.8rem;
	margin-top: -10px;
	margin-bottom: 15px;
	display: none; /* Hidden by default */
	text-align: left;
}

.validation-feedback.error {
	display: block;
	color: #ff4d4d;
}

.validation-feedback.success {
	display: block;
	color: #00ff00;
}

/* Password Criteria List */
.password-criteria {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
	font-size: 0.75rem;
	color: #888;
	justify-content: flex-start;
}

.criteria-item {
	display: flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s;
}

.criteria-item::before {
	content: "○"; /* Empty circle */
	font-weight: bold;
}

.criteria-item.valid {
	color: #00ff00; /* Green when met */
}

.criteria-item.valid::before {
	content: "●"; /* Filled circle */
}

/* --- ACCOUNT PORTAL STYLES --- */
.danger-zone {
	border: 1px solid #ff4d4d;
	padding: 20px;
	border-radius: 8px;
	margin-top: 30px;
	background: rgba(255, 77, 77, 0.05);
}

.status-badge {
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: bold;
	text-transform: uppercase;
}

.verified {
	background: rgba(0, 255, 0, 0.2);
	color: #00ff00;
}

.unverified {
	background: rgba(255, 200, 0, 0.2);
	color: #ffcc00;
}

/* --- Password Toggle Styling --- */
.password-wrapper {
	position: relative;
	margin-bottom: 10px; /* Takes over the margin from the input */
}

.password-wrapper input {
	margin-bottom: 0 !important; /* Remove input's bottom margin */
	padding-right: 40px; /* Make space so text doesn't hit the button */
}

.password-toggle-btn {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%); /* Perfect vertical center */
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	color: #888;
	padding: 0;
	line-height: 1;
	transition: color 0.2s;
	/* Ensure it sits on top */
	z-index: 2;
}

.password-toggle-btn:hover {
	color: var(--accent-blue);
	transform: translateY(-50%) scale(1.1);
}