/* Meu Banner - Estilos de Inserção Automática e Shortcode */

/* Wrapper principal que contém o banner no conteúdo.
   Ele é um container block-level que gerencia o alinhamento e o espaçamento. */
.meu-banner-wrapper {
    position: relative; /* Necessário para o posicionamento do botão de fechar. */
    margin: 15px auto;  /* Espaçamento vertical e centralização de banners não flutuantes. */
    clear: both;        /* Garante que o wrapper não fique ao lado de elementos flutuantes anteriores. */
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;   /* Garante que o conteúdo não transborde. */
}

/* Clearfix: Garante que o wrapper contenha seus filhos flutuantes, prevenindo quebras de layout. */
.meu-banner-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

/* Alinhamento Centralizado (Comportamento Padrão) */
.meu-banner-wrapper.meu-banner-align-center {
    text-align: center; /* Centraliza o conteúdo inline-block dentro dele. */
}

/* Para banners centralizados, o item se ajusta ao tamanho do seu conteúdo (a imagem). */
.meu-banner-align-center .meu-banner-item {
    display: inline-block;
}

/* Alinhamento à Esquerda (Flutuante) */
.meu-banner-wrapper.meu-banner-align-left {
    float: left;
    margin: 5px 20px 10px 0; /* Espaçamento para o texto fluir ao redor. */
    max-width: 50%;          /* Limita a largura para não ocupar a página inteira. */
}

/* Alinhamento à Direita (Flutuante) */
.meu-banner-wrapper.meu-banner-align-right {
    float: right;
    margin: 5px 0 10px 20px; /* Espaçamento para o texto fluir ao redor. */
    max-width: 50%;          /* Limita a largura para não ocupar a página inteira. */
}

/* Media Query para banners flutuantes em telas pequenas */
@media (max-width: 600px) {
    /* Em telas pequenas, remove a flutuação, centraliza e permite ocupar a largura total. */
    .meu-banner-wrapper.meu-banner-align-left,
    .meu-banner-wrapper.meu-banner-align-right {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
}

/* --- Estilos de Responsividade para Conteúdo Interno --- */

/* O item do banner se ajusta ao seu container. */
.meu-banner-item,
.meu-banner-item > div {
    position: relative; /*  Essencial para o posicionamento absoluto do botão de fechar. */
    max-width: 100%;
}

/* A imagem dentro do banner é responsiva (não ultrapassa o container),
   mas mantém sua proporção e não se estica para preencher. */
.meu-banner-item img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove espaços extras abaixo da imagem. */
    margin: 0 auto; /* Centraliza a imagem se ela for menor que o container. */
}

/* --- Estilos do Botão Fechar --- */

/* O posicionamento do botão é relativo ao .meu-banner-item. */
.meu-banner-close-btn {
    position: absolute;
    top: 0; /* Alinhado ao topo do item do banner */
    right: 0; /* Alinhado à direita do item do banner */
    z-index: 10;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 0 0 0 10px; /* Curvatura suave no canto */
    cursor: pointer;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.85); /* Fundo com leve transparência */
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra para profundidade */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z' fill='%230F1729'%3E%3C/path%3E %3C/g%3E%3C/svg%3E");
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.2s ease-in-out;
    font-size: 0; /* Oculta o "×" de texto */
}

.meu-banner-close-btn:hover {
    background-color: #ffffff;
    transform: scale(1.1);
    box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.25);
}

/*
==========================================================================
  ESTILOS PROFISSIONAIS PARA BANNERS DE PÁGINA (POPUP E STICKY)
  Versão 2.0 - Revisada para Usabilidade e Qualidade Visual
==========================================================================
*/

/* --- Base Comum --- */
.meu-banner-page-container {
    --meu-banner-z-index: 99998;
    position: fixed;
    z-index: var(--meu-banner-z-index);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease;
}
.meu-banner-page-container.is-visible {
    opacity: 1;
    visibility: visible;
}


/* --- Estilos do Popup --- */

/* O Overlay (fundo escurecido) */
.meu-banner-popup-overlay {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(10, 22, 41, 0.7);
    -webkit-backdrop-filter: blur(4px); /* Efeito de vidro fosco para navegadores Webkit */
    backdrop-filter: blur(4px);
}

/* O Contêiner do Popup (a "janela" modal) */
.meu-banner-popup-wrapper {
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 550px; /* Um pouco mais contido */
    transform: translate(-50%, -50%) scale(0.9);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.meu-banner-popup-wrapper.is-visible {
    transform: translate(-50%, -50%) scale(1); /* Animação de "zoom in" suave */
}

/* O Conteúdo Interno do Banner no Popup */
.meu-banner-popup-wrapper .meu-banner-item {
    border-radius: 8px; /* Arredonda o conteúdo interno */
    overflow: hidden;   /* Garante que a imagem respeite o border-radius */
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}
.meu-banner-popup-wrapper .meu-banner-item img {
    display: block; /* Remove espaço extra abaixo da imagem */
    width: 100%;
    height: auto;
}

/* O Botão de Fechar do Popup com SVG */
.meu-banner-popup-wrapper .meu-banner-close-btn {
    position: absolute;
    top: 5px; /* Posicionado DENTRO do banner */
    right: 5px; /* Posicionado DENTRO do banner */
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%; /* Círculo completo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
    /* O SVG já está definido na classe base .meu-banner-close-btn */
}
.meu-banner-popup-wrapper .meu-banner-close-btn:hover {
    transform: scale(1.1) rotate(90deg);
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Bloqueia o scroll da página quando o popup está ativo */
body.meu-banner-popup-active {
    overflow: hidden;
}


/* --- Estilos do Sticky no Rodapé --- */
.meu-banner-sticky-wrapper {
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* Garante alinhamento vertical */
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 5px 20px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.meu-banner-sticky-wrapper.is-visible {
    transform: translateY(0);
}

/* O conteúdo interno do banner no Sticky */
.meu-banner-sticky-wrapper .meu-banner-item {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Botão de fechar do Sticky com SVG */
.meu-banner-sticky-wrapper .meu-banner-close-btn {
    position: static;
    width: 27px;
    height: 27px;
    background-color: #00000057;
    border-radius: 4px;
    margin-left: 15px;
    flex-shrink: 0;
    transition: background-color 0.2s;
}
.meu-banner-sticky-wrapper .meu-banner-close-btn:hover {
    background-color: #f0f0f0;
}

/* --- Estilos Predefinidos (Light/Dark) para Sticky --- */
.meu-banner-sticky-style-dark {
    background-color: rgba(30, 41, 59, 0.6); /* Azul escuro com opacidade */
    -webkit-backdrop-filter: blur(5px); /* Efeito de desfoque para o fundo */
    backdrop-filter: blur(5px);
}
.meu-banner-sticky-style-dark .meu-banner-close-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}
.meu-banner-sticky-style-dark .meu-banner-close-btn:hover {
    background-color: #334155;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

/* Em telas pequenas, o botão do sticky pode ficar muito grande */
@media (max-width: 768px) {
    .meu-banner-sticky-wrapper {
        padding: 8px 10px;
    }
}

/* Controle de visibilidade por dispositivo */

/* Oculta em telas maiores (desktops) */
@media (min-width: 1025px) {
    .hide-on-desktop {
        display: none !important;
    }
}

/* Oculta em telas de tamanho médio (tablets) */
@media (min-width: 768px) and (max-width: 1024px) {
    .hide-on-tablet {
        display: none !important;
    }
}

/* Oculta em telas pequenas (celulares) */
@media (max-width: 767px) {
    .hide-on-mobile {
        display: none !important;
    }
}