/* ========== TRESORIER - FIX SEZIONE ICONE CERCHI ========== */
/* File: section-icons-fix.css */
/* Fix per mantenere le icone delle sezioni sempre circolari */

/* 1. Fix principale per tutti gli icon containers */
.section-icon,
.category-icon,
.feature-icon-empowerment,
.contact-icon,
.empowerment-feature .feature-icon-empowerment {
    /* Forza dimensioni quadrate */
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    
    /* Mantieni sempre circolare */
    border-radius: 50% !important;
    
    /* Centra il contenuto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Previeni deformazioni */
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    
    /* Background e gradienti */
    background: linear-gradient(45deg, #ffd700, #ffed4e) !important;
    
    /* Emoji/testo centrato */
    font-size: 2rem !important;
    line-height: 1 !important;
    color: #0a0a0a !important;
    text-align: center !important;
    
    /* Anti-aliasing per emoji */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 2. Fix specifico per mobile */
@media (max-width: 768px) {
    .section-icon,
    .category-icon {
        /* Dimensioni leggermente ridotte su mobile ma sempre quadrate */
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        
        /* Font size proporzionale */
        font-size: 1.6rem !important;
    }
    
    .feature-icon-empowerment,
    .contact-icon {
        /* Mantieni dimensioni normali per questi */
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        
        font-size: 1.4rem !important;
    }
}

/* 3. Fix per mobile extra small */
@media (max-width: 480px) {
    .section-icon,
    .category-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        
        font-size: 1.5rem !important;
    }
    
    .feature-icon-empowerment,
    .contact-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        
        font-size: 1.3rem !important;
    }
}

/* 4. Fix per container che potrebbero deformare le icone */
.privacy-section h2,
.terms-section h2,
.faq-category .category-header,
.empowerment-feature,
.contact-item {
    /* Assicura che i flex container non deformino le icone */
    align-items: center !important;
}

/* 5. Spacing corretto intorno alle icone */
.privacy-section h2 .section-icon,
.terms-section h2 .section-icon {
    margin-right: 1rem !important;
    margin-bottom: 0 !important;
}

.category-header .category-icon {
    margin-right: 1rem !important;
    margin-bottom: 0 !important;
}

