/**
 * SENGAJA SEDIKIT.
 *
 * Badge yang tampil di kartu produk digambar widget ARC Product Card, dan
 * seluruh warna, ukuran, radius, serta jaraknya sudah diatur dari panel Style
 * Elementor. Menulis ulang di sini cuma bikin perang specificity dengan CSS
 * per-elemen Elementor - dan Elementor menang, jadi hasilnya cuma aturan
 * mati yang membingungkan orang berikutnya.
 *
 * Yang ada di file ini hanya dua hal:
 *   1. Perilaku hitung mundur yang tidak bisa diatur dari Elementor.
 *   2. Tampilan dasar untuk shortcode [arc_badge], yang dipakai di luar
 *      widget dan karena itu tidak punya style dari mana pun.
 */

/* -------- Hitung mundur -------- */

.arc-badge__cd {
  /* Angka proporsional bikin badge melar-mengkerut tiap detik karena "1"
     lebih sempit dari "8". tabular-nums menyamakan lebar tiap digit, jadi
     badge-nya diam. */
  font-variant-numeric: tabular-nums;

  /* Jam tidak boleh patah jadi dua baris di tengah kartu yang sempit. */
  white-space: nowrap;
}

/* -------- Shortcode -------- */

.arc-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  vertical-align: middle;
}

.arc-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #000;
  color: #fff;
}

.arc-badge--flashsale {
  background: #e02b20;
}

.arc-badge--stock {
  background: #6b6b6b;
}