:root {
    --primary-color: #2ECC71; /* Verde NutriCare */
    --secondary-color: #3498DB; /* Blu per accenti */
    --tertiary-color: #7F8C8D; /* Griglio Caldo */
    --accent-color: #FF6B6B; /* Corallo per CTA */
    --energy-orange: #FF9800; /* Arancione energia */
    --text-color: #333;
    --text-primary: #333 !important; 
    --light-bg: #f7f7f7;
    --dark-bg: #2c3e50;
}

h1, h2{
  /*  color: unset !important;*/
}

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

html, body {
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    background-color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* HEADER */
.header {
    background-color: white;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    padding-left: unset !important;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--primary-color);
}

    .logo i {
        margin-right: 5px;
        color: var(--primary-color);
    }

.logo-icon {
    /* Spaziatura ereditata dal vecchio 'i' */
    margin-right: 5px;
    /* Dimensioni necessarie per il logo (adatta in base all'altezza del font '24px') */
    width: 30px; /* Larghezza uguale o simile all'altezza del font */
    height: 30px;
    /* Assicura che l'immagine sia allineata con il testo */
    vertical-align: middle;
}

.nav a {
    text-decoration: none;
    color: var(--text-color);
    margin-left: 25px;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s;
}

    .nav a:hover {
        color: var(--primary-color);
    }

.btn-accesso {
    color: var(--primary-color) !important;
    font-size: 16px !important; /* Font più grande per ACCEDI */
}

    .btn-accesso i {
        margin-right: 5px;
    }

/* HERO SECTION */
.hero-section {
    position: relative;
    background-color: var(--light-bg);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px;
    padding: 40px 0;
}

.hero-image-overlay {
    /* Colori sfumati in assenza di un'immagine */
    background: linear-gradient(to right, rgba(46, 204, 113, 0.8), rgba(52, 152, 219, 0.6));
    /* Se hai un'immagine, aggiungila qui: url('cartoon-illustration.jpg') */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 600px;
    margin-bottom: 20px;
}

    .hero-content h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 15px;
        line-height: 1.1;
    }

    .hero-content p {
        font-size: 16px;
        margin-bottom: 25px;
        font-weight: 400;
    }

.btn-primary {
    display: inline-block;
    background-color: var(--accent-color);
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.3s;
    border: none;
}

    .btn-primary:hover {
        background-color: #e74c3c !important;
    }

/* SEARCH BAR */
.search-bar-wrapper {
    position: relative;
    margin: 20px auto 0 auto;
    width: 90%;
    max-width: 1000px;
    z-index: 10;
}

