/* Component styling — buttons, badges, trust bar, forms, footer. See mosioc/design-system.md §5 */

/* ---------- Site header (sticky, frosted glass) ---------- */
/* Astra's own "Sticky Header" section is an Astra Pro add-on (gated behind
   ASTRA_EXT_VER in header-builder.php) that isn't installed here, so there's
   no astra-settings option to flip for this — position:sticky is applied
   directly. #masthead itself paints no background (Astra's site-header rule
   is transparent); the translucent blur has to go on the two elements that
   actually paint the header's background color: .ast-primary-header-bar
   (desktop nav row) and .ast-mobile-header-content (mobile logo/cart row,
   hidden above the ast-header-break-point width). Both normally read
   background-color from --ast-global-color-4 (desktop, via tokens.css) or a
   hardcoded #fff (mobile, Astra's own dynamic CSS — never themed, so
   without this override the mobile bar would stay white even in dark mode). */
#masthead {
	position: sticky;
	inset-block-start: 0;
	z-index: 99;
}

/* Explicit, not relied-on inheritance from body — forces IRANSansX (and a
   bold weight, matching how a primary nav normally reads heavier than
   body copy) on every header nav link, desktop and mobile menu both.
   Deliberately NOT a blanket ".site-header *": the header also hosts
   several icon-FONT glyphs (.menu-toggle-icon, .ast-search-icon, the
   hamburger's .ast-menu-toggle — all render a shape via
   font-family:Astra/WooCommerce on a ::before, not real text), and a
   wildcard override would swap their glyph font for IRANSansX too,
   turning each icon into a stray Persian character instead of a shape. */
.site-header,
.main-header-menu,
.main-header-menu a,
.gs-nav-categories__panel,
.site-title,
.site-title a,
.gs-search-bar,
.gs-search-bar__input {
	font-family: var(--font-family) !important;
}

.main-header-menu > .menu-item > a {
	font-weight: 700 !important;
}

/* "دسته‌بندی‌ها" nav item + its mega-menu panel (gs_nav_categories_item()
   in functions.php + assets/js/nav-categories.js) — a wide two-column card
   instead of Astra's plain single-column .sub-menu dropdown. Toggled by
   .is-open (JS, on click), not :hover — hover has no equivalent on touch,
   so the trigger used to just navigate straight to /shop/ on a phone tap
   instead of ever opening; click works identically on both. */
.gs-nav-categories {
	position: relative;
}

.gs-nav-categories > a {
	display: flex !important;
	align-items: center;
	gap: var(--space-1);
	padding: 0 20px;
	cursor: pointer;
}

/* Astra's own inline CSS (".main-header-menu > .menu-item{line-height:
   80px}", matching the 80px header height, not an astra-settings option)
   is inherited here from the parent <li>, desktop only — the same rule is
   scoped to .ast-desktop, so the mobile menu's copy of this link never
   had it and instead just inherits the mobile menu's own (much smaller)
   line-height like its "فروشگاه"/"حساب کاربری" siblings. line-height:1
   here, scoped the same way, removes the same excess on desktop without
   touching that — an earlier unscoped version of this reset also
   overrode the mobile copy, shrinking it below its siblings' height. */
@media (min-width: 922px) {
	.gs-nav-categories > a {
		line-height: 1;
	}
}

.gs-nav-categories > a > svg {
	transition: transform var(--transition-fast);
}

.gs-nav-categories:not(.is-open) > a > svg {
	transform: rotate(-90deg);
}

.gs-nav-categories.is-open > a > svg {
	transform: rotate(90deg);
}

