/* Account form (tv-account-form) — mirrors the Lovable login/signup form (.account-field, .account-input, .account-benefits). */
.tv-account-form {
	--tv-navy: var(--e-global-color-primary, #051644);
	--tv-steel: var(--e-global-color-secondary, #2d6ca9);
	--tv-bright: var(--e-global-color-b1a8e7f, #44a8e7);
	--tv-gold: var(--e-global-color-accent, #e2b42c);
	--tv-soft-gold: var(--e-global-color-722ed5d, #efd686);
	--tv-cream: var(--e-global-color-e33c8be, #fcfaf6);
	color: var(--tv-navy);
	font-family: "Open Sans", sans-serif;
	font-size: 17px;
	line-height: 1.7;
}
.tv-account-form :where(p, ul, li, label, form) { margin: 0; padding: 0; }

.tv-account-form .tv-account-note {
	margin: -1rem 0 2rem;
	color: var(--tv-steel);
	font-size: .875rem;
	line-height: 1.25rem;
}

.tv-account-form .tv-account-form__form { display: flex; flex-direction: column; gap: 1.25rem; }

.tv-account-form .tv-account-alert {
	border-radius: 10px;
	padding: .75rem 1rem;
	background: color-mix(in oklab, var(--tv-gold) 22%, transparent);
	color: var(--tv-navy);
	font-size: .875rem;
	line-height: 1.25rem;
}

.tv-account-form .tv-account-field {
	display: grid;
	gap: .5rem;
	color: var(--tv-navy);
	font-family: "Outfit", sans-serif;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.7;
	vertical-align: baseline;
}
.tv-account-form .tv-account-input {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 3.3rem;
	margin: 0;
	border: 1px solid color-mix(in oklab, var(--tv-navy) 15%, transparent);
	border-radius: 10px;
	padding: .7rem 1rem;
	background: var(--tv-cream);
	box-shadow: none;
	color: var(--tv-navy);
	font-family: "Open Sans", sans-serif;
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.7;
	outline: none;
	transition: none;
}
.tv-account-form .tv-account-input::placeholder { color: color-mix(in oklab, var(--tv-navy) 35%, transparent); opacity: 1; }
.tv-account-form .tv-account-input:focus {
	border-color: var(--tv-steel);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--tv-bright) 20%, transparent);
}

.tv-account-form .tv-account-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	font-size: .875rem;
	line-height: 1.25rem;
}
.tv-account-form .tv-account-remember {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: rgba(14, 35, 56, .65);
	font-size: .875rem;
	line-height: 1.25rem;
	vertical-align: baseline;
}
.tv-account-form .tv-account-remember input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--tv-steel);
}

.tv-account-form .tv-account-link,
.tv-account-form .tv-account-link:hover,
.tv-account-form .tv-account-link:focus {
	color: var(--tv-steel);
	font-weight: 600;
	text-decoration: none;
}
.tv-account-form .tv-account-link--underline,
.tv-account-form .tv-account-link--underline:hover,
.tv-account-form .tv-account-link--underline:focus {
	text-decoration: underline;
	text-decoration-color: var(--tv-bright);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.tv-account-form .tv-account-submit {
	display: inline-flex;
	width: 100%;
	min-height: 3rem;
	align-items: center;
	justify-content: center;
	margin: 0;
	border: 0;
	border-radius: 6px;
	padding: .75rem 1.5rem;
	background: var(--tv-gold);
	color: var(--tv-navy);
	font-family: "Outfit", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5rem;
	text-transform: none;
	cursor: pointer;
	transition: background-color .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}
/* Focus keeps the resting look (the theme reset would paint it pink); only hover lifts the button. */
.tv-account-form .tv-account-submit:focus {
	background: var(--tv-gold);
	color: var(--tv-navy);
	transform: none;
}
.tv-account-form .tv-account-submit:hover {
	background: var(--tv-soft-gold);
	color: var(--tv-navy);
	transform: translateY(-2px);
}
.tv-account-form .tv-account-submit:focus-visible { outline: 2px solid var(--tv-bright); outline-offset: 4px; }

.tv-account-form .tv-account-benefits {
	display: grid;
	gap: .7rem;
	margin-top: 1.75rem;
	border-top: 1px solid color-mix(in oklab, var(--tv-navy) 10%, transparent);
	padding-top: 1.5rem;
	list-style: none;
	color: rgba(14, 35, 56, .68);
	font-size: .9rem;
	line-height: 1.7;
}
.tv-account-form .tv-account-benefits li {
	display: grid;
	grid-template-columns: .55rem 1.1rem 1fr;
	align-items: center;
	gap: .55rem;
}
.tv-account-form .tv-account-benefits li > span {
	width: .55rem;
	height: .55rem;
	border-radius: 2px;
	background: var(--tv-bright);
	transform: rotate(-8deg);
}
.tv-account-form .tv-account-benefits svg { display: block; color: var(--tv-steel); }

.tv-account-form .tv-account-switch {
	margin-top: 1.75rem;
	color: rgba(14, 35, 56, .6);
	font-size: .875rem;
	line-height: 1.25rem;
	text-align: center;
}
.tv-account-form--register .tv-account-switch { margin-top: 1.5rem; }

/* Notices: errors keep the gold tint above; confirmations use the site's blue tint with a steel edge. */
.tv-account-form .tv-account-alert--success {
	border-left: 3px solid var(--tv-bright);
	border-radius: 0 10px 10px 0;
	background: var(--e-global-color-a24cbff, #e8f5fd);
}

/* Glömt lösenordet: the "send a new link" line under the confirmation. */
.tv-account-form .tv-account-again {
	font-size: .875rem;
	line-height: 1.25rem;
}

/* Välj nytt lösenord: "Nytt lösenord för …" above the fields. */
.tv-account-form .tv-account-account {
	color: rgba(14, 35, 56, .65);
	font-size: .875rem;
	line-height: 1.25rem;
	overflow-wrap: anywhere;
}

/* A link styled as the gold button (Beställ en ny länk). */
.tv-account-form a.tv-account-submit,
.tv-account-form a.tv-account-submit:hover,
.tv-account-form a.tv-account-submit:focus {
	box-sizing: border-box;
	color: var(--tv-navy);
	text-align: center;
	text-decoration: none;
}

/* Honeypot and the hidden username for password managers: out of sight, out of the tab order. */
.tv-account-form .tv-account-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
}