/**
 * Auth (Login/Register) Page Styles
 * Criticopolis Theme - Matching Figma Design
 */

/* ==========================================
   AUTH PAGE CONTAINER
   ========================================== */

   .auth-page {
	min-height: calc(100vh - 80px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background: linear-gradient(to bottom, #1a3a5c 0%, #0d2240 100%);
	position: relative;
	overflow: hidden;
	margin: 0;
}

/* City skyline background */
.auth-page::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 300px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23152d4a' d='M0,320 L0,200 L30,200 L30,180 L50,180 L50,160 L70,160 L70,200 L90,200 L90,140 L110,140 L110,120 L130,120 L130,140 L150,140 L150,200 L180,200 L180,100 L200,100 L200,80 L220,80 L220,100 L240,100 L240,200 L270,200 L270,160 L290,160 L290,140 L310,140 L310,160 L330,160 L330,200 L360,200 L360,120 L380,120 L380,100 L400,100 L400,80 L420,80 L420,100 L440,100 L440,120 L460,120 L460,200 L500,200 L500,180 L520,180 L520,160 L540,160 L540,180 L560,180 L560,200 L600,200 L600,140 L620,140 L620,120 L640,120 L640,100 L660,100 L660,120 L680,120 L680,140 L700,140 L700,200 L740,200 L740,160 L760,160 L760,200 L800,200 L800,180 L820,180 L820,160 L840,160 L840,140 L860,140 L860,160 L880,160 L880,180 L900,180 L900,200 L940,200 L940,120 L960,120 L960,100 L980,100 L980,80 L1000,80 L1000,60 L1020,60 L1020,80 L1040,80 L1040,100 L1060,100 L1060,120 L1080,120 L1080,200 L1120,200 L1120,160 L1140,160 L1140,200 L1180,200 L1180,140 L1200,140 L1200,120 L1220,120 L1220,140 L1240,140 L1240,200 L1280,200 L1280,180 L1300,180 L1300,160 L1320,160 L1320,180 L1340,180 L1340,200 L1380,200 L1380,140 L1400,140 L1400,120 L1420,120 L1420,140 L1440,140 L1440,320 Z'/%3E%3C/svg%3E");
	background-size: cover;
	background-position: bottom;
	opacity: 0.6;
	pointer-events: none;
}

.auth-container {
	display: flex;
	gap: 24px;
	max-width: 1000px;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}

/* ==========================================
   AUTH CARDS
   ========================================== */

.auth-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 40px 32px;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	flex: 0 1 420px;
}

.auth-card__title {
	font-family: 'Inter', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 28px 0;
	text-align: center;
	line-height: 1.3;
}

.auth-card__subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #666666;
	margin: 0 0 24px 0;
	text-align: center;
}

/* ==========================================
   FORM ELEMENTS
   ========================================== */

.auth-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.auth-form__group {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	gap: 6px;
}

.auth-form__label {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #333333;
}

input.auth-form__input {
	padding: 10px;
	border-radius: 28px;
	border: 1px solid var(--main-blue-950);
	font-size: 16px;
	font-family: var(--font-family-base);
	font-weight: 400;
	line-height: 1.5;
	
}

.auth-form__input::placeholder {
	color: var(--main-blue-950);
	text-align: center;
}

.auth-form__input:focus {
	outline: none;
	border-color: #1a3a5c;
	box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.15);
}

.auth-form__input:invalid:not(:placeholder-shown) {
	border-color: #ff4444;
	color: #ff4444;
}

/* Password field with toggle */
.auth-form__password-wrapper {
	position: relative;
}

.auth-form__password-wrapper .auth-form__input--password {
	padding: 10px 10px 10px 15px; 
    width: 100%;

}

.auth-form__password-toggle {
	position: absolute;
	top: 53%;
	right: 15px;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #1a3a5c;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-form__password-toggle:hover {
	color: #1a3a5c;
}

