/* =====================================================================
   El Unico - filtre (Mega Filter) - desktop + panou mobil
   JS: catalog/view/javascript/eu-filters.js
   Paleta: --color-ochre (#c08839), --color-black (#212121), gri coloana #f7f7f7
   ===================================================================== */

/* ---------- COLOANA DESKTOP ---------- */

.mfilter-box .mfilter-heading {
	padding: 4px 0;
	cursor: pointer;
}

.mfilter-box .mfilter-heading-text > span {
	font-weight: 600;
	letter-spacing: .2px;
}

/* numarul de filtre active din grup, langa titlu */
.mfilter-heading-text .eu-head-count {
	display: inline-block;
	min-width: 18px;
	height: 18px;
	margin-left: 8px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--color-ochre);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	vertical-align: 1px;
}

/* randuri de optiuni: fara linii punctate, hover discret */
.mfilter-box .mfilter-tb-as-td {
	border-top: none;
	padding: 6px 0;
}

.mfilter-box .mfilter-options .mfilter-option {
	transition: background .15s ease;
}

.mfilter-box .mfilter-col-input {
	width: 26px;
	padding-right: 0;
}

.mfilter-box .mfilter-options .mfilter-option:hover label {
	color: var(--color-ochre);
}

.mfilter-box label.mfilter-tb-as-td {
	word-break: normal;
	font-size: 14px;
	color: var(--color-black);
	cursor: pointer;
	transition: color .15s ease;
}

.mfilter-box .mfilter-input-active label.mfilter-tb-as-td {
	font-weight: 600;
}

.mfilter-box .mfilter-disabled label.mfilter-tb-as-td {
	color: #b3b3b3;
}

/* numar produse: text gri simplu, in loc de eticheta neagra cu sageata */
.mfilter-box .mfilter-counter {
	float: none;
	display: inline-block;
	padding: 0;
	background: none !important;
	color: #9a9a9a;
	font-size: 12px;
	line-height: 20px;
	border-radius: 0;
}

.mfilter-box .mfilter-counter:after,
.mfilter-box .mfilter-counter:before {
	display: none !important;
}

.mfilter-box .mfilter-col-count {
	text-align: right;
	white-space: nowrap;
}

/* X-ul de deselectare (inlocuieste iconita rosie) */
.mfilter-box .mfilter-counter.mfilter-close {
	width: 20px;
	height: 20px;
	background: none !important;
	text-indent: 0;
	font-size: 0;
	text-align: center;
	cursor: pointer;
}

.mfilter-box .mfilter-counter.mfilter-close:before {
	content: "\00d7";
	display: inline-block !important;
	position: static;
	border: 0;
	width: auto;
	height: auto;
	font-size: 18px;
	line-height: 20px;
	color: var(--color-ochre);
}

.mfilter-box .mfilter-counter.mfilter-close:hover:before {
	color: var(--color-black);
}

/* "Arata mai mult (N)" */
.mfilter-box div.mfilter-button-more {
	border-top: none;
	padding: 4px 0 8px;
}

.mfilter-box a.mfilter-button-more {
	color: var(--color-ochre);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.mfilter-box a.mfilter-button-more:hover {
	color: var(--color-black);
}

/* pret: campuri rotunjite + slider in culorile site-ului */
.mfilter-box .mfilter-price-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #9a9a9a;
	font-size: 13px;
	padding: 6px 0 4px;
}

.mfilter-box #mfilter-opts-price-min,
.mfilter-box #mfilter-opts-price-max {
	width: 76px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	color: var(--color-black);
	font-size: 14px;
	text-align: center;
	box-shadow: none;
	outline: none;
}

.mfilter-box #mfilter-opts-price-min:focus,
.mfilter-box #mfilter-opts-price-max:focus {
	border-color: var(--color-ochre);
}

/* stilul modulului (style.css) foloseste imagini + !important, de aici !important */
.mfilter-box .mfilter-price-slider {
	padding: 12px 10px 10px 10px !important;
	margin-right: 0 !important;
	background: none !important;
}

.mfilter-box #mfilter-price-slider {
	height: 4px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #e2ddd5 !important;
}

.mfilter-box #mfilter-price-slider .ui-slider-range {
	height: 4px !important;
	background: var(--color-ochre) !important;
}

.mfilter-box #mfilter-price-slider .ui-slider-handle {
	top: -7px !important;
	width: 18px !important;
	height: 18px !important;
	margin-left: -9px !important;
	border: 2px solid var(--color-ochre) !important;
	border-radius: 50% !important;
	background: #fff !important;
	cursor: grab !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	font-size: 0;
	color: transparent;
	text-decoration: none;
}

.mfilter-box #mfilter-price-slider .ui-slider-handle:focus,
.mfilter-box #mfilter-price-slider .ui-slider-handle.ui-state-active {
	outline: none !important;
	box-shadow: 0 0 0 5px rgba(192, 136, 57, .2);
}

/* ---------- BARA FILTRE ACTIVE (peste lista de produse) ---------- */

.eu-filterbar {
	display: none;
}

.eu-filterbar.eu-has-filters {
	display: block;
	margin: 0 0 14px;
}

