/**
 * Mamakupi × OCFilter compatibility layer.
 *
 * The OCFilter templates in
 * catalog/view/theme/default/template/extension/module/ocfilter48/*.twig
 * were edited to carry the SAME classes as the category mock
 * (.mk-category__filter-*, see mamakupi-category.css) alongside the
 * required OCFilter classes/data-attributes (.ocf-*, data-ocf-*),
 * so the mock CSS applies directly.
 *
 * This file only resolves the handful of clashes where OCFilter's own
 * core.css / desktop.css / mobile.css set the SAME property on the SAME
 * element (equal specificity, different class). It is linked in
 * module.twig right after OCFilter's own stylesheet so it always wins
 * the cascade regardless of head/body <link> ordering.
 */

/* Reset the two nesting levels OCFilter adds around the filter list
   (.ocf-content > .ocf-header/.ocf-body) so spacing matches the mock card. */
.mk-category__sidebar .ocf-content {
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important; 
	background-color: transparent !important;
    overflow: visible;
}

.mk-category__sidebar .ocf-header {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 16px 16px 0 !important;
	background-color: white;
    border-radius: 28px 28px 0 0;
}

.mk-category__sidebar .ocf-header .ocf-brand {
	display: none !important;
}

.mk-category__sidebar .ocf-body {
	padding: 0 16px 16px 16px !important;
    max-height: 600px;
    overflow-y: scroll;
    background-color: white;
    border-radius: 0 0 28px 28px;
    direction: rtl;
	overflow-x: hidden;
}
.mk-category__sidebar .ocf-body > * {
    direction: ltr;
}

.mk-category__sidebar .ocf-body::-webkit-scrollbar {
    width: 5px;              
    background: transparent; 
}

.mk-category__sidebar .ocf-body::-webkit-scrollbar-thumb {
    background-color: var(--mk-brand-bg,#d0dd91); 
    border-radius: 999px;     
}

.mk-category__sidebar .ocf-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--mk-brand-text,#5d6c12); 
    cursor: pointer;
}
.mk-category__sidebar .ocf-body::-webkit-scrollbar-button {
    display: none; 
}
/* Elements from OCFilter's header/discard UI that have no mock equivalent —
   keep them in the DOM (JS still writes to / reads them) but hide visually. */
.mk-category__sidebar .ocf-active-label,
.mk-category__sidebar .ocf-filter-discard,
.mk-category__sidebar .ocf-filter-description,
.mk-category__sidebar .ocf-header .ocf-close-mobile {
	display: none !important;
}

/* Accordion group header: cancel OCFilter's own header typography/margins
   so the mock's uppercase small label wins. */
