/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* Importa il font Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* ################################################## STILE BOTTONI PMP (Seleziona, Update Profile, Annulla) ===== */
.pmpro_btn {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    background-color: #39b0e1 !important; /* Colore di sfondo standard */
    color: #ffffff !important; /* Colore del testo */
    border: none !important; /* Rimuove il bordo */
    cursor: pointer !important; /* Cambia il cursore al passaggio del mouse */
}

.pmpro_btn:hover {
    background-color: #88cfed !important; /* Colore di sfondo all'hover */
    color: #ffffff !important; /* Colore del testo all'hover */
}

.pmpro_btn-outline {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    background-color: #ffffff !important; /* Colore di sfondo standard */
    color: #39b0e1 !important; /* Colore del testo */
    border: 1px solid #39b0e1 !important; /* Bordo grigio scuro */
    cursor: pointer !important; /* Cambia il cursore al passaggio del mouse */
}

.pmpro_btn-outline:hover {
    background-color: #ffffff !important; /* Colore di sfondo all'hover */
    color: #88cfed !important; /* Colore del testo all'hover */
    border: 1px solid #88cfed !important; /* Bordo grigio scuro */
}

/* ################################################## Stili uniformati per i titoli area clienti PMP */
/* usa la class "pmpro_form_heading pmpro_font-large" come custom class in WpBackery per uniformità di altri titoli */
h2.pmpro_section_title.pmpro_font-x-large,
.pmpro_form_heading.pmpro_font-large,
.pmpro_font-large {
    font-family: 'Poppins', Arial, sans-serif !important; /* Font unificato */
    font-size: 22px; /* Dimensione uniforme per entrambi */
    font-weight: 700 !important; /* Grassetto per dare enfasi */
    color: #39b0e1 !important; /* Colore coerente */
    letter-spacing: 0px; /* Spaziatura tra lettere */
    line-height: 1.2; /* Coerenza nell'altezza della linea */
}

/* ################################################## Stili uniformati per i testi area clienti PMP */
.pmpro_card_content,
.pmpro_form_legend,
.pmpro_level_name_text,
.pmpro_card_content .pmpro_level_cost_text p {
    font-family: 'Poppins', Arial, sans-serif !important; /* Font unificato */
    font-size: 14px !important; /* Dimensione uniforme per entrambi */
    font-weight: normal !important; /* Grassetto per dare enfasi */
    color: #000000 !important; /* Colore coerente */
    letter-spacing: 0.4px; /* Spaziatura tra lettere */
    line-height: 1.4; /* Coerenza nell'altezza della linea */
}

/* ################################################## SECTIONS PMP */
.pmpro_section_title {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    font-size: 20px !important;
    font-weight: bold !important;
    color: #707070 !important;
}

.pmpro_card h2,
.pmpro_card h3 {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #BEBEBE !important;
}

.pmpro_section p,
.pmpro_card p {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

/* Stile per il pulsante Show Password */
.pmpro_btn.pmpro_btn-plain.pmpro_btn-password-toggle,
button#pmpro_btn-password-toggle-1 {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    background-color: #ffffff !important; /* Colore di sfondo leggero */
    border: 1px solid #A7A7A7 !important; /* Bordo sottile */
    border-radius: 4px !important; /* Bordi arrotondati */
    color: #000000 !important; /* Colore del testo */
    padding: 5px 10px !important; /* Riduzione del padding (verticale e orizzontale) */
    font-size: 13px !important; /* Dimensione del testo leggermente ridotta */
    cursor: pointer !important; /* Indicatore di clic */
    display: flex !important; /* Allinea l'icona e il testo */
    align-items: center !important; /* Centra il contenuto verticalmente */
    gap: 5px !important; /* Spaziatura tra icona e testo */
    transition: background-color 0.2s, color 0.2s !important; /* Animazione fluida per hover */
}

/* Icona occhio */
.pmpro_icon.pmpro_icon-eye {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    font-size: 15px !important; /* Dimensione proporzionata */
    color: #000000 !important; /* Colore neutro */
}

/* Testo "Show Password" */
.pmpro_form_field-password-toggle-state {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    font-weight: 500 !important; /* Leggermente in grassetto */
    color: #000000 !important; /* Colore coerente con il pulsante */
    text-transform: none !important; /* Mantieni il testo normale */
}

/* Hover del pulsante */
.pmpro_btn.pmpro_btn-plain.pmpro_btn-password-toggle:hover {
    background-color: #e0e0e0; /* Sfondo più scuro al passaggio */
}

/* ###########################################  Stili form PMP */
/* Stile generale per tutti i dispositivi */
textarea.pmpro_form_input-textarea {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    font-size: 12px !important; /* Dimensione di default per textarea */
}

input.pmpro_form_input {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    font-size: 14px !important; /* Dimensione di default per input */
}

select.pmpro_form_input {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    font-size: 14px !important; /* Dimensione di default per select */
}

