/* ===========================
 * Chips + Sugestões (DRY)
 * =========================== */
:root {
  --chip-gap: .5rem;
  --chip-bg: var(--bs-gray-100);
  --chip-border: var(--bs-gray-300);
}

.chips-container { display:flex; flex-wrap:wrap; gap:var(--chip-gap); }

.chip {
  color: #495057;
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:999px; padding:.375rem .625rem;
  background:var(--chip-bg); border:1px solid var(--chip-border);
  font-size:.875rem; line-height:1;
}
.chip .chip-type { font-weight:600; opacity:.7; }
.chip .chip-name { font-weight:600; }
.chip .chip-remove {
  appearance:none; border:0; background:transparent;
  font-weight:700; cursor:pointer; padding:0 .1rem; line-height:1;
}

/* Variações por tipo (apenas definindo vars) */
.chip[data-type="category"]   { --chip-bg: rgba(var(--bs-primary-rgb), .08);  --chip-border: rgba(var(--bs-primary-rgb), .25); }
.chip[data-type="collection"] { --chip-bg: rgba(var(--bs-success-rgb), .08);  --chip-border: rgba(var(--bs-success-rgb), .25); }
.chip[data-type="subcategory"]{ --chip-bg: rgba(var(--bs-info-rgb), .08);     --chip-border: rgba(var(--bs-info-rgb), .25); }
.chip[data-type="keyword"] { --chip-bg: rgba(var(--bs-warning-rgb), .08); --chip-border: rgba(var(--bs-warning-rgb), .25); }

/* Inputs + Sugestões (compartilhado para classes e IDs existentes) */
.chip-input-wrap,
#interest-suggestions-wrapper { position:relative; }

.chip-input {
  width:100%;
  border:1px solid var(--bs-border-color);
  border-radius:.5rem;
  padding:.5rem .75rem;
}

/* Dropdown de sugestões: aplica às duas variações */
.chip-suggest,
#interest-suggestions {
  position:absolute; z-index:10; inset-inline:0; top:100%;
  margin-top:.25rem; background:#fff;
  border:1px solid var(--bs-border-color); border-radius:.5rem;
  max-height:300px; overflow:auto; /* 300px unifica 260/300 */
}
.chip-suggest .list-group-item,
#interest-suggestions .list-group-item { cursor:pointer; }

@media (prefers-color-scheme: dark){
  .chip-suggest,
  #interest-suggestions { background:var(--bs-body-bg); }
}

/* ===========================
 * Cartões selecionáveis
 * =========================== */
.card.card-selectable * { cursor:pointer; }
.card.card-selectable {
  border-color: var(--bs-card-border-color, var(--bs-border-color)) !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.card.card-selectable:hover { border-color: rgba(var(--bs-primary-rgb), .35); }
.card.card-selectable.selected {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .10);
}

/* ===========================
 * Wizard footer (full-width)
 * =========================== */
.wizard-footer .btn { width:100%; }

/* ===========================
 * Loader inline (overlay)
 * =========================== */
.wizard-inline-loader {
  background: rgba(var(--bs-body-bg-rgb, 255,255,255), .75);
  backdrop-filter: blur(1px);
  z-index:2; inset:0; cursor:wait;
}

/* ===========================
 * Layout mobile
 * =========================== */
@media (max-width:576px){
  .wizard-footer { display:grid; grid-template-columns:1fr; gap:.5rem; }
}

/* ===========================
 * Dicas (inputs)
 * =========================== */
.input-hint { font-size:.875rem; color:var(--bs-gray-600); }