/* Layout */
.lgc-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 8px 0;
}

/* DM Sans look */
.lgc-bar,
.lgc-bar *{
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* "Input" fields */
.lgc-field{ position: relative; }

.lgc-control{
  min-width: 220px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius: 5px;
  background: #fff;
  cursor:pointer;
  user-select:none;
}

.lgc-control-title{
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
  white-space: nowrap;
  color:black;
}

.lgc-control-value{
  font-weight: 500;
  font-size: 14px;
  opacity: .95;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.lgc-control-icon{
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  opacity: .8;
}

/* Counter */
.lgc-count{
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Popup is portal-positioned by JS (fixed) */
.lgc-popup{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
}

.lgc-popup-inner{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  min-width: 260px;
  max-height: 320px;
  overflow: auto;
  color:black;
}

.lgc-popup-list{
  display:flex;
  flex-direction: column;
  gap: 6px;
  color:black;
}

.lgc-itemlink{
  display:block;
  padding: 9px 10px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  color:black;
}

.lgc-itemlink:hover{
  //background: rgba(0,0,0,.05);
}

.lgc-itemlink.is-active{
  //background: rgba(0,0,0,.08);
}

/* Mobile: hide sort */
@media (max-width: 767px){
  .lgc-sortfield{ display:none; }
  .lgc-control{ min-width: 200px; }
}

/* FILTER: hide current selected category text in the "input" */
.lgc-field:not(.lgc-sortfield) .lgc-control-value{
  display: none;
}

.lgc-field:not(.lgc-sortfield) .lgc-control{
  min-width: auto;         /* optional */
  padding-right: 10px;     /* optional */
}

/* Hide selected value inside SORT BY control */
.lgc-sortfield .lgc-control-value{
  display: none;
}

.lgc-control{
  min-width: 180px;
}

.lgc-control{
  min-width: fit-content;
}