/*
 * ╔══════════════════════════════════════════════════╗
 * ║  villaGo — Badges Component                     ║
 * ╚══════════════════════════════════════════════════╝
 */

/* ── Base Badge ──────────────────────────────────── */
.y-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--y-radius-full);
  font-size: 0.75rem;
  font-weight: var(--y-weight-semibold);
  line-height: 1.4;
}

/* ── Color variants ──────────────────────────────── */
.y-badge-primary {
  background: var(--y-color-primary-subtle);
  color: var(--y-color-primary);
}

.y-badge-secondary {
  background: var(--y-color-secondary);
  color: var(--y-color-text-muted);
}

.y-badge-accent {
  background: var(--y-color-accent-subtle);
  color: var(--y-color-accent);
}

.y-badge-success {
  background: var(--y-color-success-subtle);
  color: var(--y-color-success);
}

.y-badge-warning {
  background: var(--y-color-warning-subtle);
  color: var(--y-color-warning);
}

.y-badge-danger {
  background: var(--y-color-danger-subtle);
  color: var(--y-color-danger);
}

.y-badge-neutral {
  background: rgba(45, 42, 38, 0.08);
  color: var(--y-color-text-muted);
}

/* ── White (on dark backgrounds) ────────────────── */
.y-badge-white {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(8px);
}

/* ── Status Badges ───────────────────────────────── */
.order-status {
  padding: 4px 12px;
  border-radius: var(--y-radius-full);
  font-size: 0.75rem;
  font-weight: var(--y-weight-semibold);
}

.status-processing { background: var(--y-color-warning-subtle); color: var(--y-color-warning); }
.status-confirmed  { background: var(--y-color-success-subtle); color: var(--y-color-success); }
.status-completed  { background: #dbeafe; color: #1d4ed8; }
.status-cancelled  { background: var(--y-color-danger-subtle); color: var(--y-color-danger); }

/* ── Property Tags (on cards) ────────────────────── */
.property-tag,
.product-card-badge {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  padding: 4px 12px;
  border-radius: var(--y-radius-full);
  font-size: 0.75rem;
  font-weight: var(--y-weight-semibold);
  color: white;
}

.product-card-badge {
  background: var(--y-color-primary);
}

.tag-popular  { background: var(--y-color-primary); }
.tag-new      { background: var(--y-color-accent); }
.tag-deal     { background: var(--y-color-danger); }
.tag-featured { background: #8b5cf6; }
.tag-luxury   { background: #d97706; }
.tag-family   { background: #3b82f6; }

/* ── Category Badge (product detail) ────────────── */
.product-category-badge {
  display: inline-block;
  background: var(--y-color-primary-subtle);
  color: var(--y-color-primary);
  padding: 4px 12px;
  border-radius: var(--y-radius-full);
  font-size: 0.75rem;
  font-weight: var(--y-weight-semibold);
}

/* ── Warranty Badge ──────────────────────────────── */
.product-warranty-badge {
  background: var(--y-color-accent-subtle);
  color: var(--y-color-accent);
  padding: 2px var(--y-space-s);
  border-radius: 4px;
  font-size: 0.75rem;
  margin-inline-end: var(--y-space-s);
}

/* ── Rating Badge (on property images) ──────────── */
.property-rating-badge {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  color: white;
  border-radius: var(--y-radius-full);
  padding: 4px 10px;
}

.property-rating-badge .star {
  color: var(--y-color-accent);
  width: 14px;
  height: 14px;
}

.property-rating-badge .rating {
  font-size: var(--y-font-s);
  font-weight: var(--y-weight-semibold);
}

.property-rating-badge .count {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--y-font-xs);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════ */

/* ── Large Desktop (lg) ──────────────────────────── */
@media (max-width: 1200px) {}

/* ── Tablet (md) ─────────────────────────────────── */
@media (max-width: 992px) {}

/* ── Mobile Landscape / Large Phone (sm) ─────────── */
@media (max-width: 768px) {
  .property-rating-badge { font-size: var(--y-font-xs); }
}

/* ── Small Phone (xs) ────────────────────────────── */
@media (max-width: 480px) {
  .y-badge { padding: 3px 8px; font-size: 0.7rem; }
}