/* Container global de la page */
.browse-listings-container {
    margin: 0 auto;
    padding: 10px 50px 20px 50px;
}
@media (max-width: 1089px) {
    .browse-listings-container {
        padding: 10px 13px 19px 13px;
    }
}

/* Barre de titre (desktop) */
.browse-title-row {
    display: flex;
    align-items: center;
    justify-content: center; /* centrer le titre */
    gap: 10px;
    margin: 0 0 10px 0;
    position: relative; /* pour positionner la loupe à droite */
}

.browse-title-text {
    color: var(--color-white); /* titre en blanc */
    margin: 0;
}

.search-icon-desktop {
    background: transparent; /* pas de couleur de fond */
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute; /* fixer la loupe à droite sans influencer le centrage du titre */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.search-icon-desktop:hover,
.search-icon-desktop:focus {
    background: transparent; /* rester transparent */
    outline: none;
}

/* Utilitaires responsive */
@media (max-width: 1089px) { .desktop-only { display: none !important; } }
@media (min-width: 1090px) { .mobile-only { display: none !important; } }

.search-form-container {
    /* Cadre du formulaire (comme avant) */
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 30px;
    border: 1px solid #9d9d9d;
    position: relative;
}

.search-form-container .search-field {
    flex: 1;
    margin-bottom: 0;
}

.search-form-container .search-text-field {
    /* Laisser la répartition se faire via les règles desktop/mobile spécifiques */
    flex: 1;
    min-width: 0;
    margin-right: 0; /* on s'appuie sur gap pour l'espacement */
}

.search-form-container .search-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.search-form-container .search-field input[type="text"],
.search-form-container .search-field select {
    font-size: 13px;
    font-family: var(--font-primary);
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* Harmoniser l'apparence du select Catégorie avec le champ mots-clés */
@media (min-width: 1090px) {
    .search-form-container .first-row .category-field select {
        border: 1px solid #ccc; /* même couleur que le champ mots-clés */
        background-color: #fff;
    }
}
.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.search-results h3 {
    color: var(--color-white);
    font-size: 17px;
    margin: 0;
}

.search-results .search-icon-mobile {
    margin-top: 5px;
    margin-right: 0;
    padding: 0;
}

.search-results .search-icon-mobile svg {
    stroke: white;
}

.search-form-container .selector-btn {
    width: 100%;
    padding: 8px 35px 8px 8px; /* Increased right padding to accommodate the arrow */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 20px;
    /* Harmoniser la typo avec les <select> (ex: Fréquence) */
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    color: var(--color-darker);
}

.search-form-container .selector-popup {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 9px 7px 7px;
    z-index: 1000;
    width: 150px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Retrait du style filtrage (bouton supprimé en desktop) */

.search-form-container .filters-button-container .btn:hover {
    opacity: 0.85;
}

/* Desktop: masquer la ligne des filtres avancés par défaut, l'afficher quand ouverte */
@media (min-width: 1090px) {
    #advancedFiltersRow { display: none; }
    #advancedFiltersRow.open { display: grid; }

    /* 5 colonnes sur toute la largeur */
    #advancedFiltersRow.open {
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
        align-items: start;
    }
}

/* Mobile/Tablet: garder un flux naturel (déjà géré par flex-wrap) */
@media (max-width: 1089px) {
    #advancedFiltersRow { display: flex; }
}

.search-form-container .selector-popup label {
    font-weight: normal;
}

.search-form-container .range-selector-popup {
    width: 250px;
}

.search-form-container .selector-popup .checkbox-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.search-form-container .selector-popup .checkbox-item:last-child {
    margin-bottom: 0;
}

.search-form-container .checkbox-item input[type="checkbox"] {
    margin-right: 8px;
    margin-left: 0;
}

.search-form-container .checkbox-item label {
    display: inline-block;
    margin: 0;
}

.btn-small {
    padding: 5px 10px;
    font-size: 0.9em;
}

.search-form-container .range-inputs {
    display: flex;
    gap: 15px;
}

.search-form-container .range-input input {
    width: 100px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-form-container .search-button-container {
    display: flex;
    align-items: flex-end;
}
.search-form-container .search-button-container button {
    font-family: var(--font-primary);
    line-height: 18px;
}

/* Grille de base des lignes du formulaire */
.search-form-container .search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* Règles desktop pour la grille du formulaire */
@media (min-width: 1090px) {
    /* Première ligne: mots-clés = 1/2, Catégorie = 1/4, Disponibilité = 1/4 */
    .search-form-container .search-row.first-row { align-items: end; gap: 15px; }
    .search-form-container .first-row .search-text-field { flex: 2; min-width: 0; }
    .search-form-container .first-row .category-field { flex: 1; min-width: 0; }
    .search-form-container .first-row .availability-field { flex: 1; min-width: 0; }

    /* Deuxième ligne: aligner le bouton Rechercher à droite */
    .search-form-container .second-row { align-items: end; gap: 15px; }
    .search-form-container .second-row .search-button-container { margin-left: auto; align-self: flex-end; }

    /* Un peu de marge entre la 1ère et la 2ème ligne en desktop */
    .search-form-container .second-row { margin-top: 10px; }

    /* Transition douce d'ouverture/fermeture du cadre de recherche (desktop) */
    .search-form-container {
        /* Laisser déborder les popups de sélection lorsque le formulaire est ouvert */
        overflow: visible;
        transition: max-height 260ms ease, opacity 200ms ease, margin-bottom 260ms ease, padding-top 260ms ease, padding-bottom 260ms ease;
    }

    /* État replié: hauteur à 0, disparition progressive */
    .search-form-container.collapsed {
        max-height: 0 !important;
        opacity: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        pointer-events: none; /* éviter l'interaction pendant qu'il est fermé */
        overflow: hidden; /* masquer le contenu pendant l'état fermé */
    }

    /* États d'animation (indices de perf, pas de styles critiques) */
    .search-form-container.expanding,
    .search-form-container.collapsing {
        will-change: max-height, opacity, margin-bottom;
        overflow: hidden; /* éviter le débordement pendant l'animation */
    }

    /* Pendant la fermeture, lancer aussi la disparition et la réduction des espacements */
    .search-form-container.collapsing {
        opacity: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Pendant l'ouverture, s'assurer que l'opacité revient à 1 (utile si styles hérités) */
    .search-form-container.expanding {
        opacity: 1;
    }
}

/* Listing Grid */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}

.listing-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 15px;
}

.listing-card {
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-white);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    max-width: 100%;
}

.listing-card h3 {
    color: var(--color-darker);
}

.listing-card-link:hover .listing-card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Highlight for plot_sale listings without changing layout size */
.listing-card.plot-sale-highlight {
    /* Use inset box-shadow to simulate a 3px border without affecting element size */
    box-shadow: inset 0 0 0 3px #d4af37;
}

/* Preserve the gold inset on hover while adding the normal hover shadow */
.listing-card-link:hover .listing-card.plot-sale-highlight {
    box-shadow: inset 0 0 0 3px #d4af37, 0 4px 8px rgba(0,0,0,0.1);
}

.listing-card-title {
    padding: 10px 15px;
    margin: 0;
    color: var(--color-darker);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.listing-card-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.favorite-icon {
    width: 19px;
    height: 19px;
    margin-left: 10px;
    margin-right: 1px;
    flex-shrink: 0;
}

.listing-card-images-container {
    display: flex;
    height: 300px;
    padding: 0 16px;
    border-radius: 5px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 2px;
}

.listing-card-main-image {
    flex: 2;
    overflow: hidden;
}

.listing-card-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Reset border-radius, we'll apply specific ones based on image count */
}

/* Single image: all 4 corners have border-radius */
.listing-card-images-container.single-image .listing-card-main-image img {
    border-radius: 5px;
}

/* Two images: left image has radius on left corners */
.listing-card-images-container.two-images .listing-card-main-image img {
    border-radius: 5px 0 0 5px;
}

/* Three images: left image has radius on left corners */
.listing-card-images-container.three-images .listing-card-main-image img {
    border-radius: 5px 0 0 5px;
}

.listing-card-thumbnail-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.listing-card-thumbnail {
    flex: 1;
    overflow: hidden;
}

.listing-card-thumbnail .thumbnail-1 {
    margin-bottom: 1px;
}

.listing-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Reset border-radius, we'll apply specific ones based on image count */
}

