/**
 * Lugnalandet – bekräftelsepanel som ersätter formuläret efter utskick.
 *
 * Egen CSS: temats style.css är en kompilerad Tailwind-bundle och saknar
 * flera av de utility-klasser panelen behöver.
 */

.lg-sent {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.5rem 1.75rem;
	border-radius: 1rem;
	border: 1px solid hsl(35 55% 58% / 0.28);
	background:
		radial-gradient(80% 100% at 50% 0%, hsl(35 55% 58% / 0.12), transparent 65%),
		var(--color-card, #fff);
	animation: lg-sent-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Panelen fokuseras programmatiskt bara för att skärmläsare ska hitta den.
   Den går inte att interagera med, så en fokusring skulle bara bli brus. */
.lg-sent:focus,
.lg-sent:focus-visible {
	outline: none;
}

@keyframes lg-sent-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.lg-sent__mark {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1.25rem;
	border-radius: 999px;
	color: var(--color-gold, #c9a227);
	background: hsl(35 55% 58% / 0.14);
	border: 1px solid hsl(35 55% 58% / 0.35);
}

.lg-sent__title {
	margin: 0 0 0.65rem;
	font-family: var(--font-heading, inherit);
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--color-foreground, #1a1a1a);
}

.lg-sent__text {
	margin: 0;
	max-width: 34rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-muted-foreground, #6b7280);
}

@media (prefers-reduced-motion: reduce) {
	.lg-sent { animation: none; }
}

/* CF7:s aria-live-region. Temat laddar inte CF7:s egen CSS (wpcf7_load_css är
   avstängd) och saknar regel för den, så regionen visades visuellt och
   upprepade meddelandet. Dölj den visuellt men behåll den för skärmläsare. */
.screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}