@cshah18/sdk 4.9.0 → 4.10.0

package/dist/cobuy-sdk.esm.js

@@ -1323,7 +1323,7 @@ class GroupListModal {
             el.style.opacity = disabled ? "0.5" : "1";
             el.style.cursor = disabled ? "not-allowed" : "pointer";
             el.setAttribute("aria-disabled", disabled ? "true" : "false");
-            if (typeof el.disabled !== "undefined") {
+            if (el.disabled !== undefined) {
                 el.disabled = disabled;
             }
         });
@@ -1353,7 +1353,7 @@ class GroupListModal {
     createGroupCard(group) {
         const card = document.createElement("div");
         card.className = "cobuy-group-card";
-        card.setAttribute("data-group-id", group.name || group.groupId);
+        card.dataset.groupId = group.name || group.groupId;
         const header = document.createElement("div");
         header.className = "cobuy-group-card-header";
         const groupId = document.createElement("div");
@@ -2084,7 +2084,7 @@ function isRedemptionValid(expiryDate) {
  * LobbyModal - Renders and manages the group buying lobby modal
  */
 class LobbyModal {
-    constructor(data, callbacks, apiClient, analyticsClient, socketManager = null, debug = false) {
+    constructor(data, callbacks, apiClient, socketManager = null, debug = false) {
         this.modalElement = null;
         this.timerInterval = null;
         this.activityInterval = null;
@@ -2093,21 +2093,6 @@ class LobbyModal {
         this.currentGroupId = null;
         this.shareOverlay = null;
         this.keyboardHandler = null;
-        /**
-         * Unsubscribe from socket events - testing out flow will remove once we have conviction
-         */
-        // private unsubscribeFromSocketEvents(): void {
-        //   if (typeof window === "undefined" || !this.socketListenerRegistered) {
-        //     return;
-        //   }
-        //   window.removeEventListener("group:fulfilled", this.handleSocketGroupUpdate as EventListener);
-        //   window.removeEventListener(
-        //     "group:member:joined",
-        //     this.handleSocketGroupUpdate as EventListener,
-        //   );
-        //   window.removeEventListener("group:created", this.handleSocketGroupUpdate as EventListener);
-        //   this.socketListenerRegistered = false;
-        // }
         /**
          * Handle socket group update events
          */
@@ -2198,7 +2183,6 @@ class LobbyModal {
         };
         this.logger = new Logger(debug);
         this.apiClient = apiClient;
-        this.analyticsClient = analyticsClient;
         this.socketManager = socketManager;
         // Log the group data being passed into the modal
         this.logger.info("LobbyModal initialized with group data", {
@@ -2245,7 +2229,7 @@ class LobbyModal {
     getTitleText(data) {
         var _a, _b;
         const remainingRaw = ((_a = data.totalMembers) !== null && _a !== void 0 ? _a : 0) - ((_b = data.currentMembers) !== null && _b !== void 0 ? _b : 0);
-        const remaining = remainingRaw > 0 ? remainingRaw : 0;
+        const remaining = Math.max(0, remainingRaw);
         const unlocked = !this.computeIsLocked(data);
         if (unlocked) {
             return {
@@ -2373,7 +2357,7 @@ class LobbyModal {
     createModalStructure() {
         const modal = document.createElement("div");
         modal.className = "cb-lobby-modal-container";
-        modal.setAttribute("data-product-id", this.data.productId);
+        modal.dataset.productId = this.data.productId;
         // Background
         const background = document.createElement("div");
         background.className = "cb-lobby-bg";
@@ -2907,1491 +2891,6 @@ class LobbyModal {
     `;
         document.head.appendChild(style);
     }
-    injectLobbyStyles() {
-        // Only inject once per page load
-        if (LobbyModal.stylesInjected) {
-            return;
-        }
-        LobbyModal.stylesInjected = true;
-        const style = document.createElement("style");
-        style.id = "cobuy-lobby-styles";
-        style.textContent = `
-/* Screen reader only - hide visually but keep available to AT */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.cb-lobby-modal-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10000;
-}
-
-.cb-lobby-modal-container * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.cb-lobby-modal-container html,
-.cb-lobby-modal-container body {
-  font-family: "Inter", sans-serif;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-}
-
-.cb-lobby-main {
-  padding: 80px;
-  background-color: color-mix(in oklab, #fff 5%, transparent);
-  box-shadow: 0 25px 50px -12px #00000040;
-  backdrop-filter: blur(4px);
-  border-radius: 50px;
-  width: 100%;
-  position: relative;
-  z-index: 1;
-}
-
-.cb-lobby-bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-image: url("https://cobuy-dev.s3.af-south-1.amazonaws.com/public/sdk/cb-back-image.png");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  z-index: -1;
-}
-
-.cb-lobby-main-wp {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 80px;
-}
-
-.lobby-indicator {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 6px 12px;
-  border-radius: 24px;
-  background: rgba(16, 185, 129, 0.1);
-  border: 1px solid rgba(16, 185, 129, 0.3);
-  backdrop-filter: blur(8px);
-  margin-bottom: 16px;
-  width: fit-content;
-}
-
-.lobby-indicator-logo {
-  height: 34px;
-  width: auto;
-  display: block;
-  flex-shrink: 0;
-}
-
-.pulsing-dot {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: 8px;
-  height: 8px;
-}
-
-.pulsing-dot::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: #10b981;
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.pulsing-dot::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: #10b981;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.indicator-text {
-  font-size: 11px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: #047857;
-  line-height: 1;
-}
-
-.lobby-status-section {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 24px;
-}
-
-.lobby-status {
-  font-size: 10px;
-  line-height: 1.2;
-  font-weight: 600;
-  padding: 6px 10px;
-  background: #fff;
-  border-radius: 4px;
-  text-transform: uppercase;
-  color: #000;
-}
-
-.lobby-status.active {
-  background: #155dfc;
-  color: #fff;
-}
-
-.lobby-status.complete {
-  background: #10b981;
-  color: #fff;
-}
-
-.lobby-status-wp {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px;
-}
-
-.lobby-number {
-  background: rgb(255 255 255 / 20%);
-  padding: 5px 8px;
-  box-shadow: 0 25px 50px -12px #00000040;
-  backdrop-filter: blur(3px);
-  border-radius: 4px;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  font-size: 12px;
-  line-height: 1.2;
-  font-weight: 700;
-}
-
-.title-wp {
-  margin-top: 25px;
-}
-
-.title-wp h2 {
-  font-size: 60px;
-  line-height: 1;
-  margin-bottom: 15px;
-  font-weight: 900;
-}
-
-.sub-title {
-  font-size: 16px;
-  line-height: 1.5;
-  margin-bottom: 0;
-  color: #1e293b;
-  font-weight: 700;
-  background-image: linear-gradient(90deg, #1e293b 0%, #2563eb 25%, #1e293b 50%);
-  background-size: 200% auto;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: gradient-flow 4s linear infinite;
-}
-
-@keyframes gradient-flow {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.sub-title.completed {
-  background-image: none;
-  -webkit-text-fill-color: unset;
-  background-clip: unset;
-  -webkit-background-clip: unset;
-  color: #1e293b;
-}
-
-.connected-section {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 24px;
-  margin-top: 24px;
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(4px);
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
-}
-
-.connected-section:hover {
-  background: rgba(255, 255, 255, 0.1);
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
-}
-
-.link-share-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.link-share-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-}
-
-.lobby-link-box {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 16px 20px;
-  border-radius: 14px;
-  backdrop-filter: blur(8px);
-  background-color: rgb(255 255 255 / 40%);
-  border: 1px solid rgb(255 255 255 / 30%);
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  flex: 1;
-  transition: all 0.2s ease;
-  min-height: 50px;
-}
-
-.lobby-link-box:hover {
-  background-color: rgb(255 255 255 / 50%);
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
-}
-
-.lobby-link-text {
-  font-size: 10px;
-  line-height: 1.2;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  margin-bottom: 6px;
-  color: #71717a;
-}
-
-.copy-link-btn {
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  cursor: pointer;
-  color: #64748b;
-  background: transparent;
-  border: none;
-  font-size: 13px;
-  font-weight: 600;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.copy-link-btn:hover {
-  color: #1e293b;
-}
-
-.copy-link-btn .copy-text {
-  display: none;
-}
-
-.copy-link-btn svg {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-}
-
-@media (min-width: 640px) {
-  .copy-link-btn .copy-text {
-    display: inline;
-  }
-}
-
-.lobby-link-url {
-  font-size: 15px;
-  line-height: 1.4;
-  font-weight: 700;
-  color: #1e293b;
-  word-break: break-all;
-}
-
-.link-box-container {
-  flex: 1;
-  min-width: 0;
-}
-
-.share-btn {
-  background: #1e293b;
-  color: #fff;
-  padding: 35px 24px;
-  border-radius: 14px;
-  height: 50px;
-  min-width: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  cursor: pointer;
-  border: none;
-  font-weight: 600;
-  font-size: 15px;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  flex-shrink: 0;
-}
-
-.share-btn .share-text {
-  display: inline;
-  color: #fff;
-  font-size: 15px;
-}
-
-.share-btn svg {
-  color: #fff;
-}
-
-@media (max-width: 640px) {
-  .share-btn {
-    padding: 0 18px;
-    font-size: 14px;
-    height: 50px;
-  }
-  .share-btn .share-text {
-    display: inline;
-    color: #fff;
-  }
-}
-
-.share-btn:hover {
-  background: #0f172a;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
-  transform: translateY(-1px);
-}
-
-.share-btn:active {
-  transform: scale(0.95);
-}
-
-.share-btn svg {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-}
-
-.lobby-offer-box {
-  display: flex;
-  align-items: center;
-  gap: 30px;
-  padding: 15px 20px;
-  border-radius: 1rem;
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(59, 130, 246, 0.125);
-  background-color: rgba(59, 130, 246, 0.063);
-  margin-top: 30px;
-}
-
-.offer-box-icon {
-  background: linear-gradient(135deg, rgb(59, 130, 246), rgba(59, 130, 246, 0.867));
-  box-shadow: rgba(59, 130, 246, 0.314) 0px 10px 15px -3px;
-  color: #fff;
-  padding: 5px;
-  border-radius: 10px;
-  width: 56px;
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.offer-lock-status {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 2px;
-}
-
-.offer-lock-status span {
-  font-size: 14px;
-  line-height: 1;
-  font-weight: 700;
-}
-
-.offer-box-content h3 {
-  font-size: 30px;
-  line-height: 1.2;
-  font-weight: 900;
-}
-
-.cb-lobby-top {
-  display: grid;
-  grid-template-columns: 7fr 5fr;
-  gap: 100px;
-}
-
-.group-info {
-  background-color: color-mix(in oklab, #fff 5%, transparent);
-  backdrop-filter: blur(8px);
-  border-radius: 20px;
-  padding: 30px;
-  box-shadow: 0 10px 15px -3px #0000001a;
-}
-
-.progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 14px;
-}
-
-.progress-header .title {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 900;
-  letter-spacing: 0.7px;
-  color: #000;
-}
-
-.progress-badge {
-  background: #3b82f6;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 700;
-  padding: 6px 12px;
-  border-radius: 999px;
-  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
-}
-
-.cb-lobby-modal-container .progress-bar {
-  width: 100%;
-  height: 14px;
-  background: #ffffff;
-  border-radius: 999px;
-  overflow: hidden;
-}
-
-.cb-lobby-modal-container .progress-fill {
-  height: 100%;
-  width: 0;
-  border-radius: 999px;
-  position: relative;
-  background: #3b82f6;
-  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.45) 37%, rgba(255, 255, 255, 0.15) 63%);
-  background-size: 200% 100%;
-  animation: shimmer 2.7s infinite linear;
-  transition: width 0.6s ease;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-.progress-labels {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 8px;
-  font-size: 12px;
-  color: #474d56;
-}
-
-.team-card {
-  margin-top: 40px;
-}
-
-.team-card .icon-box svg {
-  width: 16px;
-}
-
-.team-card .team-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.team-card .team-title {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: 1px;
-}
-
-.team-card .icon-box {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  background-color: #3b82f6;
-  color: #fff;
-  box-shadow: 0 10px 15px -3px #3b82f64d;
-}
-
-.team-card .team-title span {
-  font-size: 14px;
-  font-weight: 900;
-  letter-spacing: 0.7px;
-  color: #000;
-}
-
-.team-card .team-count {
-  padding: 6px 12px;
-  border-radius: 9999px;
-  color: #fff;
-  font-weight: 700;
-  font-size: 13px;
-  letter-spacing: 0.7px;
-  background-color: #3b82f6;
-  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
-}
-
-.team-card .team-members {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 14px;
-  margin-top: 20px;
-}
-
-.team-card .member {
-  position: relative;
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 22px;
-  color: #fff;
-  border: 3px solid #fff;
-  box-shadow: 0 4px 12px #0000001a;
-}
-
-.team-card .member::after {
-  content: "";
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  width: 12px;
-  height: 12px;
-  background: #3b82f6;
-  background-image: url("https://cobuy-dev.s3.af-south-1.amazonaws.com/public/sdk/tick-mark-icon.svg");
-  background-size: 75%;
-  background-repeat: no-repeat;
-  background-position: center;
-  color: #fff;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid #fff;
-  padding: 2px;
-}
-
-.team-card .member.blue {
-  background: #2563eb;
-}
-
-.team-card .member.purple {
-  background: #9333ea;
-}
-
-.team-card .member.pink {
-  background: #ec4899;
-}
-
-.team-card .member.orange {
-  background: #f97316;
-}
-
-.team-card .member.empty {
-  background: #f8fafc;
-  color: #9ca3af;
-}
-
-.team-card .member.empty::after {
-  display: none;
-}
-
-.time-card {
-  border-radius: 20px;
-  padding: 15px;
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-top: 30px;
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(8px);
-}
-
-.time-card .time-icon {
-  width: 48px;
-  height: 48px;
-  background: #3b82f6;
-  color: #fff;
-  border-radius: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 22px;
-  flex-shrink: 0;
-}
-
-.time-card .time-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.time-card .time-label {
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.6px;
-  color: #4b5563;
-}
-
-.time-card .time-value {
-  font-size: 22px;
-  font-weight: 900;
-  color: #111827;
-}
-
-.group-info-box {
-  background: color-mix(in oklab, #fff 5%, transparent);
-  border: 1px solid color-mix(in oklab, #fff 20%, transparent);
-  backdrop-filter: blur(8px);
-  padding: 30px;
-  box-shadow: 0 10px 15px -3px #0000001a;
-  border-radius: 1.5rem;
-}
-
-.offer-lock-status svg {
-  width: 16px;
-  height: 16px;
-}
-
-.cb-lobby-modal-container .offer-box-content .reward-text {
-  font-size: 14px;
-  line-height: 1;
-  margin-top: 4px;
-  color: #000;
-  background: unset;
-  border: none;
-}
-
-.progress-header .title:before {
-  content: "";
-  position: relative;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background: rgb(59, 130, 246);
-  border-radius: 50%;
-  margin-right: 8px;
-}
-
-.live-activity-wrapper {
-  padding: 16px;
-  background-color: color-mix(in oklab, #fff 80%, transparent);
-  border-radius: 18px;
-  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
-  backdrop-filter: blur(8px);
-}
-
-.live-activity-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-  gap: 10px;
-}
-
-.live-activity-header .title {
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 900;
-  letter-spacing: 0.7px;
-  color: #000;
-}
-
-.live-activity-header .dot {
-  position: relative;
-  width: 8px;
-  height: 8px;
-  background: #3b82f6;
-  border-radius: 50%;
-}
-
-.live-activity-header .dot::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  background: rgba(59, 130, 246, 0.6);
-  animation: livePulse 1.6s ease-out infinite;
-}
-
-@keyframes livePulse {
-  0% {
-    transform: scale(1);
-    opacity: 0.8;
-  }
-  70% {
-    transform: scale(2.4);
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.activity-stats {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.activity-stats-badge {
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  line-height: 1;
-  font-weight: 500;
-  background-color: rgba(59, 130, 246, 0.082);
-  color: rgb(59, 130, 246);
-}
-
-.activity-stats-badge.light {
-  background-color: #f9f3f4;
-  color: #45556c;
-}
-
-.activity-list {
-  position: relative;
-  height: 104px;
-  overflow: hidden;
-}
-
-.activity-card {
-  position: absolute;
-  inset: 0;
-  height: 58px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 10px;
-  background: linear-gradient(90deg, #fff, #f2f6ff);
-  border-radius: 14px;
-  border: 1px solid #dbeafe;
-  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 600ms;
-}
-
-.activity-card .text {
-  font-size: 14px;
-}
-
-.activity-card .avatar {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  flex: 0 0 30px;
-}
-
-.activity-card .pink {
-  background: linear-gradient(135deg, #ec4899, #f472b6);
-}
-
-.activity-card .purple {
-  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
-}
-
-.activity-card .blue {
-  background: linear-gradient(135deg, #3b82f6, #60a5fa);
-}
-
-.activity-card .green {
-  background: linear-gradient(135deg, #10b981, #34d399);
-}
-
-.activity-card .orange {
-  background: linear-gradient(135deg, #f97316, #fb923c);
-}
-
-.activity-card .text p {
-  margin: 2px 0 0;
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.activity-card .time {
-  margin-left: auto;
-  font-size: 10px;
-  color: #94a3b8;
-}
-
-.lobby-activity-wp {
-  margin-top: 50px;
-  padding: 8px;
-  border-radius: 25px;
-  backdrop-filter: blur(12px);
-  background-color: rgb(255 255 255 / 40%);
-  border: 1px solid rgb(255 255 255 / 20%);
-  box-shadow: 0 1px 3px 0 #0000001a;
-}
-
-.lobby-close-icon {
-  position: fixed;
-  top: 30px;
-  right: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: color-mix(in oklab, #000 80%, transparent);
-  color: #fff;
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  cursor: pointer;
-  z-index: 99;
-}
-
-.lobby-close-icon svg {
-  width: 20px;
-  height: 20px;
-}
-
-@media screen and (max-width: 1600px) {
-  .cb-lobby-main {
-    padding: 50px;
-    border-radius: 30px;
-  }
-  .title-wp h2 {
-    font-size: 48px;
-    margin-bottom: 12px;
-  }
-  .sub-title {
-    font-size: 16px;
-  }
-  .title-wp {
-    margin-top: 20px;
-  }
-  .lobby-link-section {
-    margin-top: 30px;
-  }
-  .offer-box-content h3 {
-    font-size: 26px;
-  }
-  .lobby-offer-box {
-    gap: 24px;
-    padding: 15px;
-  }
-  .cb-lobby-top {
-    gap: 80px;
-  }
-  .group-info-box {
-    padding: 22px;
-    border-radius: 20px;
-  }
-  .team-card {
-    margin-top: 30px;
-  }
-  .team-card .team-members {
-    margin-top: 12px;
-  }
-  .lobby-activity-wp {
-    margin-top: 40px;
-  }
-  .lobby-close-icon {
-    top: 20px;
-    width: 30px;
-    height: 30px;
-  }
-}
-
-@media screen and (max-width: 1280px) {
-  .cb-lobby-main-wp {
-    padding: 40px;
-  }
-  .cb-lobby-main {
-    padding: 40px;
-  }
-  .title-wp h2 {
-    font-size: 42px;
-  }
-  .cb-lobby-top {
-    gap: 60px;
-  }
-}
-
-@media screen and (max-width: 1120px) {
-  .title-wp h2 {
-    font-size: 38px;
-  }
-}
-
-@media screen and (max-width: 991px) {
-  .cb-lobby-top {
-    grid-template-columns: 1fr;
-    gap: 30px;
-  }
-  .cb-lobby-main {
-    padding: 30px;
-    border-radius: 15px;
-  }
-  .cb-lobby-main-wp {
-    padding: 30px;
-  }
-  .lobby-close-icon {
-    right: 20px;
-  }
-  .lobby-link-box {
-    border-radius: 10px;
-  }
-  .share-btn {
-    border-radius: 8px;
-  }
-  .offer-box-content h3 {
-    font-size: 24px;
-  }
-  .lobby-offer-box {
-    margin-top: 20px;
-    border-radius: 15px;
-  }
-  .time-card {
-    margin-top: 20px;
-    border-radius: 15px;
-  }
-  .lobby-activity-wp {
-    margin-top: 20px;
-    border-radius: 15px;
-  }
-  .live-activity-wrapper {
-    border-radius: 10px;
-  }
-  .group-info-box {
-    border-radius: 15px;
-  }
-}
-
-@media screen and (max-width: 575px) {
-  .cb-lobby-main-wp {
-    padding: 20px;
-  }
-  .cb-lobby-main {
-    padding: 20px;
-  }
-  .title-wp h2 {
-    font-size: 30px;
-  }
-  .lobby-link-text {
-    font-size: 11px;
-    margin-bottom: 4px;
-  }
-  .lobby-link-url {
-    font-size: 14px;
-  }
-  .lobby-link-box {
-    padding: 12px 16px;
-    min-height: 48px;
-  }
-  .link-share-wrapper {
-    gap: 10px;
-  }
-  .share-btn {
-    height: 48px;
-    min-width: auto;
-    border-radius: 8px;
-    padding: 0 14px;
-    font-size: 13px;
-  }
-  .lobby-offer-box {
-    padding: 10px;
-  }
-  .offer-box-content h3 {
-    font-size: 20px;
-  }
-  .offer-box-content .reward-text {
-    font-size: 13px;
-  }
-  .group-info-box {
-    padding: 13px;
-  }
-  .progress-header .title {
-    font-size: 13px;
-  }
-  .team-card .team-title span {
-    font-size: 13px;
-  }
-  .team-card .member {
-    width: 40px;
-    height: 40px;
-  }
-  .team-card .member::after {
-    width: 8px;
-    height: 8px;
-  }
-  .team-card .team-members {
-    margin-top: 12px;
-    gap: 10px;
-  }
-  .time-card {
-    padding: 13px;
-  }
-  .team-card {
-    margin-top: 22px;
-  }
-  .activity-card .text {
-    font-size: 12px;
-  }
-  .activity-card .text p {
-    font-size: 11px;
-  }
-  .live-activity-header .title {
-    font-size: 12px;
-  }
-  .time-card .time-value {
-    font-size: 20px;
-  }
-}
-
-@media screen and (max-width: 480px) {
-  .cb-lobby-main-wp {
-    padding: 20px 12px;
-  }
-  .cb-lobby-main {
-    padding: 15px 12px;
-  }
-  .lobby-status {
-    font-size: 9px;
-  }
-  .lobby-number {
-    font-size: 10px;
-  }
-  .title-wp h2 {
-    font-size: 28px;
-    margin-bottom: 7px;
-  }
-  .sub-title {
-    font-size: 14px;
-  }
-  .lobby-link-section {
-    gap: 10px;
-    margin-top: 20px;
-  }
-  .lobby-offer-box {
-    gap: 12px;
-  }
-  .offer-box-icon {
-    width: 45px;
-    height: 45px;
-  }
-  .offer-lock-status span {
-    font-size: 12px;
-  }
-  .offer-box-content .reward-text {
-    font-size: 12px;
-  }
-  .cb-lobby-top {
-    gap: 20px;
-  }
-  .lobby-close-icon {
-    right: 10px;
-    top: 10px;
-  }
-  .live-activity-header {
-    flex-direction: column;
-    gap: 5px;
-  }
-  .activity-card {
-    padding: 6px;
-    border-radius: 9px;
-  }
-}
-
-.share-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  visibility: hidden;
-  transition: 0.3s ease;
-  z-index: 999;
-}
-
-.share-overlay.active {
-  opacity: 1;
-  visibility: visible;
-}
-
-.share-popup {
-  background: #fff;
-  width: 420px;
-  border-radius: 18px;
-  padding: 24px;
-  transform: translateY(30px);
-  transition: 0.35s ease;
-  position: relative;
-  max-height: 90%;
-  overflow: auto;
-}
-
-.share-overlay.active .share-popup {
-  transform: translateY(0);
-}
-
-.share-popup .close-btn {
-  position: absolute;
-  right: 14px;
-  top: 14px;
-  border: none;
-  background: rgb(243, 244, 246);
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: 0.3s;
-}
-
-.share-popup .close-btn:hover {
-  background: rgb(238 236 236);
-}
-
-.share-popup h2 {
-  margin-bottom: 10px;
-  font-size: 22px;
-  line-height: 1;
-  font-weight: 600;
-}
-
-.share-popup .subtitle {
-  color: #4a5565;
-  font-size: 14px;
-  margin: 6px 0 30px;
-}
-
-.share-popup .share-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 14px;
-}
-
-.share-popup .share-card {
-  background: #f2f6f9;
-  border-radius: 14px;
-  padding: 16px;
-  text-align: center;
-  cursor: pointer;
-  position: relative;
-  transition: 0.25s ease;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.share-popup .share-card:hover {
-  transform: translateY(-3px);
-}
-
-.share-popup .share-card .icon {
-  font-size: 30px;
-  margin-bottom: 8px;
-  width: 50px;
-  height: 50px;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgb(24, 119, 242);
-  border-radius: 50%;
-  color: #fff;
-}
-
-.share-popup .share-card span {
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.share-popup .share-card.whatsapp {
-  background: #ecfdf5;
-  border: 2px solid #22c55e;
-  color: #22c55e;
-}
-
-.share-popup .share-card.whatsapp .icon {
-  background: #22c55e;
-}
-
-.share-popup .share-card .badge {
-  position: absolute;
-  top: -8px;
-  right: 10px;
-  background: #2563eb;
-  color: #fff;
-  font-size: 11px;
-  padding: 4px 10px;
-  border-radius: 12px;
-}
-
-.share-popup .link-box {
-  background: #fbf9fa;
-  border-radius: 14px;
-  padding: 14px;
-  margin-top: 18px;
-  border: 1px solid #ebe6e7;
-}
-
-.share-popup .link-box label {
-  font-size: 13px;
-  color: #64748b;
-}
-
-.share-popup .link-row {
-  display: flex;
-  gap: 8px;
-  margin-top: 6px;
-}
-
-.share-popup .link-row input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  font-size: 13px;
-  letter-spacing: 0.8px;
-  line-height: 1.2;
-  color: #334155;
-  outline: none;
-}
-
-.share-popup .link-row button {
-  background: #fff;
-  border-radius: 10px;
-  cursor: pointer;
-  padding: 6px 8px;
-  border: 1px solid #ebe6e7;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 35px;
-}
-
-.share-popup .success {
-  display: block;
-  margin-top: 6px;
-  color: #2563eb;
-  font-size: 12px;
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.share-popup .success.show {
-  opacity: 1;
-}
-
-.share-popup .footer-text {
-  margin-top: 14px;
-  text-align: center;
-  font-size: 12px;
-  color: #64748b;
-}
-
-.share-popup .share-card.twitter .icon {
-  background: #000;
-}
-
-.share-popup .share-card.facebook .icon {
-  background: rgb(24, 119, 242);
-}
-
-.share-popup .share-card.sms .icon {
-  background: #059669;
-}
-
-.share-popup .share-card.copied .icon {
-  background: #2563eb;
-}
-
-@keyframes entrance-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes entrance-scale-in {
-  from {
-    opacity: 0;
-    transform: scale(0.9) translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-@keyframes entrance-text-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes exit-blur-scale {
-  from {
-    opacity: 1;
-    transform: scale(1);
-    filter: blur(0px);
-  }
-  to {
-    opacity: 0;
-    transform: scale(1.1);
-    filter: blur(10px);
-  }
-}
-
-@keyframes pulse-dot {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-.entrance-animation-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: #0f172a;
-  color: white;
-  animation: entrance-fade-in 0.8s ease-in-out forwards;
-}
-
-.entrance-animation-overlay.exit {
-  animation: exit-blur-scale 0.8s ease-in-out forwards;
-}
-
-.entrance-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  animation: entrance-scale-in 0.5s ease-out 0.2s both;
-}
-
-.entrance-icon-box {
-  width: 64px;
-  height: 64px;
-  margin-bottom: 24px;
-  border-radius: 16px;
-  background: #2563eb;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);
-}
-
-.entrance-icon-box svg {
-  width: 32px;
-  height: 32px;
-  color: white;
-}
-
-.entrance-title {
-  font-size: 32px;
-  font-weight: 700;
-  letter-spacing: -0.5px;
-  margin-bottom: 12px;
-}
-
-@media (min-width: 768px) {
-  .entrance-title {
-    font-size: 48px;
-  }
-}
-
-.entrance-message {
-  color: #60a5fa;
-  font-weight: 500;
-  font-size: 18px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  animation: entrance-text-fade-in 0.5s ease-out 0.5s both;
-}
-
-.entrance-pulse-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #60a5fa;
-  animation: pulse-dot 1.5s ease-in-out infinite;
-}
-`;
-        document.head.appendChild(style);
-        this.logger.info("Lobby styles injected successfully");
-    }
     /**
      * Trigger the same checkout flow as clicking "Continue to Checkout" on the widget
      */
@@ -5043,8 +3542,6 @@ class LobbyModal {
             groupNumber: this.data.groupNumber,
             status: this.data.status,
         });
-        // Inject lobby styles (only happens once per page load)
-        this.injectLobbyStyles();
         // Show entrance animation, then open modal after animation completes
         this.showEntranceAnimation(() => {
             this.modalElement = this.createModalStructure();
@@ -5095,12 +3592,10 @@ class LobbyModal {
                         lastElement.focus();
                     }
                 }
-                else {
+                else if (activeElement === lastElement) {
                     // TAB pressed - move forwards
-                    if (activeElement === lastElement) {
-                        event.preventDefault();
-                        firstElement.focus();
-                    }
+                    event.preventDefault();
+                    firstElement.focus();
                 }
             }
         };
@@ -5145,11 +3640,6 @@ class LobbyModal {
         this.stopActivityAnimation();
         // Remove keyboard event listeners
         this.removeKeyboardAccessibility();
-        // // Unsubscribe from socket events and group - testing out flow will remove once we have conviction
-        // this.unsubscribeFromSocketEvents();
-        // if (this.socketManager && this.currentGroupId) {
-        //   this.socketManager.unsubscribeFromGroup(this.currentGroupId);
-        // }
         // Remove modal from DOM
         document.body.removeChild(this.modalElement);
         this.modalElement = null;
@@ -5336,8 +3826,8 @@ class LobbyModal {
             "orange",
         ];
         const randomColor = colors[Math.floor(Math.random() * colors.length)];
-        let emoji = "👤";
-        let action = "joined the group";
+        let emoji;
+        let action;
         switch (eventType) {
             case "group:member:joined":
                 emoji = "👤";
@@ -5412,11 +3902,6 @@ class LobbyModal {
         }
     }
 }
-/**
- * Inject lobby styles into the document head
- * This is called once when the first lobby modal is created
- */
-LobbyModal.stylesInjected = false;
 
 /**
  * Offline Redemption Modal
@@ -5975,7 +4460,7 @@ class WidgetRoot {
                 }
                 else if (this.currentGroupData) {
                     // Check if data actually changed using participant count
-                    const currentParticipants = groupContainer.getAttribute("data-participants");
+                    const currentParticipants = groupContainer.dataset.participants;
                     const newParticipants = String(this.currentGroupData.participants_count || 0);
                     if (currentParticipants !== newParticipants) {
                         // Data changed, re-render
@@ -5983,7 +4468,7 @@ class WidgetRoot {
                         const groupEl = this.renderGroupInfo();
                         if (groupEl) {
                             // Store current participants for next diff
-                            groupContainer.setAttribute("data-participants", newParticipants);
+                            groupContainer.dataset.participants = newParticipants;
                             groupContainer.style.display = "";
                             groupContainer.appendChild(groupEl);
                         }
@@ -6099,8 +4584,8 @@ class WidgetRoot {
         // Match static HTML structure: cobuy-progress container
         const root = document.createElement("div");
         root.className = "cobuy-progress";
-        root.setAttribute("data-current", String(participants));
-        root.setAttribute("data-target", String(max));
+        root.dataset.current = String(participants);
+        root.dataset.target = String(max);
         // Progress header with two spans
         const header = document.createElement("div");
         header.className = "progress-header";
@@ -6124,7 +4609,7 @@ class WidgetRoot {
         const expiry = Date.parse(data.expiry_at);
         this.updateTimer(progressText, expiry, remaining);
         const interval = window.setInterval(() => this.updateTimer(progressText, expiry, remaining), 1000);
-        progressText.setAttribute("data-timer-id", String(interval));
+        progressText.dataset.timerId = String(interval);
         root.appendChild(header);
         root.appendChild(progressBar);
         // Create footer with timer on left and View all Groups link on right
@@ -6298,7 +4783,7 @@ class WidgetRoot {
                     totalMembers: joinData.group.max_participants,
                     timeLeft: joinData.group.timeLeftSeconds,
                 };
-                const lobbyModal = new LobbyModal(lobbyData, {}, null, null, null, this.config.debug);
+                const lobbyModal = new LobbyModal(lobbyData, {}, null, null, this.config.debug);
                 lobbyModal.open(joinData.group.id);
             });
             // Set callback for viewing progress on already joined group
@@ -6315,7 +4800,7 @@ class WidgetRoot {
                     currentMembers: groupData.joined,
                     totalMembers: groupData.total,
                 };
-                const lobbyModal = new LobbyModal(lobbyData, {}, null, null, null, this.config.debug);
+                const lobbyModal = new LobbyModal(lobbyData, {}, null, null, this.config.debug);
                 lobbyModal.open(groupId);
             });
         }
@@ -6431,7 +4916,7 @@ class WidgetRoot {
             // Listen for realtime fulfillment updates once per page
             this.subscribeToSocketEvents();
             // Host safety + idempotency markers
-            container.setAttribute("data-cobuy-mounted", "true");
+            container.dataset.cobuyMounted = "true";
             container.style.maxWidth = "100%";
             container.style.width = "100%";
             container.style.boxSizing = "border-box";
@@ -6967,29 +5452,6 @@ class WidgetRoot {
         rewardLine.style.opacity = "0";
         rewardLine.style.animation =
             "cobuy-fadeIn var(--cobuy-animation-duration, 300ms) var(--cobuy-animation-easing, ease-out) forwards";
-        // if (isFulfilled) {
-        //   const rewardText = this.formatRewardText(activeReward);
-        //   rewardLine.textContent = rewardText
-        //     ? `Reward available: ${rewardText}`
-        //     : "Reward available for this group";
-        //   rewardLine.setAttribute(
-        //     "aria-label",
-        //     rewardText ? `Reward locked in: ${rewardText}` : "Reward available for this group",
-        //   );
-        //   rewardLine.title = rewardLine.textContent;
-        // } else if (activeReward) {
-        //   const rewardText = this.formatRewardText(activeReward);
-        //   rewardLine.textContent = rewardText
-        //     ? `Save up to ${rewardText} with CoBuy`
-        //     : "CoBuy reward available";
-        //   rewardLine.setAttribute("aria-label", `Eligible for CoBuy reward: ${rewardLine.textContent}`);
-        //   rewardLine.title = rewardLine.textContent;
-        // } else {
-        //   rewardLine.textContent = "CoBuy offer loading or unavailable";
-        //   rewardLine.setAttribute("aria-label", "CoBuy offer loading or unavailable");
-        //   rewardLine.title = "CoBuy offer loading or unavailable";
-        //   rewardLine.style.color = "#6b7280";
-        // }
         sections.reward = rewardLine;
         // Button - semantic button element with accessibility
         const button = document.createElement("button");
@@ -13910,7 +12372,7 @@ class CoBuy {
         }
         try {
             const botd = await load();
-            const result = (await botd.detect());
+            const result = botd.detect();
             const score = typeof result.score === "number" ? result.score : result.bot ? 1 : 0;
             this.botdScore = score;
             if (this.apiClient) {
@@ -14310,7 +12772,7 @@ class CoBuy {
                 },
                 onCopyLink: options.onCopyLink,
                 onShare: options.onShare,
-            }, this.apiClient, this.analyticsClient, this.socketManager, config.debug);
+            }, this.apiClient, this.socketManager, config.debug);
             // Store in map for persistence
             this.modals.set(modalKey, modal);
             // Maintain backward compatibility