/* Two images: right image has radius on right corners */
.listing-card-images-container.two-images .listing-card-thumbnail.single-thumbnail img {
    border-radius: 0 5px 5px 0;
}

/* Three images: top thumbnail has radius on top-right corner only */
.listing-card-images-container.three-images .listing-card-thumbnail.first-thumbnail img {
    border-radius: 0 5px 0 0;
}

/* Three images: bottom thumbnail has radius on bottom-right corner only */
.listing-card-images-container.three-images .listing-card-thumbnail.second-thumbnail img {
    border-radius: 0 0 5px 0;
}

.listing-card-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.listing-card-owner-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: var(--color-darker);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.listing-card-owner-info .owner-info {
    display: flex;
    align-items: center;
    width: 50%;
    overflow: hidden;
    white-space: nowrap;
}

.listing-card-badges-container .location-info {
    text-align: right;
    color: var(--color-darker);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.listing-card-owner-info img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 5px;
    object-fit: cover;
}

.listing-card-owner-info .small-avatar {
    width: 24px;
    height: 24px;
}

.listing-card-badges-container {
    font-size: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 10px;
    justify-content: space-between;
}

.listing-card-badges {
    display: flex;
    gap: 10px;
    max-width: 70%;
    overflow: hidden;
}

.listing-card-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 15px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.listing-card-storage {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    text-align: right;
    color: var(--color-darker);
}

