:root{
  --service-panel-surface:#eef3f7;
  --service-panel-border:#dce5ed;
  --service-panel-field-border:#d7e1ea;
  --service-panel-label:#8ea0b2;
  --service-panel-text:#445669;
  --service-panel-padding:12px;
  --service-panel-section-gap:12px;
  --service-panel-content-gap:8px;
  --service-panel-radius:12px;
  --service-panel-inner-radius:var(--dropdown-radius, 7px);
  --service-panel-input-height:var(--dropdown-height, 36px);
  --service-panel-label-size:11px;
  --service-panel-control-size:13px;
}

.service-panel,
.control-layer{
  background:var(--service-panel-surface);
  border:1px solid var(--service-panel-border);
  border-radius:var(--service-panel-radius);
  box-shadow:none;
  padding:var(--service-panel-padding);
}

.service-panel{
  display:flex;
  flex-direction:column;
  gap:var(--service-panel-section-gap);
}

.service-panel__section{
  display:grid;
  gap:var(--service-panel-content-gap);
  min-width:0;
}

.service-panel__section + .service-panel__section{
  padding-top:var(--service-panel-section-gap);
  border-top:1px solid var(--service-panel-border);
}

.service-panel__title,
.control-field__label,
.filter-group__title{
  font-size:var(--service-panel-label-size);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--service-panel-label);
}

.service-panel__content{
  display:grid;
  gap:var(--service-panel-content-gap);
  min-width:0;
}

.service-panel .control-field{
  gap:var(--service-panel-content-gap);
}

.service-panel .control-input-wrap,
.service-panel .control-dropdown__trigger,
.service-panel .control-chip,
.service-panel .control-action,
.service-panel .control-checkbox,
.service-panel .chip--filter,
.service-panel .select,
.service-panel .search{
  min-height:var(--service-panel-input-height);
  border:1px solid var(--service-panel-field-border);
  border-radius:var(--service-panel-inner-radius);
  background:#fff;
  color:var(--service-panel-text);
  font-size:var(--service-panel-control-size);
}

.service-panel .control-input-wrap,
.service-panel .select,
.service-panel .search{
  padding:0 12px;
}

.service-panel .select,
.service-panel .search{
  width:100%;
  outline:0;
  box-shadow:none;
}

.service-panel .chip--filter{
  justify-content:center;
  padding:0 14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}

.service-panel .chip--filter.is-active{
  background:#dce9f5;
  border-color:#b9d0e6;
  color:#1c597e;
}

.service-panel .quick-collections,
.service-panel .chips,
.service-panel .filter-options--topics{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}