@keyframes free-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Стиль для избранных лотов */
.lot-card--featured {
    border: 2px solid #FFD700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    position: relative;
}

.lot-card--featured::before {
    content: "⭐ ИЗБРАННОЕ";
    position: absolute;
    top: 10px;
    right: -30px;
    background: #FFD700;
    color: #000;
    padding: 4px 35px;
    font-size: 11px;
    font-weight: bold;
    transform: rotate(45deg);
    z-index: 10;
}

/* ============================
   Модалка большого аватара
   ============================ */
.avatar-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
        overflow: visible !important; /* Разрешаем венку выходить за границы */

}

.avatar-modal--open {
    display: flex;
        overflow: visible !important; /* Разрешаем венку выходить за границы */

}

.avatar-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
        overflow: visible !important; /* Разрешаем венку выходить за границы */

}

.avatar-modal__content {
    position: relative;
    z-index: 1;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    overflow: hidden;
    background: #111;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
        overflow: visible !important; /* Разрешаем венку выходить за границы */

}

.avatar-modal__content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
        overflow: visible !important; /* Разрешаем венку выходить за границы */

translate:0px, 6px;
}

/* золотой венок вокруг большой фотки */
.avatar-modal__content::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,215,0,0.9);
    pointer-events: none;
        overflow: visible !important; /* Разрешаем венку выходить за границы */

}

/* ============================
   Кубок + маленькая иконка 2 см
   ============================ */

/* Контейнер: кубок + аватар + текст в одну линию */
/* Контейнер-обертка */
.lot-card__leader-trophy-wrapper {
    width: 100%;
    margin: 15px 0;
    overflow: visible; /* Чтобы тени и короны не обрезались */
}


/* Кубок лидера — большой */
.lot-card__leader-trophy {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}



/* Маленький круглый аватар ≈ 2 см с лавровым венком */
.lot-card__leader-avatar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Кольцо аватара — сделаем чуть меньше, чтобы влезло в рамки решетки */
.lot-card__leader-avatar-ring {
    width: 90px; /* Увеличили аватар */
    height: 90px;
    border-radius: 50%;
   
    overflow: visible !important; /* Разрешаем венку выходить за границы */
}



.lot-card__leader-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    translate:-37px 1px;
        cursor: pointer !important;

}

/* Фиксируем фон модального окна */
div.avatar-modal__backdrop {
   /* transform: translate(0px, -10px) !important;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Фиксируем саму большую фотку */
#avatar-modal-img {
    transform: translate(0px, 7px) !important;
    border: none !important; /* На всякий случай убираем рамку с самой картинки */
    border-radius: 50%;     /* Чтобы фотка была круглой */
}





/* Полоса с фоном-решёткой от левого до правого края карточки */
/* 1. Основной контейнер-полоса (решетка) */
/* 1. Основной контейнер-полоса (свиток) */
/* 1. Контейнер-свиток: делаем его строгим родителем для всех троих */
/* ГЛАВНОЕ: Растягиваем полотнище-решетку */
/* 1. Увеличиваем высоту подложки */
.lot-card__leader-bar {
    width: 100%;
    min-height: 200px; /* Увеличили высоту */
    background-image: url("/static/components/golden-confetti/img/trophy-bg-Photoroom.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0px; /* Увеличили отступы по бокам */
    box-sizing: border-box;
}




/* 2. Кубок (левая часть) */
/* 2. Кубок: двигаем вправо и меняем цифру на эллипс у основания */
.lot-card__leader-left {
    margin-left: 15px; /* Отодвигаем от ажурного края */
    position: relative;
}




/* 3. Центр или Правая часть (Аватар) */
/* 4. Аватар (центр) — теперь он ВНУТРИ свитка */
/* Аватар в центре свитка */
/* 3. Аватар: центрируем и опускаем на 2мм */
.lot-card__leader-avatar-wrapper {
    transform: translateY(4px); /* Опускаем примерно на 2мм */
}




/* Контейнер для кубка */
/* Кубок и цифра */
.lot-card__leader-trophy-icon {
    position: relative;
    display: flex;
}


/* Сам кубок (реалистичная картинка) */

.lot-card__leader-trophy-img {
    width: 75px;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.4));
    padding: 0px 35px;
    translate: 0px -16px;

}




