/* Cloudmaple Product Filters
 * Vse barve, pisava in oblika gumbov so CSS spremenljivke — trgovina jih prepiše
 * brez spreminjanja vtičnika. .cmpf--famm je prednastavitev za fammcommerce.si.
 */

.cmpf,
.cmpf-drawer {
	--cmpf-accent: #2563eb;
	--cmpf-accent-hover: #1d4ed8;
	--cmpf-on-accent: #fff;
	--cmpf-ink: #111827;
	--cmpf-text: #374151;
	--cmpf-muted: #6b7280;
	--cmpf-border: #e5e7eb;
	--cmpf-border-strong: #d1d5db;
	--cmpf-bg: #fff;
	--cmpf-soft: #f9fafb;
	--cmpf-radius: 6px;
	--cmpf-font: inherit;
	--cmpf-btn-size: 15px;
	--cmpf-btn-weight: 500;
	--cmpf-btn-transform: none;
	--cmpf-btn-tracking: 0;
	--cmpf-h: 44px;
	--cmpf-shadow: 0 12px 32px rgba(15, 23, 42, .14);
	--cmpf-z: 40;
	--cmpf-z-drawer: 100010; /* nad skrbniško vrstico (99999) */
}

.cmpf--famm,
.cmpf-drawer.cmpf--famm {
	--cmpf-accent: #F3922E;
	--cmpf-accent-hover: #F1861C;
	--cmpf-on-accent: #fff;
	--cmpf-ink: #0F172A;
	--cmpf-text: #454F5E;
	--cmpf-muted: #6B7280;
	--cmpf-border: #E7E4DE;
	--cmpf-border-strong: #D6D3CC;
	--cmpf-soft: #F6F4F0;
	--cmpf-radius: 0;
	--cmpf-font: "Barlow Condensed", system-ui, sans-serif;
	--cmpf-btn-size: 17px;
	--cmpf-btn-weight: 600;
	--cmpf-btn-transform: uppercase;
	--cmpf-btn-tracking: .5px;
}

/* --- Gostitelj: element strani, v katerem je shortcode, se prilepi pod glavo --- */
.cmpf-sticky-host,
.elementor .e-con.cmpf-sticky-host,
.elementor .cmpf-sticky-host {
	display: block;
	position: sticky;
	top: var(--cmpf-top, 0px);
	z-index: var(--cmpf-z, 40);
}

.cmpf {
	font-family: var(--cmpf-font);
	color: var(--cmpf-text);
	background: var(--cmpf-bg);
	padding: 12px 0 16px;
	display: block;
}

/* Teme strani (Astra, Elementor) oblikujejo vse button/input/select — tu jih ponastavimo. */
.cmpf button,
.cmpf-drawer button {
	box-shadow: none;
	text-decoration: none;
	min-height: 0;
	line-height: 1;
}
.cmpf .cmpf-facet__btn,
.cmpf .cmpf-facet__btn:hover,
.cmpf .cmpf-facet__btn:focus,
.cmpf .cmpf-facet__btn:active,
.cmpf .cmpf-toggle,
.cmpf .cmpf-toggle:hover,
.cmpf .cmpf-toggle:focus,
.cmpf .cmpf-toggle:active,
.cmpf .cmpf-chip,
.cmpf .cmpf-chip:hover,
.cmpf .cmpf-chip:focus,
.cmpf-drawer .cmpf-drawer__clear,
.cmpf-drawer .cmpf-drawer__clear:hover,
.cmpf-drawer .cmpf-drawer__clear:focus {
	background-color: var(--cmpf-bg);
	color: var(--cmpf-ink);
}
.cmpf .cmpf-chip,
.cmpf .cmpf-chip:hover,
.cmpf .cmpf-chip:focus { background-color: var(--cmpf-soft); }
.cmpf .cmpf-clear,
.cmpf .cmpf-clear:hover,
.cmpf .cmpf-clear:focus,
.cmpf-drawer .cmpf-drawer__close,
.cmpf-drawer .cmpf-drawer__close:hover,
.cmpf-drawer .cmpf-drawer__close:focus {
	background: none;
	color: var(--cmpf-ink);
	border: 0;
}
.cmpf .cmpf-search,
.cmpf-drawer .cmpf-search {
	border: 1px solid var(--cmpf-border-strong);
	box-shadow: none;
	outline-offset: 0;
}
.cmpf .cmpf-search:focus,
.cmpf-drawer .cmpf-search:focus { border-color: var(--cmpf-ink); outline: none; }

