/*
 * vgs-design — footer.css (module «footer», 0.5.0). The look of the owner's UX Builder footer block
 * (vgs-footer-redesign/vgs-footer-shortcode-v3.txt): a [section class="vgs-foot"] with Flatsome rows
 * and columns, [ux_html] text, the «دسترسی سریع» widget and three shortcodes of ours (Site\Footer).
 *
 * The design (DESIGN.md §4–§5): canvas background with a 1px line on top, flat white cards with a 1px
 * line (no shadow), one filled button per group, ink-outline pills, contact rows of 44px with a 40px
 * plate, Persian digits except the phone and the e-mail (bdi[dir=ltr]), 12px floor. Nothing here is
 * app-only: vgapp hides .footer-wrapper inside the app.
 *
 * Replaces the footer rules the owner kept in Flatsome's Custom CSS (class vgs-footer, v2): those
 * matched gradients, glows, 11.5px notes and 800 weights. They don't match the new classes.
 */

/* ── The section ──────────────────────────────────────────────────────── */
body.vgs-design .vgs-foot {
	background: var(--vgs-canvas);
	border-top: 1px solid var(--vgs-line);
	color: var(--vgs-ink-2);
	font-family: var(--vgs-font);
	font-size: var(--vgs-fs-14);
	line-height: var(--vgs-lh-body);
}

/* Flatsome paints a section's colour on an absolutely placed .section-bg; with no bg_color it is
 * transparent and the section's own background shows. Keep the content above it. */
body.vgs-design .vgs-foot > .section-content {
	position: relative;
}

/* The design's line icons (Icons::svg), the same base as catalog.css — repeated here so the footer
 * stands on its own when the catalog module is off. */
body.vgs-design .vgs-foot .vgsd-i {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Latin pieces (phone, e-mail, the domain) keep Latin digits: core.css turns on ss01 for the page. */
body.vgs-design .vgs-foot bdi[dir="ltr"] {
	direction: ltr;
	unicode-bidi: isolate;
	font-feature-settings: normal;
	font-variant-numeric: tabular-nums;
}

body.vgs-design .vgs-foot a:focus-visible {
	outline: none;
	box-shadow: var(--vgs-focus);
	border-radius: var(--vgs-r-sm);
}

/* ── Top bars: the app and the social links ──────────────────────────── */
body.vgs-design .vgs-foot__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vgs-s3) var(--vgs-s4);
	height: 100%;
	padding: var(--vgs-s4);
	border: 1px solid var(--vgs-line);
	border-radius: var(--vgs-r-lg);
	background: var(--vgs-surface);
}

body.vgs-design .vgs-foot__bar-text {
	flex: 1 1 14rem;
	min-width: 0;
	margin: 0;
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-13);
	line-height: var(--vgs-lh-label);
}

body.vgs-design .vgs-foot__bar-text strong {
	display: block;
	margin-bottom: var(--vgs-s1);
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-16);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-head);
}

body.vgs-design .vgs-foot__apps,
body.vgs-design .vgs-foot__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vgs-s2);
}

/* Pills: the first store is the group's one filled button; every other link is ink on white. */
body.vgs-design .vgs-foot__app,
body.vgs-design .vgs-foot__social a {
	display: inline-flex;
	align-items: center;
	gap: var(--vgs-s2);
	min-height: var(--vgs-btn-md);
	min-width: var(--vgs-tap);
	padding: 0 var(--vgs-s4);
	border: 1px solid var(--vgs-line-strong);
	border-radius: var(--vgs-r-pill);
	background: var(--vgs-surface);
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-14);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-label);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--vgs-dur-fast) var(--vgs-ease), border-color var(--vgs-dur-fast) var(--vgs-ease), transform var(--vgs-dur-fast) var(--vgs-ease);
}

body.vgs-design .vgs-foot__app:hover,
body.vgs-design .vgs-foot__social a:hover {
	background: var(--vgs-field);
	border-color: var(--vgs-ink-2);
	color: var(--vgs-ink);
}

body.vgs-design .vgs-foot__app:active,
body.vgs-design .vgs-foot__social a:active {
	transform: scale(0.98);
}

body.vgs-design .vgs-foot__app--primary,
body.vgs-design .vgs-foot__app--primary:hover {
	border-color: transparent;
	background: var(--vgs-primary);
	color: var(--vgs-on-primary);
}

body.vgs-design .vgs-foot__app--primary:hover {
	background: var(--vgs-primary-hover);
}

body.vgs-design .vgs-foot__social a .vgsd-i {
	width: 20px;
	height: 20px;
}

/* The store's own badge picture (the owner's choice, 0.5.2): a 150×50 image inside a 44px target, the
 * picture's corners on the design's scale. [vgs_footer_apps] (text pills from the settings) stays optional. */
body.vgs-design .vgs-foot__stores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vgs-s2);
}

body.vgs-design .vgs-foot__stores a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vgs-tap);
	border-radius: var(--vgs-r-md);
	overflow: hidden;
	transition: transform var(--vgs-dur-fast) var(--vgs-ease);
}

body.vgs-design .vgs-foot__stores a:active {
	transform: scale(0.98);
}

body.vgs-design .vgs-foot__stores img {
	display: block;
	width: 150px;
	height: 50px;
	border-radius: var(--vgs-r-md);
	object-fit: contain;
}

/* ── Column heads ─────────────────────────────────────────────────────── */
body.vgs-design .vgs-foot__h {
	margin: 0 0 var(--vgs-s3);
	padding-inline-start: var(--vgs-s3);
	border-inline-start: 3px solid var(--vgs-primary);
	color: var(--vgs-ink);
	font-size: var(--vgs-fs-16);
	font-weight: var(--vgs-fw-strong);
	line-height: var(--vgs-lh-head);
}

