.ltxe-mb { --ltxe-mb-bg: #111827; --ltxe-mb-bg-hover: #0f172a; --ltxe-mb-color: #ffffff; --ltxe-mb-radius: 8px; --ltxe-mb-count: #111827; --ltxe-mb-count-bg: #f8fafc; --ltxe-mb-proof: #4b5563; --ltxe-mb-proof-num: #111827; --ltxe-mb-urgency-bg: #f59e0b; --ltxe-mb-urgency: #111827; --ltxe-mb-pulse: rgba(245, 158, 11, 0.55); --ltxe-mb-pulse-speed: 1.8s; display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; max-width: 100%; } .ltxe-mb--gone { display: none; } .ltxe-mb__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.55rem; padding: 0.85rem 1.35rem; border-radius: var(--ltxe-mb-radius); background: var(--ltxe-mb-bg); color: var(--ltxe-mb-color); text-decoration: none; font-weight: 700; line-height: 1.2; transition: background 0.2s ease, transform 0.2s ease; } .ltxe-mb__btn:hover, .ltxe-mb__btn:focus { background: var(--ltxe-mb-bg-hover); color: var(--ltxe-mb-color); } .ltxe-mb__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .ltxe-mb__icon { display: inline-flex; align-items: center; line-height: 0; } .ltxe-mb__icon svg, .ltxe-mb__icon i { width: 1.1em; height: 1.1em; fill: currentColor; } .ltxe-mb__count { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--ltxe-mb-count-bg); color: var(--ltxe-mb-count); font-variant-numeric: tabular-nums; font-size: 0.85em; font-weight: 700; } .ltxe-mb__proof { margin: 0; color: var(--ltxe-mb-proof); font-size: 0.95rem; } .ltxe-mb__proof-num { color: var(--ltxe-mb-proof-num); font-weight: 800; font-variant-numeric: tabular-nums; } .ltxe-mb__urgency { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--ltxe-mb-urgency-bg); color: var(--ltxe-mb-urgency); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .ltxe-mb__btn .ltxe-mb__urgency { position: absolute; top: -0.65rem; right: 0.7rem; } .ltxe-mb--pulse .ltxe-mb__btn::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 var(--ltxe-mb-pulse); animation: ltxe-mb-pulse var(--ltxe-mb-pulse-speed) ease-out infinite; } .ltxe-mb__urgency--pulse { animation: ltxe-mb-urgency-pulse 1.4s ease-in-out infinite; } .ltxe-mb__urgency--blink { animation: ltxe-mb-urgency-blink 1s steps(2, end) infinite; } @keyframes ltxe-mb-pulse { 0% { box-shadow: 0 0 0 0 var(--ltxe-mb-pulse); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes ltxe-mb-urgency-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes ltxe-mb-urgency-blink { 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .ltxe-mb--pulse .ltxe-mb__btn::after, .ltxe-mb__urgency--pulse, .ltxe-mb__urgency--blink { animation: none; } }