.search-bar {
    display: flex;
    background-color: white;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.search-field {
    flex-grow: 1;
    display: flex;
    align-items: center;
    border-right: 1px solid #eee;
    padding: 0 12px;
}

    .search-field:last-of-type {
        border-right: none;
    }

    .search-field i {
        color: var(--primary-color);
        margin-right: 8px;
        font-size: 14px;
    }

    .search-field input {
        border: none;
        outline: none;
        width: 100%;
        padding: 6px 0;
        font-size: 14px;
        color: var(--text-color);
    }

.btn-search, .dx-button, .dx-button.dx-button-default {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: none;
    padding: 0 25px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
    flex-shrink: 0;
    flex-grow: 0;
    width: auto;
}

    .btn-search:hover, .dx-button:hover, .dx-button.dx-button-default:hover {
        background-color: #27ae60 !important;
    }

/* HOW IT WORKS SECTION */
.how-it-works-section {
    padding: 40px 0;
    text-align: center;
    flex-shrink: 0;
}

    .how-it-works-section h2 {
        font-family: 'Montserrat', sans-serif;
        font-size: 24px;
        margin-bottom: 30px;
        font-weight: 700;
        color: var(--primary-color);
    }

.steps-grid {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.step {
    flex-basis: 33.33%;
    text-align: center;
}

.step-icon {
    font-size: 30px;
    border: 2px solid;
    border-radius: 50%;
    padding: 15px;
    margin-bottom: 15px;
    display: inline-block;
    transition: all 0.3s ease;
}

    .step-icon.professionista {
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .step-icon.paziente {
        color: var(--secondary-color);
        border-color: var(--secondary-color);
    }

.step p {
    font-weight: 600;
    color: var(--text-color);
    font-size: 14px;
}

/* FOOTER */
.footer {
    background-color: var(--dark-bg);
    color: white;
    padding: 20px 0;
    margin-top: auto;
    margin-bottom: 0px;
    flex-shrink: 0;
}

.footer-content {
    text-align: center;
}

.footer h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
    color: white;
}

.footer p {
    margin-bottom: 5px;
    font-size: 12px;
    opacity: 0.9;
}

/* Media Query per la responsività */
@media (max-width: 992px) {
    .search-bar {
        flex-wrap: wrap;
    }

    .search-field {
        flex-basis: 48%;
        margin-bottom: 10px;
        border-right: none;
    }

    .btn-search {
        width: 100%;
        padding: 12px 25px;
    }

    .search-field:nth-child(even) {
        border-right: none;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
    }

    .nav {
        margin-top: 10px;
    }

    .hero-content h1 {
        font-size: 28px;
    }

    .steps-grid {
        flex-direction: column;
        gap: 15px;
    }

    .step {
        margin-bottom: 20px;
    }

    .nav a {
        margin-left: 15px;
        font-size: 13px;
    }

    .hero-section {
        min-height: 350px;
        padding: 30px 0;
    }

    .how-it-works-section {
        padding: 30px 0;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 24px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .how-it-works-section h2 {
        font-size: 20px;
    }

    .step-icon {
        font-size: 24px;
        padding: 12px;
    }

    .footer {
        padding: 20px 0;
    }
}

/* ================================================================
    BLOCCO PER LOGIN
    ================================================================

*/



/* ----------------------- */
/* CONTENUTO PRINCIPALE (GRADIENTE) */
/* ----------------------- */
.main-content {
    background: linear-gradient(to right, rgba(46, 204, 113, 0.8), rgba(52, 152, 219, 0.6));
    padding: 50px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenitore del form di login */
.login-container {
    max-width: 500px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

    .login-header h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 28px;
        color: var(--primary-color);
        margin-bottom: 10px;
    }

    .login-header h2 {
        font-size: 18px;
        color: var(--text-color);
        font-weight: normal;
    }

/* Stili del Form */
.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: var(--text-color);
    }

    .form-group input {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
        box-sizing: border-box;
    }



.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
}

.forgot-password {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 14px;
}

    .forgot-password:hover {
        text-decoration: underline;
    }

/* Pulsanti */
.btn-login {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    width: 100%;
    margin-bottom: 20px;
    transition: background-color 0.3s;
}

    .btn-login:hover {
        background-color: #e74c3c;
    }

.btn-login-secondary {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    width: 100%;
    margin-bottom: 20px;
    transition: background-color 0.3s;
}

    .btn-login-secondary:hover {
        background-color: #2980b9;
    }

/* Link aggiuntivi */
.additional-links {
    text-align: center;
    margin-bottom: 30px;
}

    .additional-links a {
        color: var(--secondary-color);
        text-decoration: none;
        display: block;
        margin-bottom: 10px;
        font-size: 14px;
    }

        .additional-links a:hover {
            text-decoration: underline;
        }

/* Separatore */
.separator {
    display: flex;
    align-items: center;
    margin: 30px 0;
}

    .separator::before,
    .separator::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #ddd;
    }

    .separator span {
        padding: 0 15px;
        color: #777;
        font-size: 14px;
    }

/* Pulsanti social */
.social-login {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-social {
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.3s;
}

    .btn-social:hover {
        opacity: 0.9;
    }

.btn-google {
    background-color: #DB4437; /* Rosso Google */
}

.btn-microsoft {
    background-color: #00A4EF; /* Blu Microsoft */
}

/* FOOTER */
.footer {
    background-color: var(--dark-bg);
    color: white;
    padding: 30px 0;
    flex-shrink: 0;
}

.footer-content {
    text-align: center;
}

.footer h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
    color: white;
}

.footer p {
    margin-bottom: 5px;
    font-size: 12px;
    opacity: 0.9;
}

/* Media Query per la responsività */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
    }

    .nav {
        margin-top: 10px;
    }

        .nav a {
            margin-left: 15px;
            font-size: 13px;
        }

    .main-content {
        padding: 20px;
    }

    .login-container {
        padding: 30px 20px;
    }

    .social-login {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 20px 0;
    }

    .login-header h1 {
        font-size: 24px;
    }

    .login-header h2 {
        font-size: 16px;
    }
}






