/*.contact-form-section {
    color: white;
}*/


.estate-detail-section .estate-detail-section-title {
    font-size: clamp(24px, 22.67px + 1.59vw, 40px);
    line-height: clamp(32px, 26.67px + 1.59vw, 50px);
    font-weight: 500;
    color: white;
    margin-bottom: 30px;
}

.estate-detail-section .form-control, .estate-detail-section .form-select {
    background-color: var(--ltc-blue);
    backdrop-filter: blur(10px);
    border: 1px solid white;
    color: white;
    padding: 10px;
    margin-bottom: 20px;
    width: 100%;
}
.estate-detail-section .form-control::placeholder, .estate-detail-section .form-section-title {
    color: white;
}
.estate-detail-section .form-section-title {
    font-size: clamp(16px, 14.67px + 0.37vw, 20px);
    line-height: clamp(24px, 22.67px + 0.37vw, 28px);
    font-weight: 300;
    color: white;
    margin-bottom: 20px;
}


.estate-detail-section small a {
    color: white;
    text-decoration: underline;
}


/* ==========================================================================
   1. MENU / HEADER STYLING
   ========================================================================== */

/* Container voor de favorietenknop in het menu */
.fav-button-container {
    position: relative;
    display: inline-block;
}

/* De knop zelf in de menubalk */
.fav-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--ltc-blue);
    font-weight: bold;
    padding: 10px;
}

/* Het hartje vóór de tekst in het menu */
.fav-button .heart-icon {
    margin-right: 8px;
    color: var(--ltc-blue); /* Standaard blauw */
    transition: color 0.2s ease;
}

.site-nav-white .fav-button .heart-icon {
    color: white;
}

/* Als er favorieten zijn: maak het menu-hartje diepgeel */
.fav-button.has-favorites .heart-icon {
    color: var(--ltc-yellow);
}

/* Het cijfer-bolletje rechtsboven de menuknop */
.fav-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--ltc-yellow); /* Geel bolletje */
    color: var(--ltc-blue); /* Blauw cijfer voor leesbaarheid */
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: none; /* Standaard ONZICHTBAAR bij 0 favorieten */
    align-items: center;
    justify-content: center;
}

/* Toon het bolletje zodra de klasse 'has-favorites' actief is */
.fav-button.has-favorites .fav-badge {
    display: flex;
}

/* ==========================================================================
   2. PANDEN OVERZICHT STYLING (DE REALTOR KANTOOR REGELEMENTEN)
   ========================================================================== */

/* De standaard knop bij een pand (niet bewaard) */
.favorite-toggle {
    background-color: #ffffff;
    border: 2px solid #ccc;
    color: var(--ltc-blue);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

/* Het hartje in de knop bij het pand */
.favorite-toggle .btn-heart {
    color: var(--ltc-blue); /* Standaard blauw */
    transition: color 0.2s ease;
}

/* WANNEER HET PAND IN DE FAVORIETEN ZIT */
.favorite-toggle.is-favorite {
    border-color: var(--ltc-yellow); /* Diepgele rand */
    background-color: #FFFDF0; /* Subtiele lichtgele achtergrond */
}

/* Maak het hartje bij het pand diepgeel */
.favorite-toggle.is-favorite .btn-heart {
    color: var(--ltc-yellow);
}



/* Knop om de hele lijst te legen */
.clear-all-favorites {
    background-color: #ff4d4d;
    color: white;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: background 0.2s;
}

.clear-all-favorites:hover {
    background-color: #cc0000;
}

/* Een animatie-effect wanneer een pand individueel wordt gewist */
.property-card.fade-out {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.3s ease;
}



/* De wis-knop per pand op de favorietenpagina */
.remove-favorite-btn {
    background-color: #f8f9fa;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-favorite-btn:hover {
    background-color: #dc3545;
    color: #ffffff;
}