body.wp-admin .wrap h1 {
    color: #0073aa;
}

body.wp-admin .search-box {
    margin-bottom: 15px;
}

body.wp-admin .dashicons {
    font-size: 20px;
    margin-right: 8px;
}


/*Botoes ADMIN PAGE VIP */

.vip-header-buttons {
    display: flex;
    align-items: center;  /* Alinha verticalmente no centro */
    gap: 10px;            /* Espaço entre os botões */
}

/* Estilo para o botão de verificação */
.vip-header-buttons button#verificar-vips-agora {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    text-shadow: none;
    top: -3px; /* alinha com o botão de adicionar */
    margin-left: 4px;
    border: 1px solid #0073aa;
    border-radius: 3px;
    background: #0073aa;
    font-size: 13px;
    font-weight: 400;
    line-height: 2.15384615;
    color: #f6f7f7;
    padding: 0 10px;
    min-height: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.vip-header-buttons button#verificar-vips-agora:hover {
    background: #e1e4e7;
    border-color: #1e65a0;
    color: #1e65a0;
}


/* Estilos gerais para a modal */
.vip-modal {
    display: none; /* Inicialmente oculta */
    position: fixed; /* Fixa a posição da modal na tela */
    top: 0;
    left: 0;
    width: 100%; /* Modal ocupa toda a largura da tela */
    height: 100%; /* Modal ocupa toda a altura da tela */
    background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro com opacidade */
    z-index: 1000; /* Garantir que a modal fique acima de outros elementos */
    overflow: auto; /* Permite rolagem se o conteúdo for maior que a tela */
}

/* Estilo da janela de conteúdo da modal */
.vip-modal-content {
    position: relative;
    margin: 5% auto; /* Centraliza a janela verticalmente */
    background-color: white; /* Cor de fundo da modal */
    padding: 20px; /* Espaçamento interno */
    width: 600px; /* Largura maior da janela da modal */
    max-width: 90%; /* Limita a largura em dispositivos menores */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra ao redor da modal */
    border-radius: 8px; /* Bordas arredondadas */
}

/* Título */
.vip-modal-content h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Estilo das labels e inputs */
.vip-modal-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.vip-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.vip-note {
    font-size: 12px;
    color: #777;
    margin-top: -10px;
    display: block;
}

/* Alerta de erro */
.vip-warning {
    color: red;
    margin-top: 10px;
}

/* Estilos para os botões */
.vip-modal-buttons {
    display: flex;
    justify-content: flex-end; /* Alinha os botões à direita */
    gap: 10px;
}

.vip-modal-buttons button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

/* Botão de adicionar VIP */
#vip-add-btn {
    background-color: #4CAF50; /* Verde para o botão de adicionar */
    color: white;
    border: none;
}

#vip-add-btn:disabled {
    background-color: #ddd; /* Cor do botão desabilitado */
}

/* Botão de cancelar */
#vip-cancel-btn {
    background-color: #f44336; /* Vermelho para o botão cancelar */
    color: white;
    border: none;
}

/* Efeito de hover nos botões */
.vip-modal-buttons button:hover {
    opacity: 0.8;
}



/* Estilo para o campo de entrada */
#vip-username, #vip-email {
    position: relative;  /* Tornar os campos de entrada o contêiner de posicionamento para a lista de sugestões */
    width: 500px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* Estilos para a lista de sugestões */
.suggestions {
    position: absolute;  /* Faz a lista de sugestões ficar em relação ao campo */
    z-index: 999;  /* Garante que fique sobre outros elementos */
    background-color: rgba(255, 255, 255, 0.9);  /* Fundo semi-transparente */
    border: 1px solid #ccc;  /* Borda para diferenciar */
    width: 100%;  /* Faz a lista ter o mesmo tamanho do input */
    max-width: 500px;  /* Limite máximo */
    max-height: 200px;  /* Limita a altura das sugestões */
    overflow-y: auto;  /* Faz com que a lista seja rolável */
    display: none;  /* Inicialmente escondida */
}


#username-suggestions li, #email-suggestions li {
    padding: 8px;  /* Espaçamento nas opções */
    cursor: pointer;  /* Mostra o cursor como mãozinha */
}

#username-suggestions li.selected, #email-suggestions li.selected {
    background-color: #007bff;  /* Cor de fundo para o item selecionado */
    color: white;  /* Cor do texto quando o item é selecionado */
}

/* Estilo para o campo de input para garantir que as sugestões fiquem abaixo dele */
#vip-username, #vip-email {
    position: relative;  /* Necessário para o posicionamento absoluto das sugestões */
}


/*Modal edit*/

/* Estilização da modal de edição de VIP */
.vip-edit-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.vip-edit-modal .vip-modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.vip-edit-modal .vip-close {
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}


/* Style Tabela Admin*/

.expiring-soon {
    background-color: #fff3cd !important; /* amarelo claro */
}

.tablenav-pages {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    gap: 1px;
    font-size: 14px;
}

.tablenav-pages a {
    padding: 6px 10px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    color: #0073aa;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.tablenav-pages a:hover {
    background-color: #e2e2e2;
    color: #000;
    border-color: #aaa;
}

