/**
 * EcoFridge Select (eco-select)
 *
 * Custom dropdown skin για native <select>. Εφαρμόζεται αυτόματα στο sorting
 * του Filter Everything (select.wpc-orderby-select) και σε οποιοδήποτε select
 * έχει την κλάση "eco-select".
 *
 * Όλα τα χρώματα/μεγέθη είναι CSS variables στο .eco-select-ui, ώστε να
 * αλλάζουν ανά σημείο χωρίς νέο CSS, π.χ. από Elementor Custom CSS:
 *   selector .eco-select-ui { --eco-select-bg: #00A8DA; --eco-select-color: #fff; }
 */

.eco-select-ui {
	/* Trigger (κλειστή κατάσταση), ίδιες διαστάσεις με το κουμπί "Φίλτρα" */
	--eco-select-font: Roboto, sans-serif;
	--eco-select-font-size: 15px;
	--eco-select-bg: #ffffff;
	--eco-select-color: #201D1D;
	--eco-select-hover-color: #004E6C;
	--eco-select-accent: #00A8DA;
	--eco-select-radius: 30px;
	--eco-select-padding: 12px 20px 12px 24px;
	--eco-select-min-width: 210px;

	/* Panel (ανοιχτή λίστα) */
	--eco-select-panel-bg: #ffffff;
	--eco-select-panel-radius: 16px;
	--eco-select-panel-shadow: 0 12px 32px rgba(32, 29, 29, 0.12), 0 2px 6px rgba(32, 29, 29, 0.06);
	--eco-select-option-radius: 10px;
	--eco-select-option-hover-bg: #F2F3F4;

	position: relative;
	display: inline-block;
	min-width: var(--eco-select-min-width);
	max-width: 100%;
	font-family: var(--eco-select-font);
	font-size: var(--eco-select-font-size);
	line-height: 1;
	vertical-align: middle;
	text-align: left;
}

/* Το native select μένει στο DOM (το Filter Everything το χρειάζεται), απλώς κρύβεται οπτικά */
select.eco-select-enhanced {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Elementor flex containers: το widget που περιέχει το dropdown να μην στενεύει
   κάτω από το πλάτος του κουμπιού (αλλιώς το κουμπί βγαίνει έξω από το container).
   Π.χ. στο shop η στήλη του sort στένευε στα 180px ενώ το κουμπί είναι 210px. */
.e-con > .elementor-element:has(.eco-select-ui),
.e-con-inner > .elementor-element:has(.eco-select-ui) {
	flex-shrink: 0;
}

/* Το Filter Everything βάζει Select2 σε Chrome/Firefox (όχι σε desktop Safari).
   Το κρύβουμε ώστε να φαίνεται μόνο το δικό μας UI, ίδιο σε όλους τους browsers.
   Ο κανόνας ισχύει και αν το Select2 ξαναστηθεί αργότερα. */
select.eco-select-enhanced + .select2-container,
select.eco-select-enhanced ~ .select2-container {
	display: none !important;
}

/* ── Trigger ─────────────────────────────────────────────────────────────── */
.eco-select-ui .eco-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: var(--eco-select-padding);
	background: var(--eco-select-bg);
	color: var(--eco-select-color);
	border: 0;
	border-radius: var(--eco-select-radius);
	box-shadow: none;
	font: inherit;
	font-weight: 400;
	line-height: 15px;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: color .3s, box-shadow .3s, background-color .3s;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.eco-select-ui .eco-select-trigger:hover,
.eco-select-ui.is-open .eco-select-trigger {
	background: var(--eco-select-bg);
	color: var(--eco-select-hover-color);
}

.eco-select-ui .eco-select-trigger:focus {
	outline: none;
	background: var(--eco-select-bg);
}

.eco-select-ui .eco-select-trigger:focus-visible {
	box-shadow: 0 0 0 2px var(--eco-select-accent);
}

.eco-select-ui .eco-select-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eco-select-ui .eco-select-chevron {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	transition: transform .25s ease;
}

.eco-select-ui.is-open .eco-select-chevron {
	transform: rotate(180deg);
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.eco-select-ui .eco-select-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 999;
	min-width: 100%;
	max-height: 320px;
	margin: 0;
	padding: 8px;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	background: var(--eco-select-panel-bg);
	border-radius: var(--eco-select-panel-radius);
	box-shadow: var(--eco-select-panel-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.eco-select-ui.is-open .eco-select-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* Αν δεν χωράει δεξιά, στοιχίζεται στη δεξιά άκρη του κουμπιού */
.eco-select-ui.is-align-right .eco-select-panel {
	left: auto;
	right: 0;
}

/* Αν δεν χωράει από κάτω, ανοίγει προς τα πάνω */
.eco-select-ui.is-drop-up .eco-select-panel {
	top: auto;
	bottom: calc(100% + 8px);
	transform: translateY(4px);
}
.eco-select-ui.is-drop-up.is-open .eco-select-panel {
	transform: translateY(0);
}

/* ── Options ─────────────────────────────────────────────────────────────── */
.eco-select-ui .eco-select-option {
	display: block;
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--eco-select-option-radius);
	color: var(--eco-select-color);
	font-size: var(--eco-select-font-size);
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: background-color .15s, color .15s;
}

.eco-select-ui .eco-select-option.is-active {
	background: var(--eco-select-option-hover-bg);
}

.eco-select-ui .eco-select-option[aria-selected="true"] {
	color: var(--eco-select-accent);
	font-weight: 500;
}

.eco-select-ui .eco-select-option[aria-disabled="true"] {
	opacity: .45;
	cursor: not-allowed;
	background: transparent;
}

/* Κινητά: η λίστα δεν βγαίνει ποτέ έξω από την οθόνη, τα μεγάλα labels σπάνε σε 2 γραμμές */
@media (max-width: 767px) {
	.eco-select-ui .eco-select-panel {
		max-width: calc(100vw - 32px);
	}
	.eco-select-ui .eco-select-option {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eco-select-ui .eco-select-panel,
	.eco-select-ui .eco-select-chevron {
		transition: none;
	}
}