/* =====================================================
   MUBSELL — listings.css
   Category chips + filters + product card grid.
   Cards follow the mockup design; the gold corner price
   tag and status badges carry over from the app pages.
   Markup: components/listings.php
   ===================================================== */

/* ---------- Category chips ---------- */
.chip-row{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;
  margin-bottom:18px;scrollbar-width:none;
}
.chip-row::-webkit-scrollbar{display:none;}

.chip{
  flex:0 0 auto;padding:8px 16px;border:1.5px solid var(--line);
  border-radius:100px;font-size:14px;font-weight:600;color:var(--ink);
  background:var(--paper-card);cursor:pointer;white-space:nowrap;
  transition:border-color .15s;
}
.chip:hover{border-color:var(--marigold);}
.chip.active{background:var(--marigold);color:#fff;border-color:var(--marigold);}

/* ---------- Filters ---------- */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.filters select{
  padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--paper-card);font-family:'Inter';font-size:14px;
  font-weight:600;color:var(--ink);
}
.result-count{
  font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:13px;color:var(--charcoal);
  margin-top:4px;display:block;
}

/* ---------- Card grid ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}

.card{
  background:var(--paper-card);border-radius:var(--radius);
  border:1px solid var(--line);overflow:hidden;position:relative;
  transition:transform .15s ease,box-shadow .15s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}

.card .photo{height:150px;position:relative;background-size:cover;background-position:center;}

.tag-corner{
  position:absolute;top:0;right:0;width:0;height:0;border-style:solid;
  border-width:0 46px 46px 0;border-color:transparent var(--gold) transparent transparent;
}
.tag-price{
  position:absolute;top:8px;right:5px;font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;
  font-size:11px;font-weight:600;color:#0D1B2A;
}
.status-badge{
  position:absolute;bottom:8px;left:8px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;
  border-radius:100px;color:#fff;
}
.status-badge.available{background:var(--teal);}
.status-badge.sold{background:var(--coral);}

.card-body{padding:14px;}
.card-body h3{
  font-family:'Inter';font-weight:700;font-size:15px;
  color:var(--ink);margin-bottom:4px;line-height:1.3;
}
.card-body .price{
  font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:600;color:var(--purple);
  font-size:15px;margin-bottom:8px;display:block;
}
.card-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--charcoal);gap:6px;
}
.card-meta .cond{
  font-weight:600;color:var(--ink);background:var(--paper);
  padding:2px 8px;border-radius:100px;white-space:nowrap;
}

.empty-note{
  grid-column:1/-1;text-align:center;padding:60px 20px;
  background:var(--paper-card);border:1px dashed var(--line);border-radius:var(--radius);
  color:var(--charcoal);font-size:14px;
}

/* ============ Responsive ============ */
@media (max-width:1100px){
  .card-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .card-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .filters{width:100%;}
  .filters select{flex:1;}
}
@media (max-width:640px){
  /* Grid stays a grid on phones — 2x2, compact cards */
  .card-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .card .photo{height:110px;}
  .card-body{padding:10px;}
  .card-body h3{font-size:13px;}
  .card-body .price{font-size:13px;margin-bottom:6px;}
  .card-meta{font-size:11px;flex-wrap:wrap;gap:4px;}
  .tag-corner{border-width:0 38px 38px 0;}
  .tag-price{font-size:10px;top:6px;right:4px;}
  .status-badge{font-size:10px;padding:2px 6px;}
}

/* ============ v3 additions ============ */
/* price range inputs share the select styling */
.filters input[type="number"]{
  padding:9px 12px;border:1.5px solid var(--line);border-radius:100px;
  font-family:'Inter';font-size:13px;font-weight:600;color:var(--ink);
  background:var(--paper-card);width:110px;
}
.filters input[type="number"]:focus{border-color:var(--marigold-dark);outline:none;}

/* FEATURED (boosted) badge on cards */
.feat-badge{
  position:absolute;top:10px;left:10px;background:var(--gold);color:var(--surface-dark);
  font-size:10px;font-weight:800;letter-spacing:0.06em;padding:3px 9px;border-radius:100px;
  font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;
}

/* negotiable tag next to the price */
.nego-tag{
  font-family:'Inter';font-size:10px;font-weight:700;text-transform:uppercase;
  background:var(--blue-tint);color:var(--marigold);padding:2px 8px;border-radius:100px;vertical-align:middle;
}

/* recently viewed strip */
.recent-strip{margin:6px 0 22px;}
.recent-label{
  font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:11px;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--charcoal);display:block;margin-bottom:10px;
}
.recent-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;}
.recent-card{
  flex:0 0 200px;display:flex;gap:10px;align-items:center;background:var(--paper-card);
  border:1px solid var(--line);border-radius:10px;padding:8px;text-decoration:none;
}
.recent-card:hover{border-color:var(--marigold);}
.recent-thumb{width:44px;height:44px;border-radius:8px;background:var(--paper);background-size:cover;background-position:center;flex:0 0 auto;}
.recent-body{min-width:0;}
.recent-title{
  display:block;font-size:12px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recent-price{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:12px;color:var(--purple);font-weight:600;}

/* section label above the category chips */
.cat-title{
  font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:11px;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--charcoal);display:block;margin:4px 0 10px;
}

/* ============ v4: Recommended for you (Jiji-style cards) ============ */
.reco-strip{ margin:4px 0 26px; }
.reco-title{ font-size:20px; margin-bottom:14px; }
.reco-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
.reco-card{ flex:0 0 172px; text-decoration:none; scroll-snap-align:start; }
.reco-photo{
  width:172px; height:172px; border-radius:14px; overflow:hidden; background:var(--paper-card);
  border:1px solid var(--line);
}
.reco-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.reco-card:hover .reco-photo img{ transform:scale(1.05); }
.reco-label{
  display:block; margin-top:10px; font-size:17px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reco-price{ font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums; font-size:13px; color:var(--purple); font-weight:600; }
@media (max-width:640px){
  .reco-card{ flex:0 0 138px; }
  .reco-photo{ width:138px; height:138px; }
  .reco-label{ font-size:14px; }
}

/* v4: discount badge + struck old price on browse cards */
.card .off-badge{
  position:absolute;bottom:10px;right:10px;background:#FEF3E9;color:#f68b1e;
  font-weight:800;font-size:10px;padding:3px 8px;border-radius:5px;
  font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;
}
.card .old-price{ font-size:11px; color:#9aa3b5; font-weight:500; }