/* Nav Menu Styling */
nav, .sitebuilder-page-header ul, header[data-v] ul, #header ul, [element="MenuComponent"] > div > ul, [element="MenuComponent"] nav {
    display: flex !important;
    gap: 25px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fixar Menu do Construtor */
[element="MenuComponent"], [element="MenuComponent"] > div {
    background: transparent !important;
    box-shadow: none !important;
}

/* Links do Menu */
#header a, #header span, .sitebuilder-page-header a, .sitebuilder-page-header span, .header nav a, [element="MenuComponent"] a, [element="MenuComponent"] span {
    color: #ffffff !important; 
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important; 
    font-size: 15px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    position: relative !important;
    padding: 5px 15px !important; margin: 0 5px !important;
    transition: all 0.3s ease !important;
    opacity: 0.9 !important;
    border: none !important;
    background: transparent !important;
}

/* Fix específico para evitar fontes nativas do Builderall sobrescrevendo o menu */
[element="MenuComponent"] * {
    font-family: 'Lato', sans-serif !important;
}

/* Efeito Hover nos Links do Menu (Underline animado) */
#header a::after, .sitebuilder-page-header a::after, .header nav a::after, [element="MenuComponent"] a::after, [element="MenuComponent"] span::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0% !important;
    height: 2px !important;
    background: #fff !important;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-radius: 2px !important;
}

#header a:hover::after, .sitebuilder-page-header a:hover::after, .header nav a:hover::after, [element="MenuComponent"] a:hover::after, [element="MenuComponent"] span:hover::after {
    width: 100% !important;
}

#header a:hover, .sitebuilder-page-header a:hover, .header nav a:hover, [element="MenuComponent"] a:hover, [element="MenuComponent"] span:hover {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
}

/* Header verde sticky & Glassmorphism Moderno */
#header, .sitebuilder-page-header, header[data-v], .header {
    background: rgba(92, 184, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    position: sticky !important; 
    top: 0 !important; 
    z-index: 9999 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 5% !important;
    transition: all 0.3s ease !important;
}

/* Esconder background original do construtor para forçar o Glassmorphism */
.sitebuilder-page-header > div, header[data-v] > div, #header > div {
    background: transparent !important;
    box-shadow: none !important;
}

/* Logo "MAGPAY" text styling */
.logo, [element="TextComponent"] h1:contains("MAGPAY"), .sitebuilder-page-header h1, header[data-v] h1 {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2) !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* Hover Premium nos Botões */
.sb-btn, [data-action="button"] a, a.bt-text-area {
    border-radius: 50px !important; font-weight: 700 !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
    position: relative !important; overflow: hidden !important;
}
.sb-btn:hover, [data-action="button"] a:hover, a.bt-text-area:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(92,184,0,0.45) !important;
}

/* Efeito Shimmer (Brilho passando) */
.sb-btn::before, [data-action="button"] a::before, a.bt-text-area::before {
    content: '' !important; position: absolute !important;
    top: 0 !important; left: -100% !important;
    width: 60% !important; height: 100% !important;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%) !important;
    transition: left 0.6s ease !important; pointer-events: none !important; z-index: 1 !important;
}
.sb-btn:hover::before, [data-action="button"] a:hover::before, a.bt-text-area:hover::before { left: 150% !important; }

/* Efeito Premium nos Cards de Imagem (Igrejas, ONGs, etc) */
[element="ImageComponent"] { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease !important; }
[element="ImageComponent"]:hover { 
    transform: translateY(-8px) scale(1.05) !important;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2)) !important;
    z-index: 10 !important;
}

/* Scrollbar Elegante */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#5cb800,#7ed320); border-radius: 10px; }
::selection { background: rgba(92,184,0,0.3); color: #1a1a2e; }

/* Fix de Contraste - Garantir que textos em fundos escuros fiquem visíveis */
[style*="background-color: rgb(0"], [style*="background-color: rgba(0,0,0"] { color: #fff !important; }
[style*="background-color: rgb(0"] p, [style*="background-color: rgba(0,0,0"] p { color: #fff !important; opacity: 0.9 !important; }
/* =========================================
   PREMIUM MODERN UX OVERRIDES - MAGPAY
   ========================================= */

400;600;800&family=Inter:wght@400;500;700&display=swap');

/* SUAVIZAÇÃO GERAL E ANIMAÇÃO DE ENTRADA */
html, body {
    scroll-behavior: smooth !important;
}

/* TIPOGRAFIA PREMIUM */




/* BOTÕES ULTRA MODERNOS */
.bt-sb, [element="ButtonComponent"] a, [data-action="button"] a {
    border-radius: 50px !important;
    background: linear-gradient(135deg, #7ad934 0%, #56B72C 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(86, 183, 44, 0.3), inset 0 -2px 0 rgba(0,0,0,0.1) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative !important;
    overflow: hidden !important;
}

.bt-sb:hover, [element="ButtonComponent"] a:hover, [data-action="button"] a:hover {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 15px 25px rgba(86, 183, 44, 0.4), inset 0 -2px 0 rgba(0,0,0,0.1) !important;
    filter: brightness(1.1) !important;
}

/* Efeito de brilho (Shimmer) */
.bt-sb::after, [element="ButtonComponent"] a::after, [data-action="button"] a::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-25deg) !important;
    transition: all 0.7s ease !important;
}

.bt-sb:hover::after, [element="ButtonComponent"] a:hover::after, [data-action="button"] a:hover::after {
    left: 200% !important;
}

/* CARDS NEUMORFISMO E HOVER 3D */
[element="BoxComponent"] > div {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

[element="BoxComponent"]:hover > div[style*="rgb(255, 255, 255)"] {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(86, 183, 44, 0.12), 0 4px 10px rgba(0,0,0,0.04) !important;
}

/* FADE IN SCROLL ANIMATIONS */
.magpay-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.magpay-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* FAQ HOVER ENHANCEMENTS */
[element="AccordionComponent"] > div {
    transition: all 0.3s ease !important;
}
[element="AccordionComponent"] > div:hover {
    box-shadow: 0 8px 25px rgba(86, 183, 44, 0.15) !important;
    transform: translateX(5px) !important;
}


/* Remover menu Cartão conforme solicitado */
[element="MenuComponent"] a[href*="cart"],
[element="MenuComponent"] a[href*="Cart"],
nav a[href*="cart"],
nav a[href*="Cart"],
#header a:contains("CARTÃO"),
#header a:contains("Cartão"),
.sitebuilder-page-header a:contains("CARTÃO"),
[element="MenuComponent"] a:contains("CARTÃO") {
    display: none !important;
}

/* Ocultar pelo texto para spans e divs dentro do menu */
[element="MenuComponent"] span, [element="MenuComponent"] div {
    /* Não podemos usar display none no span genérico, mas podemos no nth-child se for fixo, 
       ou usar JS para garantir. Como CSS :contains não é padrão, vamos fazer via JS para garantir 100% */
}