/* 6. Fix per layout flex che potrebbero causare stretching */
.category-header,
.privacy-section h2,
.terms-section h2 {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* Assicura che il testo non forzi il resize dell'icona */
.category-header h2,
.privacy-section h2,
.terms-section h2 {
    flex: 1 !important;
    margin: 0 !important;
}

/* 7. Fix per prevenire overflow che causa deformazioni */
.section-icon,
.category-icon {
    overflow: hidden !important;
    position: relative !important;
}

/* 8. Aspect ratio lock (supporto moderno) */
@supports (aspect-ratio: 1) {
    .section-icon,
    .category-icon,
    .feature-icon-empowerment,
    .contact-icon {
        aspect-ratio: 1 !important;
    }
}

/* 9. Fix per iOS Safari che a volte deforma i cerchi */
@supports (-webkit-touch-callout: none) {
    .section-icon,
    .category-icon,
    .feature-icon-empowerment,
    .contact-icon {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
}

/* 10. Fix per prevenire text scaling che deforma il container */
.section-icon,
.category-icon,
.feature-icon-empowerment,
.contact-icon {
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
}

/* 11. Debug helper - decommenta per vedere i bordi durante il debug */
/*
.section-icon,
.category-icon {
    border: 2px solid red !important;
    box-shadow: 0 0 0 1px blue inset !important;
}
*/

/* 12. Override specifico per mobile.css se necessario */
@media (max-width: 768px) {
    /* Forza override delle regole mobile.css esistenti */
    .privacy-section .section-icon,
    .terms-section .section-icon,
    .faq-category .category-icon {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        flex-shrink: 0 !important;
    }
    
    /* Header layout su mobile */
    .category-header,
    .privacy-section h2,
    .terms-section h2 {
        flex-direction: row !important; /* Mantieni orizzontale */
        align-items: center !important;
        gap: 1rem !important;
        text-align: left !important;
    }
}

/* 13. Fix per very small screens */
@media (max-width: 320px) {
    .section-icon,
    .category-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.4rem !important;
    }
}

/* FIX PER TITOLI PER EVITARE CHE ESCANO DALLO SCHERMO */
/* ========== TRESORIER - FIX OVERFLOW TESTO ========== */
/* File: text-overflow-fix.css */
/* Fix per evitare che i titoli escano dai container */

/* 1. Fix per i titoli delle sezioni privacy/termini */
.privacy-section h2,
.terms-section h2 {
    /* Container flessibile */
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
    
    /* Gestione overflow */
    overflow: hidden !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Il testo deve occupare lo spazio rimanente */
.privacy-section h2,
.terms-section h2 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin: 0 0 1.5rem 0 !important;
}

/* 2. Mobile: riduci dimensioni font e spazi */
@media (max-width: 768px) {
    .privacy-section h2,
    .terms-section h2 {
        font-size: 1.55rem !important; /* Ridotto da 2rem */
        line-height: 1.15 !important;
        gap: 0.75rem !important;
        margin-bottom: 1.2rem !important;
    }
    
    /* Assicura che il container non deborda */
    .privacy-section,
    .terms-section {
        padding: 1.5rem 1rem !important; /* Ridotto padding laterale */
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* 3. Mobile small: font ancora più piccolo */
@media (max-width: 480px) {
    .privacy-section h2,
    .terms-section h2 {
        font-size: 1.35rem !important; /* Ulteriormente ridotto */
        line-height: 1.1 !important;
        gap: 0.6rem !important;
    }
    
    .privacy-section,
    .terms-section {
        padding: 1.2rem 0.8rem !important;
    }
}

/* 4. Extra small screens */
@media (max-width: 320px) {
    .privacy-section h2,
    .terms-section h2 {
        font-size: 1.2rem !important;
        line-height: 1.1 !important;
        gap: 0.5rem !important;
    }
    
    .privacy-section,
    .terms-section {
        padding: 1rem 0.6rem !important;
    }
}

/* 5. Fix per titoli molto lunghi - layout verticale se necessario */
@media (max-width: 480px) {
    .privacy-section h2,
    .terms-section h2 {
        /* Se il testo è troppo lungo, impila verticalmente */
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.8rem !important;
    }
    
    .privacy-section h2 .section-icon,
    .terms-section h2 .section-icon {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* 6. Fix per FAQ page se ha lo stesso problema */
.category-header h2 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 768px) {
    .category-header h2 {
        font-size: 1.55rem !important;
    }
}

@media (max-width: 480px) {
    .category-header h2 {
        font-size: 1.35rem !important;
    }
    
    /* Layout verticale per FAQ su schermi piccoli */
    .category-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.7rem !important;
    }
}

/* 7. Fix generale per tutti i container delle sezioni */
.privacy-section,
.terms-section,
.faq-category {
    /* Assicura che non ci siano overflow orizzontali */
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* 8. Fix per il wrapper principale */
.content-wrapper {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .content-wrapper {
        padding: 0 0.5rem !important;
    }
}

/* 9. Prevenzione overflow per testi lunghi */
.privacy-section h3,
.terms-section h3,
.privacy-section p,
.terms-section p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* 10. Layout alternativo per schermi molto piccoli */
@media (max-width: 360px) {
    /* Su schermi molto piccoli, icone più piccole per dare più spazio al testo */
    .privacy-section h2 .section-icon,
    .terms-section h2 .section-icon,
    .category-header .category-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 1.2rem !important;
    }
    
    .privacy-section h2,
    .terms-section h2,
    .category-header h2 {
        font-size: 1.1rem !important;
        flex-direction: row !important; /* Torna orizzontale con icone più piccole */
        align-items: center !important;
        text-align: left !important;
    }
}

/* 11. Debug helper - decommenta per vedere i contenitori */
/*
.privacy-section,
.terms-section {
    border: 1px solid red !important;
}

.privacy-section h2,
.terms-section h2 {
    border: 1px solid blue !important;
}
*/