/* =========================================================
   20-livebar.css — BeautyTrouvailles Social Proof Bar
   Version: 3.0 — Premium Live Indicators
   
   Contents:
   1. Bar Container
   2. Live Indicator (Pulse)
   3. Sold Indicator
   4. Animation
   ========================================================= */

/* =========================
   1. BAR CONTAINER
   ========================= */
.bt-custom-product-page .bt-live-bar {
  background: linear-gradient(
    90deg,
    var(--bt-pink-subtle),
    rgba(255, 79, 163, 0.08)
  );
  border-bottom: 1px solid var(--bt-border);
  padding: var(--bt-space-3) 0;
}

.bt-custom-product-page .bt-live-bar .bt-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bt-space-4);
  flex-wrap: wrap;
}

/* =========================
   2. LIVE INDICATOR
   ========================= */
.bt-custom-product-page .bt-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-3);
  font-size: var(--bt-text-base);
  font-weight: 600;
  color: var(--bt-text-secondary);
}

.bt-custom-product-page .bt-live-indicator strong {
  color: var(--bt-navy);
  font-weight: 800;
}

/* Pulse dot */
.bt-custom-product-page .bt-pulse {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: var(--bt-radius-full);
  background: var(--bt-pink);
  flex-shrink: 0;
}

.bt-custom-product-page .bt-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bt-pink);
  animation: bt-pulse-ring 1.5s ease-out infinite;
}

@keyframes bt-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* =========================
   3. SOLD INDICATOR
   ========================= */
.bt-custom-product-page .bt-sold-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-2);
  font-size: var(--bt-text-base);
  font-weight: 600;
  color: var(--bt-navy);
}

.bt-custom-product-page .bt-sold-indicator i {
  color: var(--bt-pink);
  font-size: var(--bt-text-base);
}

.bt-custom-product-page .bt-sold-indicator strong {
  font-weight: 800;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 767px) {
  .bt-custom-product-page .bt-live-bar .bt-container {
    justify-content: center;
    text-align: center;
  }
  
  .bt-custom-product-page .bt-live-indicator,
  .bt-custom-product-page .bt-sold-indicator {
    font-size: var(--bt-text-sm);
  }
}

@media (max-width: 520px) {
  .bt-custom-product-page .bt-live-bar {
    padding: var(--bt-space-2) 0;
  }
  
  .bt-custom-product-page .bt-live-bar .bt-container {
    flex-direction: column;
    gap: var(--bt-space-2);
  }
}