/* ==========================================================================
   FWPN Block: Back Button (BEM: back-button)
   ========================================================================== */

.back-button {
	padding: 40px 32px;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}

.back-button__link {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	background-color: var(--navy-50);
	border-radius: 12px;
	padding: 12px 24px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.back-button__link:hover {
	background-color: var(--navy-100, #e3def9);
}

.back-button__link--disabled {
	cursor: default;
	opacity: 0.7;
}

.back-button__link--disabled:hover {
	background-color: var(--navy-50);
}

.back-button__icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
}

.back-button__icon-wrapper img {
	width: 24px;
	height: 24px;
}

.back-button__label {
	font-family: var(--font-family, "IBM Plex Sans", sans-serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--neutral-black);
	line-height: 1.4;
	text-align: center;
}

/* --- Placeholder state --- */

.back-button--placeholder {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.back-button__hint {
	font-family: var(--font-family, "IBM Plex Sans", sans-serif);
	font-size: 14px;
	color: var(--neutral-500);
	margin: 0;
}

/* ==========================================================================
   Responsive: Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
	.back-button {
		padding: 40px 16px;
	}
}