/* Popup "Transaksi Sukses" (etalase). Data asli dari /transaksi-terbaru; dimuat hanya di Beranda, Semua Produk, Daftar Harga, halaman brand. */
.rsale {
  --rs-ok: var(--success, #22c55e);
  --rs-ok-rgb: 34, 197, 94;
  --rs-pri-rgb: var(--primary-rgb, 30, 134, 194);
  position: fixed; left: 24px; bottom: 24px; z-index: 55;
  width: min(320px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px 9px 9px;
  border-radius: 12px; overflow: hidden; isolation: isolate;
  color: var(--text, #eaf2fb); text-decoration: none;
  /* Warna solid (tanpa gradasi) */
  background: var(--surface, #15202e);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: none; /* datar: tanpa bayangan/efek neon */
  opacity: 0; transform: translateY(18px) scale(.96); pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1), border-color .2s ease;
}
.rsale.is-show { opacity: 1; transform: none; pointer-events: auto; }
.rsale:hover { border-color: rgba(255, 255, 255, .22); }

/* Ikon brand + lencana centang */
.rsale__media { position: relative; flex: 0 0 40px; width: 40px; height: 40px; }
.rsale__icon {
  width: 100%; height: 100%; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: var(--rsale-tile, var(--primary));
  font: 800 1rem/1 var(--display, sans-serif); color: #fff; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.rsale__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rsale__badge {
  position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: var(--rs-ok);
  box-shadow: 0 0 0 2px var(--surface, #15202e);
}
.rsale__badge svg { width: 11px; height: 11px; }
.rsale.is-show .rsale__badge { animation: rsale-pop .5s .35s cubic-bezier(.34, 1.56, .64, 1) both; }

/* Teks */
.rsale__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.rsale__head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rsale__ok {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--rs-ok);
}
.rsale__ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rsale__inv {
  padding: 0 6px; border-radius: 5px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .07);
  font: 700 .62rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em;
  color: var(--muted, #9fb0c9); white-space: nowrap;
}
/* Brand + item satu baris */
.rsale__line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rsale__brand {
  flex: 0 4 auto; min-width: 0; font-size: .72rem; font-weight: 600; color: var(--muted, #9fb0c9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rsale__product {
  flex: 0 1 auto; min-width: 0;
  font: 800 .86rem/1.2 var(--display, sans-serif); letter-spacing: -.01em; color: var(--volt, #f59e2d);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rsale__meta { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.rsale__label { font-size: .62rem; font-weight: 600; color: var(--dim, #6b7a94); white-space: nowrap; }
.rsale__chip {
  display: inline-block; min-width: 0; max-width: 100%;
  color: var(--primary-hi, #56a4d1); font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tombol tutup */
.rsale__close {
  align-self: flex-start; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05);
  color: var(--muted, #9fb0c9); cursor: pointer; display: grid; place-items: center;
  font-size: .85rem; line-height: 1; transition: background .2s, color .2s, transform .2s;
}
.rsale__close:hover, .rsale__close:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; transform: rotate(90deg); outline: none; }

/* Garis waktu tampil */
.rsale__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .05); }
.rsale__bar i {
  display: block; height: 100%; width: 100%; transform-origin: left;
  background: var(--rs-ok);
}
.rsale.is-show .rsale__bar i { animation: rsale-timer var(--rsale-dur, 6000ms) linear both; }

@keyframes rsale-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes rsale-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Tablet: di atas bottom-nav */
@media (max-width: 980px) { .rsale { left: 16px; width: min(300px, calc(100vw - 32px)); bottom: calc(78px + env(safe-area-inset-bottom)); } }
/* HP: kartu ringkas & tipis, tepat di atas bottom-nav (sejajar tombol live chat; JS menyesuaikan lebar/posisi) */
@media (max-width: 640px) {
  .rsale {
    left: 10px; width: min(264px, calc(100vw - 20px)); bottom: calc(76px + env(safe-area-inset-bottom));
    padding: 6px 7px 7px 7px; gap: 8px; border-radius: 10px;
  }
  .rsale__media { flex-basis: 32px; width: 32px; height: 32px; }
  .rsale__icon { border-radius: 8px; font-size: .72rem; }
  .rsale__badge { width: 14px; height: 14px; right: -3px; bottom: -3px; }
  .rsale__badge svg { width: 8px; height: 8px; }
  .rsale__body { gap: 0; }
  .rsale__head { gap: 5px; }
  .rsale__ok { font-size: .56rem; gap: 4px; letter-spacing: .06em; }
  .rsale__ok::before { width: 5px; height: 5px; }
  .rsale__inv { font-size: .56rem; padding: 0 4px; line-height: 1.4; }
  .rsale__line { gap: 5px; }
  .rsale__brand { font-size: .64rem; }
  .rsale__product { font-size: .76rem; }
  .rsale__meta { gap: 3px; }
  .rsale__label { font-size: .54rem; }
  .rsale__chip { font-size: .56rem; }
  .rsale__close { flex-basis: 18px; width: 18px; height: 18px; font-size: .74rem; }
}
@media (max-width: 340px) {
  .rsale__inv { display: none; } /* layar sangat sempit: utamakan nama item */
}
@media (prefers-reduced-motion: reduce) {
  .rsale { transition: opacity .2s linear; transform: none; }
  .rsale:hover { transform: none; }
  .rsale.is-show .rsale__badge { animation: none; }
}