/* =============================================================================
   UX Enhancements - Fase 4 (Byte in Motion)
   Microinteracoes, estados de foco acessiveis e respeito a prefers-reduced-motion.
   Arquivo carregado por ultimo (depois de style.css) para complementar, nao
   substituir, o tema saas-classic.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Scroll fluido em mobile
   Desativa o "pull-to-refresh" nativo (Chrome Android) e o encadeamento de
   overscroll que provocavam a sensacao de recarregamento/reset visual ao
   deslizar a pagina. "contain" mantem o scroll normal dentro do documento,
   apenas impedindo o gesto de refresh e o scroll-chaining para o navegador.
   Suportado por Android/Chrome e iOS 16+; ignorado com seguranca em versoes
   antigas (sem efeito colateral). A barra de progresso continua intacta.
-------------------------------------------------------------------------------- */
html,
body {
    overscroll-behavior-y: contain;
}

/* -----------------------------------------------------------------------------
   1. Microinteracoes em botoes / CTAs
   Transicao suave de elevacao + sombra ao passar o mouse e ao focar.
-------------------------------------------------------------------------------- */
.saas_sign_up_btn a,
.saas_btn a,
.contact-page-form__submit,
.demo-form-panel__submit,
.salvar-cookies {
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease;
    will-change: transform;
}

.saas_sign_up_btn a:hover,
.saas_btn a:hover,
.contact-page-form__submit:hover,
.demo-form-panel__submit:hover,
.salvar-cookies:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -10px rgba(13, 35, 67, 0.45);
}

.saas_sign_up_btn a:active,
.saas_btn a:active,
.contact-page-form__submit:active,
.demo-form-panel__submit:active,
.salvar-cookies:active {
    transform: translateY(-1px);
}

/* -----------------------------------------------------------------------------
   2. Microinteracoes em cards
-------------------------------------------------------------------------------- */
.service_content_box,
.solution-service__card,
.contact-page-benefits__card {
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.service_content_box:hover,
.solution-service__card:hover,
.contact-page-benefits__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(13, 35, 67, 0.35);
}

/* -----------------------------------------------------------------------------
   3. Icones sociais e flutuantes
-------------------------------------------------------------------------------- */
.s2_footer_social a,
.whatsapp-fixo a,
.saas-classic-scrollup {
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.s2_footer_social a:hover,
.whatsapp-fixo a:hover {
    transform: translateY(-3px) scale(1.05);
}

.saas-classic-scrollup:hover {
    transform: translateY(-3px);
}

/* -----------------------------------------------------------------------------
   4. Estados de foco acessiveis (teclado)
   Muitos temas removem o outline; aqui restauramos um anel visivel apenas
   para navegacao por teclado (:focus-visible), sem poluir o clique do mouse.
-------------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1f6feb;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Campos de formulario: realce suave ao focar. */
.form-control:focus {
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.18);
    border-color: #1f6feb;
}

/* -----------------------------------------------------------------------------
   5. Feedback de envio de formulario (estado de carregamento)
   Acionado via JS adicionando a classe is-loading ao botao submit.
-------------------------------------------------------------------------------- */
.contact-page-form__submit.is-loading,
.demo-form-panel__submit.is-loading {
    pointer-events: none;
    opacity: 0.75;
    position: relative;
}

.contact-page-form__submit.is-loading::after,
.demo-form-panel__submit.is-loading::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.6em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bim-spin 0.7s linear infinite;
}

@keyframes bim-spin {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------------
   5b. Aviso de envio de formulario sem JavaScript (fallback POST)
   Exibido quando o handler redireciona de volta com ?enviado=1 ou ?erro=1.
-------------------------------------------------------------------------------- */
.bim-form-alert {
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.bim-form-alert--ok {
    background: #e6f4ea;
    color: #14532d;
    border: 1px solid #9ad3ad;
}

.bim-form-alert--err {
    background: #fdecea;
    color: #7a1c12;
    border: 1px solid #f0a79c;
}

/* -----------------------------------------------------------------------------
   6. Respeito a prefers-reduced-motion
   Para quem pede menos movimento, neutralizamos transformacoes/animacoes e
   garantimos que os elementos .wow (revelados via JS) fiquem sempre visiveis.
-------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .saas_sign_up_btn a:hover,
    .saas_btn a:hover,
    .contact-page-form__submit:hover,
    .demo-form-panel__submit:hover,
    .salvar-cookies:hover,
    .service_content_box:hover,
    .solution-service__card:hover,
    .contact-page-benefits__card:hover,
    .s2_footer_social a:hover,
    .whatsapp-fixo a:hover,
    .saas-classic-scrollup:hover {
        transform: none;
    }

    /* Garante visibilidade caso o WOW nao tenha revelado o elemento. */
    .wow {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* -----------------------------------------------------------------------------
   7. Skip-link (pular para o conteudo)
   Primeiro elemento focavel do body; invisivel ate receber foco por teclado.
-------------------------------------------------------------------------------- */
.bim-skip-link {
    position: absolute;
    left: 8px;
    top: -56px;
    z-index: 3000;
    padding: 10px 16px;
    background: #08090b;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.18s ease;
}

.bim-skip-link:focus {
    top: 8px;
    outline: 3px solid #1f6feb;
    outline-offset: 2px;
}

/* O alvo do skip-link nao deve exibir outline ao receber foco programatico. */
#bim-conteudo:focus {
    outline: none;
}

/* -----------------------------------------------------------------------------
   8. Navegacao por teclado nos menus suspensos (desktop)
   O tema revela os submenus apenas no :hover (opacity/visibility). Aqui
   espelhamos esse estado para quem navega por teclado.

   IMPORTANTE: usamos :has(:focus-visible) e NAO :focus-within. O :focus-within
   tambem casa com o foco gerado por CLIQUE de mouse, entao clicar num rotulo
   (<a href="#">) deixava o menu "preso" aberto; ao passar o mouse em outra aba
   ela tambem abria, gerando a sobreposicao de dois menus. O :focus-visible so
   casa com foco de teclado, mantendo a acessibilidade sem prender no clique.
-------------------------------------------------------------------------------- */
.saas_two_main_header .dropdown:has(:focus-visible) > .dropdown-menu {
    top: 50px;
    opacity: 1;
    visibility: visible;
}

/* -----------------------------------------------------------------------------
   9. Contraste (WCAG AA)
-------------------------------------------------------------------------------- */
/* Botao primario: o gradiente original (#ff7272 -> #ee4242) deixava o texto
   branco abaixo de 4.5:1 na porcao clara. Escurecemos mantendo a identidade
   vermelha (branco sobre #d12030/#b81522 fica acima de 5:1). */
.contact-page-form__submit,
.demo-form-panel__submit {
    background: linear-gradient(135deg, #d12030 0%, #b81522 55%, #8f1019 100%);
}

/* Texto de apoio dos cards: cinza um pouco mais escuro para folga de contraste. */
.contact-page-benefits__support {
    color: #4a5263;
}