/* ===== WT IconPicker - CSS ===== */

.wt-iconpicker-wrap{
  display: flex;
  align-items: stretch;
  vertical-align: middle;
}

/* input “encaixado” ao botão */
.wt-iconpicker-input{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* botão trigger: só ícone, pequenino, colado ao input */
.wt-iconpicker-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #ced4da;
  border-left: 0;
  background: #f8f9fa;
  cursor: pointer;
  line-height: 1;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
  user-select: none;
}
.wt-iconpicker-trigger:hover{ background:#eef1f4; }
.wt-iconpicker-trigger:active{ background:#e6eaee; }
.wt-iconpicker-trigger i{ font-size:14px; }

/* tamanhos opcionais */
.wt-iconpicker-trigger--sm{ padding: 0 8px; }
.wt-iconpicker-trigger--lg{ padding: 0 12px; }
.wt-iconpicker-trigger--ghost{
  background: transparent;
}

/* ===== Popup ===== */
.wt-iconpicker-pop{
  position: absolute;
  z-index: 10000;
  min-width: 280px;
  max-width: 520px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow: hidden;
  display: none;
}

/* header com search */
.wt-iconpicker-head{
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.wt-iconpicker-search{
  flex: 1 1 auto;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  outline: 0;
}
.wt-iconpicker-clear{
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background:#f8f9fa;
  cursor:pointer;
}
.wt-iconpicker-clear:hover{ background:#eef1f4; }

/* grid: por defeito 8 colunas */
.wt-iconpicker-grid{
  --cols: 8;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 6px;
  padding: 10px;
  max-height: 320px;
  overflow: auto;
}

/* cada botão de ícone */
.wt-iconpicker-item{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
.wt-iconpicker-item i{ font-size:16px; }
.wt-iconpicker-item:hover{
  background:#f6f8fa;
  border-color: #e3e7ee;
  box-shadow: inset 0 0 0 1px #e3e7ee;
}
.wt-iconpicker-item.is-selected{
  background:#e7f1ff;
  border-color:#9ec5fe;
  box-shadow: inset 0 0 0 1px #9ec5fe;
}

/* footer */
.wt-iconpicker-foot{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 8px 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 12px;
  color:#6c757d;
}
.wt-iconpicker-foot .wt-iconpicker-close{
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background:#f8f9fa;
  cursor:pointer;
}
.wt-iconpicker-foot .wt-iconpicker-close:hover{ background:#eef1f4; }

/* util */
.wt-visually-hidden{ 
  position:absolute!important; width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  border:0;
}
.wt-iconpicker-search {
  flex: 1 1 100%;
  min-width: 0; /* importante em flexbox */
}


 
.wt-iconpicker-pop{
  position: absolute;
  z-index: 2147483647; /* bem acima de tudo */
}
.wt-iconpicker-pop, .wt-iconpicker-pop *{
  pointer-events: auto;
}