.carousel-fade .carousel-item {
        transition-duration: 1.5s; /* Rende la sfumatura più lenta e piacevole */
    }
    .display-4 {
        text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Aggiunge un'ombra al testo per farlo risaltare ancora di più */
    }

.carousel-item img {
        filter: brightness(0.8);
        /* Questa riga sposta l'immagine: 
           il primo valore è l'asse X (50% = centro)
           il secondo è l'asse Y (top = aggancia l'alto della foto) */
        object-position: 20% 20%; 
        
        /* Se 'top' la abbassa troppo, puoi usare una percentuale specifica, ad esempio:
           object-position: 50% 20%; 
        */
    }   

/* =========================================
   PALETTE COLORI JUST PLAY
   ========================================= */
:root {
    --jp-blue: #3d415a;    /* Blu Notte Logo */
    --jp-gold: #b39d7d;    /* Oro Logo */
    --jp-light: #f8f9fa;   /* Grigio chiarissimo sfondo */
    --jp-white: #ffffff;
}

/* =========================================
   STILI GENERALI
   ========================================= */
body {
    background-color: var(--jp-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--jp-blue);
}

h1, h2, h3, h4, h5 {
    color: var(--jp-blue);
    font-weight: 700;
}

/* =========================================
   NAVBAR (HEADER)
   ========================================= */
.navbar {
    background-color: var(--jp-white) !important;
    border-bottom: 3px solid var(--jp-blue);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* Logo */
.navbar-brand img {
    transition: transform 0.3s ease;
}

/* Voci di Menu */
.navbar .navbar-nav .nav-link {
    color: var(--jp-blue) !important; /* Forza il Blu Notte */
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1.2rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Effetto Hover (Passaggio Mouse) */
.navbar .navbar-nav .nav-link:hover {
    color: var(--jp-gold) !important; /* Cambia in Oro */
}

/* Voce Attiva */
.navbar .navbar-nav .nav-link.active {
    color: var(--jp-gold) !important;
}

/* Hamburger Menu (Mobile) */
.navbar-toggler {
    border-color: var(--jp-blue);
}

/* =========================================
   BOTTONI
   ========================================= */
.btn-primary {
    background-color: var(--jp-blue) !important;
    border-color: var(--jp-blue) !important;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #2a2d3f !important; /* Un blu leggermente più scuro */
}

.btn-outline-primary {
    color: var(--jp-blue) !important;
    border-color: var(--jp-blue) !important;
}

.btn-outline-primary:hover {
    background-color: var(--jp-blue) !important;
    color: white !important;
}

/* =========================================
   COMPONENTI (Badge, Stelle, Card)
   ========================================= */
/* Stelle e icone Oro */
.text-warning, .bi-star-fill {
    color: var(--jp-gold) !important;
}

/* Badge Voti */
.badge.bg-primary {
    background-color: var(--jp-gold) !important;
    color: white;
}

/* Card Società */
.card {
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-radius: 10px;
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

/* Score Badges */
.score-badge { 
    font-weight: bold; 
    padding: 5px 12px; 
    border-radius: 6px; 
}
.score-high { background-color: #d1e7dd; color: #0f5132; }
.score-med { background-color: #fff3cd; color: #664d03; }
.score-low { background-color: #f8d7da; color: #842029; }

/* =========================================
   FOOTER
   ========================================= */
footer {
    background-color: var(--jp-blue) !important;
    color: white;
}

footer hr {
    border-top: 1px solid var(--jp-gold);
    opacity: 0.5;
}

.star-group {
        display: flex;
        flex-direction: row-reverse; /* Inverte l'ordine per far funzionare il selettore CSS ~ */
        justify-content: flex-end;
    }
    
    .star-group input { display: none; } /* Nasconde il pallino del radio button */

    .star-group label {
        cursor: pointer;
        width: 30px;
        height: 30px;
        color: #ddd; /* Colore stella vuota (grigio) */
        transition: color 0.2s ease-in-out;
    }

    /* La stella SVG dentro la label */
    .star-group label svg {
        width: 100%;
        height: 100%;
        fill: currentColor; /* Usa il colore definito sopra */
    }

    /* Colora di ORO la stella selezionata e tutte quelle precedenti */
    .star-group input:checked ~ label,
    .star-group label:hover,
    .star-group label:hover ~ label {
        color: #d4af37 !important;
    }

    .card-rating {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 0.2s;
    }
    .card-rating:hover { border-color: #d4af37; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
	
/* Stile base dei tasti sport */
.btn-sport {
    border: 1px solid #ddd;
    color: #555;
    background-color: #fff;
    padding: 8px 20px;
    transition: all 0.3s ease;
}

/* Effetto al passaggio del mouse */
.btn-sport:hover {
    background-color: #f8f9fa;
    color: #000;
}

/* STILE TASTO ATTIVO (Sostituisce il blu) */
.btn-sport.active {
    background-color: #333 !important; /* Colore di sfondo (Grigio scuro/Nero) */
    border-color: #333 !important;     /* Colore del bordo */
    color: #fff !important;            /* Colore del testo */
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Effetto scalata per il podio (già presente) */
.transition-hover { transition: transform 0.3s ease; }
@media (min-width: 768px) {
    .transition-hover:hover { transform: translateY(-10px); }
}