@charset "UTF-8";

/* Authentication Container */
.auth-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100vh - 200px);
	background-color: #4b5e6e;
	color: #01D9FF;
}
/* Form Container */
.form-container {
	background-color: #2c3e50;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	width: 400px;
	max-width: 90%;
}
/* Tabs */
.tabs { display: flex; justify-content: space-around; margin-bottom: 20px; }
.tab {
	flex: 1;
	padding: 10px;
	cursor: pointer;
	text-align: center;
	border-bottom: 2px solid transparent;
	transition: 0.3s ease;
}
.tab.active { border-bottom: 2px solid #01D9FF; }

/* Forms */
.auth-form { display: none; flex-direction: column; }
.auth-form.active { display: flex; }

/* Input Fields */
.auth-form label { margin: 10px 0 5px; font-size: 14px; }
.auth-form input {
	padding: 10px;
	border: 1px solid #01D9FF;
	border-radius: 5px;
	background-color: transparent;
	color: #01D9FF;
	margin-bottom: 20px;
}
/* Submit Button */
.auth-btn {
	padding: 10px 20px;
	background-color: #01D9FF;
	color: #2c3e50;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.auth-btn:hover { background-color: #3ac8f2; }
/* Register Form - New Fields */
.auth-form label { margin: 10px 0 5px; font-size: 14px; }
.auth-form input {
	padding: 10px;
	border: 1px solid #01D9FF;
	border-radius: 5px;
	background-color: transparent;
	color: #01D9FF;
	margin-bottom: 20px;
}
.auth-form input[type="tel"] { width: 95%; }