/* style.css */

/* Overall container for the comparison tool */
#sim-racing-compare {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the grid and actions button */
}

/* Grid container for the comparison slots */
.sim-grid {
    display: flex;
    flex-wrap: wrap; /* Allow slots to wrap onto next line */
    gap: 15px;       /* Space between slots */
    justify-content: center; /* Center slots horizontally */
    max-width: 1200px; /* Max width of the grid */
    width: 100%;      /* Take full available width up to max-width */
}

/* Individual comparison slot (contains selects and product card) */
.sim-slot {
    /* Adjust width based on desired columns (e.g., 5 columns: calc(20% - 12px) if gap is 15px) */
    /* Or use flex-basis for better control */
    flex-basis: calc(20% - 12px); /* Example for 5 columns with 15px gap */
    flex-grow: 0; /* Don't allow slots to grow */
    flex-shrink: 0; /* Don't allow slots to shrink below basis */
    min-width: 220px; /* Minimum width before wrapping */
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex; /* Use flexbox for the slot itself */
    flex-direction: column; /* Stack selects and details vertically */
}

/* Dropdown select styles */
.sim-slot select {
    width: 100%;
    margin-bottom: 10px;
    padding: 6px;
    font-size: 14px;
    box-sizing: border-box; /* Include padding in width */
}

/* Container for the loaded product details */
.sim-product-details {
    flex-grow: 1; /* Allow details section to take remaining space in the slot */
    display: flex; /* Use flex so the card inside fills it */
}

/* --- Product Card Layout --- */
.sim-product-card {
    width: 100%;            /* Card takes full width of its container */
    display: flex;          /* Use flexbox for vertical stacking */
    flex-direction: column; /* Stack items top-to-bottom */
    height: 100%;           /* Fill height provided by JS equalizer */
    text-align: center;     /* Center text unless overridden */
    box-sizing: border-box;
    /* Removed justify-content: flex-start; as margin-top: auto handles button */
}

/* Image within the card */
.sim-product-card img {
    max-width: 100%;
    height: auto;       /* Maintain aspect ratio */
    margin-bottom: 10px;
    display: block;     /* Remove extra space below image */
    margin-left: auto;  /* Center image */
    margin-right: auto; /* Center image */
}

/* Product Title */
.sim-product-card h4 {
    font-size: 16px;
    margin: 5px 0;
    min-height: 48px;    /* Consistent height for title area */
    display: flex;       /* Use flex to vertically center */
    align-items: center; /* Vertically center text */
    justify-content: center; /* Horizontally center text */
    text-align: center;
    color: #000;
    flex-shrink: 0; /* Prevent title from shrinking */
}

/* Product Price */
.sim-product-card .price {
    font-weight: bold;
    color: #2b8a3e;
    margin-bottom: 8px;
    flex-shrink: 0; /* Prevent price from shrinking */
}

/* Product Description */
.sim-product-card .description {
    font-size: 13px;
    color: #666;
    min-height: 30px;
    margin-bottom: 5px;
    display: none; /* Currently hidden - remove this line to show descriptions */
    flex-shrink: 0; /* Prevent description from shrinking */
}

/* Product Attributes Section */
.sim-product-card .attributes {
    font-size: 13px;
    margin: 5px 0;
    color: #333;
    /* REMOVED flex-grow: 1; */ /* Let it take natural height */
    min-height: 150px; /* Keep minimum height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align attributes to the top */
    text-align: left; /* Align attribute text left */
    flex-shrink: 1; /* Allow attributes to shrink if needed, but prioritize content */
}

/* Individual Attribute Line */
.sim-product-card .attribute {
    font-size: 13px;
    margin: 3px 0;
    color: #333;
}

/* Container for the action button (Recommended) */
.sim-product-actions {
    margin-top: auto; /* Pushes this container (and button) to the bottom */
    padding-top: 15px; /* Space above the button container */
    text-align: center; /* Center button within this container */
}

/* Affiliate/Buy Button */
/* Apply styles primarily here */
.affiliate-button {
    /* margin-top: auto; */ /* Keep this if button is NOT inside .sim-product-actions */
    display: inline-block;
    padding: 10px 16px;
    background-color: #ff0000;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    border: none; /* Ensure no default border */
    cursor: pointer;
}

.affiliate-button:hover {
    background-color: #444;
}

/* --- Global Actions (Add/Reset Button) --- */
.sim-actions {
    margin-top: 20px;
    text-align: center;
    width: 100%; /* Take full width for centering */
}

#sim-add-slot {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #ff0000;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#sim-add-slot:hover {
    background-color: #444;
}

/* --- Loading/Error States (Optional) --- */
.sim-loading,
.sim-error {
    padding: 20px;
    text-align: center;
    color: #888;
}
.sim-error {
    color: #d9534f; /* Red for errors */
}

/* --- Responsive Adjustments (Example) --- */
@media (max-width: 1100px) {
    .sim-slot {
        flex-basis: calc(25% - 12px); /* 4 columns */
    }
}

@media (max-width: 900px) {
    .sim-slot {
        flex-basis: calc(33.33% - 10px); /* 3 columns */
    }
}

@media (max-width: 680px) {
    .sim-slot {
        flex-basis: calc(50% - 8px); /* 2 columns */
    }
}

@media (max-width: 480px) {
    .sim-slot {
        flex-basis: 100%; /* 1 column */
        min-width: unset;
    }
    .sim-grid {
        gap: 10px;
    }
}