/**
 * Badge system v2 — token-driven, preset-composable.
 *
 * Ships alongside the legacy badge-styles.css (which keeps .lpk-bs--sN
 * classes as aliases for cached HTML). New code emits .lpk-bdg + .s-*
 * (shape) + .c-* (colour) + optional .v-* (variant) class triples.
 *
 * Size is global — body[data-size="..."] swaps the token set so every
 * badge inherits the chosen height + font size.
 *
 * @package LogitechPakistan
 * @phase 5-Q (best-seller mockup-matching rewrite)
 */

/* ============================================================================
 * Global size tokens — body class drives every badge sitewide
 * ============================================================================ */
:root {
	--lpk-bdg-h:   28px;
	--lpk-bdg-fs:  11.5px;
	--lpk-bdg-px:  10px;
	--lpk-bdg-gap: 6px;
}
body[data-bdg-size="compact"],  body.lpk-bdg-size-compact  { --lpk-bdg-h: 24px; --lpk-bdg-fs: 11px;   }
body[data-bdg-size="standard"], body.lpk-bdg-size-standard { --lpk-bdg-h: 28px; --lpk-bdg-fs: 11.5px; }
body[data-bdg-size="large"],    body.lpk-bdg-size-large    { --lpk-bdg-h: 32px; --lpk-bdg-fs: 13px;   }

/* "Legacy classic" — restores the original pre-v2 badge style sourced directly
 * from the theme's design tokens, so it stays consistent with the rest of the
 * site if a token ever shifts. Spec the operator pinned down:
 *   font: var(--font-body) 600 var(--fs-caption)/1.2 · letter-spacing var(--ls-caps)
 *   padding: 4px 8px · gap: var(--space-1) · radius: var(--radius-sm) · UPPERCASE
 *   bg: var(--color-accent-mint) · color: var(--color-text-primary)
 * Height is auto so padding alone defines geometry; explicit overrides use
 * !important to win over per-shape radius + per-variant geometry tweaks. */
body[data-bdg-size="legacy"], body.lpk-bdg-size-legacy {
	--lpk-bdg-h:   auto;
	--lpk-bdg-fs:  var(--fs-caption, 12px);
	--lpk-bdg-px:  8px;
	--lpk-bdg-gap: var(--space-1, 4px);
}
body[data-bdg-size="legacy"] .lpk-bdg,
body.lpk-bdg-size-legacy   .lpk-bdg {
	height: auto !important;
	padding: 4px 8px !important;
	border-radius: var(--radius-sm, 4px) !important;
	font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
	font-size: var(--fs-caption, 12px) !important;
	font-weight: var(--fw-semibold, 600) !important;
	letter-spacing: var(--ls-caps, 0.05em) !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	box-sizing: border-box !important;
}
/* Keep the circle shape recognisable (rank-only) — opt out of legacy radius. */
body[data-bdg-size="legacy"] .lpk-bdg.s-circle,
body.lpk-bdg-size-legacy   .lpk-bdg.s-circle { border-radius: 999px !important; padding: 4px 6px !important; }
/* Ribbon clip-path overrides the radius look — keep it. */
body[data-bdg-size="legacy"] .lpk-bdg.s-ribbon,
body.lpk-bdg-size-legacy   .lpk-bdg.s-ribbon { border-radius: 0 !important; padding-right: 14px !important; }

/* ============================================================================
 * Badge primitive — every preset inherits these tokens
 * ============================================================================ */
.lpk-bdg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lpk-bdg-gap);
	height: var(--lpk-bdg-h);
	padding: 0 var(--lpk-bdg-px);
	font-size: var(--lpk-bdg-fs);
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1;
	white-space: nowrap;
	font-family: inherit;
	box-sizing: border-box;
}
.lpk-bdg svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ============================================================================
 * Shape classes (per-label, independent of preset)
 * ============================================================================ */
