/* =============================================
   Building References Plugin – v2 Styles
   All rules scoped under #br-wrapper to beat
   any theme styles without touching globals.
   Palette:
     --br-green       : #2d7a3a
     --br-green-light : #e8f5eb
     --br-green-hover : #245f2e
     --br-anthracite  : #2b2d2f
     --br-anthracite-2: #3d4043
     --br-anthracite-3: #5a5f63
     --br-border      : #d0e8d3
     --br-bg          : #f3f7f3
   ============================================= */

/* ---- Root wrapper ---- */
#br-wrapper,
#br-wrapper * {
    box-sizing: border-box !important;
}

#br-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #2b2d2f !important;
    background: #f3f7f3 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================
   FEATURED SECTION
   ============================================= */

#br-wrapper .br-featured-section {
    background: #2b2d2f !important;
    padding: 24px 28px 28px !important;
    border-bottom: 3px solid #2d7a3a !important;
}

#br-wrapper .br-featured-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #2d7a3a !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#br-wrapper .br-featured-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

#br-wrapper .br-card-featured {
    border: 2px solid #2d7a3a !important;
    box-shadow: 0 4px 20px rgba(45, 122, 58, 0.25) !important;
}

/* =============================================
   LAYOUT (sidebar + main)
   ============================================= */

#br-wrapper .br-layout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

/* =============================================
   SIDEBAR
   ============================================= */

#br-wrapper .br-sidebar {
    width: 220px !important;
    min-width: 220px !important;
    background: #3d4043 !important;
    padding: 20px 18px !important;
    align-self: stretch !important;
    border-right: 1px solid #2b2d2f !important;
}

#br-wrapper .br-sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
}

#br-wrapper .br-sidebar-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #e8f5eb !important;
}

#br-wrapper .br-filter-reset {
    background: transparent !important;
    border: 1px solid #5a5f63 !important;
    color: #c8cccf !important;
    border-radius: 5px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    cursor: pointer !important;
    transition: border-color 0.2s, color 0.2s !important;
}

#br-wrapper .br-filter-reset:hover {
    border-color: #2d7a3a !important;
    color: #e8f5eb !important;
}

#br-wrapper .br-filter-block {
    margin-bottom: 22px !important;
}

#br-wrapper .br-filter-block-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #9ca3a8 !important;
    margin-bottom: 10px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #5a5f63 !important;
}

#br-wrapper .br-filter-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#br-wrapper .br-filter-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #d1d5d8 !important;
    cursor: pointer !important;
    line-height: 1.3 !important;
    font-weight: normal !important;
    margin: 0 !important;
    padding: 0 !important;
}

#br-wrapper .br-filter-option input[type="radio"],
#br-wrapper .br-filter-option input[type="checkbox"] {
    accent-color: #2d7a3a !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

#br-wrapper .br-filter-option:hover {
    color: #ffffff !important;
}

/* =============================================
   MAIN CONTENT AREA
   ============================================= */

#br-wrapper .br-main {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 24px 24px 32px !important;
    background: #f3f7f3 !important;
}

#br-wrapper .br-main-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid #d0e8d3 !important;
}

#br-wrapper .br-main-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #2b2d2f !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.2 !important;
}

#br-wrapper .br-count-badge {
    background: #2d7a3a !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
}

/* =============================================
   CARD GRID
   ============================================= */

#br-wrapper .br-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 22px !important;
}

/* =============================================
   CARD
   ============================================= */

#br-wrapper .br-card {
    background: #ffffff !important;
    border: 1px solid #d0e8d3 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(45, 122, 58, 0.07) !important;
    transition: box-shadow 0.25s, transform 0.25s !important;
    display: flex !important;
    flex-direction: column !important;
}

#br-wrapper .br-card:hover {
    box-shadow: 0 6px 22px rgba(45, 122, 58, 0.18) !important;
    transform: translateY(-3px) !important;
}

#br-wrapper .br-card.br-hidden {
    display: none !important;
}

/* =============================================
   GALLERY – taller images (4:3 ratio)
   ============================================= */

#br-wrapper .br-gallery {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    background: #e8f5eb !important;
    flex-shrink: 0 !important;
}

#br-wrapper .br-gallery-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

#br-wrapper .br-gallery-img.br-active {
    opacity: 1 !important;
}

#br-wrapper .br-gallery-nav {
    position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    z-index: 5 !important;
}

#br-wrapper .br-prev,
#br-wrapper .br-next {
    background: rgba(43, 45, 47, 0.72) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s !important;
    line-height: 1 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#br-wrapper .br-prev:hover,
#br-wrapper .br-next:hover {
    background: rgba(43, 45, 47, 0.95) !important;
}

#br-wrapper .br-gallery-counter {
    background: rgba(43, 45, 47, 0.72) !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
}

/* =============================================
   CARD BODY
   ============================================= */

#br-wrapper .br-card-body {
    padding: 16px 18px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 !important;
}

/* ---- Tags ---- */
#br-wrapper .br-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

#br-wrapper .br-tag {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
}

#br-wrapper .br-tag-nearby {
    background: #e8f5eb !important;
    color: #2d7a3a !important;
    border: 1px solid #b6debb !important;
}

#br-wrapper .br-tag-tall {
    background: #f0f4f0 !important;
    color: #3d4043 !important;
    border: 1px solid #c0c8c2 !important;
}

#br-wrapper .br-tag-ugly {
    background: #2b2d2f !important;
    color: #c8cccf !important;
    border: 1px solid #5a5f63 !important;
}

/* ---- Card title ---- */
#br-wrapper .br-card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2b2d2f !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    border: none !important;
}

#br-wrapper .br-house-number {
    display: inline-block !important;
    background: #e8f5eb !important;
    color: #2d7a3a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 5px !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    border: 1px solid #b6debb !important;
}

/* ---- Rating ---- */
#br-wrapper .br-rating {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

#br-wrapper .br-star {
    font-size: 16px !important;
    line-height: 1 !important;
}

#br-wrapper .br-star-filled {
    color: #2d7a3a !important;
}

#br-wrapper .br-star-empty {
    color: #c8d4c9 !important;
}

#br-wrapper .br-rating-label {
    font-size: 11px !important;
    color: #5a5f63 !important;
    margin-left: 5px !important;
}

/* ---- Description ---- */
#br-wrapper .br-description {
    font-size: 13px !important;
    color: #3d4043 !important;
    line-height: 1.6 !important;
}

#br-wrapper .br-description p {
    margin: 0 0 6px !important;
}

#br-wrapper .br-description p:last-child {
    margin-bottom: 0 !important;
}

/* ---- Maps button ---- */
#br-wrapper .br-maps-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: auto !important;
    padding: 8px 15px !important;
    background: #2d7a3a !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    transition: background 0.2s !important;
    align-self: flex-start !important;
    border: none !important;
    box-shadow: none !important;
}

#br-wrapper .br-maps-link:hover {
    background: #245f2e !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ---- No results ---- */
#br-wrapper .br-no-results-msg {
    color: #5a5f63 !important;
    font-style: italic !important;
    padding: 30px 0 !important;
    text-align: center !important;
    font-size: 14px !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 900px) {
    #br-wrapper .br-layout {
        flex-direction: column !important;
    }
    #br-wrapper .br-sidebar {
        width: 100% !important;
        min-width: unset !important;
        border-right: none !important;
        border-bottom: 1px solid #2b2d2f !important;
    }
    #br-wrapper .br-filter-options {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 600px) {
    #br-wrapper .br-featured-grid,
    #br-wrapper .br-grid {
        grid-template-columns: 1fr !important;
    }
}