/* My Account dashboard + marketplace archive. Tokens only — see tokens.css
   for the light/dark custom properties this relies on. Loaded only on
   is_account_page() (dashboard/sell-account/my-listings) and the
   marketplace archive page — see gs_enqueue_assets() in functions.php. */

/* Edge-to-edge app layout after the owner's filmkio screenshots (issue
   #23): a full-height sidebar (profile block + grouped nav) with a rule on
   its inner side, and a main column whose page header (title + breadcrumb)
   lines up with the profile block. Logged-in account pages use Astra's
   full-width layout for this (gs_account_full_width_layout()). */
.gs-dashboard {
	--gs-dash-head: 84px;
	--gs-dash-gutter: var(--space-8);
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	align-items: stretch;
	max-width: var(--layout-max);
	min-height: 70vh;
	margin: 0 auto;
}

.gs-dashboard__sidebar {
	padding: 0 var(--space-4) var(--space-16);
	border-inline-end: 1px solid var(--border-subtle);
}

.gs-dashboard-profile {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--gs-dash-head);
	margin-inline: calc(var(--space-4) * -1);
	padding-inline: var(--space-4);
	border-bottom: 1px solid var(--border-subtle);
}

/* Same glyph the header account menu already uses (gs_icon_mask--user) —
   a generic avatar stand-in, not a fabricated profile photo feature. */
.gs-dashboard-profile__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--accent);
}

.gs-dashboard-profile__avatar .gs-icon-mask {
	width: 20px;
	height: 20px;
}

.gs-dashboard-profile__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gs-dashboard-profile__name {
	overflow: hidden;
	color: var(--text-primary);
	font-size: var(--font-md);
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gs-dashboard-profile__handle {
	overflow: hidden;
	color: var(--text-muted);
	font-size: var(--font-2xs);
	text-align: end;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gs-dashboard-profile__edit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	margin-inline-start: auto;
	border-radius: var(--radius-md);
	color: var(--text-muted);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.gs-dashboard-profile__edit:hover {
	background: var(--bg-elevated-hover);
	color: var(--text-primary);
}

.gs-dashboard__main {
	min-width: 0;
	padding: 0 var(--gs-dash-gutter) var(--space-16);
}

.gs-dashboard-pagehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	min-height: var(--gs-dash-head);
	margin: 0 calc(var(--gs-dash-gutter) * -1) var(--space-8);
	padding: var(--space-3) var(--gs-dash-gutter);
	border-bottom: 1px solid var(--border-subtle);
}

.gs-dashboard .gs-dashboard-pagehead__title {
	margin: 0;
	font-size: var(--font-xl);
	font-weight: 800;
	line-height: 1.4;
}

.gs-dashboard-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-muted);
	font-size: var(--font-xs);
}

.gs-dashboard-breadcrumb a {
	display: inline-flex;
	color: var(--text-muted);
	text-decoration: none;
}

.gs-dashboard-breadcrumb a:hover {
	color: var(--text-primary);
}

.gs-dashboard-breadcrumb [aria-current="page"] {
	color: var(--text-primary);
}

.gs-dashboard-breadcrumb__sep {
	display: inline-flex;
	opacity: .6;
}

@media (max-width: 1100px) {
	.gs-dashboard {
		--gs-dash-gutter: var(--space-5);
		grid-template-columns: 240px minmax(0, 1fr);
	}
}

/* Phones / small tablets: one column. The sidebar keeps only its profile
   block; its links are in the off-canvas menu (gs_append_account_items_to_
   primary_nav()) and the quick-nav strip under the page header. */
