/* =================================================================
   FILE: assets/css/premium.css
   DESCRIZIONE: Stili esclusivi per Utenti Premium (Gold/VIP)
   ================================================================= */

:root {
    --premium-gold: #FFD700;
    --premium-gold-dark: #DAA520;
    --premium-gold-light: #FFF8DC;
    --premium-gradient: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    --premium-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

/* ============================
   1. AVATAR PREMIUM (Contorno Dorato + Glow)
   ============================ */

/* Classe da aggiungere ai tag <img> dell'avatar (Header, Profilo, Commenti) */
.premium-glow {
    border-color: var(--premium-gold) !important;
    box-shadow: var(--premium-shadow), inset 0 0 10px var(--premium-gold) !important;
    animation: goldPulse 3s infinite alternate;
    position: relative;
    z-index: 5;
}

/* Animazione pulsazione dorata */
@keyframes goldPulse {
    0% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
        border-color: #DAA520;
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 5px #fff;
        border-color: #FFD700;
    }
}

/* Specifico per l'avatar grande nella pagina Profilo */
.profile-avatar.premium-glow {
    border-width: 4px !important;
}

/* Specifico per l'avatar piccolo nell'Header */
.profile-avatar-container .premium-glow {
    border-width: 2px !important;
}

/* ============================
   2. TESTO PREMIUM (Nome Utente)
   ============================ */

/* Classe da aggiungere agli <span> o <strong> del nome utente */
.premium-text {
    background: var(--premium-gradient);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
    display: inline-block;
    animation: shineText 3s linear infinite;
    text-shadow: none !important; /* Rimuove ombre standard per far risaltare il gradiente */
}

/* Animazione luccichio testo */
@keyframes shineText {
    to {
        background-position: 200% center;
    }
}

/* Aggiunge una coroncina prima del nome (Opzionale, usa la classe .premium-crown sul container del nome) */
.premium-crown-icon::before {
    content: '\f521'; /* Icona corona FontAwesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--premium-gold);
    margin-right: 6px;
    font-size: 0.9em;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* ============================
   3. BADGE & TAGS
   ============================ */

/* Badge "PREMIUM" o "VIP" */
.badge-premium {
    background: var(--premium-gradient) !important;
    color: #1a1a1a !important; /* Testo scuro per contrasto con l'oro */
    font-weight: 900 !important;
    border: 1px solid var(--premium-gold-dark) !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-premium i {
    color: #000 !important; /* Icona nera */
}

/* ============================
   4. COMMENTI & CARD (Bordi Dorati)
   ============================ */

/* Bordo dorato sui commenti degli utenti Premium */
.comment-item.is-premium {
    border-left: 3px solid var(--premium-gold) !important;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%) !important;
}

/* ============================
   5. UTENTI ONLINE (Lista)
   ============================ */

/* Stile per la riga nella tabella utenti online */
#users-table tr.user-premium-row td {
    color: var(--premium-gold);
}

#users-table tr.user-premium-row .user-avatar {
    border-color: var(--premium-gold) !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* ============================
   6. CARD ANIME (Opzionale: Bordo dorato su hover per Admin/Premium)
   ============================ */
/* Se vuoi che l'interfaccia generale per l'utente Premium sia più "ricca" */
body.is-premium-user .anime-card:hover {
    border-color: var(--premium-gold) !important;
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.25) !important;
}

/* ============================
   7. HEADER BAR (Opzionale)
   ============================ */
/* Aggiunge una linea dorata sottile sotto l'header per gli utenti premium */
body.is-premium-user .header {
    border-bottom: 1px solid var(--premium-gold) !important;
}