/* SMJ Marketplace Pro — Single Listing styles
   Extracted from template; enqueued via wp_enqueue_style(). */

/* ─────────────────────────────────────────────────────────────────────────
   SMJ Single Listing — Compact & Clean UI  v3.0
   CSS-only refresh. Zero PHP / JS / HTML changes.
   All functionality (Call, WA, Enquiry, Lightbox, Favourites) is preserved.
───────────────────────────────────────────────────────────────────────── */

/* ── Scoped reset ── */
.smj-sl-wrap *,.smj-sl-wrap *::before,.smj-sl-wrap *::after{box-sizing:border-box}
.smj-sl-wrap a{text-decoration:none}
.smj-sl-wrap ul{list-style:none;margin:0;padding:0}
.smj-sl-wrap button{cursor:pointer;font-family:inherit}
.smj-sl-wrap img{display:block;max-width:100%}

/* ── Page container ── */
.smj-sl-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:16px 14px 64px;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:14px;
    color:#333;
    line-height:1.55;
}

/* ── Breadcrumb — FIX 6: icons, compact, readable ── */
.smj-sl-bc{
    display:flex;align-items:center;flex-wrap:wrap;
    gap:0;font-size:12px;color:#999;
    margin-bottom:14px;
    background:#f9f9f9;
    border:1px solid #eeeeee;
    border-radius:6px;
    padding:7px 12px;
}
.smj-sl-bc a{
    color:#555;font-weight:500;
    display:inline-flex;align-items:center;gap:4px;
    padding:0 2px;
    transition:color .12s;
}
.smj-sl-bc a:hover{color:#2563eb;text-decoration:none}
/* Home link — prepend house icon */
.smj-sl-bc a:first-of-type::before{
    content:"";
    display:inline-block;width:12px;height:12px;flex-shrink:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    background-size:contain;background-repeat:no-repeat;
    vertical-align:middle;
}
/* Listings link — prepend list icon */
.smj-sl-bc a:nth-of-type(2)::before{
    content:"";
    display:inline-block;width:12px;height:12px;flex-shrink:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='3' cy='6' r='1'/%3E%3Ccircle cx='3' cy='12' r='1'/%3E%3Ccircle cx='3' cy='18' r='1'/%3E%3C/svg%3E");
    background-size:contain;background-repeat:no-repeat;
    vertical-align:middle;
}
.smj-sl-bc .sep{
    color:#ccc;margin:0 5px;font-size:13px;
    user-select:none;flex-shrink:0;
}
/* Current page — last span */
.smj-sl-bc span:not(.sep){
    color:#888;font-weight:400;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    max-width:200px;
}

/* ── 2-column layout ── */
.smj-sl-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:18px;
    align-items:start;
}

