/* style.css - Nuovo look per TAP&HUG con pulsante chiamata solo icona e centratura migliorata */

/* Base Styles & Typography */
html, body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5; /* Sfondo leggermente grigio */
    color: #333; /* Testo scuro per buona leggibilità */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* L'altezza minima della viewport */
    overflow-x: hidden; /* Aggiunto per prevenire scroll orizzontale inatteso */
    width: 100%; /* Assicura che html e body occupino il 100% della larghezza */
    box-sizing: border-box; /* Include padding e border nella larghezza totale */
}

/* Applica centratura per i figli diretti del body */
body {
    align-items: center; /* Centra orizzontalmente gli elementi figli nel layout a colonna */
}

/* Header */
.header {
    width: 100%;
    background-color: #fff; /* Sfondo bianco per l'header */
    padding: 15px 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombra leggera */
    margin-bottom: 0; /* Ajustato per il carousel */
}

.logo {
    max-width: 150px; /* Dimensione massima per il logo */
    height: auto;
}

/* Main Container (usato per device.php, call.php, privacy_policy.php, admin_login.php, manage_device.php) */
.container {
    background-color: #ffffff;
    margin: 30px auto; /* Mantiene il margine auto per sicurezza, in congiunzione con align-items sul body */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 500px; /* Larghezza massima per il contenuto */
    width: 90%; /* Occupa il 90% della larghezza su schermi più piccoli */
    flex-grow: 1; /* Permette al container di espandarsi */
    box-sizing: border-box; /* Include padding nella larghezza */
    text-align: center; /* Centra il contenuto del container */
}

/* Headings */
h1 {
    color: #2c3e50; /* Colore più scuro per i titoli */
    text-align: center;
    margin-bottom: 25px;
}

p {
    margin-bottom: 15px;
}

/* Form Styles */
form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    text-align: left; /* Allinea a sinistra le label nei form */
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"], /* Aggiunto stile per input password */
textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1em;
}

input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
}

/* Form Comments (se presenti nel tuo HTML) */
.form-comment {
    font-size: 0.85em;
    color: #666;
    margin-top: -15px;
    margin-bottom: 20px;
    font-style: italic;
    text-align: left; /* Allinea a sinistra i commenti del form */
}

/* Buttons (General) */
button {
    background-color: #28a745; /* Green for confirm */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

button:hover {
    background-color: #218838;
}

/* Specific for call.php button (Icon Only) */
.call-container .message {
    font-size: 1.3em;
    margin-bottom: 40px;
    color: #333;
    font-weight: bold;
}

.call-button-wrapper {
    display: flex;
    flex-direction: column; /* Impila i pulsanti verticalmente */
    align-items: center; /* Centra orizzontalmente i pulsanti */
    gap: 25px; /* Aumentato lo spazio tra i pulsanti per chiarezza */
    margin-top: 25px;
    margin-bottom: 30px; /* Spazio sotto il wrapper dei pulsanti */
}

/* Contenitore singolo per etichetta e pulsante */
.call-button-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Spazio tra etichetta e pulsante */
}

.call-button-label {
    font-size: 1.1em; /* Dimensione del testo dell'etichetta */
    color: #555; /* Colore del testo dell'etichetta */
    font-weight: bold;
    text-align: center;
}

.call-button {
    /* Stili per entrambi i pulsanti, principale e secondario */
    color: white; 
    width: 90px; /* Dimensione unificata */
    height: 90px; /* Dimensione unificata */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 3.5em; /* Dimensione icona unificata */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Ombra più pronunciata */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Transizioni smooth */
    outline: none;
}

/* Sfondo per il pulsante principale (verde) */
.call-button:not(.secondary) { /* Applica solo al pulsante NON secondario */
    background-color: #28a745; 
}
.call-button:not(.secondary):hover {
    background-color: #218838; /* Verde più scuro all'hover */
    transform: translateY(-3px); /* Leggero sollevamento */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.call-button:not(.secondary):focus,
.call-button:not(.secondary):active {
    background-color: #218838; /* Mantiene lo stesso colore all'active/focus */
    transform: translateY(0); /* Nessuno spostamento forzato */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    outline: none;
}

/* Forza l'icona ad essere bianca con !important (mantenuto) */
.call-button i {
    font-size: 1em; 
    color: white !important; 
}

/* STILI per il pulsante del Numero Secondario (ora con stesse dimensioni del principale) */
.call-button.secondary {
    background-color: #007bff; /* Colore blu per il numero secondario */
    /* width e height sono ora definite in .call-button generico */
    /* font-size è ora definita in .call-button generico */
    /* box-shadow è ora definita in .call-button generico */
}

.call-button.secondary:hover {
    background-color: #0056b3; /* Blu più scuro all'hover */
    transform: translateY(-3px); /* Stesso sollevamento del principale */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* Stessa ombra del principale */
}
.call-button.secondary:focus,
.call-button.secondary:active {
    background-color: #0056b3;
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    outline: none;
}

/* Messaggi di stato (generale) */
.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
}

/* Stile per il link di gestione/supporto */
.support-link-section {
    text-align: center;
    margin-top: 20px;
}