.tablenav-pages .current-page {
    background-color: #0073aa;
    color: #fff;
    font-weight: bold;
    border-color: #0073aa;
    cursor: default;
    pointer-events: none;
}



/* HOME STATUS */

.vip-status {
    padding: 14px 18px;
    background: linear-gradient(to right, rgba(0,0,0,0) 20%, rgba(117,0,255,1));
    /*background: linear-gradient(to right, #e0f7ff, #f5fcff);*/
    border-left: 5px solid rgba(117,0,255,1);
    border-radius: 8px;
    font-size: 15px;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.5;
    width: 100%;
    margin-left: 20px, 0;
}

.vip-status strong {
    color: rgba(117,0,255,1);
}





/* CSS Página Web*/

/* Centralizar a página */
.vip-container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    height: 100vh;           /* Faz com que a altura seja 100% da tela */
    flex-direction: row;
    gap: 50px;               /* Espaço entre as opções de VIP */
}

/* Estilo para cada opção de VIP */
.vip-option {
    text-align: center;
    width: 300px;  /* Largura das opções VIP */
    height: 500px;
    padding: 20px; /* Adiciona espaçamento interno */
    background: #0e0b1c;
    /*border: 4px solid rgba(117,0,255,1);*/ /* Borda ao redor do container */
    border-radius: 15px;   /* Borda arredondada */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombrinha suave */
}

/* Título acima da imagem */
.vip-option h3 {
    font-size: 24px;   /* Tamanho maior para o título */
    font-weight: bold; /* Deixa o título em negrito */
    margin-bottom: 15px; /* Espaço abaixo do título */
    color: #333;       /* Cor escura para o título */
}

/* Estilo para a imagem do VIP */
.vip-option img {
    max-width: 100%; /* Faz com que a imagem ocupe toda a largura disponível */
    height: auto;    /* Mantém a proporção da imagem */
    border-radius: 8px; /* Borda arredondada para a imagem */
    margin-bottom: 20px; /* Espaço abaixo da imagem */
}

.vip-option .vip-title {
    font-size: 32px;
    font-weight: bold;
    background: linear-gradient(180deg, rgba(122, 7, 252, 1) 0%, rgba(91, 8, 169, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    /*color: rgba(117,0,255,1);*/ /* Cor de destaque */
    text-transform: uppercase;
    margin-bottom: 15px;
}

.vip-preco{
    font-size: 24px;
    color:#ddd;
    font-weight: bold;
}


/* Estilo do botão de compra */
.vip-btn {
    background-color: rgba(117,0,255,1); /* Cor de fundo azul */
    color: white;              /* Cor do texto */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: 100%; /* Faz o botão ocupar a largura do container */
}

.vip-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}


/* Estilo ao passar o mouse no botão */
.vip-btn:hover {
    background-color: rgb(78, 1, 165); /* Cor ao passar o mouse */
}

/* Estilo do botão quando o usuário não está logado */
.vip-btn.logged-out {
    background-color: #ccc; /* Cor do botão quando não está logado */
    /*cursor: not-allowed;*/    /* Cursor de "não permitido" */
}

/* Remover a barra lateral e widgets da página */
body.page-template-vip-page-template .sidebar {
    display: none; /* Esconde a sidebar */
}

body.page-template-vip-page-template .widget {
    display: none; /* Esconde os widgets */
}


.vip-aviso {
    max-width: 600px;
    margin: 30px auto;
    padding: 20px 25px;
    background: linear-gradient(to right, rgba(0,0,0,0) 20%, rgba(117,0,255,1));
    /*background-color: #f0f9ff;*/
    border-left: 6px solid rgba(117,0,255,1);
    border-radius: 8px;
    font-size: 16px;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    line-height: 1.6;
}

.vip-aviso strong{
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}

.vip-aviso a {
    font-weight: bold;
    /*color: #1890ff;*/
    color: rgba(117,0,255,1);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    text-transform: uppercase;
}
.vip-aviso a:hover {
    text-decoration: underline;
}




/* PAGINA DE CONFIRMACAO */

.vip-confirmation {
    max-width: 450px;
    margin: 120px auto;
    padding: 35px 25px;
    text-align: center;
    border-radius: 20px;
    background: rgb(10, 0, 15, 0.80);
    color:#ddd;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.3s ease-in-out;
}
.vip-spinner {
    width: 55px;
    height: 55px;
    border: 6px solid #eee;
    border-top: 6px solid rgba(117,0,255,1);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 30px auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vip-confirmation h2 {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
}

.vip-confirmation p {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.6;
}


.vip-confirmation-message .success{
    color: rgba(117,0,255,1);
}

.vip-confirmation-message a {
    color: rgba(117,0,255,1);
}

.vip-confirmation-message a:hover {
    color: rgb(79, 3, 165);
    text-decoration: dotted;
}

.vip-success {
    color: green;
    font-size: 20px;
    margin-top: 20px;
}
.vip-error {
    color: red;
    font-size: 20px;
    margin-top: 20px;
}