/*
 * Ajustes próprios do site — carregado depois de todo o CSS do Elementor.
 *
 * O CSS gerado pelo Elementor não é editado em lugar nenhum: ele continua idêntico ao de
 * produção. Tudo que muda em relação ao site em WordPress mora aqui.
 *
 * Regra de ouro deste arquivo: não redeclarar nada que o Elementor já define. Cada
 * propriedade repetida aqui é uma chance de divergir do site original — foi o que
 * aconteceu quando este arquivo fixava `height` e `line-height` no <select>: os campos
 * do popup têm 54px, mas os dos formulários embutidos nas páginas têm 56px, e a página
 * inteira encolhia 4px.
 */

/* --------------------------------------------------------------------------------------
 * Lista aberta dos selects
 *
 * O CSS customizado do widget de formulário (em uploads/elementor/css/post-761.css) traz
 * duas regras globais, sem escopo nenhum:
 *
 *     option        { padding: 100px; background: white; color: #333; font-weight: 600 }
 *     input, select { padding: 15px !important }
 *
 * O `padding: 100px` deixava cada opção com 221px de altura — a lista de países, com 16
 * itens, passava de 3.500px — e o fundo branco com texto cinza brigava com o fundo preto.
 *
 * Só o dropdown aberto muda aqui. O campo fechado continua exatamente como em produção.
 * ----------------------------------------------------------------------------------- */

/* Zera a regra global `option`, que vaza para a página inteira. */
option {
    padding: 0;
    background: none;
    color: inherit;
    font-weight: inherit;
}

.elementor-form .elementor-select-wrapper {
    /* Faz o navegador desenhar o dropdown nativo (fundo, scrollbar e destaque) em modo
       escuro. É o que dá um resultado consistente entre Chrome, Edge e Firefox.
       Não afeta o campo fechado, que já tem cor e fundo definidos pelo Elementor. */
    color-scheme: dark;
}

.elementor-form .elementor-select-wrapper select option {
    padding: 10px 16px;
    min-height: 40px;
    background-color: #141414;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}

/* O Chrome ignora `background-color` sozinho na opção destacada; o gradiente sólido é a
   forma que ele respeita. */
.elementor-form .elementor-select-wrapper select option:checked,
.elementor-form .elementor-select-wrapper select option:hover {
    background: #2e2e2e linear-gradient(0deg, #2e2e2e 0%, #2e2e2e 100%);
    color: #fff;
}

.elementor-form .elementor-select-wrapper select option:disabled {
    color: #6b6b6b;
}

/* --------------------------------------------------------------------------------------
 * Âncora "Solicite uma demonstração"
 *
 * Os botões das páginas Vídeo Nativo e Display Nativo apontam para #form-demonstracao,
 * mas o WordPress nunca colocou esse id em lugar nenhum — os links estão mortos também em
 * produção. O id passou a ser gerado na seção do formulário próprio da página; aqui só
 * fica a rolagem suave até ele.
 * ----------------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* --------------------------------------------------------------------------------------
 * Toast de confirmação de envio
 *
 * O Elementor Pro não chega a exibir a confirmação de envio (o handler dele quebra antes)
 * e mostra os erros em dois lugares, com um ícone que não carrega. Os toasts fazem os
 * dois papéis — ver public/js/monety.js.
 *
 * O z-index precisa superar o do popup de contato, que usa 1999999999.
 * ----------------------------------------------------------------------------------- */

#monety-toasts {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: max-content;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.monety-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 8px;
    color: #fff;
    font-family: "Eina01", Roboto, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    pointer-events: auto;
    animation: monety-toast-entrada 0.22s ease both;
}

@keyframes monety-toast-entrada {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.monety-toast--saindo {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.monety-toast--sucesso {
    background: #12873f;
}

.monety-toast--erro {
    background: #b4231c;
}

.monety-toast__icone {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/*
 * O Elementor insere o erro em dois lugares — ao lado do campo e abaixo do botão — e com
 * um ícone que não carrega (aparece um quadrado vazio). Quem comunica agora é o toast.
 */
.elementor-form .elementor-message-danger {
    display: none;
}

/*
 * Sem a mensagem ao lado do campo, a borda passa a ser a única pista de onde corrigir.
 * O !important é necessário: a regra que o Elementor gera para a cor da borda tem seis
 * classes de especificidade (.elementor-498 .elementor-element.elementor-element-3b64e7a
 * .elementor-field-group .elementor-field:not(...)), e vencer isso só com seletor exigiria
 * repetir o id da página — que muda a cada formulário.
 */
.elementor-form .elementor-field-group.elementor-error .elementor-field-textual,
.elementor-form .elementor-field-group.elementor-error .elementor-select-wrapper select {
    border-color: #b4231c !important;
}

@media (max-width: 767px) {
    #monety-toasts {
        top: 16px;
    }

    .monety-toast {
        padding: 12px 16px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .monety-toast,
    .monety-toast--saindo {
        animation: none;
        transition: none;
        transform: none;
    }
}