.listing-card-cost {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    max-width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-darker);
}

.storage-label {
    margin-right: -2px;
}

/* No results */
.no-results {
    text-align: center;
    padding: 30px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

@media (min-width: 1920px) {
    .listing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1145px) {
    .search-form-container .search-row:first-child {
        flex-wrap: wrap;
    }

    .search-form-container .search-text-field {
        flex: 100%;
        min-width: 100%;
        margin-right: 0;
    }

    .search-form-container .search-row:first-child .search-field:not(.search-text-field) {
        flex-basis: calc(50% - 8px);
        min-width: calc(50% - 8px);
    }
}

/** Modes mobile */
@media (max-width: 1089px) {
    .listing-grid {
        grid-template-columns: 1fr;
    }

    /* Hide search form by default on mobile */
    .search-form-container #listingSearchForm {
        display: none;
    }

    .search-form-container .search-field input[type="text"] {
        width: auto;
    }

    /* Position search form container as overlay on mobile */
    .search-form-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 11000; /* Higher than mobile menu to be on top */
        margin: 0;
        border-radius: 0;
        border: none;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        display: none;
        background-color: rgba(255, 255, 255, 0.98);
        height: 100vh;
        overflow-y: auto;
        padding-top: 20px;
    }

    /* Hide the h2 heading in mobile view */
    .search-form-container h2 {
        display: none;
    }

    /* Add a close button to the search form container */
    .search-form-container::before {
        content: "×";
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 30px;
        color: var(--color-darker);
        cursor: pointer;
        z-index: 11001;
        line-height: 1;
    }

    .search-form-container.active {
        display: block;
    }

    /* Make form fields stack vertically */
    .search-form-container .search-row {
        flex-direction: column;
    }

    .search-form-container .search-field {
        width: 100%;
        min-width: 100%;
    }

    /* Show form when active */
    .search-form-container #listingSearchForm.active {
        display: block;
    }

    /* Bouton Rechercher : en mobile, il doit être placé après tous les champs */
    .search-form-container .first-row .search-button-container {
        display: none !important;
    }
    .search-form-container .mobile-submit-container {
        /* Le bouton Rechercher doit être aligné à droite en mobile */
        display: flex !important;
        flex-direction: row; /* s'assurer d'un axe horizontal */
        justify-content: flex-end; /* aligné à droite */
        align-items: center; /* éviter l'étirement vertical */
        width: 100%;
    }
    /* Le bouton ne doit pas prendre 100% de la largeur en mobile */
    .search-form-container .mobile-submit-container .btn {
        display: inline-flex; /* neutralise display:block global des boutons de formulaires */
        width: auto;          /* taille naturelle */
        max-width: none;      /* pas de contrainte pleine largeur */
        align-self: center;   /* ne pas s'étirer quand conteneur est en colonne */
    }
    /* Espace entre le dernier champ (stockage) et le bouton Rechercher en bas */
    .search-form-container .mobile-submit-container {
        margin-top: 30px; /* conserver l'espace au-dessus du bouton */
    }

    /* Pas de marge pour la ligne des filtres avancés quand elle est ouverte, en mobile uniquement */
    .search-form-container #advancedFiltersRow.open {
        margin-top: 0 !important;
    }
}

