.asf-search-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
}

.asf-filter-group {
    margin-bottom: 15px;
}

#asf_density_slider,
#asf_hdr {
    margin-bottom: 15px;
}

.asf-filter-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.asf-filter-row {
    display: flex;
    flex-wrap: wrap; /* Allows items to stack on smaller screens */
    gap: 20px; /* Space between the items */
    margin-bottom: 15px; /* Replaces margin on the individual groups it contains */
}

.asf-filter-column {
    flex: 1; /* Each item will try to take up equal space */
    min-width: 250px; /* Items will stack when they can't maintain this width */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between filter groups within a column */
}

.asf-filter-row .asf-filter-group {
    margin-bottom: 0; /* The parent column's gap now handles spacing */
}

/* --- Segmented Buttons --- */
.asf-segmented-buttons {
    display: flex;
    width: 100%;
}

.asf-segmented-buttons input[type="radio"] {
    /* Hide the radio button itself, but keep it accessible */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.asf-segmented-buttons label {
    flex: 1; /* Each button takes equal width */
    text-align: center;
    padding: 8px 12px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    margin-left: -1px; /* Overlap borders */
}

.asf-segmented-buttons label:first-of-type {
    border-top-left-radius: 100px; /* Fully rounded ends */
    border-bottom-left-radius: 100px;
    margin-left: 0;
}

.asf-segmented-buttons label:last-of-type {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.asf-segmented-buttons input[type="radio"]:checked + label {
    background-color: #e0eaff; /* A light blue, Material-style selection color */
    color: #001f8b;
    border-color: #99b6ff;
    z-index: 1; /* Bring to front to ensure its borders are fully visible */
}

.asf-results-container {
    margin-top: 20px;
}

/* Remove underlines from cards and their contents */
.asf-result-card, 
.asf-result-card * {
    text-decoration: none !important; /* Use !important to ensure override if needed */
}

.asf-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive grid */
    gap: 20px;
    margin-top: 20px;
}

.asf-result-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); /* Material-like shadow */
    overflow: hidden; /* Ensures content respects border-radius */
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease-in-out;
}

.asf-result-card:hover,
.asf-result-card:focus {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.15);
    outline: none;
}

.asf-card-image {
    width: 100%;
    height: 200px; /* Fixed height for image container */
    background-color: #f0f0f0; /* Placeholder background */
    display: flex;
    align-items: center;
    justify-content: center;
}

.asf-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover ensures image fills space, might crop */
}

.asf-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #888;
    font-size: 0.9em;
}

.asf-card-content {
    padding: 15px;
    flex-grow: 1; /* Allows content to fill space if card heights vary */
    display: flex;
    flex-direction: column;
}

.asf-card-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.asf-card-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.asf-spec-item,
.asf-card-chipset,
.asf-card-year {
    display: flex;
    align-items: center;
    margin-bottom: 4px; /* Default bottom margin for these items */
}

.asf-spec-label { /* This class is no longer used in the HTML for specs, but kept for potential future use or other elements */
    font-weight: 600;
    color: #555;
    margin-left: 0.3em; 
    margin-right: 0.3em; 
}

.asf-spec-value {
    color: #333;
    margin-left: 0.3em; /* Add some space if icon is directly followed by value */
}
/* If an icon is the first child of asf-spec-item, asf-card-chipset, or asf-card-year, 
   and it's followed by asf-spec-value, the margin-left on asf-spec-value might be redundant 
   with asf-spec-icon's margin-right. We'll keep it simple for now.
   If .asf-spec-label was used, the .asf-spec-value would not need margin-left.
   Since labels are removed, we add a small margin-left to .asf-spec-value if it directly follows an icon.
*/
.asf-spec-icon + .asf-spec-value {
    margin-left: 0.3em; /* Ensure space between icon and value */
}

/* .asf-chipset-year-row rule is removed as the div is no longer used */

.asf-spec-icon {
    font-size: 1.1em; /* Adjust icon size as needed */
    color: #777;
    margin-right: 0.3em; /* Space between icon and text that follows */
    vertical-align: middle; /* Helps with inline alignment if not using flex */
}