/**
 * SBTT HEIC Converter Styles
 *
 * Loading indicator for client-side HEIC to JPEG conversion.
 *
 * @package tiktok-feeds
 * @since 1.2.0
 */

/* Converting badge overlay */
.sbtt-converting-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Spinner animation */
.sbtt-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sbtt-spin 0.8s linear infinite;
}

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

/* Hide HEIC images until JS processes them (prevents flash of broken images) */
.sbtt-post-item img[src*=".heic"]:not([data-heic-processed]) {
    opacity: 0;
}

/* Show processed images with smooth transition - support all states */
.sbtt-post-item img[data-heic-processed="converted"],
.sbtt-post-item img[data-heic-processed="temp"],
.sbtt-post-item img[data-heic-processed="native"],
.sbtt-post-item img[data-heic-processed="cached"] {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Failed images should still show (browser will display alt text) */
.sbtt-post-item img[data-heic-processed="failed"] {
    opacity: 1;
}

/* Shimmer placeholder to prevent empty white space during conversion */
.sbtt-post-item[data-processing-attempted="1"] .sb-post-item-image:has(img[src*=".heic"]:not([data-heic-processed]))::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: sbtt-shimmer 1.5s infinite;
    border-radius: inherit;
    z-index: 0;
}

@keyframes sbtt-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hide shimmer once image loads */
.sbtt-post-item img[data-heic-processed] {
    position: relative;
    z-index: 1;
}