/**
 * Carxis Vehicle Quick Specs Component
 *
 * @package CarxisToolkit
 * @subpackage Vehicle
 * @since 2.0.0
 */

/* ===============================
   Section
=============================== */

.cx-quick-specs{
	box-sizing:border-box;
	width:100%;
	margin-top:24px;
	padding:22px;

	background:#ffffff;
	border:1px solid #e7e9ec;
	border-radius:14px;

	box-shadow:0 4px 12px rgba(16,24,40,.045);
}

.cx-quick-specs,
.cx-quick-specs *{
	box-sizing:border-box;
}

/* ===============================
   Title
=============================== */

.cx-quick-specs__title{
	margin:0 0 18px;

	color:#202124;

	font-size:24px;
	font-weight:800;
	line-height:1.2;
}

/* ===============================
   Grid
=============================== */

.cx-quick-specs__list{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:12px;
}

/* ===============================
   Item
=============================== */

.cx-quick-specs__item{
	display:flex;
	align-items:center;
	gap:12px;

	min-width:0;
	min-height:82px;
	padding:14px;

	background:#f8f9fb;
	border:1px solid #eceef1;
	border-radius:11px;
}

/* ===============================
   Icon
=============================== */

.cx-quick-specs__icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:40px;
	height:40px;
	min-width:40px;
	min-height:40px;
	max-width:40px;
	max-height:40px;
	flex:0 0 40px;

	overflow:hidden;

	color:#d1001f;
	background:#fff1f2;
	border:1px solid #f7d9dd;
	border-radius:10px;
}

.cx-quick-specs__icon > svg,
.cx-quick-specs__icon > .carxis-icon,
.cx-quick-specs__icon .carxis-icon,
.cx-quick-specs__icon svg{
	display:block !important;

	width:22px !important;
	height:22px !important;
	min-width:22px !important;
	min-height:22px !important;
	max-width:22px !important;
	max-height:22px !important;

	flex:0 0 22px !important;

	margin:0 !important;
	padding:0 !important;

	overflow:visible;
}

/* Kekalkan warna ikut icon asal */
.cx-quick-specs__icon svg{
	color:currentColor;
}

/* SVG jenis outline */
.cx-quick-specs__icon svg [stroke]{
	stroke:currentColor;
}

/* SVG jenis fill */
.cx-quick-specs__icon svg [fill]:not([fill="none"]){
	fill:currentColor;
}

/* Icon warna */
.cx-quick-specs__icon--color svg,
.cx-quick-specs__icon--color svg *{
	fill:currentColor !important;
	stroke:currentColor !important;
}

/* ===============================
   Content
=============================== */

.cx-quick-specs__content{
	min-width:0;
}

.cx-quick-specs__label{
	margin:0 0 3px;

	color:#667085;

	font-size:12px;
	font-weight:600;
	line-height:1.3;
}

.cx-quick-specs__value{
	color:#202124;

	font-size:15px;
	font-weight:800;
	line-height:1.3;

	overflow-wrap:anywhere;
}

/* ===============================
   Tablet
=============================== */

@media (max-width:991px){

	.cx-quick-specs{
		padding:20px;
	}

	.cx-quick-specs__title{
		font-size:22px;
	}

	.cx-quick-specs__list{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

/* ===============================
   Mobile
=============================== */

@media (max-width:767px){

	.cx-quick-specs{
		margin-top:20px;
		padding:16px;
		border-radius:13px;
	}

	.cx-quick-specs__title{
		margin-bottom:15px;
		font-size:20px;
	}

	.cx-quick-specs__list{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:9px;
	}

	.cx-quick-specs__item{
		min-height:76px;
		padding:11px;
		gap:9px;
	}

	.cx-quick-specs__icon{
		width:36px;
		height:36px;
		min-width:36px;
		min-height:36px;
		max-width:36px;
		max-height:36px;
		flex-basis:36px;
	}

	.cx-quick-specs__icon > svg,
	.cx-quick-specs__icon > .carxis-icon,
	.cx-quick-specs__icon .carxis-icon,
	.cx-quick-specs__icon svg{
		width:20px !important;
		height:20px !important;
		min-width:20px !important;
		min-height:20px !important;
		max-width:20px !important;
		max-height:20px !important;
		flex-basis:20px !important;
	}

	.cx-quick-specs__value{
		font-size:14px;
	}
}

/* ===============================
   Small Mobile
=============================== */

@media (max-width:420px){

	.cx-quick-specs__list{
		grid-template-columns:1fr;
	}

	.cx-quick-specs__item{
		min-height:72px;
	}
}