/* Кружок с номером шага (оставь свои существующие стили + при необходимости это) */
/* 5. Номер шага (белый кружок) */
/* Чтобы он был ПОВЕРХ кубка или аватара */
/* 3. Номер шага (белый кружок) */
/* Теперь он будет сидеть прямо на кубке справа вверху */
/* 3. Номер "1" — теперь он будет сидеть прямо на плече кубка */
/* Эллипс для цифр (вмещает 1, 2 и 3 знака) */
.lot-card__leader-count-ellipse {
    position: absolute;
    bottom: 5px; /* Прилепили к основанию */
    left: 50%;
    transform: translateX(-50%);
   /*  min-width: 35px;
    padding: 2px 8px;*/
    min-width: 25px;
    padding: 0px 0px;
translate: 0px -4px;

    background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
    color: #000;
    border-radius: 12px; /* Форма эллипса */
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 3px 6px rgba(0,0,0,0.5);
    border: 1px solid #d0ab35;
    z-index: 5;
    text-align: center;
}


/* Правая часть: логин + город/страна (и будущий флаг) */
/* 4. Текст (Guest / Логин) */
/* 5. Правая часть: Текст (guest) */
/* 5. Текст GUEST (правая часть) */
/* Текст справа */
.lot-card__leader-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 100px;
}

/* логин лидера */
/* 4. ПРЕМИУМ ЛОГИН: Золотой перелив */
.lot-card__leader-login-premium {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    
    /* Золотой градиент */
    background: linear-gradient(90deg, #d4af37, #f7ef8a, #d4af37, #f7ef8a);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Анимация перелива */
    animation: shineGold 3s linear infinite;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
    translate: -56px 3px;
    
}

.lot-card__leader-location-premium {
    font-size: 11px;
    color: #555;
    font-weight: 700;
    margin-top: -2px;
}

/* Анимация сияния золота */
@keyframes shineGold {
    to { background-position: 200% center; }
}




/* Когда лидер-полосе добавлен класс is-visible, кубок проявляется и «увеличивается» */
.lot-card__leader-bar.is-visible .lot-card__leader-trophy-img {
  opacity: 1;
  transform: scale(1);

}




  .reshotka {
    max-height: 120px;
    border: 1px solid rgba(255, 215, 128, 0.25) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.2) !important;
    margin: 10px 0 !important;
  }



/* УБИРАЕИ ЖЕЛТЫЙ ОБОДОК Отключаем всё: рамки, тени, контуры и фоновые картинки-рамки */
#avatar-modal, 
#avatar-modal *, 
.avatar-modal, 
.avatar-modal * {
    border: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Охота на псевдоэлементы (часто рамки делают именно так) */
#avatar-modal::before, 
#avatar-modal::after,
.avatar-modal::before, 
.avatar-modal::after,
.avatar-modal__content::before,
.avatar-modal__content::after {
    content: none !important;
    display: none !important;
    border: none !important;
}







/* Поздравительная открытка идер торгов!
Поздравляем с победной ставкой! */

/* 
   ==========================================================================
   БАЗОВЫЙ ДИЗАЙН КАРТОЧКИ (НЕ ТРОГАЕМ)
   ========================================================================== 
*/
.winner-card {
    position: relative;
    text-align: center;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,215,128,0.3);
    background: rgba(255,215,128,0.1);
    color: #f6f2e9;
    overflow: hidden; 
}

