/**
 * Theme Name:     Hello Elementor - Filho
 * Author:         Valdinei Aparecido Teodoro
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-filho
 * Description:    Hello Elementor é um tema WordPress leve e minimalista que foi criado especificamente para funcionar perfeitamente com o plugin construtor de sites Elementor. O tema é gratuito, de código aberto e projetado para usuários que desejam um site flexível, fácil de usar e personalizável. O tema, que é otimizado para desempenho, fornece uma base sólida para os usuários construírem seus próprios designs exclusivos usando o construtor de sites de arrastar e soltar Elementor. Sua simplicidade e flexibilidade o tornam uma ótima escolha para iniciantes e criadores de sites experientes.
 */

















.popup_content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    overflow-y: auto;
    border-radius: 5px;
    display: none; /* Inicialmente escondido */
    width: 60%; /* Padrão para telas maiores */
    max-height: 80vh; /* Altura máxima de 80% da altura da tela */
}

/* Estilos para tablets e celulares */
@media (max-width: 768px) {
    .popup_content {
        width: 80%; /* Ajusta a largura para 80% da tela para tablets */
    }
}

@media (max-width: 480px) {
    .popup_content {
        width: 95%; /* Ajusta a largura para 95% da tela para celulares */
    }
}

.popup_close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    font-size: 30px; /* Tamanho adequado para fácil interação */
    font-weight: bold;
    padding: 10px;
}

.meu-botao-popup {
    /* Estilos existentes para o botão */
}

#popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none; /* Inicialmente escondido */
}





.meu-botao-popup {
    background-color: #f5f5f5; /* Fundo cinza claro */
    color: #000; /* Texto preto */
    border: 1px solid #ddd; /* Borda sutil */
    padding: 5px 8px;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    text-decoration: none;
}











/* =========================================================
   eCATÓLICO — WORDPRESS LOGIN (VERSÃO CORRIGIDA)
   ========================================================= */

:root {
    --bg: #030026;
    --purple: #5100FF;
    --purple-glow: rgba(81, 0, 255, .45);
    --blue: #080B78;
    --cyan: #63F5E8;
    --white: #FFFFFF;
    --wp-text: #3c434a;

    --input-pink: #F7CBCB;
    --input-blue: #E8F0FE;
}

/* =========================================================
   BODY
   ========================================================= */

html,
body.login {
    min-height: 100%;
}

body.login {
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    background: #030026 !important;
    color: #3c434a;
    overflow-x: hidden;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    box-sizing: border-box;
}

/* =========================================================
   CONTAINER PRINCIPAL — CORRIGIDO (menor)
   ========================================================= */

body.login #login {
    position: relative;
    z-index: 10;

    width: 400px !important;        /* CORRIGIDO: antes 620px */
    max-width: calc(100vw - 30px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* =========================================================
   SANTA TERESINHA (mantido)
   ========================================================= */

body.login #login::before {
    content: "";
    position: fixed;
    width: 400px;
    height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
    background-image: url("https://cindyferrarezi.com.br/wp-content/uploads/2026/08/santa-Terezinha.avif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 400px 600px;
    opacity: .34;
    pointer-events: none;
}

/* =========================================================
   ESCURECIMENTO (mantido)
   ========================================================= */

body.login #login::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            rgba(3, 0, 38, 0) 15%,
            rgba(3, 0, 38, .28) 55%,
            rgba(3, 0, 38, .72) 100%
        );
}

/* =========================================================
   LOGO (mantido)
   ========================================================= */

.login h1 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 22px !important;
    padding: 0 !important;
}

.login h1 a {
    display: block;
    width: 280px !important;
    height: 135px !important;
    margin: 0 !important;
    background-image:
        url("https://cindyferrarezi.com.br/wp-content/uploads/2026/08/ecatolico-sem-fundo.avif") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    text-indent: -9999px;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform .25s ease;
}

.login h1 a:hover {
    transform: translateY(-2px);
}

/* =========================================================
   FORMULÁRIO — CORRIGIDO (padding e altura mínima)
   ========================================================= */

.login form {
    position: relative;
    z-index: 20;
    width: 100% !important;
    max-width: none !important;
    min-height: auto;               /* CORRIGIDO: antes 440px, agora automático */
    margin: 0 !important;
    padding: 30px 28px 28px !important;  /* CORRIGIDO: antes 44px 50px 42px */
    box-sizing: border-box;
    background:
        linear-gradient(
            180deg,
            rgba(13, 10, 63, .72) 0%,
            rgba(5, 4, 39, .80) 100%
        ) !important;
    border: 1px solid var(--purple) !important;
    border-radius: 4px !important;
    box-shadow:
        0 0 15px rgba(81, 0, 255, .50),
        0 0 35px rgba(81, 0, 255, .20),
        inset 0 0 30px rgba(81, 0, 255, .08) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
}

