/*!
 * Zardis Toolkit — header «رهگیری سفارش» button.
 * Loaded on every front-end page because the button lives in the global menu.
 */

/* ---------- header button, refined ----------------------------------- */

/*
 * `.zardis-track-btn` is appended to the menu by class-tracking.php. The
 * header nav aligns items with flex, so the button only needs its own pill.
 * The `::before` magnifier is drawn with a mask so it inherits the text colour.
 */
.whb-header .wd-nav-main > .zardis-track-btn {
	margin-inline-start: 10px;
	align-self: center;
}

.whb-header .wd-nav-main > .zardis-track-btn > a {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding-inline: 18px !important;
	border-radius: 999px;
	background: linear-gradient(180deg, #d4ad55 0%, #c9a247 100%);
	color: #14181c !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	box-shadow: 0 6px 16px rgba(201, 162, 71, .30);
	transition: filter .16s ease, box-shadow .16s ease, transform .16s ease;
}

.whb-header .wd-nav-main > .zardis-track-btn > a:hover,
.whb-header .wd-nav-main > .zardis-track-btn > a:focus-visible {
	background: linear-gradient(180deg, #dcb75f 0%, #c39b40 100%);
	color: #14181c !important;
	box-shadow: 0 10px 22px rgba(201, 162, 71, .38);
	transform: translateY(-1px);
}

/* Kill the theme's underline animation on this one item. */
.whb-header .wd-nav-main > .zardis-track-btn > a::after {
	display: none !important;
}

/* Mobile drawer: full-width row instead of a pill. */
.mobile-nav .zardis-track-btn > a {
	display: flex !important;
	align-items: center;
	gap: 8px;
	justify-content: center;
	margin-block-start: 8px;
	border-radius: 10px;
	background: var(--ztk-gold, #c9a247);
	color: #14181c !important;
	font-weight: 800 !important;
}

@media (prefers-reduced-motion: reduce) {
	.whb-header .wd-nav-main > .zardis-track-btn > a {
		transition: none;
	}

	.whb-header .wd-nav-main > .zardis-track-btn > a:hover {
		transform: none;
	}
}
