/* ============================================================
   15. IMAGE BADGE
   Labels that overlay photographs (room cards, property images).
   Distinct from MemberBadge — uses solid dark backing for
   readability over any image regardless of brightness.

   Uses:  "SAME ROOM", "DIFFERENT ROOM", "UPCOMING STAY",
          "CHECKED IN", "SOLD OUT", "BEST VALUE", "RECOMMENDED"
   ============================================================ */

/* ── Base Image Badge ── */
.image-badge {
  background: rgba(var(--color-primary-rgb), 0.85);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  display: inline-block;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  /* Sharp corners — no border-radius */
}

/* ── Positioning Variants ── */
.image-badge--top-right {
  left: auto;
  right: 16px;
}

.image-badge--bottom-left {
  top: auto;
  bottom: 16px;
}

.image-badge--bottom-right {
  top: auto;
  left: auto;
  bottom: 16px;
  right: 16px;
}

/* ── Style Variants ── */

/* Accent variant — for positive/promotional labels
   e.g., "BEST VALUE", "RECOMMENDED", "MEMBER RATE" */
.image-badge--accent {
  background: rgba(var(--color-accent-rgb), 0.90);
  color: var(--color-on-accent);
}

/* Subtle variant — for informational labels
   e.g., "2 LEFT", "POPULAR" */
.image-badge--subtle {
  background: rgba(0, 0, 0, 0.60);
  color: var(--color-tooltip-text);  /* Contrast text on dark background */
}

/* ══════════════════════════════════════
   USAGE EXAMPLE
   ══════════════════════════════════════

   <div class="image-card" style="position: relative;">
     <img src="room.jpg" alt="Room photo">
     <span class="image-badge">Same Room</span>
   </div>

   <div class="image-card" style="position: relative;">
     <img src="room.jpg" alt="Room photo">
     <span class="image-badge image-badge--accent">Best Value</span>
   </div>

   <div class="image-card" style="position: relative;">
     <img src="room.jpg" alt="Room photo">
     <span class="image-badge image-badge--top-right image-badge--subtle">2 Left</span>
   </div>

   ══════════════════════════════════════
   RULES
   ══════════════════════════════════════
   1. ZERO hardcoded colors. Every color uses a CSS variable.
   2. ZERO border-radius. Sharp corners always.
   3. Only use over photographs. On white backgrounds, use MemberBadge instead.
   4. Position is always absolute within a relative-positioned image container.
   5. Default position: top-left. Use modifier classes for other positions.
   ══════════════════════════════════════ */