/*
 * Accountpagina's (login, registreren, wachtwoord, account).
 * Bouwt voort op roster.css: kaart, velden, knoppen en meldingen zien er hetzelfde uit als de profiel-editor.
 */

.st-account__card {
	max-width: 520px;
	margin: 0 auto;
	padding: 32px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgb(120, 53, 238);
	box-shadow: 0 0 0 4px rgba(120, 53, 238, 0.25);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: #fff;
}

.st-account--wide .st-account__card {
	max-width: 900px;
}

.st-account__title {
	margin: 0 0 12px;
	color: #fff;
}

.st-account__intro {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.75);
}

.st-account__form .st-roster-profile__field {
	margin: 0 0 16px;
}

/* Velden over de hele breedte van de kaart, in de normale tekstgrootte. */
.st-roster-page .st-account__input,
.st-roster-page .st-account__form .st-roster-profile__select {
	max-width: none;
	min-height: 46px;
	font-size: 1rem;
	font-weight: 400;
}

.st-roster-page .st-account__form .st-roster-profile__select {
	font-weight: 700;
}

.st-account__actions {
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
}

.st-account__link,
.st-account__footer a {
	color: #ad7fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.st-account__link:hover,
.st-account__footer a:hover {
	color: #fff;
}

.st-account__footer {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.75);
}

/* "Remember me": zelfde vinkje als in de profiel-editor. */
.st-account__check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}

.st-roster-page .st-account__check input {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid rgb(120, 53, 238);
	border-radius: 6px;
	background: rgba(28, 27, 74, 0.8);
	cursor: pointer;
}

.st-roster-page .st-account__check input:checked {
	background: rgb(120, 53, 238) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center no-repeat;
}

.st-roster-page .st-account__check input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(120, 53, 238, 0.35);
}

.st-account__confirm {
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Registreren: account links, character rechts. */
.st-account__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.st-account__section {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.st-account__section legend {
	margin: 0 0 16px;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.st-account__character .st-roster-profile__avatar {
	margin: 0 auto 20px;
	width: max-content;
}

.st-account__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* reCAPTCHA-badge van Google niet over de footer heen; de melding staat in de privacyverklaring van Google. */
.grecaptcha-badge {
	z-index: 10;
}

@media (max-width: 768px) {
	.st-account__card {
		padding: 24px 20px;
	}

	.st-account__columns {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}