/*
 * auth.css
 * Styles for the GLOBAL account auth MODAL (components/AuthModal.vue) — the
 * login / signup / complete-profile / verify-email flow shown as an overlay on
 * top of any page, triggered by the header account button.
 *
 * Built to Figma (file 6Y5Mw023BNGRaArvPgBS8R):
 *   Login            225:17562
 *   Sign up          225:17594
 *   Complete profile 225:17636  (new Google/Apple account)
 *   Verify email     225:17738
 *
 * Loaded GLOBALLY via nuxt.config app.head.link (the modal can appear on every
 * page), so it must NOT depend on page-scoped tokens. All colours are defined
 * locally on .au-overlay as --au-* tokens (mirroring the Figma design tokens).
 */

.au-overlay {
	--au-blue: #2da7fa;
	--au-text: #333536;          /* Neutral/Text_Primary */
	--au-muted: #737a82;         /* Neutral/Text_Secondary */
	--au-tertiary: #b0b0b0;      /* Neutral/Text Tertiary (placeholders) */
	--au-req: #e60012;           /* required asterisk */
	--au-field-border: #eeeeee;  /* Neutral/BG/Block */
	--au-bg-soft: #f7f7f9;       /* Neutral/BG/Background */
	--au-select-border: #f0f0f0; /* Block */
	--au-or: #777777;            /* OR text */
	--au-swap: #222222;          /* "Don't have an account?" text */
	--au-card-border: #d9d9d9;   /* pop-up border */

	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 48px 20px;
	overflow-y: auto;
	background: rgba(20, 28, 40, 0.55);
}

/* Body scroll-lock while the modal is open (toggled by AuthModal.vue). */
body.is-auth-modal-open {
	overflow: hidden;
}

/* ---- Modal card ---- */
.au-modal {
	position: relative;
	width: min(556px, 100%);
	margin: auto;
	padding: 48px 38px 40px;
	background: #fff;
	border: 2px solid var(--au-card-border);
	border-radius: 16px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Narrower card for the verify-email screen (Figma 344px content + 32 padding). */
.au-modal--narrow {
	width: min(408px, 100%);
	padding: 40px 32px 32px;
}

.au-close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	color: var(--au-tertiary);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.au-close:hover {
	color: var(--au-text);
}

/* ---- Vertical rhythm: sections are 24px apart (Figma gap-24) ---- */
.au-stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: stretch;
}

/* ---- Enter/leave transition (Vue <Transition name="au">) ---- */
.au-enter-active,
.au-leave-active {
	transition: opacity 0.2s ease;
}

.au-leave-active {
	pointer-events: none;
}

.au-enter-from,
.au-leave-to {
	opacity: 0;
}

.au-enter-active .au-modal,
.au-leave-active .au-modal {
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.au-enter-from .au-modal,
.au-leave-to .au-modal {
	transform: translateY(12px) scale(0.98);
	opacity: 0;
}

/* ---- Logo (centred above the heading) ---- */
.au-logo {
	display: block;
	/* acadentallogo_dark.png ships with built-in whitespace padding, so its
	 * visible wordmark reads smaller than the Figma 28px logo — 46px matches. */
	height: 46px;
	width: auto;
	margin: 0 auto;
}

/* ---- Heading ---- */
.au-head {
	display: grid;
	gap: 6px;
	text-align: left;
}

.au-head--center {
	justify-items: center;
	text-align: center;
}

.au-title {
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--au-text);
}

.au-subtitle {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--au-muted);
}

.au-head--center .au-subtitle {
	color: var(--au-text);
}

/* ---- Verify-email icon ---- */
.au-mail-icon {
	display: inline-flex;
	width: 64px;
	height: 64px;
	color: var(--au-blue);
}

.au-mail-icon svg {
	width: 100%;
	height: 100%;
}

/* ---- Form structure ---- */
.au-form,
.au-group {
	display: grid;
	gap: 16px;
}

.au-field {
	display: grid;
	gap: 8px;
}

.au-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.au-label {
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--au-text);
}

.au-req {
	color: var(--au-req);
}

/* ---- Inputs ---- */
.au-input {
	width: 100%;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--au-field-border);
	border-radius: 8px;
	background: #fff;
	color: var(--au-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
}

.au-input::placeholder {
	color: var(--au-tertiary);
}

.au-input:focus {
	outline: none;
	border-color: var(--au-blue);
}

/* Read-only "Email sent to" / disabled fill uses the soft background. */
.au-input--readonly {
	background: var(--au-bg-soft);
	color: var(--au-tertiary);
}

/* Password input + eye toggle */
.au-password {
	position: relative;
}

.au-password .au-input {
	padding-right: 44px;
}

.au-password__toggle {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	color: var(--au-tertiary);
	font-size: 18px;
	cursor: pointer;
}

.au-password__toggle:hover {
	color: var(--au-text);
}

/* Forget password — italic, tertiary, right-aligned under the password field */
.au-forgot {
	justify-self: end;
	padding: 0;
	border: 0;
	background: none;
	color: var(--au-tertiary);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	font-style: italic;
	cursor: pointer;
}

.au-forgot:hover {
	text-decoration: underline;
}

/* ---- Role select ---- */
.au-select {
	width: 100%;
	height: 40px;
	padding: 0 40px 0 16px;
	border: 1.5px solid var(--au-select-border);
	border-radius: 8px;
	background-color: var(--au-bg-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	color: var(--au-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.au-select:focus {
	outline: none;
	border-color: var(--au-blue);
}

/* Grey placeholder colour until a real role is chosen. */
.au-select--placeholder {
	color: var(--au-tertiary);
}

/* ---- Checkbox (newsletter) ---- */
.au-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 500;
	color: var(--au-text);
	cursor: pointer;
}

.au-check input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid var(--au-tertiary);
	border-radius: 4px;
	cursor: pointer;
	position: relative;
}

.au-check input:checked {
	border-color: var(--au-blue);
	background: var(--au-blue);
}

.au-check input:checked::after {
	content: "";
	position: absolute;
	inset: 2px 4px 4px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	width: 4px;
	height: 8px;
	margin: auto;
}

/* ---- Divider line (full-width rule) ---- */
.au-divider {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--au-field-border);
}

