/* ============================= */
/* WRAPPER & TOOLBAR */
/* ============================= */

.cp-map-wrapper .cp-toolbar{
  background:#fff;
  padding:12px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* ============================= */
/* SEARCH */
/* ============================= */

.cp-map-wrapper .cp-search{
  display:flex;
  gap:8px;
  align-items:center;
  flex:1 1 320px;
  min-width:260px;
}

.cp-map-wrapper .cp-search input{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:12px;
  font-size:14px;
  background:#fff;
  color:#111827;
}

.cp-map-wrapper .cp-search button,
.cp-map-wrapper .cp-actions button{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  cursor:pointer;
  font-size:14px;
  color:#111827;
  transition:all .15s ease;
}

.cp-map-wrapper .cp-search button:hover,
.cp-map-wrapper .cp-actions button:hover{
  border-color:rgba(0,0,0,.25);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

/* ============================= */
/* TYPES CONTAINER */
/* ============================= */

.cp-map-wrapper .cp-types{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  flex:2 1 420px;
  min-width:280px;
}

/* ============================= */
/* CHIP */
/* ============================= */

.cp-map-wrapper .cp-type{
  --cp-color:#3b82f6; /* fallback */

  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:#f3f4f6;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  font-size:13px;
  line-height:1;
  color:#111827;
  transition:all .15s ease;
}

/* Hover */
.cp-map-wrapper .cp-type:hover{
  background:#e5e7eb;
  border-color:rgba(0,0,0,.22);
}

/* Checkbox cachée */
.cp-map-wrapper .cp-type input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* ============================= */
/* DOT */
/* ============================= */

.cp-map-wrapper .cp-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 10px;
  background:var(--cp-color);
  transition:transform .12s ease;
}

/* ============================= */
/* LABEL */
/* ============================= */

.cp-map-wrapper .cp-label{
  white-space:nowrap;
  background:transparent !important;
  color:inherit !important;
}

/* ============================= */
/* CHECKED STATE */
/* ============================= */

.cp-map-wrapper .cp-type:has(input:checked){
  border-color:var(--cp-color);
  background:color-mix(in srgb, var(--cp-color) 15%, white);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.cp-map-wrapper .cp-type:has(input:checked) .cp-dot{
  transform:scale(1.2);
}

/* ============================= */
/* ACTIONS */
/* ============================= */

.cp-map-wrapper .cp-actions{
  display:flex;
  gap:8px;
  align-items:center;
}