/*
 * Account pages (/logga-in/, /skapa-konto/): helper classes for native widgets.
 * Add them under Advanced → CSS Classes.
 */

/* tv-account-photo: the full-height photo beside the login and signup forms (image widget).
   Keeps the rounded corners (set with Advanced → Border Radius) around the image. */
.tv-account-photo { overflow: hidden; isolation: isolate; }
.tv-account-photo img { display: block; max-width: none; }

/* tv-account-photo-gold: the warm gold light over a photo (Lovable .photo-gold). */
.tv-account-photo-gold { position: relative; }
.tv-account-photo-gold::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: color-mix(in oklab, var(--e-global-color-accent, #e2b42c) 9%, transparent);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* tv-account-photo-sticky: on the long Kontoinställningar page the photo stays in view while the forms
   scroll (tablet and desktop; on phones it sits under the forms like on the other account pages). */
@media (min-width: 768px) {
	.tv-account-photo-sticky { position: sticky; top: 5rem; align-self: flex-start; }
}

/* Small site-wide notice after logging out or deleting the account (printed by includes/modules/account.php). */
.tv-toast {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: min(26rem, calc(100vw - 2.5rem));
	box-sizing: border-box;
	border: 1px solid rgba(5, 22, 68, .1);
	border-radius: 14px;
	padding: .85rem .85rem .85rem 1.1rem;
	background: #fff;
	box-shadow: 0 20px 58px rgba(5, 22, 68, .22), 0 3px 10px rgba(5, 22, 68, .12);
	color: var(--e-global-color-primary, #051644);
	font-family: "Open Sans", sans-serif;
	font-size: .95rem;
	line-height: 1.5;
	animation: tv-toast-in .35s cubic-bezier(.4, 0, .2, 1) both;
	transition: opacity .35s ease, transform .35s ease;
}
.tv-toast.is-hidden { opacity: 0; transform: translateY(.75rem); }
.tv-toast .tv-toast__mark {
	flex: none;
	width: .6rem;
	height: .6rem;
	border-radius: 2px;
	background: var(--e-global-color-accent, #e2b42c);
	transform: rotate(-8deg);
}
.tv-toast .tv-toast__text { margin: 0; padding: 0; color: inherit; }
.tv-toast .tv-toast__close,
.tv-toast .tv-toast__close:hover,
.tv-toast .tv-toast__close:focus {
	flex: none;
	display: inline-grid;
	width: 2rem;
	height: 2rem;
	place-items: center;
	margin: 0;
	border: 0;
	border-radius: 999px;
	padding: 0;
	background: var(--e-global-color-a24cbff, #e8f5fd);
	box-shadow: none;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.tv-toast .tv-toast__close:focus-visible { outline: 2px solid var(--e-global-color-b1a8e7f, #44a8e7); outline-offset: 2px; }
@keyframes tv-toast-in { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
	.tv-toast { right: 1rem; left: 1rem; bottom: 1rem; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tv-toast { animation: none; transition: none; }
}