@media (max-width: 782px) {
	.gs-dashboard {
		--gs-dash-head: 68px;
		--gs-dash-gutter: var(--space-4);
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.gs-dashboard__sidebar {
		padding-bottom: 0;
		border-inline-end: none;
	}

	.gs-dashboard-profile {
		border-bottom: none;
	}

	.gs-dashboard-nav {
		display: none;
	}

	.gs-dashboard-pagehead {
		margin-bottom: var(--space-5);
		border-top: 1px solid var(--border-subtle);
	}

	.gs-dashboard .gs-dashboard-pagehead__title {
		font-size: var(--font-lg);
	}
}

/* Mobile-only quick-nav strip (my-account.php) — hidden on desktop, where
   the sidebar (.gs-dashboard-nav) already covers this. A horizontally
   scrollable row of icon chips, not a second vertical list, so it reads
   as a distinct "quick actions" affordance rather than a duplicate menu. */
.gs-dashboard-quicknav-wrap {
	display: none;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
	/* Let it bleed to the viewport edges like the homepage quick-nav does,
	   instead of clipping the first/last chip against .gs-dashboard's own
	   side padding. */
	margin-inline: calc(var(--space-4) * -1);
	padding-inline: var(--space-4);
}

/* No visible OS/browser scrollbar — assets/js/dashboard-quicknav.js
   drives scrolling via the two arrow buttons instead (site owner asked
   for arrows, not a themed native scrollbar). Swiping still works, it
   just doesn't draw a bar while you do it.

   padding-block bumped from --space-1 (4px) to --space-2 (8px): setting
   overflow-x here without an explicit overflow-y makes the *used* value
   of overflow-y compute to auto too (CSS Overflow spec — a lone axis
   can't stay visible once the other is scrolling), so this row clips
   anything that overflows it vertically, not just horizontally. The
   "فروش اکانت" icon's animated glow (.gs-dashboard-quicknav__icon
   box-shadow, added for its neon-ring effect — see the rule further down
   this file) extends a few px past the 44px circle and was getting cut
   off top/bottom as a result (confirmed live). The extra padding just
   gives the glow room inside this scroll container's own box before its
   edge, rather than fighting the clip with overflow:visible (which would
   also stop the strip from scrolling at all). */
.gs-dashboard-quicknav {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	padding-block: var(--space-2);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gs-dashboard-quicknav::-webkit-scrollbar {
	display: none;
}

/* padding/line-height reset to 0/1 — Astra's inline dynamic CSS applies a
   generic "button { padding: 15px 30px; line-height: 1.85714 }" reset to
   every plain <button> site-wide; left alone, that padding alone exceeds
   the 32px box below and flexbox's automatic minimum-size rule then grows
   the button past its declared width to fit it, squeezing the centered
   svg icon down to 0 width (confirmed live via getBoundingClientRect). */
.gs-dashboard-quicknav-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	line-height: 1;
	border-radius: var(--radius-full);
	border: 1px solid var(--border-subtle);
	background: var(--bg-elevated);
	color: var(--text-secondary);
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.gs-dashboard-quicknav-arrow:hover {
	background: var(--bg-elevated-hover);
	color: var(--text-primary);
}

/* gs_icon_svg('chevron') points left by default, which is already
   end-ward in RTL (correct as-is for the "next items" arrow); flipped
   for "previous", which points start-ward (right in RTL). */
.gs-dashboard-quicknav-arrow--start svg {
	transform: scaleX(-1);
}

.gs-dashboard-quicknav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	flex: none;
	width: 72px;
	text-decoration: none;
	color: var(--text-secondary);
	font-size: var(--font-xs);
	text-align: center;
}

.gs-dashboard-quicknav__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: var(--bg-elevated);
	border: 1px solid var(--border-subtle);
	color: var(--text-secondary);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.gs-dashboard-quicknav__item[aria-current="page"] .gs-dashboard-quicknav__icon {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
}

.gs-dashboard-quicknav__item[aria-current="page"] .gs-dashboard-quicknav__label {
	color: var(--accent);
	font-weight: 600;
}

.gs-dashboard-quicknav__label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Same animated red "neon" ring/glow as the marketplace's "دسته دوم" badge
   and the My Account nav's "فروش اکانت" row (.gs-badge--secondhand,
   .gs-dashboard-nav li a[href*="sell-account"] above, and
   .gs-account-mobile-nav-item > a[href*="sell-account"] in
   components.css) — this quick-nav strip (my-account.php) is a THIRD
   render of the same wc_get_account_menu_items() data (see that file's own
   header comment on why it exists as a separate mobile affordance from the
   sidebar), so it needed its own copy of the same selector shape. Rings
   the 44x44 icon circle specifically, not the whole flex column — that
   circle is this component's own equivalent of a bounded "chip"; the
   label below is plain text, same as [aria-current="page"] above only
   ever touching the icon circle's own border/background too. The base
   fill stays var(--bg-elevated) (this icon's normal background, unlike
   the transparent fill used on the nav-row versions of this effect) so
   the circle keeps reading as a filled icon chip, not a hollow ring.
   box-sizing: border-box keeps the circle at its declared 44x44 instead
   of growing with the new border width. */
