/* src/system/app/views/landing/thailand_pre_order_modified_cars.tpl */
:root {
	--box-shadow-default: 1px 1px 5px rgba(0, 0, 0, 0.4);
	--color-white: #fff;
	--color-orange: #e66b02;
	--color-red: #d93005;
	--color-green: #418401;
	--color-silver: linear-gradient(
		45deg,
		#757575 0%,
		#9e9e9e 45%,
		#e8e8e8 70%,
		#9e9e9e 85%,
		#757575 90% 100%
	);
	--color-gold: linear-gradient(
		45deg,
		#b67b03 0%,
		#daaf08 45%,
		#fee9a0 70%,
		#daaf08 85%,
		#b67b03 90% 100%
	);
}

/* common: */
.responsive-img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.sequentialNumber {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: var(--color-white);
	font-weight: bold;
	line-height: 1;
	top: 4px;
	left: 4px;
	width: 26px;
	height: 26px;
	font-size: 12px;
}

.section-topText {
	margin-bottom: 20px;
}
/* common; */

/* preOrderModifiedCars: */
.preOrderModifiedCars h3 {
	margin: 14px 0 6px;
	font-size: 18px;
}
/* preOrderModifiedCars; */

/* orderSteps: */
.orderSteps-list {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.orderSteps-item {
	position: relative;
	width: auto;
	border-radius: 6px;
	padding: 8px 14px 14px;
}

.orderSteps-item + .orderSteps-item {
	margin: 30px 0 0;
}

.orderSteps-item:nth-child(n + 2)::before {
	content: "\f105";
	position: absolute;
	font-family: "bf-iconfont";
	color: #595959;
	font-size: 24px;
	top: -32px;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
}

.orderSteps-item-number {
	color: #595959;
	font-size: 11px;
	text-align: center;
}

.orderSteps-item-img {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 76px;
}

.orderSteps-item-img img {
	width: auto;
}

.orderSteps-item-title {
	margin: 0 0 2px;
	font-size: 12px;
	text-align: center;
}

.orderSteps-item-text {
	font-size: 11px;
	text-align: center;
}

.orderSteps-item.select .orderSteps-item-img img {
	height: 95%;
}

.orderSteps-item.payment .orderSteps-item-img img {
	height: 95%;
}

.orderSteps-item.modify .orderSteps-item-img img {
	height: 70%;
}

.orderSteps-item.completed .orderSteps-item-img img {
	height: 65%;
}

.orderSteps-item.shipment .orderSteps-item-img img {
	height: 90%;
}

/* orderSteps; */

/* vehicleMod: */
.vehicleMod-example {
	position: relative;
	display: grid;
	margin: 40px auto 0;
	grid-template-columns: none;
	gap: 20px;
	max-width: 600px;
}

.vehicleMod-example-tab {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	max-width: 200px;
	padding: 5px 15px;
	margin: 0 auto;
	color: var(--color-white);
	font-weight: bold;
	text-align: center;
	font-size: 12px;
}

.vehicleMod-example-img {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	gap: 10px;
}

.vehicleMod-example-img div:first-child {
	grid-column: 1/4;
}

.vehicleMod-example-textBox {
	padding: 16px;
}

.vehicleMod-example-text {
	font-weight: bold;
	text-align: center;
	font-size: 16px;
}

.vehicleMod-example-listTitle {
	margin: 12px 0 0;
	font-weight: bold;
}

.vehicleMod-example-item {
	font-size: 14px;
}

.vehicleMod-example-before {
	position: relative;
	box-shadow: var(--box-shadow-default);
}

.vehicleMod-example-before-tab {
	background: var(--color-silver);
}

.vehicleMod-example-after {
	position: relative;
	box-shadow: var(--box-shadow-default);
}

.vehicleMod-example-after-tab {
	background: var(--color-gold);
}

.vehicleMod-example-after-text .text-strong {
	color: var(--color-green);
}

.vehicleMod-example .icon-modification {
	display: block;
	position: relative;
	aspect-ratio: 1/1;
	width: 32px;
	margin: 0 auto;
}

.vehicleMod-example .icon-modification::before {
	content: "\f105";
	position: absolute;
	width: 100%;
	aspect-ratio: 1/1;
	background: white;
	border-radius: 999px;
	color: #595959;
	font-family: "bf-iconfont";
	font-size: 32px;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
}
/* vehicleMod; */

/* preOrderStock: */
.preOrderStock-button {
	width: 260px;
	height: 50px;
	margin: 40px auto 0;
	line-height: 50px;
}

.preOrderStock-list {
	display: grid;
	margin: 0 auto;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	max-width: 600px;
}

.preOrderStock-item {
	position: relative;
	box-shadow: var(--box-shadow-default);
}

.preOrderStock-item-link {
	color: inherit;
}

.preOrderStock-item-link:hover {
	color: inherit;
}

.preOrderStock-item-number {
	background: var(--color-gold);
}

.preOrderStock-item-textBox {
	padding: 12px 9px;
}

.preOrderStock-item-modelName {
	font-weight: bold;
	font-size: 14px;
}

.preOrderStock-item-text {
	font-size: 13px;
}
/* preOrderStock; */

/* accessories: */
.accessories-list {
	display: grid;
	margin: 0 auto;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	max-width: 600px;
}

.accessories-item {
	position: relative;
	box-shadow: var(--box-shadow-default);
}

.accessories-item-number {
	background: var(--color-silver);
}

.accessories-item-img {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 325 / 236;
}

.accessories-item-textBox {
	padding: 12px 9px;
}

.accessories-item-name {
	font-weight: bold;
	font-size: 14px;
}

.accessories-item-price {
	margin: 8px 0 0;
	font-size: 14px;
}

.accessories-item-price .text-strong {
	color: var(--color-green);
	font-weight: bold;
}
/* accessories; */

/* saveShipping: */
.saveShipping-banners {
	display: grid;
	gap: 20px;
}
/* saveShipping; */

@media screen and (min-width: 900px) {
	/* pc common: */
	.sequentialNumber {
		top: 6px;
		left: 6px;
		width: 34px;
		height: 34px;
		font-size: 15px;
	}
	/* pc common; */

	/* preOrderModifiedCars: */
	.preOrderModifiedCars h3 {
		margin: 20px 0 10px;
		font-size: 24px;
	}
	/* preOrderModifiedCars; */

	/* pc orderSteps: */
	.orderSteps-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: start;
	}

	.orderSteps-item {
		box-sizing: border-box;
		max-width: 168px;
		padding: 8px 14px;
	}

	.orderSteps-item + .orderSteps-item {
		margin: 0 0 0 30px;
	}

	.orderSteps-item:nth-child(n + 2)::before {
		top: 50%;
		left: -19px;
		transform: translateY(-50%);
	}

	.orderSteps-item-img {
		height: 65px;
	}

	.orderSteps-item.select .orderSteps-item-img img {
		height: 100%;
	}

	.orderSteps-item.payment .orderSteps-item-img img {
		height: 100%;
	}

	.orderSteps-item.modify .orderSteps-item-img img {
		height: 75%;
	}

	.orderSteps-item.completed .orderSteps-item-img img {
		height: 70%;
	}

	.orderSteps-item.shipment .orderSteps-item-img img {
		height: 95%;
	}
	/* pc orderSteps; */

	/* pc vehicleMod: */
	.vehicleMod-example {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		max-width: none;
	}

	.vehicleMod-example-tab {
		font-size: 14px;
	}

	.vehicleMod-example-text {
		font-size: 20px;
	}

	.vehicleMod-example .icon-modification {
		display: inline-block;
		position: absolute;
		z-index: 1;
		top: 20%;
		left: 50%;
		transform: translate(-50%);
		width: 84px;
		margin: 0;
	}

	.vehicleMod-example .icon-modification::before {
		content: "";
		background: white;
		border-radius: 999px;
		top: 0;
		left: 0;
		transform: none;
	}

	.vehicleMod-example .icon-modification::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		width: 52%;
		aspect-ratio: 1/1;
		background: url("/assets/resource/image/thailand_pre_order_modified_cars/icon-modification.png")
			no-repeat center / cover;
	}
	/* pc vehicleMod; */

	/* pc preOrderStock: */
	.preOrderStock-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		max-width: none;
	}

	.preOrderStock-item-modelName {
		font-size: 16px;
	}

	.preOrderStock-item-text {
		font-size: 15px;
	}
	/* pc preOrderStock; */

	/* pc accessories: */
	.accessories-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		max-width: none;
	}

	.accessories-item-name {
		font-size: 16px;
	}

	.accessories-item-price {
		font-size: 16px;
	}
	/* pc accessories; */
}