/* 
 * LOADER UNIFICATI - Dice'n'Roll
 * Stile uniforme per tutti gli indicatori di caricamento
 * Icona: FontAwesome fa-circle-notch (moderno e minimale)
 */

/* ========================================
   BASE LOADER COMPONENT
   ======================================== */

.loader-unified {
    text-align: center;
    padding: 15px;
    color: #666;
    font-size: 14px;
}

.loader-unified i {
    margin-right: 8px;
    color: var(--colore1, #2563eb);
    font-size: 16px;
}

/* ========================================
   VARIANTI DI LAYOUT
   ======================================== */

/* Loader inline (per contenuti piccoli) */
.loader-unified.inline {
    display: inline-block;
    padding: 5px 10px;
    font-size: 13px;
}

/* Loader con sfondo */
.loader-unified.with-background {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

/* Loader a schermo intero (overlay) */
.loader-unified.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: #fff;
    font-size: 16px;
    padding: 0;
}

.loader-unified.fullscreen i {
    color: #fff;
    font-size: 24px;
    margin-right: 12px;
}

/* Loader posizionato in basso (per infinite scroll) */
.loader-unified.bottom-fixed {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 12px 24px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.loader-unified.bottom-fixed i {
    color: #fff;
}

/* ========================================
   VARIANTI DI DIMENSIONE
   ======================================== */

.loader-unified.small {
    font-size: 12px;
    padding: 8px;
}

.loader-unified.small i {
    font-size: 14px;
    margin-right: 6px;
}

.loader-unified.large {
    font-size: 18px;
    padding: 20px;
}

.loader-unified.large i {
    font-size: 24px;
    margin-right: 12px;
}

/* ========================================
   ANIMAZIONE PERSONALIZZATA
   ======================================== */

@keyframes loader-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loader-unified {
    animation: loader-fade-in 0.3s ease-out;
}

/* ========================================
   CLASSI DI UTILITÀ
   ======================================== */

.loader-hidden {
    display: none !important;
}

/* Wrapper per centrare il loader */
.loader-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100px;
}

/* ========================================
   OVERRIDE PER RETROCOMPATIBILITÀ
   ======================================== */

/* Chat loader - usa il nuovo stile unificato */
.chat-loader {
    text-align: center;
    padding: 15px;
    color: #666;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    margin-bottom: 15px;
}

.chat-loader i {
    margin-right: 8px;
    color: var(--colore1, #2563eb);
    font-size: 16px;
}

.chat-loader.nascosto {
    display: none;
}

/* Loading indicator per infinite scroll */
.loading-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 12px 24px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    text-align: center;
    animation: loader-fade-in 0.3s ease-out;
}

.loading-indicator i {
    margin-right: 8px;
    color: #fff;
    font-size: 16px;
}

/* ========================================
   UI LOADER FULLSCREEN (nuovo stile)
   ======================================== */

#ui-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#ui-loader .ui-loader-inner {
    text-align: center;
    color: #fff;
    font-size: 16px;
}

#ui-loader .ui-loader-inner i {
    font-size: 48px;
    color: #fff;
    display: block;
    margin-bottom: 15px;
}

/* Mantieni la vecchia struttura per retrocompatibilità */
.loadingio-spinner-rolling-r18udnu6bi {
    width: 200px;
    height: 200px;
    display: inline-block;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .loader-unified {
        font-size: 13px;
        padding: 12px;
    }
    
    .loader-unified.large {
        font-size: 16px;
        padding: 16px;
    }
    
    .loading-indicator {
        bottom: 10px;
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    .loader-unified:not(.fullscreen):not(.bottom-fixed) {
        color: #aaa;
    }
    
    .loader-unified.with-background {
        background: rgba(255, 255, 255, 0.05);
    }
}