.gs-dashboard-quicknav__item[href*="sell-account"] .gs-dashboard-quicknav__icon {
	box-sizing: border-box;
	border: 2px solid transparent;
	background-image: linear-gradient(var(--bg-elevated), var(--bg-elevated));
	background-origin: padding-box;
	background-clip: padding-box;
}

@supports (background-clip: border-box) {
	.gs-dashboard-quicknav__item[href*="sell-account"] .gs-dashboard-quicknav__icon {
		background-image:
			linear-gradient(var(--bg-elevated), var(--bg-elevated)),
			conic-gradient(from var(--gs-neon-angle, 0deg),
				color-mix(in srgb, var(--danger-strong) 60%, black),
				var(--danger-strong),
				color-mix(in srgb, var(--danger-strong) 55%, white),
				var(--danger-strong),
				color-mix(in srgb, var(--danger-strong) 60%, black));
		background-origin: padding-box, border-box;
		background-clip: padding-box, border-box;
		animation: gs-neon-spin 4s linear infinite, gs-neon-glow 4s ease-in-out infinite;
	}
}

/* Placed after the base display:none above (not merged into the earlier
   <=782px block) so this override actually wins the cascade — same
   specificity, later source order. */
@media (max-width: 782px) {
	.gs-dashboard-quicknav-wrap {
		display: flex;
	}
}

/* The nav sits straight in the sidebar (no card), groups under small
   muted labels, logout set apart at the bottom. */
.gs-dashboard-nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding-top: var(--space-5);
}

@media (max-width: 782px) {
	.gs-dashboard-nav {
		display: none;
	}
}

.gs-dashboard-nav__label {
	margin: 0 var(--space-3) var(--space-2);
	color: var(--text-muted);
	font-size: var(--font-2xs);
	font-weight: 600;
}

.gs-dashboard-nav__group--logout {
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-subtle);
}

.gs-dashboard-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

/* Astra's own dynamic CSS (an inline <style>, not this stylesheet) adds
   `body .woocommerce-MyAccount-navigation-link:last-child { border-bottom-width: 1px }`
   with its own --ast-border-color — a default meant for its plain
   horizontal tab-strip nav, left over now that this list is restyled as
   a card (confirmed live: only the last item, "خروج", ever showed it).
   !important because it's overriding an inline stylesheet's rule. */
.gs-dashboard-nav li {
	border: none !important;
}

.gs-dashboard-nav li a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.gs-dashboard-nav li a:hover {
	background: var(--bg-elevated-hover);
}

/* Accent bar on the inline-start edge (the right, in RTL) like filmkio's
   active item: an inset shadow, so the row's box doesn't change size. */
.gs-dashboard-nav li a[aria-current="page"] {
	background: var(--accent-soft);
	color: var(--accent-text);
	font-weight: 600;
	box-shadow: inset -3px 0 0 var(--accent);
}

