/* ==========================================================================
   Urgency Badges + Social Proof — WayAcross
   Paleta: #87B13B (primary), #295441 (dark green), #FFA41C (accent/stock)
   Icons: inline SVG stroke, inheriting currentColor
   Primary/dark-green route through --color-primary / --color-secondary
   (defined by the Akira theme's :root, driven by its color customizer);
   the var() fallback keeps every other theme on the literal hex values.
   ========================================================================== */

.pv-ub-badges {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0 14px;
}

/* ── Badge base ─────────────────────────────────────────────────────────── */
.pv-ub__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  width: fit-content;
  max-width: 100%;
}

/* SVG icon herda currentColor do badge pai */
.pv-ub__badge .pv-icon {
  flex-shrink: 0;
  display: inline-block;
}

.pv-ub__text strong {
  font-weight: 700;
}

/* -- Stock badge - amber/orange (#FFA41C) -------------------------------- */
.pv-ub__badge--stock {
  background-color: #fff8ec;
  border: 1px solid #FFA41C;
  color: #7a4a00;
}

.pv-ub__badge--stock strong {
  color: #c57200;
}

/* ── Delivery badge — verde ────────────────────────────────────────────── */
.pv-ub__badge--delivery {
  background-color: color-mix(in srgb, var(--color-secondary, #295441) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-secondary, #295441) 28%, transparent);
  color: color-mix(in srgb, var(--color-secondary, #295441) 70%, black);
}

.pv-ub__badge--delivery strong {
  color: var(--color-secondary, #295441);
}

/* -- Views badge - blue/purple (social proof) ---------------------------- */
.pv-ub__badge--views {
  background-color: #f0f4ff;
  border: 1px solid rgba(59, 91, 219, 0.3);
  color: #2a3a6b;
}

.pv-ub__badge--views strong {
  color: #3b5bdb;
}

/* ── Aggregate purchases badge — verde claro (social proof) ────────────── */
.pv-ub__badge--aggregate {
  background-color: color-mix(in srgb, var(--color-primary, #87B13B) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary, #87B13B) 35%, transparent);
  color: color-mix(in srgb, var(--color-primary, #87B13B) 65%, black);
}

.pv-ub__badge--aggregate strong {
  color: color-mix(in srgb, var(--color-primary, #87B13B) 80%, black);
}

/* ── Countdown ──────────────────────────────────────────────────────────── */
.pv-ub__countdown {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary, #87B13B);
  white-space: nowrap;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .pv-ub__badge {
    width: 100%;
    font-size: 12px;
  }
}