.support-link {
    color: #007bff; /* Un colore che si distingua, puoi cambiarlo */
    text-decoration: none;
    font-weight: bold;
    padding: 8px 15px;
    border: 1px solid #007bff;
    border-radius: 5px;
    display: inline-block; /* Per applicare padding e border */
    transition: all 0.3s ease;
}

.support-link:hover {
    background-color: #007bff;
    color: white;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


/* Privacy Policy Page Specific Styles */
.privacy-container {
    text-align: left;
}

.privacy-container h1 {
    margin-bottom: 25px;
    color: #2c3e50;
}

.privacy-container h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #34495e;
}

.privacy-container p, .privacy-container li {
    line-height: 1.8;
    margin-bottom: 10px;
    font-size: 1.05em;
}

.privacy-container ul {
    padding-left: 20px;
}

.privacy-container a {
    color: #007bff;
    text-decoration: none;
}

.privacy-container a:hover {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .container {
        padding: 20px;
        width: 95%;
    }

    .logo {
        max-width: 120px;
    }

    button {
        padding: 10px 20px;
        font-size: 1em;
    }

    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    textarea {
        padding: 10px;
        font-size: 0.95em;
    }

    /* Modifiche per i pulsanti di chiamata su mobile */
    .call-button { /* Entrambi i pulsanti hanno la stessa dimensione su mobile */
        width: 70px;
        height: 70px;
        font-size: 2.8em; /* Dimensione icona unificata per mobile */
    }
    /* Le regole specifiche per .call-button.secondary su mobile non sono più necessarie per la dimensione, ma le manteniamo per chiarezza se volessi differenziarle in futuro */
    .call-button.secondary {
        /* width e height sono ora definite in .call-button generico */
        /* font-size è ora definita in .call-button generico */
    }
    .call-button-label {
        font-size: 1em; /* Dimensione etichetta ridotta per mobile */
    }

    .call-container .message {
        font-size: 1.1em;
    }
}

/* Stili per l'area Amministratore */
.admin-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.admin-menu .menu-button {
    background-color: #007bff;
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.2em;
    cursor: pointer;
    text-decoration: none; /* Per i link */
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.admin-menu .menu-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.admin-menu .menu-button:active {
    transform: translateY(0);
}

/* Stili per le liste di ID e i pulsanti */
.id-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    max-height: 300px; /* Limita l'altezza e aggiungi scroll */
    overflow-y: auto;
}

.id-button {
    background-color: #e9ecef;
    color: #333;
    border: 1px solid #ced4da;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s;
    flex-shrink: 0; /* Previene il rimpicciolimento */
}

.id-button:hover {
    background-color: #d8dee3;
}

.id-button:active {
    background-color: #c9d0d6;
}

/* Stili per messaggi di stato (successo/errore) */
#status-message, #result-message {
    padding: 10px;
    margin-top: 15px;
    border-radius: 4px;
    display: none;
    font-weight: bold;
}

/* Stili specifici per i pulsanti di azione nel pannello admin */
#nfc-section button, .generate-button {
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#nfc-section button:disabled, .generate-button:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
}

/* Stili per i vari pulsanti */
#nfc-section button[onclick^="writeNfcTag"], .generate-button[type="submit"] { background-color: #007bff; }
#nfc-section button[onclick^="writeNfcTag"]:hover:not(:disabled), .generate-button[type="submit"]:hover:not(:disabled) { background-color: #0056b3; }

#nfc-section button[onclick^="verifyNfcTag"] { background-color: #28a745; }
#nfc-section button[onclick^="verifyNfcTag"]:hover:not(:disabled) { background-color: #218838; }

#nfc-section button[onclick^="markStatus"][onclick*="assegnato"] { background-color: #17a2b8; }
#nfc-section button[onclick^="markStatus"][onclick*="assegnato"]:hover:not(:disabled) { background-color: #138496; }


/* --- STILI PER HOMEPAGE (index.php) --- */

/* Contenitore principale della homepage - override di .container per larghezza maggiore */
.homepage-container { /* Classe per il contenitore centrale della homepage */
    max-width: 960px;
    margin: 20px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Stili per il carousel */
.carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px; /* Larghezza massima del carousel */
    margin: 20px auto 40px auto; /* Centrato, sotto l'header, sopra la hero-section */
    overflow: hidden; /* Nasconde gli elementi che superano il bordo */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    background-color: #f0f0f0; /* Sfondo leggero per il carousel */
}

.carousel-track {
    display: flex; /* Permette agli elementi di stare sulla stessa riga */
    transition: transform 0.5s ease-in-out; /* Animazione fluida dello scorrimento */
}

.carousel-item {
    min-width: 100%; /* Ogni elemento occupa il 100% della larghezza del track */
    box-sizing: border-box; /* Include padding e bordo nella larghezza */
    display: flex; /* Per centrare il contenuto se non è un'immagine */
    justify-content: center;
    align-items: center;
}

.carousel-item img,
.carousel-item iframe {
    width: 100%;
    height: auto; /* Mantiene le proporzioni */
    display: block; /* Rimuove spazi extra sotto l'immagine/iframe */
    border-radius: 10px; /* Eredita dal wrapper */
}

