/* =========================================================
   AWTI DEVICES HUB
   PROS + CONS CSS
   File: assets/css/pros-cons.css
   Version: FINAL
   ========================================================= */


/* =========================================================
   PROS + CONS GRID
   ========================================================= */

.awti-device-single .awti-pros-cons-grid {

	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 12px;

	margin-top: 18px;
}


/* =========================================================
   COMMON PROS / CONS CARD
   SAME AWTI DEVICE HUB COLOUR
   ========================================================= */

.awti-device-single .awti-pros-cons-grid
.awti-device-card {

	position: relative;

	margin: 0;
	padding: 17px;

	border: 1px solid rgba(37, 99, 235, .16);

	border-radius: 15px;

	background:
		linear-gradient(
			135deg,
			#ecfdf5 0%,
			#ffffff 48%,
			#eff6ff 100%
		);

	box-shadow:
		0 5px 18px rgba(15, 23, 42, .05);

	overflow: hidden;
}


/* =========================================================
   TOP GRADIENT LINE
   SAME FOR PROS + CONS
   ========================================================= */

.awti-device-single .awti-pros-cons-grid
.awti-device-card::before {

	content: "";

	position: absolute;

	top: 0;
	left: 0;
	right: 0;

	height: 3px;

	background:
		linear-gradient(
			90deg,
			#16a34a,
			#0d9488,
			#2563eb
		);
}


/* =========================================================
   PROS
   ========================================================= */

.awti-device-single .awti-pros-cons-grid
.awti-pros {

	border: 1px solid rgba(37, 99, 235, .16);

	border-left: 3px solid #16a34a;

	background:
		linear-gradient(
			135deg,
			#ecfdf5 0%,
			#ffffff 48%,
			#eff6ff 100%
		);
}


/* =========================================================
   CONS
   SAME COLOUR AS PROS
   NO RED BACKGROUND
   ========================================================= */

.awti-device-single .awti-pros-cons-grid
.awti-cons {

	border: 1px solid rgba(37, 99, 235, .16);

	border-left: 3px solid #2563eb;

	background:
		linear-gradient(
			135deg,
			#ecfdf5 0%,
			#ffffff 48%,
			#eff6ff 100%
		);
}


/* =========================================================
   HEADINGS
   ========================================================= */

.awti-device-single .awti-pros h2,
.awti-device-single .awti-cons h2 {

	margin: 0 0 12px;

	color: #0f172a;

	font-size: 18px;
	line-height: 1.3;
	font-weight: 800;
}


/* =========================================================
   PROS HEADING
   ========================================================= */

.awti-device-single .awti-pros h2 {

	color: #15803d;
}


/* =========================================================
   CONS HEADING
   BLUE — NO RED
   ========================================================= */

.awti-device-single .awti-cons h2 {

	color: #2563eb;
}


/* =========================================================
   LIST
   ========================================================= */

.awti-device-single .awti-pros ul,
.awti-device-single .awti-cons ul {

	margin: 0;
	padding: 0;

	list-style: none;
}


/* =========================================================
   LIST ITEM
   ========================================================= */

.awti-device-single .awti-pros li,
.awti-device-single .awti-cons li {

	position: relative;

	margin: 8px 0;

	padding-left: 25px;

	color: #475569;

	font-size: 13px;
	line-height: 1.55;
}


/* =========================================================
   PROS CHECK
   ========================================================= */

.awti-device-single .awti-pros li::before {

	content: "✓";

	position: absolute;

	left: 0;
	top: 0;

	width: 19px;
	height: 19px;

	display: flex;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background: #dcfce7;

	color: #15803d;

	font-size: 12px;
	font-weight: 900;
}


/* =========================================================
   CONS CROSS
   BLUE — NO RED
   ========================================================= */

.awti-device-single .awti-cons li::before {

	content: "×";

	position: absolute;

	left: 0;
	top: 0;

	width: 19px;
	height: 19px;

	display: flex;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background: #dbeafe;

	color: #2563eb;

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


/* =========================================================
   EMPTY / NO DATA
   ========================================================= */

.awti-device-single .awti-pros:empty,
.awti-device-single .awti-cons:empty {

	display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

	.awti-device-single .awti-pros-cons-grid {

		grid-template-columns: 1fr;

		gap: 10px;

		margin-top: 14px;
	}


	.awti-device-single .awti-pros-cons-grid
	.awti-device-card {

		padding: 14px;

		border-radius: 13px;
	}


	.awti-device-single .awti-pros h2,
	.awti-device-single .awti-cons h2 {

		font-size: 17px;
	}


	.awti-device-single .awti-pros li,
	.awti-device-single .awti-cons li {

		font-size: 12px;
	}

}