.flt-section{
  --flt-ink:#e2231a;
  --flt-red-deep:#9e1710;
  --flt-red-tint:#fdeceb;
  --flt-white:#ffffff;
  --flt-grey:#6b6b6b;
  --flt-grey-soft:#8f8f8f;
  --flt-grey-dark:#3a3a3a;
  --flt-line:#e5e3de;
  --flt-focus-ring:rgba(226,35,26,0.16);

  max-width:1160px;
  margin:0 auto;
  background:var(--flt-white);
  border-bottom:1px solid var(--flt-line);
}
html.dark-mode .flt-section{
  --flt-white:#212227;
  --flt-red-tint:#3a2220;
  --flt-grey-soft:#8c8c94;
  --flt-grey-dark:#e7e7ea;
  --flt-line:rgba(255,255,255,0.1);
  --flt-focus-ring:rgba(226,35,26,0.28);
}

.flt-bar{
  padding:8px 20px 14px;
  max-width:1160px;
  margin:0 auto;
}

.flt-row{
  display:flex;
  align-items:center;
  gap:6px;
}

.flt-combo{
  position:relative;
  flex:1;
  min-width:0;
}
.flt-combo.flt-sport{flex:0 0 130px;}

.flt-combo-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:8px 10px;
  border-radius:7px;
  border:1.5px solid var(--flt-line);
  background:var(--flt-white);
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  color:var(--flt-grey-dark);
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
  text-align:left;
}
.flt-combo-trigger:hover{border-color:#c9c6bf;}
.flt-combo-trigger:focus{
  outline:none;
  border-color:var(--flt-ink);
  box-shadow:0 0 0 4px var(--flt-focus-ring);
}
.flt-combo.open .flt-combo-trigger{
  border-color:var(--flt-ink);
  box-shadow:0 0 0 4px var(--flt-focus-ring);
}
/* min-width:0 is what makes the ellipsis fire. Without it this flex child
   keeps its content's full width and pushes the chevron out of the button
   instead of truncating -- which is why "All competiti..." was clipped by
   the button edge rather than ending in a tidy ellipsis. */
.flt-combo-value{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.flt-combo-chev{
  flex-shrink:0;
  width:6px; height:6px;
  border-right:2px solid var(--flt-grey-soft);
  border-bottom:2px solid var(--flt-grey-soft);
  transform:rotate(45deg);
  transition:transform .15s;
}
.flt-combo.open .flt-combo-chev{transform:rotate(225deg);}

.flt-combo.flt-sport .flt-combo-trigger{
  font-weight:800;
  color:var(--flt-white);
  background:var(--flt-ink);
  border-color:var(--flt-ink);
}
.flt-combo.flt-sport .flt-combo-chev{border-color:rgba(255,255,255,0.85);}
.flt-combo.flt-sport.open .flt-combo-trigger,
.flt-combo.flt-sport .flt-combo-trigger:focus{
  box-shadow:0 0 0 4px rgba(226,35,26,0.28);
}

.flt-combo.disabled .flt-combo-trigger{
  background:var(--flt-red-tint);
  color:var(--flt-grey-soft);
  cursor:not-allowed;
  border-color:var(--flt-line);
  font-style:italic;
  font-weight:600;
}
.flt-combo.disabled .flt-combo-chev{display:none;}
.flt-combo.disabled .flt-combo-trigger:hover{border-color:var(--flt-line);}

.flt-combo.placeholder .flt-combo-trigger{
  color:var(--flt-grey-soft);
  font-style:italic;
  font-weight:600;
}

.flt-go:disabled{
  filter:none;
  background:var(--flt-grey-soft);
  cursor:not-allowed;
  opacity:0.6;
}
.flt-go:disabled:hover{filter:none;}

.flt-combo-panel{
  position:absolute;
  left:0; right:0; top:calc(100% + 6px);
  background:var(--flt-white);
  border:1px solid var(--flt-line);
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,0.14);
  overflow:hidden;
  /* Above the results page's search box, which sits at --z-control. This
     bar is higher up the page than anything it can open over, so its panel
     has to win against every panel below it -- it used to be z-index:30 and
     the results search box, at 40, cut a white stripe straight through the
     open dropdown. */
  z-index:var(--z-panel, 400);
  display:block;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.flt-combo.open{z-index:var(--z-panel, 400);}
.flt-combo.open .flt-combo-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .1s ease, transform .1s ease;
}

.flt-combo-search{
  width:100%;
  padding:9px 12px;
  border:none;
  border-bottom:1px solid var(--flt-line);
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  color:var(--flt-grey-dark);
  background:var(--flt-white);
}
.flt-combo-search::placeholder{color:var(--flt-grey-soft); font-weight:500;}
.flt-combo-search:focus{outline:none;}

.flt-combo-list{
  max-height:220px;
  overflow-y:auto;
}
.flt-combo-option{
  padding:8px 12px;
  font-size:12.5px;
  font-weight:600;
  color:var(--flt-grey-dark);
  cursor:pointer;
  transition:background .1s;
}
.flt-combo-option:hover,
.flt-combo-option.active{background:var(--flt-red-tint); color:var(--flt-red-deep);}
.flt-combo-option.selected{font-weight:800; color:var(--flt-ink);}
.flt-combo-empty{
  padding:10px 12px;
  font-size:12px;
  color:var(--flt-grey-soft);
  font-weight:600;
}

.flt-sep{
  color:var(--flt-grey-soft);
  font-size:12px;
  font-weight:600;
  flex-shrink:0;
}

.flt-go{
  flex-shrink:0;
  padding:8px 16px;
  border-radius:7px;
  border:none;
  background:var(--flt-ink);
  color:var(--flt-white);
  font-family:inherit;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:0.2px;
  cursor:pointer;
  transition:filter .15s, transform .1s, box-shadow .15s;
}
.flt-go:hover{filter:brightness(1.1);}
.flt-go:active{transform:scale(0.97);}
.flt-go:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--flt-focus-ring);
}

