/* ==========================================================================
   Footer block
   ========================================================================== */

.footer {
	background: var(--color-bg-dark);
	border-top: 1px solid var(--color-cool-accent);
	margin-top: var(--space-section);
}

.footer__inner {
	padding-block: var(--space-section);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.footer__row {
	padding-block: 0.5rem;
}

.footer__links-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.footer__links-list a {
	font-size: 0.9rem;
	color: var(--color-text-main);
	transition: color var(--transition-fast);
}

.footer__links-list a:hover {
	color: var(--color-heading-accent);
}

.footer__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.footer__contact-label {
	color: var(--color-white);
	font-weight: var(--fw-medium);
}

.footer__contact a {
	color: var(--color-heading-accent);
}

.footer__contact-sep {
	opacity: 0.5;
}

.footer__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

.footer__payments img {
	height: 1.875rem;
	width: auto;
}

.footer__notice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.footer__age-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-accent-bg);
	color: var(--color-white);
	font-weight: var(--fw-heading);
	font-size: 0.85rem;
	flex-shrink: 0;
}

.footer__responsible {
	margin-bottom: 0;
	font-size: 0.85rem;
}

.footer__bottom {
	border-top: 1px solid var(--color-cool-accent);
	padding-top: 1.25rem;
}

.footer__copy {
	font-size: 0.8rem;
	margin-bottom: 0;
	opacity: 0.8;
}

/* To top button */
.to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: var(--z-totop);
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-btn-primary);
	color: var(--color-white);
	clip-path: var(--clip-corner);
	box-shadow: var(--shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.to-top:hover {
	filter: brightness(1.15);
}