.gs-nav-categories__panel {
	position: absolute;
	/* Inherits line-height:80px from the trigger <li> (Astra's own inline
	   ".main-header-menu > .menu-item{line-height:80px}", matching the
	   header height) since nothing here reset it — every group heading and
	   chip label not already covered by its own line-height (e.g. chip
	   links already use line-height:1) was inflating its own row height
	   from that inherited 80px. */
	line-height: normal;
	/* Zero gap between trigger and panel on purpose (no margin-block-start)
	   — with the old :hover trigger, a real gap here meant the dropdown
	   dropped out of :hover the moment the pointer crossed it. Not load-
	   bearing now that this opens on click instead, but harmless to keep;
	   the visual gap is padding-block-start on the panel itself. */
	inset-block-start: 100%;
	left: 0;
	padding-block-start: var(--space-3);
	display: flex;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition-fast), visibility var(--transition-fast);
	z-index: 50;
}

.gs-nav-categories.is-open .gs-nav-categories__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Stacked sections (platform, then genre), not side-by-side columns — at
   ~155px each, a 2-column split left too little width per row for the
   wrapped genre chips (8 terms, some with long Persian labels) to actually
   wrap into fewer rows than a plain vertical list would have. Full panel
   width per section lets them wrap into 2-3 short rows instead. */
/* Frosted glass, but barely — this panel is a wall of small text (platform
   + genre chips) sitting over the hero image, which is busy/high-contrast
   and full-width behind it. The header/theme-toggle/hero-CTA can get away
   with 75% opacity because they sit over much smaller or more uniform
   areas; here it made every chip label illegible. 97% keeps just enough
   translucency for the blur to still read as glass at the edges without
   touching text contrast in the body of the panel. */
.gs-nav-categories__panel-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 420px;
	padding: var(--space-4);
	background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.gs-nav-categories__group + .gs-nav-categories__group {
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--border-subtle);
}

.gs-nav-categories__group h3 {
	margin: 0 0 var(--space-2);
	font-size: var(--font-xs);
	color: var(--text-muted);
	font-weight: 600;
}

.gs-nav-categories__group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* radius-md, not radius-full — a true stadium/pill radius only reads as a
   pill when the box is much wider than it is tall; body's line-height:1.8
   made these chips nearly as tall as short labels ("اکشن") are wide, so
   full rounding looked like a lopsided blob instead of a pill, and
   inconsistent next to genuinely long labels ("تیراندازی اول‌شخص") that
   *did* read as pills. line-height:1 sidesteps the height problem
   entirely rather than papering over it with a different radius. */
.gs-nav-categories__group a {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	padding-block: var(--space-2);
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
	color: var(--text-secondary) !important;
	font-size: var(--font-xs);
	font-weight: 500;
	white-space: nowrap;
}

.gs-nav-categories__group a:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent) !important;
}

/* Mobile menu (≤921px, Astra's own header breakpoint): the floating card
   (position:absolute, fixed width, its own border/shadow) that works as a
   dropdown under a desktop nav item makes no sense stacked inside the
   already-narrow, already-scrollable mobile menu — it needs to lay out
   in-flow, full width, blending into that list instead of looking like a
   second nested menu floating on top of it. */
