/* ------------------------------------- */
/* КАРТОЧКА - КНОПКИ, ФИЛЬТР и НАВИГАЦИЯ */
/* ------------------------------------- */

/* ----------------- */
/* ЖЫЛДАМ БАПТАУЛАР */
/* ----------------- */

/* Тышқанмен апарғанда карточка көлеңкесін алып тастау */
.folders-row .col-lg-3 > a[href*="wpm-category/button-"][class*="folder-wrap"]:hover {
	filter: none;
	-webkit-filter: none;
}

/* Егер эмодзи қойылса – оның орнын түзету */
.folders-row a[href*="wpm-category/button-"][class*="folder-wrap"] .emoji {
    top: 3px;
    position: relative;
}

/* Карточканың рамкасы мен көлеңкесін алып тастау */
.folders-row a[href*="wpm-category/button-"][class*="folder-wrap"] {
	border: none;
	box-shadow: none;
	border-radius: 50px;
	text-align: center;
	background: none;
}

/* Ішкі контентті жасыру */
.folders-row a[href*="wpm-category/button-"] .folder-content {
	display: none;
}

/* Үлкен экрандар үшін */
@media (min-width: 768px) {
	.col-lg-3:has(a[href*="wpm-category/button-"][class*="folder-wrap"]) {
		display: block!important;
		width: auto!important;
		z-index: 498!important;
		padding: 0;
		margin-left: 15px;
		margin-right: var(--right-button);
	}
}

/* Кіші экрандар үшін */
@media (min-width: 320px) and (max-width: 767px) {
	.col-lg-3:has(a[href*="wpm-category/button-"][class*="folder-wrap"]) {
		display: block!important;
		width: 100%!important;
		z-index: 498!important;
	}
}

/* Карточка биіктігі */
.folders-row a[href*="wpm-category/button-"][class*="folder-wrap"] {
	height: 48.8px!important;
}

/* Фондық суретті алып тастау */
.folders-row a[href*="wpm-category/button-"] .folder-front,
.folders-row a[href*="wpm-category/button-"] .folder-sub-front {
	display: none!important;
}

/* -------------------------------------- */
/* ДИЗАЙН 1 – Бастапқы түспен */
.folders-row a[href*="wpm-category/button-"] .label {
	position: relative;
	border-radius: 50px;
	font-size: 19px;
	max-width: 100%;
    top: 14px;
	text-transform: none;
	padding: 12px 20px;
	line-height: 1;
	transition: all var(--speed-all-effects-button-card) ease-out;
}

.folders-row a[href*="wpm-category/button-"] .label:hover {
	box-shadow: inset 0 0 0 10em rgb(255 255 255 / 20%);
	transition: all var(--speed-all-effects-button-card) ease-out;
}

.folders-row a[href*="wpm-category/button-active-"] .label {
    background: var(--bg-button-active)!important;
    color: var(--color-button-active)!important;
	border-radius: 12px;
}

.folders-row a[href*="wpm-category/button-active-"][class*="folder-wrap"] {
	cursor: default;
    pointer-events: none;
}

/* -------------------------------------- */
/* ДИЗАЙН 2 – Бір түсті фонмен */
.folders-row a[href*="wpm-category/button-one-color-"] .label {
    background: var(--bg-button-one-color)!important;
    color: var(--color-button-one-color)!important;
	border-radius: 50px;
}

.folders-row a[href*="wpm-category/button-one-color-"] .label:hover {
	background: var(--bg-hover-button-one-color)!important;
    color: var(--color-hover-button-one-color)!important;
	box-shadow: none;
}

.folders-row a[href*="wpm-category/button-one-color-active-"] .label {
    background: var(--bg-button-one-color-active)!important;
    color: var(--color-button-one-color-active)!important;
	border-radius: 50px;
}

.folders-row a[href*="wpm-category/button-one-color-active-"][class*="folder-wrap"] {
	cursor: default;
    pointer-events: none;
}

/* -------------------------------------- */
/* ДИЗАЙН 3 – Фонсыз сілтеме */
.folders-row a[href*="wpm-category/button-no-bg-"] .label {
    background: none!important;
	color: var(--color-button-no-bg)!important;
	border-radius: 50px;
}

