/* CN_WPA_MARKER_COURSE_CHIPS */


/* ==========================================================
 * CN WPA — Course Chips (ACF)
 * (centralizado desde el plugin)
 * ========================================================== */

/* Contenedor de chips */
.cn-course-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: /*12px 0*/ 2px 0 0 0;
}

/* Chip base con variables (las rellena PHP por término) */
.cn-chip{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--cn-chip-bd, rgba(0,0,0,.12));
  background: var(--cn-chip-bg);
  color: var(--cn-chip-fg, rgba(0,0,0,.95));
  white-space: nowrap;
}


/* Solo los chips “especiales” llevan icono flotante */
.cn-chip:not(.cn-chip--special) .cn-chip__icon{
  display: none;
}

/* Icono inline */
/* contenedor del icono */

.cn-chip__icon{
  display: inline-flex;
  align-items: center;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;

  position: absolute;
  left: 15%;
  top: 0;
  transform: translate(-50%, -50%); /* mitad fuera del chip */
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  justify-content: center;
  align-content:center;

  /* “medallón” del icono */
  background: var(--cn-chip-bg);
  border: 1px solid var(--cn-chip-bd, rgba(0,0,0,.15));
  color: var(--cn-chip-fg, rgba(0,0,0,.95));
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.cn-chip__icon svg{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.cn-ico{
  width: 14px;
  height: 14px;
  display: block;
}

/* Opcional: pequeñas diferencias por tipo */
.cn-chip--destacado{
  font-weight: 700;
}
.cn-chip--nivel{
  font-weight: 600;
}


/* Extraidos del panel de wp - "BuddyBoss -> Opciones del tema -> Codigos Personalizados" */

/* Destacados: más “especiales” sin ser cantosos */
.cn-chip--special{
  box-shadow: 0 4px 4px rgba(0,0,0,.10);
  position: relative;
}


/* Detalle: pequeño “brillo” sutil */
.cn-chip--special::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  pointer-events:none;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
  opacity:.65;
}

.cn-chip--nivel{
    /*padding:0;*/
}

.cn-chip--destacado{
    padding:10px 10px 6px;
}

.cn-chip__icon .cn-ico{
  width: 14px;
  height: 14px;
  display: block;
}

.cn-chip__icon .cn-ico *{
  stroke: currentColor !important;
  stroke-opacity: 1 !important;
  fill: none !important;
}