@media (max-width: 921px) {
	.gs-nav-categories__panel {
		position: static;
		padding-block-start: 0;
		display: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.gs-nav-categories.is-open .gs-nav-categories__panel {
		display: flex;
	}

	.gs-nav-categories__panel-inner {
		width: 100%;
		background: none;
		/* No backdrop to blur here — inline in the mobile menu's own solid
		   background, not floating over page content like the desktop
		   version. */
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding: var(--space-3) var(--space-4);
	}

	/* Astra's own mobile-menu CSS (".ast-header-break-point .main-navigation
	   .stack-on-mobile li{width:100%}") targets every <li> at any depth
	   inside the mobile nav, not just its own top-level items — it reaches
	   all the way into these chips too, forcing each one full-width so it
	   wraps onto its own row (vertical) instead of flowing several to a
	   row (horizontal) like on desktop. !important because that's a wide,
	   deep descendant selector on Astra's own stylesheet, not something a
	   plain class match reliably outranks. */
	.gs-nav-categories__group ul li {
		width: auto !important;
	}
}

/* ---------- Search bar (Google-style) ----------
   [gs_search_bar] shortcode (homepage) + the shop page's own instance
   (gs_shop_search_bar() in functions.php, same markup). !important on
   width/margin: WordPress's own block-layout CSS
   (".entry-content[data-ast-blocks-layout] > *") sets max-width and
   physical margin-left/right:auto on every direct child block at higher
   specificity (a class+attribute selector beats a single class), which
   otherwise stretches this to the full 1400px content width instead of
   640px centered. */
.gs-search-bar {
	display: flex;
	align-items: center;
	max-width: 640px !important;
	margin-inline: auto !important;
	margin-block: var(--space-6);
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-full);
	/* Clips the submit button to the pill shape now that the button has no
	   radius of its own (flush square corners on its own would poke past
	   the bar's rounded end otherwise). */
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.gs-search-bar:focus-within {
	border-color: var(--accent);
	box-shadow: var(--shadow-md);
}

/* !important + [type="search"] on the selector: the generic input[type="search"]
   rule below (Forms section) also !importants its own border/background/radius
   at (0,1,1) specificity, which beat a plain .gs-search-bar__input class
   (0,1,0) even with !important on both sides — the border kept showing
   despite this rule. Adding [type="search"] here matches the actual markup
   and brings this selector to (0,2,0), so it wins.
   appearance:none on top of that — type="search" gets its own native
   rounded-rect chrome in WebKit/Blink (a small inset "search decoration")
   independent of any border/box-shadow CSS sets, which is what still read
   as a border around the input. */
.gs-search-bar__input[type="search"] {
	flex: 1;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	border: none !important;
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--space-4) var(--space-6);
	font-family: var(--font-family);
	font-size: var(--font-base);
	color: var(--text-primary);
}

.gs-search-bar__input:focus {
	outline: none;
	box-shadow: none !important;
}

.gs-search-bar__input::placeholder {
	color: var(--text-muted);
}

.gs-search-bar__submit {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	/* Astra's global button styling sets padding:15px 30px on every plain
	   <button> (its dynamic CSS, one of the selectors it targets is just
	   "button") — on a 48px icon-only button with box-sizing:border-box
	   that leaves negative content space, which flex-shrink then collapses
	   the icon into (0 width) rather than overflow. */
	padding: 0;
	border: none;
	border-radius: 0;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.gs-search-bar__submit:hover {
	background: var(--accent-hover);
}

.ast-primary-header-bar,
.ast-mobile-header-wrap .ast-mobile-header-content {
	background-color: color-mix(in srgb, var(--bg-surface) 75%, transparent) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: none !important;
}

/* Mobile menu (hamburger). This header uses Astra's simple inline mobile
   menu (body has ast-mobile-header-inline, not the header-builder popup) —
   the stacked dropdown is .main-header-menu itself with a .toggle-on/toggled
   state, not a separate ".ast-mobile-popup-*" overlay. Astra's static RTL
   stylesheet hardcodes its background (and its submenu flyouts) to #f9f9f9,
   never themed, so in dark mode it stayed a bright, near-white panel. */
.ast-header-break-point .main-header-menu,
.ast-header-break-point .main-header-menu .sub-menu {
	background-color: var(--bg-surface) !important;
}

/* ---------- Buttons ---------- */
.button,
button:not(.mc4wp-form button),
input[type="submit"],
.wp-block-button__link,
.ast-button {
	font-family: var(--font-family);
	font-weight: 600;
	border-radius: var(--radius-md);
	transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.wp-block-button__link,
.ast-button,
a.button,
button.button,
input[type="submit"] {
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);
	padding-block: .75rem;
	padding-inline: 1.5rem;
}

.wp-block-button__link:hover,
.ast-button:hover,
a.button:hover,
button.button:hover,
input[type="submit"]:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: #fff;
	transform: translateY(-1px);
}