/* ================================================================
    FINE BLOCCO PER LOGIN
    ================================================================

*/



/* =======================================================
   RETTIFICHE CSS PER UNIFORMARE I WIDGET DEVEXTREME
   ======================================================= */
/* CORREZIONE PER LARGHEZZA UNIFORME SU SCHERMI GRANDI (Desktop) */
@media (min-width: 993px) {
    .search-field {
        /* Forziamo i 4 campi ad avere la stessa base di partenza */
        flex-basis: 0;
        min-width: 0;
    }

        /* Assicuriamo che i wrapper DevExtreme occupino tutto lo spazio nel campo */
        .search-field > div[id^="layout"] {
            width: 100% !important;
            flex-grow: 1;
            flex-shrink: 0;
        }

    /* Assicuriamo che il pulsante non venga mai compresso e mantenga la sua larghezza */
    .btn-search {
        flex-shrink: 0;
        flex-grow: 0;
        margin-left: 20px;
    }
}

/* Rimuove i bordi dai campi DevExtreme specifici */
#layoutNazioneSearch.dx-editor-outlined,
#layoutProvinceSearch.dx-editor-outlined,
#layoutServiziSearch.dx-editor-outlined,
#layoutCognomeSearch.dx-editor-outlined {
    /* 1. Rimuove il bordo principale */
    border: none !important;
    /* 2. Rimuove l'effetto 'outline' o 'shadow' che DevExtreme potrebbe usare al posto del bordo */
    box-shadow: none !important;
}

/* Potrebbe essere necessario rimuovere il bordo anche dal contenitore interno focus */
#layoutNazioneSearch .dx-texteditor-container,
#layoutProvinceSearch .dx-texteditor-container,
#layoutServiziSearch .dx-texteditor-container,
#layoutCognomeSearch .dx-texteditor-container {
    border: none !important;
    box-shadow: none !important;
}

.authentication-content {
    margin-top: 1rem !important;
    border-color: lightgrey;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
}

.dx-checkbox-checked .dx-checkbox-icon {
    color: var(--text-color);
    border-color: #0f6cbd;
    background-color: #0f6cbd;
    font: 16px / 1 DXIcons;
}

.authentication-content {
    /* Manteniamo le altezze che hai impostato */
    height: 100%;
    /* Rendi il contenuto scorrevole se supera l'altezza disponibile */
    overflow-y: auto;
    /* Aggiungi padding in basso per assicurarti che l'ultimo elemento non tocchi il bordo */
    padding-bottom: 20px;
}

.btn-logout {
    color: var(--accent-color) !important;
    font-size: 16px !important;
}

    .btn-logout i {
        margin-right: 5px;
    }

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-outline-primary:hover {
        background-color: var(--primary-color);
    }

/* ================================================================
    RIQUADRI CON GRADIENTE (Search / Nutrizionisti)
    Fascia con gradiente home + corpo con gradiente tenue, bordo verde
    ================================================================ */
