/* =========================
PROPERTY CARD
Controls:
- Entire card container
========================= */

.property-card {
    position:relative;

    background:transparent;

    border:none;

    border-radius:0;

    overflow:visible;

    box-shadow:none;

    cursor:pointer;

    transition:.3s ease;

}


/* =========================
IMAGE
Controls:
- Main property image
- Image size
- Rounded corners
- Image hover zoom
========================= */

.property-card-image {

    position:relative;

    aspect-ratio:4 / 3;

    overflow:hidden;

    border-radius:30px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);

}


.property-card-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s ease;

}


.property-card:hover img {

    transform:scale(1.05);

}



/* =========================
STATUS BADGE
Controls:
- Pre-Construction
- Completed
- Available
(top left on image)
========================= */

.property-badge {

    position:absolute;

    top:20px;

    left:20px;

    background:white;

    padding:5px 10px;

    border-radius:50px;

    font-size:12px;

    color:#000;

}



/* =========================
PROPERTY TYPE TAG
Controls:
- Condominium
- Luxury
- Residence
(top right on image)
========================= */

.property-tag {

    position:absolute;

    top:20px;

    right:20px;

    padding:6px 12px;

    background:rgba(255,255,255,.92);

    border-radius:999px;

    font-size:12px;

    color:#000;

}



/* =========================
TEXT AREA BELOW IMAGE
Controls:
- Space between image and text
- Left/right padding
========================= */

.property-card-info {

    padding:18px 5px 0;

}



/* =========================
NAME + PRICE ROW
Controls:
- Condo name LEFT
- Price RIGHT
========================= */

.property-card-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    gap:10px;

}



/* =========================
CONDO NAME / TITLE
Controls:
property.title

Example:
"St. Regis Residences Miami"
========================= */

.property-card-header h3 {

    margin:0;

    flex:1;

    color:#000;

    font-size:12px;

    font-weight:550;

    letter-spacing:0;

    line-height:1.2;

    text-align:left;

}



/* =========================
PRICE
Controls:
property.price

Example:
"$5M+"
========================= */

.property-card-header strong {

    margin:0;

    color:#000;

    font-size:12px;

    font-weight:550;

    letter-spacing:0;

    line-height:1.2;

    white-space:nowrap;

    text-align:right;

}



/* =========================
ADDRESS / LOCATION
Controls:
property.location
or
property.address

Example:
"Miami, Florida"
or
"1809 Brickell Ave, Miami, FL"
========================= */

.property-card-info p {

    margin:5px 0 0;

    color:#999;

    font-size:12px;

    font-weight:450;

    letter-spacing:0;

    line-height:1.2;

}



/* =========================
PROPERTY STATS
Controls:
- Bedrooms
- Bathrooms
- Units
- Floors
========================= */

.property-stats {

    display:flex;

    gap:16px;

    margin-top:10px;

    color:#000;

    font-size:12px;

    font-weight:500;

    letter-spacing:0;

}



/* =========================
GRID POSITION
Controls:
- Distance from toolbar/map
========================= */

.properties-grid {

    margin-top:-30px;

}




/* ==========================================
MOBILE PROPERTY CARD CONTROLS Everything here only affects screens <900px
========================================== */

@media (max-width:900px){

    /* CARD SPACING */

    .property-card{
        margin-bottom:6px;
    }


    /* IMAGE */

    .property-card-image{

        border-radius:24px;      /* image corners */
        aspect-ratio:4 / 3;      /* image height */
        box-shadow:
        0 12px 30px rgba(0,0,0,.12);

    }


    /* STATUS BADGE */

    .property-badge{

        top:16px;
        left:16px;

        padding:6px 12px;

        font-size:11px;

    }


    /* PROPERTY TYPE */

    .property-tag{

        top:16px;
        right:16px;

        padding:6px 12px;

        font-size:11px;

    }


    /* SPACE UNDER IMAGE */

    .property-card-info{

        padding:14px 8px 0;

    }


    /* TITLE + PRICE ROW */

    .property-card-header{

        gap:12px;

    }


    /* PROPERTY TITLE */

    .property-card-header h3{

        font-size:13px;
        font-weight:600;
        line-height:1.35;

    }


    /* PRICE */

    .property-card-header strong{

        font-size:13px;
        font-weight:600;

    }


    /* LOCATION */

    .property-card-info p{

        margin-top:6px;

        font-size:13px;

        line-height:1.4;

        color:#777;

    }


    /* STATS */

    .property-stats{

        margin-top:10px;

        gap:14px;

        font-size:13px;

    }



.sheet-header{
    height:65px;
}

.sheet-content .properties-grid{
    padding:15px 20px 50px;
}

}


/* UPDATED CARD PRICE + ADDRESS */

