/* Professional Skeleton Loader for White Background */

.skeleton-line {
    background: linear-gradient( 90deg, #f8f9fa 0%, #e9ecef 20%, #f1f3f4 40%, #e9ecef 60%, #f8f9fa 80%, #f8f9fa 100% );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.8s ease-in-out infinite;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* Enhanced shimmer animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

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

/* Add subtle pulse effect */
.skeleton-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100% );
    animation: skeleton-pulse 2s ease-in-out infinite;
    border-radius: inherit;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* Specific skeleton variations */
.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.skeleton-text-lg {
    height: 1.5rem;
    margin-bottom: 0.75rem;
    border-radius: 6px;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-card {
    background: linear-gradient( 135deg, #f8f9fa 0%, #e9ecef 25%, #f1f3f4 50%, #e9ecef 75%, #f8f9fa 100% );
    background-size: 300% 300%;
    animation: skeleton-gradient 2.5s ease infinite;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

@keyframes skeleton-gradient {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Map skeleton specific styling */
#mapSkeleton.skeleton-line {
    background: linear-gradient( 45deg, #f8f9fa 0%, #e9ecef 25%, #dee2e6 50%, #e9ecef 75%, #f8f9fa 100% );
    background-size: 600% 600%;
    animation: skeleton-map 3s ease-in-out infinite;
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

@keyframes skeleton-map {
    0%, 100% {
        background-position: 0% 0%;
    }

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

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

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

/* Add map placeholder content */
#mapSkeleton::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23dee2e6"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') no-repeat center;
    opacity: 0.3;
    animation: skeleton-icon-pulse 2s ease-in-out infinite;
}

@keyframes skeleton-icon-pulse {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Category skeleton cards */
#categorySkeleton .skeleton-line {
    background: linear-gradient( 135deg, #f8f9fa 0%, #e9ecef 30%, #f1f3f4 60%, #f8f9fa 100% );
    background-size: 200% 200%;
    animation: skeleton-category 2s ease-in-out infinite;
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

@keyframes skeleton-category {
    0%, 100% {
        background-position: 0% 0%;
    }

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

/* Add category icon placeholder */
#categorySkeleton .skeleton-line::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: rgba(108, 117, 125, 0.15);
    border-radius: 6px;
    animation: skeleton-icon-fade 1.5s ease-in-out infinite alternate;
}

@keyframes skeleton-icon-fade {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.6;
    }
}

/* Title skeleton refinements */
#titleSkeleton .skeleton-line {
    background: linear-gradient( 90deg, #f8f9fa 0%, #e9ecef 20%, #f1f3f4 40%, #e9ecef 60%, #f8f9fa 80%, #f8f9fa 100% );
    background-size: 300% 100%;
    animation: skeleton-title 1.5s ease-in-out infinite;
}

@keyframes skeleton-title {
    0% {
        background-position: 200% 0;
    }

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

/* Search input skeleton */
.stylish-search-final.skeleton-line {
    background: linear-gradient( 90deg, #f8f9fa 0%, #e9ecef 25%, #f1f3f4 50%, #e9ecef 75%, #f8f9fa 100% );
    background-size: 400% 100%;
    animation: skeleton-search 2s ease-in-out infinite;
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: transparent;
}

@keyframes skeleton-search {
    0% {
        background-position: 100% 0;
    }

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

/* Professional loading states */
.skeleton-wrapper {
    position: relative;
    overflow: hidden;
}

    .skeleton-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100% );
        animation: skeleton-shine 2s ease-in-out infinite;
        z-index: 1;
    }

@keyframes skeleton-shine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Responsive skeleton adjustments */
@media (max-width: 768px) {
    .skeleton-line {
        animation-duration: 1.5s;
    }

    #mapSkeleton.skeleton-line {
        height: 300px !important;
    }

    #categorySkeleton .skeleton-line {
        width: 80px !important;
        height: 90px !important;
    }
}

/* Dark mode compatibility (just in case) */
@media (prefers-color-scheme: dark) {
    .skeleton-line {
        background: linear-gradient( 90deg, #2d3748 0%, #4a5568 20%, #718096 40%, #4a5568 60%, #2d3748 80%, #2d3748 100% );
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .skeleton-line,
    .skeleton-line::before,
    #mapSkeleton.skeleton-line,
    #categorySkeleton .skeleton-line {
        animation: none;
        background: #e9ecef;
    }
}