/* Alan Languages — header language menu + Arabic/Kurdish typography. */

.alan-lang {
	--alan-gold: #c9a45c;
	--alan-line: rgba(255, 255, 255, 0.28);
	--alan-panel: #0d0d0d;
	--alan-panel-line: rgba(201, 164, 92, 0.35);
	--alan-text: #f4efe6;
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-inline: 18px 10px;
	color: var(--alan-text);
	font-size: 14px;
	line-height: 1;
	z-index: 60;
}

.alan-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 0 16px;
	border: 1px solid var(--alan-line);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.alan-lang__toggle:hover,
.alan-lang.is-open .alan-lang__toggle {
	border-color: var(--alan-gold);
	color: var(--alan-gold);
}

.alan-lang__toggle:focus-visible,
.alan-lang__item:focus-visible {
	outline: 2px solid var(--alan-gold);
	outline-offset: 2px;
}

.alan-lang__globe {
	flex: none;
	opacity: 0.9;
}

.alan-lang__short {
	display: none;
	font-weight: 700;
}

.alan-lang__chev {
	flex: none;
	transition: transform 0.2s ease;
}

.alan-lang.is-open .alan-lang__chev {
	transform: rotate(180deg);
}

.alan-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 190px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--alan-panel);
	border: 1px solid var(--alan-panel-line);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.alan-lang.is-open .alan-lang__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.alan-lang__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.alan-lang__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	padding: 0 14px;
	color: var(--alan-text) !important;
	font-family: inherit;
	font-size: 15px;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.alan-lang__item:hover {
	background: rgba(201, 164, 92, 0.12);
	color: var(--alan-gold) !important;
}

.alan-lang__item.is-current {
	color: var(--alan-gold) !important;
	font-weight: 600;
}

.alan-lang__check {
	visibility: hidden;
}

.alan-lang__item.is-current .alan-lang__check {
	visibility: visible;
}

/* Phones and tablets: the language button joins the header's icon row, as an icon of
   the same weight as the account and cart icons, just inside the menu button. The globe
   carries the language's short code under it, so the current language reads at a glance. */
@media (max-width: 992px) {
	.main-header > .alan-lang {
		position: absolute;
		top: 13px;
		inset-inline-start: 78px;
		margin: 0;
		z-index: 70;
	}

	.alan-lang__toggle {
		flex-direction: column;
		justify-content: center;
		gap: 1px;
		width: 30px;
		height: 44px;
		padding: 0;
		border: 0;
		color: #fff;
	}

	.alan-lang__toggle:hover,
	.alan-lang.is-open .alan-lang__toggle {
		color: var(--alan-gold);
	}

	.alan-lang__name,
	.alan-lang__chev {
		display: none;
	}

	.alan-lang__globe {
		width: 23px;
		height: 23px;
		opacity: 1;
	}

	.alan-lang__short {
		display: block;
		font-size: 10px !important;
		font-weight: 700;
		line-height: 1 !important;
		letter-spacing: 0.02em;
	}

	.alan-lang__menu {
		top: calc(100% + 10px);
		inset-inline-start: 0;
		inset-inline-end: auto;
		min-width: 170px;
	}
}

/* Narrow phones: the centred logo gives the icon row a few pixels so nothing touches. */
@media (max-width: 400px) {
	body[class*="alan-lang-"] .main-header .site-branding img {
		max-width: 112px;
		height: auto;
	}
}

/* Checkout and account checkboxes: the theme leaves room on the left for the box, but in
   Arabic and Kurdish the box sits on the right and covered the first words of the label. */
html[dir="rtl"] .woocommerce-form__label-for-checkbox {
	padding-left: 0 !important;
	padding-right: 24px !important;
}

@media (prefers-reduced-motion: reduce) {
	.alan-lang__toggle,
	.alan-lang__chev,
	.alan-lang__menu,
	.alan-lang__item {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------------
 * Arabic: IBM Plex Sans Arabic. Kurdish: Vazirmatn, which draws ڕ ڵ ێ ۆ well.
 * Both replace the theme's Latin display fonts, which have no Arabic letters.
 * Icon fonts and the rating stars keep their own font.
 * ------------------------------------------------------------------------------ */
body.alan-lang-ar,
body.alan-lang-ar :is(h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, label, input, select, textarea, button, strong, em, small, div, bdi, .elementor-heading-title, .elementor-button-text):not([class*="icon"]):not([class*="fa-"]):not(.star-rating):not(.star-rating *):not(.stars *) {
	font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif !important;
	letter-spacing: 0 !important;
}

body.alan-lang-ckb,
body.alan-lang-ckb :is(h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, label, input, select, textarea, button, strong, em, small, div, bdi, .elementor-heading-title, .elementor-button-text):not([class*="icon"]):not([class*="fa-"]):not(.star-rating):not(.star-rating *):not(.stars *) {
	font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
	letter-spacing: 0 !important;
}

/* Arabic script needs more line height than Latin to breathe. */
body.alan-lang-ar {
	line-height: 1.75;
}

body.alan-lang-ckb {
	line-height: 1.75;
}

body.alan-lang-ar .elementor-heading-title,
body.alan-lang-ar :is(h1, h2, h3, h4, h5, h6) {
	line-height: 1.5;
}

body.alan-lang-ckb .elementor-heading-title {
	line-height: 1.45;
}