/* Thank You page (Loft Lines) */
.thankyou-section {
	min-height: calc(100dvh - 1px);
	display: grid;
	place-items: center;
	background: radial-gradient(
			80% 60% at 50% 0%,
			rgba(255, 255, 255, 0.04),
			transparent 60%
		),
		linear-gradient(180deg, #0f0f12, #0c0c10);
	padding: 48px 0;
}

.thankyou-container {
	text-align: center;
	max-width: 720px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 24px 18px;
	box-shadow: var(--shadow);
	transform: translateY(8px);
	opacity: 0;
	animation: ty-in 600ms ease forwards;
}

@keyframes ty-in {
	to {
		transform: none;
		opacity: 1;
	}
}

.ty-mark {
	width: 48px;
	height: 48px;
	margin: 0 auto 8px;
	fill: var(--accent);
	filter: drop-shadow(0 6px 18px rgba(202, 165, 116, 0.28));
}

.thankyou-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.2rem);
	margin: 6px 0 8px;
}

.thankyou-message {
	color: var(--muted);
	margin: 0 0 14px;
}

/* Use the global .cta-button from style.css; add a slight bounce here */
.cta-button {
	display: inline-block;
	text-decoration: none;
	margin-top: 2px;
	transition: transform var(--speed), box-shadow var(--speed);
}
.cta-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(202, 165, 116, 0.25);
}

/* Responsive */
@media (max-width: 560px) {
	.thankyou-container {
		padding: 20px 14px;
	}
	.ty-mark {
		width: 42px;
		height: 42px;
	}
}
/* Primary CTA (for <a class="cta-button">Return to Home</a>) */
.thankyou-section .cta-button,
.cta-button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 42px;
	padding: 10px 18px;
	border-radius: 14px;

	background: var(--accent);
	color: #111; /* фикс: убрать синий цвет ссылок */
	text-decoration: none; /* фикс: убрать подчёркивание */
	font-weight: 600;
	letter-spacing: 0.02em;

	border: 1px solid transparent;
	box-shadow: 0 8px 22px rgba(202, 165, 116, 0.25);
	transition: transform var(--speed), box-shadow var(--speed),
		background var(--speed), color var(--speed);
}

/* Hover / Active / Focus */
.thankyou-section .cta-button:hover,
.cta-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(202, 165, 116, 0.28);
}

.thankyou-section .cta-button:active,
.cta-button:active {
	transform: translateY(0);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.thankyou-section .cta-button:focus-visible,
.cta-button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* На всякий случай переопределяем цвета для :link/:visited */
.thankyou-section .cta-button:is(:link, :visited),
.cta-button:is(:link, :visited) {
	color: #111;
}