.location-map-container {
    display: flex;
}

.left-column {
    width: 50%;
}

.right-column {
    width: 50%;
}

/* Default button styles */
.location-button {
    display: block;
    margin: 10px 0;
    padding: 10px;
    cursor: pointer;
    border: 2px solid transparent; /* Transparent border for inactive buttons */
    background-color: transparent; /* Transparent background for inactive buttons */
    color: #000; /* Default text color for inactive buttons */
    text-align: left;
    font-size: 16px;
    transition: all 0.3s ease; /* Smooth transition for hover/active states */
}

/* Active button styles */
.location-button.active {
    border: 2px solid #E42434 !important;
    background-color: rgba(228, 36, 52, 0.1);
    color: #000000;
    font-weight: bold;
}

/* SVG icon for active button */
.location-button.active::before {
    content: ""; /* Remove the emoji */
    display: inline-block;
    width: 16px; /* Set the width of the icon */
    height: 16px; /* Set the height of the icon */
    background-image: url('https://www.ticketcrusherslaw.com/wp-content/uploads/2025/07/maps-location-01.svg'); /* Path to your SVG icon */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Ensure the icon scales properly */
    margin-right: 8px; /* Add spacing between the icon and text */
}

/* Smaller icon for screens below 768px (mobile devices) */
@media (max-width: 768px) {
    .location-button.active::before {
        width: 8px; /* Icon size for mobile */
        height: 8px; 
        margin-right: 6px; /* Adjust margin for better spacing */
    }
}



/* Image styles */
.location-image {
    display: none; /* Hide all images by default */
    width: 100%;
    height: auto;
}

.location-image.active {
    display: block; /* Show active image */
}