/**
 * Variation Information Blocks - Admin & Frontend Styles
 *
 * @package Salient-Child
 */

/* ========================================
   ADMIN META BOX STYLES
   ======================================== */

.scd-vib-block {
	margin-bottom: 25px;
	padding: 15px;
	border: 1px solid #e2e2e2;
	background: #fafafa;
}

.scd-vib-block-header {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 10px;
	margin-bottom: 15px;
	align-items: center;
}

.scd-vib-block-header input[type="text"] {
	width: 100%;
}

.scd-vib-block-header select {
	width: 100%;
}

.scd-vib-block-content {
	margin-bottom: 10px;
}

.scd-vib-actions {
	margin-top: 15px;
}

/* ========================================
   FRONTEND STYLES
   ======================================== */

.scd-variation-info {
	margin-top: 32px;
}

.scd-vib-top__nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.scd-vib-chip {
	padding: 10px 20px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease;
	user-select: none;
}

.scd-vib-chip:hover {
	border-bottom-color: #008575;
}

.scd-vib-chip.is-active {
	border-bottom-color: #008575;
	font-weight: 600;
}

.scd-variation-info__inner {
	margin-top: 12px;
}