:root {
            --metro-color: #0066cc; --bus-color: #008000; --trem-color: #DA251D; --bonde-color: #FF9800;
            --trintamil-color: #E91E63; --road-color: #607D8B; --airport-color: #03A9F4;
            --institutional-color: #795548; --port-color: #003366; --cultural-color: #4CAF50;
            --roadtransport-color: #A1887F; --transportgeneral-color: #9E9E9E; --aviation-color: #81D4FA;
            --diverse-color: #9C27B0; --technology-color: #673AB7;
            /* Adicionando cores faltantes ou que podem ser usadas por 'default' ou 'desconhecido' */
            --default-color: #777777;
            --desconhecido-color: #555555;
        }
        /* Garante que o body do plugin use Open Sans se o tema não sobrescrever especificamente */
        .mte-plugin-container, .mte-plugin-container * {
             font-family: 'Open Sans', sans-serif;
        }

        .day-view-event { position: relative; padding-left: 32px; margin-bottom: 16px; }
        .day-view-dot { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background-color: #9ca3af; border-radius: 50%; z-index: 1; }
        .day-view-event::before { content: ''; position: absolute; left: 5px; top: 36px; width: 2px; bottom: -16px; background-color: #e5e7eb; }
        .day-view-event:last-child::before { display: none; }

        /* Default styling for Tipo de Efeméride badge (aligns with card list style) */
        .tipo-badge-default {
            background-color: #e5e7eb; /* bg-gray-200 */
            color: #374151;       /* text-gray-700 */
            /* Padding, font-size, border-radius, margins, display are handled by Tailwind classes
               applied in JS (for modal) and in card-evento.html (for list card) */
        }


        .filter-container { background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 1.5rem; }
        .filter-title { font-weight: 600; color: #374151; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; }
        .filter-input-group { display: flex; flex-direction: column; }
        .filter-input { padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.875rem; background-color: white; color: #374151; width: 100%; line-height: 1.25rem; }
        .filter-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }

        .filter-button {
            padding: 0.625rem 1rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: calc(2.5rem + 2px); /* Ajuste para alinhar com inputs */
            text-decoration: none; /* Para links estilizados como botões */
        }
        .filter-button.primary { background-color: #3b82f6; color: white; border: 1px solid #3b82f6; }
        .filter-button.primary:hover { background-color: #2563eb; border-color: #2563eb; }
        .filter-button.secondary { background-color: white; color: #4b5563; border: 1px solid #d1d5db; }
        .filter-button.secondary:hover { background-color: #f3f4f6; }
        .filter-button.tertiary { background-color: #10B981; color: white; border: 1px solid #10B981; }
        .filter-button.tertiary:hover { background-color: #059669; border-color: #059669; }
        .filter-button.active-filter { background-color: #ef4444; color: white; border-color: #ef4444; }
        .filter-button.active-filter:hover { background-color: #dc2626; border-color: #dc2626; }
        .filter-bubble { position: absolute; top: -8px; right: -8px; background-color: #f97316; color: white; font-size: 0.75rem; font-weight: bold; line-height: 1; padding: 0.1rem 0.35rem; border-radius: 9999px; box-shadow: 0 0 4px rgba(0,0,0,0.3); pointer-events: none; }

        /* Estilos específicos para o widget */
        .mte-widget-wrapper {
            background: #fff;
            border: 1px solid #e1e5e9;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .mte-widget-button-container {
            margin-top: 20px;
            text-align: center;
            padding-top: 15px;
            border-top: 1px solid #f0f0f0;
        }

        .mte-widget-button-container .filter-button {
            min-width: 180px;
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: none;
            position: relative;
            overflow: hidden;
        }

        .mte-widget-button-container .filter-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .mte-widget-button-container .filter-button.primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .mte-widget-button-container .filter-button.primary:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }

        .mte-widget-button-container .filter-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .mte-widget-button-container .filter-button:hover::before {
            left: 100%;
        }

        /* Ícone para o botão do widget */
        .mte-widget-button-icon {
            margin-right: 8px;
            font-size: 16px;
            vertical-align: middle;
        }

        /* Responsividade para o widget */
        @media (max-width: 768px) {
            .mte-widget-wrapper {
                padding: 15px;
                margin-bottom: 15px;
            }
            
            .mte-widget-button-container {
                margin-top: 15px;
                padding-top: 12px;
            }
            
            .mte-widget-button-container .filter-button {
                min-width: 160px;
                padding: 10px 20px;
                font-size: 13px;
            }
        }

        /* Styles for the main modal overlay (the semi-transparent background) */
        /* This element has both id="event-modal" and class="modal-overlay" in shortcode-eventos.php */
        #event-modal.modal-overlay {
            display: none; /* Initially hidden, JS toggles to flex */
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.6); /* Overlay transparency */
            z-index: 10000; /* High z-index */
            overflow-y: auto; /* For scrolling if content overflows viewport height on small screens */
            padding: 1rem; /* Padding for small screens, allows modal to not touch edges */

    /* Ensure the overlay itself can span the full viewport, overriding theme constraints */
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
        }

        /* Styles for the actual modal content box */
        /* This is the .modal-container nested inside #event-modal.modal-overlay */
        #event-modal.modal-overlay .modal-container {
            background-color: white;
            border-radius: 1rem; /* Consistent rounded corners */
            width: 90vw;       /* Occupy 90% of viewport width */
            max-width: 90vw;   /* Ensure it doesn't exceed this */
            height: auto;      /* Height will be determined by content, up to max-height */
            max-height: 90vh;  /* Occupy up to 90% of viewport height */
    min-height: 60vh;  /* Ensure a more rectangular shape even with less content */
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); /* shadow-xl */
            margin: auto;      /* Helps with centering if needed, though flex on parent handles it */
            display: flex;
            flex-direction: column;
            font-family: 'Open Sans', sans-serif; /* Ensure font consistency */
            overflow: hidden; /* Forçar os filhos a respeitarem o border-radius do container */
            /* overflow-y: auto; /* Moved to modal-body to allow header/footer to be fixed if body scrolls */
        }

        /* Font standardization for modal elements, excluding icons */
        #event-modal .modal-container *:not(i) {
            font-family: 'Open Sans', sans-serif;
        }

        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            background-color: white;
            z-index: 10; /* Para garantir que fique acima do conteúdo do .modal-body ao rolar */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil */
        }
        .modal-body {
            padding: 1.5rem;
            flex-grow: 1;
            overflow-y: auto; /* Scroll content within modal body */
            padding-bottom: 1.5rem; /* Padding padrão, já que o footer foi removido */
        }
        .modal-close {
            /* Estilos base para o botão de fechar no header (que agora inclui texto e '×') */
            cursor: pointer;
            background: none;
            border: none;
            padding: 0.25rem; /* Pequeno padding para área de clique */
            /* Cores e transições são aplicadas via classes Tailwind no HTML (text-gray-500, hover:text-gray-800) */
            /* display: flex e items-center são aplicados via Tailwind no HTML */
        }
        .modal-close span.text-3xl { /* Estilo para o '×' */
            line-height: 1; /* Para melhor alinhamento vertical do '×' */
        }
        /* .modal-close:hover { color: #1f2937; } /* Coberto por hover:text-gray-800 do Tailwind */

        /* Imagem de destaque no modal */
        .mte-modal-featured-image-wrapper {
            position: relative;
            background-color: #f9fafb; /* bg-gray-50 */
            width: 100%;
            height: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            overflow: hidden;
        }
        .mte-modal-featured-image-wrapper.blur-active::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background-image: var(--bg-image);
            background-size: cover;
            background-position: center;
            filter: blur(8px);
            z-index: 1;
        }
        .mte-modal-featured-image {
            width: 100%;
            height: 100%;
            object-position: center center;
            position: relative;
            z-index: 2;
        }
        .mte-modal-featured-image-wrapper.mode-cover .mte-modal-featured-image {
            object-fit: cover;
        }
        .mte-modal-featured-image-wrapper.mode-contain .mte-modal-featured-image {
            object-fit: contain;
        }

        /* Galeria de Imagens no Modal */
        .mte-modal-gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem; /* gap-3 */
            margin-top: 1rem; /* Espaçamento acima da galeria */
        }

        a.mte-gallery-thumbnail-link {
            display: block;
            overflow: hidden;
            border-radius: 0.375rem; /* rounded-md */
            border: 1px solid #e5e7eb; /* border-gray-200 */
            transition: border-color 0.2s ease-in-out;
        }
        a.mte-gallery-thumbnail-link:hover {
            border-color: #3b82f6; /* blue-500 */
        }

        a.mte-gallery-thumbnail-link img {
            height: 88px;
            width: auto;
            object-fit: cover;
            object-position: center;
            display: block;
        }
        a.mte-gallery-thumbnail-link:hover img {
            transform: scale(1.05); /* Leve zoom na imagem ao passar o mouse sobre o link */
        }

        @media (max-width: 768px) {
            .mte-modal-featured-image-wrapper {
                height: 220px;
            }
        }


        .block-section { background-color: #fff; border-radius: .75rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06); margin-bottom: 2rem; border: 1px solid #e2e8f0; }
        .block-section h4 { font-size: 1.25rem; font-weight: 700; color: #1a202c; margin-bottom: 1.5rem; display: flex; align-items: center; }
        .block-section h4 i { font-size: 1.3em; margin-right: .5em; }

        .header-logo { height: auto; width: 40px; max-height: 40px; object-fit: contain; margin-right: .75rem; } /* Estilo da logo do index.php original, pode não ser usado no plugin */

        .inline-icon { width: 20px; height: auto; vertical-align: middle; margin: 0 .25rem; border-radius: 2px; object-fit: contain; display: inline-block; }

        /* Utilitários de texto do Tailwind que podem ser úteis se não estiverem disponíveis globalmente */
        .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
        .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* Ajustes para garantir que o container do plugin não herde larguras máximas estranhas do tema */
        .mte-plugin-container.max-w-7xl {
            max-width: 80rem; /* 1280px, padrão do Tailwind para max-w-7xl */
        }
        .mte-plugin-container .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        /* Melhorias no card do evento para corresponder mais de perto */
        .timeline-event-card {
            /* bg-white (já aplicado por Tailwind) */
            /* rounded-lg (já aplicado por Tailwind) */
            /* hover:bg-gray-50 (já aplicado por Tailwind) */
            /* cursor-pointer (já aplicado por Tailwind) */
            /* border-l-4 (já aplicado por Tailwind, mas a cor vem da classe de modal) */
            /* p-4 (já aplicado por Tailwind) */
            /* flex (já aplicado por Tailwind) */
            /* items-center (já aplicado por Tailwind) */
            /* gap-4 (já aplicado por Tailwind) */
            transition: background-color 0.2s ease-in-out;
        }
        .timeline-event-card .flex-shrink-0.w-16.h-16 { /* Imagem de capa */
            width: 4rem; /* 64px */
            height: 4rem; /* 64px */
        }
        .timeline-event-card .text-xs.font-medium.text-gray-500 { /* Data e horário */
            color: #6B7280;
        }
        .timeline-event-card .px-2.py-0\.5.text-xs.rounded-full { /* Badge de tipo e modal */
            padding-left: 0.5rem; padding-right: 0.5rem;
            padding-top: 0.125rem; padding-bottom: 0.125rem;
            font-size: 0.75rem;
            border-radius: 9999px;
        }
        .timeline-event-card h4.font-medium.text-gray-800 { /* Título */
            color: #1F2937;
        }
        .timeline-event-card p.text-sm.text-gray-600 { /* Descrição */
            color: #4B5563;
        }
        .timeline-event-card .flex.items-center.gap-2.text-xs.text-gray-500 .fa-map-marker-alt { /* Ícone de local */
             color: #6B7280; /* Garante a cor do ícone */
        }
        .timeline-event-card .truncate[title] { /* Para tooltip no local */
            display: inline-block; /* Garante que o truncate funcione bem com o ícone */
        }

        /* Estilo para o placeholder da imagem de capa */
        .placeholder-image-icon {
            width: 4rem; /* 64px */
            height: 4rem; /* 64px */
            border-radius: 9999px; /* rounded-full */
            background-color: #E5E7EB; /* bg-gray-200 */
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9CA3AF; /* text-gray-400 */
        }
        .placeholder-image-icon .fas.fa-image {
             font-size: 1.5rem; /* fa-lg */
        }

        /* Ajustes para o filtro de pesquisa para garantir que o botão fique alinhado com os selects */
        .filter-container .flex.flex-wrap.items-end .filter-input-group.self-end {
            align-self: flex-end;
        }

        /* Adicionar um espaçamento inferior ao container principal se necessário */
        .mte-plugin-container {
            margin-bottom: 2rem; /* Adiciona um respiro no final */
        }

        /* Ajustes finos para o modal */
        /* Título principal do modal (#modal-title) é estilizado no HTML base do shortcode (text-lg font-bold text-gray-800) */

        /* Títulos das seções internas do modal (Detalhes, Categorias, Galeria) */
        #event-modal .modal-body h4.text-base { /* Usado para "Detalhes da Efeméride" e "Categorias" no JS */
            font-size: 1rem;    /* text-base */
            font-weight: 600; /* font-semibold */
            color: #374151;    /* text-gray-700, um pouco mais suave que o título principal */
            margin-top: 1.25rem;
            margin-bottom: 0.75rem;
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 0.5rem;
        }
        #event-modal .modal-body h4.text-md { /* Usado para "Galeria de Imagens" no JS */
            font-size: 1.125rem; /* text-md, um pouco maior para galeria */
            font-weight: 600;
            color: #374151;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 0.5rem;
        }

        /* Container para os cards de detalhes da efeméride */
        #event-modal .modal-body .mte-info-grid {
            display: flex;
            flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha */
            gap: 0.75rem;    /* Espaçamento entre os cards (gap-3) */
        }

        /* Estilo para cada card de detalhe */
        .mte-detail-card {
            background-color: #f9fafb; /* bg-gray-50 */
            padding: 0.75rem;          /* p-3 */
            border-radius: 0.5rem;     /* rounded-lg - Garantindo que todos os cantos sejam arredondados */
            display: flex;
            align-items: center;
            border: 1px solid #e5e7eb; /* border-gray-200 */
            flex-grow: 1;             /* Permite que os cards cresçam para preencher o espaço */
            flex-basis: 200px;        /* Define um tamanho base ideal; eles vão crescer a partir daqui. */
                                      /* Em telas menores, o flex-wrap no container .mte-info-grid fará com que quebrem. */
            /* min-width: 180px; /* Comentado, pois flex-basis já serve como um tipo de 'min-width' flexível */
        }


        .mte-detail-card i {
            /* Estilos de ícone (tamanho, cor, margem) são aplicados via classes Tailwind no JS */
        }

        .mte-detail-card strong {
            /* Estilos de label (display, tamanho, peso, cor) são aplicados via classes Tailwind no JS */
        }

        .mte-detail-card span {
            /* Estilos de valor (tamanho, cor) são aplicados via classes Tailwind no JS */
        }

        #event-modal .modal-body .event-meta { /* Data, hora, local no modal - ESTA CLASSE PARECE NÃO ESTAR SENDO USADA NO JS ATUALMENTE */
            font-size: 0.875rem; /* text-sm */
            color: #6b7280; /* text-gray-500 */
            margin-bottom: 1rem;
        }
        #event-modal .modal-body .event-meta strong {
            color: #374151; /* text-gray-700 */
        }
        /* Descrição principal da efeméride no modal */
        #event-modal .modal-body .mte-modal-descricao { /* Classe usada pelo JS */
            font-size: 1rem; /* text-base, mais legível para conteúdo principal do modal */
            color: #4B5563;    /* text-gray-600, alinhado com descrição do card */
            line-height: 1.6;
            margin-top: 1rem;    /* Espaçamento acima da descrição se houver imagem de destaque */
            margin-bottom: 1rem; /* Espaçamento abaixo da descrição, conforme nova especificação */
        }
        /* Regra antiga .event-description removida pois .mte-modal-descricao é usada */

        #event-modal .modal-body .event-image { /* Esta classe não parece estar sendo usada no JS para a imagem de destaque */
            margin-bottom: 1.5rem;
        }
        #event-modal .modal-body .modal-gallery-title {
            font-size: 1.125rem; /* text-lg */
            font-weight: 600; /* font-semibold */
            color: #1f2937; /* text-gray-900 */
            margin-bottom: 0.75rem;
            margin-top: 1.5rem;
        }

