.mapa-e-lista-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.mapa-wrapper {
flex: 1;
min-width: 300px;
}
.lista-wrapper {
flex: 2;
min-width: 300px;
}
.lista-wrapper h3 {
margin-top: 0;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
.lista-wrapper ul {
list-style: none;
padding: 0;
margin: 0;
}

.card-img {
background-color: var(--e-global-color-accent);
--background-overlay: "";
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

.lista-wrapper li {
padding: 12px 8px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.3s;
display: flex;
align-items: center;
gap: 15px;
}
.lista-wrapper li:hover {
background-color: #f9f9f9;
}
.lista-wrapper li.active-item {
background-color: #e7f0fe;
font-weight: bold;
}
.marker-id {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--e-global-color-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
}

@media (max-width: 800px) {
.mapa-e-lista-container {
flex-direction: column;
}
}

.gm-style .gm-style-iw-c {
padding: 0 !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 320px !important;
min-width: 250px !important;
}

.gm-style .gm-style-iw-d {
overflow: hidden !important;
}

.gm-style .gm-style-iw-t::after {
display: none;
}

.gm-style button[title="Fechar"] {
display: flex !important;
align-items: center !important;
right: 15px !important;
top: 15px !important;
width: 28px !important;
padding: 7px !important;
height: 28px !important;
border-radius: 50% !important;
background-color: #f1f1f1 !important;
opacity: 1 !important;
transition: background-color 0.3s, transform 0.3s;
}

.gm-style button[title="Fechar"]:hover {
background-color: #e0e0e0 !important;
transform: scale(1.1);
}

.gm-style button[title="Fechar"]:focus {
outline: none;
}

.gm-style button[title="Fechar"] span {
display: none;
}

.gm-style button[title="Fechar"]::before {
content: "×";
font-size: 24px;
color: #555;
line-height: 1;
}

.info-window-content {
padding: 15px 15px;
color: #333;
}

.info-window-content p {
margin: 0;
font-size: 16px;
line-height: 1.6;
font-weight: 500;
color: #2c3e50;
}

.info-window-content p strong {
font-weight: 700;
color: #000;
}