/**
 * Elemento Bricks "TRK Configurator 3D": solo varianti di layout e ganci per i
 * controlli dell'elemento. Il resto dello stile resta in trk-style.css.
 */

.trk-bricks-configurator .trk-configurator {
	margin: 0;
}

/* Preview a destra: scambia le due colonne della griglia. */
.trk-bricks-configurator--preview-right .trk-preview-area {
	grid-column: 2;
}

.trk-bricks-configurator--preview-right .trk-config-form {
	grid-column: 1;
	grid-row: 1 / span 10;
}

/* Colonna singola: preview sopra, opzioni sotto. */
.trk-bricks-configurator--stacked .trk-configurator {
	grid-template-columns: 1fr;
}

.trk-bricks-configurator--stacked .trk-preview-area {
	grid-column: 1;
	grid-row: auto;
	position: static;
}

.trk-bricks-configurator--stacked .trk-config-form {
	grid-column: 1;
}

@media ( max-width: 640px ) {
	.trk-bricks-configurator--preview-right .trk-preview-area,
	.trk-bricks-configurator--preview-right .trk-config-form {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Colore selezione pilotato dal control "Colore selezione". */
.trk-bricks-configurator .trk-color-swatch.is-selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --trk-swatch-active, #0073aa );
}

.trk-bricks-configurator .trk-color-swatch--off.is-selected .trk-color-swatch__off-label {
	color: var( --trk-swatch-active, #0073aa );
}

/* Avvisi mostrati solo dentro il builder. */
.trk-bricks-configurator__notice {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	background: #f6f7f7;
	color: #50575e;
	font-size: 13px;
	line-height: 1.5;
}