/* =================================================================
  MODIFIED CSS: Gradient Background & Elevated UI
  * The background is now a subtle, attractive linear gradient.
  * Card elements have been updated with soft gradients,
    border-radius, and shadows for a polished look.
  * The layout remains responsive with improved spacing and visual
    hierarchy on all devices.
  ================================================================= */

/* Variables -- UPDATED for new theme (AQUA palette) */
:root {
	--bg-gradient-start: #f6ffff; /* very light aqua tint */
	--bg-gradient-end: #e8fbfd;   /* subtle aqua end color */
	--card-gradient-start: #ffffff;
	--card-gradient-end: #f5fdfd;
	--text-color: #083238;       /* dark teal for contrast on aqua backgrounds */
	--text-muted: #5f7d7f;
	--border-color: #d9eef0;
	--accent-blue: #00BCD4;      /* AQUA primary color */
	--accent-red: #ff6b6b;       /* keep error color visible (slightly warmer) */
	--accent-yellow: #ffe082;    /* warm highlight for mid-strength bars */
	--accent-green: #2ec27e;     /* success/strong password */
	--radius: 16px;
	--shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.08);
	--shadow-strong: 0 12px 40px rgba(0, 0, 0, 0.12);
	--input-padding: 14px 16px;
	--font-main: "Google Sans", "Roboto", "Helvetica Neue", sans-serif;
	--font-size-base: 15px;
	--max-width: 1100px;
	--panel-gap: 40px;
	--panel-width-form: 580px;
	--panel-width-oauth: 360px;
}

/* Reset & base */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* MODIFIED: Gradient background and pinned footer */
html,
body {
	min-height: 100vh;
	font-family: var(--font-main), serif;
	background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
	color: var(--text-color);
	font-size: var(--font-size-base);
	line-height: 1.5;
	background-attachment: fixed; /* Ensures gradient fills viewport */
}
body {
	display: flex;
	flex-direction: column;
}

/* MODIFIED: Flex properties to manage content and footer */
.container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 28px 20px;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

/* Auth layout: now wider and centered vertically/horizontally */
.auth-container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--panel-gap);
	/* Added subtle animation for a smoother entrance */
	animation: fadeIn 0.8s ease-out;
}

/* MODIFIED: Card styles with gradient and softer shadows */
.panel,
.panel-oauth {
	flex: 0 1 auto;
	margin: 0;
	background: linear-gradient(180deg, var(--card-gradient-start), var(--card-gradient-end));
	border-radius: var(--radius);
	border: 1px solid #e0e0e0;
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(2px); /* Subtle blur for a glassy feel */
}

.panel {
	width: var(--panel-width-form);
	max-width: 100%;
	box-shadow: var(--shadow-soft);
	padding: 32px 28px;
	gap: 14px;
}

.panel-oauth {
	width: var(--panel-width-oauth);
	max-width: 100%;
	box-shadow: var(--shadow-strong);
	padding: 24px 26px;
	gap: 16px;
}

/* Responsive: stack cards vertically (TABLET) */
@media (max-width: 1024px) {
	.auth-container {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding-top: 2rem;
		padding-bottom: 2rem;
		gap: 24px;
	}
	.panel,
	.panel-oauth {
		width: 100%;
		max-width: 550px;
	}
}

/* Extra: keep form and oauth panels same height on desktop */
@media (min-width: 1025px) {
	.auth-container {
		align-items: stretch;
	}
	.panel,
	.panel-oauth {
		height: 100%;
	}
}

/* Form grid and fields */
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 14px;
	align-items: start;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.field-label {
	color: var(--text-color);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"] {
	padding: var(--input-padding);
	font-size: 14px;
	border-radius: 10px;
	border: 1px solid var(--border-color);
	background: #fdfdff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	color: var(--text-color);
	outline: none;
}
.field input::placeholder {
	color: var(--text-muted);
	font-style: italic;
}
.field input:focus {
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.15);
}

/* Password strength */
.pw-strength {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
	grid-column: 1 / -1;
}
.pw-bars {
	display: flex;
	gap: 8px;
	width: 120px;
}
.pw-bar {
	flex: 1;
	height: 8px;
	border-radius: 6px;
	background: #e9ecef;
	transition: background-color 0.20s ease;
}
.pw-bar.active.level-1 {
	background: var(--accent-red);
}
.pw-bar.active.level-2 {
	background: var(--accent-yellow);
}
.pw-bar.active.level-3 {
	background: #fdd835;
}
.pw-bar.active.level-4 {
	background: var(--accent-green);
}
.pw-requirements {
	color: var(--text-muted);
	font-size: 12px;
}

/* Errors & server-error */
.field-error {
	color: var(--accent-red);
	font-weight: 700;
	font-size: 12px;
	margin-top: 4px;
}
.server-error {
	color: var(--accent-red);
	font-weight: 800;
	display: none;
	padding: 6px 0;
	font-size: 13px;
}
.server-error.visible {
	display: block;
}

