/* =========================================
   RESET, FONTS & VARIÁVEIS (ESTILO CARNAVAL)
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    -webkit-touch-callout: none; /* BLOQUEIO DE SELEÇÃO E MENU DE IMAGEM */
    -webkit-user-select: none;   
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --primary-accent: #d35400; 
    --primary-hover: #e67e22;
    --background-color: #f4f6f8;
    --card-background: #ffffff;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --border-color: #e0e6ed;
    --header-height: 40px; /* Reduzido para o padrão Carnaval */
    --shadow-color: rgba(44, 62, 80, 0.1);
    
    --status-aberto: #27ae60;      
    --status-em-breve: #f1c40f;    
    --status-fechado: #7f8c8d;     
}

body.dark-mode {
    --primary-accent: #e67e22;
    --background-color: #1a202c;
    --card-background: #2d3748;
    --text-primary: #edf2f7;
    --text-secondary: #a0aec0;
    --border-color: #4a5568;
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* --- MAPA DARK MODE (EXATAMENTE IGUAL CARNAVAL) --- */
body.dark-mode .map-tiles {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
    -webkit-filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
    transition: filter 0.3s ease;
}

/* Garante que a visão de satélite NÃO inverta as cores */
body.dark-mode .satellite-tiles { filter: none !important; }

/* Desfaz a inversão em marcadores, popups e botões de zoom */
body.dark-mode .leaflet-marker-icon,
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .user-location-marker,
body.dark-mode .leaflet-control-zoom,
body.dark-mode .mini-like-counter,
body.dark-mode .leaflet-control-attribution {
    filter: invert(100%) hue-rotate(180deg);
}

input, select, textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
    color: var(--text-primary);
    line-height: 1.4;
    overflow-x: hidden;
    font-size: 0.82rem; /* ZOOM OUT GLOBAL */
    /* zoom: 0.85; <-- REMOVIDO PARA NÃO QUEBRAR O MAPA E A TELA */
}

/* =========================================
   HEADER GERAL (SLIM & STYLED)
========================================= */
.app-header {
    height: var(--header-height); /* 40px */
    background-color: var(--primary-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 0 12px;
    box-shadow: 0 2px 4px var(--shadow-color);
    position: relative;
    z-index: 1000;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px; /* Dá o espaço exato entre a imagem e os textos */
}

.title-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.title-wrapper h1 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 2px;
}

.site-subtitle {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.2px;
}

.site-subtitle a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    transition: opacity 0.2s;
}

.site-subtitle a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Ajuste fino para não quebrar em celulares com tela muito estreita */
@media (max-width: 360px) {
    .title-wrapper h1 { font-size: 0.85rem; }
    .site-subtitle { font-size: 0.6rem; }
    .logo img { width: 24px; height: 24px; }
}

.header-actions { 
    display: flex; 
    gap: 6px; 
    align-items: center; 
}

