/**
 * Wheel builder full-width layout and responsive overrides.
 * Scoped to builder routes and shortcode output (#section-wheel-builder).
 */

/* --- Full-width page shell (Jupiter X) --- */
body.lexani-wheel-builder-page .jupiterx-main-content {
	padding: 0;
}

body.lexani-wheel-builder-page .jupiterx-main-content > .container-fluid {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.lexani-wheel-builder-page #jupiterx-primary {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.lexani-wheel-builder-page .jupiterx-main-content > .container-fluid > .row {
	margin-left: 0;
	margin-right: 0;
}

body.lexani-wheel-builder-page .lexani-wheel-builder-page {
	width: 100%;
	max-width: 100%;
}

/* --- Builder section: edge-to-edge --- */
#section-wheel-builder {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	box-sizing: border-box;
}

#section-wheel-builder #wheel-builder.container-fluid {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin: 0;
}

#section-wheel-builder > #wheel-builder > .row {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

#section-wheel-builder .col-lg-9,
#section-wheel-builder .col-lg-3,
#section-wheel-builder .col-sm-12 {
	padding-left: 0;
	padding-right: 0;
}

/* --- Canvas area --- */
#section-wheel-builder #builder {
	width: 100%;
	max-width: 100%;
}

#section-wheel-builder #wheelShadow {
	width: min(75%, 768px);
	max-width: 100%;
}

/* --- Palette panel --- */
#section-wheel-builder #pallete-wrap {
	width: 100%;
}

#section-wheel-builder #pallete-wrap .card-body {
	padding: 1rem;
}

#section-wheel-builder #download_image,
#section-wheel-builder #email_image {
	display: inline-block;
	width: calc(50% - 0.35rem);
	margin: 0.25rem 0;
	text-align: center;
	box-sizing: border-box;
}

#section-wheel-builder #download_image {
	margin-right: 0.35rem;
}

/* --- Wheel grid below builder --- */
body.lexani-wheel-builder-page .lexani-wb-grid.wheels_filtered_page {
	max-width: 100%;
	width: 100%;
	padding: 0 1.25rem;
	box-sizing: border-box;
}

/* --- Tablet: stack preview above controls --- */
@media (max-width: 991.98px) {
	#section-wheel-builder .col-lg-9,
	#section-wheel-builder .col-lg-3 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	#section-wheel-builder #builder {
		height: min(calc(100vh - 100px), 85vw);
		min-height: 280px;
		padding: 15px 0;
	}

	#section-wheel-builder #builder .wheel-info {
		left: 12px;
		top: 12px;
	}

	#section-wheel-builder #pallete-wrap {
		border-top: 1px solid #ccc;
	}
}

/* --- Mobile --- */
@media (max-width: 767.98px) {
	#section-wheel-builder.topmargin-lg {
		margin-top: 0;
	}

	#section-wheel-builder #builder {
		height: min(calc(100vw + 80px), calc(100vh - 60px));
		min-height: 260px;
		padding: 10px 0 20px;
	}

	#section-wheel-builder #builder .wheel-info {
		position: relative;
		left: auto;
		top: auto;
		text-align: center;
		padding: 0.5rem 1rem 0;
	}

	#section-wheel-builder #builder .wheel-name {
		font-size: 1.25rem;
	}

	#section-wheel-builder #parts-wrapper .parts {
		flex: 0 0 calc(33.333% - 4px);
		max-width: calc(33.333% - 4px);
		min-height: 40px;
		margin: 2px;
		box-sizing: border-box;
	}

	#section-wheel-builder #parts-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 -2px;
	}

	#section-wheel-builder .color-wrap {
		width: 100%;
		margin-left: 0;
		padding: 0 0.5rem;
		box-sizing: border-box;
	}

	#section-wheel-builder .quick-picks ul li {
		display: block;
		width: 100%;
		margin: 4px 0;
		text-align: center;
		box-sizing: border-box;
	}

	#section-wheel-builder #download_image,
	#section-wheel-builder #email_image {
		width: 100%;
		margin: 0.35rem 0;
	}

	.lexani-wheel-builder-page .modal-wrap,
	#modal-email .modal-wrap {
		width: calc(100% - 2rem);
		min-width: 0;
		max-width: 100%;
		padding: 0 12px;
		box-sizing: border-box;
	}

	.lexani-wheel-builder-page .modal-container .col_half,
	#modal-email .modal-container .col_half {
		width: 100%;
		display: block;
	}

	body.lexani-wheel-builder-page .lexani-wb-grid .wheel_list .item {
		flex: 0 1 calc(50% - 0.75rem);
		max-width: calc(50% - 0.75rem);
	}
}

@media (max-width: 479.98px) {
	#section-wheel-builder #parts-wrapper .parts {
		flex: 0 0 calc(50% - 4px);
		max-width: calc(50% - 4px);
	}

	body.lexani-wheel-builder-page .lexani-wb-grid .wheel_list .item {
		flex: 0 1 100%;
		max-width: 220px;
	}
}