/**
 * Blazerd Translator PRO — Estilos
 *
 * IMPORTANTE: Este CSS é otimizado pra sites WordPress que usam ELEMENTOR como page builder.
 * Inclui regras específicas pra widgets Elementor (.elementor-heading-title, .elementor-button-text, etc.)
 * além de regras gerais que neutralizam efeitos do Google Translate em qualquer estrutura HTML.
 *
 * Estrutura:
 *   1. Esconde UI nativa do Google Translate (banner, tooltips)
 *   2. Anula top-shift que GT injeta no body
 *   3. Neutraliza <font> wrappers (CRÍTICO — causa principal de layout shift)
 *   4. Preserva gradientes de texto
 *   5. Proteção universal pra widgets ELEMENTOR (cobre todos os casos)
 *   6. Layout stability pra elementos comuns
 *   7. Botão flutuante de tradução
 *   8. Painel de idiomas
 *   9. Notificação (toast)
 *  10. Responsive
 */

/* ================================================================== */
/* 1) ESCONDE UI NATIVA DO GOOGLE TRANSLATE                            */
/* ================================================================== */
.goog-te-banner-frame,
.goog-te-balloon-frame,
iframe.goog-te-banner-frame,
iframe.goog-te-menu-frame,
#goog-gt-tt,
.goog-te-spinner-pos,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight,
div[id^="goog-gt-"],
div[class*="VIpgJd-ZVi9od"],
.skiptranslate iframe,
.skiptranslate > iframe {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -99999 !important;
    pointer-events: none !important;
}

.goog-te-gadget {
    font-size: 0 !important;
    color: transparent !important;
    height: 0 !important;
    overflow: hidden !important;
}
.goog-te-gadget .goog-te-combo {
    display: none !important;
}

/* ================================================================== */
/* 2) ANULA TOP-SHIFT INJETADO NO BODY PELO GT                         */
/* ================================================================== */
body {
    top: 0 !important;
    position: static !important;
    margin-top: 0 !important;
}
html {
    top: 0 !important;
    margin-top: 0 !important;
}

/* ================================================================== */
/* 3) NEUTRALIZA <font> WRAPPERS — FIX PRINCIPAL ANTI LAYOUT-SHIFT     */
/* ================================================================== */
/*
 * O Google Translate envolve TODO texto traduzido em <font style="vertical-align:inherit;">.
 * Essas tags <font> quebram flex/grid/layout porque viram filhos diretos do container.
 *
 * Solução: display: contents faz o <font> "desaparecer" do box model, deixando o texto
 * herdar diretamente do elemento original. Não mexemos em font-family/color/font-size
 * porque a herança natural do navegador resolve isso corretamente.
 */
font {
    display: contents !important;
    vertical-align: baseline !important;
}

/* ================================================================== */
/* 4) PRESERVA GRADIENTES DE TEXTO                                     */
/* ================================================================== */
/* Quando elemento pai usa background-clip: text + transparent fill (gradient),
 * o <font> filho precisa herdar essas propriedades explicitamente. */
[style*="background-clip"] font,
[style*="-webkit-background-clip"] font,
[style*="text-fill-color"] font,
[class*="gradient"] font,
.gradient-text font,
.elementor-heading-title font,
.elementor-button-text font {
    background: inherit !important;
    -webkit-background-clip: inherit !important;
    background-clip: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* ================================================================== */
/* 5) PROTEÇÃO UNIVERSAL PRA WIDGETS ELEMENTOR                         */
/* ================================================================== */
/*
 * Estas regras garantem que QUALQUER widget Elementor mantenha sua aparência
 * original mesmo depois do Google Translate envolver textos em <font>.
 *
 * Usamos 'inherit' (não valores específicos) pra cor/font-family — significa
 * "use o que o elemento pai do widget definiu". Como Elementor aplica estilos
 * via style="" inline no elemento principal, herança funciona corretamente.
 */

/* Headings do Elementor (h1-h6 em widget Heading) */
.elementor-heading-title font,
.elementor-widget-heading .elementor-heading-title font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    text-shadow: inherit !important;
}

/* Botões do Elementor */
.elementor-button-text font,
.elementor-button font,
.elementor-button-link font,
.elementor-widget-button font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

/* Texto de parágrafos / text-editor / text widgets */
.elementor-widget-text-editor font,
.elementor-widget-text-editor p font,
.elementor-text-editor font,
.elementor-widget-container font,
.elementor-widget-heading font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Icon boxes (ícone + título + texto) */
.elementor-icon-box-title font,
.elementor-icon-box-description font,
.elementor-icon-list-text font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* Image boxes */
.elementor-image-box-title font,
.elementor-image-box-description font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* Counter / Number widgets (5000+, 99.9%, 24/7 — devem manter fonte tech) */
.elementor-counter-number font,
.elementor-counter-title font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Genérico: QUALQUER elemento dentro de Elementor que ganhou <font> */
[class*="elementor-"] font,
[data-element_type] font,
[data-widget_type] font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* WooCommerce: títulos de produto */
.woocommerce-loop-product__title font,
.product_title font,
.woocommerce-Price-amount font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Geral: todo span/h1-h6/p/a/div que ganhou <font> herda corretamente */
h1 font, h2 font, h3 font, h4 font, h5 font, h6 font,
p font, span font, a font, li font, button font, label font,
.btn font, .button font {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* ================================================================== */
/* 6) LAYOUT STABILITY                                                 */
/* ================================================================== */

/* Em containers flex/grid, força <font> a se comportar como conteúdo direto */
.elementor-container font,
.elementor-row font,
.elementor-column font {
    display: contents !important;
}

/* Botões nunca devem quebrar texto interno (CTAs mantêm largura fixa) */
.btn, .button, .elementor-button,
button[type="submit"],
.elementor-widget-button .elementor-button-text {
    white-space: nowrap;
}

/* Números em destaque (stats) nunca quebram */
.elementor-counter-number,
.stat-num,
[class*="stat-number"],
[class*="counter-number"] {
    white-space: nowrap !important;
}

/* Títulos com gradient mantêm display block (não viram inline) */
.gradient-text {
    display: inline-block !important;
}

/* ================================================================== */
/* 7) BANDEIRAS INLINE NO HEADER (modo integrado ao tema)              */
/* ================================================================== */
/*
 * Container injetado pelo tema no header com id="blz-tr-header-flags".
 * O JS do plugin popula com botões de bandeira (.blz-tr-flag-btn).
 * Quando ativo, esconde o botão flutuante padrão (controlado via JS inline style).
 */

/* Container das bandeiras — só visualmente ativo quando JS adiciona .has-flags */
#blz-tr-header-flags {
    display: flex;                            /* Layout horizontal */
    align-items: center;
    gap: 4px;                                 /* Espaço pequeno entre bandeiras */
}

