/**
 * ==========================================================================
 * Athletic Seating - Sideline Chair Quote Builder
 * ==========================================================================
 *
 * Styles for the multi-step chair quote builder.
 *
 * ==========================================================================
 */

/* ==========================================================
   STEP 1 - CHAIR OPTIONS
========================================================== */

.chair-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.chair-option {
	display: block;
	cursor: pointer;
}

.chair-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.chair-option__content {
	display: block;
}

.chair-option__image {
	display: block;
}

.chair-option__image img {
	display: block;
	width: 100%;
	height: auto;
}

.chair-option__title {
	display: block;
	margin-top: 12px;
}


/* ==========================================================
   STEP 2 - VINYL COLOR OPTIONS
========================================================== */

.vinyl-color-option {
	display: block;
	cursor: pointer;
	text-align: center;
}

.vinyl-color-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vinyl-color-option__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.vinyl-color-option__swatch {
	display: block;
	width: 120px;
	height: 120px;
	flex: 0 0 120px;
	border: 1px solid #cccccc;
}

.vinyl-color-option__name {
	display: block;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

	.chair-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 575px) {

	.chair-options {
		grid-template-columns: 1fr;
	}

}

/* ==========================================================
   STEP 3 - FRAME COLOR OPTIONS
========================================================== */

.frame-color-option {
	display: block;
	cursor: pointer;
	text-align: center;
}

.frame-color-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.frame-color-option__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.frame-color-option__swatch {
	display: block;
	width: 120px;
	height: 120px;
	flex: 0 0 120px;
	border: 1px solid #cccccc;
}

.frame-color-option__name {
	display: block;
}