/**
 * Module G (Store Bridge absorption) — Pilot drawer Merch Account
 * section styling + the reusable [data-tk-tooltip] bubble. Every
 * selector is prefixed .tksb- (kept from the original trikdang-store-
 * bridge plugin on purpose — zero risk, zero reason to rename working
 * CSS) or targets [data-tk-tooltip], so nothing here collides with
 * existing theme classes.
 */

.tksb-group-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 18px 0 6px;
	padding: 0 2px;
}

.tksb-merch-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.tksb-merch-section .site-app-header__pilot-card-btn {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* ---- Tooltips -------------------------------------------------------
 * Custom styled bubble for any element carrying data-tk-tooltip. The
 * native `title` attribute is always set alongside it (see
 * tkasc-storebridge.js) as a plain-text/accessibility fallback wherever
 * a screen reader or browser doesn't render the CSS bubble.
 */
[data-tk-tooltip] {
	position: relative;
}

[data-tk-tooltip]::after {
	content: attr( data-tk-tooltip );
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% ) translateY( 4px );
	background: rgba( 20, 20, 20, 0.92 );
	color: #fff;
	font-size: 11px;
	line-height: 1.35;
	font-weight: 400;
	white-space: normal;
	width: max-content;
	max-width: 220px;
	padding: 6px 10px;
	border-radius: 6px;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 60;
}

[data-tk-tooltip]:hover::after,
[data-tk-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateX( -50% ) translateY( 0 );
}

.site-app-header__pilot-section [data-tk-tooltip]::after {
	left: 0;
	transform: translateX( 0 ) translateY( 4px );
	max-width: 260px;
}

.site-app-header__pilot-section [data-tk-tooltip]:hover::after,
.site-app-header__pilot-section [data-tk-tooltip]:focus-visible::after {
	transform: translateX( 0 ) translateY( 0 );
}