.wp-block-button__link:active,
.ast-button:active,
a.button:active {
	background: var(--accent-active);
	border-color: var(--accent-active);
	transform: translateY(0);
}

/* Outline / secondary variant: add class "is-style-outline" (core button block) or .button.outline */
.is-style-outline .wp-block-button__link,
.button.outline,
a.button.outline {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}

.is-style-outline .wp-block-button__link:hover,
.button.outline:hover {
	background: var(--accent-soft);
	color: var(--accent-hover);
}

.button:disabled,
.wp-block-button__link:disabled,
.button.disabled {
	opacity: .5;
	pointer-events: none;
}

/* ---------- Badges / pills ---------- */
.gs-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding-block: .25rem;
	padding-inline: var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--font-2xs);
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

/* Discount shares --accent with CTAs on purpose (see design-system.md §1) and reads as a
   rounded-rect tag rather than a pill, distinguishing it from the other chip badges. */
.gs-badge--discount {
	background: var(--accent);
	color: #fff;
	border-radius: var(--radius-sm);
}

.gs-badge--new {
	background: var(--accent);
	color: #fff;
}

.gs-badge--instant {
	background: var(--bg-surface);
	border: 1px solid var(--success);
	color: var(--success);
}

.gs-badge--platform {
	background: transparent;
	border: 1px solid var(--border-subtle);
	color: var(--text-secondary);
	font-weight: 500;
}

.gs-badge--out-of-stock {
	background: transparent;
	border: 1px solid var(--border-subtle);
	color: var(--danger);
}

/* ---------- Trust bar ----------
   Not hooked in from PHP anymore (that sitewide wp_footer copy — the one
   that duplicated under the copyright bar on every page — was removed);
   this markup now lives only in the homepage's own "چرا گیم استور" content
   block (post 71), which still uses these same classes. */
.gs-trust-bar {
	background: var(--bg-surface);
	border-block: 1px solid var(--border-subtle);
	padding-block: var(--space-4);
}

.gs-trust-bar__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--space-4);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-6);
}

.gs-trust-bar__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-sm);
	color: var(--text-secondary);
}

.gs-trust-bar__item .gs-trust-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--accent);
	flex: none;
}

/* ---------- Theme toggle (dark mode) ---------- */
.gs-theme-toggle {
	position: fixed;
	inset-block-end: var(--space-6);
	inset-inline-end: var(--space-6);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	border: 1px solid var(--border-subtle);
	background: color-mix(in srgb, var(--bg-elevated) 75%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--shadow-md);
	color: var(--text-primary);
	font-size: var(--font-lg);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.gs-theme-toggle:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.gs-theme-toggle .gs-theme-toggle__icon {
	display: block;
	flex-shrink: 0;
}

.gs-theme-toggle .gs-theme-toggle__icon--dark {
	display: none;
}

:root[data-theme="dark"] .gs-theme-toggle .gs-theme-toggle__icon--light {
	display: none;
}

:root[data-theme="dark"] .gs-theme-toggle .gs-theme-toggle__icon--dark {
	display: inline;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .gs-theme-toggle .gs-theme-toggle__icon--light {
		display: none;
	}

	:root:not([data-theme="light"]) .gs-theme-toggle .gs-theme-toggle__icon--dark {
		display: inline;
	}
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select,
.select2-container--default .select2-selection--single {
	background: var(--bg-surface) !important;
	border: 1px solid var(--border-subtle) !important;
	border-radius: var(--radius-md) !important;
	color: var(--text-primary) !important;
	font-family: var(--font-family);
}

input::placeholder,
textarea::placeholder {
	color: var(--text-muted);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 2px var(--accent-soft) !important;
	outline: none;
}

/* ---------- Footer (the one deliberately dark section on an otherwise light site) ---------- */
.site-footer,
footer.site-footer,
#colophon {
	background: var(--footer-bg);
	color: var(--footer-text);
	/* Explicit, not relied-on inheritance from body — forces IRANSansX on
	   the footer container and (see the rule below) every element inside
	   it, regardless of any other rule in the cascade. */
	font-family: var(--font-family) !important;
	/* The below-footer copyright row (.site-below-footer-wrap) paints its own
	   background from this same Astra color slot the header uses — only
	   remapped to our dark tokens (in tokens.css) for dark *mode*, so in
	   light mode it fell back to Astra's own default (white), splitting the
	   footer into a dark block above a white bar below. Redefining the
	   variable here scopes the fix to just the footer (the header, which
	   uses the same slot, is outside .site-footer and unaffected). */
	--ast-global-color-4: var(--footer-bg);
}

/* Footer icons (gs_icon_svg()) are inline SVG, not icon-font glyphs, so a
   wildcard here — unlike the header — can't collide with a glyph font. */
.site-footer * {
	font-family: var(--font-family) !important;
}

.site-footer a {
	color: var(--footer-text);
}

.site-footer a:hover {
	color: var(--accent-2);
}

.site-footer .footer-widget-title,
.site-footer h2,
.site-footer h3 {
	color: #fff;
}

.gs-footer {
	max-width: 1440px;
	margin-inline: auto;
	padding: var(--space-12) var(--space-4) var(--space-8);
	border-block-end: 1px solid var(--footer-border);
}

.gs-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr 1.3fr;
	gap: var(--space-8);
}