/* The same animated red "neon" ring/glow as the marketplace's "دسته دوم"
   badge (.gs-badge--secondhand, components.css — see that rule for why
   --danger-strong instead of --danger, and why box-shadow rather than a
   blurred ::after for the glow), applied to the "فروش اکانت" row here —
   2026-09-21 request to make that one entry stand out from the plain list
   around it, on both this desktop sidebar and its off-canvas mobile
   duplicate (.gs-account-mobile-nav-item > a[href*="sell-account"] in
   components.css). Targeted by [href*=] rather than the endpoint class
   WooCommerce already puts on the parent <li>
   (wc_get_account_menu_item_classes() ->
   .woocommerce-MyAccount-navigation-link--sell-account) so the exact same
   selector shape works on both surfaces — the mobile duplicate's <li> has
   no such class (see the component's own comment). Only background-image/
   -origin/-clip are set (never the `background` shorthand, and no
   background-color of its own) so :hover/[aria-current]'s own background
   colors keep showing through underneath the ring on this row same as any
   other — box-sizing: border-box keeps the row's footprint from growing
   by the new border width. */
.gs-dashboard-nav li a[href*="sell-account"] {
	box-sizing: border-box;
	border: 2px solid transparent;
	background-image: linear-gradient(transparent, transparent);
	background-origin: padding-box;
	background-clip: padding-box;
}

@supports (background-clip: border-box) {
	.gs-dashboard-nav li a[href*="sell-account"] {
		background-image:
			linear-gradient(transparent, transparent),
			conic-gradient(from var(--gs-neon-angle, 0deg),
				color-mix(in srgb, var(--danger-strong) 60%, black),
				var(--danger-strong),
				color-mix(in srgb, var(--danger-strong) 55%, white),
				var(--danger-strong),
				color-mix(in srgb, var(--danger-strong) 60%, black));
		background-origin: padding-box, border-box;
		background-clip: padding-box, border-box;
		animation: gs-neon-spin 4s linear infinite, gs-neon-glow 4s ease-in-out infinite;
	}
}

.gs-dashboard-nav svg {
	flex-shrink: 0;
}

/* WooCommerce's own layout CSS gives `.woocommerce-account
   .woocommerce-MyAccount-content` float + width: 68% (meant for its side-by-
   side nav); in this grid the column already sets the width. */
.gs-dashboard .gs-dashboard__content.woocommerce-MyAccount-content {
	float: none;
	width: auto;
	min-width: 0;
}

/* WooCommerce's and the plugins' own pages (orders, forms, tables) get one
   panel; the overview and library pages lay out their own cards. */
.gs-dashboard__content--panel {
	padding: var(--space-6);
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
}

@media (max-width: 480px) {
	.gs-dashboard__content--panel {
		padding: var(--space-4);
	}
}

.gs-dashboard__content h2 {
	margin-top: 0;
	font-size: var(--font-lg);
}

.gs-dashboard-intro {
	margin: 0 0 var(--space-6);
	color: var(--text-secondary);
	font-size: var(--font-sm);
}

/* Overview stat cards, filmkio-style: line icon and number on top, label
   and a one-line hint below with an arrow. */
.gs-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-4);
}

.gs-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-5);
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.gs-stat:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

.gs-stat__top,
.gs-stat__bottom {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}

.gs-stat__top {
	align-items: flex-start;
}

.gs-stat__bottom {
	align-items: flex-end;
}

.gs-stat__icon {
	display: inline-flex;
	color: var(--accent-text);
}

.gs-stat__value {
	color: var(--text-primary);
	font-size: var(--font-2xl);
	font-weight: 800;
	line-height: 1;
}

.gs-stat__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gs-stat__label {
	color: var(--text-primary);
	font-size: var(--font-sm);
	font-weight: 700;
}

.gs-stat__hint {
	color: var(--text-muted);
	font-size: var(--font-2xs);
}

.gs-stat__arrow {
	display: inline-flex;
	flex: none;
	color: var(--text-muted);
	transition: transform var(--transition-fast), color var(--transition-fast);
}