/* Password requirements */
.auth-form__password-requirements {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: #666666;
	margin-top: 10px;
	padding-left: 4px;
}

.auth-form__password-requirements p {
	margin: 0 0 6px 0;
	font-weight: 500;
}

.auth-form__password-requirements ul {
	margin: 0;
	padding-left: 20px;
	list-style-type: disc;
}

.auth-form__password-requirements li {
	margin-bottom: 4px;
}

/* ==========================================
   CHECKBOX
   ========================================== */

.auth-form__checkbox-group {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
}

.auth-form__checkbox {
	width: 20px;
	height: 20px;
	accent-color: #1a3a5c;
	cursor: pointer;
	flex-shrink: 0;
	margin-top: 2px;
}

.auth-form__checkbox-label {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #1a3a5c;
	cursor: pointer;
	line-height: 1.4;
}

.auth-form__checkbox-label a {
	color: #1a3a5c;
	text-decoration: underline;
}

/* ==========================================
   SUBMIT BUTTONS
   ========================================== */

.auth-form__submit {
	border: none;
	border-radius: 25px;
	padding: 16px 24px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	margin-top: 4px;
	width: 100%;
}

.auth-form__submit:active {
	transform: scale(0.98);
}

.auth-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Green button for registration */
.auth-form__submit--register {
	background: #2E7D32;
	color: #ffffff;
}

.auth-form__submit--register:hover {
	background: #388E3C;
}

.auth-form__submit--register:active {
	background: #1B5E20;
}

/* Yellow/Gold button for login */
.auth-form__submit--login {
	background: #F5B800;
	color: #1a1a1a;
}

.auth-form__submit--login:hover {
	background: #FFC107;
}

.auth-form__submit--login:active {
	background: #F57C00;
}

/* ==========================================
   LINKS
   ========================================== */

.auth-form__links {
	text-align: center;
	margin-top: 12px;
	margin-bottom: 4px;
}

.auth-form__link {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #1a3a5c;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.auth-form__link:hover {
	color: #0d2240;
}

/* Terms text */
.auth-form__terms {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: #1a3a5c;
	margin-top: 16px;
	line-height: 1.5;
	text-align: start;
}

.auth-form__terms a {
	color: #1a3a5c;
	text-decoration: underline;
}

/* ==========================================
   ERROR/SUCCESS MESSAGES
   ========================================== */

.auth-message {
	padding: 12px 16px;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	margin-bottom: 16px;
}

.auth-message--error {
	background: rgba(255, 68, 68, 0.1);
	border: 1px solid rgba(255, 68, 68, 0.3);
	color: #d32f2f;
}

.auth-message--success {
	background: rgba(46, 125, 50, 0.1);
	border: 1px solid rgba(46, 125, 50, 0.3);
	color: #2E7D32;
}

/* ==========================================
   TOAST MESSAGES
   ========================================== */

.auth-toast {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	border-radius: 8px;
	overflow: hidden;
}

.auth-toast__header {
	padding: 12px 16px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.auth-toast__body {
	padding: 12px 16px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
}

.auth-toast--error .auth-toast__header {
	background: rgba(255, 68, 68, 0.1);
	border-bottom: 1px solid rgba(255, 68, 68, 0.3);
	color: #d32f2f;
}

.auth-toast--error .auth-toast__body {
	background: rgba(255, 68, 68, 0.1);
	color: #d32f2f;
}

.auth-toast--success .auth-toast__header {
	background: rgba(46, 125, 50, 0.1);
	border-bottom: 1px solid rgba(46, 125, 50, 0.3);
	color: #2E7D32;
}

.auth-toast--success .auth-toast__body {
	background: rgba(46, 125, 50, 0.1);
	color: #2E7D32;
}

/* ==========================================
   DIVIDER
   ========================================== */

.auth-divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0;
}

.auth-divider__line {
	flex: 1;
	height: 1px;
	background: #d0d0d0;
}

.auth-divider__text {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #666666;
}

