/* Body styles */

body {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-color: rgba(10, 10, 10, 0.3);

    background-blend-mode: multiply;

    /* Consider uncommenting background-image if you have a default image */

    /* background-image: url('dakargrey.jpg'); */

}


/* Main container holding the search form and table */

.container {

    max-width: 100%;

    height: 100%; /* Be cautious with height: 100% here, might need min-height */

    margin: auto;

    padding: 20px;

    border-radius: 10px;

    background-color: rgba(8, 5, 5, 0.8);

    margin-top: 30px;

}


/* Search form layout */

.search-form {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}


/* Individual form groups within the search form */

.search-form .form-group {

    margin-bottom: 0;

    flex: 1;

    min-width: 180px;

}


/* Buttons within the search form */

.search-form .btn {

    margin-bottom: 10px;

}


/* Container for the table, allowing horizontal scrolling */

.table-container {

    width: 100%;

    overflow-x: auto; /* Enables horizontal scroll for narrow tables */

    margin-top: 20px;

}


/* Main table styles */

.table {

    width: 100%;

    border-collapse: collapse; /* Standard for desktop table */

    margin-bottom: 20px;

    background-color: rgba(255, 255, 255, 0.8);

    border-radius: 8px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}


/* Table header cells */

.table thead th {

    background-color: rgba(240, 240, 240, 0.8);

    color: #2c3e50;

    padding: 12px;

    text-align: left;

    border-bottom: 2px solid #ddd;

}


/* Odd rows in the table body */

.table tbody tr:nth-child(odd) {

    background-color: rgba(175, 237, 123, 0.3);

}


/* Even rows in the table body */

.table tbody tr:nth-child(even) {

    background-color: rgba(250, 246, 165, 0.3);

}


/* Table body cells (default for desktop) */

.table tbody td {

    padding: 12px;

    text-align: left;

    border-bottom: 1px solid #eee;

}


/* General image styling within item blocks */

.item-block img {

    max-width: 120px; /* Limits all images to 200px wide */

    height: auto;      /* Maintains aspect ratio */

    display: block;

    margin: 0 auto;    /* Centers images within their container */

    border-radius: 4px;

}


/* Button-specific styles within item blocks */

.item-buttons .btn,

.item-buttons .badge {

    width: auto; /* Default: content-based width, overridden on mobile */

    max-width: 100%;

    margin-bottom: 5px;

}


/* Form containing the "Vendre" button */

.item-buttons form {

    display: block; /* Stacks button form vertically */

    margin-left: 0 !important; /* Ensures no extra left margin */

    width: auto; /* Content-based width for the form */

}






/* Desktop Layout: Arrange Horizontally (min-width: 769px) */
/* Desktop Layout: Arrange Horizontally (min-width: 769px) */
@media (min-width: 769px) { /* Changed from 1px to 769px for proper desktop breakpoint */
    .table {
        width: 100%;
        /* Use 'separate' for border-spacing, 'collapse' doesn't support it */
        border-collapse: separate;
        border-spacing: 0 10px; /* Vertical spacing between rows */
    }

    .table thead {
        display: table-header-group;
    }

    .table tbody,
    .table tr {
        display: table-row-group; /* Standard table row group */
        display: table-row; /* Standard table row */
    }

    .table td {
        display: table-cell; /* Standard table cell */
        padding: 12px;
        border-bottom: 1px solid #eee;
        text-align: left;
        vertical-align: top; /* Align content to the top of the cell */
    }

    .item-card-responsive {
        /* Removed width: 100%; */
        /* Let the card shrink-wrap its content horizontally */
        /* By not setting a width, it will adapt to the content's width */
        /* max-width: 100%; ensure it doesn't overflow its TD */
        max-width: 48%;

        background-color: rgba(20, 20, 20, 0.95);
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        padding: 15px;
        box-sizing: border-box;

        display: flex;
        flex-direction: row; /* Main blocks (group, text) horizontally */
        flex-wrap: wrap; /* Allows main blocks to wrap if space is too small */
        align-items: flex-start;
        gap: 10px; /* Gap between the new group and the text block */
        justify-content: flex-start;
    }

    /* New: Styles for the group containing buttons and images */
    .item-media-actions-group {
        display: flex;
        flex-direction: row; /* Buttons and images stay side-by-side */
        flex-wrap: nowrap; /* CRUCIAL: Try hard to keep buttons and images on ONE line */
        align-items: flex-start;
        gap: 5px; /* Smaller gap specifically between buttons and images */
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto; /* Take content width as basis */
    }

    .item-block {
        margin-bottom: 0;
        padding: 0;
        text-align: left;
    }

    .item-buttons {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto; /* Let buttons take content width */
        min-width: 90px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .item-image1,
    .item-image2 {
        /* These should also shrink-wrap to their image's width, which is max-width: 120px */
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 120px; /* This ensures they take at least 120px if content allows */
        min-width: 120px; /* Guarantees 120px minimum for each image block */
        display: flex;
        justify-content: center; /* Center image within its block */
        align-items: flex-start;
    }

    .item-details-block {
        /* This is the key: only let it grow if needed, otherwise it'll take its content width */
        flex: 1; /* This means it will grow to fill available space first */
        min-width: 250px; /* But it needs at least 250px, after which it can wrap or stretch */
        text-align: left;
        /* If you truly want it to be *only* as wide as its text content and no more,
           you might consider 'flex: 0 1 auto;' and remove min-width IF its parent
           flex container can handle shrinking (e.g., if there are other flex items
           that are allowed to grow instead). But flex: 1 combined with min-width
           is usually the correct approach for wrapping text content. */
    }
}




.voo-theme body {

    /* Keeping background-image as a potential default */

    /* background-image: url('dakargrey.jpg'); */

    background-color: rgba(10, 10, 10, 0.9); /* Dark grey transparent overlay */

    color: orange; /* Orange text for body */

}


.voo-theme .container {

    background-color: rgba(25, 25, 25, 0.8); /* Lighter grey transparent container */

    color: orange;

}


.voo-theme .table {

    background-color: rgba(255, 255, 255, 0.8);

    color: orange;

}


.voo-theme .table thead th {

    background-color: rgba(10, 10, 10, 0.8); /* Dark grey transparent header */

    color: orange;

}


.voo-theme .table tbody tr:nth-child(odd) {

    background-color: rgba(20, 20, 20, 0.9); /* Darker grey transparent odd rows */

}


.voo-theme .table tbody tr:nth-child(even) {

    background-color: rgba(30, 30, 30, 0.9); /* Slightly lighter grey transparent even rows */

}


.voo-theme .table td {

    color: orange; /* Orange text for table cells */

}


/* Button styles for Voo theme */

.voo-theme .btn-primary {

    background-color: #FF8C00; /* Dark orange */

    border-color: #FF8C00;

    color: white;

}


.voo-theme .btn-primary:hover {

    background-color: #E67E00; /* Darker orange on hover */

    border-color: #E67E00;

}


.voo-theme .btn-secondary {

    background-color: rgba(15, 15, 15, 0.8); /* Dark grey transparent */

    border-color: orange;

    color: white;

}


.voo-theme .btn-secondary:hover {

    background-color: #FF8C00; /* Dark orange on hover */

    border-color: #FF8C00;

}


.voo-theme .selected-filter {

    background-color: #363636 !important; /* Darker grey selected filter */

    color: white !important;

}


.voo-theme .tous-option {

    background-color: #A9A9A9 !important; /* Medium grey "Tous" option */

    color: orange !important;

}