/* Par défaut (desktop), cacher le bouton mobile placé en bas du formulaire */
.search-form-container .mobile-submit-container {
    display: none;
}

/* Toujours visible en desktop: la deuxième ligne (ex-advanced filters) ne se replie plus */
@media (min-width: 1090px) {
    #advancedFiltersRow { display: flex !important; }
}

@media (max-width: 768px) {
    .listing-grid {
        grid-template-columns: 1fr;
    }

    .listing-card-thumbnail-images {
        flex: 1;
        display: flex;
        flex-direction: column;
        max-width: 35%;
        gap: 2px;
    }
}

@media (max-width: 659px) {
    /* Set font-size for search results heading */
    .search-results h3 {
        font-size: 16px;
    }

    /* Remove grid layout for small screens to prevent overflow */
    .listing-grid {
        display: block; /* Switch to block layout for all screens below 659px */
        gap: 20px;
    }

    .listing-card-link {
        width: 100%; /* Full width for all screens below 659px */
        box-sizing: border-box;
        max-width: 100%;
    }

    .listing-card {
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
    }

    .listing-card-images-container {
        padding: 0 10px;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 200px;
        display: flex;
        flex-direction: row;
        margin-bottom: 5px;
    }

    .listing-card-main-image {
        flex: 2;
        max-width: 65%;
        box-sizing: border-box;
    }

    /* When there's only one image, make it take full width */
    .listing-card-images-container > .listing-card-main-image:only-child {
        max-width: 100%;
    }

    .listing-card-thumbnail-images {
        flex: 1;
        display: flex;
        flex-direction: column;
        max-width: 35%;
        gap: 2px;
    }

    .listing-card-thumbnail {
        flex: 1;
        overflow: hidden;
        height: calc(50% - 1px);
    }

    .listing-card-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0; /* Reset border-radius, we'll apply specific ones based on image count */
    }

    /* Two images: right image has radius on right corners */
    .listing-card-images-container.two-images .listing-card-thumbnail.single-thumbnail img {
        border-radius: 0 5px 5px 0;
    }

    /* Three images: top thumbnail has radius on top-right corner only */
    .listing-card-images-container.three-images .listing-card-thumbnail.first-thumbnail img {
        border-radius: 0 5px 0 0;
    }

    /* Three images: bottom thumbnail has radius on bottom-right corner only */
    .listing-card-images-container.three-images .listing-card-thumbnail.second-thumbnail img {
        border-radius: 0 0 5px 0;
    }

    /* Adjust title padding for mobile */
    .listing-card-title {
        padding: 8px 9px 7px 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Adjust info padding for mobile */
    .listing-card-info {
        padding: 6px 12px 8px 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Set font-size for owner info and badges container */
    .listing-card-owner-info,
    .listing-card-badges-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 12px;
    }

    .listing-card-owner-info .owner-info {
        width: auto;
        max-width: 50%;
        box-sizing: border-box;
    }

    .listing-card-badges-container .location-info {
        max-width: 40%;
        box-sizing: border-box;
        display: block;
    }

    /* Make badges smaller on mobile */
    .listing-card-badges {
        max-width: 60%;
    }

    .listing-card-badge {
        padding: 4px 8px;
        font-size: 12px;
    }

    .listing-card-storage, .listing-card-cost {
        min-width: auto;
    }
}

/* Additional media query for very small screens */
@media (max-width: 544px) {
    .listing-grid {
        display: block; /* Switch to block layout for very small screens */
    }

    .listing-card-link {
        width: 100%; /* Full width on very small screens */
    }
}