/*
 * Saved homes: the heart on cards and house pages, the nav link's count (js/saved-homes.js).
 * Loaded on every page from base-head.php.
 */

/* The heart on a card: top-left of the photo (the cards' "View" tab and arrows live on the right). */
.dle-heart {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background-color .15s;
}
.dle-heart:hover { background: rgba(0, 0, 0, 0.55); }
.dle-heart svg { display: block; fill: rgba(0, 0, 0, 0.25); stroke: #fff; stroke-width: 2; transition: fill .15s; }
.dle-heart.is-saved svg { fill: #e4566a; stroke: #fff; }
.dle-heart.just-saved svg { animation: dle-heart-pop .35s ease; }
@keyframes dle-heart-pop { 50% { transform: scale(1.25); } }

/* The cards that host it need to be positioned; the search card wrapper already is. */
.position-re .dle-heart, .card-image-wrapper .dle-heart { position: absolute; }
.card-image-wrapper { position: relative; }

/* The house page's labelled heart, beside the title. */
.dle-heart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin: 4px 0 12px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: #2b2b2b;
    color: #fff;
    font: 13px/36px 'Barlow Condensed', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s;
}
.dle-heart-btn:hover { background: #e4a853; }
.dle-heart-btn svg { fill: transparent; stroke: #fff; stroke-width: 2; }
.dle-heart-btn.is-saved svg { fill: #e4566a; stroke: #e4566a; }
.dle-heart-btn.just-saved svg { animation: dle-heart-pop .35s ease; }

/* Nav: the count beside "Saved". */
.dle-saved-count {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background: #aa8453;
    color: #fff;
    font: 600 11px/18px 'Barlow', sans-serif;
    letter-spacing: 0;
    text-align: center;
    vertical-align: 2px;
}
.dle-saved-count[hidden] { display: none; }

/* House page: the specs line, with the Save heart pushed to its right end. */
.details-string.dle-details-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.dle-details-row .dle-heart-btn { margin: 0 0 0 auto; height: 30px; padding: 0 13px; gap: 6px; font-size: 12px; line-height: 30px; }
.dle-details-row .dle-heart-btn span { margin: 0; }      /* .details-string span adds 8px on the right */