.winner-card__icon { font-size: 24px; }
.winner-card__title { color: #ffd780; font-weight: bold; margin-top: 5px; }
.winner-card__subtitle { font-size: 12px; color: rgba(246,242,233,0.7); }

/* 
   ==========================================================================
   ВЕСЁЛАЯ РАЗНОЦВЕТНАЯ ГИРЛЯНДА
   ========================================================================== 
*/

.card-with-lights {
    position: relative;
    border-radius: 8px;
}

.card-with-lights::before,
.card-with-lights::after {
    content: '';
    position: absolute;
    inset: -3px; /* Немного увеличил вылет для лучшего свечения */
    pointer-events: none;
    z-index: 10;
    border-radius: 10px; /* Чтобы огоньки повторяли форму карточки */
    
    /* Мягкое свечение вокруг огоньков */
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
    
    /* Маска для плавного появления/исчезновения */
    mask-image: radial-gradient(circle at center, black, transparent 80%);
}

/* Горизонтальные огни (верх и низ) - разноцветные */
.card-with-lights::before {
    background: 
        /* Красные огоньки */
        radial-gradient(circle at 20% 0, #ff3366 2px, transparent 4px),
        radial-gradient(circle at 50% 0, #ff6633 2px, transparent 4px),
        radial-gradient(circle at 80% 0, #ff9933 2px, transparent 4px),
        
        /* Синие и фиолетовые */
        radial-gradient(circle at 10% 100%, #33ccff 2px, transparent 4px),
        radial-gradient(circle at 40% 100%, #9933ff 2px, transparent 4px),
        radial-gradient(circle at 70% 100%, #ff33cc 2px, transparent 4px),
        
        /* Зелёные и жёлтые */
        radial-gradient(circle at 30% 0, #33ff99 2px, transparent 4px),
        radial-gradient(circle at 60% 0, #ffff66 2px, transparent 4px),
        radial-gradient(circle at 90% 0, #ffcc00 2px, transparent 4px),
        
        /* Ещё цветные для низа */
        radial-gradient(circle at 25% 100%, #ff6699 2px, transparent 4px),
        radial-gradient(circle at 55% 100%, #66ff99 2px, transparent 4px),
        radial-gradient(circle at 85% 100%, #9966ff 2px, transparent 4px);
    
    background-size: 100px 4px, 100px 4px, 100px 4px,
                     100px 4px, 100px 4px, 100px 4px,
                     100px 4px, 100px 4px, 100px 4px,
                     100px 4px, 100px 4px, 100px 4px;
    background-repeat: repeat-x, repeat-x, repeat-x,
                       repeat-x, repeat-x, repeat-x,
                       repeat-x, repeat-x, repeat-x,
                       repeat-x, repeat-x, repeat-x;
    
    /* Сложная анимация для каждой линии со своей скоростью */
    animation: 
        lights-rainbow-h1 1.2s linear infinite,
        lights-rainbow-h2 1.5s linear infinite,
        lights-rainbow-h3 0.9s linear infinite,
        lights-rainbow-h4 1.8s linear infinite;
}

/* Вертикальные огни (лево и право) - разноцветные */
.card-with-lights::after {
    background: 
        /* Левый край - тёплые тона */
        radial-gradient(circle at 0 15%, #ff4444 2px, transparent 4px),
        radial-gradient(circle at 0 45%, #ffaa44 2px, transparent 4px),
        radial-gradient(circle at 0 75%, #ffdd44 2px, transparent 4px),
        
        /* Правый край - холодные тона */
        radial-gradient(circle at 100% 25%, #44aaff 2px, transparent 4px),
        radial-gradient(circle at 100% 55%, #aa44ff 2px, transparent 4px),
        radial-gradient(circle at 100% 85%, #ff44aa 2px, transparent 4px),
        
        /* Ещё огоньки для левого */
        radial-gradient(circle at 0 30%, #66ff66 2px, transparent 4px),
        radial-gradient(circle at 0 60%, #ffff66 2px, transparent 4px),
        radial-gradient(circle at 0 90%, #ff9966 2px, transparent 4px),
        
        /* Ещё для правого */
        radial-gradient(circle at 100% 10%, #ff66b2 2px, transparent 4px),
        radial-gradient(circle at 100% 40%, #b266ff 2px, transparent 4px),
        radial-gradient(circle at 100% 70%, #66ffff 2px, transparent 4px);
    
    background-size: 4px 60px, 4px 60px, 4px 60px,
                     4px 60px, 4px 60px, 4px 60px,
                     4px 60px, 4px 60px, 4px 60px,
                     4px 60px, 4px 60px, 4px 60px;
    background-repeat: repeat-y, repeat-y, repeat-y,
                       repeat-y, repeat-y, repeat-y,
                       repeat-y, repeat-y, repeat-y,
                       repeat-y, repeat-y, repeat-y;
    
    animation: 
        lights-rainbow-v1 1.3s linear infinite,
        lights-rainbow-v2 1.7s linear infinite,
        lights-rainbow-v3 1.1s linear infinite,
        lights-rainbow-v4 1.9s linear infinite;
}

/* Анимации для горизонтальных огней с разными направлениями */
@keyframes lights-rainbow-h1 {
    0% { background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%; }
    100% { background-position: 100px 0, -50px 0, 30px 0, -30px 100%, 70px 100%, -80px 100%, 50px 0, -70px 0, 90px 0, -90px 100%, 40px 100%, -60px 100%; }
}

@keyframes lights-rainbow-h2 {
    0% { background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%; }
    100% { background-position: -30px 0, 80px 0, -60px 0, 60px 100%, -40px 100%, 20px 100%, -80px 0, 40px 0, -20px 0, 30px 100%, -70px 100%, 50px 100%; }
}

@keyframes lights-rainbow-h3 {
    0% { background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%; }
    100% { background-position: 60px 0, -40px 0, 90px 0, -20px 100%, 80px 100%, -50px 100%, 20px 0, -90px 0, 70px 0, -60px 100%, 10px 100%, -30px 100%; }
}

@keyframes lights-rainbow-h4 {
    0% { background-position: 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%; }
    100% { background-position: -70px 0, 30px 0, -50px 0, 50px 100%, -30px 100%, 70px 100%, -40px 0, 90px 0, -10px 0, 40px 100%, -80px 100%, 20px 100%; }
}

/* Анимации для вертикальных огней */
@keyframes lights-rainbow-v1 {
    0% { background-position: 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0; }
    100% { background-position: 0 60px, 0 -30px, 0 40px, 100% -50px, 100% 70px, 100% -20px, 0 30px, 0 -70px, 0 90px, 100% -40px, 100% 50px, 100% -80px; }
}

@keyframes lights-rainbow-v2 {
    0% { background-position: 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0; }
    100% { background-position: 0 -20px, 0 50px, 0 -80px, 100% 40px, 100% -60px, 100% 20px, 0 -50px, 0 80px, 0 -40px, 100% 60px, 100% -30px, 100% 90px; }
}

@keyframes lights-rainbow-v3 {
    0% { background-position: 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0; }
    100% { background-position: 0 70px, 0 -40px, 0 20px, 100% -30px, 100% 80px, 100% -70px, 0 50px, 0 -90px, 0 10px, 100% -60px, 100% 40px, 100% -10px; }
}

@keyframes lights-rainbow-v4 {
    0% { background-position: 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0; }
    100% { background-position: 0 -10px, 0 90px, 0 -60px, 100% 30px, 100% -80px, 100% 50px, 0 -30px, 0 70px, 0 -50px, 100% 20px, 100% -40px, 100% 60px; }
}

/* Добавляем эффект мерцания для большей живости */
.winner-card {
    animation: card-glow 2s ease-in-out infinite;
}

@keyframes card-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255,215,128,0.3), 0 0 10px rgba(255,200,100,0.2); }
    50% { box-shadow: 0 0 15px rgba(255,215,128,0.6), 0 0 30px rgba(255,200,100,0.4); }
}