#map { height: 100vh; }
#interface, #units {
    background: #f8f9fa;
    padding: 15px;
    height: 100vh;
    overflow-y: auto;
}
h2 {
    margin-top: 0;
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
.selected-unit {
    background-color: #007bff;
    color: white;
}

.leaflet-routing-container{
    display:none !important;
}

.notification-popup {
position: fixed;
top: 50px;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 123, 255, 0.9);
color: white;
padding: 15px;
border-radius: 8px;
font-size: 16px;
text-align: center;
display: none;
z-index: 1000; /* Make sure it's above all other elements */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.shop-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.2s;
}

.shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card-image {
    border-bottom: 1px solid #ddd;
}
.custom-row-spacing > .col {
    margin-bottom: 20px;
}
.tab-container {
    display: flex;
    flex-direction: column;
}

.tab-buttons {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

.tab-button {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tab-button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.tab-content {
    display: none; /* Hide all contents by default */
}

.tab-content.active {
    display: block; /* Show active content */
}

.card {
    margin: 10px; /* Spacing between cards */
}