.card-grid-controls .cardgrid-filter-select {
	margin-right: 2.0rem;
}

.card-grid-controls .cardgrid-filter-select:last-of-type {
	margin-right: 0;
}

.card-grid-container {
	width: 100%;
}

.card-grid-header {
	margin-bottom: 1.5rem;
}

.card-grid-header h2 {
	font-size: 1.5rem;
	font-weight: 600;
}

.card-grid-controls {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.card-grid-controls .form-label,
.card-grid-controls .form-check-label {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
	cursor: pointer;
}

.card-grid-controls .form-select {
	border-radius: 8px;
	font-size: 0.9rem;
	padding: 0.375rem 2rem 0.375rem 0.75rem;
}

.card-grid-controls .form-select:hover,
.card-grid-controls .form-select:focus {
	border-color: var(--colore-accento);
}

.card-grid-controls .form-select:focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--colore-accento-rgb), 0.25);
}

.card-grid-controls .form-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.card-grid-controls .form-check-input {
	cursor: pointer;
}

.card-grid-controls .form-check-input:checked {
	background-color: var(--colore-accento);
	border-color: var(--colore-accento);
}

.card-grid-controls .form-check-input:focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--colore-accento-rgb), 0.25);
}

.btn-shuffle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.375rem 0.6rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-shuffle:hover {
	border-color: var(--colore-accento);
	color: var(--colore-accento);
	background: rgba(var(--colore-accento-rgb), 0.1);
}

.btn-shuffle:active {
	transform: scale(0.95);
}

.btn-shuffle .material-symbols-rounded {
	font-size: 1.25rem;
}

/* Stile per i filtri su computer: allineati a destra */
.card-grid-controls {
	justify-content: flex-end;
}

.card-grid-controls > div {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-right: 1.5rem;
}

.card-grid-controls > div:last-of-type {
	margin-right: 0;
}

/* Stile per i filtri su mobile: un filtro per riga, allineati a destra */
@media (max-width: 576px) {
	.card-grid-controls {
		flex-direction: column;
		align-items: flex-end;
		gap: 1rem;
	}

	.card-grid-controls > div {
		justify-content: flex-end;
		width: 100%;
	}
}

@media (max-width: 576px) {
	.card-grid-controls {
		flex-direction: column;
		align-items: flex-start;
	}

	.card-grid-controls .form-check {
		margin-left: 0 !important;
		margin-top: 0.5rem;
	}
}

/* Aggiungo spazio tra i filtri e le cards */
.card-grid-controls {
	margin-bottom: 1.5rem;
}