/* Lightbox Image Style - Versão robusta e única */
img#mte-lightbox-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 95vw !important;
    max-height: 95vh !important;
    object-fit: contain !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
    position: static !important;
    padding: 0 !important;
    /* margin: 0 !important; /* Comentado para permitir margin: auto do inline */
    clip: auto !important;
    overflow: visible !important;
    border: none !important;
    background: none !important;
}

/* Lightbox Navigation Buttons */
#mte-lightbox-image-container #mte-lightbox-prev,
#mte-lightbox-image-container #mte-lightbox-next {
    font-size: 2rem;
    color: white;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

#mte-lightbox-image-container #mte-lightbox-prev {
    left: 10px;
}

#mte-lightbox-image-container #mte-lightbox-next {
    right: 10px;
}

#mte-lightbox-image-container #mte-lightbox-prev:hover,
#mte-lightbox-image-container #mte-lightbox-next:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Estilos para o container da imagem do lightbox */
#mte-lightbox-image-container {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

/* Botão de Fechar (X) do Lightbox */
#mte-lightbox-image-container #mte-lightbox-close {
    /* position, top, right, z-index são definidos inline no HTML para prioridade */
    font-size: 2rem;
    color: white;
    background-color: rgba(0,0,0,0.5); /* Fundo mais escuro para maior destaque */
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 8px 15px; /* Aumenta a área de clique/visual */
    border-radius: 5px;
    transition: background-color 0.2s ease;
    text-shadow: 0 0 5px black; /* Sombra no texto para melhor contraste */
}

