/*
 * دکمهٔ بازگشت به بالای صفحه.
 *
 * Bottom-left, the side a Persian reader's eye ends on, and the side the site
 * keeps clear — the off-canvas panel is anchored right. Sides are written out
 * rather than using logical properties because the client's Additional CSS
 * puts `direction: ltr` on `html` and flips only selected blocks, so `inset-
 * inline-start` would resolve to the wrong edge.
 */

.gs-totop {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9990; /* under the product modal (99999) and the login popup. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba( 216, 174, 109, .45 );
	border-radius: 50%;
	background: linear-gradient( 170deg, #2d5c3a 0%, #1a3b24 60%, #12261a 100% );
	color: #f4ece0;
	box-shadow:
		inset 0 1px 0 rgba( 250, 243, 230, .18 ),
		0 8px 22px rgba( 0, 0, 0, .28 );
	cursor: pointer;

	/* Hidden state. `visibility` rather than `display` so the fade has
	   something to run on, and so it stays out of the tab order while away. */
	opacity: 0;
	visibility: hidden;
	transform: translateY( 10px );
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.gs-totop.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.gs-totop:hover,
.gs-totop:focus-visible {
	background: linear-gradient( 170deg, #37704a 0%, #21492c 60%, #16301f 100% );
	border-color: rgba( 216, 174, 109, .8 );
}

.gs-totop:focus-visible {
	outline: 2px solid #d8ae6d;
	outline-offset: 3px;
}

.gs-totop:active {
	transform: translateY( 1px );
}

@media ( max-width: 767px ) {
	.gs-totop {
		left: 14px;
		bottom: 14px;
		width: 42px;
		height: 42px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gs-totop {
		transition: opacity .25s ease, visibility .25s;
		transform: none;
	}
}