/**
 * Jecy Lottie Stickers - Frontend Styles
 */

/* Базовые стили */
lottie-player.lottie-sticker,
lottie-player {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    background: none !important;
    background-color: transparent !important;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

/* Фикс прозрачности для мобильных и всех браузеров */
lottie-player::part(animation),
lottie-player::part(animation-container) {
    background: none !important;
    background-color: transparent !important;
}

lottie-player svg,
lottie-player canvas {
    background: none !important;
    background-color: transparent !important;
}

/* Принудительная прозрачность внутренних элементов */
lottie-player > div,
lottie-player > div > div,
lottie-player > div > svg {
    background: transparent !important;
}

/* Обёртка с лоадером */
.lottie-wrapper {
    position: relative;
    display: inline-block;
    background: transparent !important;
    line-height: 0;
}

.lottie-wrapper .lottie-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #888;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.lottie-wrapper .lottie-loader::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    margin: 8px auto 0;
    border: 2px solid #ddd;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: lottie-spin 0.8s linear infinite;
}

@keyframes lottie-spin {
    to { transform: rotate(360deg); }
}

/* Скрываем лоадер когда загружено */
.lottie-wrapper.loaded .lottie-loader {
    display: none;
}

.lottie-wrapper lottie-player {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lottie-wrapper.loaded lottie-player {
    opacity: 1;
}

/* В блоках изображений */
.wp-block-image lottie-player,
figure lottie-player {
    display: block;
    margin: 0 auto;
}

/* Выравнивание */
.alignleft lottie-player,
lottie-player.alignleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 0.5em;
}

.alignright lottie-player,
lottie-player.alignright {
    float: right;
    margin-left: 1em;
    margin-bottom: 0.5em;
}

.aligncenter lottie-player,
lottie-player.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Gutenberg блок */
.wp-block-jecy-lottie-sticker {
    text-align: center;
    margin: 1em 0;
}

.wp-block-jecy-lottie-sticker lottie-player {
    display: inline-block;
}

/* Hover эффект */
lottie-player[data-hover],
.lottie-wrapper.lottie-hover {
    cursor: pointer;
}

lottie-player[data-hover]:hover,
.lottie-wrapper.lottie-hover:hover lottie-player {
    transform: scale(1.05);
}

/* Click эффект */
lottie-player[data-click],
.lottie-wrapper.lottie-click {
    cursor: pointer;
}

lottie-player[data-click]:active,
.lottie-wrapper.lottie-click:active lottie-player {
    transform: scale(0.95);
}

/* Плавные переходы */
lottie-player {
    transition: transform 0.2s ease;
}

/* Lazy loading - пока не загружен src */
lottie-player[data-lazy]:not([src]) {
    background: #f5f5f5;
    border-radius: 8px;
}

/* Адаптивность */
@media (max-width: 480px) {
    lottie-player.lottie-sticker {
        max-width: 80vw;
        height: auto !important;
    }
}

/* ======================== */
/* WebM Sticker Styles      */
/* ======================== */

video.webm-sticker {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    background: transparent !important;
    object-fit: contain;
}

.webm-wrapper {
    position: relative;
    display: inline-block;
    background: transparent !important;
    line-height: 0;
}

.webm-wrapper video {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.webm-wrapper.loaded video {
    opacity: 1;
}

/* В блоках */
.wp-block-image video.webm-sticker,
figure video.webm-sticker {
    display: block;
    margin: 0 auto;
}

.wp-block-jecy-lottie-sticker video.webm-sticker {
    display: inline-block;
}

/* Выравнивание */
.alignleft video.webm-sticker,
video.webm-sticker.alignleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 0.5em;
}

.alignright video.webm-sticker,
video.webm-sticker.alignright {
    float: right;
    margin-left: 1em;
    margin-bottom: 0.5em;
}

.aligncenter video.webm-sticker,
video.webm-sticker.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Hover эффект */
video.webm-sticker[data-hover],
.webm-wrapper.webm-hover {
    cursor: pointer;
}

video.webm-sticker[data-hover]:hover,
.webm-wrapper.webm-hover:hover video {
    transform: scale(1.05);
}

/* Click эффект */
video.webm-sticker[data-click],
.webm-wrapper.webm-click {
    cursor: pointer;
}

video.webm-sticker[data-click]:active,
.webm-wrapper.webm-click:active video {
    transform: scale(0.95);
}

/* Плавные переходы */
video.webm-sticker {
    transition: transform 0.2s ease;
}

/* Lazy loading */
video.webm-sticker[data-lazy]:not(:has(source)) {
    background: #f5f5f5;
    border-radius: 8px;
}

/* Адаптивность */
@media (max-width: 480px) {
    video.webm-sticker {
        max-width: 80vw;
        height: auto !important;
    }
}

/* Тёмная тема */
@media (prefers-color-scheme: dark) {
    .lottie-wrapper,
    .webm-wrapper {
        background: transparent;
    }
    
    .lottie-wrapper .lottie-loader {
        color: #aaa;
    }
    
    .lottie-wrapper .lottie-loader::after {
        border-color: #444;
        border-top-color: #667eea;
    }
}