/* ==========================================================================
   1. RESET E IMPOSTAZIONI GENERALI
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

header .BG { display: none; }

.contenuti .path { display: none; }

.contenuti ul, 
.contenuti ul li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.text-wrapper {
    padding: 0.5rem;
    margin: 0 auto;
    max-width: 65rem;
    text-align: justify;
}

.separator {
    height: 1px;
    background: linear-gradient(to right, transparent, #ccc, transparent);
    margin: 20px auto;
    width: 80%;
}
/* ==========================================================================
   2. SEZIONI DI PRESENTAZIONE (PRESENTAZIONE, PROFILE, WHY)
   ========================================================================== */
/* Presentazione Generale */
#presentazione-generale .img-boxwall-all-wrapper { padding: 1rem; margin: 0rem auto; list-style: none; }
#presentazione-generale .img-boxwall-all-wrapper ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; }
#presentazione-generale .img-boxwall-all-wrapper ul li { padding: 0.5rem; }
#presentazione-generale .img-boxwall-all-wrapper .img-wrapper { max-width: 440px; border-radius: 0px; overflow: hidden; }

/* Company Profile */
#company-profile .img-wrapper { width: 100%; max-width: 35rem; margin: 0 auto; }
#company-profile p { margin-bottom: 1rem; }

/* Sezione Why (Perché sceglierci) */
#why { margin-top: 2rem; }
#why ul { display: flex; flex-wrap: wrap; justify-content: center; }
#why ul li { margin: 0 auto 2rem; }
#why .img-wrapper { width: 100%; max-width: 300px; border-radius: 0px; overflow: hidden; margin: 0 auto; }
#why .text-wrapper { text-align: center; padding-top: 0; padding-bottom: 0; line-height: 125%; }


/* ==========================================================================
   BOX COLORATI (DARK & GREY WRAPPERS)
   ========================================================================== */
/* Container della tabella per gestire lo scroll su mobile */
.table-container {
    margin: 20px 0;
    overflow-x: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    font-size: 15px;
    color: #333;
}

.modern-table thead tr {
    background-color: #f8faff;
    color: #444;
    text-align: left;
    font-weight: bold;
}

.modern-table th {
    padding: 18px 15px;
    border-bottom: 2px solid #edf2f7;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.modern-table td {
    padding: 15px;
    border-bottom: 1px solid #edf2f7;
    line-height: 1.6;
    vertical-align: top;
}

/* Colore distintivo per la prima colonna */
.modern-table td:first-child {
    font-weight: 700;
    color: #2d5af0;
    width: 25%;
}

/* Effetto hover sulla riga */
.modern-table tbody tr:hover {
    background-color: #fcfdfe;
    transition: background-color 0.2s ease;
}

/* Stile per i badge di avviso o note */
.badge-warning {
    display: inline-block;
    background-color: #fff4e5;
    color: #b76e00;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 8px;
    font-weight: 500;
}

.sub-text {
    display: block;
    font-size: 13px;
    color: #718096;
    margin-top: 4px;
}


/* ==========================================================================
   3. BOX COLORATI (DARK & GREY WRAPPERS)
   ========================================================================== */