.gm-box {
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.gm-box-band {
    background: linear-gradient(to right, rgba(46, 204, 113, 0.85), rgba(52, 152, 219, 0.75));
    color: white;
    padding: 10px 20px;
}

    .gm-box-band h3,
    .gm-box-band h4 {
        font-family: 'Montserrat', sans-serif;
        font-size: 17px;
        font-weight: 600;
        color: white;
        margin: 0;
    }

    .gm-box-band a {
        color: white;
        text-decoration: none;
    }

    .gm-box-band .gm-box-sub {
        font-size: 13px;
        font-style: italic;
        margin: 0;
    }

.gm-box-body {
    background: linear-gradient(to right, rgba(46, 204, 113, 0.10), rgba(52, 152, 219, 0.08)), white;
    padding: 18px 20px;
}

/* Avviso certificazione: il corallo perde contrasto sul gradiente */
.gm-box .gm-warn {
    color: #c0392b !important;
}

/* Intestazione profilo nutrizionista: gradiente pieno, testo bianco */
.gm-profile-head {
    background: linear-gradient(to right, rgba(46, 204, 113, 0.85), rgba(52, 152, 219, 0.75)), white;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    color: white;
}

    .gm-profile-head h1,
    .gm-profile-head .lead {
        color: white !important;
    }

    .gm-profile-head img {
        border: 3px solid white;
    }

/* Immagine profilo di default: figura trasparente su fondo bianco,
   margine interno perché nei cerchi le spalle non vengano tagliate */
img.gm-avatar-default {
    background-color: white;
    object-fit: contain;
    padding: 6px;
    border: 1px solid var(--primary-color);
}

    img.gm-avatar-default.rounded-circle {
        padding: 10px;
    }

.gm-profile-head img.gm-avatar-default {
    border: 3px solid white;
}

/* CardView risultati ricerca.
   - La cornice la dà il riquadro .gm-box del template: la card DevExtreme fa solo da contenitore.
   - min-width: 0 annulla il minimo CSS derivato da CardMinWidth(480), che su schermi
     stretti (es. iPhone 390px) faceva sforare la griglia. Il numero di card per riga
     resta calcolato da DevExtreme su CardMinWidth, quindi su desktop non cambia nulla. */
#cardViewSearchResults .dx-cardview-card {
    border: 0;
    background: transparent;
    min-width: 0;
}

/* La CardView inserisce il template in due <div> intermedi senza altezza
   (affiancati da due <div data-dx-focus-decoy> vuoti per la tastiera, da escludere):
   la catena flex porta l'altezza della card fino al riquadro .gm-box,
   così i riquadri sulla stessa riga risultano alti uguali */
#cardViewSearchResults .dx-cardview-card {
    display: flex;
    flex-direction: column;
}

    #cardViewSearchResults .dx-cardview-card > div,
    #cardViewSearchResults .dx-cardview-card > div > div:not([data-dx-focus-decoy]) {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

#cardViewSearchResults .gm-box {
    flex: 1 1 auto;
}

/* Card ricerca: il nome sta nella fascia, quindi più grande */
#cardViewSearchResults .gm-box-band h4 {
    font-size: 22px;
}

#cardViewSearchResults .gm-box-band .gm-box-sub {
    font-size: 14px;
}

/* Immagine della card: dimensione fissa, uguale per tutte le card.
   Le foto vengono ritagliate a quadrato (centrate in alto, dove sta il volto);
   l'avatar di default resta intero */
#cardViewSearchResults .new-arrivals-img-contnent img {
    width: 190px;
    height: 190px;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

    #cardViewSearchResults .new-arrivals-img-contnent img.gm-avatar-default {
        object-fit: contain;
    }

@media (max-width: 767.98px) {
    #cardViewSearchResults .new-arrivals-img-contnent img {
        width: 100px;
        height: 100px;
    }
}