.gs-stat:hover .gs-stat__arrow {
	color: var(--accent-text);
	transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.gs-stat,
	.gs-stat:hover,
	.gs-stat:hover .gs-stat__arrow {
		transform: none;
	}
}

@media (max-width: 600px) {
	.gs-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}

	.gs-stat {
		gap: var(--space-4);
		padding: var(--space-4);
	}

	.gs-stat__value {
		font-size: var(--font-xl);
	}

	/* Two per row: an odd last card takes the whole row. */
	.gs-stat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* «حساب، به سلیقهٔ شما»: shortcut rows, two per line. */
.gs-shortcuts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

.gs-shortcut {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--transition-fast);
}

.gs-shortcut:hover {
	border-color: var(--border-strong);
}

.gs-shortcut__icon {
	display: inline-flex;
	flex: none;
	color: var(--text-secondary);
}

.gs-shortcut__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gs-shortcut__label {
	color: var(--text-primary);
	font-size: var(--font-sm);
	font-weight: 700;
}

.gs-shortcut__hint {
	color: var(--text-muted);
	font-size: var(--font-2xs);
}

.gs-shortcut__arrow {
	display: inline-flex;
	flex: none;
	margin-inline-start: auto;
	color: var(--text-muted);
	transition: transform var(--transition-fast), color var(--transition-fast);
}

.gs-shortcut:hover .gs-shortcut__arrow {
	color: var(--accent-text);
	transform: translateX(-3px);
}

@media (max-width: 600px) {
	.gs-shortcuts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Overview sections: title (with the site's orange section icon, #36),
   a one-line subtitle under it like filmkio's, the shared «مشاهده همه»
   .gs-viewall button (components.css) on the other side. */
.gs-dashboard-section {
	margin-bottom: var(--space-10);
}

.gs-dashboard-section:last-child {
	margin-bottom: 0;
}

.gs-dashboard-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.gs-dashboard-section__heading {
	min-width: 0;
}

.gs-dashboard-section__header h2 {
	margin: 0;
	font-size: var(--font-lg);
}

.gs-dashboard-section__subtitle {
	margin: var(--space-1) 0 0;
	color: var(--text-muted);
	font-size: var(--font-xs);
}

.gs-dashboard-section__header .gs-viewall {
	flex: none;
}

/* «لیست نشان‌شده»: the shop's own cards, a «حذف نشان» text button under
   each. Explicit padding/background/border/colour on the <button>:
   Astra's generic button rule would otherwise win. */
/* margin-top: auto pins it to the card's bottom (li.product is a flex
   column), so the buttons line up across a row whatever the title length. */
.gs-favorite-products .gs-favorite--card {
	margin: auto 0 0;
	padding-top: var(--space-2);
}

.gs-favorite-products .gs-favorite--card .gs-favorite__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) 0;
	line-height: 1.5;
	border: none;
	border-radius: 0;
	background: none;
	color: var(--text-muted);
	font-family: var(--font-family);
	font-size: var(--font-2xs);
	font-weight: 600;
	cursor: pointer;
	transition: color var(--transition-fast);
}

.gs-favorite-products .gs-favorite--card .gs-favorite__btn:hover,
.gs-favorite-products .gs-favorite--card .gs-favorite__btn:focus {
	background: none;
	color: var(--danger);
}