/* Versione Dark */
.bg-dark-wrapper { margin: 2rem auto; background-color: #666; color: #fff; padding: 2rem; }
.bg-dark-wrapper div { margin: 0 auto 2rem; }
.bg-dark-wrapper div:last-of-type { margin-bottom: 0; }
.bg-dark-wrapper h3 { color: #fff; margin: 0 auto 0.5rem; }
.bg-dark-wrapper p { color: #fff; }

/* Versione Grey */
.bg-grey-wrapper { margin: 1rem auto; margin-top: 0; background-color: #f5f5f5; color: #666; padding: 1rem; }
.bg-grey-wrapper div { margin: 0 auto 1rem; }
.bg-grey-wrapper div:last-of-type { margin-bottom: 0; }
.bg-grey-wrapper h3 { color: #666; margin: 0 auto 0.5rem; }
.bg-grey-wrapper p { color: #666; }

/* ==========================================================================
   4. COMPONENTI MULTIMEDIALI (VIDEO & SLIDER)
   ========================================================================== */
/* Video Wrapper */
.video-wrapper { width: 100%; max-width: 800px; margin: 1rem auto 0; }
.video-wrapper iframe { width: 100%; height: 250px; box-sizing: border-box; }

/* Slider Immagini */
.slider-container { width: 100%; max-width: 800px; margin: auto; overflow: hidden; }
.slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.slider img { width: 100%; flex-shrink: 0; scroll-snap-align: start; object-fit: cover; }

/* ==========================================================================
   5. SISTEMA A CARDS E BOTTONI
   ========================================================================== */
/* Contenitore delle Cards */
.general-cards-wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    margin: 1rem auto; 
    justify-content: center; 
}

/* Card Base: Stile Moderno con sfondo grigio chiaro e testo #666 */
.general-cards-wrapper .card, 
.big-cards-wrapper .card { 
    max-width: 125px; 
    background-color: #f5f5f5; /* Grigio chiaro richiesto */
    color: #666;               /* Testo grigio #666 richiesto */
    padding: 0.5rem; 
    margin: 0.5rem; 
    box-sizing: border-box; 
    overflow: hidden; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0; /* Un bordo sottile per definire meglio la card */
    
    /* Transizione fluida per l'effetto moderno */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    cursor: pointer;
    text-align: center;
}

/* Assicura che tutto il testo interno (titoli, p, span) segua il colore #666 */
.card h3, .card h4, .card p, .card span, .card-text {
    color: #666 !important;
}

/* Effetto Hover: Ingrandimento + Ombra + Schiarimento leggero */
.general-cards-wrapper .card:hover, 
.big-cards-wrapper .card:hover { 
    transform: scale(1.02);           /* Ingrandimento fluido */
    box-shadow: 0 5px 8px rgba(0,0,0,0.1); /* Ombra più profonda */
    background-color: #ffffff;        /* La card "si accende" diventando bianca al passaggio */
    border-color: #ccc;
    z-index: 10;
}

/* Varianti dimensioni */
.big-cards-wrapper .card { 
    max-width: 200px; 
    padding-bottom: 0.75rem; 
}

/* Adattamento immagini interne alle card */
.card .img-wrapper { 
    max-width: 100%; 
    margin-bottom: 0.5rem;
    overflow: hidden;
}

/* Pulsanti interni alle card (se presenti) */
.card .btn-wrapper .button {
    background-color: #666;
    color: #fff !important; /* Testo bottone bianco per contrasto */
    padding: 0.5rem 1rem;
    font-size: 1rem;
    margin-top: 0.5rem;
}

/* ==========================================================================
   AGGIORNAMENTO SEZIONE INFO (IMMAGINE + PULSANTI)
   ========================================================================== */

.custom-info-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Allinea verticalmente al centro */
    justify-content: center;
    gap: 40px; /* Aumentato lo spazio tra immagine e pulsanti */
    margin: 2rem auto;
    max-width: 1000px; /* Allargato il contenitore totale per l'immagine */
    padding: 0 15px;
}

/* Lato Immagine: Ora molto più dominante */
.custom-info-section .image-side {
    flex: 1.6; /* Prende il doppio dello spazio rispetto ai pulsanti */
    min-width: 350px;
}

.custom-info-section .image-side img {
    width: 100%;
    height: auto;
    display: block;
}

/* Lato Pulsanti: Più stretto e compatto */
.custom-info-section .buttons-side {
    flex: 1.2; /* Ridotto il peso flex */
    min-width: 250px;
    max-width: 600px; /* Limita la larghezza massima dei pulsanti */
}

.card-container-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Pulsante Grigio Scuro con Hover Zoom */
.btn-custom-dark {
    display: block;
    background-color: #666; 
    color: #ffffff !important;
    padding: 12px 18px; /* Leggermente più compatti */
    text-decoration: none !important;
    font-weight: bold;
    font-size: 0.95rem; /* Testo leggermente più piccolo per stare su una riga */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    text-align: center; /* Testo centrato per un look più pulito */
}

.btn-custom-dark:hover {
    transform: scale(1.03); /* Zoom leggermente più accentuato */
    background-color: #444;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Gestione Mobile */
@media (max-width: 900px) {
    .custom-info-section {
        flex-direction: column;
    }
    .custom-info-section .buttons-side {
        max-width: 100%; /* Su mobile tornano a larghezza piena */
        width: 100%;
    }
}

/* ==========================================================================
   6. SEZIONI SPECIFICHE (SEGNALETICA & MATERIALI)
   ========================================================================== */
#materiale-wrapper .materiale-classe { margin-top: 1rem; }
#segnaletica-personalizzata-img-wrapper-intro { width: 100%; max-width: 500px !important; }
#segnaletica-personalizzata .button-wrapper .button { margin: 0.25rem; background-color: #4CAF50; }
#segnaletica-personalizzata .button-wrapper .button:hover { background-color: #333; }
#segnaletica-personalizzata .button-wrapper .button a { display: flex; justify-content: center; align-items: center; color: #fff; }

/* ==========================================================================
   7. FINESTRE MODALI
   ========================================================================== */
.modal-header .img-wrapper { max-width: 500px; margin: 1rem auto; }
.modal-body { margin: 0 auto; max-width: 30rem; }
.modal h3, .modal h4 { text-align: center; margin: 0 auto; }
.modal .line-wrapper { margin-bottom: 2rem; }
.modal .line-wrapper .text-wrapper ul li { margin-bottom: 0.5rem; text-decoration: underline; }

/* Modale Specifiche */
.modal-specifiche .modal-body { max-width: 60rem; text-align: justify; }
.modal-specifiche ul li { text-decoration: underline; }

/* ==========================================================================
   8. MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */
@media only screen and (min-width: 600px) {
    #clienti-loghi ul { display: flex; flex-wrap: wrap; max-width: 35rem; }
    #clienti-loghi .img-wrapper { height: 50px; width: auto; }
    .video-wrapper iframe { height: 350px; }
}

@media only screen and (min-width: 900px) {
    header .img-wrapper, header img { content: url(/img/Approfondimenti/Prodotti/Segnaletica/Segnaletica_pers_intro.png); width: 100%; }
    #why ul { padding: 2rem; }
    #why ul li { display: flex; justify-content: flex-start; align-content: center; }
    #why .img-wrapper { max-width: 150px; margin: 0; }
    #why .text-wrapper { align-self: center; text-align: justify; margin: 0 0 0 1rem; }
}