/**
 * Carxis Vehicle Highlights Component
 *
 * @package CarxisToolkit
 * @subpackage Vehicle
 * @since 2.0.0
 */

/* ===============================
   Base
=============================== */

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

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

.cx-highlights{
	width:100%;
	margin-top:24px;
	padding:24px;

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

	box-shadow:0 6px 18px rgba(16,24,40,.05);
}

/* ===============================
   Header
=============================== */

.cx-highlights__header{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:20px;

	margin-bottom:20px;
}

.cx-highlights__title{
	margin:0;

	color:#202124;

	font-size:24px;
	font-weight:800;
	line-height:1.2;
	letter-spacing:-.02em;
}

.cx-highlights__subtitle{
	max-width:680px;
	margin:7px 0 0;

	color:#667085;

	font-size:13px;
	font-weight:500;
	line-height:1.5;
}

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

	flex:0 0 auto;
	min-height:32px;
	padding:6px 11px;

	color:#b5001b;
	background:#fff1f2;
	border:1px solid #f7d9dd;
	border-radius:999px;

	font-size:12px;
	font-weight:700;
	line-height:1;
	white-space:nowrap;
}

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

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

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

.cx-highlights__item{
	display:flex;
	align-items:center;
	gap:10px;

	min-width:0;
	min-height:56px;
	padding:12px 14px;

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

	transition:
		background-color .2s ease,
		border-color .2s ease,
		transform .2s ease,
		box-shadow .2s ease;
}

.cx-highlights__item:hover{
	background:#ffffff;
	border-color:#e2c2c7;
	box-shadow:0 5px 14px rgba(16,24,40,.06);
	transform:translateY(-1px);
}

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

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

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

	overflow:hidden;

	color:#d1001f;
	background:#fff1f2;
	border:1px solid #f6cdd3;
	border-radius:50%;
}

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

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

	flex:0 0 15px !important;

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

.cx-highlights__icon svg{
	color:currentColor;
}

.cx-highlights__icon svg [stroke]{
	stroke:currentColor;
}

.cx-highlights__icon svg [fill]:not([fill="none"]){
	fill:currentColor;
}

.cx-highlights__fallback-icon{
	display:block;

	font-size:15px;
	font-weight:900;
	line-height:1;
}

/* ===============================
   Text
=============================== */

.cx-highlights__text{
	min-width:0;

	color:#202124;

	font-size:14px;
	font-weight:700;
	line-height:1.35;

	overflow-wrap:anywhere;
}

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

@media (max-width:991px){

	.cx-highlights{
		padding:20px;
	}

	.cx-highlights__title{
		font-size:22px;
	}

	.cx-highlights__list{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}

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

@media (max-width:767px){

	.cx-highlights{
		margin-top:20px;
		padding:16px;
		border-radius:14px;
	}

	.cx-highlights__header{
		display:block;
		margin-bottom:16px;
	}

	.cx-highlights__title{
		font-size:20px;
	}

	.cx-highlights__subtitle{
		margin-top:6px;
		font-size:12px;
	}

	.cx-highlights__count{
		margin-top:10px;
	}

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

	.cx-highlights__item{
		min-height:52px;
		padding:10px;
		gap:8px;
	}

	.cx-highlights__icon{
		width:25px;
		height:25px;
		min-width:25px;
		min-height:25px;
		max-width:25px;
		max-height:25px;
		flex-basis:25px;
	}

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

	.cx-highlights__text{
		font-size:13px;
	}
}

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

@media (max-width:420px){

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

	.cx-highlights__item{
		min-height:50px;
	}
}