.loader{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--loaderOverlayBg);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  border-radius:14px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(1.015);
  transition:
    opacity .30s ease,
    backdrop-filter .36s ease,
    -webkit-backdrop-filter .36s ease,
    transform .36s ease,
    visibility 0s linear .30s;
}

.loader.isOn{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transform:scale(1);
  transition-delay:0s, 0s, 0s, 0s, 0s;
}

.loaderInner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border-radius:18px;
  background:var(--loaderPanelBg);
  border:1px solid var(--loaderPanelBorder);
  box-shadow:0 16px 42px rgba(0,0,0,.22);
  color:var(--loaderText);
  max-width:min(92vw, 440px);
  opacity:0;
  transform:translateY(16px) scale(.96);
  transition:
    opacity .34s cubic-bezier(.22,1,.36,1),
    transform .38s cubic-bezier(.22,1,.36,1);
  will-change:transform, opacity;
}

.loader.isOn .loaderInner{
  opacity:1;
  transform:translateY(0) scale(1);
}

.card.loading > *:not(.loader){
  opacity:.52;
  filter:blur(2.6px);
  transform:scale(.995);
  transition:
    opacity .28s ease,
    filter .34s ease,
    transform .34s ease;
  pointer-events:none;
}

.card > *:not(.loader){
  transition:
    opacity .28s ease,
    filter .34s ease,
    transform .34s ease;
}

.spinnerGif{
  display:block;
  width:72px;
  height:72px;
  object-fit:contain;
  flex:0 0 72px;
  user-select:none;
  -webkit-user-drag:none;
  opacity:0;
  transform:scale(.82) rotate(-10deg);
  transition:
    opacity .34s ease .06s,
    transform .46s cubic-bezier(.22,1,.36,1) .06s;
}

.loader.isOn .spinnerGif{
  opacity:1;
  transform:scale(1) rotate(0deg);
}

.loaderTextWrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.loaderText{
  font-weight:900;
  font-size:16px;
  line-height:1.2;
  letter-spacing:.1px;
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .30s ease .10s,
    transform .34s cubic-bezier(.22,1,.36,1) .10s;
}

.loader.isOn .loaderText{
  opacity:1;
  transform:translateY(0);
}

.loaderSub{
  display:block;
  font-size:14px;
  opacity:.92;
  line-height:1.3;
  min-height:18px;
  transform:translateY(6px);
  opacity:0;
  transition:
    opacity .30s ease .16s,
    transform .34s cubic-bezier(.22,1,.36,1) .16s;
}

.loader.isOn .loaderSub{
  opacity:.92;
  transform:translateY(0);
}

.loaderSub.isSwitching{
  animation:loaderTextSwitch .34s ease;
}

@keyframes loaderTextSwitch{
  0%{
    opacity:.2;
    transform:translateY(6px);
  }
  100%{
    opacity:.92;
    transform:translateY(0);
  }
}

@media (max-width: 640px){
  .loaderInner{
    flex-direction:column;
    text-align:center;
    gap:12px;
    padding:16px;
  }

  .spinnerGif{
    width:64px;
    height:64px;
    flex-basis:64px;
  }
}