/* Botão de bandeira individual no header (compacto, só emoji) */
.blz-tr-flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;                              /* Largura fixa pequena */
    height: 32px;                             /* Altura fixa pequena */
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;                       /* Bordas levemente arredondadas */
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    user-select: none;
    line-height: 1;
}
.blz-tr-flag-btn:hover {
    background: rgba(34, 211, 238, 0.15);     /* Hover ciano translúcido */
    border-color: rgba(34, 211, 238, 0.4);
    transform: translateY(-2px);              /* Levanta levemente */
}
.blz-tr-flag-btn.active {
    background: rgba(34, 211, 238, 0.25);     /* Idioma atual: destaque ciano */
    border-color: #22d3ee;
}
.blz-tr-flag-btn .blz-tr-flag {
    font-size: 18px;                          /* Bandeira (emoji) bem visível */
    line-height: 1;
}

/* Em mobile: ainda mostra bandeiras mas menores */
@media (max-width: 768px) {
    .blz-tr-flag-btn {
        width: 28px;
        height: 28px;
    }
    .blz-tr-flag-btn .blz-tr-flag {
        font-size: 16px;
    }
}

/* ================================================================== */
/* 8) BOTÃO FLUTUANTE DE TRADUÇÃO (fallback quando tema não tem header) */
/* ================================================================== */
#blz-tr-float-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999998;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(34, 211, 238, 0.4);
    border-radius: 50px;
    color: #e2e8f0;
    font-family: "Inter", -apple-system, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 15px rgba(34, 211, 238, 0.15);
    user-select: none;
}
#blz-tr-float-btn:hover {
    background: rgba(34, 211, 238, 0.15);
    border-color: #22d3ee;
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(34, 211, 238, 0.25);
}
#blz-tr-float-btn .blz-tr-icon {
    font-size: 18px;
    line-height: 1;
}

/* ================================================================== */
/* 8) PAINEL DE IDIOMAS                                                */
/* ================================================================== */
#blz-tr-panel {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 999999;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(34, 211, 238, 0.4);
    border-radius: 16px;
    padding: 16px;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(34, 211, 238, 0.15);
    display: none;
    animation: blzTrSlideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#blz-tr-panel.active {
    display: block;
}

#blz-tr-panel::-webkit-scrollbar { width: 6px; }
#blz-tr-panel::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); border-radius: 3px; }
#blz-tr-panel::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.4); border-radius: 3px; }

@keyframes blzTrSlideUp {
    from { opacity: 0; transform: translateY(15px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.blz-tr-panel-title {
    font-family: "Inter", -apple-system, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #22d3ee;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(34, 211, 238, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.blz-tr-lang-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #e2e8f0;
    font-family: "Inter", -apple-system, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    margin-bottom: 2px;
}
.blz-tr-lang-btn:hover {
    background: rgba(34, 211, 238, 0.15);
    color: #fff;
    transform: translateX(4px);
}
.blz-tr-lang-btn.active {
    background: rgba(34, 211, 238, 0.2);
    color: #22d3ee;
    font-weight: 600;
}
.blz-tr-lang-btn .blz-tr-flag {
    font-size: 20px;
    line-height: 1;
}

/* ================================================================== */
/* 9) NOTIFICAÇÃO (toast)                                              */
/* ================================================================== */
.blz-tr-notif {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 999999;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(34, 211, 238, 0.4);
    border-left: 4px solid #22d3ee;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e2e8f0;
    font-family: "Inter", -apple-system, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: blzTrNotifIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
               blzTrNotifOut 0.5s ease 4s forwards;
    pointer-events: none;
}
.blz-tr-notif strong {
    color: #fff;
    font-weight: 700;
}

@keyframes blzTrNotifIn {
    from { opacity: 0; transform: translateX(40px) scale(0.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes blzTrNotifOut {
    to { opacity: 0; transform: translateX(30px); }
}

/* ================================================================== */
/* 10) RESPONSIVE                                                      */
/* ================================================================== */
@media (max-width: 600px) {
    #blz-tr-float-btn {
        bottom: 20px;
        right: 20px;
        padding: 10px 16px;
    }
    #blz-tr-panel {
        right: 20px;
        bottom: 70px;
        min-width: 220px;
    }
    .blz-tr-notif {
        top: 20px;
        right: 20px;
        left: 20px;
        justify-content: center;
    }
}