/* ==========================================================================
   Baliimoti Tweaks
   ========================================================================== */

/**
 * 1. Стрелките в главното меню (x-caret)
 *
 * ПРОБЛЕМ: beyot-framework рисува стрелката като Unicode символ U+203A (›)
 * с `font-family: monospace, tahoma`, завъртян на 90°
 * (beyot-framework/core/xmenu/assets/css/style.css).
 *
 * Firefox не намира символа в избрания шрифт и рисува „кутийка" (tofu),
 * докато Chrome го намира през fallback веригата си. Затова дефектът се
 * виждаше само във Firefox.
 *
 * РЕШЕНИЕ: заменяме символа с чист CSS триъгълник (border trick).
 * Нула зависимост от инсталирани шрифтове → еднакво рендиране навсякъде.
 */

/* --- Главно ниво: стрелка надолу --- */
.x-nav-menu > li.x-menu-item > a > b.x-caret::before {
	content: "" !important;
	display: inline-block !important;
	width: 0 !important;
	height: 0 !important;
	margin-left: 6px;
	border-left: 4px solid transparent !important;
	border-right: 4px solid transparent !important;
	border-top: 5px solid currentColor !important;
	border-bottom: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	vertical-align: middle;
	transform: none !important;
	-webkit-transform: none !important;
}

/* --- Подменюта: стрелка надясно --- */
.x-nav-menu ul.x-sub-menu b.x-caret::before {
	content: "" !important;
	display: inline-block !important;
	width: 0 !important;
	height: 0 !important;
	border-top: 4px solid transparent !important;
	border-bottom: 4px solid transparent !important;
	border-left: 5px solid currentColor !important;
	border-right: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	transform: none !important;
	-webkit-transform: none !important;
}

/* --- Мобилно меню: стрелка надясно, завърта се при отваряне --- */
.x-nav-menu a.x-menu-a-text > b.x-caret::before {
	content: "" !important;
	display: inline-block !important;
	width: 0 !important;
	height: 0 !important;
	border-top: 4px solid transparent !important;
	border-bottom: 4px solid transparent !important;
	border-left: 5px solid currentColor !important;
	border-right: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	vertical-align: middle;
	transition: transform .3s ease;
	-webkit-transform: none !important;
	transform: none !important;
}

.x-nav-menu li.x-menu-item.x-sub-menu-open > a.x-menu-a-text > b.x-caret::before {
	-webkit-transform: rotate(90deg) !important;
	transform: rotate(90deg) !important;
}

/* Демото-остатък: махаме всякакви текстови стрелки, ако framework-ът
   ги добавя и другаде (напр. multi-column подменюта). */
.x-nav-menu li > ul.x-sub-menu-multi-column b.x-caret {
	display: none;
}


/**
 * 2. Стрелките на галерията/слайдера на имота (Owl Carousel)
 *
 * ПРОБЛЕМ: същият като при менюто. Темата стилизира иконите така
 * (themes/g5-beyot/style.css):
 *
 *   .owl-nav .owl-prev i, .owl-nav .owl-next i {
 *     font-family: "Fontawesome";
 *     font-size: 31px;
 *   }
 *
 * Иконата идва от шрифт по име „Fontawesome". Firefox не успява да го
 * резолвне и рисува кутийка (tofu). Chrome се справя през fallback.
 *
 * РЕШЕНИЕ: скриваме глифа (font-size: 0) и рисуваме стрелка с CSS
 * (завъртян квадрат с два бордюра). Цветът идва от currentColor, така че
 * hover-ефектът на темата продължава да работи.
 */

.owl-nav .owl-prev i,
.owl-nav .owl-next i {
	font-family: inherit !important;
	font-size: 0 !important;
	line-height: 0 !important;
	position: relative;
	display: block;
	width: 100%;
	height: 60px; /* колкото е висока стрелката в темата */
}

.owl-nav .owl-prev i::before,
.owl-nav .owl-next i::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -8px 0 0 -8px;
	border-top: 3px solid currentColor;
	border-left: 3px solid currentColor;
	box-sizing: border-box;
}

/* наляво */
.owl-nav .owl-prev i::before {
	transform: rotate(-45deg);
	margin-left: -4px;
}

/* надясно */
.owl-nav .owl-next i::before {
	transform: rotate(135deg);
	margin-left: -10px;
}