.control-bar { flex-wrap: wrap; }
.control-bar .bookmaker-options { grid-column: 1 / -1; }
.control-bar .bookmaker-field { flex: 0 1 190px; min-width: 150px; }
.bookmaker-options { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; min-width: 0; font-size: 12px; line-height: 1.5; }
.bookmaker-toggle { display: inline-flex; align-items: flex-start; gap: 7px; cursor: pointer; min-width: 0; }
.bookmaker-toggle input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; padding: 0; margin: 2px 0; accent-color: #16855b; }
.bookmaker-toggle span { overflow-wrap: anywhere; }
.bookmaker-coverage { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; font-variant-numeric: tabular-nums; }
.bookmaker-coverage strong { color: #a35512; font-weight: 600; }
.mobile-filters .bookmaker-field { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; }
.mobile-filters .bookmaker-options { grid-column: 1 / -1; display: grid; gap: 7px; }
.mobile-filters .bookmaker-options input[type="checkbox"] { grid-column: auto; }
.mobile-filters select { min-width: 0; max-width: 100%; }
.market-row > .market-quote-status { grid-column: 1 / -1; justify-self: end; max-width: 100%; }
.odds-btn:disabled strong { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .control-bar .bookmaker-field { flex: 1 1 150px; }
  .bookmaker-options { font-size: 11px; }
}

/* Let the complete filter block reserve its own space, including translated statistics. */
@media (min-width: 1181px) {
  .main {
    padding-top: var(--topbar-height);
  }

  .control-bar {
    position: sticky;
    right: auto;
    left: auto;
    height: auto;
    min-height: 76px;
    margin: 0 -28px 22px -24px;
    align-content: start;
    background: #0b0b0c;
  }
}

.fixture-top {
  display: grid;
  grid-template-columns: minmax(212px, .7fr) minmax(288px, 1.5fr) minmax(245px, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 10px 8px 20px;
}
.fixture-header-meta { min-width: 0; }
.fixture-top .fixture-league {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.fixture-header-labels {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #77777c;
  font-size: 10px;
  line-height: 1.4;
}
.fixture-header-labels > span { min-width: 0; overflow-wrap: anywhere; text-transform: uppercase; }
.fixture-header-labels > span:nth-child(2) { text-align: center; }
.fixture-header-labels .fixture-inline-clock,
.fixture-head .fixture-inline-clock {
  grid-column: auto;
  justify-self: end;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
}
.fixture-head .fixture-inline-clock { flex: 0 0 auto; }
.mobile-app .fixture-head { align-items: center; }
.mobile-app .fixture-head .fixture-league {
  white-space: normal;
  overflow-wrap: anywhere;
}
@container (max-width: 800px) {
  .fixture-top { grid-template-columns: minmax(212px, .6fr) minmax(0, 1.4fr); }
}
@container (max-width: 560px) {
  .fixture-top {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 8px;
  }
  .fixture-header-labels { display: flex; justify-content: flex-end; }
  .fixture-header-labels > span { display: none; }
}
@media (max-width: 840px) {
  .fixture-top {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 8px;
  }
  .fixture-header-labels { display: flex; justify-content: flex-end; }
  .fixture-header-labels > span { display: none; }
}