/* ── Card shell ── */
.smj-sl-card{
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:12px;
}
.smj-sl-card:last-child{margin-bottom:0}
.smj-sl-cb{padding:14px 16px}
.smj-sl-ch{
    font-size:13px;font-weight:600;color:#444;
    margin:0 0 10px;
    display:flex;align-items:center;gap:7px;
}
.smj-sl-ch::after{content:'';flex:1;height:1px;background:#f0f0f0}
.smj-sl-ch svg{
    width:13px;height:13px;
    stroke:#888;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}

/* ═══════════════════════════════
   GALLERY
═══════════════════════════════ */
.smj-sl-gallery{margin-bottom:12px}

/* Main image — slightly shorter aspect for compactness */
.smj-sl-main{
    position:relative;
    border-radius:8px;
    overflow:hidden;
    background:#111;
    aspect-ratio:16/9;
    cursor:zoom-in;
}
.smj-sl-main img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .3s ease,opacity .2s;
    will-change:transform;
}
.smj-sl-main:hover img{transform:scale(1.02)}

/* Counter badge */
.smj-sl-counter{
    position:absolute;bottom:8px;right:10px;
    background:rgba(0,0,0,.5);color:#fff;
    font-size:11px;font-weight:500;
    padding:3px 8px;border-radius:12px;
    pointer-events:none;z-index:2;
}

/* Overlay badges */
.smj-sl-badges{
    position:absolute;top:8px;left:8px;
    display:flex;flex-direction:column;gap:4px;z-index:2;
}
.smj-sl-bdg{
    display:inline-flex;align-items:center;gap:4px;
    font-size:11px;font-weight:600;
    padding:3px 8px;border-radius:12px;
}
.smj-sl-bdg--feat{background:#fef3c7;color:#92400e}
.smj-sl-bdg--sold{background:#fee2e2;color:#991b1b}

/* Nav arrows */
.smj-sl-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,.9);border:none;border-radius:50%;
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    z-index:3;box-shadow:0 1px 4px rgba(0,0,0,.15);
    padding:0;transition:background .15s,transform .15s;
}
.smj-sl-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.smj-sl-nav--p{left:8px}.smj-sl-nav--n{right:8px}
.smj-sl-nav svg{
    width:15px;height:15px;stroke:#222;
    stroke-width:2;fill:none;
    stroke-linecap:round;stroke-linejoin:round;
}

/* Thumbnails — smaller, tighter */
.smj-sl-thumbs{
    display:flex;gap:6px;
    margin-top:7px;
    overflow-x:auto;
    scrollbar-width:thin;scrollbar-color:#ddd transparent;
    padding-bottom:2px;
}
.smj-sl-thumbs::-webkit-scrollbar{height:3px}
.smj-sl-thumbs::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}
.smj-sl-thumb{
    flex-shrink:0;width:64px;height:46px;
    border-radius:5px;overflow:hidden;
    border:2px solid transparent;
    cursor:pointer;opacity:.65;
    transition:opacity .15s,border-color .15s;
}
.smj-sl-thumb img{width:100%;height:100%;object-fit:cover}
.smj-sl-thumb:hover{opacity:.9}
.smj-sl-thumb.is-on{border-color:#2563eb;opacity:1}

/* No image placeholder */
.smj-sl-no-img{
    aspect-ratio:16/9;background:#f7f7f7;border-radius:8px;
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:6px;color:#bbb;
    border:1.5px dashed #e0e0e0;margin-bottom:12px;
}
.smj-sl-no-img svg{width:38px;height:38px;stroke:#ddd;fill:none;stroke-width:1.5}

/* ═══════════════════════════════
   TITLE & META
═══════════════════════════════ */
.smj-sl-title{
    font-size:19px;font-weight:600;
    color:#222;line-height:1.3;
    margin:0 0 8px;
}
.smj-sl-meta{
    display:flex;align-items:center;flex-wrap:wrap;
    gap:10px;font-size:12px;color:#888;
}
.smj-sl-meta-i{display:flex;align-items:center;gap:3px}
.smj-sl-meta-i svg{
    width:12px;height:12px;stroke:currentColor;
    fill:none;stroke-width:2;flex-shrink:0;
    stroke-linecap:round;stroke-linejoin:round;
}

/* ═══════════════════════════════
   KEY SPECS STRIP
═══════════════════════════════ */
.smj-sl-strip{
    display:flex;
    flex-wrap:wrap;
    gap:1px;
    background:#ececec;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:14px;
    border:1px solid #ececec;
}
/* When strip is inside a card (.smj-sl-strip--inline), remove double border/radius */
.smj-sl-strip--inline{
    border-radius:6px;
    margin-bottom:14px;
}
.smj-sl-strip-i{
    background:#fff;
    padding:9px 14px;
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1 1 110px;
    min-width:100px;
    max-width:200px;
}
.smj-sl-strip-ico{font-size:15px;line-height:1}
.smj-sl-strip-lbl{
    font-size:10px;color:#aaa;font-weight:500;
    text-transform:uppercase;letter-spacing:.04em;
}
.smj-sl-strip-val{font-size:12px;font-weight:600;color:#333}
/* Strip: cap item width when only 1–2 items present */
.smj-sl-strip-i:only-child,
.smj-sl-strip-i:first-child:nth-last-child(2),
.smj-sl-strip-i:first-child:nth-last-child(2) ~ .smj-sl-strip-i{
    max-width:180px;
}

/* ═══════════════════════════════
   DESCRIPTION
═══════════════════════════════ */
.smj-sl-desc{
    font-size:13.5px;color:#444;line-height:1.7;
    max-height:180px;overflow:hidden;position:relative;
    transition:max-height .4s ease;
}
.smj-sl-desc.open{max-height:9999px}
.smj-sl-desc-fade{
    position:absolute;bottom:0;left:0;right:0;height:48px;
    background:linear-gradient(transparent,#fff);
    pointer-events:none;transition:opacity .3s;
}
.smj-sl-desc.open+.smj-sl-desc-fade{opacity:0}
.smj-sl-rm{
    margin-top:5px;background:none;border:none;
    color:#2563eb;font-size:12px;font-weight:500;padding:0;
}
.smj-sl-rm:hover{text-decoration:underline}

/* ═══════════════════════════════
   SPECS TABLE
═══════════════════════════════ */
.smj-sl-tbl{width:100%;border-collapse:collapse}
.smj-sl-tbl tr:nth-child(even) th,
.smj-sl-tbl tr:nth-child(even) td{background:#fafafa}
.smj-sl-tbl th{
    text-align:left;padding:7px 12px;
    font-size:12px;color:#888;font-weight:500;
    width:42%;border-bottom:1px solid #f0f0f0;
}
.smj-sl-tbl td{
    padding:7px 12px;font-size:13px;
    font-weight:500;color:#333;
    border-bottom:1px solid #f0f0f0;
}
.smj-sl-tbl tr:last-child th,
.smj-sl-tbl tr:last-child td{border-bottom:none}

/* ═══════════════════════════════
   SIDEBAR
═══════════════════════════════ */
.smj-sl-sidebar{
    display:flex;flex-direction:column;gap:10px;
    position:sticky;top:16px;
}

/* Price card — compact */
.smj-sl-price-card{
    background:#f0f5ff;
    border:1px solid #c7d9f8;
    border-radius:8px;
    padding:14px 16px;
    text-align:center;
}
.smj-sl-price{
    font-size:24px;font-weight:700;
    color:#1d4ed8;letter-spacing:-.5px;line-height:1.1;
}
.smj-sl-price-note{
    font-size:11px;color:#777;margin-top:3px;
    display:flex;align-items:center;justify-content:center;gap:3px;
}
.smj-sl-price-note svg{width:11px;height:11px;stroke:#10b981;fill:none;stroke-width:2.5}
.smj-sl-sold-banner{
    display:inline-flex;align-items:center;gap:5px;
    font-size:13px;font-weight:600;color:#991b1b;
    background:#fee2e2;padding:6px 14px;border-radius:6px;
}

/* Location pill */
.smj-sl-loc{
    display:flex;align-items:center;gap:7px;
    font-size:12.5px;color:#444;font-weight:400;
    background:#f9f9f9;border:1px solid #e8e8e8;
    border-radius:7px;padding:8px 12px;
}
.smj-sl-loc svg{
    width:13px;height:13px;stroke:#e55;fill:none;
    stroke-width:2;flex-shrink:0;
    stroke-linecap:round;stroke-linejoin:round;
}

/* ═══════════════════════════════
   CTA BUTTONS — compact, functional
   Call and WhatsApp behaviour is unchanged.
═══════════════════════════════ */
.smj-sl-actions{display:flex;flex-direction:column;gap:8px}

.smj-sl-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:10px 14px;
    border-radius:7px;font-size:13.5px;font-weight:600;
    border:none;text-align:center;line-height:1;cursor:pointer;
    transition:filter .15s,box-shadow .15s,transform .12s;
}
.smj-sl-btn:hover{transform:translateY(-1px)}
.smj-sl-btn:active{transform:translateY(0)}
.smj-sl-btn svg{width:16px;height:16px;flex-shrink:0}

/* Call */
.smj-sl-btn-call{
    background:#1d4ed8;color:#fff !important;
    box-shadow:0 2px 8px rgba(29,78,216,.3);
}
.smj-sl-btn-call:hover{filter:brightness(1.08);color:#fff !important;box-shadow:0 4px 12px rgba(29,78,216,.4)}
.smj-sl-btn-call svg{fill:#fff}

/* WhatsApp */
.smj-sl-btn-wa{
    background:#1da851;color:#fff !important;
    box-shadow:0 2px 8px rgba(29,168,81,.28);
}
.smj-sl-btn-wa:hover{filter:brightness(1.06);color:#fff !important;box-shadow:0 4px 12px rgba(29,168,81,.38)}
.smj-sl-btn-wa svg{fill:#fff}

/* Favourite */
.smj-sl-fav-wrap{display:flex;justify-content:center}
.smj-sl-fav-wrap .smj-heart-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:9px 14px;border-radius:7px;
    font-size:13px;font-weight:500;color:#555;
    background:#fff;border:1px solid #e0e0e0;
    transition:background .15s,border-color .15s,color .15s;
}
/* FIX 5: Suppress the global scale(1.15) from heart_js — keep subtle color change only */
.smj-sl-fav-wrap .smj-heart-btn:hover{background:#fff5f5;border-color:#fca5a5;color:#dc2626;transform:none}
.smj-sl-fav-wrap .smj-heart-btn.smj-fav-active{background:#fff5f5;border-color:#dc2626;color:#dc2626}
.smj-sl-fav-wrap .smj-heart-ico{width:15px;height:15px;stroke:#dc2626;fill:transparent;stroke-width:2;transition:fill .15s}
.smj-sl-fav-wrap .smj-heart-btn.smj-fav-active .smj-heart-ico{fill:#dc2626}

/* Trust badges */
.smj-sl-trust{
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:10px;
    padding:9px 12px;border-top:1px solid #f0f0f0;
}
.smj-sl-trust-i{
    display:flex;align-items:center;gap:3px;
    font-size:11px;color:#888;font-weight:400;
}
.smj-sl-trust-i svg{
    width:11px;height:11px;stroke:#10b981;fill:none;
    stroke-width:2;flex-shrink:0;
    stroke-linecap:round;stroke-linejoin:round;
}

/* Seller card */
.smj-sl-seller{display:flex;align-items:center;gap:10px;padding:12px 14px}
.smj-sl-av{
    width:38px;height:38px;border-radius:50%;
    background:#dbeafe;color:#1e40af;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;flex-shrink:0;overflow:hidden;
}
.smj-sl-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.smj-sl-seller-name{font-size:13px;font-weight:600;color:#222}
.smj-sl-seller-since{font-size:11px;color:#999;margin-top:1px}
.smj-sl-verified{
    display:inline-flex;align-items:center;gap:3px;
    font-size:11px;font-weight:500;color:#059669;margin-top:2px;
}
.smj-sl-verified svg{width:11px;height:11px;fill:#059669}

/* Enquiry form padding */
.smj-sl-enq{padding:14px 16px}

/* ═══════════════════════════════
   LIGHTBOX (functional, untouched logic)
═══════════════════════════════ */
.smj-lb{
    position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:999999;
    display:flex;align-items:center;justify-content:center;
    padding:12px;opacity:0;pointer-events:none;transition:opacity .22s;
}
.smj-lb.open{opacity:1;pointer-events:all}
.smj-lb-inner{
    position:relative;max-width:1080px;width:100%;
    display:flex;flex-direction:column;align-items:center;gap:8px;
}
.smj-lb-img-wrap{
    position:relative;width:100%;max-height:78vh;
    display:flex;align-items:center;justify-content:center;
    border-radius:8px;
    /* FIX 2: overflow must NOT be hidden — it clips the arrow buttons */
    overflow:visible;
    background:#111;
}
.smj-lb-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:6px;transition:opacity .18s}
.smj-lb-close{
    position:absolute;top:-12px;right:-12px;width:30px;height:30px;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    border-radius:50%;color:#fff;display:flex;align-items:center;
    justify-content:center;font-size:15px;z-index:2;transition:background .15s;
}
.smj-lb-close:hover{background:rgba(255,255,255,.22)}
.smj-lb-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
    border-radius:50%;width:38px;height:38px;color:#fff;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;z-index:2;
}
.smj-lb-nav:hover{background:rgba(255,255,255,.22)}
/* FIX 2: Arrows positioned INSIDE img-wrap (not outside — overflow:hidden clips them) */
.smj-lb-nav--p{left:16px}.smj-lb-nav--n{right:16px}
.smj-lb-nav svg{
    width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none;
    stroke-linecap:round;stroke-linejoin:round;
}
.smj-lb-cnt{color:rgba(255,255,255,.6);font-size:12px;font-weight:400}
.smj-lb-thumbs{
    display:flex;gap:4px;max-width:100%;overflow-x:auto;
    scrollbar-width:none;padding:2px;
}
.smj-lb-thumbs::-webkit-scrollbar{display:none}
.smj-lb-tn{
    flex-shrink:0;width:52px;height:38px;border-radius:4px;overflow:hidden;
    border:2px solid transparent;cursor:pointer;opacity:.5;transition:all .15s;
}
.smj-lb-tn img{width:100%;height:100%;object-fit:cover}
.smj-lb-tn:hover{opacity:.85}.smj-lb-tn.on{border-color:#fff;opacity:1}
body.smj-lb-open{overflow:hidden}

/* ═══════════════════════════════
   SIMILAR LISTINGS
   Grid + card dimensions are fully controlled by smj-card-unified.css.
   Only section wrapper margin lives here.
═══════════════════════════════ */
.smj-similar,
.smj-similar-section { margin-top: 24px; }

/* smj-similar-title styling deferred to smj-card-unified.css §3 */

/* Kill legacy small-card class */
.smj-sc { display: none !important; }


/* ═══════════════════════════════
   MOBILE STICKY CTA BAR
   Call / WhatsApp remain fully functional.
═══════════════════════════════ */
.smj-sl-sticky{
    display:none;position:fixed;bottom:0;left:0;right:0;
    z-index:9998;background:#fff;border-top:1px solid #e0e0e0;
    padding:8px 12px;gap:8px;
    box-shadow:0 -2px 12px rgba(0,0,0,.08);
}
.smj-sl-sticky .smj-sl-btn{
    flex:1;padding:10px 8px;font-size:13px;border-radius:6px;
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media(max-width:860px){
    .smj-sl-layout{grid-template-columns:1fr}
    .smj-sl-sidebar{position:static}
    .smj-sl-actions{display:none}
    .smj-sl-sticky{display:flex}
    .smj-sl-title{font-size:17px}
    .smj-sl-price{font-size:20px}
    .smj-lb-nav--p{left:4px}.smj-lb-nav--n{right:4px}
    /* Similar grid breakpoints are in smj-card-unified.css §6 — do not override here */
}
@media(max-width:500px){
    .smj-sl-wrap{padding:10px 10px 74px}
    .smj-sl-strip{grid-template-columns:repeat(2,1fr)}
    .smj-sl-btn{padding:10px 8px;font-size:12.5px}
}