.premium-border-customization-item .premium-border {
    width: 200px;
    background-size: auto 100%;
    margin-left: 2px;
}
.premium-border-customization-item .mud-progress-linear-content {
    justify-content: start;
    padding-left: 4px;
}

@media (min-width: 600px) {
    .premium-border-customization-item .premium-border {
        width: 400px;
        background-size: auto 100%;
    }
}

.select-avatar-border-popover .mud-typography{
    justify-items: center;
    text-align: center;
}
/*Премиум стиль для аватара игрока*/
.premium-avatar-border {
    padding: 2px;
}
.premium-avatar-border .mud-image{
    border-radius: 100%;
}
.premium-avatar-border:before, .premium-avatar-border:after {
    border-radius: 100%;
    left: -15px !important;
    top: -15px !important;
    width: calc(var(--premium-border-width, 100%) + 30px) !important;
    height: calc(100% + 30px) !important;
}

/* Радужная анимированная рамка для premium-border */
.premium-border-1 {  
  position: relative;
  z-index: 1;
}
.premium-border-1:before, .premium-border-1:after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(var(--premium-border-width, 100%) + 2px);
  height: calc(100% + 2px);
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 400%;
  z-index: 0;
  animation: steam 20s linear infinite;
}
.premium-border-1:after {
  filter: blur(3px);
}

