/* ==========================================================================
   badges.css — Labels für Stimmung, Distanz, Plus etc.
   Corporate Refine – abgestimmt auf cremiges Family-Spots-Theme
   ========================================================================== */

/* Container für mehrere Badges */
.badges-row,
.spot-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* Basis-Badge */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 0.72rem;
  line-height: 1.3;
  white-space: nowrap;
  background: rgba(145, 93, 54, 0.06);
  color: #6f4224;
  border: 1px solid rgba(145, 93, 54, 0.18);
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: middle;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.08s ease-out;
}

/* Dark Theme – Basis */
[data-theme="dark"] .badge {
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.32);
}

/* Dezentes Hover-Feedback, falls Badges in Buttons/Links genutzt werden */
.badge:hover {
  background: rgba(145, 93, 54, 0.12);
  border-color: rgba(145, 93, 54, 0.28);
}

[data-theme="dark"] .badge:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(148, 163, 184, 0.45);
}

/* Wenn Badge selbst fokussierbar ist (z. B. als Button/Link) */
.badge:focus-visible {
  outline: 2px solid rgba(245, 158, 11, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #ffffff;
}

/* -------------------
   Varianten
------------------- */

/* Soft – neutrale Badges */
.badge--soft {
  background: rgba(214, 151, 93, 0.14);
  color: #6f4224;
  border-color: rgba(214, 151, 93, 0.6);
}

[data-theme="dark"] .badge--soft {
  background: rgba(31, 41, 55, 0.9);
  color: #cbd5f5;
  border-color: rgba(148, 163, 184, 0.5);
}

/* Outline – nur Rahmen, sehr zurückhaltend */
.badge--outline {
  background: transparent;
  border-color: rgba(148, 92, 54, 0.45);
  color: #6f4224;
}

[data-theme="dark"] .badge--outline {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.6);
  color: #e5e7eb;
}

/* Match – aktuelle Stimmung passt gut zum Spot */
.badge--match {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.5);
}

[data-theme="dark"] .badge--match {
  background: rgba(22, 163, 74, 0.2);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.8);
}

/* Distanz – z. B. „4,3 km“ */
.badge--distance {
  background: rgba(255, 244, 232, 0.96);
  color: #1f4fb0;
  border-color: rgba(59, 130, 246, 0.45);
}

[data-theme="dark"] .badge--distance {
  background: rgba(37, 99, 235, 0.28);
  color: #bfdbfe;
  border-color: rgba(147, 197, 253, 0.7);
}

/* Dauer / Aufenthaltszeit */
.badge--time {
  background: rgba(249, 115, 22, 0.12);
  color: #9a3412;
  border-color: rgba(249, 115, 22, 0.55);
}

[data-theme="dark"] .badge--time {
  background: rgba(234, 88, 12, 0.22);
  color: #fed7aa;
  border-color: rgba(248, 153, 72, 0.85);
}

/* Alters-Match */
.badge--age {
  background: rgba(236, 72, 153, 0.12);
  color: #9d174d;
  border-color: rgba(236, 72, 153, 0.55);
}

[data-theme="dark"] .badge--age {
  background: rgba(219, 39, 119, 0.26);
  color: #fce7f3;
  border-color: rgba(244, 114, 182, 0.8);
}

/* Plus / Partner / Adventure */
.badge--plus {
  background: rgba(250, 204, 21, 0.12);
  color: #92400e;
  border-color: rgba(250, 204, 21, 0.7);
}

[data-theme="dark"] .badge--plus {
  background: rgba(234, 179, 8, 0.26);
  color: #fef9c3;
  border-color: rgba(250, 250, 170, 0.85);
}

/* Verifiziert */
.badge--verified {
  background: rgba(16, 185, 129, 0.12);
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.55);
}

[data-theme="dark"] .badge--verified {
  background: rgba(5, 150, 105, 0.26);
  color: #d1fae5;
  border-color: rgba(52, 211, 153, 0.85);
}

/* Big Adventure / Großes Ticket */
.badge--big {
  background: rgba(147, 51, 234, 0.12);
  color: #6b21a8;
  border-color: rgba(147, 51, 234, 0.55);
}

[data-theme="dark"] .badge--big {
  background: rgba(126, 34, 206, 0.26);
  color: #ede9fe;
  border-color: rgba(196, 181, 253, 0.85);
}

/* Icon innerhalb der Badge */
.badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em; /* skaliert mit Text */
  line-height: 1;
}
/* Keep the established gold crown compact in every Plus badge. */
.badge--plus .spots-plus-crown {
  display: block;
  flex: none;
  width: 1.05em;
  height: .95em;
  color: #c99122;
}
@media (forced-colors: active) {
  .badge--plus .spots-plus-crown { color: CanvasText; }
}