/* ── About and the game links ─────────────────────────────────────────── */
body.vgs-design .vgs-foot__about {
	max-width: 36rem;
	margin: 0 0 var(--vgs-s4);
	color: var(--vgs-ink-2);
	font-size: var(--vgs-fs-14);
	line-height: var(--vgs-lh-body);
	text-wrap: pretty;
}

body.vgs-design .vgs-foot__about b {
	color: var(--vgs-ink);
	font-weight: var(--vgs-fw-strong);
}

body.vgs-design .vgs-foot__games {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vgs-s2);
}

body.vgs-design .vgs-foot__games a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vgs-tap);
	padding: 0 14px;
	border: 1px solid var(--vgs-line-strong);
	border-radius: var(--vgs-r-pill);
	background: var(--vgs-surface);
	color: var(--vgs-ink-2);
	font-size: var(--vgs-fs-14);
	line-height: var(--vgs-lh-label);
	text-decoration: none;
	transition: background-color var(--vgs-dur-fast) var(--vgs-ease), border-color var(--vgs-dur-fast) var(--vgs-ease), color var(--vgs-dur-fast) var(--vgs-ease);
}

body.vgs-design .vgs-foot__games a:hover {
	background: var(--vgs-field);
	border-color: var(--vgs-ink-2);
	color: var(--vgs-ink);
}

/* ── Contact rows: a 40px plate, the link (44px target), a quiet line under it ── */
body.vgs-design .vgs-foot__contact {
	display: flex;
	flex-direction: column;
	gap: var(--vgs-s2);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vgs-design .vgs-foot__contact li {
	display: flex;
	align-items: center;
	gap: var(--vgs-s3);
	min-height: var(--vgs-tap);
	margin: 0;
	padding: 0;
}

body.vgs-design .vgs-foot__plate {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--vgs-r-md);
	background: var(--vgs-primary-soft);
	color: var(--vgs-primary-ink);
}

body.vgs-design .vgs-foot__plate .vgsd-i {
	width: 20px;
	height: 20px;
}

body.vgs-design .vgs-foot__contact li > span:not(.vgs-foot__plate),
body.vgs-design .vgs-foot__contact address {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	color: var(--vgs-ink-2);
	font-size: var(--vgs-fs-14);
	font-style: normal;
	line-height: var(--vgs-lh-label);
}

body.vgs-design .vgs-foot__contact a {
	display: inline-flex;
	align-items: center;
	min-height: var(--vgs-tap);
	color: var(--vgs-primary-ink);
	font-size: var(--vgs-fs-14);
	font-weight: var(--vgs-fw-strong);
	text-decoration: underline;
	text-decoration-color: var(--vgs-primary-soft-2);
	text-underline-offset: 3px;
}

body.vgs-design .vgs-foot__contact a:hover {
	color: var(--vgs-primary-hover);
	text-decoration-color: currentColor;
}

/* The phone is the row's big number (the list's link rule above has the same weight: repeat the chain). */
body.vgs-design .vgs-foot__contact a.vgs-foot__phone {
	font-size: var(--vgs-fs-18);
}

body.vgs-design .vgs-foot__contact small {
	display: block;
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-13);
	line-height: var(--vgs-lh-label);
}

/* ── «دسترسی سریع»: the nav-menu widget as quiet 44px rows ───────────── */
body.vgs-design .vgs-foot .sidebar-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vgs-design .vgs-foot .widget {
	margin: 0;
	padding: 0;
	border: 0;
}

body.vgs-design .vgs-foot .widget .widget-title {
	display: none;
}

body.vgs-design .vgs-foot .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vgs-design .vgs-foot .widget li {
	margin: 0;
	padding: 0;
	border: 0;
}

body.vgs-design .vgs-foot .widget li a {
	display: flex;
	align-items: center;
	min-height: var(--vgs-tap);
	padding: 0;
	color: var(--vgs-ink-2);
	font-size: var(--vgs-fs-14);
	line-height: var(--vgs-lh-label);
	text-decoration: none;
}

body.vgs-design .vgs-foot .widget li a:hover {
	color: var(--vgs-primary-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Trust seals: one white card around the owner's picture ──────────── */
body.vgs-design .vgs-foot__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 280px;
	padding: var(--vgs-s3);
	border: 1px solid var(--vgs-line);
	border-radius: var(--vgs-r-lg);
	background: var(--vgs-surface);
	transition: border-color var(--vgs-dur-fast) var(--vgs-ease);
}

body.vgs-design .vgs-foot__badge:hover {
	border-color: var(--vgs-line-strong);
}

body.vgs-design .vgs-foot__badge img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ── Copyright ────────────────────────────────────────────────────────── */
body.vgs-design .vgs-foot__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vgs-s2) var(--vgs-s4);
	margin: 0;
	padding-top: var(--vgs-s4);
	border-top: 1px solid var(--vgs-line);
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-13);
	line-height: var(--vgs-lh-body);
}

body.vgs-design .vgs-foot__copy b {
	color: var(--vgs-ink);
	font-weight: var(--vgs-fw-strong);
}

body.vgs-design .vgs-foot__en {
	color: var(--vgs-muted);
	font-size: var(--vgs-fs-12);
	font-weight: var(--vgs-fw-strong);
}

/* ── Phones and tablets ───────────────────────────────────────────────── */
@media (max-width: 849px) {
	body.vgs-design .vgs-foot__copy {
		justify-content: center;
		text-align: center;
	}

	body.vgs-design .vgs-foot__badge {
		max-width: 240px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.vgs-design .vgs-foot__app:active,
	body.vgs-design .vgs-foot__social a:active {
		transform: none;
	}
}