@keyframes steam {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* Золотая пульсация */
.premium-border-2 {
  position: relative;
  z-index: 1;
}
.premium-border-2:before, .premium-border-2:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(var(--premium-border-width, 100%) + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(90deg, #ffd700, #fffbe0, #ffd700, #fffbe0, #ffd700);
  background-size: 200%;
  z-index: 0;
  animation: goldpulse 3s ease-in-out infinite;
}
.premium-border-2:after {
  filter: blur(2px);
}

@keyframes goldpulse {
  0%, 100% { background-position: 0 0; opacity: 1; }
  50% { background-position: 100% 0; opacity: 0.7; }
}

/* Сине-фиолетовая волна */
.premium-border-3 {
  position: relative;
  z-index: 1;
}
.premium-border-3:before, .premium-border-3:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(var(--premium-border-width, 100%) + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(120deg, #6a11cb, #2575fc, #6a11cb, #2575fc);
  background-size: 300%;
  z-index: 0;
  animation: bluewave 8s linear infinite;
}
.premium-border-3:after {
  filter: blur(2px);
}

@keyframes bluewave {
  0% { background-position: 0 0; }
  50% { background-position: 300% 0; }
  100% { background-position: 0 0; }
}

/* Зеленый неон */
.premium-border-4 {
  position: relative;
  z-index: 1;
}
.premium-border-4:before, .premium-border-4:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(var(--premium-border-width, 100%) + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(90deg, #00ff99, #00ffcc, #00ff99, #00ffcc);
  background-size: 200%;
  z-index: 0;
  animation: neonmove 6s linear infinite;
}
.premium-border-4:after {
  filter: blur(4px);
}

@keyframes neonmove {
  0% { background-position: 0 0; }
  50% { background-position: 200% 0; }
  100% { background-position: 0 0; }
}

/* Красно-оранжевая вспышка */
.premium-border-5 {
  position: relative;
  z-index: 1;
}
.premium-border-5:before, .premium-border-5:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(var(--premium-border-width, 100%) + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(60deg, #ff512f, #f09819, #ff512f, #f09819);
  background-size: 250%;
  z-index: 0;
  animation: redflash 5s ease-in-out infinite;
}
.premium-border-5:after {
  filter: blur(3px);
}

@keyframes redflash {
  0%, 100% { background-position: 0 0; opacity: 1; }
  50% { background-position: 250% 0; opacity: 0.8; }
}

/* Радужная конусная рамка */
.premium-border-6 {
  position: relative;
  z-index: 1;
  --bg: hsl(190deg 20% 10%);
}
.premium-border-6:before {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(var(--premium-border-width, 100%) + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(white, white) padding-box, conic-gradient(from var(--border-angle), oklch(100% 100% 0deg), oklch(100% 100% 45deg), oklch(100% 100% 90deg), oklch(100% 100% 135deg), oklch(100% 100% 180deg), oklch(100% 100% 225deg), oklch(100% 100% 270deg), oklch(100% 100% 315deg), oklch(100% 100% 360deg)) border-box;  
  z-index: 0;
  pointer-events: none;
  animation: border-angle-rotate 2s infinite linear;
  border: 4px solid transparent;
}

/* Полуконусная рамка */
.premium-border-7 {
  position: relative;
  z-index: 1;
  --bg: hsl(190deg 20% 10%);
}
.premium-border-7:before {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(var(--premium-border-width, 100%) + 4px);
  height: calc(100% + 4px);
  z-index: 0;
  pointer-events: none;
  animation: border-angle-rotate 2s infinite linear;
  border: 4px solid transparent;
  background: linear-gradient(white, white) padding-box,
      conic-gradient(from var(--border-angle), var(--bg) 50%, white)
        border-box;
}

/* многослойная конусная рамка */
.premium-border-8 {
  position: relative;
  z-index: 1;
  --border-angle: 0deg;
  --bg: hsl(190deg 20% 10%);
}
.premium-border-8:before,
.premium-border-8:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  animation: border-angle-rotate 8s infinite linear;
}
.premium-border-8:before {
  left: -2px;
  top: -2px;
  width: calc(var(--premium-border-width, 100%) + 4px);
  height: calc(100% + 4px);
  background: repeating-conic-gradient(from calc(var(--border-angle) * -1), oklch(100% 40% 50deg), black 60deg) border-box;
}
.premium-border-8:after {
  left: -1px;
  top: -1px;
  width: calc(var(--premium-border-width, 100%) + 2px);
  height: calc(100% + 2px);
  background: repeating-conic-gradient(from var(--border-angle), var(--bg), var(--bg) 30deg, oklch(100% 50% 190deg) 60deg) border-box;
}

@keyframes border-angle-rotate {
  from { --border-angle: 0deg; }
  to { --border-angle: 360deg; }
}

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

/* Pink animated avatar border (uses rotating border-angle variable) */
.premium-border-9 {
  position: relative;
  z-index: 1;
  --border-angle: 0deg;
  --bg: #fff0f6;
}

.premium-border-9:before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc(var(--premium-border-width, 100%) + 6px);
  height: calc(100% + 6px);
  z-index: 0;
  pointer-events: none;
  /* make an inner transparent cut with animated conic gradient on border-box */
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
        conic-gradient(from var(--border-angle), #ff5cad, #ff5cad, #ff5cad, #ff5cad, #ff5cad) border-box;
  border: 4px solid transparent;
  animation: pink-flicker 3s ease-in-out infinite;
}

.premium-border-9:after {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc(var(--premium-border-width, 100%) + 6px);
  height: calc(100% + 6px);
  z-index: 0;
  filter: blur(6px);
  opacity: 0.85;
  pointer-events: none;
  background: conic-gradient(from var(--border-angle), #ff5cad, #ff5cad, #ff5cad, #ff5cad, #ff5cad);
  animation: pink-flicker 3s ease-in-out infinite;
}

/* Pink animated premium border (uses rotating border-angle variable) */
.premium-border-10 {
  position: relative;
  z-index: 1;
  --border-angle: 0deg;
  --bg: #fff7fb;
}

.premium-border-10:before {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(var(--premium-border-width, 100%) + 4px);
  height: calc(100% + 4px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--border-angle), #fdeaea, #fce2f3, #ffa2c5, #ff53a3, #ff227e) border-box;
  border: 5px solid transparent;
  /* faster rotation and a subtle pulse to make the band pop */
  animation: border-angle-rotate 3s linear infinite, pink-flicker 3s ease-in-out infinite;
}

.premium-border-10:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(var(--premium-border-width, 100%) + 4px);
  height: calc(100% + 4px);
  z-index: 0;
  filter: blur(4px);
  opacity: 0.9;
  pointer-events: none;
  background: conic-gradient(from var(--border-angle), #fdeaea, #fce2f3, #ffa2c5, #ff53a3, #ff227e);
  animation: border-angle-rotate 3s linear infinite, pink-flicker 3s ease-in-out infinite;
}

@keyframes pink-flicker {
  0% { opacity: 0.85; }
  25% { opacity: 1; }
  50% { opacity: 0.88; }
  75% { opacity: 1; }
  100% { opacity: 0.85; }
}