@cshah18/sdk 3.0.5 → 4.1.0

package/dist/cobuy-sdk.esm.js

@@ -304,11 +304,44 @@ class GroupListModal {
         this.currentSessionId = null;
         this.onGroupJoined = null;
         this.onViewProgress = null;
+        this.socketListenerRegistered = false;
         this.escapeHandler = (event) => {
             if (event.key === "Escape") {
                 this.close();
             }
         };
+        this.handleGroupMemberJoinedEvent = (event) => {
+            this.onGroupMemberJoined(event);
+        };
+        /** Handle group member joined socket event and update groups list */
+        this.onGroupMemberJoined = (event) => {
+            const detail = event.detail || {};
+            const productId = detail.product_id;
+            const groupData = detail.group;
+            // Only process if this is for the current product
+            if (!productId || !this.currentProductId || productId !== this.currentProductId) {
+                return;
+            }
+            if (!groupData) {
+                return;
+            }
+            const groupId = groupData.id;
+            const participantsCount = groupData.participants_count;
+            if (!groupId) {
+                return;
+            }
+            // Find and update the group in the list
+            const groupIndex = this.groups.findIndex((g) => g.groupId === groupId);
+            if (groupIndex !== -1) {
+                // Update the joined count
+                if (typeof participantsCount === "number") {
+                    this.groups[groupIndex].joined = participantsCount;
+                }
+                this.logger.info(`[GroupListModal] Updated group ${groupId} - participants: ${participantsCount}`);
+                // Re-render the specific group card
+                this.updateGroupCard(groupId);
+            }
+        };
         this.logger = new Logger(debug);
         this.groups = groups;
         this.liveCount = liveCount;
@@ -335,6 +368,65 @@ class GroupListModal {
     hasGroup(groupId) {
         return this.groups.some((group) => group.groupId === groupId);
     }
+    /** Subscribe to socket events for real-time group updates */
+    subscribeToSocketEvents() {
+        if (typeof window === "undefined" || this.socketListenerRegistered) {
+            return;
+        }
+        window.addEventListener("group:member:joined", this.handleGroupMemberJoinedEvent);
+        this.socketListenerRegistered = true;
+        this.logger.debug("[GroupListModal] Socket event listeners registered");
+    }
+    /** Unsubscribe from socket events */
+    unsubscribeFromSocketEvents() {
+        if (typeof window === "undefined" || !this.socketListenerRegistered) {
+            return;
+        }
+        window.removeEventListener("group:member:joined", this.handleGroupMemberJoinedEvent);
+        this.socketListenerRegistered = false;
+        this.logger.debug("[GroupListModal] Socket event listeners unregistered");
+    }
+    /** Update the rendered group card with new data */
+    updateGroupCard(groupId) {
+        if (!this.overlayEl) {
+            return;
+        }
+        const groupCard = this.overlayEl.querySelector(`[data-group-id="${groupId}"]`);
+        if (!groupCard) {
+            return;
+        }
+        const group = this.groups.find((g) => g.groupId === groupId);
+        if (!group) {
+            return;
+        }
+        // Update the progress info
+        const remaining = Math.max(group.total - group.joined, 0);
+        const joinedCountEl = groupCard.querySelector(".cobuy-joined-count");
+        const spotsLeftEl = groupCard.querySelector(".cobuy-spots-left");
+        if (joinedCountEl) {
+            joinedCountEl.textContent = `${group.joined} Joined`;
+        }
+        if (spotsLeftEl) {
+            spotsLeftEl.textContent = `${remaining} ${remaining === 1 ? "spot" : "spots"} left`;
+        }
+        // Update the progress bar
+        const progressFill = groupCard.querySelector(".cobuy-gl-progress-fill");
+        if (progressFill) {
+            const pct = Math.max(0, Math.min(100, Math.round((group.joined / group.total) * 100)));
+            progressFill.style.width = `${pct}%`;
+        }
+        // Update member avatars
+        const membersContainer = groupCard.querySelector(".cobuy-group-members");
+        if (membersContainer) {
+            // Clear existing avatars
+            membersContainer.innerHTML = "";
+            // Recreate avatars with updated joined count
+            for (let i = 0; i < group.total; i++) {
+                const avatar = this.createMemberAvatar(i >= group.joined);
+                membersContainer.appendChild(avatar);
+            }
+        }
+    }
     async open(productId, sessionId, joinedGroupId) {
         if (this.overlayEl) {
             this.logger.debug("Group list modal already open");
@@ -380,6 +472,8 @@ class GroupListModal {
         this.overlayEl = overlay;
         document.body.appendChild(overlay);
         document.addEventListener("keydown", this.escapeHandler);
+        // Subscribe to socket events for real-time group updates
+        this.subscribeToSocketEvents();
         requestAnimationFrame(() => {
             overlay.classList.add("cobuy-gl-open");
         });
@@ -410,12 +504,14 @@ class GroupListModal {
                 // Convert API groups to display format
                 const groups = response.data.groups.map((apiGroup) => ({
                     groupId: apiGroup.id,
+                    name: apiGroup.group_name,
                     timeLabel: this.formatTimeRemaining(apiGroup.timeLeftSeconds),
                     timeLeftSeconds: apiGroup.timeLeftSeconds,
                     joined: apiGroup.participants_count,
                     total: apiGroup.max_participants,
                     isMember: Boolean(apiGroup.is_member),
                 }));
+                console.log("groupsss", groups);
                 // If API reports membership, prefer it over cached state
                 const memberGroup = groups.find((g) => g.isMember);
                 if (memberGroup) {
@@ -477,6 +573,8 @@ class GroupListModal {
         if (!this.overlayEl) {
             return;
         }
+        // Unsubscribe from socket events
+        this.unsubscribeFromSocketEvents();
         // Clear any running countdown intervals to avoid leaks
         this.countdownIntervals.forEach((id) => window.clearInterval(id));
         this.countdownIntervals = [];
@@ -720,11 +818,12 @@ class GroupListModal {
     createGroupCard(group) {
         const card = document.createElement("div");
         card.className = "cobuy-group-card";
+        card.setAttribute("data-group-id", group.name || group.groupId);
         const header = document.createElement("div");
         header.className = "cobuy-group-card-header";
         const groupId = document.createElement("div");
         groupId.className = "cobuy-group-id";
-        groupId.textContent = `Group #${group.groupId}`;
+        groupId.textContent = `Group #${group.name || group.groupId}`;
         const timer = document.createElement("div");
         timer.className = "cobuy-group-timer";
         timer.innerHTML = `
@@ -1263,6 +1362,158 @@ class GroupListModal {
     }
 }
 
+/**
+ * Offline Redemption Utilities
+ * Helpers for constructing QR URLs, copying codes, and downloading QR images
+ */
+const S3_BUCKET = "cobuy-dev";
+const S3_REGION = "af-south-1";
+/**
+ * Build full S3 URL for QR code image
+ * @param qrCodeData - S3 key from offline_redemption.qr_code_data
+ * @returns Full HTTPS URL to the QR code image
+ */
+function buildQRUrl(qrCodeData) {
+    if (!qrCodeData) {
+        return "";
+    }
+    const prefix = `https://${S3_BUCKET}.s3.${S3_REGION}.amazonaws.com/`;
+    return `${prefix}${qrCodeData}`;
+}
+/**
+ * Copy redemption code to clipboard
+ * @param code - Redemption code to copy
+ * @returns Promise that resolves when copy is complete
+ */
+async function copyRedemptionCode(code) {
+    const logger = new Logger(false);
+    if (!code) {
+        logger.warn("Cannot copy empty redemption code");
+        return false;
+    }
+    try {
+        // Use modern clipboard API if available
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            await navigator.clipboard.writeText(code);
+            logger.info("Redemption code copied to clipboard");
+            return true;
+        }
+        // Fallback for older browsers
+        const textarea = document.createElement("textarea");
+        textarea.value = code;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        textarea.setSelectionRange(0, 99999); // For mobile devices
+        const successful = document.execCommand("copy");
+        document.body.removeChild(textarea);
+        if (successful) {
+            logger.info("Redemption code copied to clipboard (fallback method)");
+            return true;
+        }
+        return false;
+    }
+    catch (error) {
+        logger.error("Failed to copy redemption code", error);
+        return false;
+    }
+}
+/**
+ * Download QR code image
+ * @param qrUrl - Full URL to the QR code image
+ * @param filename - Name for the downloaded file
+ */
+async function downloadQRCode(qrUrl, filename = "redemption-qr.png") {
+    const logger = new Logger(false);
+    if (!qrUrl) {
+        logger.warn("Cannot download QR code - empty URL");
+        return false;
+    }
+    try {
+        const response = await fetch(qrUrl);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const blob = await response.blob();
+        const blobUrl = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = blobUrl;
+        link.download = filename;
+        link.style.display = "none";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(blobUrl);
+        logger.info("QR code downloaded successfully");
+        return true;
+    }
+    catch (error) {
+        logger.error("Failed to download QR code", error);
+        return false;
+    }
+}
+/**
+ * Validate offline redemption data
+ * @param redemption - Offline redemption object
+ * @returns true if data is valid and complete
+ */
+function isValidOfflineRedemption(redemption) {
+    if (!redemption || typeof redemption !== "object") {
+        return false;
+    }
+    const obj = redemption;
+    return (typeof obj.member_id === "string" &&
+        obj.member_id.length > 0 &&
+        typeof obj.qr_code_value === "string" &&
+        obj.qr_code_value.length > 0 &&
+        typeof obj.redemption_code === "string" &&
+        obj.redemption_code.length > 0 &&
+        typeof obj.qr_code_data === "string" &&
+        obj.qr_code_data.length > 0 &&
+        typeof obj.offline_expires_at === "string" &&
+        obj.offline_expires_at.length > 0);
+}
+/**
+ * Format expiry date for display
+ * @param isoDate - ISO 8601 date string
+ * @returns Formatted date string (e.g., "Feb 20, 2026 at 10:21 AM")
+ */
+function formatExpiryDate(isoDate) {
+    try {
+        const date = new Date(isoDate);
+        // Check if date is valid
+        if (isNaN(date.getTime())) {
+            return "Invalid date";
+        }
+        return date.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    }
+    catch (_a) {
+        return "Invalid date";
+    }
+}
+/**
+ * Check if offline redemption is still valid
+ * @param expiryDate - ISO 8601 expiry date string
+ * @returns true if redemption has not expired
+ */
+function isRedemptionValid(expiryDate) {
+    try {
+        const expiry = new Date(expiryDate);
+        const now = new Date();
+        return now < expiry;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -1290,7 +1541,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".cb-lobby-modal-container{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10000}.cb-lobby-modal-container *{box-sizing:border-box;margin:0;padding:0}.cb-lobby-modal-container body,.cb-lobby-modal-container html{font-family:Inter,sans-serif;height:100%;overflow-x:hidden;width:100%}.cb-lobby-main{backdrop-filter:blur(4px);background-color:color-mix(in oklab,#fff 5%,transparent);border-radius:50px;box-shadow:0 25px 50px -12px #00000040;padding:80px;position:relative;width:100%;z-index:1}.cb-lobby-bg{background-image:url(https://cobuy-dev.s3.af-south-1.amazonaws.com/public/sdk/cb-back-image.png);background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:-1}.cb-lobby-main-wp{align-items:center;display:flex;justify-content:center;padding:40px 80px}.lobby-status{background:#fff;border-radius:4px;color:#000;font-size:10px;font-weight:600;line-height:1.2;padding:6px 10px;text-transform:uppercase}.lobby-status.active{background:#155dfc;color:#fff}.lobby-status.complete{background:green;color:#fff}.lobby-status-wp{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.lobby-number{backdrop-filter:blur(3px);background:hsla(0,0%,100%,.2);border-radius:4px;box-shadow:0 25px 50px -12px #00000040;font-size:12px;font-weight:700;letter-spacing:1px;line-height:1.2;padding:5px 8px;text-transform:uppercase}.title-wp{margin-top:25px}.title-wp h2{font-size:60px;font-weight:900;line-height:1;margin-bottom:15px}.sub-title{font-size:20px;line-height:1;margin-bottom:10px}.lobby-link-box{align-items:center;backdrop-filter:blur(12px);background-color:hsla(0,0%,100%,.4);border:1px solid hsla(0,0%,100%,.2);border-radius:1rem;box-shadow:0 1px 3px 0 #0000001a;display:flex;flex:1;gap:20px;justify-content:space-between;padding:13px 20px}.lobby-link-text{font-size:12px;font-weight:600;line-height:1;margin-bottom:6px;text-transform:uppercase}.copy-link-btn{align-items:center;color:#1d293d;cursor:pointer;display:flex;justify-content:center;padding:5px}.lobby-link-url{font-size:16px;font-weight:700;line-height:1}.lobby-link-wp{align-items:center;display:flex;gap:20px;justify-content:space-between;margin-top:40px}.share-btn-wp .share-btn{align-items:center;background:#000;border-radius:15px;color:#fff;cursor:pointer;display:flex;height:68px;justify-content:center;padding:5px;width:68px}.lobby-offer-box{align-items:center;backdrop-filter:blur(8px);background-color:rgba(59,130,246,.063);border:1px solid rgba(59,130,246,.125);border-radius:1rem;display:flex;gap:30px;margin-top:30px;padding:15px 20px}.offer-box-icon{align-items:center;background:linear-gradient(135deg,#3b82f6,rgba(59,130,246,.867));border-radius:10px;box-shadow:0 10px 15px -3px rgba(59,130,246,.314);color:#fff;cursor:pointer;display:flex;height:56px;justify-content:center;padding:5px;width:56px}.offer-lock-status{align-items:center;display:flex;gap:6px;margin-bottom:2px}.offer-lock-status span{font-size:14px;font-weight:700;line-height:1}.offer-box-content h3{font-size:30px;font-weight:900;line-height:1.2}.cb-lobby-top{display:grid;gap:100px;grid-template-columns:7fr 5fr}.group-info{backdrop-filter:blur(8px);background-color:color-mix(in oklab,#fff 5%,transparent);border-radius:20px;box-shadow:0 10px 15px -3px #0000001a;padding:30px}.progress-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:14px}.progress-header .title{align-items:center;color:#000;display:flex;font-size:14px;font-weight:900;justify-content:center;letter-spacing:.7px;position:relative}.progress-badge{background:#3b82f6;border-radius:999px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;color:#fff;font-size:13px;font-weight:700;padding:6px 12px}.cb-lobby-modal-container .progress-bar{background:#fff;border-radius:999px;height:14px;overflow:hidden;width:100%}.cb-lobby-modal-container .progress-fill{animation:shimmer 2.7s linear infinite;background:#3b82f6;background-image:linear-gradient(120deg,hsla(0,0%,100%,.15) 25%,hsla(0,0%,100%,.45) 37%,hsla(0,0%,100%,.15) 63%);background-size:200% 100%;border-radius:999px;height:100%;position:relative;transition:width .6s ease;width:0}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.progress-labels{color:#474d56;display:flex;font-size:12px;justify-content:space-between;margin-top:8px}.team-card{margin-top:40px}.team-card .icon-box svg{width:16px}.team-card .team-header{align-items:center;display:flex;justify-content:space-between}.team-card .team-title{align-items:center;display:flex;font-size:14px;font-weight:600;gap:12px;letter-spacing:1px}.team-card .icon-box{align-items:center;background-color:#3b82f6;border-radius:.5rem;box-shadow:0 10px 15px -3px #3b82f64d;color:#fff;display:flex;font-size:18px;height:2rem;justify-content:center;width:2rem}.team-card .team-title span{color:#000;font-size:14px;font-weight:900;letter-spacing:.7px}.team-card .team-count{background-color:#3b82f6;border-radius:9999px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;color:#fff;font-size:13px;font-weight:700;letter-spacing:.7px;padding:6px 12px}.team-card .team-members{align-items:center;display:flex;gap:14px;justify-content:center;margin-top:20px}.team-card .member{border:3px solid #fff;border-radius:50%;box-shadow:0 4px 12px #0000001a;font-size:22px;height:56px;position:relative;width:56px}.team-card .member,.team-card .member:after{align-items:center;color:#fff;display:flex;justify-content:center}.team-card .member:after{background:#3b82f6;background-image:url(https://cobuy-dev.s3.af-south-1.amazonaws.com/public/sdk/tick-mark-icon.svg);background-position:50%;background-repeat:no-repeat;background-size:75%;border:2px solid #fff;border-radius:50%;bottom:-4px;content:\"\";height:12px;padding:2px;position:absolute;right:-4px;width:12px}.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{align-items:center;backdrop-filter:blur(8px);background:hsla(0,0%,100%,.2);border:1px solid hsla(0,0%,100%,.2);border-radius:20px;display:flex;gap:14px;margin-top:30px;padding:15px}.time-card .time-icon{align-items:center;background:#3b82f6;border-radius:14px;color:#fff;display:flex;flex-shrink:0;font-size:22px;height:48px;justify-content:center;width:48px}.time-card .time-content{display:flex;flex-direction:column}.time-card .time-label{color:#4b5563;font-size:12px;font-weight:600;letter-spacing:.6px}.time-card .time-value{color:#111827;font-size:22px;font-weight:900}.group-info-box{backdrop-filter:blur(8px);background:color-mix(in oklab,#fff 5%,transparent);border:1px solid color-mix(in oklab,#fff 20%,transparent);border-radius:1.5rem;box-shadow:0 10px 15px -3px #0000001a;padding:30px}.offer-lock-status svg{height:16px;width:16px}.cb-lobby-modal-container .offer-box-content .reward-text{background:unset;border:none;color:#000;font-size:14px;line-height:1;margin-top:4px}.progress-header .title:before{background:#3b82f6;border-radius:50%;content:\"\";display:inline-block;height:8px;margin-right:8px;position:relative;width:8px}.live-activity-wrapper{backdrop-filter:blur(8px);background-color:color-mix(in oklab,#fff 80%,transparent);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.15);padding:16px}.live-activity-header{display:flex;gap:10px;justify-content:space-between;margin-bottom:12px}.live-activity-header .title{align-items:center;color:#000;display:flex;font-size:14px;font-weight:600;font-weight:900;gap:8px;letter-spacing:.7px}.live-activity-header .dot{background:#3b82f6;border-radius:50%;height:8px;position:relative;width:8px}.live-activity-header .dot:after{animation:livePulse 1.6s ease-out infinite;background:rgba(59,130,246,.6);border-radius:50%;content:\"\";inset:0;position:absolute}@keyframes livePulse{0%{opacity:.8;transform:scale(1)}70%{opacity:0;transform:scale(2.4)}to{opacity:0}}.activity-stats{align-items:center;display:flex;gap:8px}.activity-stats-badge{background-color:rgba(59,130,246,.082);border-radius:999px;color:#3b82f6;font-size:12px;font-weight:500;line-height:1;padding:4px 10px}.activity-stats-badge.light{background-color:#f9f3f4;color:#45556c}.activity-list{height:104px;overflow:hidden;position:relative}.activity-card{align-items:center;background:linear-gradient(90deg,#fff,#f2f6ff);border:1px solid #dbeafe;border-radius:14px;display:flex;gap:10px;height:58px;inset:0;padding:12px 10px;position:absolute;transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .6s}.activity-card .text{font-size:14px}.activity-card .avatar{align-items:center;border-radius:50%;color:#fff;display:flex;flex:0 0 30px;height:30px;justify-content:center;width: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{color:#6b7280;font-size:12px;margin:2px 0 0}.activity-card .time{color:#94a3b8;font-size:10px;margin-left:auto}.lobby-activity-wp{backdrop-filter:blur(12px);background-color:hsla(0,0%,100%,.4);border:1px solid hsla(0,0%,100%,.2);border-radius:25px;box-shadow:0 1px 3px 0 #0000001a;margin-top:50px;padding:8px}.lobby-close-icon{align-items:center;background-color:color-mix(in oklab,#000 80%,transparent);border-radius:50%;color:#fff;cursor:pointer;display:flex;height:34px;justify-content:center;position:fixed;right:30px;top:30px;width:34px;z-index:99}.lobby-close-icon svg{height:20px;width:20px}@media screen and (max-width:1600px){.cb-lobby-main{border-radius:30px;padding:50px}.title-wp h2{font-size:48px;margin-bottom:12px}.sub-title{font-size:16px}.title-wp{margin-top:20px}.lobby-link-wp{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{border-radius:20px;padding:22px}.team-card{margin-top:30px}.team-card .team-members{margin-top:12px}.lobby-activity-wp{margin-top:40px}.lobby-close-icon{height:30px;top:20px;width:30px}}@media screen and (max-width:1280px){.cb-lobby-main,.cb-lobby-main-wp{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{gap:30px;grid-template-columns:1fr}.cb-lobby-main{border-radius:15px;padding:30px}.cb-lobby-main-wp{padding:30px}.lobby-close-icon{right:20px}.lobby-link-box{border-radius:10px}.offer-box-content h3{font-size:24px}.lobby-activity-wp,.lobby-offer-box,.time-card{border-radius:15px;margin-top:20px}.live-activity-wrapper{border-radius:10px}.group-info-box{border-radius:15px}}@media screen and (max-width:575px){.cb-lobby-main,.cb-lobby-main-wp{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:10px}.lobby-link-wp{gap:12px}.share-btn-wp .share-btn{border-radius:8px;height:52px;width:52px}.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,.team-card .team-title span{font-size:13px}.team-card .member{height:40px;width:40px}.team-card .member:after{height:8px;width:8px}.team-card .team-members{gap:10px;margin-top:12px}.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-wp{gap:10px;margin-top:20px}.lobby-offer-box{gap:12px}.offer-box-icon{height:45px;width:45px}.offer-box-content .reward-text,.offer-lock-status span{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{border-radius:9px;padding:6px}}.share-overlay{align-items:center;background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;opacity:0;position:fixed;transition:.3s ease;visibility:hidden;z-index:999}.share-overlay.active{opacity:1;visibility:visible}.share-popup{background:#fff;border-radius:18px;max-height:90%;overflow:auto;padding:24px;position:relative;transform:translateY(30px);transition:.35s ease;width:420px}.share-overlay.active .share-popup{transform:translateY(0)}.share-popup .close-btn{align-items:center;background:#f3f4f6;border:none;border-radius:50%;cursor:pointer;display:flex;height:32px;justify-content:center;position:absolute;right:14px;top:14px;transition:.3s;width:32px}.share-popup .close-btn:hover{background:#eeecec}.share-popup h2{font-size:22px;font-weight:600;line-height:1;margin-bottom:10px}.share-popup .subtitle{color:#4a5565;font-size:14px;margin:6px 0 30px}.share-popup .share-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}.share-popup .share-card{align-items:center;background:#f2f6f9;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;padding:16px;position:relative;text-align:center;transition:.25s ease}.share-popup .share-card:hover{transform:translateY(-3px)}.share-popup .share-card .icon{align-items:center;background:#1877f2;border-radius:50%;color:#fff;display:flex;font-size:30px;height:50px;justify-content:center;margin-bottom:8px;text-align:center;width:50px}.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{background:#2563eb;border-radius:12px;color:#fff;font-size:11px;padding:4px 10px;position:absolute;right:10px;top:-8px}.share-popup .link-box{background:#fbf9fa;border:1px solid #ebe6e7;border-radius:14px;margin-top:18px;padding:14px}.share-popup .link-box label{color:#64748b;font-size:13px}.share-popup .link-row{display:flex;gap:8px;margin-top:6px}.share-popup .link-row input{background:transparent;border:none;color:#334155;flex:1;font-size:13px;letter-spacing:.8px;line-height:1.2;outline:none}.share-popup .link-row button{align-items:center;background:#fff;border:1px solid #ebe6e7;border-radius:10px;cursor:pointer;display:flex;height:35px;justify-content:center;padding:6px 8px;width:35px}.share-popup .success{color:#2563eb;display:block;font-size:12px;margin-top:6px;opacity:0;transition:opacity .3s}.share-popup .success.show{opacity:1}.share-popup .footer-text{color:#64748b;font-size:12px;margin-top:14px;text-align:center}.share-popup .share-card.twitter .icon{background:#000}.share-popup .share-card.facebook .icon{background:#1877f2}.share-popup .share-card.sms .icon{background:#059669}.share-popup .share-card.copied .icon{background:#2563eb}";
+var css_248z = ".cb-lobby-modal-container{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10000}.cb-lobby-modal-container *{box-sizing:border-box;margin:0;padding:0}.cb-lobby-modal-container body,.cb-lobby-modal-container html{font-family:Inter,sans-serif;height:100%;overflow-x:hidden;width:100%}.cb-lobby-main{backdrop-filter:blur(4px);background-color:color-mix(in oklab,#fff 5%,transparent);border-radius:50px;box-shadow:0 25px 50px -12px #00000040;padding:80px;position:relative;width:100%;z-index:1}.cb-lobby-bg{background-image:url(https://cobuy-dev.s3.af-south-1.amazonaws.com/public/sdk/cb-back-image.png);background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:-1}.cb-lobby-main-wp{align-items:center;display:flex;justify-content:center;padding:40px 80px}.lobby-indicator{backdrop-filter:blur(8px);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);border-radius:24px;gap:8px;margin-bottom:16px;padding:8px 16px;width:fit-content}.lobby-indicator,.pulsing-dot{align-items:center;display:flex}.pulsing-dot{height:8px;justify-content:center;position:relative;width:8px}.pulsing-dot:after{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.pulsing-dot:after,.pulsing-dot:before{background:#10b981;border-radius:50%;content:\"\";height:100%;position:absolute;width:100%}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.indicator-text{color:#047857;font-size:11px;font-weight:800;letter-spacing:.5px;line-height:1;text-transform:uppercase}.lobby-status-section{display:flex;flex-direction:column;margin-bottom:24px}.lobby-status{background:#fff;border-radius:4px;color:#000;font-size:10px;font-weight:600;line-height:1.2;padding:6px 10px;text-transform:uppercase}.lobby-status.active{background:#155dfc;color:#fff}.lobby-status.complete{background:#10b981;color:#fff}.lobby-status-wp{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.lobby-number{backdrop-filter:blur(3px);background:hsla(0,0%,100%,.2);border-radius:4px;box-shadow:0 25px 50px -12px #00000040;font-size:12px;font-weight:700;letter-spacing:1px;line-height:1.2;padding:5px 8px;text-transform:uppercase}.title-wp{margin-top:25px}.title-wp h2{font-size:60px;font-weight:900;line-height:1;margin-bottom:15px}.sub-title{-webkit-text-fill-color:transparent;animation:gradient-flow 4s linear infinite;background-clip:text;-webkit-background-clip:text;background-image:linear-gradient(90deg,#1e293b,#2563eb 25%,#1e293b 50%);background-size:200% auto;color:#1e293b;font-size:16px;font-weight:700;line-height:1.5;margin-bottom:0}@keyframes gradient-flow{0%{background-position:200% 0}to{background-position:-200% 0}}.sub-title.completed{-webkit-text-fill-color:unset;background-clip:unset;-webkit-background-clip:unset;background-image:none;color:#1e293b}.connected-section{backdrop-filter:blur(4px);background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:24px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);display:flex;flex-direction:column;gap:20px;margin-top:24px;padding:24px;transition:all .3s ease}.connected-section:hover{background:hsla(0,0%,100%,.1);box-shadow:0 2px 4px 0 rgba(0,0,0,.08)}.link-share-container{display:flex;flex-direction:column}.link-share-wrapper{align-items:center;display:flex;gap:12px;width:100%}.lobby-link-box{align-items:center;backdrop-filter:blur(8px);background-color:hsla(0,0%,100%,.4);border:1px solid hsla(0,0%,100%,.3);border-radius:14px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);display:flex;flex:1;gap:16px;justify-content:space-between;min-height:50px;padding:16px 20px;transition:all .2s ease}.lobby-link-box:hover{background-color:hsla(0,0%,100%,.5);box-shadow:0 2px 4px 0 rgba(0,0,0,.08)}.lobby-link-text{color:#71717a;font-size:10px;font-weight:700;letter-spacing:.6px;line-height:1.2;margin-bottom:6px;text-transform:uppercase}.copy-link-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:#64748b;cursor:pointer;display:flex;flex-shrink:0;font-size:13px;font-weight:600;gap:6px;justify-content:center;padding:0;transition:all .2s ease;white-space:nowrap}.copy-link-btn:hover{color:#1e293b}.copy-link-btn .copy-text{display:none}.copy-link-btn svg{flex-shrink:0;height:18px;width:18px}@media (min-width:640px){.copy-link-btn .copy-text{display:inline}}.lobby-link-url{color:#1e293b;font-size:15px;font-weight:700;line-height:1.4;word-break:break-all}.link-box-container{flex:1;min-width:0}.share-btn{align-items:center;background:#1e293b;border:none;border-radius:14px;box-shadow:0 2px 4px 0 rgba(0,0,0,.1);color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:15px;font-weight:600;gap:8px;height:50px;justify-content:center;min-width:auto;padding:35px 24px;transition:all .2s ease}.share-btn .share-text{color:#fff;display:inline;font-size:15px}.share-btn svg{color:#fff}@media (max-width:640px){.share-btn{font-size:14px;height:50px;padding:0 18px}.share-btn .share-text{color:#fff;display:inline}}.share-btn:hover{background:#0f172a;box-shadow:0 4px 8px 0 rgba(0,0,0,.15);transform:translateY(-1px)}.share-btn:active{transform:scale(.95)}.share-btn svg{flex-shrink:0;height:18px;width:18px}.lobby-offer-box{align-items:center;backdrop-filter:blur(8px);background-color:rgba(59,130,246,.063);border:1px solid rgba(59,130,246,.125);border-radius:1rem;display:flex;gap:30px;margin-top:30px;padding:15px 20px}.offer-box-icon{align-items:center;background:linear-gradient(135deg,#3b82f6,rgba(59,130,246,.867));border-radius:10px;box-shadow:0 10px 15px -3px rgba(59,130,246,.314);color:#fff;cursor:pointer;display:flex;height:56px;justify-content:center;padding:5px;width:56px}.offer-lock-status{align-items:center;display:flex;gap:6px;margin-bottom:2px}.offer-lock-status span{font-size:14px;font-weight:700;line-height:1}.offer-box-content h3{font-size:30px;font-weight:900;line-height:1.2}.cb-lobby-top{display:grid;gap:100px;grid-template-columns:7fr 5fr}.group-info{backdrop-filter:blur(8px);background-color:color-mix(in oklab,#fff 5%,transparent);border-radius:20px;box-shadow:0 10px 15px -3px #0000001a;padding:30px}.progress-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:14px}.progress-header .title{align-items:center;color:#000;display:flex;font-size:14px;font-weight:900;justify-content:center;letter-spacing:.7px;position:relative}.progress-badge{background:#3b82f6;border-radius:999px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;color:#fff;font-size:13px;font-weight:700;padding:6px 12px}.cb-lobby-modal-container .progress-bar{background:#fff;border-radius:999px;height:14px;overflow:hidden;width:100%}.cb-lobby-modal-container .progress-fill{animation:shimmer 2.7s linear infinite;background:#3b82f6;background-image:linear-gradient(120deg,hsla(0,0%,100%,.15) 25%,hsla(0,0%,100%,.45) 37%,hsla(0,0%,100%,.15) 63%);background-size:200% 100%;border-radius:999px;height:100%;position:relative;transition:width .6s ease;width:0}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.progress-labels{color:#474d56;display:flex;font-size:12px;justify-content:space-between;margin-top:8px}.team-card{margin-top:40px}.team-card .icon-box svg{width:16px}.team-card .team-header{align-items:center;display:flex;justify-content:space-between}.team-card .team-title{align-items:center;display:flex;font-size:14px;font-weight:600;gap:12px;letter-spacing:1px}.team-card .icon-box{align-items:center;background-color:#3b82f6;border-radius:.5rem;box-shadow:0 10px 15px -3px #3b82f64d;color:#fff;display:flex;font-size:18px;height:2rem;justify-content:center;width:2rem}.team-card .team-title span{color:#000;font-size:14px;font-weight:900;letter-spacing:.7px}.team-card .team-count{background-color:#3b82f6;border-radius:9999px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;color:#fff;font-size:13px;font-weight:700;letter-spacing:.7px;padding:6px 12px}.team-card .team-members{align-items:center;display:flex;gap:14px;justify-content:center;margin-top:20px}.team-card .member{border:3px solid #fff;border-radius:50%;box-shadow:0 4px 12px #0000001a;font-size:22px;height:56px;position:relative;width:56px}.team-card .member,.team-card .member:after{align-items:center;color:#fff;display:flex;justify-content:center}.team-card .member:after{background:#3b82f6;background-image:url(https://cobuy-dev.s3.af-south-1.amazonaws.com/public/sdk/tick-mark-icon.svg);background-position:50%;background-repeat:no-repeat;background-size:75%;border:2px solid #fff;border-radius:50%;bottom:-4px;content:\"\";height:12px;padding:2px;position:absolute;right:-4px;width:12px}.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{align-items:center;backdrop-filter:blur(8px);background:hsla(0,0%,100%,.2);border:1px solid hsla(0,0%,100%,.2);border-radius:20px;display:flex;gap:14px;margin-top:30px;padding:15px}.time-card .time-icon{align-items:center;background:#3b82f6;border-radius:14px;color:#fff;display:flex;flex-shrink:0;font-size:22px;height:48px;justify-content:center;width:48px}.time-card .time-content{display:flex;flex-direction:column}.time-card .time-label{color:#4b5563;font-size:12px;font-weight:600;letter-spacing:.6px}.time-card .time-value{color:#111827;font-size:22px;font-weight:900}.group-info-box{backdrop-filter:blur(8px);background:color-mix(in oklab,#fff 5%,transparent);border:1px solid color-mix(in oklab,#fff 20%,transparent);border-radius:1.5rem;box-shadow:0 10px 15px -3px #0000001a;padding:30px}.offer-lock-status svg{height:16px;width:16px}.cb-lobby-modal-container .offer-box-content .reward-text{background:unset;border:none;color:#000;font-size:14px;line-height:1;margin-top:4px}.progress-header .title:before{background:#3b82f6;border-radius:50%;content:\"\";display:inline-block;height:8px;margin-right:8px;position:relative;width:8px}.live-activity-wrapper{backdrop-filter:blur(8px);background-color:color-mix(in oklab,#fff 80%,transparent);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.15);padding:16px}.live-activity-header{display:flex;gap:10px;justify-content:space-between;margin-bottom:12px}.live-activity-header .title{align-items:center;color:#000;display:flex;font-size:14px;font-weight:600;font-weight:900;gap:8px;letter-spacing:.7px}.live-activity-header .dot{background:#3b82f6;border-radius:50%;height:8px;position:relative;width:8px}.live-activity-header .dot:after{animation:livePulse 1.6s ease-out infinite;background:rgba(59,130,246,.6);border-radius:50%;content:\"\";inset:0;position:absolute}@keyframes livePulse{0%{opacity:.8;transform:scale(1)}70%{opacity:0;transform:scale(2.4)}to{opacity:0}}.activity-stats{align-items:center;display:flex;gap:8px}.activity-stats-badge{background-color:rgba(59,130,246,.082);border-radius:999px;color:#3b82f6;font-size:12px;font-weight:500;line-height:1;padding:4px 10px}.activity-stats-badge.light{background-color:#f9f3f4;color:#45556c}.activity-list{height:104px;overflow:hidden;position:relative}.activity-card{align-items:center;background:linear-gradient(90deg,#fff,#f2f6ff);border:1px solid #dbeafe;border-radius:14px;display:flex;gap:10px;height:58px;inset:0;padding:12px 10px;position:absolute;transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .6s}.activity-card .text{font-size:14px}.activity-card .avatar{align-items:center;border-radius:50%;color:#fff;display:flex;flex:0 0 30px;height:30px;justify-content:center;width: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{color:#6b7280;font-size:12px;margin:2px 0 0}.activity-card .time{color:#94a3b8;font-size:10px;margin-left:auto}.lobby-activity-wp{backdrop-filter:blur(12px);background-color:hsla(0,0%,100%,.4);border:1px solid hsla(0,0%,100%,.2);border-radius:25px;box-shadow:0 1px 3px 0 #0000001a;margin-top:50px;padding:8px}.lobby-close-icon{align-items:center;background-color:color-mix(in oklab,#000 80%,transparent);border-radius:50%;color:#fff;cursor:pointer;display:flex;height:34px;justify-content:center;position:fixed;right:30px;top:30px;width:34px;z-index:99}.lobby-close-icon svg{height:20px;width:20px}@media screen and (max-width:1600px){.cb-lobby-main{border-radius:30px;padding:50px}.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{border-radius:20px;padding:22px}.team-card{margin-top:30px}.team-card .team-members{margin-top:12px}.lobby-activity-wp{margin-top:40px}.lobby-close-icon{height:30px;top:20px;width:30px}}@media screen and (max-width:1280px){.cb-lobby-main,.cb-lobby-main-wp{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{gap:30px;grid-template-columns:1fr}.cb-lobby-main{border-radius:15px;padding:30px}.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-activity-wp,.lobby-offer-box,.time-card{border-radius:15px;margin-top:20px}.live-activity-wrapper{border-radius:10px}.group-info-box{border-radius:15px}}@media screen and (max-width:575px){.cb-lobby-main,.cb-lobby-main-wp{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{min-height:48px;padding:12px 16px}.link-share-wrapper{gap:10px}.share-btn{border-radius:8px;font-size:13px;height:48px;min-width:auto;padding:0 14px}.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,.team-card .team-title span{font-size:13px}.team-card .member{height:40px;width:40px}.team-card .member:after{height:8px;width:8px}.team-card .team-members{gap:10px;margin-top:12px}.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{height:45px;width:45px}.offer-box-content .reward-text,.offer-lock-status span{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{border-radius:9px;padding:6px}}.share-overlay{align-items:center;background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;opacity:0;position:fixed;transition:.3s ease;visibility:hidden;z-index:999}.share-overlay.active{opacity:1;visibility:visible}.share-popup{background:#fff;border-radius:18px;max-height:90%;overflow:auto;padding:24px;position:relative;transform:translateY(30px);transition:.35s ease;width:420px}.share-overlay.active .share-popup{transform:translateY(0)}.share-popup .close-btn{align-items:center;background:#f3f4f6;border:none;border-radius:50%;cursor:pointer;display:flex;height:32px;justify-content:center;position:absolute;right:14px;top:14px;transition:.3s;width:32px}.share-popup .close-btn:hover{background:#eeecec}.share-popup h2{font-size:22px;font-weight:600;line-height:1;margin-bottom:10px}.share-popup .subtitle{color:#4a5565;font-size:14px;margin:6px 0 30px}.share-popup .share-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}.share-popup .share-card{align-items:center;background:#f2f6f9;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;padding:16px;position:relative;text-align:center;transition:.25s ease}.share-popup .share-card:hover{transform:translateY(-3px)}.share-popup .share-card .icon{align-items:center;background:#1877f2;border-radius:50%;color:#fff;display:flex;font-size:30px;height:50px;justify-content:center;margin-bottom:8px;text-align:center;width:50px}.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{background:#2563eb;border-radius:12px;color:#fff;font-size:11px;padding:4px 10px;position:absolute;right:10px;top:-8px}.share-popup .link-box{background:#fbf9fa;border:1px solid #ebe6e7;border-radius:14px;margin-top:18px;padding:14px}.share-popup .link-box label{color:#64748b;font-size:13px}.share-popup .link-row{display:flex;gap:8px;margin-top:6px}.share-popup .link-row input{background:transparent;border:none;color:#334155;flex:1;font-size:13px;letter-spacing:.8px;line-height:1.2;outline:none}.share-popup .link-row button{align-items:center;background:#fff;border:1px solid #ebe6e7;border-radius:10px;cursor:pointer;display:flex;height:35px;justify-content:center;padding:6px 8px;width:35px}.share-popup .success{color:#2563eb;display:block;font-size:12px;margin-top:6px;opacity:0;transition:opacity .3s}.share-popup .success.show{opacity:1}.share-popup .footer-text{color:#64748b;font-size:12px;margin-top:14px;text-align:center}.share-popup .share-card.twitter .icon{background:#000}.share-popup .share-card.facebook .icon{background:#1877f2}.share-popup .share-card.sms .icon{background:#059669}.share-popup .share-card.copied .icon{background:#2563eb}@keyframes entrance-fade-in{0%{opacity:0}to{opacity:1}}@keyframes entrance-scale-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes entrance-text-fade-in{0%{opacity:0}to{opacity:1}}@keyframes exit-blur-scale{0%{filter:blur(0);opacity:1;transform:scale(1)}to{filter:blur(10px);opacity:0;transform:scale(1.1)}}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.entrance-animation-overlay{align-items:center;animation:entrance-fade-in .8s ease-in-out forwards;background-color:#0f172a;color:#fff;display:flex;flex-direction:column;inset:0;justify-content:center;position:fixed;z-index:9999}.entrance-animation-overlay.exit{animation:exit-blur-scale .8s ease-in-out forwards}.entrance-content{align-items:center;animation:entrance-scale-in .5s ease-out .2s both;display:flex;flex-direction:column}.entrance-icon-box{align-items:center;background:#2563eb;border-radius:16px;box-shadow:0 10px 25px rgba(37,99,235,.2);display:flex;height:64px;justify-content:center;margin-bottom:24px;width:64px}.entrance-icon-box svg{color:#fff;height:32px;width:32px}.entrance-title{font-size:32px;font-weight:700;letter-spacing:-.5px;margin-bottom:12px}@media (min-width:768px){.entrance-title{font-size:48px}}.entrance-message{align-items:center;animation:entrance-text-fade-in .5s ease-out .5s both;color:#60a5fa;display:flex;font-size:18px;font-weight:500;gap:8px}.entrance-pulse-dot{animation:pulse-dot 1.5s ease-in-out infinite;background-color:#60a5fa;border-radius:50%;height:8px;width:8px}";
 styleInject(css_248z,{"insertAt":"bottom"});
 
 /**
@@ -1326,6 +1577,7 @@ class LobbyModal {
         this.handleSocketGroupUpdate = (event) => {
             var _a, _b, _c, _d, _e, _f, _g;
             const detail = event.detail || {};
+            console.log("group completed", event, detail);
             const normalizeId = (id) => {
                 if (id === undefined || id === null)
                     return null;
@@ -1395,6 +1647,14 @@ class LobbyModal {
                 status: isComplete ? "complete" : "active",
                 isLocked: !isComplete,
             };
+            // Add offline redemption data if available and group is complete
+            if (isComplete) {
+                const offlineRedemption = detail.offline_redemption;
+                if (offlineRedemption && isValidOfflineRedemption(offlineRedemption)) {
+                    updatePayload.offlineRedemption = offlineRedemption;
+                    this.logger.info("Offline redemption data received in socket event");
+                }
+            }
             this.updateData(updatePayload);
             // Also update team card to reflect new member count
             this.updateTeamCard(participants, max);
@@ -1412,6 +1672,7 @@ class LobbyModal {
             currentMembers: data.currentMembers,
             totalMembers: data.totalMembers,
             timeLeft: data.timeLeft,
+            offlineRedemption: data.offlineRedemption,
         });
         this.data = Object.assign({ groupNumber: "1000", status: "active", progress: 80, currentMembers: 4, totalMembers: 5, timeLeft: 1390, discount: "20% OFF", isLocked: true, activities: this.getDefaultActivities() }, data);
         // Normalize optional flags so undefined values don't override defaults
@@ -1442,7 +1703,7 @@ class LobbyModal {
         return true;
     }
     getRewardText(isLocked) {
-        return isLocked ? "🔓 Complete group to unlock reward." : "🎉 Reward unlocked!";
+        return isLocked ? "🔓 Complete group to unlock discount." : "🎉 Discount unlocked!";
     }
     getTitleText(data) {
         var _a, _b;
@@ -1451,19 +1712,19 @@ class LobbyModal {
         const unlocked = !this.computeIsLocked(data);
         if (unlocked) {
             return {
-                title: "Reward unlocked!",
-                subtitle: "Group filled — enjoy your reward.",
+                title: "Discount unlocked!",
+                subtitle: "Group filled — enjoy your discount.",
             };
         }
         if (remaining <= 1) {
             return {
                 title: "Just one more!",
-                subtitle: "Invite a friend to unlock your reward instantly.",
+                subtitle: "Invite a friend to unlock your discount instantly.",
             };
         }
         return {
             title: "Almost there!",
-            subtitle: `Just ${remaining} more ${remaining === 1 ? "member" : "members"} — your reward unlocks instantly.`,
+            subtitle: `Just ${remaining} more ${remaining === 1 ? "member" : "members"} — your discount unlocks instantly.`,
         };
     }
     /**
@@ -1513,6 +1774,62 @@ class LobbyModal {
             },
         ];
     }
+    /**
+     * Create entrance animation overlay
+     */
+    createEntranceAnimation() {
+        const overlay = document.createElement("div");
+        overlay.className = "entrance-animation-overlay";
+        overlay.id = "entranceAnimationOverlay";
+        const content = document.createElement("div");
+        content.className = "entrance-content";
+        // Icon box
+        const iconBox = document.createElement("div");
+        iconBox.className = "entrance-icon-box";
+        iconBox.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>`;
+        // Title
+        const title = document.createElement("h1");
+        title.className = "entrance-title";
+        title.textContent = "Group Lobby";
+        // Message with pulsing dot
+        const message = document.createElement("p");
+        message.className = "entrance-message";
+        const pulseDot = document.createElement("span");
+        pulseDot.className = "entrance-pulse-dot";
+        const messageText = document.createElement("span");
+        messageText.textContent = "Entering secure session...";
+        message.appendChild(pulseDot);
+        message.appendChild(messageText);
+        content.appendChild(iconBox);
+        content.appendChild(title);
+        content.appendChild(message);
+        overlay.appendChild(content);
+        return overlay;
+    }
+    /**
+     * Show entrance animation and auto-hide after duration
+     */
+    showEntranceAnimation(onComplete) {
+        const overlay = this.createEntranceAnimation();
+        document.body.appendChild(overlay);
+        // After 2.5 seconds, trigger exit animation and remove
+        setTimeout(() => {
+            this.hideEntranceAnimation(overlay, onComplete);
+        }, 2500);
+    }
+    /**
+     * Hide entrance animation with exit effect
+     */
+    hideEntranceAnimation(overlay, onComplete) {
+        overlay.classList.add("exit");
+        // Remove after animation completes (800ms) and call callback
+        setTimeout(() => {
+            overlay.remove();
+            if (onComplete) {
+                onComplete();
+            }
+        }, 800);
+    }
     /**
      * Create the modal DOM structure
      */
@@ -1535,9 +1852,12 @@ class LobbyModal {
         // Top section
         const topSection = this.createTopSection();
         mainContent.appendChild(topSection);
-        // Activity section
-        const activitySection = this.createActivitySection();
-        mainContent.appendChild(activitySection);
+        // Activity section (hidden when offline redemption is present to keep layout compact)
+        const hasOfflineRedemption = this.data.offlineRedemption && isValidOfflineRedemption(this.data.offlineRedemption);
+        if (!hasOfflineRedemption) {
+            const activitySection = this.createActivitySection();
+            mainContent.appendChild(activitySection);
+        }
         mainWrapper.appendChild(mainContent);
         modal.appendChild(background);
         modal.appendChild(mainWrapper);
@@ -1580,9 +1900,9 @@ class LobbyModal {
         // Title
         const titleWp = this.createTitleSection();
         leftWp.appendChild(titleWp);
-        // Link
-        const linkWp = this.createLinkSection();
-        leftWp.appendChild(linkWp);
+        // Connected section (subtitle + link + share)
+        const connectedSection = this.createConnectedSection();
+        leftWp.appendChild(connectedSection);
         // Offer
         const offerBox = this.createOfferSection();
         leftWp.appendChild(offerBox);
@@ -1594,24 +1914,35 @@ class LobbyModal {
     createStatusSection() {
         var _a;
         const statusWp = document.createElement("div");
-        statusWp.className = "lobby-status-wp";
+        statusWp.className = "lobby-status-section";
         // Use safe defaults so UI never shows undefined values
         const groupNum = (_a = this.data.groupNumber) !== null && _a !== void 0 ? _a : "1000";
         const status = this.data.status === "complete" ? "complete" : "active";
-        const statusLabel = document.createElement("div");
-        statusLabel.className = "lobby-status";
-        statusLabel.textContent = "Status";
+        // New "You are in the lobby" indicator badge
+        const lobbyIndicator = document.createElement("div");
+        lobbyIndicator.className = "lobby-indicator";
+        const pulsingDot = document.createElement("div");
+        pulsingDot.className = "pulsing-dot";
+        const indicatorText = document.createElement("span");
+        indicatorText.className = "indicator-text";
+        indicatorText.textContent = "YOU ARE IN THE LOBBY";
+        lobbyIndicator.appendChild(pulsingDot);
+        lobbyIndicator.appendChild(indicatorText);
+        // Status row with badge and group number
+        const statusRow = document.createElement("div");
+        statusRow.className = "lobby-status-wp";
         // Render only the current status chip
         const statusChip = document.createElement("div");
         statusChip.className = `lobby-status ${status}`;
         statusChip.id = "lobbyStatusChip";
-        statusChip.textContent = status === "complete" ? "Complete" : "Active";
+        statusChip.textContent = status === "complete" ? "COMPLETED" : "ACTIVE";
         const groupNumber = document.createElement("div");
         groupNumber.className = "lobby-number";
         groupNumber.textContent = `Group #${groupNum}`;
-        statusWp.appendChild(statusLabel);
-        statusWp.appendChild(statusChip);
-        statusWp.appendChild(groupNumber);
+        statusRow.appendChild(statusChip);
+        statusRow.appendChild(groupNumber);
+        statusWp.appendChild(lobbyIndicator);
+        statusWp.appendChild(statusRow);
         return statusWp;
     }
     /**
@@ -1624,24 +1955,49 @@ class LobbyModal {
         const title = document.createElement("h2");
         title.id = "lobbyTitleText";
         title.textContent = titleContent.title;
+        titleWp.appendChild(title);
+        return titleWp;
+    }
+    /**
+     * Create connected section (subtitle + link + share)
+     */
+    createConnectedSection() {
+        const connectedSection = document.createElement("div");
+        connectedSection.className = "connected-section";
+        connectedSection.id = "lobbyConnectedSection";
+        const titleContent = this.getTitleText(this.data);
+        // Subtitle
         const subtitle = document.createElement("p");
         subtitle.className = "sub-title";
         subtitle.id = "lobbySubtitleText";
         subtitle.textContent = titleContent.subtitle;
-        titleWp.appendChild(title);
-        titleWp.appendChild(subtitle);
-        return titleWp;
+        connectedSection.appendChild(subtitle);
+        // Check if group is fulfilled and has offline redemption
+        const isComplete = !this.computeIsLocked(this.data);
+        const hasOfflineRedemption = isComplete &&
+            this.data.offlineRedemption &&
+            isValidOfflineRedemption(this.data.offlineRedemption);
+        if (hasOfflineRedemption) {
+            // Show offline redemption view with integrated actions
+            const offlineSection = this.createOfflineRedemptionSection(this.data.offlineRedemption);
+            connectedSection.appendChild(offlineSection);
+        }
+        else {
+            // Show link and share container
+            const linkShareContainer = document.createElement("div");
+            linkShareContainer.className = "link-share-container";
+            const linkWp = this.createLinkSection();
+            linkShareContainer.appendChild(linkWp);
+            connectedSection.appendChild(linkShareContainer);
+        }
+        return connectedSection;
     }
     /**
-     * Create link section
+     * Create link section (just the link box and share button, no wrapper)
      */
     createLinkSection() {
-        const linkWp = document.createElement("div");
-        linkWp.className = "lobby-link-wp";
-        linkWp.id = "lobbyLinkSection";
-        if (!this.data.isLocked) {
-            linkWp.style.display = "none";
-        }
+        const linkShareWrapper = document.createElement("div");
+        linkShareWrapper.className = "link-share-wrapper";
         // Link box
         const linkBox = document.createElement("div");
         linkBox.className = "lobby-link-box";
@@ -1656,23 +2012,324 @@ class LobbyModal {
         linkUrl.textContent = this.data.groupLink || `cobuy.group/lobby/${this.data.productId}`;
         linkBoxInr.appendChild(linkText);
         linkBoxInr.appendChild(linkUrl);
-        const copyBtn = document.createElement("div");
+        const copyBtn = document.createElement("button");
         copyBtn.className = "copy-link-btn";
-        copyBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-4 h-4 sm:w-5 sm:h-5"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`;
+        copyBtn.innerHTML = `<span class="copy-text">Copy</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`;
         copyBtn.addEventListener("click", () => this.copyLink());
         linkBox.appendChild(linkBoxInr);
         linkBox.appendChild(copyBtn);
         // Share button
-        const shareBtn = document.createElement("div");
-        shareBtn.className = "share-btn-wp";
-        const shareBtnInner = document.createElement("div");
+        const shareBtnInner = document.createElement("button");
         shareBtnInner.className = "share-btn";
-        shareBtnInner.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share w-6 h-6 sm:w-7 sm:h-7"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" x2="12" y1="2" y2="15"></line></svg>`;
+        shareBtnInner.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" x2="12" y1="2" y2="15"></line></svg><span class="share-text">Share</span>`;
         shareBtnInner.addEventListener("click", () => this.share());
-        shareBtn.appendChild(shareBtnInner);
-        linkWp.appendChild(linkBox);
-        linkWp.appendChild(shareBtn);
-        return linkWp;
+        linkShareWrapper.appendChild(linkBox);
+        linkShareWrapper.appendChild(shareBtnInner);
+        return linkShareWrapper;
+    }
+    /**
+     * Create offline redemption section
+     */
+    createOfflineRedemptionSection(offlineRedemption) {
+        const section = document.createElement("div");
+        section.className = "offline-redemption-section";
+        section.id = "lobbyOfflineRedemptionSection";
+        // Top row: QR + Code side by side
+        const topRow = document.createElement("div");
+        topRow.className = "offline-top-row";
+        // QR Code container
+        const qrContainer = document.createElement("div");
+        qrContainer.className = "offline-qr-container";
+        const qrImage = document.createElement("img");
+        qrImage.className = "offline-qr-image";
+        qrImage.alt = "Redemption QR Code";
+        qrImage.src = buildQRUrl(offlineRedemption.qr_code_data);
+        // Handle QR image load errors
+        qrImage.addEventListener("error", () => {
+            qrImage.style.display = "none";
+            const fallbackText = document.createElement("div");
+            fallbackText.className = "offline-qr-fallback";
+            fallbackText.textContent = "QR Code Unavailable";
+            qrContainer.appendChild(fallbackText);
+        });
+        qrContainer.appendChild(qrImage);
+        // Redemption code box
+        const codeBox = document.createElement("div");
+        codeBox.className = "offline-code-box";
+        const codeLabel = document.createElement("p");
+        codeLabel.className = "offline-code-label";
+        codeLabel.textContent = "Redemption Code";
+        const codeValue = document.createElement("div");
+        codeValue.className = "offline-code-value";
+        codeValue.textContent = offlineRedemption.redemption_code;
+        const copyCodeBtn = document.createElement("button");
+        copyCodeBtn.className = "offline-copy-code-btn";
+        copyCodeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`;
+        copyCodeBtn.addEventListener("click", () => this.copyOfflineRedemptionCode(offlineRedemption.redemption_code, copyCodeBtn));
+        const codeRow = document.createElement("div");
+        codeRow.className = "offline-code-row";
+        codeRow.appendChild(codeValue);
+        codeRow.appendChild(copyCodeBtn);
+        codeBox.appendChild(codeLabel);
+        codeBox.appendChild(codeRow);
+        topRow.appendChild(qrContainer);
+        topRow.appendChild(codeBox);
+        // Expiry info - compact single line
+        const expiryInfo = document.createElement("div");
+        expiryInfo.className = "offline-expiry-info";
+        expiryInfo.innerHTML = `<span class="offline-expiry-label">Valid Until:</span> <span class="offline-expiry-value">${formatExpiryDate(offlineRedemption.offline_expires_at)}</span>`;
+        // Action buttons row
+        const actionsRow = document.createElement("div");
+        actionsRow.className = "offline-actions-row";
+        // Download QR button
+        const downloadQRBtn = document.createElement("button");
+        downloadQRBtn.className = "offline-download-qr-btn";
+        downloadQRBtn.textContent = "Download QR";
+        downloadQRBtn.addEventListener("click", () => this.downloadOfflineQR(offlineRedemption, downloadQRBtn));
+        // Online checkout button
+        const onlineCheckoutBtn = document.createElement("button");
+        onlineCheckoutBtn.className = "offline-online-checkout-btn";
+        onlineCheckoutBtn.textContent = "Checkout Online";
+        onlineCheckoutBtn.addEventListener("click", () => {
+            if (this.data.groupLink) {
+                window.open(this.data.groupLink, "_blank");
+            }
+        });
+        actionsRow.appendChild(downloadQRBtn);
+        actionsRow.appendChild(onlineCheckoutBtn);
+        section.appendChild(topRow);
+        section.appendChild(expiryInfo);
+        section.appendChild(actionsRow);
+        // Inject styles for offline redemption section
+        this.injectOfflineRedemptionStyles();
+        return section;
+    }
+    /**
+     * Handle copying offline redemption code
+     */
+    async copyOfflineRedemptionCode(code, button) {
+        const originalContent = button.innerHTML;
+        const success = await copyRedemptionCode(code);
+        if (success) {
+            button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+            setTimeout(() => {
+                button.innerHTML = originalContent;
+            }, 2000);
+        }
+    }
+    /**
+     * Handle downloading offline QR code
+     */
+    async downloadOfflineQR(offlineRedemption, button) {
+        const originalText = button.textContent;
+        button.disabled = true;
+        button.textContent = "Downloading...";
+        const success = await downloadQRCode(buildQRUrl(offlineRedemption.qr_code_data), "redemption-qr.png");
+        button.textContent = success ? "Downloaded!" : "Failed";
+        setTimeout(() => {
+            button.textContent = originalText;
+            button.disabled = false;
+        }, 2000);
+    }
+    /**
+     * Inject styles for offline redemption section
+     */
+    injectOfflineRedemptionStyles() {
+        if (document.getElementById("lobby-offline-redemption-styles")) {
+            return;
+        }
+        const style = document.createElement("style");
+        style.id = "lobby-offline-redemption-styles";
+        style.textContent = `
+      .offline-redemption-section {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        padding: 16px;
+        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+        border: 1.5px solid #e5e7eb;
+        border-radius: 12px;
+        margin-top: 12px;
+      }
+
+      .offline-top-row {
+        display: flex;
+        gap: 14px;
+        align-items: stretch;
+      }
+
+      .offline-qr-container {
+        flex: 0 0 120px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: white;
+        padding: 10px;
+        border-radius: 8px;
+        border: 1.5px solid #e5e7eb;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+      }
+
+      .offline-qr-image {
+        max-width: 100px;
+        max-height: 100px;
+        width: auto;
+        height: auto;
+        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
+      }
+
+      .offline-qr-fallback {
+        color: #9ca3af;
+        font-size: 11px;
+        text-align: center;
+      }
+
+      .offline-code-box {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        justify-content: center;
+      }
+
+      .offline-code-row {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+
+      .offline-code-label {
+        margin: 0;
+        font-size: 11px;
+        font-weight: 700;
+        color: #1f2937;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .offline-code-value {
+        font-family: 'Courier New', monospace;
+        font-size: 14px;
+        font-weight: 700;
+        color: #111827;
+        padding: 10px 40px 10px 12px;
+        background: white;
+        border: 1.5px solid #d1d5db;
+        border-radius: 8px;
+        text-align: center;
+        letter-spacing: 1.5px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        transition: all 0.2s;
+      }
+
+      .offline-code-row .offline-code-value {
+        width: 100%;
+      }
+
+      .offline-code-value:hover {
+        border-color: #3b82f6;
+        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
+      }
+
+      .offline-copy-code-btn {
+        position: absolute;
+        right: 6px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: none;
+        border: none;
+        padding: 5px 8px;
+        cursor: pointer;
+        color: #6b7280;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+        border-radius: 4px;
+      }
+
+      .offline-copy-code-btn:hover {
+        color: #3b82f6;
+        background: #eff6ff;
+      }
+
+      .offline-expiry-info {
+        font-size: 11px;
+        color: #6b7280;
+        text-align: center;
+        padding: 6px 0;
+      }
+
+      .offline-expiry-label {
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: #1f2937;
+      }
+
+      .offline-expiry-value {
+        font-weight: 600;
+        color: #374151;
+      }
+
+      .offline-actions-row {
+        display: flex;
+        gap: 10px;
+      }
+
+      .offline-download-qr-btn,
+      .offline-online-checkout-btn {
+        flex: 1;
+        padding: 11px 16px;
+        border: none;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 700;
+        cursor: pointer;
+        transition: all 0.2s;
+        text-transform: uppercase;
+        letter-spacing: 0.4px;
+      }
+
+      .offline-download-qr-btn {
+        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+        color: white;
+        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
+      }
+
+      .offline-download-qr-btn:hover:not(:disabled) {
+        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+        transform: translateY(-1px);
+      }
+
+      .offline-online-checkout-btn {
+        background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+        color: white;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+      }
+
+      .offline-online-checkout-btn:hover {
+        background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        transform: translateY(-1px);
+      }
+
+      .offline-download-qr-btn:active:not(:disabled),
+      .offline-online-checkout-btn:active {
+        transform: translateY(0);
+      }
+
+      .offline-download-qr-btn:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+      }
+    `;
+        document.head.appendChild(style);
     }
     /**
      * Create offer section
@@ -2311,24 +2968,27 @@ class LobbyModal {
             groupNumber: this.data.groupNumber,
             status: this.data.status,
         });
-        this.modalElement = this.createModalStructure();
-        document.body.appendChild(this.modalElement);
-        // Subscribe to realtime socket events
-        this.subscribeToSocketEvents();
-        // If socket is available and connected, subscribe to this group
-        if (this.socketManager && this.socketManager.isConnected() && this.currentGroupId) {
-            this.logger.info(`[LobbyModal] Socket connected, subscribing to group ${this.currentGroupId}`);
-            this.socketManager.subscribeToGroup(this.currentGroupId);
-        }
-        else if (this.socketManager && !this.socketManager.isConnected()) {
-            this.logger.warn("[LobbyModal] Socket manager not connected yet");
-        }
-        // Start timers and animations
-        this.startTimer();
-        this.startActivityAnimation();
-        // Track analytics
-        if (this.analyticsClient) ;
-        this.logger.info(`Lobby modal opened for product: ${this.data.productId}`);
+        // Show entrance animation, then open modal after animation completes
+        this.showEntranceAnimation(() => {
+            this.modalElement = this.createModalStructure();
+            document.body.appendChild(this.modalElement);
+            // Subscribe to realtime socket events
+            this.subscribeToSocketEvents();
+            // If socket is available and connected, subscribe to this group
+            if (this.socketManager && this.socketManager.isConnected() && this.currentGroupId) {
+                this.logger.info(`[LobbyModal] Socket connected, subscribing to group ${this.currentGroupId}`);
+                this.socketManager.subscribeToGroup(this.currentGroupId);
+            }
+            else if (this.socketManager && !this.socketManager.isConnected()) {
+                this.logger.warn("[LobbyModal] Socket manager not connected yet");
+            }
+            // Start timers and animations
+            this.startTimer();
+            this.startActivityAnimation();
+            // Track analytics
+            if (this.analyticsClient) ;
+            this.logger.info(`Lobby modal opened for product: ${this.data.productId}`);
+        });
     }
     /**
      * Close the modal
@@ -2374,6 +3034,10 @@ class LobbyModal {
         this.updateLockUI(!!this.data.isLocked);
         this.updateTitleUI(this.data);
         this.updateLinkVisibility(!!this.data.isLocked);
+        // Update offline redemption visibility if data changed
+        if (data.offlineRedemption !== undefined || data.status !== undefined) {
+            this.updateOfflineRedemptionVisibility();
+        }
         // Update progress if changed
         if (data.progress !== undefined) {
             const progressFill = document.getElementById("progressFill");
@@ -2448,6 +3112,42 @@ class LobbyModal {
             return;
         linkSection.style.display = isLocked ? "" : "none";
     }
+    /**
+     * Update offline redemption visibility when group is fulfilled
+     */
+    updateOfflineRedemptionVisibility() {
+        const connectedSection = document.getElementById("lobbyConnectedSection");
+        if (!connectedSection)
+            return;
+        const isComplete = !this.computeIsLocked(this.data);
+        const hasOfflineRedemption = this.data.offlineRedemption && isValidOfflineRedemption(this.data.offlineRedemption);
+        // Get existing elements
+        const existingOffline = connectedSection.querySelector(".offline-redemption-section");
+        const existingLink = connectedSection.querySelector(".link-share-container");
+        if (isComplete && hasOfflineRedemption) {
+            // Show offline redemption, hide link/share
+            if (existingLink) {
+                existingLink.remove();
+            }
+            if (!existingOffline) {
+                const offlineSection = this.createOfflineRedemptionSection(this.data.offlineRedemption);
+                connectedSection.appendChild(offlineSection);
+            }
+        }
+        else {
+            // Show link/share, hide offline redemption
+            if (existingOffline) {
+                existingOffline.remove();
+            }
+            if (!existingLink) {
+                const linkShareContainer = document.createElement("div");
+                linkShareContainer.className = "link-share-container";
+                const linkWp = this.createLinkSection();
+                linkShareContainer.appendChild(linkWp);
+                connectedSection.appendChild(linkShareContainer);
+            }
+        }
+    }
     /**
      * Subscribe to socket events
      */
@@ -2484,7 +3184,7 @@ class LobbyModal {
                 break;
             case "group:fulfilled":
                 emoji = "🎁";
-                action = "unlocked the reward – group filled!";
+                action = "unlocked the discount – group filled!";
                 break;
             case "group:created":
                 emoji = "🛒";
@@ -2552,6 +3252,405 @@ class LobbyModal {
     }
 }
 
+/**
+ * Offline Redemption Modal
+ * Displays QR code and redemption code for fulfilled groups
+ */
+class OfflineRedemptionModal {
+    constructor(offlineRedemption, onClose) {
+        this.modalElement = null;
+        this.offlineRedemption = offlineRedemption;
+        this.onClose = onClose;
+    }
+    /**
+     * Open the modal
+     */
+    open() {
+        if (this.modalElement && document.body.contains(this.modalElement)) {
+            return; // Already open
+        }
+        this.modalElement = this.createModalStructure();
+        document.body.appendChild(this.modalElement);
+        // Trigger entrance animation
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = this.modalElement) === null || _a === void 0 ? void 0 : _a.classList.add("offline-redemption-modal-open");
+        });
+    }
+    /**
+     * Close the modal
+     */
+    close() {
+        if (!this.modalElement)
+            return;
+        this.modalElement.classList.remove("offline-redemption-modal-open");
+        // Remove after animation completes
+        setTimeout(() => {
+            var _a;
+            if (this.modalElement && document.body.contains(this.modalElement)) {
+                document.body.removeChild(this.modalElement);
+                this.modalElement = null;
+            }
+            (_a = this.onClose) === null || _a === void 0 ? void 0 : _a.call(this);
+        }, 300);
+    }
+    /**
+     * Create the modal DOM structure
+     */
+    createModalStructure() {
+        const container = document.createElement("div");
+        container.className = "offline-redemption-modal-overlay";
+        // Backdrop
+        const backdrop = document.createElement("div");
+        backdrop.className = "offline-redemption-backdrop";
+        backdrop.addEventListener("click", () => this.close());
+        // Modal content
+        const modal = document.createElement("div");
+        modal.className = "offline-redemption-modal";
+        // Close button
+        const closeBtn = document.createElement("button");
+        closeBtn.className = "offline-redemption-close-btn";
+        closeBtn.setAttribute("aria-label", "Close modal");
+        closeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>`;
+        closeBtn.addEventListener("click", () => this.close());
+        // Header
+        const header = document.createElement("div");
+        header.className = "offline-redemption-header";
+        const title = document.createElement("h2");
+        title.className = "offline-redemption-title";
+        title.textContent = "Redeem In-Store";
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+        // Body
+        const body = document.createElement("div");
+        body.className = "offline-redemption-body";
+        // QR Code section
+        const qrSection = document.createElement("div");
+        qrSection.className = "offline-redemption-qr-section";
+        const qrImage = document.createElement("img");
+        qrImage.className = "offline-redemption-qr-image";
+        qrImage.alt = "Redemption QR Code";
+        qrImage.src = buildQRUrl(this.offlineRedemption.qr_code_data);
+        // QR image fallback handler
+        qrImage.addEventListener("error", () => {
+            qrImage.style.display = "none";
+            const errorMsg = document.createElement("div");
+            errorMsg.className = "offline-redemption-qr-error";
+            errorMsg.textContent = "QR code unavailable";
+            qrSection.appendChild(errorMsg);
+        });
+        qrSection.appendChild(qrImage);
+        // Redemption code section
+        const codeSection = document.createElement("div");
+        codeSection.className = "offline-redemption-code-section";
+        const codeLabel = document.createElement("p");
+        codeLabel.className = "offline-redemption-code-label";
+        codeLabel.textContent = "Redemption Code:";
+        const codeValue = document.createElement("div");
+        codeValue.className = "offline-redemption-code-value";
+        codeValue.textContent = this.offlineRedemption.redemption_code;
+        codeSection.appendChild(codeLabel);
+        codeSection.appendChild(codeValue);
+        // Expiry section
+        const expirySection = document.createElement("div");
+        expirySection.className = "offline-redemption-expiry-section";
+        const expiryLabel = document.createElement("p");
+        expiryLabel.className = "offline-redemption-expiry-label";
+        expiryLabel.textContent = "Valid Until:";
+        const expiryValue = document.createElement("p");
+        expiryValue.className = "offline-redemption-expiry-value";
+        const isValid = isRedemptionValid(this.offlineRedemption.offline_expires_at);
+        expiryValue.textContent = formatExpiryDate(this.offlineRedemption.offline_expires_at);
+        if (!isValid) {
+            expiryValue.classList.add("expired");
+        }
+        expirySection.appendChild(expiryLabel);
+        expirySection.appendChild(expiryValue);
+        body.appendChild(qrSection);
+        body.appendChild(codeSection);
+        body.appendChild(expirySection);
+        // Actions
+        const actions = document.createElement("div");
+        actions.className = "offline-redemption-actions";
+        const downloadBtn = document.createElement("button");
+        downloadBtn.className = "offline-redemption-action-btn download-btn";
+        downloadBtn.textContent = "Download QR";
+        downloadBtn.addEventListener("click", () => this.handleDownloadQR(downloadBtn));
+        const copyBtn = document.createElement("button");
+        copyBtn.className = "offline-redemption-action-btn copy-btn";
+        copyBtn.textContent = "Copy Code";
+        copyBtn.addEventListener("click", () => this.handleCopyCode(copyBtn));
+        actions.appendChild(downloadBtn);
+        actions.appendChild(copyBtn);
+        // Assemble modal
+        modal.appendChild(header);
+        modal.appendChild(body);
+        modal.appendChild(actions);
+        container.appendChild(backdrop);
+        container.appendChild(modal);
+        // Inject styles
+        this.injectStyles();
+        return container;
+    }
+    /**
+     * Handle download QR button click
+     */
+    async handleDownloadQR(button) {
+        const originalText = button.textContent;
+        button.disabled = true;
+        button.textContent = "Downloading...";
+        const success = await downloadQRCode(buildQRUrl(this.offlineRedemption.qr_code_data), "redemption-qr.png");
+        button.textContent = success ? "Downloaded!" : "Download Failed";
+        setTimeout(() => {
+            button.textContent = originalText;
+            button.disabled = false;
+        }, 2000);
+    }
+    /**
+     * Handle copy code button click
+     */
+    async handleCopyCode(button) {
+        const originalText = button.textContent;
+        button.disabled = true;
+        const success = await copyRedemptionCode(this.offlineRedemption.redemption_code);
+        button.textContent = success ? "Copied!" : "Copy Failed";
+        setTimeout(() => {
+            button.textContent = originalText;
+            button.disabled = false;
+        }, 2000);
+    }
+    /**
+     * Inject modal styles
+     */
+    injectStyles() {
+        // Check if styles already injected
+        if (document.getElementById("offline-redemption-modal-styles")) {
+            return;
+        }
+        const style = document.createElement("style");
+        style.id = "offline-redemption-modal-styles";
+        style.textContent = `
+      .offline-redemption-modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+        opacity: 0;
+        transition: opacity 0.3s ease-out;
+      }
+
+      .offline-redemption-modal-overlay.offline-redemption-modal-open {
+        opacity: 1;
+      }
+
+      .offline-redemption-backdrop {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        cursor: pointer;
+      }
+
+      .offline-redemption-modal {
+        position: relative;
+        z-index: 10001;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+        max-width: 400px;
+        width: 90%;
+        max-height: 90vh;
+        overflow-y: auto;
+        animation: slideUp 0.3s ease-out;
+      }
+
+      @keyframes slideUp {
+        from {
+          opacity: 0;
+          transform: translateY(40px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .offline-redemption-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+        border-bottom: 1px solid #f0f0f0;
+      }
+
+      .offline-redemption-title {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 600;
+        color: #111827;
+      }
+
+      .offline-redemption-close-btn {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #6b7280;
+        transition: color 0.2s;
+      }
+
+      .offline-redemption-close-btn:hover {
+        color: #111827;
+      }
+
+      .offline-redemption-close-btn svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      .offline-redemption-body {
+        padding: 24px 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+
+      .offline-redemption-qr-section {
+        display: flex;
+        justify-content: center;
+        background: #f9fafb;
+        padding: 16px;
+        border-radius: 8px;
+        min-height: 200px;
+        align-items: center;
+      }
+
+      .offline-redemption-qr-image {
+        max-width: 100%;
+        max-height: 200px;
+        width: auto;
+        height: auto;
+      }
+
+      .offline-redemption-qr-error {
+        text-align: center;
+        color: #6b7280;
+        font-size: 14px;
+      }
+
+      .offline-redemption-code-section,
+      .offline-redemption-expiry-section {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .offline-redemption-code-label,
+      .offline-redemption-expiry-label {
+        margin: 0;
+        font-size: 12px;
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .offline-redemption-code-value {
+        font-family: monospace;
+        font-size: 16px;
+        font-weight: 600;
+        color: #111827;
+        padding: 12px;
+        background: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-radius: 6px;
+        text-align: center;
+        letter-spacing: 2px;
+      }
+
+      .offline-redemption-expiry-value {
+        margin: 0;
+        font-size: 14px;
+        color: #374151;
+      }
+
+      .offline-redemption-expiry-value.expired {
+        color: #dc2626;
+        font-weight: 600;
+      }
+
+      .offline-redemption-actions {
+        display: flex;
+        gap: 12px;
+        padding: 20px;
+        border-top: 1px solid #f0f0f0;
+      }
+
+      .offline-redemption-action-btn {
+        flex: 1;
+        padding: 12px 16px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .download-btn {
+        background: #3b82f6;
+        color: white;
+      }
+
+      .download-btn:hover:not(:disabled) {
+        background: #2563eb;
+      }
+
+      .copy-btn {
+        background: #f3f4f6;
+        color: #111827;
+        border: 1px solid #e5e7eb;
+      }
+
+      .copy-btn:hover:not(:disabled) {
+        background: #e5e7eb;
+      }
+
+      .offline-redemption-action-btn:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+      }
+
+      /* Mobile responsiveness */
+      @media (max-width: 480px) {
+        .offline-redemption-modal {
+          width: 95%;
+          max-height: 95vh;
+        }
+
+        .offline-redemption-body {
+          padding: 16px;
+        }
+
+        .offline-redemption-actions {
+          padding: 16px;
+        }
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+
 /// <reference lib="dom" />
 /**
  * Widget state enumeration for tracking render lifecycle
@@ -2586,6 +3685,8 @@ class WidgetRoot {
         this.lastGroupDataRefreshTime = 0;
         this.GROUP_REFRESH_DEBOUNCE = 1000; // 1 second min between refreshes
         this.groupExpiryRefreshTriggered = false; // Track if expiry refresh already triggered for current group
+        this.offlineRedemption = null;
+        this.offlineRedemptionModal = null;
         /** Handle backend fulfillment notifications */
         this.handleGroupFulfilledEvent = (event) => {
             const detail = event.detail;
@@ -2742,11 +3843,22 @@ class WidgetRoot {
     }
     /** Persist fulfilled state, emit callback, and refresh UI */
     processGroupFulfilled(eventData) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         this.groupFulfilled = true;
-        this.frozenReward = eventData.reward || null;
-        this.currentGroupId = eventData.groupId;
-        (_b = (_a = this.events) === null || _a === void 0 ? void 0 : _a.onGroupFulfilled) === null || _b === void 0 ? void 0 : _b.call(_a, eventData);
+        // Extract reward from new event structure or fallback to legacy
+        const reward = ((_a = eventData.frozen_reward) === null || _a === void 0 ? void 0 : _a.reward) || eventData.reward || null;
+        this.frozenReward = reward;
+        // Extract group ID from new event structure or fallback to legacy
+        this.currentGroupId = ((_b = eventData.group) === null || _b === void 0 ? void 0 : _b.id) || eventData.groupId || null;
+        // Store offline redemption data if available
+        if (eventData.offline_redemption && isValidOfflineRedemption(eventData.offline_redemption)) {
+            this.offlineRedemption = eventData.offline_redemption;
+            this.logger.info("Offline redemption data stored", {
+                member_id: this.offlineRedemption.member_id,
+                code: this.offlineRedemption.redemption_code,
+            });
+        }
+        (_d = (_c = this.events) === null || _c === void 0 ? void 0 : _c.onGroupFulfilled) === null || _d === void 0 ? void 0 : _d.call(_c, eventData);
         this.renderFulfilledState();
     }
     /** Re-render widget and external containers to reflect fulfillment */
@@ -2861,16 +3973,42 @@ class WidgetRoot {
         rewardCheck.textContent = "✔";
         rewardCheck.style.color = "var(--cobuy-success-color, #10b981)";
         const rewardLabel = document.createElement("span");
-        rewardLabel.textContent = rewardText ? `Reward available: ${rewardText}` : "Reward available";
+        rewardLabel.textContent = rewardText
+            ? `Discount available: ${rewardText}`
+            : "Discount available";
         rewardLine.appendChild(rewardCheck);
         rewardLine.appendChild(rewardLabel);
         root.appendChild(title);
         root.appendChild(rewardLine);
-        // Create footer with View all Groups link at bottom right
+        // Create footer with action CTAs
         const footer = document.createElement("div");
         footer.style.display = "flex";
         footer.style.justifyContent = "flex-end";
         footer.style.alignItems = "center";
+        footer.style.gap = "12px";
+        // Add "Redeem In-store" CTA if offline redemption is available
+        if (this.offlineRedemption && isValidOfflineRedemption(this.offlineRedemption)) {
+            const redeemLink = document.createElement("button");
+            redeemLink.className = "cobuy-redeem-instore-link";
+            redeemLink.style.background = "none";
+            redeemLink.style.border = "none";
+            redeemLink.style.color = "var(--cobuy-primary-color, #3b82f6)";
+            redeemLink.style.cursor = "pointer";
+            redeemLink.style.fontSize = "12px";
+            redeemLink.style.fontWeight = "600";
+            redeemLink.style.textDecoration = "underline";
+            redeemLink.style.padding = "0";
+            redeemLink.style.transition = "opacity 0.2s";
+            redeemLink.textContent = "Redeem In-store";
+            redeemLink.addEventListener("click", () => this.openOfflineRedemptionModal());
+            redeemLink.addEventListener("mouseover", () => {
+                redeemLink.style.opacity = "0.7";
+            });
+            redeemLink.addEventListener("mouseout", () => {
+                redeemLink.style.opacity = "1";
+            });
+            footer.appendChild(redeemLink);
+        }
         root.appendChild(footer);
         return root;
     }
@@ -3054,6 +4192,12 @@ class WidgetRoot {
                 this.currentGroupData = groupData;
                 this.currentGroupId = (groupData === null || groupData === void 0 ? void 0 : groupData.id) || null;
                 this.currentRewardData = rewardData;
+                console.log("group data for product ", options.productId, groupData === null || groupData === void 0 ? void 0 : groupData.offline_redemption, isValidOfflineRedemption(groupData === null || groupData === void 0 ? void 0 : groupData.offline_redemption));
+                // Extract offline_redemption from API response if available
+                if ((groupData === null || groupData === void 0 ? void 0 : groupData.offline_redemption) &&
+                    isValidOfflineRedemption(groupData.offline_redemption)) {
+                    this.offlineRedemption = groupData.offline_redemption;
+                }
                 // Check if group is already fulfilled (full) on initial load
                 if (groupData) {
                     const participants = Number(groupData.participants_count || 0);
@@ -3422,6 +4566,7 @@ class WidgetRoot {
     createWidget(rewardData, container, options) {
         const isFulfilled = this.groupFulfilled;
         const activeReward = this.frozenReward || (rewardData === null || rewardData === void 0 ? void 0 : rewardData.reward) || null;
+        this.logger.info(`activeReward: ${JSON.stringify(activeReward)}`);
         const wrapper = document.createElement("div");
         wrapper.className = "cobuy-widget";
         wrapper.style.display = "grid";
@@ -3461,28 +4606,29 @@ 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";
-        }
+        // 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");
@@ -3713,6 +4859,12 @@ class WidgetRoot {
                 }
                 groupJoinData = joinResponse.data;
                 this.logger.info("Successfully joined group", groupJoinData);
+                this.offlineRedemption =
+                    groupJoinData &&
+                        groupJoinData.offline_redemption &&
+                        isValidOfflineRedemption(groupJoinData.offline_redemption)
+                        ? groupJoinData.offline_redemption
+                        : null;
                 // Trigger invite tracking before opening lobby (global for product)
                 try {
                     const inviteResponse = await this.apiClient.inviteToGroup(this.currentGroupId, "copy_link");
@@ -3758,6 +4910,13 @@ class WidgetRoot {
                     const isGroupFulfilled = groupJoinData.group.participants_count >= groupJoinData.group.max_participants;
                     const groupLinkFromInvite = inviteData === null || inviteData === void 0 ? void 0 : inviteData.invite_url;
                     const shareMessageFromInvite = inviteData === null || inviteData === void 0 ? void 0 : inviteData.share_message;
+                    console.log("offlien dataaa", groupJoinData.offline_redemption, isValidOfflineRedemption(groupJoinData.offline_redemption));
+                    // Extract offline_redemption from join response if available
+                    const offlineRedemptionFromJoin = groupJoinData.offline_redemption &&
+                        isValidOfflineRedemption(groupJoinData.offline_redemption)
+                        ? groupJoinData.offline_redemption
+                        : undefined;
+                    this.offlineRedemption = offlineRedemptionFromJoin || null;
                     // Prepare modal data with real values from join response
                     cobuySDK.openModal({
                         productId,
@@ -3776,6 +4935,7 @@ class WidgetRoot {
                         groupLink: groupLinkFromInvite || `https://cobuy.group/lobby/${groupJoinData.group.id}`,
                         shareMessage: shareMessageFromInvite,
                         isLocked: !isGroupFulfilled,
+                        offlineRedemption: offlineRedemptionFromJoin,
                         activities: [
                             {
                                 emoji: "👤",
@@ -3825,6 +4985,20 @@ class WidgetRoot {
             }
         }
     }
+    /**
+     * Open offline redemption modal when user clicks "Redeem In-store"
+     */
+    openOfflineRedemptionModal() {
+        if (!this.offlineRedemption || !isValidOfflineRedemption(this.offlineRedemption)) {
+            this.logger.warn("Offline redemption data not available");
+            return;
+        }
+        this.logger.info("Opening offline redemption modal");
+        this.offlineRedemptionModal = new OfflineRedemptionModal(this.offlineRedemption, () => {
+            this.offlineRedemptionModal = null;
+        });
+        this.offlineRedemptionModal.open();
+    }
     /**
      * Emit checkout intent without performing navigation
      */
@@ -3883,13 +5057,13 @@ class WidgetRoot {
         const reward = this.frozenReward || (rewardData === null || rewardData === void 0 ? void 0 : rewardData.reward);
         if (this.groupFulfilled) {
             const rewardText = this.formatRewardText(reward);
-            return rewardText ? `Reward available: ${rewardText}` : "Reward available for this group";
+            return rewardText ? `Discount available: ${rewardText}` : "Discount available for this group";
         }
         if (!reward) {
-            return "Join with CoBuy to unlock rewards";
+            return "Join with CoBuy to unlock discount";
         }
         const rewardText = this.formatRewardText(reward);
-        return rewardText ? `Save up to ${rewardText} with CoBuy` : "CoBuy reward available";
+        return rewardText ? `Save up to ${rewardText} with CoBuy` : "CoBuy discount available";
     }
     /**
      * Public hook to request a realtime refresh from external callers
@@ -4487,7 +5661,7 @@ class AnalyticsClient {
      */
     async trackCtaClick(productId) {
         const event = {
-            event: "cta_clicked",
+            event: "CTA_CLICKED",
             productId,
             timestamp: new Date().toISOString(),
             sessionId: this.sessionId,
@@ -4531,6 +5705,28 @@ class AnalyticsClient {
             throw error;
         }
     }
+    /**
+     * Track page view event
+     */
+    async trackPageView() {
+        const event = {
+            event: "PAGE_VIEW",
+            timestamp: new Date().toISOString(),
+            context: {
+                pageUrl: typeof window !== "undefined" ? window.location.href : undefined,
+                userAgent: typeof navigator !== "undefined" ? navigator.userAgent : undefined,
+                sdkVersion: this.sdkVersion,
+            },
+        };
+        try {
+            await this.sendEvent(event);
+            this.logger.info("[Analytics] Page view tracked");
+        }
+        catch (error) {
+            // Log but don't throw - analytics failure should not break UX
+            this.logger.error("[Analytics] Failed to track page view", error);
+        }
+    }
     /**
      * Track custom event (extensible for future use)
      */
@@ -8718,9 +9914,10 @@ Object.assign(lookup, {
  * Manages a single socket.io connection for the SDK
  */
 class SocketManager {
-    constructor(config, sdkVersion) {
+    constructor(config, sdkVersion, sessionId) {
         this.config = config;
         this.sdkVersion = sdkVersion;
+        this.sessionId = sessionId;
         this.socket = null;
         this.logger = new Logger(config.debug);
     }
@@ -8765,6 +9962,7 @@ class SocketManager {
             auth: {
                 merchantKey: this.config.merchantKey,
                 sdkVersion: this.sdkVersion,
+                sessionId: this.sessionId,
             },
             autoConnect: true,
         });
@@ -8951,7 +10149,9 @@ class CoBuy {
                 const ref = window.localStorage.getItem(key);
                 if (ref) {
                     this.logger.debug(`[SDK] Retrieved checkout reference via prefix: ${key}`);
-                    const parsedGroupId = key.startsWith(`${basePrefix}_`) ? key.substring(basePrefix.length + 1) : null;
+                    const parsedGroupId = key.startsWith(`${basePrefix}_`)
+                        ? key.substring(basePrefix.length + 1)
+                        : null;
                     return { key, checkoutRef: ref, groupId: parsedGroupId };
                 }
             }
@@ -9041,7 +10241,7 @@ class CoBuy {
             // Initialize real-time socket connection for public mode
             if (config.authMode === "public" && config.merchantKey) {
                 try {
-                    this.socketManager = new SocketManager(config, SDK_VERSION);
+                    this.socketManager = new SocketManager(config, SDK_VERSION, this.sessionId);
                     this.socketManager.connect();
                     this.socketManager.bindHandlers({
                         onGroupFulfilled: (payload) => {
@@ -9083,6 +10283,13 @@ class CoBuy {
                     this.logger.warn("[SDK] Failed to initialize sockets", e);
                 }
             }
+            // Track page view event after successful initialization
+            if (this.analyticsClient) {
+                this.analyticsClient.trackPageView().catch((error) => {
+                    // Non-blocking: Analytics failure should not affect SDK initialization
+                    this.logger.warn("[SDK] Failed to track page view", error);
+                });
+            }
             this.logger.info("SDK initialization complete");
         }
         catch (error) {
@@ -9162,6 +10369,7 @@ class CoBuy {
                 groupLink: options.groupLink,
                 activities: options.activities,
                 isLocked: options.isLocked,
+                offlineRedemption: options.offlineRedemption,
             };
             // Create modal instance
             const modal = new LobbyModal(modalData, {