.gs-dashboard-recent-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.gs-dashboard-recent-order__link {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: var(--bg-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	color: inherit;
	text-decoration: none;
	transition: background var(--transition-fast);
}

.gs-dashboard-recent-order__link:hover {
	background: var(--bg-elevated-hover);
}

.gs-dashboard-recent-order__number {
	font-weight: 600;
	flex: 1 1 auto;
	min-width: 0;
}

.gs-dashboard-recent-order__date {
	color: var(--text-muted);
	font-size: var(--font-sm);
	flex: none;
}

.gs-dashboard-recent-order__status {
	flex: none;
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
	font-size: var(--font-xs);
	background: var(--bg-surface);
	color: var(--text-secondary);
	border: 1px solid var(--border-subtle);
}

.gs-dashboard-recent-order__status--completed,
.gs-dashboard-recent-order__status--processing {
	background: var(--accent-soft);
	color: var(--accent);
	border-color: transparent;
}

.gs-dashboard-recent-order__status--cancelled,
.gs-dashboard-recent-order__status--failed,
.gs-dashboard-recent-order__status--refunded {
	background: var(--danger);
	color: #fff;
	border-color: transparent;
}

.gs-dashboard-recent-order__total {
	flex: none;
	font-weight: 700;
}

@media (max-width: 600px) {
	.gs-dashboard-recent-order__link {
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-3);
	}

	.gs-dashboard-recent-order__number {
		flex-basis: 100%;
	}
}

/* «موجود شد خبرم کن» section (dashboard.php, gs-stock-alerts mu-plugin):
   reuses the recent-orders row; a restocked game gets a green badge and
   border, a pending one a small cancel button. */
.gs-stock-alerts a.gs-dashboard-recent-order__number {
	color: inherit;
	text-decoration: none;
}

.gs-stock-alerts__item--ready .gs-dashboard-recent-order__link {
	border-color: color-mix(in srgb, var(--success) 45%, transparent);
}

.gs-stock-alerts__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--success) 12%, transparent);
	color: var(--success);
	font-size: var(--font-xs);
	font-weight: 700;
}

.gs-stock-alerts__item .gs-stock-alert__form {
	flex: none;
	margin: 0;
}

.gs-stock-alerts .gs-stock-alerts__cancel {
	padding: 2px var(--space-3);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-full);
	background: var(--bg-surface);
	color: var(--text-secondary);
	font-family: var(--font-family);
	font-size: var(--font-xs);
	cursor: pointer;
}

.gs-stock-alerts .gs-stock-alerts__cancel:hover {
	color: var(--danger);
	border-color: currentColor;
}


/* Sell-account form + my-listings table (game-store-marketplace templates) */

.gsm-sell-form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--space-4);
}

.gsm-eligible-item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	margin-bottom: var(--space-2);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.gsm-eligible-item__title {
	font-weight: 600;
}

.gsm-eligible-item__meta {
	color: var(--text-secondary);
	font-size: var(--font-sm);
	margin-inline-start: auto;
}

.gsm-sell-form .form-row {
	margin-bottom: var(--space-4);
}

.gsm-sell-form label {
	display: block;
	margin-bottom: var(--space-1);
	font-weight: 600;
}

.gsm-sell-form input[type="text"],
.gsm-sell-form input[type="password"],
.gsm-sell-form input[type="number"],
.gsm-sell-form textarea {
	width: 100%;
	max-width: 420px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--bg-base);
	color: var(--text-primary);
}

.gsm-locked-email {
	display: block;
	max-width: 420px;
	padding: var(--space-3);
	border: 1px solid var(--accent);
	border-radius: var(--radius-md);
	background: var(--accent-soft);
}

.gsm-locked-email strong {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--font-base);
	word-break: break-all;
}

.gsm-locked-email .description,
#gsm-manual-email-wrap .description {
	display: block;
	color: var(--text-secondary);
	font-size: var(--font-xs);
}

#gsm-manual-email-wrap input[type="text"] {
	margin-bottom: var(--space-1);
}

.gsm-sell-form .description {
	display: block;
	color: var(--text-secondary);
	font-size: var(--font-xs);
	margin-top: var(--space-1);
}

/* Deliberately no color override on this button: Astra's default blue
   (#046BD2) is the current intended WooCommerce button color site-wide
   (login/register, add-to-cart, this one) — see CLAUDE.md. Only the
   generic theme .button rule (orange) used to fight it; that's for
   non-WooCommerce buttons/links, not this one. */

.gsm-listings-table .gsm-status {
	display: inline-block;
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
	font-size: var(--font-xs);
	background: var(--bg-elevated);
}

