/* =========================================================
   BOTVIET SHOPEE STATUS MOTION R8
   Strong premium animation + sharper high-resolution transparent icons.
   Requires the R5 Shopee dashboard structure. Loads AFTER R6/R7.
   ========================================================= */

body[data-route="shopee"] .r5-order-status{
  perspective:900px!important;
}
body[data-route="shopee"] .r5-order-status button{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  min-height:142px!important;
  padding:9px 6px 8px!important;
  transform-style:preserve-3d!important;
  transition:transform .24s ease, box-shadow .24s ease, filter .24s ease!important;
}
body[data-route="shopee"] .r5-order-status button:hover{
  transform:translateY(-4px) scale(1.018)!important;
  filter:brightness(1.10) saturate(1.12)!important;
}

/* --- large, crisp status icons --- */
body[data-route="shopee"] .r5-order-status button > span{
  position:relative!important;
  z-index:4!important;
  display:block!important;
  width:116px!important;
  height:78px!important;
  min-width:116px!important;
  margin:-2px auto 0!important;
  font-size:0!important;
  line-height:0!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
  animation-play-state:running!important;
  will-change:transform,filter!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(1)>span{
  background-image:url("/assets/shopee-r8-clock.png?v=8")!important;
  filter:drop-shadow(0 0 10px #ff397f) drop-shadow(0 7px 12px rgba(0,0,0,.18))!important;
  animation:r8Clock3D 2.8s cubic-bezier(.45,.05,.22,1) infinite!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(2)>span{
  background-image:url("/assets/shopee-r8-box.png?v=8")!important;
  filter:drop-shadow(0 0 10px #ffad2f) drop-shadow(0 7px 12px rgba(0,0,0,.18))!important;
  animation:r8Box3D 3.1s cubic-bezier(.45,.05,.22,1) infinite!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(3)>span{
  background-image:url("/assets/shopee-r8-truck.png?v=8")!important;
  filter:drop-shadow(0 0 11px #2aafff) drop-shadow(0 7px 12px rgba(0,0,0,.18))!important;
  animation:r8TruckDrive 2.2s ease-in-out infinite!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(4)>span{
  background-image:url("/assets/shopee-r8-check.png?v=8")!important;
  filter:drop-shadow(0 0 11px #29ef9d) drop-shadow(0 7px 12px rgba(0,0,0,.18))!important;
  animation:r8Check3D 2.45s ease-in-out infinite!important;
}

/* Keep text crisp above effects */
body[data-route="shopee"] .r5-order-status button>small,
body[data-route="shopee"] .r5-order-status button>b,
body[data-route="shopee"] .r5-order-status button>em{
  position:relative!important;
  z-index:6!important;
  text-shadow:0 1px 0 rgba(0,0,0,.28)!important;
}
body[data-route="shopee"] .r5-order-status button>small{font-size:11px!important}
body[data-route="shopee"] .r5-order-status button>b{font-size:22px!important;line-height:1!important}
body[data-route="shopee"] .r5-order-status button>em{font-size:9px!important}

/* Base ambient halos */
body[data-route="shopee"] .r5-order-status button::before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  width:112px!important;height:112px!important;
  left:50%!important;top:-13px!important;
  margin-left:-56px!important;
  border-radius:50%!important;
  filter:blur(21px)!important;
  opacity:.46!important;
  pointer-events:none!important;
  animation:r8Halo 2.45s ease-in-out infinite!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(1)::before{background:radial-gradient(circle,#ff2b76 0,rgba(255,43,118,.42) 34%,transparent 72%)!important}
body[data-route="shopee"] .r5-order-status button:nth-child(2)::before{background:radial-gradient(circle,#ffaf23 0,rgba(255,175,35,.42) 34%,transparent 72%)!important}
body[data-route="shopee"] .r5-order-status button:nth-child(3)::before{background:radial-gradient(circle,#22baff 0,rgba(34,186,255,.42) 34%,transparent 72%)!important}
body[data-route="shopee"] .r5-order-status button:nth-child(4)::before{background:radial-gradient(circle,#19eda0 0,rgba(25,237,160,.42) 34%,transparent 72%)!important}

/* ---------- CLOCK: moving hands + orbit ---------- */
body[data-route="shopee"] .r5-order-status button:nth-child(1)>span::before,
body[data-route="shopee"] .r5-order-status button:nth-child(1)>span::after{
  content:""!important;
  position:absolute!important;
  z-index:8!important;
  left:50%!important;
  top:42%!important;
  transform-origin:50% 100%!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fff,#ff286c)!important;
  box-shadow:0 0 4px #fff,0 0 8px #ff2d72!important;
  pointer-events:none!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(1)>span::before{
  width:3px!important;height:23px!important;margin-left:-1.5px!important;margin-top:-23px!important;
  animation:r8HourHand 12s linear infinite!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(1)>span::after{
  width:2px!important;height:28px!important;margin-left:-1px!important;margin-top:-28px!important;
  animation:r8MinuteHand 3.2s linear infinite!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(1)::after{
  content:""!important;
  position:absolute!important;z-index:3!important;
  width:96px!important;height:30px!important;
  left:50%!important;top:27px!important;margin-left:-48px!important;
  border:1px solid rgba(255,111,160,.7)!important;border-radius:50%!important;
  box-shadow:0 0 10px rgba(255,51,116,.6)!important;
  pointer-events:none!important;
  animation:r8OrbitClock 2.1s linear infinite!important;
}

/* ---------- BOX: 3D tilt + energetic orbit ---------- */
body[data-route="shopee"] .r5-order-status button:nth-child(2)>span::after{
  content:""!important;
  position:absolute!important;z-index:3!important;
  width:102px!important;height:34px!important;left:50%!important;top:29px!important;margin-left:-51px!important;
  border:1px solid rgba(255,199,80,.75)!important;border-radius:50%!important;
  box-shadow:0 0 11px rgba(255,166,22,.65)!important;
  pointer-events:none!important;
  animation:r8BoxOrbit 2.3s linear infinite!important;
}

/* ---------- TRUCK: stronger travel + speed streaks ---------- */
body[data-route="shopee"] .r5-order-status button:nth-child(3)>span::before{
  content:""!important;
  position:absolute!important;z-index:-1!important;
  left:-30px!important;top:25px!important;width:64px!important;height:30px!important;
  background:
    linear-gradient(90deg,transparent,rgba(67,196,255,.95),transparent) 0 2px/60px 2px no-repeat,
    linear-gradient(90deg,transparent,rgba(67,196,255,.72),transparent) 10px 13px/50px 2px no-repeat,
    linear-gradient(90deg,transparent,rgba(67,196,255,.5),transparent) 19px 24px/40px 2px no-repeat!important;
  filter:drop-shadow(0 0 5px #2eb7ff)!important;
  animation:r8TruckStreaks .9s linear infinite!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(3)::after{
  content:""!important;
  position:absolute!important;z-index:2!important;
  left:19%!important;right:19%!important;bottom:49px!important;height:2px!important;
  background:linear-gradient(90deg,transparent,#2ab9ff,transparent)!important;
  box-shadow:0 0 8px #2ab9ff!important;
  animation:r8RoadPulse 1.3s ease-in-out infinite!important;
}

/* ---------- CHECK: 3D pop + success ring + confetti/sparkle ---------- */
body[data-route="shopee"] .r5-order-status button:nth-child(4)>span::before{
  content:""!important;
  position:absolute!important;z-index:-1!important;
  width:78px!important;height:78px!important;left:50%!important;top:50%!important;margin:-39px 0 0 -39px!important;
  border:1px solid rgba(80,255,183,.7)!important;border-radius:50%!important;
  box-shadow:0 0 0 0 rgba(37,239,157,.45),0 0 15px rgba(37,239,157,.46)!important;
  animation:r8SuccessRing 1.9s ease-out infinite!important;
}
body[data-route="shopee"] .r5-order-status button:nth-child(4)>span::after{
  content:""!important;
  position:absolute!important;z-index:10!important;
  inset:-15px!important;
  background:
    radial-gradient(circle at 12% 24%,#5bffc2 0 2px,transparent 3px),
    radial-gradient(circle at 82% 18%,#fff36c 0 2px,transparent 3px),
    radial-gradient(circle at 18% 72%,#37dfff 0 2px,transparent 3px),
    radial-gradient(circle at 88% 70%,#ff6bc8 0 2px,transparent 3px),
    radial-gradient(circle at 31% 11%,#fff 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 68% 88%,#60ff9e 0 2px,transparent 3px)!important;
  animation:r8Confetti 2.0s ease-out infinite!important;
  pointer-events:none!important;
}

/* ---------- animations ---------- */
@keyframes r8Halo{
  0%,100%{transform:scale(.84);opacity:.30}
  50%{transform:scale(1.15);opacity:.62}
}
@keyframes r8Clock3D{
  0%,100%{transform:rotateX(3deg) rotateY(-7deg) translateY(1px) scale(.98)}
  50%{transform:rotateX(-2deg) rotateY(8deg) translateY(-7px) scale(1.06)}
}
@keyframes r8HourHand{
  from{transform:rotate(15deg)}
  to{transform:rotate(375deg)}
}
@keyframes r8MinuteHand{
  from{transform:rotate(95deg)}
  to{transform:rotate(455deg)}
}
@keyframes r8OrbitClock{
  from{transform:rotate(0deg) scaleX(1)}
  to{transform:rotate(360deg) scaleX(1)}
}
@keyframes r8Box3D{
  0%,100%{transform:rotateX(5deg) rotateY(-10deg) translateY(2px) scale(.98)}
  35%{transform:rotateX(-3deg) rotateY(8deg) translateY(-8px) scale(1.055)}
  65%{transform:rotateX(2deg) rotateY(12deg) translateY(-5px) scale(1.035)}
}
@keyframes r8BoxOrbit{
  from{transform:rotate(360deg)}
  to{transform:rotate(0deg)}
}
@keyframes r8TruckDrive{
  0%,100%{transform:translate3d(-12px,1px,0) rotateY(-4deg) scale(.98)}
  45%{transform:translate3d(11px,-5px,0) rotateY(5deg) scale(1.055)}
  58%{transform:translate3d(8px,-2px,0) rotateY(3deg) scale(1.04)}
}
@keyframes r8TruckStreaks{
  0%{transform:translateX(-18px);opacity:0}
  18%{opacity:1}
  100%{transform:translateX(32px);opacity:0}
}
@keyframes r8RoadPulse{
  0%,100%{transform:scaleX(.68);opacity:.3}
  50%{transform:scaleX(1.15);opacity:.9}
}
@keyframes r8Check3D{
  0%,100%{transform:rotateX(3deg) rotateY(-7deg) scale(.92)}
  42%{transform:rotateX(-3deg) rotateY(8deg) scale(1.10)}
  62%{transform:rotateX(1deg) rotateY(3deg) scale(1.025)}
}
@keyframes r8SuccessRing{
  0%{transform:scale(.64);opacity:.85;box-shadow:0 0 0 0 rgba(37,239,157,.45)}
  75%{opacity:.18;box-shadow:0 0 0 18px rgba(37,239,157,0)}
  100%{transform:scale(1.28);opacity:0}
}
@keyframes r8Confetti{
  0%{transform:scale(.68) rotate(-8deg);opacity:0}
  18%{opacity:1}
  70%{opacity:.85}
  100%{transform:scale(1.24) rotate(13deg);opacity:0}
}

/* Force animation even if OS/browser requests reduced motion:
   user explicitly requested animated icons. */
@media (prefers-reduced-motion:reduce){
  body[data-route="shopee"] .r5-order-status button:nth-child(1)>span{animation:r8Clock3D 3.8s ease-in-out infinite!important}
  body[data-route="shopee"] .r5-order-status button:nth-child(2)>span{animation:r8Box3D 4.1s ease-in-out infinite!important}
  body[data-route="shopee"] .r5-order-status button:nth-child(3)>span{animation:r8TruckDrive 3.2s ease-in-out infinite!important}
  body[data-route="shopee"] .r5-order-status button:nth-child(4)>span{animation:r8Check3D 3.4s ease-in-out infinite!important}
  body[data-route="shopee"] .r5-order-status button:nth-child(1)>span::before{animation:r8HourHand 16s linear infinite!important}
  body[data-route="shopee"] .r5-order-status button:nth-child(1)>span::after{animation:r8MinuteHand 5s linear infinite!important}
  body[data-route="shopee"] .r5-order-status button:nth-child(4)>span::after{animation:r8Confetti 3s ease-out infinite!important}
}

@media(max-width:768px){
  body[data-route="shopee"] .r5-order-status button{min-height:128px!important}
  body[data-route="shopee"] .r5-order-status button>span{
    width:92px!important;height:66px!important;min-width:92px!important;
  }
}