/* filter */
.filter-box {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.filter-option {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
  cursor: pointer;
}

.filter-option input {
  accent-color: var(--prime-color);
}

/* Card animation styles */
.my-card {
    transition: opacity 0.3s ease, height 0.3s ease;
    will-change: opacity, height; /* Optimize for animation */
}

.my-card[style="display: none;"] {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Responsive filter toggle */
.filter {
    display: block; /* Changed from none to ensure visibility on large screens */
}

.filter-toggle {
    display: none;
}

.show-filters {
    display: block !important;
}

@media (max-width: 767.98px) { /* Adjust breakpoint as needed (e.g., Bootstrap's sm breakpoint) */
    .filter {
        display: none;
    }
    .filter-toggle {
        display: block;
    }
    #filter-box {
        display: none;
        margin-bottom: 1rem;
    }
    #filter-box.show-filters {
        display: block;
        animation: slideDown 0.3s ease-out;
    }
}

/* Animation for filter box */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}