/* Listings Title and Filter Button Styles */
.listings-header {
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
    margin-right: 15px; /* Ensure space between title and button */
}

.listings-title {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-button-container {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent container from shrinking */
    white-space: nowrap; /* Prevent text wrapping */
}

.filter-btn {
    background: linear-gradient(135deg, #fd5631 0%, #fd5631 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 52, 25, 0.3);
}

.filter-btn:hover {
    background: linear-gradient(135deg, #fd5631 0%, #fd5631 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 52, 25, 0.4);
}

/* Responsive adjustments for listings header */
@media (max-width: 767.98px) {
    .listings-title {
        font-size: 1.5rem;
        white-space: nowrap; /* Prevent wrapping */
    }

    .filter-btn {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap; /* Prevent wrapping */
    }

    /* Ensure minimum spacing between title and button */
    .d-flex.justify-content-between.align-items-center {
        gap: 10px;
    }
}

@media (max-width: 575.98px) {
    .listings-title {
        font-size: 1.2rem;
        max-width: 65%; /* Limit width to prevent overflow */
    }

    .filter-btn {
        padding: 0.3rem 0.8rem;
        font-size: 0.85rem;
        min-width: auto; /* Allow button to shrink */
    }

    /* Keep items on the same line */
    .d-flex.justify-content-between.align-items-center {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
}

/* Extra small devices */
@media (max-width: 400px) {
    .listings-title {
        font-size: 1.1rem;
    }

    .filter-btn {
        padding: 0.25rem 0.6rem;
    }

    .filter-btn i {
        margin-right: 0.1rem !important;
    }
}
