/* Maverick Product Specifications — Frontend Styles */

.maverick-specs-frontend {
	margin: 48px 0 32px;
	font-family: inherit;
}

/* ── Main heading ── */
.maverick-specs-heading {
	/* font-size: 20px !important;
	font-weight: 700 !important;
	color: #1a1a2e !important;
	padding-bottom: 14px !important; */
	margin: 0 0 28px !important;
}

/* ── Group ── */
.maverick-spec-group {
	margin-bottom: 28px;
}

.maverick-spec-group-title {
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #6b7280 !important;
	margin: 0 0 8px 2px !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
}

/* ── Card ── */
.maverick-spec-grid {
	border-radius: 12px;
	background: #eef2f9;
	/* overflow stays visible so tooltips are never clipped;
	   corners are handled per-cell below */
}

/* Round the four corner cells instead of using overflow:hidden on the grid */
.maverick-spec-row:first-child .maverick-spec-col:first-child { border-top-left-radius: 12px; }
.maverick-spec-row:first-child .maverick-spec-col:last-child  { border-top-right-radius: 12px; }
.maverick-spec-row:last-child  .maverick-spec-col:first-child { border-bottom-left-radius: 12px; }
.maverick-spec-row:last-child  .maverick-spec-col:last-child  { border-bottom-right-radius: 12px; }

/* ── Row — one spec per row ── */
.maverick-spec-row {
	display: flex;
	border-bottom: 1px solid #dde5f0;
}

.maverick-spec-row:last-child {
	border-bottom: none;
}

/* ── Two 50/50 columns ── */
.maverick-spec-col {
	width: 50%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
}

/* Label column */
.maverick-spec-col--label {
	border-right: 1px solid #dde5f0;
	font-weight: 600;
	font-size: 14px;
	color: #1e293b;
}

.maverick-spec-label {
	line-height: 1.4;
}

/* Value column */
.maverick-spec-col--value {
	font-size: 14px;
	color: #4b5563;
}

.maverick-spec-col--check {
	color: #2b7fd4;
	font-weight: 500;
}

.maverick-spec-col--cross {
	color: #9ca3af;
}

.maverick-spec-icon {
	flex-shrink: 0;
}

/* ── Hint icon + CSS tooltip ── */
.maverick-hint-icon {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
	cursor: help;
	transition: color 0.15s;
}

.maverick-hint-icon:hover {
	color: #2b7fd4;
}

.maverick-hint-icon::before,
.maverick-hint-icon::after {
	position: absolute;
	left: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 9999;
}

/* Arrow */
.maverick-hint-icon::before {
	content: '';
	bottom: calc(100% + 4px);
	transform: translateX(-50%) translateY(4px);
	border: 5px solid transparent;
	border-top-color: #1e293b;
}

/* Bubble */
.maverick-hint-icon::after {
	content: attr(data-tooltip);
	bottom: calc(100% + 9px);
	transform: translateX(-50%) translateY(4px);
	background: #1e293b;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
	padding: 6px 10px;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.2);
	max-width: 260px;
	white-space: normal;
	text-align: left;
	line-height: 1.4;
}

.maverick-hint-icon:hover::before,
.maverick-hint-icon:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ── Mobile ── */
@media (max-width: 600px) {
	.maverick-specs-heading {
		font-size: 17px !important;
	}

	.maverick-spec-row {
		flex-direction: column;
	}

	.maverick-spec-col {
		width: 100%;
	}

	.maverick-spec-col--label {
		border-right: none;
		border-bottom: 1px solid #dde5f0;
		padding-bottom: 8px;
	}

	.maverick-spec-col--value {
		padding-top: 8px;
	}

	/* Tooltip opens downward on mobile to avoid clipping */
	.maverick-hint-icon::before {
		bottom: auto;
		top: calc(100% + 4px);
		border-top-color: transparent;
		border-bottom-color: #1e293b;
		transform: translateX(-50%) translateY(-4px);
	}

	.maverick-hint-icon::after {
		bottom: auto;
		top: calc(100% + 9px);
		transform: translateX(-50%) translateY(-4px);
	}

	.maverick-hint-icon:hover::before,
	.maverick-hint-icon:hover::after {
		transform: translateX(-50%) translateY(0);
	}
}