.carousel-item iframe {
    aspect-ratio: 16 / 9; /* Rapporto d'aspetto per i video (es. YouTube) */
    min-height: 250px; /* Altezza minima per schermi più piccoli */
}

/* Navigational Dots - Pallini sotto il carousel */
.carousel-dots {
    text-align: center;
    margin-top: 15px;
}
.dot {
    height: 10px;
    width: 10px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%; /* Rende i pallini rotondi */
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.dot.active {
    background-color: #717171; /* Pallino attivo */
}

/* Stili per la Hero Section della Homepage */
.hero-section {
    text-align: center;
    padding: 60px 20px;
    background-color: #f8f9fa; /* Nuovo colore: grigio chiaro professionale */
    border-radius: 10px;
    margin-top: 40px; /* Margine sopra dopo il carousel */
    margin-bottom: 40px;
}
/* Nuovo stile per la frase principale della Hero Section */
.hero-section .hero-main-slogan {
    font-size: 3em; /* Rende la frase molto grande */
    color: black; /* Colore nero */
    font-weight: bold; /* Per maggiore enfasi */
    margin-bottom: 30px; /* Spazio sotto la frase */
    line-height: 1.2;
    max-width: 800px; /* Limita la larghezza per una migliore leggibilità */
    margin-left: auto;
    margin-right: auto;
}
.hero-section p.slogan { /* Lo slogan originale */
    font-size: 1.5em;
    color: #555;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* Sezione Feature della Homepage */
.features-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}
.feature-item {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 300px;
    flex: 1 1 calc(33% - 60px); /* Tre colonne su desktop */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.feature-item h3 {
    color: #28a745;
    font-size: 1.6em;
    margin-bottom: 10px;
}
.feature-item p {
    color: #666;
    font-size: 1em;
    line-height: 1.5;
}

/* Sezione Call to Action (CTA) della Homepage */
.cta-section {
    text-align: center; /* Questo centra il contenitore dei pulsanti */
    padding: 40px 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
}
.cta-section h2 {
    color: black;
    font-size: 2.2em;
    margin-bottom: 25px;
}
.cta-buttons {
    /* Utilizziamo flexbox per una migliore gestione dell'allineamento */
    display: flex;
    flex-direction: column; /* Impila i bottoni in colonna */
    align-items: center; /* Centra gli elementi lungo l'asse orizzontale in una colonna */
    gap: 10px; /* Spazio tra i bottoni se ce ne fosse più di uno */
}
.cta-buttons a {
    /* Modifiche per il pulsante */
    display: block; /* Farà occupare tutta la larghezza disponibile (con limiti) */
    padding: 15px 30px;
    margin: 10px auto; /* Imposta margin: auto per centrare orizzontalmente i blocchi */
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    max-width: 300px; /* Limita la larghezza massima del pulsante anche su desktop */
    width: 90%; /* Occupa il 90% della larghezza del contenitore, con max-width per non farlo diventare troppo grande */
    box-sizing: border-box; /* Assicura che padding e border siano inclusi nella larghezza */
}
.cta-buttons .main-cta {
    background-color: #28a745;
    color: white;
}
.cta-buttons .main-cta:hover {
    background-color: #218838;
    transform: translateY(-2px);
}


/* Footer (generico, usato anche per homepage) */
.footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    font-size: 0.9em;
    color: #777;
    border-top: 1px solid #eee;
    width: 100%; /* Assicura che il footer si estenda per tutta la larghezza */
    box-sizing: border-box;
}
.footer a {
    color: #007bff;
    text-decoration: none;
    margin: 0 10px;
}
.footer a:hover {
    text-decoration: underline;
}

/* Responsive adjustments per Homepage (si integrano con quelli generali) */
@media (max-width: 768px) {
    .hero-section .hero-main-slogan {
        font-size: 2.5em; /* Adatta la dimensione per tablet */
    }
    .hero-section p.slogan {
        font-size: 1.2em;
    }
    .feature-item {
        flex: 1 1 calc(50% - 30px); /* Due colonne su tablet */
    }
    .cta-section h2 {
        font-size: 1.8em;
    }
    .carousel-wrapper {
        margin: 20px auto;
    }
    .carousel-item iframe {
        min-height: 200px;
    }
    /* Regola il pulsante CTA per tablet */
    .cta-buttons a {
        width: 95%; /* Lasciamo un piccolo margine laterale */
        margin: 10px auto; /* Centra automaticamente */
    }
}
@media (max-width: 480px) {
    .hero-section {
        padding: 40px 15px;
    }
    .hero-section .hero-main-slogan {
        font-size: 1.8em; /* Adatta la dimensione per mobile */
    }
    .hero-section p.slogan {
        font-size: 1em;
    }
    .feature-item {
        flex: 1 1 100%; /* Una colonna su mobile */
    }
    .cta-buttons a {
        /* Ancora più larghezza su schermi molto piccoli */
        width: calc(100% - 20px); /* 100% meno il padding/margine desiderato */
        margin: 10px auto; /* Centra automaticamente */
    }
    .carousel-item iframe {
        min-height: 150px;
    }
}