.cmpf *,
.cmpf-drawer * { box-sizing: border-box; }

.cmpf-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cmpf-facets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Gumbi filtrov --- */
.cmpf-facet { position: relative; }

.cmpf-facet__btn,
.cmpf-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--cmpf-h);
	padding: 0 14px;
	border: 1px solid var(--cmpf-border-strong);
	border-radius: var(--cmpf-radius);
	background: var(--cmpf-bg);
	color: var(--cmpf-ink);
	font: var(--cmpf-btn-weight) var(--cmpf-btn-size)/1 var(--cmpf-font);
	text-transform: var(--cmpf-btn-transform);
	letter-spacing: var(--cmpf-btn-tracking);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
	white-space: nowrap;
}

.cmpf-facet__btn:hover,
.cmpf-toggle:hover { border-color: var(--cmpf-ink); }

.cmpf-facet__btn:focus-visible,
.cmpf-toggle:focus-visible,
.cmpf-chip:focus-visible,
.cmpf-clear:focus-visible,
.cmpf-sort select:focus-visible,
.cmpf-drawer button:focus-visible {
	outline: 2px solid var(--cmpf-accent);
	outline-offset: 2px;
}

.cmpf-facet.is-active .cmpf-facet__btn { border-color: var(--cmpf-ink); }

.cmpf-facet__btn[aria-expanded="true"] .cmpf-icon--chevron { transform: rotate(180deg); }
.cmpf-icon { flex: none; transition: transform .15s ease; }

.cmpf-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--cmpf-radius);
	background: var(--cmpf-accent);
	color: var(--cmpf-on-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
}

/* --- Spustna plošča --- */
.cmpf-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 5;
	width: 260px;
	max-width: calc(100vw - 32px);
	background: var(--cmpf-bg);
	border: 1px solid var(--cmpf-border);
	border-radius: var(--cmpf-radius);
	box-shadow: var(--cmpf-shadow);
	padding: 8px;
}

.cmpf-panel[hidden] { display: none; }
.cmpf-panel.is-right { left: auto; right: 0; }

.cmpf-search {
	width: 100%;
	height: 38px;
	margin: 0 0 6px;
	padding: 0 10px;
	border: 1px solid var(--cmpf-border-strong);
	border-radius: var(--cmpf-radius);
	font: 400 15px/1 var(--cmpf-font);
	color: var(--cmpf-ink);
	background: var(--cmpf-bg);
}

.cmpf-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cmpf-list li { margin: 0; padding: 0; }
.cmpf-list li[hidden] { display: none; }

.cmpf-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 38px;
	padding: 4px 8px;
	border-radius: var(--cmpf-radius);
	cursor: pointer;
	color: var(--cmpf-ink);
	font: 500 16px/1.2 var(--cmpf-font);
}

.cmpf-opt:hover { background: var(--cmpf-soft); }

.cmpf-opt input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	accent-color: var(--cmpf-accent);
	cursor: inherit;
}

.cmpf-opt__label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cmpf-opt__count { color: var(--cmpf-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.cmpf-opt.is-disabled { cursor: default; opacity: .45; }
.cmpf-opt.is-disabled:hover { background: none; }

/* --- Razvrščanje in število --- */
.cmpf-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.cmpf-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 500 15px/1 var(--cmpf-font);
	color: var(--cmpf-muted);
}

.cmpf-sort select {
	height: var(--cmpf-h);
	padding: 0 32px 0 12px;
	border: 1px solid var(--cmpf-border-strong);
	border-radius: var(--cmpf-radius);
	background-color: var(--cmpf-bg);
	color: var(--cmpf-ink);
	font: var(--cmpf-btn-weight) var(--cmpf-btn-size)/1 var(--cmpf-font);
	text-transform: var(--cmpf-btn-transform);
	letter-spacing: var(--cmpf-btn-tracking);
	cursor: pointer;
}

.cmpf-count {
	color: var(--cmpf-muted);
	font: 500 15px/1 var(--cmpf-font);
	white-space: nowrap;
}

.cmpf-count b { color: var(--cmpf-ink); font-weight: 700; }

/* --- Čipi izbranih vrednosti --- */
.cmpf-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.cmpf-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--cmpf-border);
	border-radius: var(--cmpf-radius);
	background: var(--cmpf-soft);
	color: var(--cmpf-ink);
	font: 500 15px/1 var(--cmpf-font);
	cursor: pointer;
}