/* Regole per basse risoluzioni */
@media (max-width: 768px) {
    textarea.pmpro_form_input-textarea {
        font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
        font-size: 10px !important; /* Riduci dimensione per textarea su dispositivi piccoli */
    }

    input.pmpro_form_input {
        font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
        font-size: 14px !important; /* Riduci dimensione per input su dispositivi piccoli */
    }

    select.pmpro_form_input {
        font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
        font-size: 14px !important; /* Riduci dimensione per select su dispositivi piccoli */
    }
}

/* ######### Regola dimensioni testo nelle conferme iscrizione PMP */
#pmpro_confirmation-1 p {
    font-family: 'Poppins', sans-serif !important; /* Applica il font Poppins */
    font-size: 12px !important; /* Regola la dimensione */
    line-height: 1.5; /* Regola l'interlinea per un aspetto migliore */
}


/* ######### Controlla tutti i bottoni area PMP */
/* Stile base del bottone */
input[type="submit"].button.button-primary {
    background-color: #39b0e1 !important; /* Sfondo base */
    color: #ffffff !important; /* Colore del testo base */
    transition: background-color 0.3s ease, color 0.3s ease !important; /* Transizione fluida */
	border: none !important; /* Rimuove tutti i bordi */
}

/* Stile hover del bottone */
input[type="submit"].button.button-primary:hover {
    background-color: #88cfed !important; /* Sfondo hover */
    color: #ffffff !important; /* Colore del testo hover */
}

/* ############### allineamenti form adesione membership PMP */
/* Forza lo spostamento dell'intero gruppo (label + campo "Conferma Password") */
.pmpro_form_field-password:nth-of-type(2) {
    position: relative !important; /* Abilita lo spostamento */
    margin-top: 10px !important; /* Sposta il gruppo verso il basso */
    display: block !important; /* Forza il layout corretto */
}
/* Controlla il margine inferiore del gruppo "Password" per schermi piccoli */
@media (max-width: 768px) {
    .pmpro_form_field-password:first-of-type {
        margin-bottom: -15px; /* Regola il margine inferiore specifico */
    }
}
/* Label "Conferma Password" */
.pmpro_form_field-password:nth-of-type(2) label {
    margin-bottom: 8px !important; /* Spazio tra label e campo */
    display: block !important; /* Posiziona sopra l'input */
    font-weight: bold; /* Migliora visibilità */
}
/* Campo "Conferma Password" */
.pmpro_form_field-password:nth-of-type(2) input {

    display: inline-block !important; /* Evita eventuali interferenze */
    width: 100%; /* Adatta il campo */
}
/* Controllo del margine superiore e inferiore del label "Password" */
.pmpro_form_field-password label[for="password"] {
    margin-bottom: -8px; /* Margine sotto il label */
}

/* ############## Controllo bottone e link testuale che compaiono quando si linka a pagine protette */
.pmpro .pmpro_btn {
    color: #ffffff !important; /* Cambia il colore del testo in bianco */
    transition: background-color 0.3s ease, color 0.3s ease; /* Effetto di transizione per hover */
}

.pmpro .pmpro_btn:hover {
    color: #ffffff !important; /* Cambia il colore del testo in blu al passaggio del mouse */
    text-decoration: none !important; /* Mantiene la sottolineatura disattivata */
}

div.pmpro_card_actions {
    font-size: 14px !important; /* Forza la dimensione del testo */
}


/* ############## Correzione larghezza campi email e conferma email al check PMP*/
@media (max-width: 768px) {
    .pmpro_form_field-email input,
    .pmpro_form_field-bconfirmemail input {
        width: 100%; /* Forza i campi a occupare il 100% del contenitore */
        box-sizing: border-box; /* Include padding e bordo nella larghezza totale */
    }
}


/* ############## Forza i campi al check nome e cognome su due righe al check PMP*/
@media (max-width: 768px) {
    .pmpro_checkout {
        flex-wrap: wrap !important; /* Forza i campi su più righe */
    }

    .pmpro_form_field.pmpro_first_name,
    .pmpro_form_field.pmpro_last_name {
        flex: 1 1 100% !important; /* I campi occupano il 100% della larghezza */
        max-width: 100% !important; /* Assicura che non ci siano limiti di larghezza */
        box-sizing: border-box; /* Per evitare overflow */
    }
}

/* ############## "Tuo livello" button in Livelli*/
.pmpro_section_content .pmpro_btn.pmpro_btn-outline {
    color: #39b0e1 !important; /* Forza il colore del testo */
}

/* ############## "Contiene la larghezza dei campi imput nel profilo PMP, a basse risoluzioni*/
@media (max-width: 768px) {
    .pmpro_form_field {
        width: 100%; /* Imposta la larghezza del contenitore dei bottoni */
    }

    .pmpro_form_input {
        width: 100%; /* Adatta la larghezza degli input al contenitore */
        box-sizing: border-box; /* Include il padding nella larghezza */
    }
}