/* cards, buttons, slider, reusable blocks */

.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.75rem 1rem;
	text-decoration: none;
	width: fit-content;
}

.btn-light {
	background: var(--light-green);
	color: var(--primary-black);
}

.btn-dark {
	background: var(--dark-grey);
	color: var(--light-grey);
}

.btn-bordered {
	background-color: transparent;
	border: 1px solid var(--light-grey);
	color: var(--light-grey);
}

.cta-sec {
	background-color: var(--dark-grey);
	background-size: cover;
	padding: 7.5rem;
}

.cta-wrapper {
	background-color: var(--light-grey);
	padding: 2.5rem;

	> h2,
	h3,
	p {
		color: var(--primary-black);
		margin-bottom: 1rem;
	}
}

/* Floating toast for form submission results */
#result {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	background: var(--light-green);
	color: var(--primary-black);
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	z-index: 9999;
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 180ms ease,
		transform 180ms ease;
	pointer-events: none;
	font-size: 0.9rem;
}

#result.toast-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

@media (max-width: 1000px) {
	.btn {
		padding: 0.6rem 0.9rem;
	}

	.cta-sec {
		padding: 3rem 2rem;
	}
}

@media (max-width: 500px) {
	.btn {
		padding: 0.5rem 0.75rem;
	}
}

/* latest auctions */