.login form::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            transparent 35%,
            rgba(81,0,255,.05)
        );
    pointer-events: none;
}

/* =========================================================
   LABELS (mantido)
   ========================================================= */

.login form label {
    display: block;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-bottom: 8px;
    text-shadow: none !important;
}

/* =========================================================
   INPUTS — CORRIGIDO (altura e margem reduzidas)
   ========================================================= */

.login form .input {
    width: 100% !important;
    height: 44px !important;        /* CORRIGIDO: antes 52px */
    box-sizing: border-box;
    margin: 0 0 16px !important;    /* CORRIGIDO: antes 22px */
    padding: 0 16px !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    color: #111111 !important;
    font-size: 16px !important;
    outline: none;
    box-shadow: none !important;
}

.login form p:first-of-type .input {
    background: var(--input-pink) !important;
}

.login form p:nth-of-type(2) .input {
    background: var(--input-blue) !important;
}

.login form .input:focus {
    background: #FFFFFF !important;
    border-color: var(--purple) !important;
    box-shadow:
        0 0 0 1px rgba(81,0,255,.35),
        0 0 15px rgba(81,0,255,.22) !important;
}

/* =========================================================
   LEMBRAR-ME — CORRIGIDO (alinhamento perfeito)
   ========================================================= */

.login form .forgetmenot {
    margin: 0 0 22px !important;    /* CORRIGIDO: antes 30px, agora mais compacto */
}

.login form .forgetmenot label {
    display: flex;                  /* mantido */
    align-items: center;           /* garante alinhamento vertical */
    gap: 10px;                     /* CORRIGIDO: antes 8px, agora um pouco mais */
    color: #FFFFFF !important;
    font-size: 14px !important;
    line-height: 1;               /* CORRIGIDO: evita desalinhamento */
    cursor: pointer;
}

.login form .forgetmenot input[type="checkbox"] {
    width: 16px !important;        /* CORRIGIDO: antes 14px, um pouco maior para toque */
    height: 16px !important;
    margin: 0 !important;
    accent-color: var(--purple);
    flex-shrink: 0;               /* impede que o checkbox encolha */
}

/* =========================================================
   BOTÃO — CORRIGIDO (altura menor)
   ========================================================= */

.login form .submit input {
    width: 100% !important;
    height: 44px !important;        /* CORRIGIDO: antes 52px */
    padding: 0 20px !important;
    box-sizing: border-box;
    background:
        linear-gradient(
            180deg,
            #0C108D 0%,
            #080B78 100%
        ) !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 4px !important;
    color: #FFFFFF !important;
    font-size: 15px !important;     /* CORRIGIDO: antes 17px */
    font-weight: 700 !important;
    text-shadow: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.login form .submit input:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 14px rgba(81,0,255,.40) !important;
}

/* =========================================================
   LINKS — CORRIGIDO (espaçamento reduzido)
   ========================================================= */

.login #nav,
.login #backtoblog {
    padding: 0 !important;
    margin-top: 12px !important;    /* CORRIGIDO: antes 18px */
}

.login #nav a,
.login #backtoblog a {
    padding: 0 !important;
    color: #FFFFFF !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--cyan) !important;
}

/* =========================================================
   TEXTOS WORDPRESS (mantido)
   ========================================================= */

body.login,
body.login .message,
body.login .success,
body.login .notice,
body.login .privacy-policy-page-link,
body.login .privacy-policy-page-link a {
    color: #3c434a;
}

/* =========================================================
   MOBILE (ajustado)
   ========================================================= */

@media (max-width: 600px) {
    body.login {
        padding: 12px 5px !important;
    }

    body.login #login {
        width: 100% !important;
        max-width: none !important;
    }

    body.login #login::before {
        width: 400px;
        height: 600px;
        background-size: 400px 600px;
        opacity: .27;
    }

    .login h1 {
        margin-bottom: 14px !important;
    }

    .login h1 a {
        width: 225px !important;
        height: 110px !important;
    }

    .login form {
        width: 100% !important;
        min-height: auto;
        padding: 22px 16px 24px !important;   /* ainda mais compacto no mobile */
    }

    .login form .input {
        height: 42px !important;
        margin-bottom: 14px !important;
    }

    .login form .submit input {
        height: 42px !important;
        font-size: 14px !important;
    }

    .login form .forgetmenot {
        margin-bottom: 18px !important;
    }

    .login #nav,
    .login #backtoblog {
        margin-top: 10px !important;
    }
}

/* =========================================================
   MOBILE MUITO PEQUENO (mantido)
   ========================================================= */

@media (max-width: 380px) {
    body.login {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .login form {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}