.gsm-listings-table .gsm-status--approved,
.gsm-listings-table .gsm-status--sold {
	background: var(--accent-soft);
	color: var(--accent);
}

.gsm-listings-table .gsm-status--rejected {
	background: var(--danger);
	color: #fff;
}

.gsm-preview-banner {
	margin-bottom: var(--space-4);
}


/* ---- Library: «بازی‌های من» (#23) ----
   Cover cards after filmkio's library grid: cover, title, details, and the
   actions pinned to the bottom so a row of cards lines up. */
.gs-library-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-4);
}

.gs-library-grid--games {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}


.gs-library-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	background: var(--bg-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.gs-library-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}

.gs-library-card__cover {
	display: block;
	background: var(--skeleton-base);
}

.gs-library-card__cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0;
}

.gs-library-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-3) var(--space-2);
}

.gs-dashboard__content .gs-library-card__title {
	margin: 0;
	font-size: var(--font-sm);
	font-weight: 700;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gs-library-card__title a {
	color: var(--text-primary);
	text-decoration: none;
}

.gs-library-card__title a:hover {
	color: var(--accent-text);
}

.gs-library-card__price {
	margin: 0;
	font-size: var(--font-xs);
	font-weight: 600;
}

.gs-library-card__stock {
	color: var(--text-muted);
}

.gs-library-card__purchases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.gs-library-purchase {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
	padding: var(--space-2);
	background: var(--bg-base);
	border-radius: var(--radius-md);
	font-size: var(--font-xs);
}

.gs-library-purchase__option {
	font-weight: 600;
	color: var(--text-primary);
}

.gs-library-purchase__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	color: var(--text-muted);
}

.gs-library-purchase__meta a {
	color: var(--text-secondary);
}

/* The marketplace link-up: sell this purchase, or its listing's status. */
.gs-library-sell,
.gs-library-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 2px var(--space-2);
	border-radius: var(--radius-full);
	font-size: var(--font-2xs);
	font-weight: 600;
	text-decoration: none;
}

.gs-library-sell {
	border: 1px solid var(--accent);
	color: var(--accent-text);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.gs-library-sell:hover {
	background: var(--accent);
	color: #fff;
}

.gs-library-chip {
	background: var(--bg-elevated);
	border: 1px solid var(--border-subtle);
	color: var(--text-secondary);
}

.gs-library-chip--approved {
	color: var(--accent-text);
	border-color: var(--accent-soft);
}

.gs-library-chip--awaiting_handover,
.gs-library-chip--sold {
	color: var(--success);
}

.gs-library-card__actions {
	display: flex;
	gap: var(--space-2);
	margin-top: auto;
	padding: var(--space-2) var(--space-3) var(--space-3);
}

/* Explicit padding/line-height/background on the <button> too: Astra's
   generic button rule (15px 30px padding, theme background) would win. */
.gs-library-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	flex: 1 1 auto;
	min-height: 36px;
	padding: var(--space-1) var(--space-2);
	line-height: 1.4;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--bg-base);
	color: var(--text-primary);
	font-family: var(--font-family);
	font-size: var(--font-xs);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.gs-library-card__btn:hover {
	background: var(--bg-elevated-hover);
	border-color: var(--border-strong);
	color: var(--text-primary);
}

.gs-library-card__btn--primary {
	background: var(--accent-soft);
	border-color: transparent;
	color: var(--accent-text);
}

.gs-library-card__btn--primary:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.gs-library-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-10) var(--space-4);
	text-align: center;
	color: var(--text-secondary);
	background: var(--bg-base);
	border-radius: var(--radius-lg);
}

.gs-library-empty svg {
	color: var(--accent);
}

.gs-library-empty p {
	margin: 0;
	max-width: 420px;
}

@media (max-width: 600px) {
	.gs-library-grid,
	.gs-library-grid--games {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}

	.gs-library-grid--games .gs-library-card__actions {
		flex-direction: column;
	}
}