/*
 * Cawipa Piattaforme — stili griglia e filtri
 * Sviluppato da Lorenzo Lupi per Cawipa Elise (www.cawipa.com)
 */

.selift-piatt-wrapper {
	position: relative;
}

/* ---------- Griglia ---------- */

.selift-piatt-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 28px 24px;
	margin: 0 0 24px;
	list-style: none;
	padding: 0;
}

.selift-piatt-grid.selift-piatt-cols-2 {
	grid-template-columns: repeat( 2, 1fr );
}

.selift-piatt-grid.selift-piatt-cols-4 {
	grid-template-columns: repeat( 4, 1fr );
}

@media ( max-width: 900px ) {
	.selift-piatt-grid,
	.selift-piatt-grid.selift-piatt-cols-4 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 560px ) {
	.selift-piatt-grid,
	.selift-piatt-grid.selift-piatt-cols-2,
	.selift-piatt-grid.selift-piatt-cols-4 {
		grid-template-columns: 1fr;
	}
}

.selift-piatt-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	overflow: hidden;
}

.selift-piatt-card__image-link {
	display: block;
}

.selift-piatt-card__image-link p {
	display: none;
}

.selift-piatt-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #f5f5f5;
	overflow: hidden;
	margin-bottom: 20px;
}

.selift-piatt-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.selift-piatt-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		#f0f0f0,
		#f0f0f0 10px,
		#f7f7f7 10px,
		#f7f7f7 20px
	);
}

