/* ============================================================
   RFONLINE.DEV — Animated dual-accent rotating border
   Dipakai otomatis di semua .glass-card (panel ber-border).
   2 warna aksen (var --color-accent & --color-accent-alt) yang
   memutari panel.
   ============================================================ */

@property --rf-bd-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Panel dasar: pastikan punya stacking context utk pseudo border */
.glass-card,
.order-summary-inner,
.rf-anim-border {
  position: relative;
}

/* Ring gradient yang muter di tepi panel.
   Pakai mask supaya cuma area 'border' (padding ring) yang keliatan,
   bagian tengah panel transparan. */
.glass-card::before,
.order-summary-inner::before,
.rf-anim-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;                 /* tebal border */
  /* --rf-bd-stops di-inject dari pengaturan (1-4 warna aksen border).
     Fallback ke 2 warna aksen tema jika var belum ada. */
  background: conic-gradient(
    from var(--rf-bd-angle),
    var(--rf-bd-stops,
      transparent 0deg,
      var(--color-accent) 55deg,
      transparent 130deg,
      transparent 230deg,
      var(--color-accent-alt, var(--color-accent)) 305deg,
      transparent 360deg
    )
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: rf-bd-spin 6s linear infinite;
  pointer-events: none;
  opacity: .9;
  /* sengaja TANPA z-index: pseudo dirender sebelum child positioned,
     jadi badge/konten tetap di atas ring */
}

/* Glow halus saat hover biar makin idup */
.glass-card:hover::before,
.rf-anim-border:hover::before {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--color-accent-glow, rgba(91,115,255,.35)));
}

@keyframes rf-bd-spin {
  to { --rf-bd-angle: 360deg; }
}

/* Hormati preferensi reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .glass-card::before,
  .order-summary-inner::before,
  .rf-anim-border::before {
    animation: none;
  }
}

/* Fallback browser lama yang ga dukung @property:
   conic-gradient tetap tampil sbg border statik 2 warna (ga muter), tetap rapi. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .glass-card::before,
  .order-summary-inner::before,
  .rf-anim-border::before {
    background: var(--rf-bd-linear, linear-gradient(135deg, var(--color-accent), var(--color-accent-alt, var(--color-accent))));
  }
}