/* Lottie Icons Styles */

/* Глобальное правило для всех iframe с Lottie иконками */
iframe[src*="_lottie.html"],
iframe[src*="/icons/"] {
    background: transparent !important;
}

.lottie-icon,
.lottie-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
}

.lottie-icon iframe {
    border: none;
    background: transparent !important;
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%;
}

/* Размеры иконок */
.lottie-icon-sm {
    width: 16px;
    height: 16px;
}

.lottie-icon-md {
    width: 20px;
    height: 20px;
}

.lottie-icon-lg {
    width: 24px;
    height: 24px;
}

.lottie-icon-xl {
    width: 32px;
    height: 32px;
}

.lottie-icon-2xl {
    width: 48px;
    height: 48px;
}

/* Иконки в кнопках */
.btn-primary .lottie-icon,
.btn-secondary .lottie-icon,
.btn-danger .lottie-icon,
.product-add-btn .lottie-icon,
.cart-item-remove .lottie-icon {
    margin-right: 6px;
}

/* Иконки в навигации */
.nav-btn .lottie-icon {
    margin-bottom: 4px;
}

/* Иконки в топ-баре */
.delivery-badge .lottie-icon,
.channel-btn .lottie-icon {
    margin-right: 6px;
}

/* Иконки в поиске */
.search-bar .lottie-icon {
    margin-right: 8px;
}

/* Анимация при наведении */
.nav-btn:hover .lottie-icon iframe,
.btn-primary:hover .lottie-icon iframe,
.product-add-btn:hover .lottie-icon iframe {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Оптимизация производительности */
.lottie-icon iframe {
    will-change: transform;
    transform: translateZ(0);
}

/* ========================================
   ЦВЕТОВЫЕ ФИЛЬТРЫ ДЛЯ ИКОНОК
   ======================================== */

/* ВАЖНО: Цвета работают через hue-rotate фильтр */
/* Применяется к wrapper, который содержит iframe */

/* Основные цвета */
.lottie-icon-primary {
    filter: hue-rotate(0deg) saturate(1.5);
}

.lottie-icon-white {
    filter: brightness(10) saturate(0);
}

.lottie-icon-black {
    filter: brightness(0) saturate(0);
}

.lottie-icon-gray {
    filter: brightness(0.5) saturate(0);
}

/* Цветные варианты через hue-rotate */
.lottie-icon-blue {
    filter: hue-rotate(200deg) saturate(2);
}

.lottie-icon-green {
    filter: hue-rotate(80deg) saturate(2);
}

.lottie-icon-red {
    filter: hue-rotate(340deg) saturate(2);
}

.lottie-icon-orange {
    filter: hue-rotate(20deg) saturate(2);
}

.lottie-icon-yellow {
    filter: hue-rotate(40deg) saturate(2) brightness(1.2);
}

.lottie-icon-purple {
    filter: hue-rotate(260deg) saturate(2);
}

.lottie-icon-pink {
    filter: hue-rotate(310deg) saturate(2);
}

.lottie-icon-teal {
    filter: hue-rotate(160deg) saturate(2);
}

/* Состояния */
.lottie-icon-success {
    filter: hue-rotate(80deg) saturate(2);
}

.lottie-icon-warning {
    filter: hue-rotate(20deg) saturate(2);
}

.lottie-icon-danger {
    filter: hue-rotate(340deg) saturate(2);
}

.lottie-icon-info {
    filter: hue-rotate(200deg) saturate(2);
}

/* Прозрачность */
.lottie-icon-opacity-75 {
    opacity: 0.75;
}

.lottie-icon-opacity-50 {
    opacity: 0.5;
}

.lottie-icon-opacity-25 {
    opacity: 0.25;
}

/* Эффекты при наведении */
.lottie-icon-hover-brighten:hover {
    filter: brightness(1.2);
    transition: filter 0.2s ease;
}

.lottie-icon-hover-darken:hover {
    filter: brightness(0.8);
    transition: filter 0.2s ease;
}

/* Плавные переходы для фильтров */
.lottie-icon-wrapper[class*="lottie-icon-"] {
    transition: filter 0.3s ease, opacity 0.3s ease;
}