body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
}

.component-selection .card-header {
    background-color: #343a40;
    color: white;
}

.component-selection .list-group-item {
    padding: 1rem;
}

#cpu-selection {
    color: #6c757d;
    font-style: italic;
    word-wrap: break-word; /* Allow long names to wrap */
}

#cpu-selection.selected {
    color: inherit;
    font-style: normal;
}


.component-item-body .collapse {
    background-color: #fff;
    border-top: 1px solid #dee2e6;
}

.accordion-table-content {
    font-size: 0.9rem;
}

.responsive-table {
    width: 100%;
}

.responsive-table th,
.responsive-table td {
    vertical-align: middle;
    text-align: center;
}

.responsive-table img {
    max-width: 40px;
    display: block;
    margin: 0 auto;
}

/* Ensure 'Add To List' button text does not wrap */
.add-to-list-btn {
    white-space: nowrap;
}

/* Summary Card styles */
.summary-card .card {
    border: 1px solid #ddd;
    border-radius: 0;
}

.summary-card .estimated-wattage {
    font-size: 1.2rem;
    font-weight: bold;
}

.summary-card .total-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #dc3545;
}

.summary-card .save-build {
    color: #dc3545;
    text-decoration: none;
    font-weight: bold;
}

.summary-card .important-note {
    font-size: 0.8rem;
    color: #6c757d;
}

/* --- Responsive Styles --- */
@media (max-width: 767.98px) {
    /* Adjust header padding and font for mobile */
    .card-header {
        padding: .5rem .75rem;
        font-size: .9rem;
    }

    /* Hide the table header on small screens */
    .responsive-table thead {
        display: none;
    }

    /* Make rows look like cards */
    .responsive-table tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: .25rem;
        margin-bottom: 1rem;
    }

     .responsive-table td {
        display: block;
        text-align: right; /* Align value to the right */
        padding-left: 50%; /* Make space for the label */
        position: relative;
        border-top: 1px solid #f2f2f2;
    }
    
    .responsive-table tr td:first-child {
        border-top: none;
    }

    /* Use data-label for the label text */
    .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: .75rem;
        font-weight: bold;
        text-align: left;
    }

    /* Center the action button */
    .responsive-table td[data-label="Action"] {
        padding-left: 0;
        text-align: center;
    }

     .responsive-table td[data-label="Action"]::before {
        content: none; /* No label for the button container */
    }

    .responsive-table td[data-label="Action"] .btn {
        width: 50%; /* Make button wider */
    }

    .component-item-header #cpu-selection {
        padding-top: 0.5rem;
        font-size: 0.9rem;
    }
}