.selift-piatt-card__body {
	padding: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.selift-piatt-card__brand {
	font-family: "Montserrat";
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #000;
}

p.selift-piatt-card__brand {
	margin-bottom: 10px !important;
}

.post-content .selift-piatt-card p {
	margin-bottom: 0;
}

.post-content h3.selift-piatt-card__title {
	margin: 0;
	margin-bottom: 10px;
	font-family: "Montserrat";
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: #14387f;
}

.selift-piatt-card__title a {
	font-family: "Montserrat";
	font-size: 16px;
	font-weight: 400;
	color: #14387f;
	text-decoration: none;
}

.selift-piatt-card__title a:hover {
	text-decoration: underline;
}

/*
 * Il bottone "Scopri di più" non ha più aspetto di pulsante (niente
 * sfondo/bordo): è testo semplice color #006AB4, con "Scopri" in grassetto
 * (vedi <strong> nel markup PHP) e una freccina (::after) allineata in riga.
 */
.selift-piatt-card__button {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	color: #006ab4;
}

.selift-piatt-card__button::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background-image: url( "/wp-content/uploads/2026/09/freccia_up-right_light-blue.png" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.selift-piatt-no-results {
	padding: 24px;
	text-align: center;
	background: #f7f7f7;
	border-radius: 4px;
}

/* ---------- Media dettaglio Piattaforma ---------- */

.selift-piatt-immagine-secondaria {
	display: block;
	max-width: 330px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Download scheda tecnica ---------- */

.selift-piatt-download-scheda {
	align-items: flex-start;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.selift-piatt-download-scheda::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-top: 4px;
	margin-right: 10px;
	background-image: url( "/wp-content/uploads/2026/09/i_download.png" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ---------- Dati tecnici Piattaforma ---------- */

.selift-piatt-dati-tecnici__row {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	padding: 15px 0;
	border-bottom: 1px solid #b4b4b4;
}

/*
 * Icone delle righe: box fisso 18x18px con l'immagine "contenuta"
 * (background-size: contain), non larghezza libera con altezza
 * proporzionale al file — quest'ultimo approccio (content: url(), usato
 * fino alla 1.16.0) lasciava l'altezza dipendere dalle proporzioni
 * originali di ciascuna immagine: con file dalle proporzioni molto
 * diverse tra loro, il risultato visivo poteva sembrare "più grande" di
 * 18px anche se la larghezza calcolata era corretta. Stessa tecnica già
 * usata per le altre icone del plugin (vedi .selift-piatt-card__button::after
 * e .selift-piatt-download-scheda::before).
 */
.selift-piatt-dati-tecnici__row--altezza::before,
.selift-piatt-dati-tecnici__row--dimensioni::before,
.selift-piatt-dati-tecnici__row--portata::before,
.selift-piatt-dati-tecnici__row--alimentazione::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.selift-piatt-dati-tecnici__row--altezza::before {
	background-image: url( "/wp-content/uploads/2026/09/i_altezza-max-lavoro.png" );
}

.selift-piatt-dati-tecnici__row--dimensioni::before {
	background-image: url( "/wp-content/uploads/2026/09/i_dimensioni-piattaforma.png" );
}

.selift-piatt-dati-tecnici__row--portata::before {
	background-image: url( "/wp-content/uploads/2026/09/i_portata-max.png" );
}

.selift-piatt-dati-tecnici__row--alimentazione::before {
	background-image: url( "/wp-content/uploads/2026/09/i_alimentazione.png" );
}

.selift-piatt-dati-tecnici__label {
	color: #006ab4;
}

.selift-piatt-dati-tecnici__value {
	margin-left: auto;
	color: #b4b4b4;
	text-align: right;
}

/* ---------- Paginazione ---------- */

.selift-piatt-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.selift-piatt-page-btn {
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 3px;
	cursor: pointer;
	font-size: 14px;
}

.selift-piatt-page-btn.is-active {
	background: #1d1d1d;
	border-color: #1d1d1d;
	color: #fff;
	cursor: default;
}

.selift-piatt-page-btn:disabled {
	cursor: default;
}

/* ---------- Filtri (sidebar) ---------- */

.selift-piatt-filtri {
	padding: 0;
}

.selift-piatt-filtri__title {
	display: none
}

.selift-piatt-filtri__group {
	border: 0;
	margin: 0 0 18px;
	border-bottom: 1px solid #b4b4b4;
}

.selift-piatt-filtri__group:last-of-type {
	border-bottom: 0;
}

.selift-piatt-filtri__group legend {
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	padding: 0 0 10px;
	color: #006ab4;
    font-family: "Montserrat";
}

.selift-piatt-filtri__checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	padding: 4px 0;
	cursor: pointer;
}

/*
 * Quando il filtro Categoria è in modalità "link" (vedi
 * render_taxonomy_filter() in PHP: attivo quando si è già nell'archivio di
 * una Categoria specifica), le voci sono <a> invece di <label>: azzera lo
 * stile di default del link, per restare visivamente identiche alle
 * checkbox.
 */
a.selift-piatt-filtri__checkbox {
	color: inherit;
	text-decoration: none;
}

.selift-piatt-filtri__group[data-filter="categoria"] .selift-piatt-filtri__checkbox {
	margin-bottom: 5px;
	padding: 4px;
	background-color: rgba( 180, 180, 180, 0.3 ); /* #B4B4B4 al 30% di opacità */
}

/*
 * Rientro visivo delle Sottocategorie sotto la loro Categoria madre (vedi
 * render_taxonomy_filter_tree() in PHP): restano comunque dentro lo stesso
 * fieldset[data-filter="categoria"], quindi ereditano automaticamente lo
 * sfondo/padding della regola sopra. Di default sono chiuse (accordion),
 * e vengono mostrate solo con la classe .is-open (aggiunta sia lato PHP,
 * quando la categoria/sottocategoria corrente rientra nel ramo, sia via JS
 * al click sulla riga della Categoria madre — nessun bottone/freccetta
 * separati, vedi JS).
 */
.selift-piatt-filtri__children {
	margin-left: 16px;
	display: none;
}

.selift-piatt-filtri__children.is-open {
	display: block;
}

.selift-piatt-filtri__children p,
.selift-piatt-filtri__group p {
	margin-bottom: 0;
}

/*
 * Il builder del sito (Avada/Fusion Builder) inserisce dei tag <p></p> vuoti
 * tra gli elementi del filtro Categoria dopo l'espansione dello shortcode
 * (non generati dal nostro HTML): qui li nascondiamo via CSS, dato che lato
 * PHP non è possibile intervenire su una trasformazione applicata dal
 * builder DOPO l'output dello shortcode.
 */
.selift-piatt-filtri p:empty {
	display: none;
}

.selift-piatt-filtri__checkbox small {
	color: #999;
}

/*
 * Checkbox dei filtri Brand, Alimentazione e Portata: quadrato pieno,
 * nessun border-radius, grigio di default e blu quando selezionato. Non
 * riguarda il checkbox del filtro Categoria, nascosto a parte qui sotto.
 */
.selift-piatt-filtri__checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: #d9d9d9;
	cursor: pointer;
	flex-shrink: 0;
}

.selift-piatt-filtri__checkbox input[type="checkbox"]:checked {
	background-color: #006ab4;
}

/*
 * Filtro Categoria: quadratino checkbox nascosto visivamente (resta
 * funzionante — cliccare sull'etichetta continua a selezionare/deselezionare,
 * dato che l'input è comunque dentro il <label>). Il JS aggiunge/rimuove la
 * classe "is-active" sull'etichetta quando la Categoria è selezionata: qui
 * sotto si può definire lo stile della Categoria attiva (es. sfondo, colore,
 * bordo) al posto del checkbox.
 */
.selift-piatt-filtri__group[data-filter="categoria"] .selift-piatt-filtri__checkbox input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.selift-piatt-filtri__group[data-filter="categoria"] .selift-piatt-filtri__checkbox.is-active {
	background-color: #006ab4;
	color: #fff;
}

.selift-piatt-filtri__slider {
	padding-top: 4px;
}

.selift-piatt-filtri__slider-input {
	--selift-piatt-progress: 0%;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	background: #d9d9d9;
	border-radius: 2px;
	outline: none;
	margin: 10px 0 6px;
	cursor: pointer;
}

/*
 * Riempimento blu della parte "attiva" della linea: su WebKit/Chromium non
 * esiste un pseudo-elemento nativo equivalente a "-moz-range-progress", quindi
 * il JS calcola la percentuale e la scrive nella custom property
 * "--selift-piatt-progress" (vedi cawipa-piattaforme-filtri.js), usata qui in
 * un gradiente lineare grigio/blu.
 */
.selift-piatt-filtri__slider-input::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(
		to right,
		#006ab4 0%,
		#006ab4 var( --selift-piatt-progress ),
		#d9d9d9 var( --selift-piatt-progress ),
		#d9d9d9 100%
	);
}

.selift-piatt-filtri__slider-input::-moz-range-track {
	height: 2px;
	background: #d9d9d9;
	border-radius: 2px;
	border: 0;
}

/* Firefox supporta nativamente il riempimento della parte attiva. */
.selift-piatt-filtri__slider-input::-moz-range-progress {
	height: 2px;
	background: #006ab4;
	border-radius: 2px;
}

.selift-piatt-filtri__slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -7px;
	border-radius: 50%;
	background: #006ab4;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	cursor: pointer;
	transition: transform 0.15s ease;
}

.selift-piatt-filtri__slider-input::-webkit-slider-thumb:hover,
.selift-piatt-filtri__slider-input::-webkit-slider-thumb:active {
	transform: scale( 1.15 );
}

.selift-piatt-filtri__slider-input::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #006ab4;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	cursor: pointer;
	transition: transform 0.15s ease;
}

.selift-piatt-filtri__slider-input::-moz-range-thumb:hover,
.selift-piatt-filtri__slider-input::-moz-range-thumb:active {
	transform: scale( 1.15 );
}

.selift-piatt-filtri__slider-value {
	margin: 0;
	font-size: 13px;
	color: #767676;
}

.selift-piatt-filtri__slider-value-num {
	font-weight: 600;
	color: #1d1d1d;
}

.selift-piatt-filtri__actions {
	display: flex;
	justify-content: flex-end;
}

.selift-piatt-filtri__reset {
	background: none;
	border: 0;
	color: #767676;
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
	padding: 0;
}

.selift-piatt-filtri__reset:hover {
	color: #1d1d1d;
}

.selift-piatt-wrapper.is-loading .selift-piatt-results {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}