/* ════════════════════════════════════════════════════════════════════════
   2026-05-19 — plant merchandising badges (Sale, Rare, Staff Pick, etc.)

   Used by shop.html (customer cards) and inventory.html (Catalog Editor tag
   chips). Memphis Refined aesthetic: chunky 2px black borders, hard-offset
   black drop shadow for the "sticker" feel, bold uppercase text.

   Two display sizes:
     .ej-badge        — small read-only pill for plant cards
     .ej-badge-chip   — larger interactive chip (44px+ tap target) for the
                        admin tag editor; layers a `.is-selected` modifier
                        when the operator has toggled it on

   Per-tag colors are applied via modifier classes (e.g. .ej-badge--sale).
   Custom (operator-typed) tags fall through to .ej-badge--custom.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Read-only pill (shop cards) ─────────────────────────────────────── */
.ej-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 2px 2px 0 #000;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  /* Sale and other badges sit on white cards by default. Backgrounds are
     overridden by the per-tag variants below. */
  background: #999;
  color: #fff;
}
.ej-badge .ej-badge__emoji { font-size: 0.85rem; line-height: 1; }
.ej-badge .ej-badge__label { font-size: 0.68rem; }

/* Container that wraps badges below a plant name. Wraps gracefully. */
.ej-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 4px;
}

/* ─── Interactive chip (admin tag editor) ─────────────────────────────── */
.ej-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;        /* mobile-first tap-target floor */
  padding: 8px 14px;
  border: 2px solid #000;
  border-radius: 22px;
  background: #fff;
  color: #000;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s, opacity 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.ej-badge-chip:active { transform: translateY(1px); }
.ej-badge-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Selected = chip is filled with its tag color. Unselected = outlined. */
.ej-badge-chip.is-selected { box-shadow: 3px 3px 0 #000; }
.ej-badge-chip .ej-badge-chip__emoji { font-size: 1rem; line-height: 1; }
.ej-badge-chip .ej-badge-chip__remove {
  margin-left: 4px;
  font-size: 1rem;
  line-height: 1;
  color: #000;
  font-weight: 900;
}

/* ─── Per-tag color variants (preset slugs from PRESET_TAG_META) ──────── */
/* These apply to BOTH .ej-badge (shop card) and .ej-badge-chip.is-selected
   (editor toggled-on). Unselected chips stay white. */

.ej-badge--sale,
.ej-badge-chip--sale.is-selected            { background: #ff2d78; color: #fff; }
.ej-badge--new,
.ej-badge-chip--new.is-selected             { background: #ffe600; color: #000; }
.ej-badge--rare,
.ej-badge-chip--rare.is-selected            { background: #b44fff; color: #fff; }
.ej-badge--limited,
.ej-badge-chip--limited.is-selected         { background: #ff6b00; color: #fff; }
.ej-badge--staff,
.ej-badge-chip--staff.is-selected           { background: #00c853; color: #000; }
.ej-badge--easy,
.ej-badge-chip--easy.is-selected            { background: #c8e6c9; color: #1b5e20; }
.ej-badge--pet,
.ej-badge-chip--pet.is-selected             { background: #009688; color: #fff; }
.ej-badge--light,
.ej-badge-chip--light.is-selected           { background: #ffd000; color: #000; }
.ej-badge--lowlight,
.ej-badge-chip--lowlight.is-selected        { background: #5b6bb5; color: #fff; }
.ej-badge--humid,
.ej-badge-chip--humid.is-selected           { background: #00c8ff; color: #000; }

/* Custom (operator-typed) tags — neutral slate. */
.ej-badge--custom,
.ej-badge-chip--custom.is-selected          { background: #555; color: #fff; }