/**
 * PROFESSIONAL LOADING INDICATORS - 2025 STANDARDS
 * Beautiful loading states for better UX
 */

/* ===== GLOBAL LOADING OVERLAY ===== */
#global-loading-indicator {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    
    /* Modern glassmorphism */
    background: rgba(26, 26, 26, 0.8) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    
    /* Perfect centering */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Smooth entrance */
    opacity: 0 !important;
    animation: loadingFadeIn 0.3s ease-out forwards !important;
}

.loading-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.loading-content {
    /* Professional loading card */
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    border: 2px solid rgba(243, 159, 27, 0.3) !important;
    border-radius: 16px !important;
    padding: 32px 48px !important;
    
    /* Perfect centering */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    
    /* Beautiful shadow */
    box-shadow: 
        0 16px 64px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(243, 159, 27, 0.2) !important;
}

/* ===== PROFESSIONAL LOADING SPINNER ===== */
.loading-spinner {
    width: 48px !important;
    height: 48px !important;
    border: 4px solid rgba(243, 159, 27, 0.2) !important;
    border-top: 4px solid #F39F1B !important;
    border-radius: 50% !important;
    animation: loadingSpin 1s linear infinite !important;
    
    /* Beautiful glow */
    box-shadow: 
        0 0 20px rgba(243, 159, 27, 0.3),
        inset 0 0 20px rgba(243, 159, 27, 0.1) !important;
}

.loading-text {
    /* Professional typography */
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
    letter-spacing: 0.02em !important;
    
    /* Subtle animation */
    animation: loadingPulse 2s ease-in-out infinite !important;
}

/* ===== LOADING ANIMATIONS ===== */
@keyframes loadingFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes loadingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes loadingPulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.6; }
}

/* ===== TICKER LOADING STATE ===== */
.live-ticker.loading {
    /* Loading state styling */
    background: rgba(26, 26, 26, 0.7) !important;
    opacity: 0.8 !important;
}

.live-ticker.loading::after {
    content: 'Загрузка данных...' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: rgba(243, 159, 27, 0.8) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* ===== MOBILE LOADING OPTIMIZATION ===== */
@media (max-width: 768px) {
    .loading-content {
        padding: 24px 32px !important;
        border-radius: 12px !important;
    }
    
    .loading-spinner {
        width: 40px !important;
        height: 40px !important;
        border-width: 3px !important;
    }
    
    .loading-text {
        font-size: 14px !important;
    }
}

/* ===== PROPERTY CARD LOADING ===== */
.property-card.loading {
    /* Card loading state */
    opacity: 0.6 !important;
    pointer-events: none !important;
    position: relative !important;
}

.property-card.loading::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(243, 159, 27, 0.1), 
        transparent) !important;
    animation: shimmer 1.5s infinite !important;
}

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

/* ===== MODERN SKELETON LOADING STATES (2025 BEST PRACTICE) ===== */
.loading-row {
    background: rgba(255, 255, 255, 0.02) !important;
}

.loading-cell {
    padding: 20px !important;
    border: none !important;
}

.table-loading-content {
    /* Skeleton screen approach */
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* SKELETON PROPERTY ROWS */
.skeleton-property-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px !important;
    animation: skeleton-pulse 1.5s ease-in-out infinite !important;
}

.skeleton-title {
    width: 40% !important;
    height: 16px !important;
    background: linear-gradient(90deg, 
        rgba(243, 159, 27, 0.1) 0%, 
        rgba(243, 159, 27, 0.2) 50%, 
        rgba(243, 159, 27, 0.1) 100%) !important;
    border-radius: 4px !important;
    animation: skeleton-shimmer 2s ease-in-out infinite !important;
}

.skeleton-price {
    width: 20% !important;
    height: 16px !important;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 100%) !important;
    border-radius: 4px !important;
    animation: skeleton-shimmer 2s ease-in-out infinite 0.2s !important;
}

.skeleton-area {
    width: 15% !important;
    height: 16px !important;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 100%) !important;
    border-radius: 4px !important;
    animation: skeleton-shimmer 2s ease-in-out infinite 0.4s !important;
}

.skeleton-actions {
    width: 25% !important;
    height: 32px !important;
    background: linear-gradient(90deg, 
        rgba(243, 159, 27, 0.08) 0%, 
        rgba(243, 159, 27, 0.15) 50%, 
        rgba(243, 159, 27, 0.08) 100%) !important;
    border-radius: 6px !important;
    animation: skeleton-shimmer 2s ease-in-out infinite 0.6s !important;
}

.loading-spinner-small {
    width: 24px !important;
    height: 24px !important;
    border: 3px solid rgba(243, 159, 27, 0.2) !important;
    border-top: 3px solid #F39F1B !important;
    border-radius: 50% !important;
    animation: loadingSpin 1s linear infinite !important;
}

.loading-text-small {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    animation: loadingPulse 2s ease-in-out infinite !important;
}

/* ===== HARMONIOUS TICKER LOADING ===== */
.live-ticker.loading {
    /* Subtle loading state - НЕ ЛОМАЕТ ДИЗАЙН */
    background: rgba(26, 26, 26, 0.9) !important;
    opacity: 0.9 !important;
}

.live-ticker.loading .ticker-content {
    /* Gentle loading animation */
    animation: gentleLoading 2s ease-in-out infinite !important;
    justify-content: center !important;
}

.live-ticker.loading::after {
    content: '⚡ Загрузка...' !important;
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(243, 159, 27, 0.7) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

@keyframes gentleLoading {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.7; }
}

/* ===== SKELETON ANIMATIONS (2025 BEST PRACTICE) ===== */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

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

/* ===== LAZY LOADING FOR PHOTOS ===== */
.photo-lazy-loading {
    /* Skeleton placeholder for photos */
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 100%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 2s ease-in-out infinite !important;
    border-radius: 8px !important;
    
    /* Photo placeholder dimensions */
    min-height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.photo-lazy-loading::after {
    content: '📷 Загрузка...' !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}