#mte-lightbox-image-container #mte-lightbox-close:hover {
    background-color: rgba(0,0,0,0.7);
}



/* Estilos para o botão 'Limpar Filtros' ativo */

/* Lightbox Overlay - Forçar largura total e remover margens automáticas do tema */
#mte-lightbox-overlay {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important; /* Garantir que não haja padding interno no overlay */
    /* Outros estilos como position, inset, background-color, z-index, display, align-items, justify-content
       são definidos inline no shortcode-eventos.php e estão corretos. */
}

#mte-clear-filters.mte-clear-filters-active {
    background-color: #EF4444 !important; /* Tailwind red-500 */
    color: white !important;
    position: relative; /* Para posicionar o balão */
    border-color: #DC2626 !important; /* Tailwind red-600 para borda */
}

#mte-clear-filters.mte-clear-filters-active:hover {
    background-color: #DC2626 !important; /* Tailwind red-600 para hover */
    border-color: #B91C1C !important; /* Tailwind red-700 para borda no hover */
}

.mte-notification-bubble {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #B91C1C; /* Tailwind red-700 ou um vermelho contrastante mais escuro */
    color: white;
    border-radius: 50%;
    width: 22px; /* Um pouco maior para melhor visibilidade */
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px; /* Fonte um pouco maior */
    font-weight: bold;
    border: 2px solid white; /* Borda branca para contraste */
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Sombra sutil para profundidade */
    line-height: 1; /* Garante que '!' esteja centralizado verticalmente */
    z-index: 1; /* Garante que o balão esteja sobre o conteúdo do botão se houver sobreposição */
}