/**
 * Team bundle roster card — cart & checkout line-item details.
 *
 * Restyles the woocommerce_get_item_data rows for team bundle lines into a
 * varsity roster card. Pure CSS over WooCommerce Blocks' generated markup:
 * a row qualifies as a bundle when it contains a "Player N" detail span, so
 * everything is scoped through :has() and other products are untouched.
 *
 * Brand tokens mirror assets/src/shared/style.css ([data-team-ui-root]).
 */

.wc-block-components-product-details:has([class*="wc-block-components-product-details__player-"]) {
	--rdp-paper: #f7f8fa;
	--rdp-grey-100: #eef0f2;
	--rdp-grey-200: #e1e5ea;
	--rdp-grey-600: #5b626c;
	--rdp-ink: #1b1e24;
	--rdp-red: #d2232a;
	--rdp-blue: #1e3a5f;
	--rdp-blue-100: #e5ecf3;

	display: block;
	margin: 0.75rem 0 0.25rem;
	padding: 0.875rem 1rem 0.5rem;
	border: 1px solid var(--rdp-grey-200);
	border-radius: 0.75rem;
	background:
		linear-gradient(var(--rdp-paper), var(--rdp-paper)) padding-box,
		var(--rdp-paper);
	font-family: 'Archivo', 'Helvetica Neue', sans-serif;
}

/* Kicker above the shared choices. */
.wc-block-components-product-details:has([class*="wc-block-components-product-details__player-"])::before {
	content: 'Team kit';
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rdp-red);
}

/* Kill Blocks' inline " / " separators. */
.wc-block-components-product-details:has([class*="wc-block-components-product-details__player-"]) > span > span[aria-hidden="true"] {
	display: none;
}

/* Shared choices (fabric, logo, color, …): inline pills above the roster. */
.wc-block-components-product-details:has([class*="wc-block-components-product-details__player-"]) > span:not([class*="wc-block-components-product-details__player-"]) {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	margin: 0 0.375rem 0.5rem 0;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--rdp-grey-200);
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.75rem;
	line-height: 1.2;
	color: var(--rdp-ink);
}

.wc-block-components-product-details:has([class*="wc-block-components-product-details__player-"]) > span:not([class*="wc-block-components-product-details__player-"]) .wc-block-components-product-details__name {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rdp-grey-600);
}

/* Roster rows. */
.wc-block-components-product-details:has([class*="wc-block-components-product-details__player-"]) > span[class*="wc-block-components-product-details__player-"] {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	padding: 0.45rem 0.125rem;
	border-top: 2px dashed var(--rdp-grey-200);
	font-size: 0.8125rem;
	color: var(--rdp-ink);
}

/* First roster row gets the heavier "cut here" divider from the builder. */
.wc-block-components-product-details:has([class*="wc-block-components-product-details__player-"]) > span[class*="wc-block-components-product-details__player-"]:first-of-type {
	margin-top: 0.25rem;
	border-top: 3px dashed var(--rdp-blue);
}

.wc-block-components-product-details:has([class*="wc-block-components-product-details__player-"]) > span[class*="wc-block-components-product-details__player-"] .wc-block-components-product-details__name {
	flex: 0 0 5.5rem;
	font-family: 'Anton', 'Impact', sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rdp-blue);
	white-space: nowrap;
}

.wc-block-components-product-details:has([class*="wc-block-components-product-details__player-"]) > span[class*="wc-block-components-product-details__player-"] .wc-block-components-product-details__value {
	font-weight: 500;
}

/* Classic cart/checkout fallback: same card on dl.variation rows. */
dl.variation:has([class*="variation-Player"]) {
	display: block;
	margin: 0.75rem 0 0.25rem;
	padding: 0.875rem 1rem 0.5rem;
	border: 1px solid #e1e5ea;
	border-radius: 0.75rem;
	background: #f7f8fa;
}

dl.variation:has([class*="variation-Player"]) dt {
	float: none;
	margin: 0;
	font-size: 0.8125rem;
	font-family: 'Anton', 'Impact', sans-serif;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1e3a5f;
}

dl.variation:has([class*="variation-Player"]) dd {
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	color: #1b1e24;
}