.mk-category__sidebar .ocf-filter-header {
	cursor: pointer !important;
	margin-bottom: 0 !important;
	font-size: 9px !important;
	font-weight: 500 !important;
	line-height: 12px !important;
	text-transform: uppercase !important;
	color: var(--mk-fg-tertiary, #7c7c65) !important;
}

.mk-category__sidebar .ocf-filter-name {
	margin-right: 0 !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

.mk-category__sidebar .ocf-filter {
	margin-bottom: 0 !important;
}

/* Checkbox: OCFilter renders a 16x16 pseudo-checkbox on .ocf-value-input.
   We render a real nested box+SVG (mk-category__filter-checkbox-box) instead,
   sized by the mock CSS — so hide OCFilter's own pseudo box completely. */
.mk-category__sidebar .ocf-value-input {
	width: 32px !important;
	height: 32px !important;
	flex: 0 0 32px !important;
	margin: 0 !important;
}

.mk-category__sidebar .ocf-value-input::before,
.mk-category__sidebar .ocf-value-input::after {
	display: none !important;
}

.mk-category__sidebar .ocf-value {
	margin-bottom: 0 !important;
	color: inherit !important;
}

/* Checked state — OCFilter toggles class "ocf-selected" (not "is-checked"),
   so the mock's ".is-checked" rules need an ".ocf-selected" counterpart. */
.mk-category__sidebar .mk-category__filter-option.ocf-selected .mk-category__filter-checkbox-box {
	border-color: var(--mk-brand-border, #dfe9af);
	background: var(--mk-brand-bg-light, rgba(208, 221, 145, 0.12));
}

.mk-category__sidebar .mk-category__filter-option.ocf-selected .mk-category__filter-checkbox-box svg {
	opacity: 1;
}

.mk-category__sidebar .mk-category__filter-option.ocf-selected .mk-category__filter-option-text {
	color: var(--mk-fg-brand-alt, #889937);
}

.mk-category__sidebar .mk-category__filter-option.ocf-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Colour swatches (brand / manufacturer filters use .ocf-value-color/-image
   instead of a checkbox — style them to match the checkbox hit-area rhythm) */
.mk-category__sidebar .mk-category__filter-swatch {
	width: 24px;
	height: 24px;
	margin: 0 8px 0 4px;
	border-radius: 50%;
	border: 1px solid var(--mk-border, #e8e8e3);
	background-size: cover;
	flex-shrink: 0;
}

.mk-category__sidebar .mk-category__filter-option.ocf-selected .mk-category__filter-swatch {
	box-shadow: 0 0 0 2px var(--mk-white, #fff), 0 0 0 3px var(--mk-brand-border, #dfe9af);
}

/* Value count badge */
.mk-category__sidebar .ocf-value-count {
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--mk-border-tertiary, #f4f4f0);
	font-size: 11px;
	font-weight: 500;
	color: var(--mk-fg-tertiary, #7c7c65);
}

/* Scrollable long value lists — drop OCFilter's default fade background,
   keep only a slim scrollbar */
.mk-category__sidebar .ocf-scroll-y {
	margin-right: 0 !important;
	padding-right: 0 !important;
	max-height: 220px;
	background-color: transparent !important;
	background-image: none !important;
}

.mk-category__sidebar .ocf-btn-show-values,
.mk-category__sidebar .ocf-btn-show-filters {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--mk-fg-brand-alt, #889937);
	font-size: 13px;
	font-weight: 500;
}

/* Price / range slider colours */
.mk-category__sidebar .ocf-noUi-base:before,
.mk-category__sidebar .ocf-noUi-connects:before,
.mk-category__sidebar .ocf-noUi-connects:after {
	background-color: var(--mk-border, #e8e8e3) !important;
}

.mk-category__sidebar .ocf-noUi-connect:before,
.mk-category__sidebar .ocf-noUi-handle {
	background-color: var(--mk-fg-brand-alt, #889937) !important;
}

.mk-category__sidebar .ocf-noUi-active {
	box-shadow: 0 0 0 6px rgba(136, 153, 55, 0.2) !important;
}

/* Selected filters chips (above the accordion) */
.mk-category__sidebar .ocf-selected-card {
	margin: 0 0 12px !important;
	padding: 12px !important;
	background: var(--mk-border-tertiary, #f4f4f0) !important;
	border-radius: 16px !important;
	box-shadow: none !important;
}

.mk-category__sidebar .ocf-selected-header {
	margin: 0 0 8px;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mk-fg-tertiary, #7c7c65);
}

.mk-category__sidebar .ocf-selected-filter {
	background: var(--mk-white, #fff) !important;
	border-radius: 999px !important;
	margin-bottom: 6px;
}

/* SEO page links block */
.mk-category__sidebar .ocf-module-page {
	margin: 0 0 12px !important;
	padding: 12px !important;
	border: 0 !important;
	border-radius: 16px !important;
	background: var(--mk-border-tertiary, #f4f4f0) !important;
	box-shadow: none !important;
}

/* Actions footer (Reset / Apply) — reuse mock card look, keep dynamic text */
.mk-category__sidebar .ocf-footer {
	position: static !important;
	margin: 12px 0 0 0 !important;
	padding: 16px !important;
	background: var(--mk-white, #fff) !important;
	border-radius: 28px !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}

.mk-category__sidebar .ocf-footer::after {
	display: none !important;
}

.mk-category__sidebar .ocf-footer .ocf-between {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.mk-category__sidebar .ocf-footer .ocf-btn-link.mk-category__filter-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 8px !important;
	border: 1px solid var(--mk-border, #e8e8e3) !important;
	border-radius: 999px !important;
	background: var(--mk-white, #fff) !important;
	color: var(--mk-fg-secondary, #5b5b49) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	flex-shrink: 0;
	cursor: pointer;
}

.mk-category__sidebar .ocf-footer .ocf-btn-link.mk-category__filter-reset.ocf-disabled {
	opacity: 0.45;
	cursor: default;
}

.mk-category__sidebar .ocf-footer .ocf-btn-link.mk-category__filter-reset svg {
	width: 18px;
	height: 18px;
	display: block;
}

.mk-category__sidebar .ocf-footer .ocf-btn-block {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 8px 14px !important;
	border: 2px solid var(--mk-white, #fff) !important;
	border-radius: 20px !important;
	background: var(--mk-brand-bg, #d0dd91) !important;
	color: var(--mk-fg-brand, #465400) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

.mk-category__sidebar .ocf-footer .ocf-btn-block.ocf-disabled {
	opacity: 0.55;
}

/* OCFilter's own fixed mobile trigger button — we use our theme's
   .mk-category__filter-toggle instead, so hide OCFilter's copy. */
.mk-category__sidebar .ocf-btn-mobile-fixed,
.ocf-btn-mobile-fixed {
	display: none !important;
}

@media (max-width: 991px) {
	.mk-category__sidebar .ocf-body {
		max-height: 60vh;
	}

	/* Floating "Apply" popover — not needed in the filter overlay;
	   footer already has Застосувати / reset. */
	.ocf-popover {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
		opacity: 0 !important;
	}
}

/* ≤767px: OCFilter wraps mobile.css (absolute body/footer for its own
   full-screen drawer). Our filter lives inside .mk-category__sidebar
   overlay instead — neutralize that drawer layout so cards stack normally. */
@media (max-width: 767px) {
	/* Make .ocf-is-mobile detectable for OCFilter.isMobile() —
	   core.css keeps height:0 so jQuery :visible stays false and the
	   apply popover keeps firing on mobile. */
	.mk-category__sidebar .ocf-is-mobile {
		display: block !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		position: absolute !important;
		left: 0;
		top: 0;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* OCFilter parks #column-left off-screen (top/left -100%) for its drawer.
	   Keep it in normal flow inside our overlay. */
	.mk-category__sidebar #column-left,
	.mk-category__sidebar #column-left-grid,
	.mk-category__sidebar #column-right,
	.mk-category__sidebar #column-right-grid {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		z-index: auto !important;
		width: 100% !important;
		float: none !important;
		text-indent: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		overflow: visible !important;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
	}

	.mk-category__sidebar .ocf-container,
	.mk-category__sidebar.is-open .ocf-container {
		position: static !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		width: 100% !important;
		height: auto !important;
		transform: none !important;
		box-shadow: none !important;
		z-index: auto !important;
	}

	.mk-category__sidebar .ocf-content {
		position: static !important;
		height: auto !important;
		top: auto !important;
		left: auto !important;
	}

	.mk-category__sidebar .ocf-body {
		position: static !important;
		top: auto !important;
		bottom: auto !important;
		width: auto !important;
		z-index: auto !important;
	}

	.mk-category__sidebar .ocf-body > .ocf-filter-list {
		height: auto !important;
		overflow: visible !important;
		padding-bottom: 0 !important;
	}

	.mk-category__sidebar .ocf-footer {
		bottom: auto !important;
		width: auto !important;
		z-index: auto !important;
	}

	.ocf-theme-light .ocf-filter.ocf-active {
		background-color: transparent !important;
	}
}