.folders-row a[href*="wpm-category/button-no-bg-"] .label:hover {
    border-bottom: 3px solid var(--line-hover-button-no-bg);
	color: var(--color-hover-button-no-bg)!important;
	padding: 12px 20px 9px 20px;
	border-radius: 50px;
	box-shadow: none;
}

.folders-row a[href*="wpm-category/button-no-bg-active-"] .label {
    background: none!important;
    color: var(--color-button-no-bg-active)!important;
	font-size: 19px;
	top: 14px;
	border-bottom: 3px solid var(--line-button-no-bg-active);
    padding: 12px 20px 9px 20px;
	border-radius: 50px;
}

.folders-row a[href*="wpm-category/button-no-bg-active-"][class*="folder-wrap"] {
	cursor: default;
    pointer-events: none;
}

/* --------------------------------- */
/* Мобильдіде мәтін өлшемі */
@media (min-width: 320px) and (max-width: 767px) {
	.folders-row a[href*="wpm-category/button-"] .label {   
		/* font-size: 25px; */
	}
}

/* Түймені солға бағыттау */
.folders-row a[href*="wpm-category/button-"] .label {
    left: 0px;
}

/* Анимацияларды алып тастау */
.folders-row a[href*="wpm-category/button-"]:hover .folder-sub-front pattern image,
.folders-row a[href*="wpm-category/button-"]:hover .folder-front pattern image {
	filter: none;
	-webkit-filter: none;
}

/* ============================================ */
/* БАТЫРМАЛАРДЫ ОРТАҒА (ЦЕНТРГЕ) ОРНАЛАСТЫРУ    */
/* ============================================ */

/* 1) Қатарды флекс етіп, толық енге жаю, орталыққа тарту.
      text-align:center қолданамыз (бұл нақты жұмыс істейтін әдіс), бірақ
      бұл бір .folders-row ішінде жатқан БАСҚА папкалардың (курс
      карточкаларының) атауына да мұра болатындықтан, төмендегі 2-ережеде
      сол папкаларға арнайы text-align:left қайтарамыз. */
.folders-row.folders-row:has(a[href*="wpm-category/button-"][class*="folder-wrap"]) {
	display: flex!important;
	flex-flow: row wrap!important;
	justify-content: center!important;
	align-items: center!important;
	float: none!important;
	width: 100%!important;
	text-align: center!important;
}

/* Банер мен батырмалар арасындағы бос орынды азайту.
   html body префиксі арқылы specificity күшейтілді, себебі компьютер
   нұсқасында (үлкен экран) басқа, күштірек ереже margin-top-ты
   қайта үлкейтіп жіберіп тұрған көрінеді.
   Керек болса, мына мәнді (10px) өзгертіп көріңіз (0px, 20px, т.б.). */
html body .folders-row.folders-row:has(a[href*="wpm-category/button-"][class*="folder-wrap"]) {
	margin-top: 0px!important;
	padding-top: 0!important;
}

@media (min-width: 768px) {
	html body .folders-row.folders-row:has(a[href*="wpm-category/button-"][class*="folder-wrap"]) {
		margin-top: 0px!important;
		padding-top: 0!important;
	}
}

/* 2) Батырма ЕМЕС (яғни курс) папкаларының атауын жоғарыдағы
      text-align:center мұрагерлігінен қорғап, бастапқы (сол жақ)
      тураланымен қалдыру. Егер курс карточкаларының атауы бастапқыда
      ОРТАДА болған болса, "left" сөзін "center" деп ауыстырыңыз. */
.folders-row.folders-row a[class*="folder-wrap"]:not([href*="wpm-category/button-"]) {
	text-align: left!important;
}

/* 2) Колонналарды бір жолда, өз контент енімен орналастыру – ТЕК ҮЛКЕН
      ЭКРАНДА (768px және одан жоғары). Мобильдіде (767px және төмен)
      ЖОҒАРЫДАҒЫ "Кіші экрандар үшін" блогындағы width:100% қолданылады,
      сондықтан батырмалар бірінің астына бірі тұрады. */
@media (min-width: 768px) {
	.folders-row.folders-row .col-lg-3.col-lg-3:has(a[href*="wpm-category/button-"][class*="folder-wrap"]) {
		flex: 0 0 auto!important;
		width: auto!important;
		max-width: none!important;
		float: none!important;
		display: inline-flex!important;
		vertical-align: top!important;
	}
}