.lpk-bdg.s-pill    { border-radius: 999px; }
.lpk-bdg.s-rounded { border-radius: 5px; }
.lpk-bdg.s-flat    { border-radius: 0; }
.lpk-bdg.s-ribbon  { border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); padding-right: 16px; }
.lpk-bdg.s-corner  { border-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.lpk-bdg.s-circle  { border-radius: 999px; padding: 0; min-width: var(--lpk-bdg-h); }
.lpk-bdg.s-circle .lbl { display: none; }

/* ============================================================================
 * Colour themes — 23 named themes used by presets + colour-override
 * ============================================================================ */
.c-gold         { background: linear-gradient(180deg, #FCD34D, #F59E0B); color: #1A1A1A; box-shadow: inset 0 -1.5px 0 rgba(0,0,0,0.18); }
.c-silver       { background: linear-gradient(180deg, #E2E8F0, #94A3B8); color: #1A1A1A; }
.c-bronze       { background: linear-gradient(180deg, #FCD9B6, #B45309); color: #fff; }
.c-amazon       { background: #FF9900; color: #1A1A1A; }
.c-bestbuy      { background: #FFE000; color: #1A1A1A; }
.c-walmart      { background: #0071CE; color: #fff; }
.c-ali          { background: #DC2626; color: #fff; }
.c-newegg       { background: #E26F1F; color: #fff; }
.c-daraz        { background: #F57224; color: #fff; }
.c-teal         { background: #00ECC2; color: #1A1A1A; }
.c-teal-deep    { background: linear-gradient(180deg, #00ECC2, #00B89E); color: #fff; }
.c-soft-mint    { background: rgba(0, 184, 158, 0.14); color: #047857; box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.20); }
.c-soft-gold    { background: rgba(245, 158, 11, 0.14); color: #92400E; box-shadow: inset 0 0 0 1px rgba(146, 64, 14, 0.20); }
.c-soft-pink    { background: rgba(220, 38, 38, 0.10); color: #B91C1C; box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.18); }
.c-soft-purple  { background: rgba(139, 92, 246, 0.12); color: #5B21B6; box-shadow: inset 0 0 0 1px rgba(91, 33, 182, 0.18); }
.c-black        { background: #1A1A1A; color: #fff; }
.c-black-gold   { background: #1A1A1A; color: #FFD700; }
.c-black-silver { background: #1A1A1A; color: #C0C0C0; }
.c-black-bronze { background: #1A1A1A; color: #CD7F32; }
.c-white-sh     { background: #fff; color: #1A1A1A; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06); }
.c-outlined     { background: #fff; color: #1A1A1A; box-shadow: inset 0 0 0 1px #1A1A1A; }
.c-fire         { background: linear-gradient(135deg, #FCD34D, #DC2626); color: #fff; }
.c-purple       { background: linear-gradient(135deg, #8B5CF6, #3B82F6); color: #fff; }
.c-newegg-grn   { background: #16A34A; color: #fff; }
.c-dim-green    { background: rgba(16, 163, 74, 0.15); color: #15803D; }

/* ============================================================================
 * Trophy Translucent (S13) — matches the live spec exactly
 * White translucent pill with rank-coloured text + brighter trophy icon.
 * Position-aware: c-trans-gold/silver/bronze for #1/#2/#3.
 * ============================================================================ */
.c-trans-gold   { background: rgba(255,255,255,0.94); color: #92400E; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.c-trans-silver { background: rgba(255,255,255,0.94); color: #334155; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.c-trans-bronze { background: rgba(255,255,255,0.94); color: #7C2D12; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.c-trans-teal   { background: rgba(255,255,255,0.94); color: #134E4A; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }   /* #4-#10 */

/* Trophy icon takes a DIFFERENT (brighter) accent colour than the text */
.c-trans-gold   svg { color: #F59E0B; }
.c-trans-silver svg { color: #64748B; }
.c-trans-bronze svg { color: #B45309; }
.c-trans-teal   svg { color: #0F766E; }

.v-trophy-trans {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 10.5px;
	gap: 5px;
	padding: 0 10px;
	height: calc(var(--lpk-bdg-h) - 4px);
	border-radius: 12px;
}
.v-trophy-trans.s-pill    { border-radius: 999px; }
.v-trophy-trans.s-flat    { border-radius: 0; }
.v-trophy-trans.s-rounded { border-radius: 6px; }
.v-trophy-trans svg { width: 12px; height: 12px; }
.v-trophy-trans .lbl { color: inherit; font-weight: inherit; letter-spacing: inherit; }

/* ============================================================================
 * S4 Medal — numbered circle prefix; position-aware via .pos-N
 * ============================================================================ */
.v-medal-circle { padding-left: 4px; }
.v-medal-circle .medal-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: calc(var(--lpk-bdg-h) - 8px); height: calc(var(--lpk-bdg-h) - 8px);
	border-radius: 999px;
	font-weight: 900; font-family: Manrope, sans-serif;
	background: linear-gradient(180deg, #FCD34D, #F59E0B); color: #1A1A1A;
	margin-right: 4px;
	font-size: calc(var(--lpk-bdg-fs) + 1px);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18);
}
.v-medal-circle.pos-2 .medal-num { background: linear-gradient(180deg, #E2E8F0, #94A3B8); }
.v-medal-circle.pos-3 .medal-num { background: linear-gradient(180deg, #FCD9B6, #B45309); color: #fff; }
.v-medal-circle.pos-4 .medal-num { background: linear-gradient(180deg, #5EEAD4, #0F766E); color: #fff; }

/* ============================================================================
 * S6 Stripe ribbon (eBay / Etsy diagonal-clip)
 * ============================================================================ */
.v-stripe {
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
	padding-right: 18px;
	text-transform: uppercase; letter-spacing: 0.06em;
	border-radius: 0 !important;
}

/* ============================================================================
 * S9 Under-title — soft chip with star prefix
 * ============================================================================ */
.v-undertitle { font-size: calc(var(--lpk-bdg-fs) - 0.5px); font-weight: 600; }
.v-undertitle .lbl::before { content: '★ '; color: inherit; }

/* ============================================================================
 * S11 Soft chip — Sonos / B&H micro-pill
 * ============================================================================ */
.v-soft-bh {
	background: #F4F4F5; color: #1A1A1A;
	box-shadow: inset 0 0 0 1px #D4D4D8;
	font-size: calc(var(--lpk-bdg-fs) - 0.5px);
	font-weight: 600;
}

/* ============================================================================
 * S12 Gradient banner — full-width gaming / marketplace strip
 * ============================================================================ */
.v-banner {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	color: #FFD700;
	text-transform: uppercase; letter-spacing: 0.08em;
	box-shadow: inset 0 0 0 1px rgba(255,215,0,0.3);
}

/* ============================================================================
 * Stock indicator dot — currently live design
 * ============================================================================ */
.lpk-stock-dot {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11.5px; font-weight: 600; line-height: 1;
	height: var(--lpk-bdg-h); font-family: inherit;
}
.lpk-stock-dot .dot {
	width: 7px; height: 7px; border-radius: 50%;
	flex-shrink: 0; display: inline-block;
}
.lpk-stock-dot--in { color: #047857; }
.lpk-stock-dot--in .dot { background: #10B981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15); }
.lpk-stock-dot--out { color: #B91C1C; }
.lpk-stock-dot--out .dot { background: #DC2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12); }

/* ============================================================================
 * Visibility helpers (parents toggle these — already in legacy CSS)
 *   .lpk-badge--hide-small      hidden inside .lpk-product-grid / .product-grid on mobile
 *   .lpk-badge--hide-carousel   hidden inside .lpk-rail / .product-rail
 * These rules are intentionally redundant with badge-styles.css so v2
 * works even if the legacy stylesheet load order changes.
 * ============================================================================ */
.lpk-rail .lpk-badge--hide-carousel,
.product-rail .lpk-badge--hide-carousel { display: none !important; }

@media (max-width: 640px) {
	.lpk-grid .lpk-badge--hide-small,
	.lpk-product-grid .lpk-badge--hide-small,
	.product-grid .lpk-badge--hide-small,
	.lpk-category-page .lpk-badge--hide-small { display: none !important; }
}