/* Estilo dos Botões do Topo */
.icon-btn, .support-btn {
    background: rgba(255, 255, 255, 0.15); /* Fundo sutil para parecer botão */
    border: none; 
    color: white;
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 30px; /* Reduzido de 32px para caber nos 40px do header */
    height: 30px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Botão de Instalação (Verde/Branco) */
.support-btn { 
    background: white; 
    color: #27ae60; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.icon-btn:hover { 
    background: rgba(255, 255, 255, 0.25); 
    transform: scale(1.05); 
}

.support-btn:hover {
    transform: scale(1.05);
    background: #f8f8f8;
}

/* Tamanho dos Ícones dentro dos botões */
.icon-btn svg, .support-btn svg { 
    width: 17px; 
    height: 17px; 
    stroke-width: 2.5px; /* Deixa o ícone mais nítido mesmo pequeno */
}

/* Ajuste específico para a Lua/Sol do tema */
#theme-toggle .sun-icon { color: #f1c40f; }

/* LAYOUT PRINCIPAL */
.main-content-grid {
    display: flex;
    height: calc(100vh - var(--header-height)); 
    width: 100%;
}

.left-column {
    flex: 0 0 600px; /* Define uma largura fixa para o mapa no desktop (ajuste conforme desejar) */
    position: relative;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.map-container { display: flex; flex-direction: column; flex: 1; position: relative; }
#map { flex: 1; width: 100%; z-index: 1; }

.events-list-container {
    flex: 1; /* Faz a lista ocupar todo o espaço restante da tela */
    width: auto; /* Remove a largura fixa de 420px anterior */
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* =========================================
   TOOLBAR DO MAPA E BOTÕES FLUTUANTES
========================================= */
.map-toolbar {
    flex: 0 0 auto;
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 12px;
    z-index: 10;
}

.search-trigger-bar {
    width: 100%;
    background-color: var(--card-background);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0 15px;
    height: 38px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.search-trigger-bar svg { color: var(--primary-accent); }

.map-control-switch { 
    position: absolute; bottom: 15px; left: 10px; 
    z-index: 1000; 
    background-color: var(--card-background); 
    padding: 4px 8px; 
    border-radius: 20px; 
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
    display: flex; 
    align-items: center;
    gap: 8px;
}

.map-control-switch::after { content: "SAT"; font-size: 0.65rem; font-weight: 700; color: var(--text-secondary); }
.map-control-switch .switch { position: relative; display: inline-block; width: 34px; height: 18px; margin: 0; }
.map-control-switch .switch input { opacity: 0; width: 0; height: 0; }
.map-control-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.map-control-switch .slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
.map-control-switch input:checked + .slider { background-color: var(--primary-accent); }
.map-control-switch input:checked + .slider:before { transform: translateX(16px); }

.map-search-btn {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(-50px);
    z-index: 1000;
    background-color: var(--primary-accent);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;
}

.map-search-btn.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.map-locate-btn, .map-initial-locate-btn {
    position: absolute; bottom: 15px; right: 10px; z-index: 1000;
    border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.2); cursor: pointer;
}
.map-locate-btn { width: 40px; height: 40px; border-radius: 8px; background: white; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.map-locate-btn svg { fill: currentColor; }
.map-locate-btn.active { color: var(--primary-accent); background-color: rgba(211, 84, 0, 0.1); }
.map-initial-locate-btn { display: flex; align-items: center; gap: 6px; background-color: var(--primary-accent); color: white; padding: 8px 12px; border-radius: 12px; font-weight: 600; }
.map-initial-locate-btn span { font-size: 0.7em; line-height: 1.1; text-align: left; }

/* =========================================
   FILTROS E HEADER DA LISTA
========================================= */
.filters-wrapper {
    background-color: var(--card-background);
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    position: sticky; 
    top: 0; 
    z-index: 200; /* Aumentamos de 10 para 200 para blindar contra a animação 3D da foto */
}

.quick-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-checkbox { cursor: pointer; user-select: none; }
.chip-checkbox input { display: none; }
.chip-checkbox span {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.chip-checkbox input:checked + span { color: white; border-color: var(--primary-accent); background-color: var(--primary-accent); }
.chip-checkbox input:checked + span.chip-aberto { background-color: var(--status-aberto); border-color: var(--status-aberto); }
.chip-checkbox input:checked + span.chip-em-breve { background-color: var(--status-em-breve); border-color: var(--status-em-breve); color: #333;}

.filters-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.filtro-item label { font-size: 0.75rem; font-weight: 600; margin-bottom: 2px; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.filtro-item select, .filtro-item input { padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 6px; background-color: var(--background-color); color: var(--text-primary); font-family: 'Poppins', sans-serif; font-size: 0.85rem; }

.filter-actions-row { display: flex; gap: 8px; }
.btn-filtrar, .btn-limpar { padding: 8px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: none; }
.btn-filtrar { flex: 2; background-color: var(--primary-accent); color: white; }
.btn-limpar { flex: 1; background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }

/* --- CORREÇÃO DO LAYOUT DO HEADER DA LISTA (Sidebar Desktop) --- */
.results-header {
    display: flex; 
    justify-content: space-between; /* Empurra blocos para os cantos */
    align-items: center;
    padding: 8px 12px; /* Padding vertical menor e mais limpo */
    background: var(--background-color);
    border-bottom: 1px solid var(--border-color); /* Linha divisória sutil */
    flex-wrap: nowrap; /* IMPEDE QUEBRA DE LINHA DEFINITIVAMENTE */
    gap: 8px; /* Espaço sutil entre os elementos centrais */
}

/* Garante que o contador de butecos não empurre tudo */
.total-count { 
    font-size: 0.75rem; 
    font-weight: 600; 
    color: var(--text-secondary); 
    margin: 0; 
    white-space: nowrap; /* Impede que o texto "found" quebre em 2 linhas */
    flex: 0 0 auto; /* Não cresce, não encolhe */
}

/* O sort-bar fica centralizado entre os blocos */
.sort-bar { 
    display: flex; 
    gap: 2px; /* Espaço mínimo entre botões de ordenação */
    background: var(--border-color); 
    padding: 3px; 
    border-radius: 20px; 
    flex: 0 0 auto;
}

/* --- CLUSTER DE FAVORITOS E COMPARTILHAR --- */
.fav-cluster { 
    display: flex; 
    gap: 6px; 
    align-items: center; 
    justify-content: flex-end;
    flex: 0 0 auto;
}

/* Botão de compartilhar em formato de "Bolinha" (Estilo Carnaval) */
.share-favs-btn {
    display: none; /* É ativado pelo JS quando há favoritos */
    align-items: center; 
    justify-content: center; 
    background: #27ae60; 
    color: white;
    border: none; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    cursor: pointer; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.2s, background-color 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.share-favs-btn:hover { 
    transform: scale(1.1); 
    background: #2196F3; /* Muda de cor levemente ao focar */
}

.share-favs-btn svg { 
    width: 14px; 
    height: 14px; 
    margin: 0; 
}

/* Filtro de Favoritos (Pílula) */
.fav-toggle-wrapper label {
    display: inline-flex; 
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem; 
    border-radius: 20px;
    white-space: nowrap; /* Garante que a palavra 'Favoritos' nunca quebre */
}

.sort-icon-indicator { display: none; }
.sort-circle {
    width: auto; height: 28px; padding: 0 12px;
    border-radius: 16px; border: none; background: transparent;
    color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600;
}
.sort-circle svg { width: 14px; height: 14px; }
.sort-circle.active { background: var(--card-background); color: var(--primary-accent); box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-color: transparent; }

.fav-toggle-wrapper input { display: none; }
.fav-toggle-wrapper label {
    display: inline-block; padding: 4px 10px;
    background-color: var(--card-background);
    border: 1px solid var(--border-color); border-radius: 20px;
    font-size: 0.75rem; font-weight: 600; color: #e74c3c; cursor: pointer;
}
.fav-toggle-wrapper input:checked + label { background-color: #e74c3c; color: white; border-color: #e74c3c; }

/* =========================================
   NOVO LAYOUT DE CARD HORIZONTAL
========================================= */
.eventos-grid {
    padding: 0 15px 20px 15px;
    display: grid; /* Mudamos de flex para grid */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* Cria colunas automáticas */
    gap: 12px;
}

.evento-card {
    background-color: var(--card-background);
    border-radius: 12px;
    box-shadow: 0 2px 6px var(--shadow-color);
    position: relative; cursor: pointer;
    border-left: 4px solid var(--border-color);
    display: flex; flex-direction: column;
    overflow: hidden; 
}

/* Status Line */
.evento-card.status-bg-aberto { border-left-color: var(--status-aberto); }
.evento-card.status-bg-em-breve { border-left-color: var(--status-em-breve); }
.evento-card.status-bg-fechado { border-left-color: var(--status-fechado); opacity: 0.9; }

.status-tag {
    position: absolute; top: 10px; right: 0;
    padding: 3px 10px; border-radius: 4px 0 0 4px;
    color: white; font-size: 0.65rem; font-weight: 700;
    z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.status-aberto { background-color: var(--status-aberto); padding-left: 18px; }
.status-aberto::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background-color: white; border-radius: 50%; animation: pulse 1.5s infinite; }
.status-em-breve { background-color: var(--status-em-breve); color: #333; }
.status-fechado { background-color: var(--status-fechado); }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 70% { box-shadow: 0 0 0 4px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* --- CONTADOR DE LIKES --- */
.mini-like-counter {
    position: absolute; bottom: 10px; right: 10px; 
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 10px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 700; color: #e74c3c;
    z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    display: flex; align-items: center; gap: 4px;
}
body.dark-mode .mini-like-counter { background: rgba(0,0,0,0.6); }

.distance-badge {
    display: inline-flex; align-items: center; gap: 2px;
    background-color: rgba(211, 84, 0, 0.1); color: var(--primary-accent);
    font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-left: auto;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Corpo Flexível (Imagem + Textos lado a lado) */
.card-body-flex {
    display: flex;
    gap: 12px;
    padding: 12px 12px 10px 12px;
    align-items: stretch;
    margin-top: 15px;
}

.card-thumb {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.card-info-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; 
}

.card-info-main h2 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; line-height: 1.2; }
.card-petisco { font-size: 0.8rem; font-weight: 600; color: var(--primary-accent); margin-bottom: 6px; }
.meta-row { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.address-text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* Área Expandida e Botões Principais */
.expand-content { display: none; padding-top: 5px; border-top: 1px dashed var(--border-color); }

.primary-actions {
    display: flex; gap: 8px; padding: 10px 12px;
}

.action-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 10px 0; border-radius: 8px;
    border: 1px solid var(--border-color); background: var(--card-background);
    font-size: 0.7rem; font-weight: 600; color: var(--text-primary); cursor: pointer;
    transition: all 0.2s;
}

.action-btn svg { width: 22px; height: 22px; }
.action-btn.route-btn { background: var(--primary-accent); color: white; border: none; }
.action-btn.call-btn { background: #27ae60; color: white; border: none; }

/* Animação e estilo do favorito */
@keyframes heartPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
.evento-card.is-favorite .action-btn.fav-btn { color: #e74c3c; background: rgba(231, 76, 60, 0.1); border-color: #e74c3c; }
.evento-card.is-favorite .action-btn.fav-btn svg { fill: #e74c3c; stroke: #e74c3c; animation: heartPop 0.3s ease-out; }

/* --- ALINHAMENTO DO CARD EXPANDIDO (CURTIDAS + AVALIAÇÃO) --- */
.evento-card.expanded .expand-content { display: block; animation: fadeIn 0.3s; }
.evento-card.expanded .floating-like { display: none; }

.expanded-footer-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px 12px; border-top: 1px solid var(--border-color);
    background: rgba(0,0,0,0.02);
}

.mini-like-counter.inline-like { position: static; box-shadow: none; border: 1px solid var(--border-color); }

.compact-rating {
    display: flex; align-items: center; justify-content: flex-end;
    margin: 0; padding: 0; background: transparent; gap: 8px;
}
.compact-rating .rating-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }
.compact-rating .stars { display: flex; gap: 4px; }
.compact-rating .star-icon { width: 18px; height: 18px; cursor: pointer; fill: #ddd; transition: transform 0.2s;}
.compact-rating .star-icon.active { fill: #f1c40f; }
.compact-rating .star-icon:hover { transform: scale(1.2); }

/* --- QUADRO DE HORÁRIOS E BOTÃO DO HEADER --- */
.full-hours-box {
    margin: 0 12px 10px; padding: 10px; background: var(--background-color); 
    border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.75rem;
    color: var(--text-secondary); line-height: 1.5;
}
.full-hours-box strong { color: var(--text-primary); display: block; margin-bottom: 4px; }
.hours-list div { border-bottom: 1px dashed #e0e6ed; padding: 4px 0; }
.hours-list div:last-child { border-bottom: none; padding-bottom: 0; }

/* =========================================
   SKELETON E ANIMAÇÕES DO MAPA
========================================= */
.loading-spinner { border: 3px solid rgba(0,0,0,0.1); border-top: 3px solid var(--primary-accent); border-radius: 50%; width: 25px; height: 25px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.skeleton-card { background: var(--card-background); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.sk-header { height: 130px; background: var(--border-color); border-radius: 8px; margin-bottom: 10px; } 
.sk-line { height: 12px; background: var(--border-color); border-radius: 4px; margin-bottom: 8px; width: 80%; }

.evento-card.highlighted { animation: highlightCard 2s ease; }
@keyframes highlightCard { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(211, 84, 0, 0.7); border-color: var(--primary-accent); } 50% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(211, 84, 0, 0); border-color: var(--primary-accent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(211, 84, 0, 0); } }

/* GPS ANIMATION */
.user-location-marker { background: transparent; border: none; }
.user-dot { width: 14px; height: 14px; background-color: #2196F3; border: 2px solid white; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.4); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
.user-pulse { width: 40px; height: 40px; background-color: rgba(33, 150, 243, 0.4); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; animation: map-pulse 2s infinite; }
@keyframes map-pulse { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.marker-selected-anim { animation: blink-marker 1s ease-in-out 4; }
@keyframes blink-marker { 0% { opacity: 1; } 50% { opacity: 0.5; stroke-width: 5; } 100% { opacity: 1; } }

/* =========================================
   MODAL MOBILE E RESPONSIVIDADE
========================================= */
.modal, .mobile-filter-modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.modal.show, .mobile-filter-modal.show { display: flex; }
.modal-content { background: var(--card-background); padding: 20px; border-radius: 12px; width: 90%; max-width: 350px; position: relative; }
.close-modal-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 1.5rem; color: var(--text-secondary); cursor: pointer; }

@media (max-width: 768px) {
    .main-content-grid { flex-direction: column; }
    
    .map-toolbar { position: relative; top: 0; left: 0; right: 0; z-index: 1000; background-color: var(--background-color); padding: 10px 15px; }
    
    /* Ajuste da altura do mapa para caber perfeitamente na tela sem usar vh em excesso */
    .left-column { flex: 0 0 32vh; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; }
    
    .map-container { display: flex; flex-direction: column; width: 100%; height: 100%; }
    
    /* Deixa a lista de eventos preencher o resto da tela sem altura fixa */
    .events-list-container { width: 100%; height: auto; flex: 1; padding-top: 10px; }
    
    .eventos-grid {
        /* SOBRESCREVE a regra do desktop forçando 1 única coluna fluida */
        grid-template-columns: 1fr;
        /* Reduzimos o respiro lateral para ganhar espaço na tela */
        padding: 0 10px 15px 10px; 
    }

    #filters-desktop-wrapper { display: none; } 
    .mobile-only-flex { display: flex !important; }
    
    .mobile-filter-modal .modal-content { width: 100%; max-width: 100%; margin: 0; position: absolute; bottom: 0; border-radius: 20px 20px 0 0; padding: 0; max-height: 85vh; display: flex; flex-direction: column;}
    .modal-header { padding: 15px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; }
    #mobile-filters-container { padding: 15px; overflow-y: auto; flex: 1; }
    .map-search-btn { top: 10px; }
    
    /* --- EFEITO 80% MANUAL NO MOBILE --- */
    .card-thumb {
        width: 75px;
        height: 75px;
    }
    
    .card-info-main h2 {
        font-size: 0.9rem;
    }
    
    .card-petisco {
        font-size: 0.75rem;
    }
    
    .action-btn {
        padding: 6px 0;
    }
    /* ----------------------------------- */
}

/* --- CORES DOS BOTÕES DE AÇÃO --- */
.action-btn.call-btn { 
    background: #2196F3; /* Azul */
    color: white; 
    border: none; 
}
.action-btn.share-btn { 
    background: #25D366; /* Verde WhatsApp */
    color: white; 
    border: none; 
}

/* --- ESTILIZAÇÃO DO MODAL DE ROTAS (Estilo Carnaval) --- */
.nav-modal-content { 
    text-align: center; 
    padding: 30px 20px 20px; 
}
.nav-modal-content h3 { 
    margin-bottom: 20px; 
    font-size: 1.2rem; 
    color: var(--text-primary); 
}
.nav-options { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}
.nav-option-btn {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px;
    padding: 14px; 
    border-radius: 12px; 
    border: 1px solid var(--border-color);
    background: var(--background-color); 
    font-size: 1rem; 
    font-weight: 600;
    color: var(--text-primary); 
    cursor: pointer; 
    transition: all 0.2s;
}
.nav-option-btn img { 
    width: 24px; 
    height: 24px; 
}
.nav-option-btn:hover { 
    background: var(--border-color); 
    transform: scale(1.02); 
}
.btn-copy { 
    color: var(--text-secondary); 
    font-size: 0.9rem; 
}
.btn-copy svg {
    margin-right: -4px;
}

/* --- CORES DOS BOTÕES DO MODAL DE ROTA --- */
.btn-google { 
    background-color: #ffffff; 
    color: #4285F4; 
    border: 1px solid #dadce0; 
}
.btn-google:hover { 
    background-color: #f8f9fa; 
    border-color: #d2e3fc; 
}

.btn-waze { 
    background-color: #33ccff; 
    color: #052a4f; 
    border: none; 
}
.btn-waze:hover { 
    background-color: #00bfff; 
}

.btn-uber { 
    background-color: #000000; 
    color: #ffffff; 
    border: none; 
}
.btn-uber:hover { 
    background-color: #333333; 
}

.btn-copy { 
    background-color: #f1f3f4; 
    color: #3c4043; 
    border: 1px solid #dadce0; 
}
.btn-copy:hover { 
    background-color: #e8eaed; 
}

/* --- SELETOR DE CIDADE GLOBAL (TOPO DA BARRA) --- */
.city-selector-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 15px; /* Espaço antes da linha */
    margin-bottom: 15px;  /* Espaço depois da linha */
    border-bottom: 2px solid var(--border-color); /* A linha de separação! */
}

.city-selector-section label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.city-select-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    color: var(--primary-accent); /* Cor laranja do Comida di Buteco */
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: all 0.2s;
}

.city-select-input:focus {
    border-color: var(--primary-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.1);
}

/* =========================================
   MÁGICA DA IMAGEM EXPANSÍVEL (HOVER E TOUCH)
========================================= */

/* 1. Permite que a imagem pule para fora do card sem ser cortada */
.evento-card {
    overflow: visible !important;
    transition: z-index 0.3s;
}

/* Protege os cantos arredondados do rodapé já que tiramos o overflow hidden do card */
.expanded-footer-row {
    border-radius: 0 0 12px 12px;
}

/* 2. Prepara a miniatura para a animação 3D suave */
.card-thumb {
    /* Curva de animação com efeito 'mola' */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
    position: relative;
    z-index: 10;
    
    /* Faz a imagem crescer a partir do lado esquerdo para a direita, sem sair da tela */
    transform-origin: center left; 
    
    /* Bloqueia o menu nativo do celular de "Salvar Imagem" ao segurar o dedo */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* 3. Eleva o z-index do card atual para a imagem cobrir os cards de baixo e de cima */
.evento-card:hover, .evento-card:active {
    z-index: 50;
}

/* 4. Ação no Desktop (Mouse Hover) */
@media (hover: hover) and (pointer: fine) {
    .card-thumb:hover {
        transform: scale(2.8); /* Aumenta a foto em quase 3x */
        z-index: 100;
        box-shadow: 0 15px 35px rgba(0,0,0,0.5);
        border-radius: 6px;
    }
}

/* 5. Ação no Mobile (Pressionar e Segurar) */
@media (hover: none), (max-width: 768px) {
    .card-thumb:active {
        /* Move a foto levemente para a direita (translateX) para não ficar totalmente escondida embaixo do dedo do usuário */
        transform: scale(2.8) translateX(12px); 
        z-index: 100;
        box-shadow: 0 15px 35px rgba(0,0,0,0.6);
        border-radius: 6px;
    }
}

/* =========================================
   TOOLTIP INSTALAÇÃO PWA
========================================= */
.install-guide-modal { display: none; position: fixed; top: 60px; right: 15px; z-index: 2002; max-width: 250px; animation: fadeInDown 0.5s ease-out; }
.install-guide-modal.show { display: block; }
.install-guide-content { background-color: var(--card-background); padding: 12px 15px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); border: 1px solid var(--border-color); position: relative; font-size: 0.8rem; line-height: 1.4; }
.guide-arrow { position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background-color: var(--card-background); border-left: 1px solid var(--border-color); border-top: 1px solid var(--border-color); transform: rotate(45deg); }
.close-guide-btn { position: absolute; top: 2px; right: 5px; background: none; border: none; font-size: 1.2rem; color: var(--text-secondary); cursor: pointer; line-height: 1; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }