/**
 * MB Çikolata — dil değiştirici artık üst menüye ("Ust-menu"/primary) gömülü bir öğe
 * (GTranslate'in kendi native "show_in_menu" özelliği, bkz. frontend-shop.php'deki
 * GTranslate option güncellemesi), eskisi gibi ekranın sol altında yüzen ayrı bir widget
 * değil. Mobil açılır menüde (off-canvas, .navbar-mobile class'ı eklendiğinde) temanın
 * kendi .menu-item-has-children / .sub-menu stilleri zaten düzgün uygulanıyor — hiç ek
 * CSS gerekmedi. Ama masaüstü yatay barda bu site "navbar-desktop" değil
 * "navbar-mobile-black" adlı bir tema varyantı kullanıyor, ve temanın hazır açılır-menü
 * (dropdown) tasarımı sadece ".navbar-desktop" için yazılmış — bu varyant için hiç
 * karşılığı yok, o yüzden tarayıcının/Bootstrap'ın düz beyaz kutusu görünüyordu. Bu
 * dosya sadece o masaüstü kutusunu marka renklerine göre yeniden giydiriyor.
 */

/**
 * Mobile off-canvas menu: the flag <img> and the "TR" <span> stacked onto two lines
 * instead of sitting side by side. Root cause (confirmed via computed style, not
 * guessed): the theme's own nav CSS sets the text <span> inside a top-level nav link to
 * `display:block` (built for its own hover-underline animation on plain text links —
 * see the ...sub-menu li a span:after rules in style.css) — it just doesn't expect a
 * link to also contain a leading <img> the way GTranslate's "flags_code" look renders
 * (`<a><img>…</a> <span>TR</span></a>`). The flag <img> itself was already correctly
 * inline; only the span needed overriding back to inline. Desktop wasn't affected
 * (unscoped here — harmless there too) since its layout already kept them on one line
 * some other way.
 */
.menu-item-gtranslate > a.gt-current-wrapper span {
	display: inline !important;
	vertical-align: middle;
	margin-left: 4px;
}

@media (min-width: 1200px) {
	/* !important throughout: this dropdown's real markup (<ul class="dropdown-menu
	   sub-menu">) matches Bootstrap's own .dropdown-menu component rule bundled in the
	   theme's plugins.css (white bg, 8px 0 padding, min-width:10rem — confirmed via
	   computed style, not guessed) at equal-or-competing specificity to a plain class
	   override; without !important, background/padding kept losing to it even though
	   border/min-width happened to win, so the fix couldn't be "just add more classes." */
	.lte-ul-nav > li.menu-item-gtranslate > .dropdown-menu.sub-menu {
		background: #1b120d !important;
		border: 1px solid #c19f5f !important;
		border-radius: 6px !important;
		padding: 6px 0 !important;
		min-width: 100px !important;
		margin-top: 10px !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
	}

	.lte-ul-nav > li.menu-item-gtranslate .menu-item-gtranslate-child > a {
		display: block !important;
		padding: 7px 18px !important;
		font-family: 'Mulish', Arial, sans-serif !important;
		font-size: 12px !important;
		letter-spacing: 0.5px !important;
		color: #d9d1c7 !important;
		text-decoration: none !important;
		white-space: nowrap !important;
	}

	.lte-ul-nav > li.menu-item-gtranslate .menu-item-gtranslate-child > a:hover {
		background: rgba(193, 159, 95, 0.15) !important;
		color: #c19f5f !important;
	}

	.lte-ul-nav > li.menu-item-gtranslate > a.gt-current-wrapper {
		cursor: pointer;
	}
}