/* ⚡ ACCELERATORE E BLOCCO DOPPIO TOCCO SMARTPHONE */
a, button, select, .riga-contatto-moderna, .cerchio-link, .omino-link {
    touch-action: manipulation !important;
    -webkit-user-select: none !important; /* Blocca il doppio clic sui telefoni Apple */
    user-select: none !important;         /* Blocca il doppio clic sui telefoni Android */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box !important;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6f8;
    color: #333;
}

.hero {
    background: #17365d !important; /* Colore pieno per Dreamweaver */
    background: linear-gradient(135deg, #17365d, #274c77);
    color: white;
    text-align: center;
    padding: 120px 30px;
}

.hero h1 {
    font-size: 70px;
    margin-bottom: 15px;
    letter-spacing: 3px;
}

.hero h2 {
    font-size: 32px;
    font-weight: normal;
    margin-bottom: 30px;
}

.hero p {
    max-width: 900px;
    margin: 20px auto;
    font-size: 20px;
    line-height: 1.8;
}

.btn {
    display: inline-block;
    margin: 15px;
    padding: 15px 35px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

.btn-primary {
    background: #f4b400;
    color: white;
}

.btn-secondary {
    background: white;
    color: #17365d;
}

.section {
    max-width: 1200px;
    margin: auto;
    padding: 80px 20px;
}

.section h3 {
    text-align: center;
    color: #17365d;
    font-size: 36px;
    margin-bottom: 50px; /* Più spazio sotto il titolo principale */
}

/* OTTIMIZZATO: Tabella distanziata perfettamente */
.cards-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 30px 0px !important; /* Aumentato lo spazio tra i box */
    margin: 0 auto !important;
}

.card-cell {
    width: 33.33% !important;
    vertical-align: top !important;
}

/* OTTIMIZZATO: Box più moderni, arrotondati e ariosi */
.card {
    background: #ffffff !important; /* Forza lo sfondo bianco pulito */
    padding: 40px 30px !important; /* Più spazio all'interno del box per far respirare il testo */
    border-radius: 16px !important; /* Angoli più morbidi e moderni */
    box-shadow: 0 10px 30px rgba(23, 54, 93, 0.08) !important; /* Ombra morbida ed elegante con una punta di blu */
    text-align: center;
    border: 1px solid #e1e8ed !important; /* Sottile bordo grigio per definire meglio lo stacco dal fondo */
}

.card h4 {
    color: #17365d;
    margin-bottom: 20px; /* Più stacco tra il titolo della scheda e la descrizione */
    font-size: 22px;
    font-weight: bold;
}

.card p {
    font-size: 16px;
    line-height: 1.7; /* Testo più leggibile e meno denso */
    color: #4a5568; /* Grigio leggermente più morbido del nero per affaticare meno gli occhi */
}

.footer {
    background: #17365d;
    color: white;
    text-align: center;
    padding: 40px;
    margin-top: 60px;
}

/* ==========================================================
   AGGIUNTA: STILI PER LA PAGINA DI REGISTRAZIONE (DOPO DI ME)
   ========================================================== */

/* Sfondo blu scuro per la pagina di registrazione identico alla tua Home */
.sfondo-registrazione {
    background: #17365d !important;
    background: linear-gradient(135deg, #17365d, #274c77) !important;
    margin: 0;
    padding: 60px 20px;
}

/* Titolo DOPO DI ME in alto bianco */
.logo-sito-registrazione {
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* Struttura della scheda bianca del modulo */
.scheda-profilo {
    max-width: 500px;
    margin: 0 auto;
    padding: 35px;
    background-color: #ffffff !important;
    border-radius: 16px !important; /* Angoli molto arrotondati come nella foto */
    box-shadow: 0 10px 30px rgba(23, 54, 93, 0.2) !important;
}

.descrizione-social {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: center;
}

/* Gestione dei campi sulla stessa riga (Nome/Cognome e Data) */
.riga-doppia {
    display: flex;
    gap: 12px;
}
.riga-tripla {
    display: flex;
    gap: 10px;
}

.modulo-profilo label {
    display: block;
    margin-top: 18px;
    font-weight: bold;
    color: #17365d; /* Riprende il tuo blu scuro */
    font-size: 15px;
}

/* Stile per gli elementi di input e select arrotondati */
.modulo-profilo input, .modulo-profilo select {
    width: 100%;
    padding: 14px;
    margin-top: 6px;
    margin-bottom: 5px;
    border: 1px solid #ccd0d5;
    border-radius: 12px; /* Angoli dei campi morbidi */
    box-sizing: border-box;
    font-size: 15px;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}

/* Evidenzia i campi quando ci clicchi dentro */
.modulo-profilo input:focus, .modulo-profilo select:focus {
    border-color: #17365d;
    outline: none;
    box-shadow: 0 0 5px rgba(23, 54, 93, 0.2);
}

/* Icona punto di domanda accanto ai titoli */
.etichetta-info {
    display: flex !important;
    align-items: center;
    gap: 5px;
}
.icona-aiuto {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #606770;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    line-height: 14px;
    color: #606770;
    cursor: pointer;
}

/* Testi legali e link */
.testo-informativo, .testo-privacy {
    font-size: 12px;
    color: #4a5568;
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 12px;
}
.testo-informativo a, .testo-privacy a {
    color: #17365d;
    text-decoration: underline;
}
.testo-privacy a:hover, .testo-informativo a:hover {
    color: #274c77;
}

/* Bottone principale arancione coordinato alla tua Home */
.bottone-registrati {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: #f4b400 !important; /* Il tuo arancione */
    color: white !important;
    border: none;
    border-radius: 12px; /* Uniformato ai campi di testo */
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
}
.bottone-registrati:hover {
    background-color: #d99e00 !important;
}

/* Link in fondo per tornare alla Home Page */
.link-torna-indietro {
    display: block;
    text-align: center;
    margin-top: 25px;
    color: #4a5568;
    text-decoration: none;
    font-size: 14px;
}
.link-torna-indietro:hover {
    color: #17365d;
    text-decoration: underline;
}
/* Rende visibile e cliccabile il pulsante Scegli File */
input[type="file"] {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 15px;
    background-color: #f0f2f5; /* Sfondo grigio chiaro */
    border: 1px dashed #ccd0d5; /* Bordo tratteggiato */
    border-radius: 6px;
    color: #1c1e21; /* Testo grigio scuro/nero */
    font-family: sans-serif;
    cursor: pointer;
}

/* Colora specificamente il bottoncino interno del browser */
input[type="file"]::file-selector-button {
    background-color: #0d3b66; /* Blu scuro coordinato al tuo stile */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 10px;
}
/* ==========================================================
   AGGIUNTA: OTTIMIZZAZIONE STRUTTURA "LE MIE CERCHIE"
   ========================================================== */

/* Il contenitore bianco principale (quello con la scritta Le Mie Cerchie) */
.scheda-cerchie-main {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(23, 54, 93, 0.08);
}

/* Il contenitore che racchiude la lista dei contatti familiari */
.lista-contatti-flex {
    display: flex;
    flex-direction: column; /* Costringe i contatti ad andare uno sotto l'altro */
    gap: 15px;              /* Crea lo spazio perfetto di separazione tra i blocchi */
    margin-top: 20px;
    width: 100%;
}

/* La singola scheda del contatto (Luca, Giulia, Stefania) */
.contatto-singolo {
    display: flex;
    justify-content: space-between; /* Spinge il Nome a sinistra e i tasti a destra */
    align-items: center;            /* Allinea tutto verticalmente al centro */
    background: #ffffff;
    padding: 16px 20px;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    width: 100% !important;         /* Evita l'effetto cascata della sovrapposizione */
}

/* Raggruppamento del nome e del tag azzurro */
.info-utente-blocco {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Raggruppamento dei pulsanti di azione sulla destra (Rimuovi / Trova persone) */
.azioni-utente-blocco {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Sistema il blocco laterale dei testi "Trova altre persone" separandolo dai contatti */
.blocco-ricerca-persone {
    margin-top: 25px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #ccd0d5;
    text-align: center;
}

/* Sposta e isola il tasto rosso Disconnetti/Esci in fondo o in un angolo pulito */
.disconnetti-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.bottone-esci-rosso {
    background-color: #dc3545 !important;
    color: white !important;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    border: none;
    cursor: pointer;
}
.bottone-esci-rosso:hover {
    background-color: #bd2130 !important;
}
/* ==========================================================
   OTTIMIZZAZIONE FINALE: MODULO DI PUBBLICAZIONE MOBILE
   ========================================================== */

/* Contenitore del menu e del pulsante */
.riga-pulsanti-dashboard {
    display: flex !important;
    flex-direction: column !important; /* Mette gli elementi uno sotto l'altro */
    gap: 12px !important;              /* Crea uno spazio perfetto tra il menu e il tasto */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Forziamo il menu a tendina a prendersi tutta la larghezza per leggere bene il testo */
.riga-pulsanti-dashboard select {
    width: 100% !important;
    padding: 12px !important;
    border-radius: 8px !important;
    border: 1px solid #ccd0d5 !important;
    font-family: sans-serif !important;
    background: white !important;
    color: #1c1e21 !important;
    font-size: 15px !important;
}

/* Stile per il tasto Pubblica, anch'esso largo al 100% sul telefono */
.bottone-pubblica-arancio {
    width: 100% !important;
    background-color: #f0b000 !important;
    color: white !important;
    border: none !important;
    padding: 14px !important;         /* Leggermente più alto per essere cliccato meglio col pollice */
    border-radius: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-family: sans-serif !important;
    font-size: 16px !important;
    text-align: center !important;
}
.bottone-pubblica-arancio:hover {
    background-color: #d99e00 !important;
}
/* ==========================================================
   OTTIMIZZAZIONE CHAT MESSAGGI PRIVATI (MOBILE)
   ========================================================== */

/* Il contenitore del modulo di invio messaggi */
.riga-invia-messaggio-chat {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 15px !important;
}

/* Il campo di testo dove l'utente scrive */
.riga-invia-messaggio-chat input[type="text"],
.riga-invia-messaggio-chat input {
    flex: 1 !important;        /* Prende tutto lo spazio disponibile senza spingere */
    min-width: 0 !important;    /* Permette alla barra di restringersi sui telefoni piccoli */
    padding: 12px 15px !important;
    border: 1px solid #ccd0d5 !important;
    border-radius: 24px !important; /* Rende la barra dei messaggi stondata e moderna */
    font-family: sans-serif !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    background-color: white !important;
    color: #1c1e21 !important;
}

/* Il pulsante giallo/arancione Invia */
.bottone-invia-chat {
    background-color: #f0b000 !important; /* Il tuo giallo/arancione */
    color: white !important;
    border: none !important;
    padding: 12px 22px !important;
    border-radius: 24px !important; /* Arrotondato in linea con la barra di testo */
    font-weight: bold !important;
    cursor: pointer !important;
    font-family: sans-serif !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;   /* Impedisce categoricamente al tasto di andare fuori schermo o rimpicciolirsi */
    white-space: nowrap !important; /* Impedisce alla parola Invia di spezzarsi */
}
.bottone-invia-chat:hover {
    background-color: #d99e00 !important;
}
/* ==========================================================
   AGGIUNTA: STILI PER I BOTTONI CREAZIONE POST DASHBOARD
   ========================================================== */

/* Layout per allineare i bottoni in basso nel modulo */
.area-bottoni-post {
    display: flex;
    justify-content: space-between; /* Spinge le opzioni a sinistra e pubblica a destra */
    align-items: center;
    margin-top: 15px;
    width: 100%;
}

.gruppo-opzioni-sinistra {
    display: flex;
    gap: 10px; /* Spazio tra Scegli ricordo e Scegli cerchia */
}

/* Stile unico per i due bottoni secondari (Scegli ricordo e Scegli la Cerchia) */
.btn-opzione-social {
    background-color: #ffffff !important;
    color: #17365d !important; /* Il tuo blu scuro aziendale */
    border: 1px solid #17365d !important; /* Bordo blu coordinato */
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Effetto quando passi il mouse sopra i bottoni secondari */
.btn-opzione-social:hover {
    background-color: #f0f4f8 !important; /* Leggero sfondo azzurrato */
}

/* Stile per il bottone principale (Pubblica) */
.btn-pubblica-social {
    background-color: #17365d !important; /* Sfondo blu pieno del brand */
    color: #ffffff !important; /* Testo bianco visibile */
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Effetto quando passi il mouse sopra il bottone Pubblica */
.btn-pubblica-social:hover {
    background-color: #274c77 !important; /* Si schiarisce leggermente come nella Hero */
}
/* ======================================================================= */
/* CONFIGURAZIONE DI BASE PER COMPUTER (SCHERMI GRANDI)                    */
/* ======================================================================= */
.area-colonne-chat {
    flex-wrap: wrap !important; /* Permette al box sotto di andare a capo sul PC */
}

.colonna-contatti-chat {
    width: 28% !important;
}

.colonna-finestra-chat {
    width: 70% !important;
    flex-grow: 1 !important; /* Forza l'intera colonna ad allargarsi occupando tutto lo spazio vuoto */
}
.box-grigio-messaggi {
    width: 100% !important;
}


/* ======================================================================= */
/* ADATTAMENTO AUTOMATICO PER CELLULARI (SCHERMI PICCOLI)                  */
/* ======================================================================= */
@media screen and (max-width: 768px) {
    body, .sfondo-registrazione {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

    /* Forza il contenitore ad andare a capo sul telefono */
    .area-colonne-chat {
        flex-wrap: wrap !important;
    }
    
    /* Forza le colonne a occupare tutta la larghezza dello schermo */
    .colonna-contatti-chat,
    .colonna-finestra-chat,
    .box-grigio-messaggi {
        width: 100% !important;
        border-right: none !important; /* Toglie la linea verticale di divisione */
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Sistema la scheda bianca sul telefono per farla rientrare nei bordi */
  .scheda-profilo {
    width: 96% !important; /* Allarga la scheda quasi fino al bordo dello schermo */
    padding: 15px 4px !important; /* Riduce il vuoto bianco interno per dare più spazio ai pulsanti */
    margin: 10px auto !important; /* Centra la scheda lasciando un piccolissimo filo di blu ai lati */
    border-radius: 8px !important; 
}

    
    /* Aggiunge un po' di distacco tra la lista nomi e l'inizio della chat */
    .colonna-finestra-chat {
        margin-top: 20px !important;
    }
   /* SISTEMA IL FORM DI SCRITTURA SUL TELEFONO */
.area-colonne-chat form, 
.scheda-profilo form,
.area-colonne-chat .div-form {
    display: flex !important;
    flex-direction: column !important; /* Sposta il tasto Invia sotto la barra */
    align-items: stretch !important;    /* Allunga gli elementi */
    gap: 12px !important;              /* Crea uno spazio ordinato tra i due */
}

/* ALLUNGA IL TASTO GIALLO AL 100% DELLA LARGHEZZA SUL CELLULARE */
.area-colonne-chat form button, 
.scheda-profilo form button,
.area-colonne-chat .div-form button,
.area-colonne-chat input[type="submit"] {
    width: 100% !important;            /* Prende tutta la larghezza dello schermo */
    padding: 14px 0 !important;        /* Lo rende più alto e facile da premere */
    text-align: center !important;
    margin-left: 0 !important;         /* Evita che venga spinto verso destra */
}
/* 1. Crea lo spazio sotto la barra grigia per ospitare il tasto */
.area-colonne-chat form, 
.box_grigio_messaggi form,
div[class*="form"] {
    position: relative !important;
    padding-bottom: 60px !important; /* Crea un vuoto sotto di 60px */
    display: block !important;
    width: 100% !important;
}

/* 2. Forza la barra grigia di testo a stare dentro i bordi dello schermo */
.area-colonne-chat form input,
div[class*="form"] input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 3. STACCA IL TASTO GIALLO E LO SBATTE SOTTO AL 100% DELLA LARGHEZZA */
.area-colonne-chat form button, 
.area-colonne-chat form input[type="submit"],
button[class*="Invia"],
input[value*="Invia"] {
    position: absolute !important;
    bottom: 0 !important;             /* Lo spinge in fondo al vuoto creato prima */
    left: 0 !important;               /* Lo allinea perfettamente a sinistra */
    width: 100% !important;            /* Prende tutta la larghezza dello schermo */
    max-width: 100% !important;
    height: 45px !important;           /* Altezza comoda per il dito */
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

}
.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.cards-container .card-cell {
    flex: 1 1 calc(33.33% - 25px);
    min-width: 280px; /* Se lo schermo scende sotto questa misura, le schede vanno a capo da sole */
}
/* Correzione per schermi piccoli (cellulari) */
@media (max-width: 768px) {
    .cards-table, 
    .cards-table tbody, 
    .cards-table tr, 
    .cards-table td.card-cell {
        display: block !important;
        width: 100% !important;
    }
    
    .cards-table td.card-cell {
        margin-bottom: 25px; /* Crea spazio verticale tra le schede */
        padding: 0 !important; /* Evita che il contenuto esca dai bordi */
    }
}