/* public/styles/sales-notif.css
 * Notifikasi "pembelian" palsu ala Eneba ("Seseorang baru saja membeli ...").
 * Front-end murni, TIDAK terhubung ke order/database.
 * Hanya untuk /index.html dan /pages/id.html (dicek di JS).
 *
 * Aturan:
 *  - Semua selector berawalan #gz-sn / .gz-sn (tidak menyentuh elemen lain).
 *  - Warna memakai variabel tema dari <html style="..."> dengan fallback,
 *    ikut gelap/terang tanpa warna hard-coded.
 *  - Animasi hanya opacity/transform, tanpa layout shift / scrollbar horizontal.
 *  - Container fixed z-index 1040 (di bawah bubble CS 1050, maskot 1100,
 *    overlay 1200, popup 1300). pointer-events:none di container, auto di kartu.
 */
#gz-sn {
  position: fixed;
  z-index: 1040;
  pointer-events: none;
  /* Penempatan default (mobile): kiri atas, di bawah header sticky.
     Safe-area di-handle lewat env() di sini; JS hanya menimpa --gz-top
     dengan tinggi header + 8px pada tampilan mobile. */
  left: calc(10px + env(safe-area-inset-left, 0px));
  top: var(--gz-top, calc(8px + env(safe-area-inset-top, 0px)));
  right: auto;
  bottom: auto;
}

/* Tablet & desktop (>= 768px): kiri bawah. */
@media (min-width: 768px) {
  #gz-sn {
    left: calc(20px + env(safe-area-inset-left, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    top: auto;
  }
}

#gz-sn-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  max-width: 300px;
  padding: 10px 30px 10px 12px;
  pointer-events: auto;
  cursor: default;
  background: var(--bg-secondary, #1A222C);
  color: var(--text-primary, #f3f0f0);
  border: 1px solid var(--primary, #ff0000);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  font-family: inherit;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

#gz-sn-card.gz-sn--show {
  opacity: 1;
  transform: none;
}

#gz-sn-img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--card-primary, #313C4C);
}

#gz-sn-text {
  flex: 1 1 auto;
  min-width: 0;
}

#gz-sn-kicker {
  font-size: 11px;
  line-height: 1.2;
  opacity: .85;
}

#gz-sn-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gz-sn-price {
  font-size: 11px;
  line-height: 1.25;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#gz-sn-time {
  font-size: 11px;
  line-height: 1.2;
  opacity: .6;
}

#gz-sn-close {
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  pointer-events: auto;
  background: transparent;
  color: var(--text-primary, #f3f0f0);
  opacity: .7;
  transition: opacity .15s ease, background-color .15s ease;
}

#gz-sn-close:hover,
#gz-sn-close:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, .14);
  outline: none;
}

#gz-sn-close svg {
  display: block;
}

/* Mobile: batasi lebar agar tidak menimpa area lain. */
@media (max-width: 767px) {
  #gz-sn-card {
    max-width: min(280px, 78vw);
  }
}

/* Hormati prefers-reduced-motion: tanpa slide, cukup fade singkat. */
@media (prefers-reduced-motion: reduce) {
  #gz-sn-card {
    transform: none !important;
    transition: opacity .2s ease;
  }
}

@media print {
  #gz-sn {
    display: none;
  }
}