/*************** SVG INTERACTION FIX ******************/

/* Le immagini NON devono bloccare i click */
svg image {
    pointer-events: none !important;
}

/* Parti cliccabili */
.section {
    cursor: pointer;
    opacity: 1 !important;
    transition: opacity 0.25s ease, transform .2s ease;
    filter: drop-shadow(2px 4px 6px grey);
}

    /* Effetto hover */
    .section:hover {
        opacity: 1 !important;
        /*transform: scale(1.02);*/
    }

/* Quando clicchi una parte, le altre diventano trasparenti */
.opaco {
    opacity: 0.18 !important;
}

/* La parte cliccata rimane completamente visibile */
.section.active {
    opacity: 1 !important;
/*    transform: scale(1.03);*/
    filter: drop-shadow(4px 6px 10px rgba(0,0,0,0.35));
}

/*************** ALTRI EFFETTI BASE (mantenuti dal tuo CSS) ***************/

.hovered {
    opacity: 0.4;
}

.shadow {
    filter: drop-shadow(2px 4px 6px grey);
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

svg {
    max-width: 100%;
    height: auto;
}

/*************** LISTA COMPETENZE E AREE ***************/

/* --- AREA (contenitore del testo) --- */
.area {
    background: white;
    border-radius: 40px 100px 40px 100px; /* effetto "petalo" */
    padding: 30px;
    border: 3px solid transparent;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

    /* PETALO PIÙ TONDEGGIANTE MOUSEOVER */
    .area:hover {
        transform: scale(1.02);
    }

/* COLORI AUTOMATICI PER AREA SELEZIONATA */
.area-1-color {
    border-color: #68959b;
    background: #e6f3f4;
}

.area-2-color {
    border-color: #fb6229;
    background: #ffe6dc;
}

.area-3-color {
    border-color: #93c154;
    background: #f0f8e3;
}

/* LISTA DEI SINGOLI ITEM — COLORI GIÀ PRESENTI */
.item-1 {
    background-color: #A9C7CB; /* blu/verde soft */
}

.item-2 {
    background-color: #FFB79A; /* verde soft */
}

.item-3 {
    background-color: #C9E2B0; /* arancione soft */
}

/* Testo area non selezionata */
.not-selected .level-description,
.not-selected .level-radio,
.not-selected .level-abilities {
    --bs-text-opacity: 0.58;
    color: #6c757d !important;
}

/* Testo area selezionata */
.selected .level-description {
    color: midnightblue;
    background-color: #ffffdd;
}

.selected .level-radio,
.selected .level-abilities {
    color: black;
    background-color: #ffffdd;
}
/*************** LEVELS PROGRESS LINE – RICREAZIONE COLORI ***************/

/* AREA 1 — Colore base #68959b */
.level-line-1-1 {
    background: linear-gradient(to right, #68959b47, #68959b61);
}

.level-line-1-2 {
    background: linear-gradient(to right, #68959b61, #68959b66);
}

.level-line-1-3 {
    background: linear-gradient(to right, #68959b66, #68959b80);
}

.level-line-1-4 {
    background: linear-gradient(to right, #68959b80, #68959b99);
}

.level-line-1-5 {
    background: linear-gradient(to right, #68959b99, #68959bb3);
}

.level-line-1-6 {
    background: linear-gradient(to right, #68959bb3, #68959bcc);
}

.level-line-1-7 {
    background: linear-gradient(to right, #68959bcc, #68959be6);
}

.level-line-1-8 {
    background: linear-gradient(to right, #68959be6, #68959b);
}

/* AREA 2 — Colore base #fb6229 */
.level-line-2-1 {
    background: linear-gradient(to right, #fb622947, #fb622961);
}

.level-line-2-2 {
    background: linear-gradient(to right, #fb622961, #fb622966);
}

.level-line-2-3 {
    background: linear-gradient(to right, #fb622966, #fb622980);
}

.level-line-2-4 {
    background: linear-gradient(to right, #fb622980, #fb622999);
}

.level-line-2-5 {
    background: linear-gradient(to right, #fb622999, #fb6229b3);
}

.level-line-2-6 {
    background: linear-gradient(to right, #fb6229b3, #fb6229cc);
}

.level-line-2-7 {
    background: linear-gradient(to right, #fb6229cc, #fb6229e6);
}

.level-line-2-8 {
    background: linear-gradient(to right, #fb6229e6, #fb6229);
}

/* AREA 3 — Colore base #93c154 */
.level-line-3-1 {
    background: linear-gradient(to right, #93c15447, #93c15461);
}

.level-line-3-2 {
    background: linear-gradient(to right, #93c15461, #93c15466);
}

.level-line-3-3 {
    background: linear-gradient(to right, #93c15466, #93c15480);
}

.level-line-3-4 {
    background: linear-gradient(to right, #93c15480, #93c15499);
}

.level-line-3-5 {
    background: linear-gradient(to right, #93c15499, #93c154b3);
}

.level-line-3-6 {
    background: linear-gradient(to right, #93c154b3, #93c154cc);
}

.level-line-3-7 {
    background: linear-gradient(to right, #93c154cc, #93c154e6);
}

.level-line-3-8 {
    background: linear-gradient(to right, #93c154e6, #93c154);
}
/*************** LEVEL BACKGROUNDS – NUOVA PALETTE ***************/

/* Trasparenza progressiva come nel CSS originale */

/* AREA 1 — #68959b */
/* AREA 1 — #68959b */
.level-1-1 {
    background-color: #68959b1A;
}

.level-2-1 {
    background-color: #68959b33;
}

.level-3-1 {
    background-color: #68959b4D;
}

.level-4-1 {
    background-color: #68959b66;
}

.level-5-1 {
    background-color: #68959b80;
}

.level-6-1 {
    background-color: #68959b99;
}

.level-7-1 {
    background-color: #68959bB3;
}

.level-8-1 {
    background-color: #68959bCC;
}

/* AREA 2 — #fb6229 */
/* AREA 2 — #fb6229 */
.level-1-2 {
    background-color: #fb62291A;
}

.level-2-2 {
    background-color: #fb622933;
}

.level-3-2 {
    background-color: #fb62294D;
}

.level-4-2 {
    background-color: #fb622966;
}

.level-5-2 {
    background-color: #fb622980;
}

.level-6-2 {
    background-color: #fb622999;
}

.level-7-2 {
    background-color: #fb6229B3;
}

.level-8-2 {
    background-color: #fb6229CC;
}


/* AREA 3 — #93c154 */
/* AREA 3 — #93c154 */
.level-1-3 {
    background-color: #93c1541A;
}

.level-2-3 {
    background-color: #93c15433;
}

.level-3-3 {
    background-color: #93c1544D;
}

.level-4-3 {
    background-color: #93c15466;
}

.level-5-3 {
    background-color: #93c15480;
}

.level-6-3 {
    background-color: #93c15499;
}

.level-7-3 {
    background-color: #93c154B3;
}

.level-8-3 {
    background-color: #93c154CC;
}


.hr-1 {
    height: 2px !important;
    color: #68959b;
}

.hr-2 {
    height: 2px !important;
    color: #fb6229;
}

.hr-3 {
    height: 2px !important;
    color: #93c154;
}
.area-color-1 {
    color: #68959b;
}

.area-color-2 {
    color: #fb6229;
}

.area-color-3 {
    color: #93c154;
}

.area-background-color-1 {
    background-color: white;
}

.area-background-color-2 {
    background-color: white;
}

.area-background-color-3 {
    background-color: white;
}
.other {
    opacity: 0.2;
}

.current {
    opacity: 1;
}

/*************** Style Petalo ***************/
/* PETALO GENERALE */
/* ----- PETALO ----- */
.petal {
    margin-bottom: 5px;
    border-width: 4px !important;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

    .petal:hover {
        transform: scale(1.01);
    }

/* HEADER */
.petal-header {
    background: transparent !important;
    padding: 1.2rem 1.8rem !important;
}

/* BODY */
.petal-body {
    padding: 1.8rem;
    border-radius: 0 0 40px 40px;
}

/* ----- LEVELS ORIZZONTALI ORDINATI ----- */
.levels-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 10px;
}

/* CARD LIVELLO (petalo piccolo) */
.level-card {
    min-width: 120px;
    padding: 1rem;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

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

/* PROGRESS LINEA */
.progress-petal {
    height: 8px;
    background: rgba(255,255,255,0.3);
    border-radius: 20px;
    overflow: hidden;
}

.progress-fill {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.no-shadow {
    box-shadow: none !important;
}

.accordion-button:focus,
.accordion-button:active,
.accordion-button:not(.collapsed) {
    color: inherit !important; /* testo normale */
    background-color: inherit !important; /* niente blu */
    box-shadow: none !important; /* niente bordo luminoso */
}