/**
 * Estilos do Meu Plugin Perfil
 * Arquivo: assets/css/mpp-style.css
 */

/* ======================================= */
/* Estilos gerais da página de perfil */
/* ======================================= */

.mpp-profile-wrapper {
    text-align: center;
}

.mpp-profile-header {
    padding: 30px 0;
}

.mpp-profile-header h1 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #FFFFFF;
}

.mpp-profile-avatar {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.mpp-profile-avatar .mpp-avatar-img {
    border-radius: 50%;
    /*border: 3px solid #FFC107;*/ /* Borda amarela no avatar */
    width: 150px; /* Tamanho do avatar */
    height: 150px; /* Tamanho do avatar */
    object-fit: cover;
}

.mpp-profile-avatar .mpp-edit-avatar-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    /*background-color: #FFC107;*/ /* Cor do ícone de edição */
    border-radius: 50%;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mpp-profile-avatar .mpp-edit-avatar-icon .mpp-icon-pencil {
    color: #5D4037; /* Cor do ícone */
    font-size: 1.2em;
}

.mpp-profile-nome {
    font-size: 1.8em;
    margin-top: 10px;
    color: #FFFFFF;
}

/* Estilos do Acordeão */
.mpp-profile-lista-acordeao {
    margin-top: 30px;
    text-align: left; /* Alinha o texto dentro do acordeão à esquerda */
}

.mpp-acordeao-item {
    background-color: #5D4037; /* Cor de fundo do item do acordeão */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador sutil */
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden; /* Garante que o conteúdo não vaze */
}

.mpp-acordeao-titulo {
    padding: 18px 20px;
    background-color: #5D4037; /* Mesma cor de fundo para "misturar" */
    color: #FFFFFF;
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease;
}

.mpp-acordeao-titulo:hover {
    background-color: #6A4B40; /* Um pouco mais claro no hover */
}

.mpp-acordeao-titulo i {
    margin-right: 15px;
    font-size: 1.3em;
    /*color: #FFC107;*/ /* Cor dos ícones */
}

.mpp-acordeao-seta {
    font-size: 1.5em;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.mpp-acordeao-item.mpp-ativo .mpp-acordeao-seta {
    transform: rotate(90deg); /* Gira a seta quando o acordeão está ativo */
}

.mpp-acordeao-conteudo {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Transição suave para abrir/fechar */
    background-color: #6A4B40; /* Cor de fundo do conteúdo expandido */
    color: #E0E0E0; /* Cor do texto no conteúdo */
}

.mpp-acordeao-item.mpp-ativo .mpp-acordeao-conteudo {
    max-height: 500px; /* Ajuste conforme necessário para acomodar o maior conteúdo */
    padding: 20px; /* Adiciona padding quando aberto */
}

.mpp-acordeao-conteudo p {
    margin-bottom: 1em;
}

.mpp-button {
    display: inline-block;
    padding: 10px 20px;
    /*background-color: #FFC107;*/
    color: #5D4037;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
}

.mpp-button:hover {
    background-color: #FFD54F;
}

.mpp-button-red {
    background-color: #E53935; /* Vermelho para o botão de sair */
    color: #FFFFFF;
}

.mpp-button-red:hover {
    background-color: #F44336;
}

/* ================================================================ */
/* Estilos para o Template de Perfil: Profile Page Meu Perfil */
/* ================================================================ */

.mpp-profile-card-wrapper {
    background: linear-gradient(-30deg, #000000, #242424);
    border-radius: 12px;
    border-left: 1px solid #202020;
    border-right: 1px solid #202020;
    border-bottom: 1px solid #202020;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Sombra para dar profundidade */
    width: 420px;
    max-width: 500px; /* Largura máxima do cartão */
    overflow: hidden; /* Garante que bordas arredondadas funcionem bem */
    color: #A63939;
    font-family: Montserrat, sans-serif; /* Ou sua fonte preferida */
    margin: 0px auto;
}

@media (max-width: 768px) {
    .mpp-profile-card-wrapper {
        width: 350px;
        margin-top: 0 !important;
    }
}

.mpp-profile-card-header {
    /* Garante que os elementos dentro dele possam ser posicionados */
    position: relative;
    padding: 20px; /* Ajuste o padding conforme necessário */
    display: flex;
    justify-content: space-between; /* Empurra o h2 para a esquerda e o link para a direita */
    align-items: center;
    width: 100%;
    background-color: #202020; /* Cor do cabeçalho do cartão */
    border-bottom: 1px solid #2f2f2f;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

/* Ajuste do h2 no header para que ele não empurre o botão de logout */
.mpp-profile-card-header h2 {
    color: #FFFFFF;
    font-size: 20px;
    margin: 0;
    font-weight: bold;
    flex-grow: 1; /* Permite que o título ocupe o espaço restante */
    text-align: left; /* Alinha o título à esquerda */
}

.mpp-profile-card-logout {
    /* Estilos para o link do ícone de sair */
    text-decoration: none; /* Remove sublinhado do link */
    color: inherit; /* Herda a cor do pai ou defina uma nova */
    display: flex; /* Para centralizar o ícone verticalmente se houver texto ou outro elemento */
    align-items: center;
}

.mpp-profile-card-logout .mpp-logout-icon {
    width: 25px; /* Exemplo: tamanho menor para o ícone de sair do cabeçalho */
    height: 25px;
    /* Adicione outros estilos específicos se precisar */
}

.mpp-profile-card-content {
    padding: 30px 25px; /* Padding interno do cartão */
    text-align: center;
}

.mpp-profile-card-info {
    margin-bottom: 30px;
}

.mpp-profile-card-name {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 0px;
    color: #ffffff; /* Nome em destaque */
}

.mpp-profile-card-email,
.mpp-profile-card-funcao {
    font-size: 16px;
    color: #ffffff;
    margin: 5px 0;
}

/* Estilos para a seção de datas */
.mpp-profile-card-dates {
    display: flex;
    justify-content: center; /* Centraliza as colunas de data */
    gap: 30px; /* Adiciona um espaçamento fixo entre os itens flexíveis */
    width: 100%;
    padding: 15px 0;
    box-sizing: border-box;
    background-color: #121212;
    border-radius: 8px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .mpp-profile-card-dates {
        gap: 10px;
    }
}

.mpp-profile-card-date-item {
    text-align: center;
    width: 120px; /* Defina uma largura fixa para cada caixa de data */
}

.mpp-profile-card-date-item span {
    display: block;
    font-size: 0.8em;
    color: #ffffff;
    margin-bottom: 5px;
    font-weight: normal;
    text-transform: uppercase;
    max-width: 70px; /* Mantém a quebra de linha dentro do rótulo */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2; /* Mantém o gap entre as linhas do rótulo pequeno */
    white-space: normal;
}

.mpp-profile-card-date-item p {
    display: block;
    font-size: 0.9em;
    color: #ffffff;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.mpp-profile-card-navigation ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.mpp-profile-card-navigation li {
    margin-bottom: 8px; /* Espaçamento entre os itens do menu */
}

.mpp-profile-card-navigation li:last-child {
    margin-bottom: 0;
}

.mpp-profile-card-navigation a {
    display: flex;
    align-items: center;
    background-color: #202020; /* Fundo dos itens do menu */
    padding: 8px 20px;
    border-radius: 8px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mpp-profile-card-navigation a:hover {
    background-color: #101010; /* Cor no hover */
}

.mpp-profile-card-navigation a i {
    color: #ffffff; /* Cor dos ícones do menu */
    margin-right: 15px;
    font-size: 1.3em;
}

.mpp-profile-card-navigation a .mpp-nav-arrow {
    margin-left: auto; /* Empurra a seta para a direita */
    font-size: 30px;
    color: #ffffff;
    padding-bottom: 5px;
}

.mpp-profile-card-navigation ul li a .mpp-nav-icon {
    width: 24px; /* Ajuste conforme o tamanho real desejado */
    height: 24px; /* Ajuste conforme o tamanho real desejado */
    margin-right: 10px; /* Espaçamento entre o ícone e o texto */
    vertical-align: middle; /* Ajuda a alinhar o ícone com o texto */
}

.mpp-profile-card-navigation ul li a {
    display: flex; /* Para alinhar o ícone e o texto lado a lado */
    align-items: center; /* Centraliza verticalmente o ícone com o texto */
}

/* ========================= Estilos página editar-perfil ====== */

.mpp-edit-profile-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.mpp-profile-photo-container {
    text-align: center;
    margin-bottom: 20px;
}

#mpp-profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    /*border: 3px solid #FFC107;*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Estilo para o formulário de edição de perfil */
.mpp-profile-edit-form {
    max-width: 500px; /* Limita a largura máxima do formulário */
    margin: 0 auto; /* Centraliza o formulário horizontalmente */
    padding: 20px; /* Adiciona espaçamento interno ao formulário */
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
    background-color: #202020;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.mpp-form-group {
    margin-bottom: 20px;
}

/* Estilo para os campos de entrada dentro do formulário de edição de perfil */
.mpp-text-input,
.mpp-password-input,
.mpp-file-input,
.mpp-email-input {
    width: 100%; /* Garantir que os campos ocupem 100% da largura */
    padding: 12px;
    margin-bottom: 5px;
    border: 1px solid #404040;
    border-radius: 4px;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    background-color: #2a2a2a;
    color: #ffffff;
    box-sizing: border-box;
}

/* Estilo específico para o campo de e-mail no formulário de edição de perfil */
.mpp-email-input {
    background-color: #212121 !important;
    color: #ffffff !important;
    border: 1px solid #404040;
    opacity: 0.7;
}

/* Estilo para o botão "Salvar Alterações" no formulário de edição de perfil */
.mpp-submit-button {
    background-color: #303030 !important;
    color: white !important;
    padding: 12px 20px !important;
    border: 1px solid #404040;
    border-radius: 4px !important;
    cursor: pointer;
    margin-top: 10px;
    width: auto;
    display: block;
    margin: 0 auto !important;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    justify-content: center !important;
    align-items: center !important;
}

/* Efeito de hover para o botão no formulário de edição de perfil */
.mpp-submit-button:hover {
    background-color: #111111;
}

/* Estilo para os rótulos dos campos dentro do formulário de edição de perfil */
.mpp-form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
    display: block;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    color: #ffffff;
}

/* Estilo específico para os campos de senha dentro do formulário de edição de perfil */
.mpp-password-container {
    position: relative;
    width: 100%;
}

.mpp-password-container .mpp-password-input {
    width: 100%;
    padding-right: 45px; /* Espaço para o ícone */
}

.mpp-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #ffffff;
    font-size: 16px;
    z-index: 2;
}

.mpp-password-toggle:hover {
    /*color: #FFC107;*/
}

.mpp-help-text {
    font-size: 12px;
    color: #cccccc;
    margin-top: 5px;
    margin-bottom: 0;
}

.mpp-password-help {
    text-align: center;
    margin-top: -10px;
    color: #cccccc;
    font-weight: 400;
    line-height: 12px;
    font-size: 12px;
}

/* Mensagens de feedback */
.mpp-message {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}

.mpp-message-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.mpp-message-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.mpp-profile-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px;
    border-radius: 4px;
    text-align: center;
    margin: 20px 0;
}

/* Responsividade para telas menores que 600px */
@media only screen and (max-width: 600px) {
    .mpp-profile-edit-form {
        margin-left: 20px; /* Adiciona margem à esquerda no mobile */
        margin-right: 20px; /* Adiciona margem à direita no mobile */
        padding: 30px;
    }

    .mpp-edit-profile-wrapper {
        padding: 10px;
    }

    /* Ajuste nos campos de e-mail para garantir visibilidade */
    .mpp-email-input {
        color: white !important; /* Garante que o e-mail seja visível no campo */
    }

    .mpp-form-group label,
    .mpp-text-input,
    .mpp-password-input,
    .mpp-file-input,
    .mpp-email-input,
    .mpp-help-text,
    .mpp-submit-button {
        font-size: 14px; /* Ajuste do tamanho da fonte para mobile */
    }
    
    #mpp-profile-photo {
        width: 120px;
        height: 120px;
    }
}

/* Ajustes para melhor integração com temas WordPress */
.mpp-profile-card-wrapper * {
    box-sizing: border-box;
}

.mpp-profile-edit-form * {
    box-sizing: border-box;
}

/* Estilos para garantir que os ícones FontAwesome funcionem */
.fa {
    font-family: FontAwesome;
}

/* Fallback para quando FontAwesome não estiver carregado */
.mpp-password-toggle .fa:before {
    content: "👁";
}

.mpp-password-toggle .fa-eye-slash:before {
    content: "🙈";
}


/*
 * Solução para centralizar e ajustar a cor do botão 'Salvar Alterações' em dispositivos móveis.
 * Aumentamos a especificidade para garantir que as regras sejam aplicadas.
 */
@media only screen and (max-width: 600px) {

    .mpp-profile-edit-form .mpp-submit-button {
        /* Garante que o botão ocupe 100% da largura, permitindo a centralização */
        width: 100% !important;
        background-color: #303030 ;

        /* Centraliza o botão horizontalmente */
        margin-left: auto !important;
        margin-right: auto !important;

        /* Garante que a cor do texto seja branca, ignorando outras regras de cor */
        color: #FFFFFF !important;
        font-size: 14px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);

        /* Alinha o texto dentro do botão ao centro */
        text-align: center;
        
        /* Ajuste do padding para evitar desalinhamento */
        padding: 10px 20px !important;
    }

}