/* ==========================================================
   SYLFOW MARKET
   PREMIUM LISTING CARD V2
   ========================================================== */

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

.sf-card{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.06);
    border-radius:22px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.sf-card:hover{

    transform:translateY(-10px);

    border-color:rgba(25,135,84,.18);

    box-shadow:
        0 20px 60px rgba(15,23,42,.12);

}

.sf-card-link{

    display:flex;

    flex-direction:column;

    height:100%;

    color:inherit;

    text-decoration:none;

}

/* ==========================================================
   IMAGE
   ========================================================== */

.sf-card-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:4/3;

    background:#f8fafc;

}

.sf-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .55s ease,
        filter .45s ease;

}

.sf-card:hover .sf-card-image img{

    transform:scale(1.08);

    filter:saturate(108%);

}

.sf-card-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:3.2rem;

    color:#cbd5e1;

    background:
        linear-gradient(
            135deg,
            #f8fafc,
            #eef2f7
        );

}

/* ==========================================================
   OVERLAY
   ========================================================== */

.sf-card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.18),
            transparent 45%
        );

    opacity:0;

    transition:.35s;

}

.sf-card:hover .sf-card-image::after{

    opacity:1;

}

/* ==========================================================
   BADGES
   ========================================================== */

.sf-badge{

    position:absolute;

    display:flex;

    align-items:center;

    gap:6px;

    z-index:3;

    padding:8px 14px;

    border-radius:999px;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.3px;

    color:#fff;

    backdrop-filter:blur(12px);

}

/* Premium */

.sf-badge-premium{

    top:16px;

    left:16px;

    background:
        linear-gradient(
            135deg,
            #198754,
            #157347
        );

    box-shadow:
        0 8px 18px rgba(25,135,84,.30);

}

/* Nouveau */

.sf-badge-new{

    top:58px;

    left:16px;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #2563eb
        );

    box-shadow:
        0 8px 18px rgba(13,110,253,.25);

}

/* ==========================================================
   PHOTO COUNT
   ========================================================== */

.sf-photo-count{

    position:absolute;

    bottom:16px;

    left:16px;

    z-index:3;

    display:flex;

    align-items:center;

    gap:6px;

    padding:7px 12px;

    border-radius:999px;

    background:rgba(0,0,0,.60);

    color:#fff;

    font-size:.80rem;

    font-weight:600;

    backdrop-filter:blur(8px);

}

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

.sf-favorite-btn{

    position:absolute;

    top:16px;

    right:16px;

    z-index:4;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    background:#ffffff;

    color:#198754;

    font-size:1.15rem;

    box-shadow:
        0 10px 24px rgba(15,23,42,.18);

    transition:
        transform .30s,
        background .30s,
        color .30s;

}

.sf-favorite-btn:hover{

    transform:scale(1.10);

    background:#198754;

    color:#ffffff;

}

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

.sf-card-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:22px;

    gap:14px;

}

/* ==========================================================
   PRICE
   ========================================================== */

.sf-card-price{

    display:flex;

    align-items:flex-end;

    gap:8px;

    font-size:1.75rem;

    font-weight:800;

    color:#198754;

    line-height:1;

}

.sf-card-price span{

    margin-bottom:3px;

    font-size:.82rem;

    font-weight:700;

    color:#64748b;

    letter-spacing:.4px;

    text-transform:uppercase;

}

/* ==========================================================
   TITLE
   ========================================================== */

.sf-card-title{

    margin:0;

    color:#0f172a;

    font-size:1.08rem;

    font-weight:700;

    line-height:1.5;

    min-height:3.2rem;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    text-overflow:ellipsis;

    transition:color .30s;

}

.sf-card:hover .sf-card-title{

    color:#198754;

}

/* ==========================================================
   LOCATION
   ========================================================== */

.sf-card-location{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.92rem;

    color:#64748b;

}

.sf-card-location i{

    color:#198754;

    font-size:1rem;

}

/* ==========================================================
   CATEGORY
   ========================================================== */

.sf-card-category{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    padding:7px 12px;

    border-radius:999px;

    background:#f0fdf4;

    color:#198754;

    font-size:.82rem;

    font-weight:700;

}

.sf-card-category i{

    font-size:.85rem;

}

/* ==========================================================
   SHOP
   ========================================================== */

.sf-card-shop{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    padding:12px 0;

    color:#475569;

    font-size:.92rem;

    font-weight:600;

}

.sf-card-shop i{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ecfff5;

    color:#198754;

    font-size:1rem;

}

.sf-card-shop span{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

/* ==========================================================
   FOOTER
   ========================================================== */

.sf-card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-top:auto;

    padding-top:18px;

    border-top:1px solid #eef2f7;

}

/* ==========================================================
   STATS
   ========================================================== */

.sf-card-stats{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.sf-card-stats span{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:.85rem;

    font-weight:600;

    color:#64748b;

}

.sf-card-stats i{

    color:#198754;

    font-size:.95rem;

}

/* ==========================================================
   ARROW
   ========================================================== */

.sf-card-arrow{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ecfff5;

    color:#198754;

    transition:
        background .30s,
        color .30s,
        transform .30s;

}

.sf-card:hover .sf-card-arrow{

    background:#198754;

    color:#ffffff;

    transform:translateX(4px);

}

/* ==========================================================
   FOCUS ACCESSIBILITY
   ========================================================== */

.sf-card-link:focus-visible{

    outline:3px solid rgba(25,135,84,.35);

    outline-offset:4px;

    border-radius:22px;

}

.sf-favorite-btn:focus-visible{

    outline:3px solid rgba(25,135,84,.35);

    outline-offset:3px;

}

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

@media (max-width:991px){

    .sf-card-body{

        padding:20px;

    }

    .sf-card-price{

        font-size:1.55rem;

    }

    .sf-card-title{

        font-size:1rem;

    }

}

@media (max-width:767px){

    .sf-card{

        border-radius:18px;

    }

    .sf-card-body{

        padding:18px;

        gap:12px;

    }

    .sf-card-price{

        font-size:1.40rem;

    }

    .sf-card-title{

        font-size:.98rem;

        min-height:3rem;

    }

    .sf-card-category{

        font-size:.78rem;

    }

    .sf-card-shop{

        font-size:.86rem;

    }

    .sf-card-footer{

        gap:10px;

    }

    .sf-card-stats{

        gap:12px;

    }

}

@media (max-width:480px){

    .sf-card-price{

        font-size:1.28rem;

    }

    .sf-card-title{

        font-size:.94rem;

    }

    .sf-photo-count{

        font-size:.72rem;

        padding:6px 10px;

    }

    .sf-badge{

        font-size:.72rem;

        padding:7px 12px;

    }

    .sf-favorite-btn{

        width:40px;

        height:40px;

        font-size:1rem;

    }

}

/* ==========================================================
   MICRO ANIMATIONS
   ========================================================== */

.sf-card,
.sf-card img,
.sf-card-arrow,
.sf-favorite-btn,
.sf-badge{

    will-change:transform;

}

.sf-card:hover .sf-card-shop i{

    transform:rotate(-8deg);

    transition:transform .30s ease;

}

.sf-card:hover .sf-card-category{

    background:#198754;

    color:#ffffff;

    transition:.30s;

}

.sf-card:hover .sf-card-category i{

    color:#ffffff;

}