.gs-footer__title {
	margin: 0 0 var(--space-4);
	font-size: var(--font-base);
	font-weight: 600;
}

.gs-footer__brand {
	margin: 0 0 var(--space-2);
	font-size: var(--font-lg);
	font-weight: 700;
	color: #fff;
}

.gs-footer__tagline {
	margin: 0 0 var(--space-5);
	color: var(--footer-text-muted);
	font-size: var(--font-sm);
	line-height: 1.7;
}

.gs-footer__social {
	display: flex;
	gap: var(--space-2);
}

.gs-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	border: 1px solid var(--footer-border);
	color: var(--footer-text);
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.gs-footer__social-link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

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

.gs-footer__links a {
	color: var(--footer-text-muted);
	font-size: var(--font-sm);
}

.gs-footer__links a:hover {
	color: var(--footer-text);
}

.gs-footer__newsletter-text {
	margin: 0 0 var(--space-4);
	color: var(--footer-text-muted);
	font-size: var(--font-sm);
	line-height: 1.7;
}

.gs-footer__newsletter-form {
	display: flex;
	align-items: center;
	border: 1px solid var(--footer-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
}

/* !important: see .gs-search-bar__input above — same global
   input[type="email"] rule (Forms section) fighting this one too. */
.gs-footer__newsletter-input {
	flex: 1;
	min-width: 0;
	border: none !important;
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: var(--space-3) var(--space-4);
	color: #fff !important;
	font-family: var(--font-family);
	font-size: var(--font-sm);
}

.gs-footer__newsletter-input:focus {
	box-shadow: none !important;
}

.gs-footer__newsletter-input::placeholder {
	color: var(--footer-text-muted);
}

.gs-footer__newsletter-input:focus {
	outline: none;
}

.gs-footer__newsletter-submit {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	/* see .gs-search-bar__submit — same Astra global button padding
	   collapsing this icon via flex-shrink */
	padding: 0;
	align-self: stretch;
	border: none;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.gs-footer__newsletter-submit:hover {
	background: var(--accent-hover);
}

@media (max-width: 1099px) {
	.gs-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: var(--space-8);
	}
}

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

/* ---------- Tabs (product description / reviews) ---------- */
.woocommerce-tabs ul.tabs li a {
	color: var(--text-secondary);
	font-weight: 600;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--accent);
	border-color: var(--accent);
}