/* Estilos Gerais */
.list-card { margin: 8px 10px; border-radius: 8px; }

/* Estilos para Filtros (Chips) */
.filter-chip-list {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.filter-chip-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
@media (min-width: 768px) {
    .filter-chip-list { scrollbar-width: auto; }
    .filter-chip-list::-webkit-scrollbar { display: block; height: 8px; }
    .filter-chip-list::-webkit-scrollbar-thumb { background-color: #a0aec0; border-radius: 4px; }
    .filter-chip-list::-webkit-scrollbar-thumb:hover { background-color: #718096; }
}
.filter-chip { flex-shrink: 0; padding: 8px 16px; margin: 0 4px; border-radius: 20px; background-color: #e5e7eb; color: #374151; font-weight: 500; text-decoration: none; transition: all 0.2s ease-in-out; white-space: nowrap; }
.filter-chip.selected { background-color: #1d4ed8; color: #ffffff; }

/* Estilo para o ícone Premium */
.premium-icon-badge {
    position: absolute;
    top: -1px;
    left: -1px;
    background-color: #b45309; /* Cor Dourada/Bronze */
    color: white;
    padding: 4px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.premium-icon-badge svg {
    width: 16px;
    height: 16px;
    fill: white;
}

/* Estilos para Modais e Botões Flutuantes (FAB) */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 95%; max-width: 500px; border-radius: 10px; }
.modal-content.\!p-0 { padding: 0 !important; }
.modal-content.\!max-w-screen-sm { max-width: 640px !important; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.fab { position: fixed; right: 20px; bottom: 20px; background-color: #1d4ed8; color: white; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 999; cursor: pointer; }
#map-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: auto; /* Alterado para largura automática */
    height: 56px;
    padding: 0 20px; /* Adicionado preenchimento horizontal */
    background-color: #1d4ed8;
    color: white;
    border-radius: 28px; /* Alterado para formato de pílula */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    z-index: 998;
    cursor: grab;
    transition: box-shadow 0.2s ease-in-out, background-color 0.2s;
}

/* Novo estilo para o texto dentro do botão */
#map-fab span {
    font-weight: 500;
    font-size: 1rem;
    margin-right: 8px; /* Espaçamento entre o texto e o ícone */
}

#map-fab:active {
    cursor: grabbing;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#map-fab svg {
    width: 24px; /* Ícone um pouco menor para melhor harmonia */
    height: 24px;
    fill: currentColor;
}

/* CSS para Marcadores Customizados do Leaflet */
.custom-marker-container { position: relative; display: flex; justify-content: center; align-items: center; }
.custom-marker-image { object-fit: cover; border-radius: 50%; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.custom-marker-image.regular { width: 45px; height: 45px; border: 3px solid #1d4ed8; }
.custom-marker-image.special { width: 60px; height: 60px; border: 4px solid #b45309; }
.custom-marker-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.custom-marker-icon { color: white; fill: white; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.7)); }
.custom-marker-icon.regular { width: 28px; height: 28px; }
.custom-marker-icon.special { width: 35px; height: 35px; }
.leaflet-div-icon-custom { background: transparent; border: none; }