.eu-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.eu-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px 6px 14px;
	border: 1px solid var(--color-ochre);
	border-radius: 999px;
	background: #fff;
	color: var(--color-black);
	font-size: 13px;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.eu-chip-group {
	color: #9a9a9a;
}

.eu-chip-x {
	font-style: normal;
	font-size: 17px;
	line-height: 1;
	margin-left: 4px;
	color: var(--color-ochre);
}

.eu-chip:hover,
.eu-chip:focus {
	background: var(--color-black);
	border-color: var(--color-black);
	color: #fff;
	outline: none;
}

.eu-chip:hover .eu-chip-group,
.eu-chip:hover .eu-chip-x {
	color: rgba(255, 255, 255, .7);
}

.eu-chip-clear {
	padding: 6px 4px;
	border: 0;
	background: none;
	color: var(--color-black);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.eu-chip-clear:hover {
	color: var(--color-ochre);
}

/* butonul "Filtreaza" exista doar cand coloana e ascunsa (<= 980px, vezi style-2.css) */
.eu-filter-toggle {
	display: none;
}

/* ---------- MOBIL / TABLETA ---------- */

@media (max-width: 980px) {
	.eu-filterbar,
	.eu-filterbar.eu-has-filters {
		display: block;
		margin: 14px 0 12px;
	}

	.eu-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		height: 46px;
		border: 0;
		border-radius: 999px;
		background: var(--color-black);
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: .3px;
		cursor: pointer;
	}

	.eu-filter-toggle i {
		color: var(--color-ochre);
	}

	.eu-filter-count:empty {
		display: none;
	}

	.eu-filter-count {
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 999px;
		background: var(--color-ochre);
		color: #fff;
		font-size: 12px;
		line-height: 22px;
		text-align: center;
	}

	/* #content e element flex in .row: fara min-width:0 se latea dupa etichete si iesea din ecran */
	#content {
		min-width: 0;
	}

	/* etichetele active trec pe randul urmator, ca sa se vada toate */
	.eu-active-filters {
		margin-top: 10px;
	}

	.eu-active-filters:empty {
		display: none;
	}

	.eu-chip {
		max-width: 100%;
		white-space: normal;
		text-align: left;
	}

	/* panoul lateral (containerul creat de Mega Filter) */
	.mfilter-free-container.eu-drawer {
		top: 0 !important;
		left: 0;
		width: 88vw !important;
		max-width: 380px;
		height: 100% !important;
		margin-left: -110vw;
		padding: 60px 0 78px !important;
		border: 0 !important;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 40px rgba(0, 0, 0, .35);
		z-index: 2147483001 !important;
	}

	.mfilter-free-container.eu-drawer .mfilter-free-button {
		display: none !important;
	}

	.mfilter-free-container.eu-drawer > div[id^="mfilter-free-container-"] {
		height: 100% !important;
		max-height: none !important;
	}

	.mfilter-free-container.eu-drawer .mfilter-box {
		margin: 0;
		padding: 4px 18px 16px;
	}

	.eu-drawer-head {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60px;
		padding: 0 10px 0 20px;
		background: var(--color-black);
		color: #fff;
		z-index: 2;
	}

	.eu-drawer-title {
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	.eu-drawer-close {
		width: 44px;
		height: 44px;
		border: 0;
		background: none;
		color: var(--color-ochre);
		font-size: 32px;
		line-height: 1;
		cursor: pointer;
	}

	.eu-drawer-foot {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 78px;
		padding: 0 16px;
		border-top: 1px solid #eee;
		background: #fff;
		z-index: 2;
	}

	.eu-drawer-reset {
		flex: 0 0 auto;
		padding: 0 6px;
		border: 0;
		background: none;
		color: var(--color-black);
		font-size: 14px;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
	}

	.eu-drawer-apply {
		flex: 1 1 auto;
		height: 48px;
		border: 0;
		border-radius: 999px;
		background: var(--color-black);
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
	}

	.eu-drawer-apply:active {
		background: var(--color-ochre);
	}

	/* fundal intunecat peste pagina */
	.eu-drawer-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .55);
		z-index: 2147483000;
	}

	body.eu-filters-open {
		overflow: hidden;
	}

	body.eu-filters-open .eu-drawer-overlay {
		display: block;
	}

	/* zone de atingere mai mari in panou */
	.eu-drawer .mfilter-heading {
		padding: 10px 0;
	}

	.eu-drawer .mfilter-heading-text > span {
		font-size: 15px;
	}

	.eu-drawer .mfilter-tb-as-td {
		padding: 10px 0;
	}

	.eu-drawer label.mfilter-tb-as-td {
		font-size: 15px;
	}

	.eu-drawer .mfilter-option input[type="checkbox"],
	.eu-drawer .mfilter-option input[type="radio"] {
		width: 20px;
		height: 20px;
	}

	.eu-drawer .mfilter-col-input {
		width: 30px;
	}

	/* sortarea pe mobil: pe toata latimea, sub butonul Filtreaza */
	.product-filter .sort,
	.product-filter .sort .input-group {
		width: 100%;
	}

	.product-filter .sort select.form-control {
		flex: 1 1 auto;
		width: 100%;
	}
}