﻿
/* Radio button styling */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

    .form-check-label:hover {
        color: var(--bs-primary);
    }

/* Mobile Fixes */
@media (max-width: 768px) {
    /* Stack radio buttons vertically on mobile */
    .d-flex.gap-3 {
        flex-direction: column;
        gap: 0.5rem !important;
        align-items: flex-start !important;
    }
    /* Hide category, price, location on mobile */
    #resultsTable thead th:nth-child(3),
    #resultsTable tbody td:nth-child(3),
    #resultsTable thead th:nth-child(4),
    #resultsTable tbody td:nth-child(4),
    #resultsTable thead th:nth-child(5),
    #resultsTable tbody td:nth-child(5) {
        display: none;
    }
    /* Smaller images on mobile */
    #resultsTable img {
        width: 50px !important;
        height: 50px !important;
    }
    /* Allow title to wrap */
    #resultsTable td:nth-child(2) {
        white-space: normal;
        min-width: 150px;
    }
    /* Smaller text */
    #resultsTable {
        font-size: 0.85rem;
    }
        /* Less padding */
        #resultsTable th,
        #resultsTable td {
            padding: 6px 4px;
        }
    /* Hide DataTables search box */
    .dataTables_filter {
        display: none;
    }
}



/* Radio button styling for search mode */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

    .form-check-label:hover {
        color: var(--bs-primary);
    }

/* Mobile responsiveness for radio buttons */
@media (max-width: 576px) {
    /* Stack radio buttons vertically on small screens */
    .d-flex.gap-3 {
        flex-direction: column;
        gap: 0.5rem !important;
        align-items: flex-start !important;
    }
}

.table > tbody > tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}
