/* DP_GLOBAL_PREMIUM_LOADER_V4 */

#dpPremiumLoader{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:
    radial-gradient(circle at 50% 30%,rgba(37,99,235,.24),transparent 38%),
    linear-gradient(135deg,#020617,#071b3f,#0b4ca3);
  opacity:1;
  visibility:visible;
  transition:opacity .28s ease,visibility .28s ease;
  pointer-events:all
}

#dpPremiumLoader.dp-loader-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none
}

#dpPremiumLoader .dp-loader-card{
  width:min(330px,88vw);
  padding:25px 22px;
  border-radius:30px;
  text-align:center;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.23);
  box-shadow:0 30px 90px rgba(0,0,0,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)
}

#dpPremiumLoader .dp-loader-logo-wrap{
  position:relative;
  width:145px;
  height:145px;
  margin:0 auto 17px;
  display:grid;
  place-items:center
}

#dpPremiumLoader .dp-loader-ring{
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:5px solid rgba(255,255,255,.17);
  border-top-color:#fbbf24;
  border-right-color:#38bdf8;
  animation:dpPremiumSpin .9s linear infinite
}

#dpPremiumLoader .dp-loader-logo{
  width:128px;
  height:128px;
  border-radius:50%;
  object-fit:contain;
  padding:4px;
  background:#06142f;
  box-shadow:0 15px 40px rgba(0,0,0,.34)
}

#dpPremiumLoader .dp-loader-title{
  margin:0;
  font-size:23px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.2px
}

#dpPremiumLoader .dp-loader-subtitle{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.5;
  font-weight:800;
  color:#dbeafe
}

#dpPremiumLoader .dp-loader-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:17px
}

#dpPremiumLoader .dp-loader-dots i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#fff;
  animation:dpPremiumDot 1s ease-in-out infinite
}

#dpPremiumLoader .dp-loader-dots i:nth-child(2){
  animation-delay:.14s
}

#dpPremiumLoader .dp-loader-dots i:nth-child(3){
  animation-delay:.28s
}

@keyframes dpPremiumSpin{
  to{transform:rotate(360deg)}
}

@keyframes dpPremiumDot{
  0%,100%{opacity:.35;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-6px)}
}

@media(max-width:480px){
  #dpPremiumLoader .dp-loader-card{
    width:min(290px,90vw);
    padding:22px 17px
  }

  #dpPremiumLoader .dp-loader-logo-wrap{
    width:125px;
    height:125px
  }

  #dpPremiumLoader .dp-loader-logo{
    width:110px;
    height:110px
  }

  #dpPremiumLoader .dp-loader-title{
    font-size:20px
  }
}