/* De hoofdcontainer: we verwijderen eventuele padding */
.at-featured-holder {
    display: flex;
    flex-wrap: nowrap;
    padding: 0; /* Belangrijk: geen witruimte in de holder zelf */
    overflow: hidden;
}

/* De image container: exact op maat */
.at-property-image {
    width: 285px;
    min-width: 285px;
    height: 248px;
    overflow: hidden;
    position: relative;
    margin: 0 !important; /* Forceer geen marges */
    padding: 0 !important; /* Forceer geen padding */
}

/* De figure en anchor binnen de container resetten */
.at-property-image figure.item, 
.at-property-image figure.item a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* De afbeelding zelf: vult het volledige kader zonder witruimte */
.at-property-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important; /* Voorkom dat andere CSS hem verkleint */
    object-fit: cover; /* Vult het kader volledig, snijdt indien nodig randjes af */
    display: block;
}


/* Mobiele weergave: stapel ze weer boven elkaar op kleine schermen */
@media (max-width: 767px) {
    .at-featured-holder {
        flex-direction: column;
    }
    .at-property-image {
        width: 100%;
        min-width: 100%;
    }
}


#cityResults {
    font-size: 14px;
    background: #fff;
    border: 1px solid #ddd;
    position: absolute;
    width: 100%;
    z-index: 999;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#cityResults li {
    list-style: none !important;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #eee;
}

#cityResults li:last-child {
    border-bottom: none;
}

#cityResults li a {
    text-decoration: none;
    color: #333;
    display: block;
}

#cityResults li:hover {
    background: #f5f5f5;
}

/* Responsiveness: Geoptimaliseerd voor mobiel */
@media (max-width: 768px) {
    /* Algemene instelling voor alle sub-menu's op mobiel */
    .menu-item-has-children .sub-menu {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100vw !important; 
        left: 0 !important;
        transform: none !important;
        position: relative !important;
        max-height: 350px; /* Scrollbar voor lange lijsten */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        border-bottom: 2px solid #ddd;
    }

    /* SPECIFIEKE FIX VOOR PROFIEL MENU OP MOBIEL */
    /* Target de sub-menu specifiek binnen de navigatie */
    .at-navigation ul li .sub-menu.profile-fix {
        display: block !important;
        position: static !important; /* Haalt hem uit de 'absolute' zwevende stand */
        width: 100% !important;
        max-height: none !important;
        padding: 10px 0 10px 20px !important; /* Geeft wat ruimte aan de linkerkant */
        background: transparent !important; /* Laat hem versmelten met het mobiele menu */
        box-shadow: none !important;
        transform: none !important;
    }

    .at-navigation ul li .sub-menu.profile-fix li {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
        padding: 0 !important;
    }

    .at-navigation ul li .sub-menu.profile-fix li a {
        display: block !important;
        text-align: left !important;
        padding: 10px 0 !important; /* Alleen verticale padding, horizontale komt van de UL */
        color: #333 !important; /* Of de kleur van je andere menu-items */
    }
}


/* Harde reset voor het profielmenu naar verticaal en gecentreerd */
ul.sub-menu.profile-fix {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 180px !important; 
    min-width: 180px !important;
    
    /* Centrering ten opzichte van de parent (de profielfoto) */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important; /* Schuift het menu exact naar het midden */
    
    padding: 10px 0 !important;
}

    /* 1. De container van de lijst add.php */
    .ui-autocomplete {
        list-style: none !important;
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 1px solid #cccccc !important;
        z-index: 9999 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        max-height: 300px;
        overflow-y: auto;
    }

    /* 2. De individuele regels in de lijst */
    .ui-menu-item {
        list-style: none !important;
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #f0f0f0;
    }

    /* 3. De klikbare link/div binnen de regel */
    .ui-menu-item-wrapper {
        padding: 10px 15px !important;
        display: block !important;
        cursor: pointer !important;
        font-size: 14px;
        color: #333;
        background: none !important;
        border: none !important;
    }

    /* 4. Kleurverandering bij eroverheen hoveren of selecteren */
    .ui-state-active, .ui-menu-item-wrapper:hover {
        background-color: #007bff !important;
        color: #ffffff !important;
        margin: 0 !important;
    }

    /* 5. Verberg de hulptekst van jQuery UI die soms onderaan de pagina verschijnt */
    .ui-helper-hidden-accessible {
        display: none !important;
    }
	
	    .form-group-third {
        width: 33.333% !important;
        float: left;
        padding: 0 15px; /* Zorgt voor de juiste tussenruimte */
    }

    /* Zorg dat op mobiel de velden wel weer de volle breedte pakken */
    @media (max-width: 767px) {
        .form-group-third {
            width: 100% !important;
        }
    }
	
	/* Geef de select standaard de placeholder kleur */
.custom-select-placeholder {
    color: #9a9a9a;
}