/* ═══════════════════════════════════════════════════════════════════
   Customer Counter Badge — Frame 39940
   Pill badge: white bg, red Lotte border, gradient number
   ═══════════════════════════════════════════════════════════════════ */

.customer-counter {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 8999;
  /* Pill outline */
  background: #ffffff;
  border: 2px solid #e7252b;
  box-shadow: 0px 0.970924px 2.58913px rgba(255, 0, 4, 0.11);
  border-radius: 161.821px;
}

/* ── Inner flex row ── */
.customer-counter-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 65px 10px 16px;
  gap: 8px;
}

/* ── Circular illustration ── */
.counter-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Text group (number + label) ── */
.counter-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Number with Lotte gradient ── */
.counter-number {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 25.85px;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.01em;
  /* Lotte gradient text */
  background: linear-gradient(104.22deg, #cc002e 0%, #ec1848 53.56%, #9a268f 110.57%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Label text ── */
.counter-text {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  color: #333333;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — centered at bottom, hidden on desktop
   ═══════════════════════════════════════════════════════════════════ */
.customer-counter.mobile {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .customer-counter.mobile {
    display: none;
  }
}

@media (max-width: 767px) {
  .customer-counter.desktop {
    display: none;
  }
}