body {
    background-color: #f8f9fa;
    background-image: url('../../file/mm_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.card,
.card-body {
    opacity: 0.95;
}

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    margin-bottom: 20px;
}

.card-body {
    padding: 1.5rem;
}

.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    border-color: #80bdff;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

#searchResults {
    max-height: 600px;
    overflow-y: auto;
}

#searchResults .card {
    transition: transform 0.2s;
}

#searchResults .card:hover {
    transform: translateY(-2px);
}

#map {
    border-radius: 4px;
    overflow: hidden;
}

.alert {
    border-radius: 4px;
    margin-bottom: 1rem;
}

.form-select {
    border-radius: 4px;
}

.input-group {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Remove old Bootstrap nav tab styles */
.nav-tabs {
    border-bottom: none !important; /* Important to override Bootstrap */
}
.nav-tabs .nav-link {
    border: none !important;
    margin-bottom: 0 !important;
}
.nav-tabs .nav-link.active {
    border-bottom-color: transparent !important;
}

/* Custom Menu Styles */
.custom-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0; /* Add bottom margin */
    display: flex; /* Arrange items horizontally */
    justify-content: center; /* Center items horizontally */
}

.custom-menu-item {
    margin-bottom: -2px; /* Overlap the bottom border */
}

.custom-menu-link {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #495057; /* Default text color */
    background-image: linear-gradient(to bottom, #e9ecef, #dee2e6); /* Subtle gray gradient for inactive */
    border-bottom: none; /* No bottom border initially */
    margin-right: 5px; /* Space between items */
    transition: all 0.3s ease; /* Smooth transition */
}

.custom-menu-link:hover {
    background-image: linear-gradient(to bottom, #e0e4e8, #d5dadf); /* Slightly different gradient on hover */
    border-color: #dee2e6 #dee2e6 #d5dadf; /* Hover border color */
}

.custom-menu-link.active {
    color: #495057; /* Active text color */
    background-image: linear-gradient(to bottom, #f4bd57, #e0a800); /* Gradient based on #f4bd57 */
    border-color: #dee2e6 #dee2e6 #fff; /* Active border to stand out */
    border-bottom-color: #fff; /* White bottom border to appear selected */
    border: 4px solid transparent;
}

/* Mobile responsiveness for Custom Menu */
@media (max-width: 768px) { /* Bootstrap's md breakpoint */

    /* Existing mobile styles for container, card, sidebar, etc. */

    /* Custom Menu mobile adjustments */
    .custom-menu {
        flex-direction: column; /* Stack tabs vertically */
        border-bottom: none; /* Remove bottom border on mobile */
        align-items: center; /* Center stacked items horizontally on mobile */
    }

    .custom-menu-item {
        margin-bottom: 5px; /* Space between stacked items */
    }

    .custom-menu-link {
        margin-right: 0; /* Remove right margin */
        border: 1px solid #dee2e6; /* Add border around stacked items */
        border-bottom: 1px solid #dee2e6; /* Ensure bottom border is present */
        border-radius: 0.25rem; /* Add rounded corners */
        text-align: center; /* Center text */
        background-image: linear-gradient(to bottom, #e9ecef, #dee2e6); /* Keep inactive gradient */
    }

    .custom-menu-link.active {
         border-color: #e0a800; /* Highlight active tab border */
         border-bottom-color: #e0a800; /* Ensure bottom border is highlighted */
         background-image: linear-gradient(to bottom, #f4bd57, #e0a800); /* Keep active gradient */
    }

    .custom-menu-link:hover {
         border-color: #dee2e6; /* Adjust hover border on mobile */
         background-image: linear-gradient(to bottom, #e0e4e8, #d5dadf); /* Adjust hover gradient on mobile */
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) { /* Bootstrap's md breakpoint */

    /* Adjustments for general container and card padding on mobile */
    .container {
        padding: 10px;
    }

    .card-body {
        padding: 1rem;
    }

    /* Mobile adjustments for filter.php sidebar */
    .sidebar {
        position: static;
        height: auto;
        width: 100%;
        padding: 10px;
    }
    .main-content {
        margin-left: 0;
        padding: 10px;
    }
     .filter-card {
        margin-bottom: 10px;
        padding: 15px;
    }
     .filter-card h3 {
         margin-bottom: 10px;
         padding-bottom: 5px;
     }
     .form-group {
         margin-bottom: 10px;
     }

    /* Mobile adjustments for navigation tabs */
    .nav-tabs {
        flex-direction: column; /* Stack tabs vertically */
        border-bottom: none; /* Remove default bottom border */
    }

    .nav-tabs .nav-item {
        margin-bottom: 5px; /* Add space between stacked tabs */
    }

    .nav-tabs .nav-link {
        border: 1px solid #dee2e6; /* Add a border around each stacked tab */
        border-radius: 0.25rem; /* Add rounded corners to stacked tabs */
        margin-bottom: 0; /* Reset negative margin */
        text-align: center; /* Center text in stacked tabs */
    }

    .nav-tabs .nav-link.active {
         border-color: #e0a800; /* Highlight active tab border */
         border-bottom-color: #e0a800; /* Ensure bottom border is highlighted */
    }
}