/* ---- OR divider (login) ---- */
.au-or {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--au-or);
	font-size: 14px;
	font-weight: 600;
}

.au-or::before,
.au-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--au-field-border);
}

/* ---- Buttons ---- */
.au-submit {
	width: 100%;
	height: 40px;
	border: 0;
	border-radius: 8px;
	background: var(--au-blue);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.au-submit:hover {
	filter: brightness(0.97);
}

.au-submit:disabled {
	opacity: 0.6;
	cursor: default;
	filter: none;
}

/* Grey resend button (Figma disabled state during cooldown; blue once active). */
.au-btn-resend {
	width: 100%;
	height: 40px;
	border: 0;
	border-radius: 8px;
	background: var(--au-tertiary);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.au-btn-resend:enabled {
	background: var(--au-blue);
}

.au-btn-resend:disabled {
	cursor: default;
}

/* Outline "Confirm" button */
.au-btn-outline {
	width: 100%;
	height: 40px;
	border: 1.5px solid var(--au-blue);
	border-radius: 8px;
	background: #fff;
	color: var(--au-blue);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.au-btn-outline:hover {
	background: #f2faff;
}

.au-btn-outline:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ---- Social sign-in buttons (login) ---- */
.au-social {
	display: grid;
	gap: 16px;
}

.au-social__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--au-field-border);
	border-radius: 8px;
	background: #fff;
	color: var(--au-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.au-social__btn:hover {
	background: #fafafa;
	border-color: #d5d5d5;
}

.au-social__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.au-social__btn svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* ---- Bottom swap link ("Don't have an Account? Sign Up Now!") ---- */
.au-swap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--au-swap);
}

.au-swap button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--au-blue);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.au-swap button:hover {
	text-decoration: underline;
}

/* ---- Verification-code boxes ---- */
.au-code {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.au-code input {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--au-field-border);
	border-radius: 8px;
	background: var(--au-bg-soft);
	color: var(--au-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.au-code input:focus {
	outline: none;
	border-color: var(--au-blue);
	background: #fff;
}

.au-code input.is-error {
	border-color: var(--au-req);
}

/* Error banner (validation feedback — not in Figma, kept minimal) */
.au-error {
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fdeeee;
	color: var(--au-req);
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
}

/* Buttons group on the verify screen (Figma gap-16) */
.au-btn-group {
	display: grid;
	gap: 16px;
}

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width: 600px) {
	.au-overlay {
		padding: 20px 14px;
	}

	.au-modal {
		padding: 36px 22px 28px;
	}
}

@media (max-width: 460px) {
	/* Stack the first/last name row on very small screens. */
	.au-row {
		grid-template-columns: 1fr;
	}
}

/* ---- 4K / ultra-wide (scale ~2.2x to match the marketing pages) ---- */
@media (min-width: 3000px) {
	.au-overlay {
		padding: 120px 60px;
	}

	.au-modal {
		width: min(1224px, 100%);
		padding: 106px 84px 88px;
		border-radius: 35px;
		border-width: 4px;
	}

	.au-modal--narrow {
		width: min(898px, 100%);
		padding: 88px 70px 70px;
	}

	.au-close {
		top: 35px;
		right: 35px;
		width: 53px;
		height: 53px;
		font-size: 48px;
	}

	.au-stack {
		gap: 53px;
	}

	.au-logo {
		height: 101px;
	}

	.au-head {
		gap: 13px;
	}

	.au-title {
		font-size: 35px;
	}

	.au-subtitle {
		font-size: 31px;
		line-height: 40px;
	}

	.au-mail-icon {
		width: 141px;
		height: 141px;
	}

	.au-form,
	.au-group,
	.au-social,
	.au-btn-group {
		gap: 35px;
	}

	.au-field {
		gap: 18px;
	}

	.au-row {
		gap: 35px;
	}

	.au-label,
	.au-or,
	.au-swap,
	.au-swap button {
		font-size: 31px;
	}

	.au-check {
		font-size: 26px;
	}

	.au-check input {
		width: 35px;
		height: 35px;
		border-width: 3px;
		border-radius: 9px;
	}

	.au-check input:checked::after {
		inset: 4px 9px 9px;
		border-width: 0 4px 4px 0;
		width: 9px;
		height: 18px;
	}

	.au-input,
	.au-select,
	.au-submit,
	.au-btn-resend,
	.au-btn-outline,
	.au-social__btn {
		height: 88px;
		border-radius: 18px;
		font-size: 31px;
	}

	.au-input,
	.au-select {
		padding-left: 35px;
	}

	.au-password .au-input {
		padding-right: 97px;
	}

	.au-select {
		padding-right: 88px;
		background-size: 40px 40px;
		background-position: right 31px center;
	}

	.au-password__toggle {
		right: 22px;
		width: 53px;
		height: 53px;
		font-size: 40px;
	}

	.au-forgot {
		font-size: 26px;
	}

	.au-social__btn svg {
		width: 40px;
		height: 40px;
	}

	.au-code {
		gap: 18px;
	}

	.au-code input {
		width: 88px;
		height: 88px;
		border-radius: 18px;
		font-size: 35px;
	}

	.au-error {
		font-size: 28px;
		padding: 22px 31px;
		border-radius: 18px;
	}
}