/* ==========================================
   SOCIAL LOGIN
   ========================================== */

.auth-social {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.auth-social__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 56px;
	background: #ffffff;
	border: 1px solid #1a3a5c;
	border-radius: 28px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
	text-decoration: none;
	padding: 0;
}

.auth-social__btn:hover {
	background: #f5f5f5;
	transform: scale(1.07);
}

.auth-social__btn svg {
	width: 24px;
	height: 24px;
}

/* Google icon colors */
.auth-social__btn--google svg {
	fill: none;
}

/* Facebook icon */
.auth-social__btn--facebook svg {
	fill: #1877F2;
}

/* Apple icon */
.auth-social__btn--apple svg {
	fill: #000000;
}

/* ==========================================
   ACTIVATION PAGE
   ========================================== */

.auth-card--activation {
	max-width: 520px;
	text-align: center;
}

.auth-activation-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed #1a3a5c;
	border-radius: 8px;
}

.auth-activation-info {
	border: 2px dashed #d0d0d0;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.auth-activation-info p {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #333333;
	line-height: 1.6;
	margin: 0;
	text-align: left;
}

.auth-activation-resend {
	border: 2px dashed #d0d0d0;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}

.auth-activation-resend p {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: #333333;
	line-height: 1.5;
	margin: 0;
	text-align: left;
}

.auth-activation-back {
	margin-top: 24px;
}

.auth-message--info {
	background: rgba(26, 58, 92, 0.1);
	border: 1px solid rgba(26, 58, 92, 0.3);
	color: #1a3a5c;
}

/* ==========================================
   LOST PASSWORD PAGE
   ========================================== */

.auth-card--lost-password {
	max-width: 480px;
	text-align: center;
}

.auth-lost-password-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border-radius: 50%;
	flex-shrink: 0;
}

.auth-lost-password-icon svg {
	width: 48px;
	height: 48px;
	display: block;
	flex-shrink: 0;
}

.auth-form__submit--lost-password {
	background: #F5B800;
	color: #1a1a1a;
	border: none;
	font-weight: 600;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.auth-form__submit--lost-password:hover {
	background: #e0a800;
	transform: translateY(-1px);
}

.auth-form__submit--lost-password:active {
	transform: translateY(0);
}

.auth-lost-password-back {
	margin-top: 24px;
	text-align: center;
}

/* ==========================================
   RESET PASSWORD PAGE
   ========================================== */

.auth-card--reset-password {
	max-width: 480px;
	text-align: center;
}

.auth-reset-password-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border-radius: 50%;
	flex-shrink: 0;
}

.auth-reset-password-icon svg {
	width: 48px;
	height: 48px;
	display: block;
	flex-shrink: 0;
}

.auth-form__submit--reset-password {
	background: #F5B800;
	color: #1a1a1a;
	border: none;
	font-weight: 600;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.auth-form__submit--reset-password:hover {
	background: #e0a800;
	transform: translateY(-1px);
}

.auth-form__submit--reset-password:active {
	transform: translateY(0);
}

.auth-reset-password-back {
	margin-top: 24px;
	text-align: center;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 900px) {
	.auth-container {
		flex-direction: column-reverse;
		align-items: center;
		gap: 32px;
	}
	
	.auth-card {
		max-width: 400px;
	}
	
	.auth-card:first-child {
		order: 2;
	}
	
	.auth-card:last-child {
		order: 1;
	}
}

@media (max-width: 480px) {
	.auth-page {
		padding: 20px 16px;
	}

	.auth-card {
		padding: 24px 20px;
		border-radius: 12px;
	}

	.auth-card__title {
		font-size: 18px;
	}

	.auth-form__submit {
		padding: 12px 20px;
		font-size: 15px;
	}
	
	.auth-social__btn {
		width: 48px;
		height: 48px;
	}
	
	.auth-social__btn svg {
		width: 20px;
		height: 20px;
	}
}