/**
 * BlackSpace Founding Seller - badge + tooltip + admin styles.
 *
 * Surfaces:
 *   Shop loop / archive / search / related / `/shop/` Algolia product cards
 *                                      : .bs-founding-badge--icon placed by JS
 *                                        into the shared `.bs-badge-stack`
 *                                        (top-LEFT of .wd-product-thumb), order 10
 *                                        so it always sits ABOVE the Handmade
 *                                        Pledge badge and any future badge.
 *   Single product page                : .bs-founding-badge--medallion (inside
 *                                          .dokan-vendor-info-wrap as second flex row)
 *   Dokan store header                 : .bs-founding-badge--medallion (centered below
 *                                          the .elementor-widget-dokan-store-name)
 *   Store listing tile                 : .bs-founding-badge--icon (positioned by JS
 *                                          inside .dokan-single-seller .store-wrapper
 *                                          as an absolute overlay; this is a SELLER
 *                                          tile, not a product card, so it keeps its
 *                                          own corner and is not part of the product
 *                                          badge stack — pledge never appears here)
 *   Admin: user profile fieldset       : .bs-founding-seller-profile
 *   Admin: users list column           : .bs-founding-seller-col
 */

:root {
	--bs-founding-color: #c9a047;
	--bs-founding-color-deep: #8a6a1f;
	--bs-founding-text: #1a1a1a;
	--bs-founding-bg: #fff8e6;
	--bs-founding-border: #e7d28f;
	--bs-founding-tooltip-bg: #1a1a1a;
	--bs-founding-tooltip-fg: #fff;
	--bs-founding-tooltip-radius: 6px;
	--bs-founding-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* ---- Base ---- */

.bs-founding-badge {
	display: inline-flex;
	align-items: center;
	position: relative;
	color: var(--bs-founding-color);
	font-family: inherit;
	line-height: 1;
	vertical-align: middle;
	box-sizing: border-box;
}

.bs-founding-badge:focus-visible {
	outline: 2px solid var(--bs-founding-color);
	outline-offset: 2px;
	border-radius: 999px;
}

.bs-founding-badge .bs-founding-seller-svg {
	display: block;
	flex-shrink: 0;
}

/* ---- Icon-only variant (product cards + store listing tiles) ---- */

.bs-founding-badge--icon {
	width: 18px;
	height: 18px;
	margin-left: 6px;
	cursor: help;
}

.bs-founding-badge--icon .bs-founding-seller-svg {
	width: 100%;
	height: 100%;
}

/* ---- Product-card overlay: shared left stack (preferred path) ----
 *
 * On product cards, JS moves the icon into the shared `.bs-badge-stack`
 * (owned by bs-badge-stack) which is anchored top-LEFT of the product image.
 * Here the badge is a static flex child; the stack handles positioning. The
 * `order: 10` keeps Founding Seller above the Handmade Pledge (order 20) and
 * any future badge, no matter which plugin's JS runs first.
 */

.bs-badge-stack > .bs-founding-badge--icon {
	position: static;
	order: 10;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	cursor: help;
}

.bs-badge-stack > .bs-founding-badge--icon .bs-founding-seller-svg {
	width: 100%;
	height: 100%;
}

/* ---- Product-card overlay: fallback (stack helper absent) ----
 *
 * Insurance only. If bs-badge-stack ever fails to load, the icon stays a
 * direct child of the image wrapper; position it top-LEFT (matching the new
 * convention) so it never returns to the top-right corner that collides with
 * WoodMart's wishlist / compare buttons. Mutually exclusive with the stack
 * rule above by DOM structure (a stacked badge is not a direct child of the
 * thumb), so the two never conflict.
 */

.wd-product-thumb,
.product-image-link {
	position: relative;
}

.wd-product-thumb > .bs-founding-badge--icon,
.product-image-link > .bs-founding-badge--icon {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
}

.wd-product-thumb > .bs-founding-badge--icon .bs-founding-seller-svg,
.product-image-link > .bs-founding-badge--icon .bs-founding-seller-svg {
	width: 100%;
	height: 100%;
}

/* ---- Store listing tile (seller tile — separate surface, own corner) ----
 *
 * This is a SELLER tile, not a product card. Pledge badges never appear here,
 * so there's nothing to stack and no wishlist button to clear. Keep the
 * existing top-right overlay placement inside `.store-wrapper`. Appending the
 * badge there as the last child puts it above the sibling `.store-content`
 * overlay by DOM order; z-index is a defensive backstop.
 */

.dokan-single-seller .store-wrapper {
	position: relative;
}

.dokan-single-seller .store-wrapper > .bs-founding-badge--icon {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 10;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 3px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
}

.dokan-single-seller .store-wrapper > .bs-founding-badge--icon .bs-founding-seller-svg {
	width: 100%;
	height: 100%;
}

/* ---- Responsive: shrink card-overlay badges on small viewports ---- */

@media (max-width: 575px) {
	.bs-badge-stack > .bs-founding-badge--icon,
	.wd-product-thumb > .bs-founding-badge--icon,
	.product-image-link > .bs-founding-badge--icon {
		width: 26px;
		height: 26px;
		padding: 2px;
	}
}

/* ---- Medallion variant (single product, storefront header) ---- */

.bs-founding-badge--medallion {
	background: var(--bs-founding-bg);
	border: 1px solid var(--bs-founding-border);
	border-radius: 999px;
	padding: 6px 14px 6px 8px;
	gap: 8px;
	font-size: 13px;
	color: var(--bs-founding-text);
	cursor: help;
}

.bs-founding-badge--medallion .bs-founding-badge__icon {
	display: inline-flex;
	color: var(--bs-founding-color);
}

.bs-founding-badge--medallion .bs-founding-badge__text {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.bs-founding-badge--medallion .bs-founding-badge__label {
	font-weight: 600;
	letter-spacing: 0.2px;
}

.bs-founding-badge--medallion .bs-founding-badge__number {
	font-weight: 500;
	color: var(--bs-founding-color-deep);
	font-variant-numeric: tabular-nums;
}

/* Single product context: server-rendered wrapper */

.bs-founding-badge-wrap--single {
	margin: 0 0 12px;
}

.woocommerce div.product .bs-founding-badge-wrap--single {
	margin-bottom: 14px;
}

/* Single product context: JS-injected inside `.dokan-vendor-info-wrap` */

.dokan-vendor-info-wrap:has(> .bs-founding-badge-wrap--single) {
	flex-wrap: wrap;
}

.dokan-vendor-info-wrap > .bs-founding-badge-wrap--single {
	flex-basis: 100%;
	width: 100%;
	margin: 8px 0 0;
	order: 99;
}

/* Dokan store header context: medallion centered under the store name */

.bs-founding-badge-wrap--store-header {
	display: flex;
	justify-content: center;
	margin: 8px 0 16px;
}

/* ---- Tooltip ---- */

.bs-founding-tooltip {
	position: absolute;
	z-index: 999999;
	max-width: 260px;
	background: var(--bs-founding-tooltip-bg);
	color: var(--bs-founding-tooltip-fg);
	padding: 8px 12px;
	border-radius: var(--bs-founding-tooltip-radius);
	box-shadow: var(--bs-founding-tooltip-shadow);
	font-size: 12px;
	line-height: 1.4;
	pointer-events: none;
	opacity: 0;
	transform: translateX(-50%) translateY(4px);
	transition: opacity 120ms ease, transform 120ms ease;
}

.bs-founding-tooltip.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.bs-founding-tooltip.is-mobile {
	pointer-events: auto;
}

/* ---- Screen reader text fallback ---- */

.bs-founding-badge .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---- Admin: user profile fieldset ---- */

.bs-founding-seller-profile .description {
	margin-top: 6px;
}

.bs-founding-seller-cohort-counter {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}

/* ---- Admin: users list column ---- */

.bs-founding-seller-col {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.bs-founding-seller-col--active {
	color: var(--bs-founding-color-deep);
}

.bs-founding-seller-col--revoked {
	color: #999;
	text-decoration: line-through;
}

.bs-founding-seller-col--empty {
	color: #ccc;
}