/* Form actions & button */
.form-actions {
	margin-top: 10px;
	grid-column: 1 / -1;
	width: 100%;
}
.btn-primary {
	width: 100%;
	background: var(--accent-blue);
	color: white;
	padding: 14px;
	font-size: 16px;
	font-weight: 700;
	border-radius: 12px;
	cursor: pointer;
	border: none;
	box-shadow: 0 4px 12px rgba(0, 188, 212, 0.2);
	transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.btn-primary:hover,
.btn-primary:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 188, 212, 0.25);
	outline: none;
}
.btn-primary:active {
	transform: translateY(0);
}

/* Login redirect */
.login-redirect {
	font-size: 14px;
	color: var(--text-muted);
	font-weight: 500;
	text-align: center;
	margin-top: 8px;
	grid-column: 1 / -1;
}
.login-redirect a {
	color: var(--accent-blue);
	font-weight: 700;
	text-decoration: none;
}
.login-redirect a:hover,
.login-redirect a:focus {
	text-decoration: underline;
}

/* --- OAUTH PANEL --- */
.panel-title-sm {
	font-size: 18px;
	font-weight: 800;
	color: var(--text-color);
}
.panel-lead-sm {
	font-size: 14px;
	color: var(--text-muted);
}
.oauth-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
}
a{
	text-decoration: none;
}
.btn-google {
	font-weight: 700;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	font-size: 14px;
	transition: box-shadow 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
	user-select: none;
	background: white;
	border: 1px solid var(--border-color);
	color: var(--text-color);
	box-shadow: 0 4px 8px rgba(34, 60, 80, 0.05);
	height: 46px;
}
.btn-google:hover,
.btn-google:focus {
	background: #f8f9fa;
	box-shadow: 0 6px 16px rgba(34, 60, 80, 0.08);
	transform: translateY(-2px);
	outline: none;
}
.g-svg {
	width: 20px;
	height: 20px;
	display: inline-flex;
	flex: 0 0 20px;
}
.oauth-divider {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-align: center;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 10px 0;
	position: relative;
}
.oauth-divider::before,
.oauth-divider::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 38%;
	height: 1px;
	background-color: var(--border-color);
	transform: translateY(-50%);
}
.oauth-divider::before {
	left: 0;
}
.oauth-divider::after {
	right: 0;
}
.oauth-help p {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-muted);
	margin: 6px 0;
	text-align: center;
}

/* MODIFIED: Footer styles for new background */
.page-foot {
	flex-shrink: 0;
	padding-top: 32px;
	font-size: 13px;
	color: var(--text-muted);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.page-foot a {
	color: var(--accent-blue);
	font-weight: 600;
	text-decoration: none;
}
.page-foot a:hover {
	text-decoration: none;
}

/* Accessibility */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}
:focus-visible {
	outline-offset: 3px;
	outline: 3px solid rgba(0, 188, 212, 0.25);
	border-radius: 10px;
}

/* =========================================
  MOBILE IMPROVEMENTS (UPDATED)
  - Force vertical stacking and ensure the right (oauth) card is visible.
  - Improve oauth card appearance on small screens.
  - Make oauth buttons full-width and better spaced.
  ========================================= */
@media (max-width: 768px) {
	/* Ensure stacked vertical flow and stretching width */
	.auth-container {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 18px;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	/* Make both panels full width and visible */
	.panel,
	.panel-oauth {
		width: 100%;
		max-width: 100%;
		box-shadow: var(--shadow-soft);
	}

	/* Slightly reduce panel padding for mobile */
	.panel {
		padding: 20px;
	}

	/* Make oauth panel stand out on mobile with a soft aqua tint
	   and clear, readable text. Keep it visible and nicely separated. */
	.panel-oauth {
		padding: 18px;
		background: linear-gradient(180deg, rgba(0, 188, 212, 0.04), rgba(0, 188, 212, 0.02));
		border: 1px solid rgba(0, 188, 212, 0.12);
		box-shadow: 0 10px 24px rgba(0, 188, 212, 0.06);
		color: var(--text-color);
	}

	/* Center and style oauth headings for clarity */
	.panel-oauth .panel-title-sm {
		color: var(--accent-blue);
		font-size: 18px;
		text-align: center;
		margin-bottom: 6px;
	}
	.panel-oauth .panel-lead-sm {
		color: var(--text-muted);
		text-align: center;
		margin-bottom: 10px;
	}

	/* Make oauth-list full width and center its contents */
	.oauth-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		align-items: stretch;
		width: 100%;
	}

	/* Make oauth buttons full-width and visually prominent on mobile */
	.oauth-btn,
	.btn-google {
		width: 100%;
		min-height: 48px;
		font-size: 15px;
		padding: 12px 16px;
		justify-content: center;
	}

	/* Make the Google icon sit nicely on the left within full-width button */
	.oauth-btn .google-icon,
	.btn-google .g-svg {
		margin-left: 6px;
		margin-right: 12px;
	}

	/* Improve spacing and readability of help text */
	.oauth-help p {
		font-size: 14px;
		margin-top: 8px;
		color: var(--text-muted);
	}

	/* Footer stacks and centers */
	.page-foot {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding-top: 18px;
	}
}

/* Keyframes for a smooth entrance animation */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}