.cmpf-chip:hover { border-color: var(--cmpf-ink); }
.cmpf-chip__facet { color: var(--cmpf-muted); }
.cmpf-chip__x { margin-left: 4px; font-size: 18px; line-height: 1; }

.cmpf-clear {
	border: 0;
	background: none;
	padding: 0 4px;
	height: 32px;
	color: var(--cmpf-ink);
	font: 600 15px/1 var(--cmpf-font);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* --- Nalaganje --- */
.cmpf-loading {
	opacity: .5;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* --- Namizje / mobilno --- */
.cmpf-toggle { display: none; }

@media (max-width: 1023px) {
	.cmpf { padding: 10px 0; }
	.cmpf-facets { display: none; }
	.cmpf-toggle { display: inline-flex; }
	.cmpf-meta { gap: 10px; }
	.cmpf-sort__label,
	.cmpf-count { display: none; }
	.cmpf-sort select { max-width: 52vw; }
}

/* --- Mobilni predal --- */
.cmpf-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--cmpf-z-drawer);
	font-family: var(--cmpf-font);
	color: var(--cmpf-text);
}

.cmpf-drawer[hidden] { display: none; }

.cmpf-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .5);
}

.cmpf-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--cmpf-bg);
	box-shadow: var(--cmpf-shadow);
	animation: cmpf-in .2s ease-out;
}

@keyframes cmpf-in { from { transform: translateX(24px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.cmpf-drawer__panel { animation: none; }
	.cmpf-icon { transition: none; }
}

.cmpf-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--cmpf-border);
}

.cmpf-drawer__title {
	margin: 0;
	color: var(--cmpf-ink);
	font: 700 22px/1 var(--cmpf-font);
	text-transform: var(--cmpf-btn-transform);
	letter-spacing: var(--cmpf-btn-tracking);
}

.cmpf-drawer__close {
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--cmpf-ink);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.cmpf-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 16px 16px;
}

.cmpf-acc { border-bottom: 1px solid var(--cmpf-border); }

.cmpf-acc > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	list-style: none;
	cursor: pointer;
	color: var(--cmpf-ink);
	font: var(--cmpf-btn-weight) var(--cmpf-btn-size)/1 var(--cmpf-font);
	text-transform: var(--cmpf-btn-transform);
	letter-spacing: var(--cmpf-btn-tracking);
}

.cmpf-acc > summary::-webkit-details-marker { display: none; }
.cmpf-acc > summary .cmpf-icon { margin-left: auto; }
.cmpf-acc[open] > summary .cmpf-icon { transform: rotate(180deg); }

/* V predalu se pomika samo predal: seznam ne sme biti pomični vsebnik, sicer
   overscroll-behavior: contain (iz namiznih plošč) ustavi poteg prstom prek vrednosti. */
.cmpf-acc .cmpf-list {
	max-height: none;
	overflow: visible;
	overscroll-behavior: auto;
	padding-bottom: 10px;
}
.cmpf-acc .cmpf-opt { min-height: 44px; }
.cmpf-acc .cmpf-opt input { width: 22px; height: 22px; }

.cmpf-drawer__foot {
	display: flex;
	gap: 10px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--cmpf-border);
	background: var(--cmpf-bg);
}

.cmpf-drawer__clear,
.cmpf-drawer__apply {
	height: 50px;
	padding: 0 16px;
	border-radius: var(--cmpf-radius);
	font: 600 var(--cmpf-btn-size)/1 var(--cmpf-font);
	text-transform: var(--cmpf-btn-transform);
	letter-spacing: 1px;
	cursor: pointer;
}

.cmpf-drawer__clear {
	flex: 0 0 auto;
	border: 1px solid var(--cmpf-border-strong);
	background: var(--cmpf-bg);
	color: var(--cmpf-ink);
}

.cmpf-drawer__apply {
	flex: 1 1 auto;
	border: 0;
	background: var(--cmpf-accent);
	color: var(--cmpf-on-accent);
}

.cmpf-drawer__apply:hover { background: var(--cmpf-accent-hover); }
.cmpf-drawer__apply[disabled] { opacity: .5; cursor: default; }

html.cmpf-lock,
html.cmpf-lock body { overflow: hidden; }