/* Fancy compact stat cards with slanted curved shape + animated border cats */
.hd-stat-fancy{
  position:relative;
  overflow:visible!important;
  border-radius:18px!important;
  min-height:78px!important;
  padding:12px 15px!important;
  isolation:isolate;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.hd-stat-crown{display:none!important}
.hd-stat-fancy::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(20,24,35,.98),rgba(12,15,24,.985));
  clip-path:polygon(16px 0, calc(100% - 26px) 0, 100% 18px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 12px 100%, 0 calc(100% - 18px), 0 14px);
  box-shadow:0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.045), inset 0 -8px 20px rgba(0,0,0,.12);
  z-index:0;
}
.hd-stat-fancy::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:17px;
  clip-path:polygon(16px 0, calc(100% - 26px) 0, 100% 18px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 12px 100%, 0 calc(100% - 18px), 0 14px);
  border:1px solid transparent;
  background:
    linear-gradient(145deg, rgba(255,255,255,.018), rgba(255,255,255,0) 44%),
    linear-gradient(135deg, rgba(97,170,255,.22), rgba(255,214,102,.15) 20%, rgba(255,255,255,.02) 38%, rgba(115,148,255,.11) 65%, rgba(255,219,130,.14));
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:0;
}
.hd-stat-fancy .hd-stat-icon,.hd-stat-fancy .hd-stat-body{position:relative;z-index:2}
.hd-stat-fancy .hd-stat-icon{border-radius:12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 16px rgba(0,0,0,.15)!important}
.hd-stat-body{padding-right:4px}
.hd-stat-cat-wrap{
  position:absolute;
  top:-16px;
  width:50px;
  height:50px;
  z-index:4;
  pointer-events:none;
  filter:drop-shadow(0 10px 16px rgba(40,120,255,.16)) drop-shadow(0 0 12px rgba(96,168,255,.14));
}
.hd-stat-cat-wrap--left{left:34px}
.hd-stat-cat-wrap--center{left:50%;transform:translateX(-50%)}
.hd-stat-cat-wrap--right{right:34px}
.hd-stat-cat{display:block;width:100%;height:100%;overflow:visible}
.hd-stat-cat-wrap--left .hd-stat-cat{transform:scaleX(1)}
.hd-stat-cat-wrap--right .hd-stat-cat{transform:scaleX(-1)}
.hd-stat-cat-wrap--center .hd-stat-cat{transform:scaleX(-1) rotate(-3deg)}
.hd-stat-balance{transform:rotate(-0.55deg)}
.hd-stat-orders{transform:rotate(0.35deg)}
.hd-stat-rank{transform:rotate(-0.4deg)}
.hd-stat-balance::before,.hd-stat-balance::after{box-shadow:0 10px 22px rgba(65,124,255,.08), inset 0 1px 0 rgba(255,255,255,.04)}
.hd-stat-orders::before,.hd-stat-orders::after{box-shadow:0 10px 22px rgba(64,200,255,.07), inset 0 1px 0 rgba(255,255,255,.04)}
.hd-stat-rank::before,.hd-stat-rank::after{box-shadow:0 10px 22px rgba(255,188,59,.08), inset 0 1px 0 rgba(255,255,255,.04)}
.hd-stat-fancy:hover{transform:translateY(-1px)!important}
.hd-stat-balance:hover{transform:translateY(-1px) rotate(-0.55deg)!important}
.hd-stat-orders:hover{transform:translateY(-1px) rotate(0.35deg)!important}
.hd-stat-rank:hover{transform:translateY(-1px) rotate(-0.4deg)!important}
@media(max-width:760px){
  .hd-stat-fancy{min-height:72px!important;padding:11px 12px 10px!important;border-radius:15px!important}
  .hd-stat-fancy::before,.hd-stat-fancy::after{border-radius:15px;clip-path:polygon(12px 0, calc(100% - 18px) 0, 100% 14px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 12px), 0 10px)}
  .hd-stat-cat-wrap{width:40px;height:40px;top:-11px}
  .hd-stat-cat-wrap--left{left:28px}.hd-stat-cat-wrap--right{right:28px}
  .hd-stat-balance,.hd-stat-orders,.hd-stat-rank{transform:none!important}
  .hd-stat-fancy:hover{transform:none!important}
}