/* ===== Language Switching CSS ===== */

body .lang-fa { display: none; }
body .lang-en { display: inline; }
body .lang-fa.block-el { display: none; }
body .lang-en.block-el { display: block; }
body .lang-fa.flex-el { display: none; }
body .lang-en.flex-el { display: flex; }
body .lang-fa.grid-el { display: none; }
body .lang-en.grid-el { display: grid; }
body .lang-fa.table-el { display: none; }
body .lang-en.table-el { display: table-row; }
body .lang-fa.list-el { display: none; }
body .lang-en.list-el { display: list-item; }

html.lang-fa-active .lang-fa,
body.lang-fa-active .lang-fa { display: inline; }
html.lang-fa-active .lang-en,
body.lang-fa-active .lang-en { display: none; }
html.lang-fa-active .lang-fa.block-el,
body.lang-fa-active .lang-fa.block-el { display: block; }
html.lang-fa-active .lang-en.block-el,
body.lang-fa-active .lang-en.block-el { display: none; }
html.lang-fa-active .lang-fa.flex-el,
body.lang-fa-active .lang-fa.flex-el { display: flex; }
html.lang-fa-active .lang-en.flex-el,
body.lang-fa-active .lang-en.flex-el { display: none; }
html.lang-fa-active .lang-fa.grid-el,
body.lang-fa-active .lang-fa.grid-el { display: grid; }
html.lang-fa-active .lang-en.grid-el,
body.lang-fa-active .lang-en.grid-el { display: none; }
html.lang-fa-active .lang-fa.table-el,
body.lang-fa-active .lang-fa.table-el { display: table-row; }
html.lang-fa-active .lang-en.table-el,
body.lang-fa-active .lang-en.table-el { display: none; }
html.lang-fa-active .lang-fa.list-el,
body.lang-fa-active .lang-fa.list-el { display: list-item; }
html.lang-fa-active .lang-en.list-el,
body.lang-fa-active .lang-en.list-el { display: none; }

.lang-toggle {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-md);
	background-color: var(--color-off-white);
	border: 1px solid var(--color-gray-200);
	border-radius: 50px;
	cursor: pointer;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--color-gray-800);
	transition: all var(--transition-fast);
	margin-left: var(--spacing-lg);
}

.lang-toggle:hover {
	background-color: var(--color-gray-100);
	border-color: var(--color-gray-400);
}

.lang-toggle svg {
	width: 16px;
	height: 16px;
	color: var(--color-secondary);
}

html.lang-fa-active, body.lang-fa-active {
	direction: rtl;
	font-family: var(--font-farsi);
}

html.lang-fa-active .nav-menu,
html.lang-fa-active .footer-links,
html.lang-fa-active .contact-info,
html.lang-fa-active .contact-item-content,
html.lang-fa-active .about-content,
html.lang-fa-active .value-card,
html.lang-fa-active .feature-card,
html.lang-fa-active .about-preview-content,
html.lang-fa-active .form-group,
html.lang-fa-active .footer-brand,
html.lang-fa-active .footer-nav,
html.lang-fa-active .footer-contact,
html.lang-fa-active .footer-legal,
body.lang-fa-active .nav-menu,
body.lang-fa-active .footer-links,
body.lang-fa-active .contact-info,
body.lang-fa-active .contact-item-content,
body.lang-fa-active .about-content,
body.lang-fa-active .value-card,
body.lang-fa-active .feature-card,
body.lang-fa-active .about-preview-content,
body.lang-fa-active .form-group,
body.lang-fa-active .footer-brand,
body.lang-fa-active .footer-nav,
body.lang-fa-active .footer-contact,
body.lang-fa-active .footer-legal {
	direction: rtl;
	text-align: right;
}

html.lang-fa-active .header-inner,
body.lang-fa-active .header-inner {
	flex-direction: row-reverse;
}

html.lang-fa-active .contact-item,
body.lang-fa-active .contact-item {
	flex-direction: row-reverse;
}

html.lang-fa-active .hero-buttons,
body.lang-fa-active .hero-buttons {
	flex-direction: row;
}

html.lang-fa-active .lang-toggle,
body.lang-fa-active .lang-toggle {
	margin-left: 0;
	margin-right: var(--spacing-lg);
}

html.lang-fa-active .value-card,
body.lang-fa-active .value-card {
	border-left: none;
	border-right: 4px solid var(--color-accent);
}

html.lang-fa-active .form-group label,
body.lang-fa-active .form-group label {
	text-align: right;
}

html.lang-fa-active .about-preview-image::before,
body.lang-fa-active .about-preview-image::before {
	left: auto;
	right: -20px;
}

@media (max-width: 768px) {
	html.lang-fa-active .header-inner,
	body.lang-fa-active .header-inner {
		flex-direction: row-reverse;
	}

	html.lang-fa-active .main-navigation,
	body.lang-fa-active .main-navigation {
		right: auto;
		left: -100%;
	}

	html.lang-fa-active .main-navigation.active,
	body.lang-fa-active .main-navigation.active {
		left: 0;
	}

	html.lang-fa-active .nav-menu,
	body.lang-fa-active .nav-menu {
		align-items: flex-end;
	}
}