/* Marketplace listing cards (Areas/Estate/Views/Listings/_ListingCard.cshtml): used by the listings page,
   Your Favourites and My Favourites. Moved here from Index.cshtml so every page shows the same card. */

/* Compact, consistent listing labels with readable text and matching icons. */
.estate-listing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .75rem;
}

.estate-listing-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .75rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .005em;
    white-space: nowrap;
}

/* Badge icons must not inherit the generic green card-icon styling. */
.card .estate-listing-badge i.fa-solid {
    color: inherit;
    font-size: .72rem;
    transform: none;
    will-change: auto;
}

.estate-featured-badge {
    background: #fff8eb;
    border-color: #efddb6;
    color: #805413;
}

.estate-price-reduced {
    background: #fff1f3;
    border-color: #f1d1d8;
    color: #9a354b;
}

.estate-urgent-badge {
    background: #fff3eb;
    border-color: #f0d5c2;
    color: #98441d;
}

.estate-featured-card {
    border-color: #fcd34d;
    box-shadow: 0 0 0 .12rem rgba(252, 211, 77, .35) !important;
}


/* ── Favourites: the heart on each listing ───────────────────────────────────────────────── */

/* Top-right of the photograph, above the card's stretched link so pressing it never opens the listing. */
.estate-fav-btn {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 3;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #334155;
    font-size: 1.15rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
    cursor: pointer;
    transition: transform .15s ease, color .15s ease, background-color .15s ease;
}

.estate-fav-btn:hover {
    color: #dc2626;
    transform: scale(1.08);
}

.estate-fav-btn:focus-visible {
    outline: 3px solid #185a8d;
    outline-offset: 2px;
}

.estate-fav-btn .estate-fav-icon-on,
.estate-fav-btn.is-on .estate-fav-icon-off {
    display: none;
}

.estate-fav-btn.is-on .estate-fav-icon-on {
    display: inline;
}

.estate-fav-btn.is-on {
    color: #dc2626;
}

/* Icons keep the button's colour, not the green card-icon styling. */
.estate-fav-btn i.fa-solid,
.estate-fav-btn i.fa-regular,
.card .estate-fav-btn i.fa-solid,
.card .estate-fav-btn i.fa-regular {
    color: inherit;
    transform: none;
}

.estate-fav-btn.is-popping {
    animation: estate-fav-pop .3s ease-out;
}

@keyframes estate-fav-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Share and favourite buttons together, top-right of a card's photograph. */
.estate-card-actions {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 3;
    display: flex;
    gap: .45rem;
}

.estate-card-actions .estate-fav-btn {
    position: static;
}

/* ── Sharing ─────────────────────────────────────────────────────────────────────────────── */

/* Hidden until marketplace-share.js has run, so a Share button never does nothing. */
html:not(.js-share) .estate-share-btn,
html:not(.js-share) .estate-share-cta {
    display: none !important;
}

.estate-share-btn {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #334155;
    font-size: 1.05rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
    cursor: pointer;
    transition: transform .15s ease, color .15s ease;
}

.estate-share-btn:hover {
    color: #185a8d;
    transform: scale(1.08);
}

.estate-share-btn:focus-visible {
    outline: 3px solid #185a8d;
    outline-offset: 2px;
}

.estate-share-btn i.fa-solid,
.card .estate-share-btn i.fa-solid {
    color: inherit;
    transform: none;
}

/* The Share options panel (_ShareModal.cshtml). */
.estate-share-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

@media (min-width: 420px) {
    .estate-share-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.estate-share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 4.5rem;
    padding: .6rem .4rem;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    background: #fff;
    color: #1f2937;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.estate-share-option i {
    font-size: 1.5rem;
}

.estate-share-option:hover,
.estate-share-option:focus-visible {
    border-color: #185a8d;
    background: #f3f8fc;
    color: #1f2937;
}

/* Bigger on the listing page, top-right of the gallery (the heart and the share icon). */
.estate-fav-btn-lg,
.estate-share-btn.estate-fav-btn-lg {
    width: 3rem;
    height: 3rem;
    font-size: 1.35rem;
}

/* My Favourites link and its count. */
a.estate-fav-nav {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .4rem .7rem .4rem .45rem;
    border: 1px solid #f2d6dc;
    border-radius: 999px;
    background: #fff;
    color: #192744;
    box-shadow: 0 3px 12px rgb(18 28 45 / 24%);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

a.estate-fav-nav[hidden] {
    display: none;
}

a.estate-fav-nav:hover {
    background: #fff1f4;
    color: #192744;
}

a.estate-fav-nav:focus-visible {
    outline: 2px solid #851731;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

.estate-fav-nav .fa-heart {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: #fce8ed;
    color: #dc2626;
}

.estate-fav-nav .estate-fav-count {
    background: #e7eef9;
    color: #192744;
    font-variant-numeric: tabular-nums;
}


.estate-fav-count {
    min-width: 1.5rem;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

/* Your Favourites section on the marketplace homepage. */
.estate-favourites {
    padding: 1.25rem;
    border: 1px solid #f3c4c4;
    border-radius: 1rem;
    background: #fff7f7;
}

.estate-fav-leaving {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .25s ease, transform .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .estate-share-btn,
    .estate-fav-btn,
    .estate-fav-leaving {
        transition: none;
    }

    .estate-fav-btn.is-popping {
        animation: none;
    }
}