.property-card-address-line1 {
    color: #777;
}

.property-card-address-line2 {
    color: #999;
    margin-top: 1px;
}


/* ============================================================
   POLISHED CARD PRICE / ADDRESS / HIGHLIGHTS
   ============================================================ */

.property-card-price {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.property-card-original-price {
    color: #b2b2b2;
    font-size: 11px;
    font-weight: 450;
    line-height: 1.2;
    text-decoration: line-through;
    text-decoration-color: #b2b2b2;
    text-decoration-thickness: 1px;
}

.property-card-header strong {
    flex-shrink: 0;
}

.property-card-address {
    margin-top: 7px;
    color: #999;
    font-size: 12px;
    font-weight: 450;
    line-height: 1.35;
}

.property-card-address-line1 {
    display: block;
    color: #777;
}

.property-card-address-line2 {
    display: block;
    margin-top: 1px;
    color: #999;
}

.property-card-highlights {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.property-card-highlight {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid #e4dfd8;
    border-radius: 6px;
    background: #faf9f7;
    color: #68645f;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* ============================================================
   FAVORITE
   ============================================================ */


.property-favorite:hover {
    transform: scale(1.05);
}



.property-favorite.is-favorite

.property-favorite.is-favorite
.property-favorite-icon::after {
    content: "♥";
}

.property-favorite.is-favorite

.property-favorite.is-favorite
.property-favorite-icon::after {
    font-size: 18px;
}


/* =========================
   CLEAN PROPERTY FAVORITE
========================= */

.property-favorite {
    position: absolute;
    top: 20px;
    right: 20px;

    width: 36px;
    height: 36px;

    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    outline: none;

    background: rgba(25, 25, 25, 0.20);

    border-radius: 8px;

    cursor: pointer;
    z-index: 20;

    box-sizing: border-box;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.property-favorite:hover {
    background: rgba(25, 25, 25, 0.36);
    transform: scale(1.04);
}

.property-favorite-icon {
    width: 20px;
    height: 20px;

    display: block;

    fill: none;

    stroke: rgba(255, 255, 255, 0.96);
    stroke-width: 1.45;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;
}

.property-favorite.is-favorite {
    background: rgba(25, 25, 25, 0.32);
}

.property-favorite.is-favorite .property-favorite-icon {
    fill: rgba(255, 255, 255, 0.94);
    stroke: #fff;
    stroke-width: 1.35;
}


/* ============================================================
   FINAL FAVORITE HEART
   Clean outline heart — no circle / no white background
============================================================ */

.property-favorite {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 32px;
    height: 32px;

    padding: 0;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 6px;

    background: transparent !important;

    cursor: pointer;
    z-index: 20;

    box-sizing: border-box;

    transition:
        background .18s ease,
        transform .18s ease;
}

.property-favorite:hover {
    background: rgba(0, 0, 0, .16) !important;
    transform: scale(1.04);
}

.property-favorite-icon {
    width: 22px;
    height: 22px;

    display: block;

    fill: none;
    stroke: rgba(255,255,255,.96);

    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;

    overflow: visible;

    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,.35));

    transition:
        fill .18s ease,
        stroke .18s ease,
        stroke-width .18s ease;
}

.property-favorite:hover .property-favorite-icon {
    stroke-width: 1.65;
}

.property-favorite.is-favorite .property-favorite-icon {
    fill: rgba(255,255,255,.92);
    stroke: #fff;
    stroke-width: 1.35;
}

/* ============================================================
   SMART PROPERTY BADGES
   ============================================================ */

.property-badge {
    border: 1px solid rgba(255,255,255,.7);
    box-shadow:
        0 5px 18px rgba(0,0,0,.12);
    font-weight: 600;
    letter-spacing: .02em;
    backdrop-filter: blur(10px);
}

.property-badge.badge-just-listed {
    color: #fff;
    background: linear-gradient(
        135deg,
        #111827,
        #4f46e5
    );
}

.property-badge.badge-price-drop {
    color: #fff;
    background: linear-gradient(
        135deg,
        #dc2626,
        #f97316
    );
}

.property-badge.badge-waterfront {
    color: #fff;
    background: linear-gradient(
        135deg,
        #0369a1,
        #06b6d4
    );
}

.property-badge.badge-ocean-view {
    color: #fff;
    background: linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );
}

.property-badge.badge-pool {
    color: #fff;
    background: linear-gradient(
        135deg,
        #0891b2,
        #14b8a6
    );
}

.property-badge.badge-luxury {
    color: #fff;
    background: linear-gradient(
        135deg,
        #111827,
        #a16207
    );
}

.property-badge.badge-featured {
    color: #111;
    background: rgba(255,255,255,.94);
}

.property-badge.badge-status {
    color: #111;
    background: rgba(255,255,255,.94);
}



/* =========================================================
   PROPERTY IMAGE PILLS
   Match card price typography
   ========================================================= */

.property-image .property-badge,
.property-card-image .property-badge {

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    letter-spacing: 0 !important;
    text-transform: none !important;

    padding: 5px 9px !important;

    border-radius: 999px;

}


/* Time on market */

.property-time-badge {

    background: rgba(39, 20, 68, .92) !important;
    color: #fff !important;

}


/* =========================================================
   PROPERTY KEYWORDS UNDER ADDRESS
   ========================================================= */

.property-card-keywords {

    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 8px;
    margin-bottom: 2px;

}

.property-keyword {

    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding: 4px 9px;

    border-radius: 999px;

    background: #f3effb;
    color: #5b3b88;

    border: 1px solid #e4daf3;

    font-size: 11px;
    line-height: 1.1;
    font-weight: 600;

    white-space: nowrap;

}



/* ============================================================
   LISTING BADGES — final visual treatment
   ============================================================ */

.property-badge {
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.2;
    white-space: nowrap;
}

/* Image pill — match property price typography */
.property-image .property-badge,
.property-card-image .property-badge {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 5px 10px !important;
}


/* Tighten specs -> address spacing */
.property-card-header {
    margin-bottom: 0 !important;
}

.property-card-header h3 {
    margin-bottom: 0 !important;
}

.property-card-address {
    margin-top: 5px !important;
}


/* ============================================================
   PROPERTY KEYWORD PILLS
   ============================================================ */

.property-card-keywords {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.property-keyword {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;

    border: 1px solid #e4dfd8;
    border-radius: 6px;

    background: #faf9f7;
    color: #68645f;

    font-size: 10px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;
}



/* ============================================================
   FINAL PROPERTY KEYWORDS — SOFT GRAY PILLS
   ============================================================ */

.property-card-keywords {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    min-height: 0;
}

.property-card-keywords:empty {
    display: none !important;
}

.property-keyword {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;

    border: 1px solid #e4dfd8;
    border-radius: 999px;

    background: #faf9f7;
    color: #68645f;

    font-size: 10px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;
}

/* Image badge — match listing price exactly */
.property-image .property-badge,
.property-card-image .property-badge {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 5px 10px !important;
}


/* FINAL CARD ADDRESS + FEATURE PILLS */
.property-card-address {
    margin-top: 5px !important;
}

.property-card-keywords {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px !important;
    min-height: 0 !important;
}

.property-card-keywords:empty {
    display: none !important;
}

.property-keyword {
    display: inline-flex !important;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid #e4dfd8;
    border-radius: 999px;
    background: #faf9f7;
    color: #68645f;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* ==========================================================
   PROPERTY CARD FAVORITE POSITIONING
   Keep favorite button anchored to each property card
========================================================== */

.property-card {
    position: relative;
}


/* ==========================================================
   PROPERTY CARD FAVORITES
========================================================== */

.property-favorite {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);
    color: #5f5a54;

    cursor: pointer;
    z-index: 10;

    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        transform 0.15s ease;
}

.property-favorite:hover {
    background: #ffffff;
    transform: scale(1.04);
}

.property-favorite:disabled {
    cursor: default;
}

.property-favorite-icon {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    transition:
        fill 0.15s ease,
        color 0.15s ease;
}

.property-favorite.is-favorite {
    color: #a34f4f;
}

.property-favorite.is-favorite .property-favorite-icon {
    fill: currentColor;
}



/* Heart only: dark fill inside the outline, solid white when saved. */
.property-favorite {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
}
.property-favorite .property-favorite-icon {
    fill: rgba(0, 0, 0, .48);
    stroke: #fff;
}
.property-favorite.is-favorite { color: #fff !important; }
.property-favorite.is-favorite .property-favorite-icon {
    fill: #fff;
    stroke: #fff;
}


/* Group the transaction label and optional time-on-market label. */
.property-card-image > .property-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    width: calc(100% - 72px);
    pointer-events: none;
}
.property-card-image > .property-badges > .property-badge {
    position: relative;
    top: auto;
    left: auto;
    max-width: 100%;
}
.property-card-image > .property-badges > .badge-listing-age {
    color: #20242a;
    background: rgba(255,255,255,.96);
    border-color: rgba(255,255,255,.82);
}
@media (max-width: 900px) {
    .property-card-image > .property-badges {
        top: 16px;
        left: 16px;
        width: calc(100% - 64px);
    }
}


/* Keep every listing-image badge in the same white/black style. */
.property-card-image > .property-badges > .property-badge {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}


.property-card-image > .property-badges > .property-badge {
    font-size: 11px !important;
    font-weight: 500 !important;
}