/* ═══════════════════════════════════════════════════════════════
   MEMBERS WAREHOUSE — Photo Badge Overlay System
   ═══════════════════════════════════════════════════════════════
   How it works:
   • Any photo wrapper with a child .mw-badge will render the badge
   • Badge type is set via data-badge attribute on the wrapper
     OR by adding the badge-type class directly
   • Free for all sellers across Marketplace, Stores, Vehicles
   ═══════════════════════════════════════════════════════════════ */

/* The wrapper around photos — give this position:relative; overflow:hidden */
.mw-photo-wrap {
  position: relative;
  overflow: hidden;
}

/* Base badge styling */
.mw-badge {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ────────── SALE — red diagonal banner top-left ────────── */
.mw-badge.mw-badge-sale {
  top: 18px;
  left: -32px;
  background: #cc1a1a;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  padding: 0.3rem 2.5rem;
  transform: rotate(-35deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.mw-badge.mw-badge-sale::before { content: 'SALE'; }

/* ────────── % OFF — red circle top-right ────────── */
.mw-badge.mw-badge-off10,
.mw-badge.mw-badge-off25,
.mw-badge.mw-badge-off50 {
  top: 8px;
  right: 8px;
  background: #cc1a1a;
  color: #fff;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  border: 2px solid #fff;
  font-size: 1.2rem;
  line-height: 1;
}
.mw-badge.mw-badge-off10::before { content: '10%'; }
.mw-badge.mw-badge-off25::before { content: '25%'; }
.mw-badge.mw-badge-off50::before { content: '50%'; }
.mw-badge.mw-badge-off10::after,
.mw-badge.mw-badge-off25::after,
.mw-badge.mw-badge-off50::after {
  content: 'OFF';
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* ────────── PRICE REDUCED — yellow top strip ────────── */
.mw-badge.mw-badge-reduced {
  top: 0; left: 0; right: 0;
  background: #f0a020;
  color: #000;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 0.5rem;
  text-align: center;
}
.mw-badge.mw-badge-reduced::before { content: '📉 Price Reduced'; }

/* ────────── NEW — gold star burst top-right ────────── */
.mw-badge.mw-badge-new {
  top: 8px;
  right: 8px;
  background: #f0a020;
  color: #000;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  text-align: center;
  line-height: 1.1;
}
.mw-badge.mw-badge-new::before { content: 'NEW'; }

/* ────────── FEATURED — gold corner ribbon ────────── */
.mw-badge.mw-badge-featured {
  top: 0; left: 0;
  background: #f0a020;
  color: #000;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 1.2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.mw-badge.mw-badge-featured::before { content: 'FEATURED'; }

/* ────────── HOT BUY — orange flame ────────── */
.mw-badge.mw-badge-hot {
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #ff4500, #cc1a1a);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(204,26,26,0.4);
}
.mw-badge.mw-badge-hot::before { content: '🔥 HOT BUY'; }

/* ────────── LIMITED TIME — dark with orange border ────────── */
.mw-badge.mw-badge-limited {
  top: 10px;
  right: 10px;
  background: #0d1b2a;
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  border: 1px solid #f0a020;
}
.mw-badge.mw-badge-limited::before { content: '⏰ LIMITED'; }

/* ────────── FREE SHIPPING — green bottom strip ────────── */
.mw-badge.mw-badge-free_ship {
  bottom: 0; left: 0; right: 0;
  background: #1a8c3a;
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 0.5rem;
  text-align: center;
}
.mw-badge.mw-badge-free_ship::before { content: '📦 Free Shipping'; }

/* ────────── AS NEW — orange corner ribbon ────────── */
.mw-badge.mw-badge-as_new {
  top: 0; left: 0;
  background: #ff7a45;
  color: #000;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.mw-badge.mw-badge-as_new::before { content: 'AS NEW'; }

/* ────────── OPEN TO OFFERS — orange flame ────────── */
.mw-badge.mw-badge-offers {
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #ff4500, #cc1a1a);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(204,26,26,0.4);
}
.mw-badge.mw-badge-offers::before { content: '🔥 OPEN TO OFFERS'; }

/* ────────── SOLD — large rotated overlay ────────── */
.mw-badge.mw-badge-sold {
  inset: 0;
  background: rgba(13,27,42,0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  letter-spacing: 0.15em;
  transform: rotate(-15deg);
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
  font-family: 'Bebas Neue', sans-serif;
}
.mw-badge.mw-badge-sold::before { content: 'SOLD'; }

/* On smaller cards, scale down the SOLD overlay text */
.mw-photo-wrap[style*="height:120px"] .mw-badge.mw-badge-sold,
.mw-photo-wrap[style*="height:150px"] .mw-badge.mw-badge-sold {
  font-size: 1.6rem;
}