.home-box-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
}

.live-transaction-wrapper {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.home-sharing-banner{
 box-shadow:
  0 0 4px rgba(0, 0, 0, 0.1),
  0 0 16px rgba(0, 0, 0, 0.14);
}

.home-sharing-btn {
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}

//progressive count css
@keyframes jk-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 8px 2px
      color-mix(
        in srgb,
        var(--jk-theme-glow, var(--hline-color, #19c7c7)) 30%,
        transparent
      );
  }
  50% {
    box-shadow: 0 0 16px 4px
      color-mix(
        in srgb,
        var(--jk-theme-glow, var(--hline-color, #19c7c7)) 50%,
        transparent
      );
  }
}

@keyframes jk-ticker-up {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-110%);
  }
  41% {
    transform: translateY(110%);
  }
  100% {
    transform: translateY(0);
  }
}

.jk-root {
  width: 100%;
}

.jk-wrap {
  --jk-cell-w: 36px;
  --jk-cell-h: 48px;
  --jk-font: 26px;
  --jk-sep: 22px;
  --jk-gap: 5px;
  --jk-radius: 7px;
  --jk-bg: #0078D7;
  --jk-label: var(--jk-theme-label, #fff);
  --jk-label-accent: var(--jk-theme-accent, var(--product-active-color, #5ee0f1));
  --jk-digit-text: var(--jk-theme-digit-text, #1a1a2e);
  --jk-digit-border: var(--jk-theme-digit-border, rgba(255, 255, 255, 0.45));

  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 12px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--jk-bg);
  animation: jk-glow-pulse 3s ease-in-out infinite;
}

.jk-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  text-transform: uppercase;
}

.jk-label span:first-child {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--jk-label);
}

.jk-label span:last-child {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--jk-label-accent);
}

.jk-digits {
  display: flex;
  gap: var(--jk-gap);
  align-items: center;
  justify-content: center;
  width: 100%;
}

.jk-sep {
  font-size: var(--jk-sep);
  font-weight: 700;
  line-height: 1;
  color: var(--jk-label);
  opacity: 0.45;
}

.digit-cell {
  width: var(--jk-cell-w);
  height: var(--jk-cell-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid var(--jk-digit-border);
  border-radius: var(--jk-radius);
}

.digit-cell::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.digit-inner {
  display: block;
  font: 700 var(--jk-font) / 1 "Courier New", monospace;
  color: var(--jk-digit-text);
}

.digit-inner.animating {
  animation: jk-ticker-up 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.jk-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

@media (max-width: 480px) {
  .jk-wrap {
    --jk-cell-w: 28px;
    --jk-cell-h: 38px;
    --jk-font: 20px;
    --jk-sep: 16px;
    --jk-gap: 3px;
    --jk-radius: 5px;
    padding: 12px 8px;
    gap: 8px;
  }
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .jk-wrap {
    box-shadow: 0 0 12px 2px var(--jk-theme-glow, var(--hline-color, #19c7c7));
    animation: none;
  }
}