.flt-breadcrumb{
  margin-top:6px;
  padding-top:6px;
  font-size:11px;
  color:var(--flt-grey-soft);
  font-weight:600;
}
.flt-breadcrumb b{color:var(--flt-grey-dark); font-weight:800;}

@media (max-width:820px){
  .flt-row{flex-wrap:wrap;}
  .flt-combo{flex:1 1 46%;}
  .flt-combo.flt-sport{flex:1 1 100%;}
  .flt-sep{display:none;}
  .flt-go{flex:1 1 100%;}
}

/* ---- phones -------------------------------------------------------------
   Below 820px the row wraps to two across. That holds down to about 520px,
   where a half-width control is ~140px and the labels it has to carry --
   "Select item first", "All competitions" -- no longer fit; they were being
   clipped mid-word with no ellipsis to say so.

   So below 520px the row goes to a single column. Six full-width controls is
   more scrolling than two-across, but each one can be read, which the
   two-across version could not manage. */
@media (max-width:520px){
  .flt-bar{padding:8px 14px 12px;}
  .flt-row{flex-wrap:wrap; gap:8px;}
  .flt-combo,
  .flt-combo.flt-sport,
  .flt-go{flex:1 1 100%;}

  /* 16px is the smallest the value can be without iOS zooming the page in
     when the control is focused. That zoom does not undo itself, and the
     reader is left on a page wider than the screen. */
  .flt-combo-trigger{height:44px; font-size:16px;}

  /* The panel is positioned against the control, and a full-width control
     means a full-width panel -- no more guessing at 266px. */
  .flt-combo-panel{max-height:min(58vh, 340px); overflow-y:auto;}
  .flt-combo-search{height:42px; font-size:16px;}
}

/* Very narrow phones (iPhone SE, 320px). The padding is the only thing left
   to give back. */
@media (max-width:360px){
  .flt-bar{padding:8px 10px 10px;}
}