/* =========================
   Page /pages/properties.html
   ========================= */

/* -----------------------------------
   NAVBAR : même alignement que about
   ----------------------------------- */

/* Conteneur principal du header :
   on force tout sur une seule ligne */
.properties-page .topbar .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px;
    flex-wrap: nowrap !important;
    /* jamais 2 lignes */
}

/* Bloc des liens au centre */
.properties-page .topbar .links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px;
    margin: 0 !important;
    padding: 0 !important;

    flex-wrap: nowrap !important;
    /* empêche un lien de descendre */
    white-space: nowrap;
    /* pas de retour dans les boutons */
}

/* Chaque élément du menu reste sur 1 ligne */
.properties-page .topbar .links>* {
    flex: 0 0 auto;
}

/* Groupe du dropdown */
.properties-page .links-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Zone actions : bouton + badge user */
.properties-page .nav-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
}

/* Conteneur rempli par auth.js */
.properties-page #userMenu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 🔴 On ne force plus les enfants de #userMenu,
      pour laisser le menu compte se positionner en absolute */

/* -----------------------------------
   Dropdown "الخدمات العقارية ▾"
   (version scoped pour cette page)
   ----------------------------------- */

/* Bouton "الخدمات العقارية ▾" */
.properties-page .link-drop {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 999px;
    color: var(--muted);
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.properties-page .link-drop:hover,
.properties-page .link-drop:focus-visible {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
}

.properties-page .link-drop-caret {
    font-size: 11px;
}

/* Menu déroulant : caché par défaut */
.properties-page .link-drop-menu {
    position: absolute;
    top: 110%;
    inset-inline-end: 0;
    /* RTL-friendly */
    min-width: 190px;
    padding: 6px 0;
    border-radius: 14px;

    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);

    display: none;
    z-index: 120;
}

/* Affiché quand JS ajoute .is-open */
.properties-page .link-drop-menu.is-open {
    display: block;
}

/* Liens du menu : texte foncé lisible */
.properties-page .link-drop-menu a,
.properties-page .link-drop-menu a:link,
.properties-page .link-drop-menu a:visited {
    display: block;
    padding: 7px 12px;
    margin: 2px 6px;
    white-space: nowrap;
    color: #0f172a;
    border-radius: 10px;
    text-decoration: none;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

/* Survol / lien actif */
.properties-page .link-drop-menu a:hover,
.properties-page .link-drop-menu a.active-sub {
    background: rgba(0, 0, 0, 0.04);
}

/* -----------------------------------
   Filtres & grille de résultats
   (ton code existant, inchangé)
   ----------------------------------- */

/* Filtres : petit panneau propre */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 18px 0 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}

.filters .field label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #64748b;
}

.filters .field input,
.filters .field select {
    width: 100%;
}

.filters-reset-btn {
    align-self: flex-end;
    margin-top: 4px;
}

/* Head résultats */
.results-section {
    margin-top: 16px;
}

.results-head {
    margin-bottom: 10px;
}

/* =========================
   Grille des biens (style masonry)
   ========================= */

/* Conteneur principal des cartes */
.properties-grid {
    margin-top: 12px;
    column-count: 3;
    /* 3 colonnes sur grand écran */
    column-gap: 18px;
}

/* Responsive : 2 colonnes tablette, 1 colonne mobile */
@media (max-width: 1024px) {
    .properties-grid {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    .properties-grid {
        column-count: 1;
    }
}

/* Chaque carte */
.properties-grid>* {
    display: inline-block;
    width: 100%;
    margin: 0 0 18px;
    break-inside: avoid;
    border-radius: 22px;
    overflow: hidden;
}

/* Image de la carte */
.properties-grid img {
    width: 100%;
    display: block;
    max-width: 100%;
    height: 260px;
    object-fit: cover;
}

/* Titre + texte à l'intérieur des cartes */
.properties-grid h3 {
    margin: 12px 12px 6px;
    font-size: 18px;
}

/* Paragraphe de description */
.properties-grid p {
    margin: 0 12px 12px;
    font-size: 13px;
    line-height: 1.6;
}

/* Badges (ville / هدف / prix) */
.properties-grid .badges,
.properties-grid .prop-tags,
.properties-grid .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 12px 10px;
}