/**
 * Tier Badges — paleta D-Mix (12 níveis, +/Max).
 *
 * Cada tier tem um token mapeado em ``PlanPricingTier.color_token``. Classes
 * ``.tier-badge--<slug>`` aplicam a paleta correspondente. Tokens
 * desconhecidos caem em ``--default`` (cinza neutro).
 */

.tier-badge {
  --tier-bg: #e5e7eb;
  --tier-fg: #374151;
  --tier-shadow: rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  /* Altura fixa por tamanho — elimina espaço extra do bbox da fonte e
     mantém o glyph perfeitamente centrado verticalmente. */
  height: 1.5rem;
  padding: 0 .7rem;
  border-radius: 999px;
  background: var(--tier-bg);
  color: var(--tier-fg);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .01em;
  line-height: 1;
  box-shadow: 0 1px 2px var(--tier-shadow);
  white-space: nowrap;
  vertical-align: middle;
}

/* Material Symbols traz line-height próprio que empurra o label para
   baixo. Normalizamos para 1 e usamos flex para que o glyph e o ícone
   fiquem ambos travados no eixo vertical do badge. */
.tier-badge__icon {
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tier-badge__label {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  /* O bbox da fonte é centrado pelo flex, mas o glyph maiúsculo
     desenha só na metade superior do em-square (cap-height ~70%).
     Empurramos ~6% para baixo para o centro óptico das letras
     coincidir com o eixo médio do badge. */
  transform: translateY(0.06em);
}

.tier-badge--xs {
  height: 1.25rem;
  padding: 0 .55rem;
  font-size: .7rem;
}
.tier-badge--xs .tier-badge__icon { font-size: .85rem; }

.tier-badge--md {
  height: 1.85rem;
  padding: 0 .9rem;
  font-size: .9rem;
}
.tier-badge--md .tier-badge__icon { font-size: 1.15rem; }

.tier-badge--uppercase .tier-badge__label { text-transform: uppercase; }

/* ── Família Solo / Básico — frios (azul → índigo) ──────────────────────── */
.tier-badge--solo {
  --tier-bg: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  --tier-fg: #1e40af;
}
.tier-badge--basico {
  --tier-bg: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
  --tier-fg: #1e3a8a;
}
.tier-badge--basico-plus {
  --tier-bg: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
  --tier-fg: #312e81;
}

/* ── Família Pro — roxos progressivos ──────────────────────────────────── */
.tier-badge--pro {
  --tier-bg: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
  --tier-fg: #5b21b6;
}
.tier-badge--pro-plus {
  --tier-bg: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);
  --tier-fg: #4c1d95;
}
.tier-badge--pro-max {
  --tier-bg: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --tier-fg: #fff;
  --tier-shadow: rgba(124, 58, 237, 0.35);
}

/* ── Família Empresa — quentes (âmbar → bronze) ────────────────────────── */
.tier-badge--empresa {
  --tier-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  --tier-fg: #92400e;
}
.tier-badge--empresa-plus {
  --tier-bg: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  --tier-fg: #78350f;
}
.tier-badge--empresa-max {
  --tier-bg: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --tier-fg: #fff;
  --tier-shadow: rgba(217, 119, 6, 0.4);
}

/* ── Família Holding — preto + dourado ─────────────────────────────────── */
.tier-badge--holding {
  --tier-bg: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  --tier-fg: #fde68a;
  --tier-shadow: rgba(0, 0, 0, 0.4);
  border: 1px solid #d97706;
}
.tier-badge--holding-plus {
  --tier-bg: linear-gradient(135deg, #111827 0%, #1f2937 60%, #4b5563 100%);
  --tier-fg: #f3f4f6;
  --tier-shadow: rgba(0, 0, 0, 0.5);
  border: 1px solid #9ca3af;
}

/* ── Holding Max — efeito premium animado ──────────────────────────────── */
.tier-badge--holding-max {
  --tier-bg: linear-gradient(
    120deg,
    #000 0%,
    #1f2937 25%,
    #b45309 50%,
    #fbbf24 65%,
    #1f2937 85%,
    #000 100%
  );
  --tier-fg: #fde68a;
  --tier-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
  background-size: 220% 100%;
  background-position: 0% 50%;
  border: 1px solid #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
  position: relative;
  animation: tier-holding-max-shimmer 6s ease-in-out infinite;
}

.tier-badge--holding-max .tier-badge__icon {
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
}

@keyframes tier-holding-max-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .tier-badge--holding-max { animation: none; }
}

/* ── Patrono — shimmer sweep 15s (2026-05-19). Halo: tier_halos.css ──── */
.tier-badge--patrono {
  --tier-bg: linear-gradient(
    120deg,
    #6b21a8 0%,
    #9333ea 25%,
    #fbbf24 50%,
    #9333ea 75%,
    #6b21a8 100%
  );
  --tier-fg: #fff;
  --tier-shadow: 0 0 18px rgba(192, 38, 211, 0.45);
  background-size: 220% 100%;
  background-position: 0% 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  animation: tier-patrono-shine 15s ease-in-out infinite;
}

.tier-badge--patrono .tier-badge__icon {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}

@keyframes tier-patrono-shine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .tier-badge--patrono { animation: none; }
}

/* Símbolo ∞ inline para tiers ilimitados (substitui número de imóveis). */
.tier-badge--unlimited .tier-badge__label::before {
  content: "∞ ";
  margin-right: .15rem;
  font-size: 1.05em;
  vertical-align: -0.05em;
}

/* Variante ``--symbol-only`` (∞/★) vive em ``tier_badges_symbol.css``. */

/* ── Default fallback ──────────────────────────────────────────────────── */
.tier-badge--default {
  --tier-bg: #e5e7eb;
  --tier-fg: #374151;
}