/**
 * ==========================================================
 * SHMT Premium Overview
 * SasthaHouse Marketplace Toolkit
 * ==========================================================
 */

/* ==========================================================
   Overview
========================================================== */

.shmt-overview{

	display:flex;

	flex-direction:column;

	gap:32px;

}

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

.shmt-overview__header{

	display:flex;

	flex-direction:column;

	gap:8px;

	padding-bottom:8px;

	border-bottom:1px solid #eef2f7;

}

.shmt-overview__subtitle{

	margin:0;

	font-size:15px;

	line-height:1.6;

	color:#6b7280;

}

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

.shmt-overview__grid{

	display:grid;

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

	gap:20px;

}

/* ==========================================================
   Card
========================================================== */

.shmt-overview-card{

	display:flex;

	align-items:center;

	gap:18px;

	padding:22px;

	background:#ffffff;

	border:1px solid #e5e7eb;

	border-radius:18px;

	box-shadow:

		0 8px 24px rgba(15,23,42,.04);

	transition:

		transform .25s ease,

		box-shadow .25s ease,

		border-color .25s ease;

}

.shmt-overview-card:hover{

	transform:translateY(-4px);

	border-color:#cbd5e1;

	box-shadow:

		0 18px 42px rgba(15,23,42,.08);

}

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

.shmt-overview-card__icon{

	display:flex;

	align-items:center;

	justify-content:center;

	width:58px;

	height:58px;

	border-radius:16px;

	background:linear-gradient(
		135deg,
		#eff6ff,
		#dbeafe
	);

	font-size:28px;

	flex-shrink:0;

	box-shadow:

		inset 0 0 0 1px rgba(59,130,246,.08);

}

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

.shmt-overview-card__content{

	display:flex;

	flex-direction:column;

	min-width:0;

	gap:6px;

}

/* ==========================================================
   Label
========================================================== */

.shmt-overview-card__label{

	font-size:13px;

	font-weight:600;

	text-transform:uppercase;

	letter-spacing:.08em;

	color:#64748b;

}

/* ==========================================================
   Value
========================================================== */

.shmt-overview-card__value{

	font-size:18px;

	font-weight:700;

	line-height:1.4;

	color:#111827;

	word-break:break-word;

}

/* ==========================================================
   Empty State
========================================================== */

.shmt-overview__empty{

	padding:50px 24px;

	text-align:center;

	border:2px dashed #dbe4f3;

	border-radius:18px;

	background:#fcfdff;

}

.shmt-overview__empty p{

	margin:0;

	color:#6b7280;

	font-size:15px;

}

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

@media (max-width:991px){

	.shmt-overview{

		gap:26px;

	}

	.shmt-overview__grid{

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

		gap:18px;

	}

	.shmt-overview-card{

		padding:20px;

	}

}

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

@media (max-width:767px){

	.shmt-overview{

		gap:22px;

	}

	.shmt-overview__grid{

		grid-template-columns:1fr;

		gap:16px;

	}

	.shmt-overview-card{

		padding:18px;

		border-radius:16px;

	}

	.shmt-overview-card__icon{

		width:50px;

		height:50px;

		border-radius:14px;

		font-size:24px;

	}

	.shmt-overview-card__label{

		font-size:12px;

	}

	.shmt-overview-card__value{

		font-size:16px;

	}

}

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

@media (max-width:480px){

	.shmt-overview-card{

		padding:16px;

		gap:14px;

	}

	.shmt-overview-card__icon{

		width:46px;

		height:46px;

		font-size:22px;

	}

}

/* ==========================================================
   Accessibility
========================================================== */

@media (prefers-reduced-motion:reduce){

	.shmt-overview-card{

		transition:none;

	}

	.shmt-overview-card:hover{

		transform:none;

	}

}