@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

:root {
    --clr-bg: #f5f5f5;
    --clr-text: #1a1a1a;
    --clr-border: #e0e0e0;
    
    --items: 16;
    --radius: 25vw;
    --duration: 400ms;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.outer {
    font-family: "Instrument Sans", sans-serif !important;
    transform: scale(0.8);
    transform-origin: center center;
}

.inside-outer {
    min-height: 70svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--clr-text);
    padding: 1rem;
    overflow: hidden;
}

.main-title {
    font-family: "Instrument Sans", sans-serif !important;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--clr-text);
    text-align: center;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.cards {
    --base-rotation: 0deg;
    --full-circle: 360deg;

    --cards-container-size: calc(var(--radius) * 2);
    --thumb-size: 60px;
    --image-size: calc(var(--radius));
    --image-y: 0%;
    --labels-offset: calc(var(--radius) * -1);
    /* VARIABILI AGGIORNATE: Rimosso --title-top e aggiornato posizionamento info */
    --info-top: calc(var(--image-size) * 1.05);
    --info-width: 100%;

    position: fixed;
    inset: 0;
    margin: auto;
    width: var(--cards-container-size);
    height: var(--cards-container-size);
    aspect-ratio: 1;
    border-radius: 50%;
    perspective: 1200px;
    transition: transform 0.5s ease-in-out;
    list-style: none;
}

@media (min-width: 800px) {
    .cards {
        --radius: 20vw;
        --thumb-size: 60px;
    }
}
@media (min-width: 1200px) {
    .cards {
        --radius: 20vw;
        --thumb-size: 70px;
        --image-y: -10%;
        --info-width: min(100% - 2rem, 70%);
        --info-top: calc(var(--image-size) * 1.5);
    }
}

@media (max-width: 992px) {
    .outer {
        /* This will hide the entire World Cup cities wheel component on smaller screens */
        display: none !important; 
    }
}

.cards li {
    position: absolute;
    inset: 0;
    transform-origin: center;
    display: grid;
    place-content: center;
    transform: rotate(calc(var(--i) * 360deg / var(--items)));
    pointer-events: none;
}

.cards li > label {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: translateY(var(--labels-offset));
    width: var(--thumb-size);
    height: var(--thumb-size);
    cursor: pointer;
    pointer-events: initial;
    transition: transform var(--duration) ease, opacity var(--duration) ease, background-color var(--duration) ease;
    
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--city-color);
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.cards li > label .city-name {
    font-family: 'Poppins', sans-serif;
    font-size: calc(var(--thumb-size) * 0.18);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.cards:has(label:hover) label {
    transform: translateY(var(--labels-offset)) scale(0.9);
    opacity: 0.7;
}

.cards li > label:hover {
    transform: translateY(var(--labels-offset)) scale(1.1) !important;
    opacity: 1 !important;
}

li:has(input:checked) > label {
   transform: translateY(var(--labels-offset)) scale(1.05);
   opacity: 1;
   z-index: 100;
   box-shadow: 0 0 0 4px var(--clr-bg), 0 0 0 6px var(--city-color);
}

.cards > li > img {
    width: var(--image-size);
    height: var(--image-size);
    object-fit: cover;
    border-radius: 1rem;
    z-index: 52;
    transform: translateY(var(--image-y)) scale(var(--item-scale, 0.5));
    transition: opacity var(--duration) ease, transform var(--duration) ease;
    transition-delay: var(--item-delay, 0ms);
    pointer-events: none;
    opacity: var(--item-opacity, 0);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* NUOVE REGOLE PER POSIZIONARE E STILIZZARE IL TITOLO AL POSTO DELLA DESCRIZIONE */
.cards > li > .info-content {
    position: absolute;
    left: 50%;
    text-align: center;
    transform: translate(-50%, 0);
    z-index: 55;
    /* Usa le vecchie variabili di info per posizionare il titolo */
    top: var(--info-top);
    opacity: var(--info-opacity, 0);
    translate: 0 var(--info-y, 30px);
    transition: opacity var(--duration) ease, translate var(--duration) ease;
    /* Adottiamo il ritardo della vecchia descrizione */
    transition-delay: var(--info-delay, 0ms); 
    width: var(--info-width);
    padding: 0 1rem;
}

.cards > li > .info-content .stadium-title {
    /* Mantiene lo stile originale del titolo h2 */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 4vw, 2rem);
    color: var(--city-color);
    display: block;
}
/* FINE NUOVE REGOLE */


li:has(input:checked) {
    --item-scale: 1;
    --item-opacity: 1;
    --item-delay: calc(var(--duration) * 1);
    /* VARIABILI AGGIORNATE per mostrare solo l'info-content */
    --title-opacity: 0;
    --title-y: 0;
    --title-delay: 0ms;
    --info-opacity: 1;
    --info-y: 0;
    --info-delay: calc(var(--duration) * 1.2); /* Ritardo ridotto per farlo apparire prima */
    z-index: 99;
}

.cards:has(input:checked) {
    transform: rotate(calc(var(--base-rotation) - (var(--index) * var(--full-circle) / var(--items))));
}

.cards:has(input#item-1:checked) { --index: 0; }
.cards:has(input#item-2:checked) { --index: 1; }
.cards:has(input#item-3:checked) { --index: 2; }
.cards:has(input#item-4:checked) { --index: 3; }
.cards:has(input#item-5:checked) { --index: 4; }
.cards:has(input#item-6:checked) { --index: 5; }
.cards:has(input#item-7:checked) { --index: 6; }
.cards:has(input#item-8:checked) { --index: 7; }
.cards:has(input#item-9:checked) { --index: 8; }
.cards:has(input#item-10:checked) { --index: 9; }
.cards:has(input#item-11:checked) { --index: 10; }
.cards:has(input#item-12:checked) { --index: 11; }
.cards:has(input#item-13:checked) { --index: 12; }
.cards:has(input#item-14:checked) { --index: 13; }
.cards:has(input#item-15:checked) { --index: 14; }
.cards:has(input#item-16:checked) { --index: 15; }