/**
 * ==========================================================
 * SHMT Shared Components
 * SasthaHouse Marketplace Toolkit
 * ==========================================================
 *
 * Shared UI Components
 *
 * @package SHMT
 */

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

.shmt-card {

	background: var(--shmt-surface);

	border: 1px solid var(--shmt-border);

	border-radius: var(--shmt-radius-lg);

	box-shadow: var(--shmt-shadow-sm);

	padding: var(--shmt-space-6);

	transition:
		box-shadow var(--shmt-transition),
		border-color var(--shmt-transition);

}

.shmt-card:hover {

	box-shadow: var(--shmt-shadow-md);

	border-color: rgba(37, 99, 235, .12);

}

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

.shmt-card-header {

	display: flex;

	flex-direction: column;

	gap: var(--shmt-space-3);

}

.shmt-card-title {

	margin: 0;

	font-size: var(--shmt-text-xl);

	font-weight: var(--shmt-font-bold);

	line-height: 1.3;

	color: var(--shmt-text-primary);

}

.shmt-card-subtitle {

	margin: 0;

	font-size: var(--shmt-text-sm);

	color: var(--shmt-text-secondary);

}

/* ==========================================================
   Buttons
========================================================== */

.shmt-btn {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: var(--shmt-space-2);

	padding:
		var(--shmt-space-3)
		var(--shmt-space-6);

	border: none;

	border-radius: var(--shmt-radius-pill);

	font-size: var(--shmt-text-base);

	font-weight: var(--shmt-font-semibold);

	text-decoration: none;

	cursor: pointer;

	user-select: none;

	white-space: nowrap;

	transition: all var(--shmt-transition);

}

/* ==========================================================
   Button - Primary
========================================================== */

.shmt-btn--primary {

	background: var(--shmt-primary);

	color: var(--shmt-white);

}

.shmt-btn--primary:hover {

	background: var(--shmt-primary-hover);

	box-shadow: var(--shmt-shadow-md);

}

/* ==========================================================
   Button - Secondary
========================================================== */

.shmt-btn--secondary {

	background: var(--shmt-surface-alt);

	color: var(--shmt-text-primary);

	border: 1px solid var(--shmt-border);

}

.shmt-btn--secondary:hover {

	background: var(--shmt-surface);

	box-shadow: var(--shmt-shadow-sm);

}

/* ==========================================================
   Button - Outline
========================================================== */

.shmt-btn--outline {

	background: transparent;

	color: var(--shmt-primary);

	border: 1px solid var(--shmt-primary);

}

.shmt-btn--outline:hover {

	background: rgba(37,99,235,.08);

}

/* ==========================================================
   Badge
========================================================== */

.shmt-badge {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 6px 12px;

	border-radius: var(--shmt-radius-pill);

	font-size: var(--shmt-text-xs);

	font-weight: var(--shmt-font-semibold);

	line-height: 1;

	white-space: nowrap;

}

/* Primary */

.shmt-badge--primary {

	background: rgba(37,99,235,.12);

	color: var(--shmt-primary);

}

/* Success */

.shmt-badge--success {

	background: rgba(22,163,74,.12);

	color: var(--shmt-success);

}

/* Warning */

.shmt-badge--warning {

	background: rgba(245,158,11,.15);

	color: var(--shmt-warning);

}

/* Danger */

.shmt-badge--danger {

	background: rgba(220,38,38,.12);

	color: var(--shmt-danger);

}

/* ==========================================================
   Chip
========================================================== */

.shmt-chip {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 8px 16px;

	background: var(--shmt-surface-alt);

	border: 1px solid var(--shmt-border);

	border-radius: var(--shmt-radius-pill);

	font-size: var(--shmt-text-sm);

	font-weight: var(--shmt-font-medium);

	color: var(--shmt-text-primary);

	white-space: nowrap;

	transition: all var(--shmt-transition);

}

.shmt-chip:hover {

	background: var(--shmt-surface);

	box-shadow: var(--shmt-shadow-sm);

}

/* ==========================================================
   Divider
========================================================== */

.shmt-divider {

	width: 100%;

	height: 1px;

	background: var(--shmt-border);

	margin:
		var(--shmt-space-6)
		0;

}

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

.shmt-section-heading {

	display: flex;

	align-items: center;

	justify-content: space-between;

	flex-wrap: wrap;

	gap: var(--shmt-space-3);

	margin-bottom: var(--shmt-space-6);

}

.shmt-section-title {

	margin: 0;

	font-size: var(--shmt-text-2xl);

	font-weight: var(--shmt-font-bold);

	color: var(--shmt-text-primary);

}

/* ==========================================================
   Pill
========================================================== */

.shmt-pill {

	display: inline-flex;

	align-items: center;

	gap: var(--shmt-space-2);

	padding: 8px 16px;

	background: var(--shmt-surface-alt);

	border-radius: var(--shmt-radius-pill);

	font-size: var(--shmt-text-sm);

	color: var(--shmt-text-secondary);

}

/* ==========================================================
   Skeleton Loading
========================================================== */

.shmt-skeleton {

	background: linear-gradient(
		90deg,
		#f1f5f9 25%,
		#e2e8f0 37%,
		#f1f5f9 63%
	);

	background-size: 400% 100%;

	border-radius: var(--shmt-radius-md);

	animation: shmt-loading 1.4s ease infinite;

}

@keyframes shmt-loading {

	0% {

		background-position: 100% 0;

	}

	100% {

		background-position: -100% 0;

	}

}

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

.shmt-empty {

	text-align: center;

	padding: var(--shmt-space-10);

	color: var(--shmt-text-muted);

}

/* ==========================================================
   Responsive Utilities
========================================================== */

@media (max-width: 767px) {

	.shmt-card {

		padding: var(--shmt-space-5);

	}

	.shmt-card-title {

		font-size: var(--shmt-text-lg);

	}

	.shmt-section-title {

		font-size: var(--shmt-text-xl);

	}

	.shmt-btn {

		width: 100%;

	}

}

@media (min-width: 768px) {

	.shmt-btn {

		width: auto;

	}

}