/*
 * Main-page match filters (ТЗ «Добавить фильтрацию (final)», phase 1).
 * Standalone feature stylesheet — NOT part of the webpack bundle (no .scss twin, not imported by styles.scss).
 * Loaded by local/pages/index.php only when app.fclm/main_matches_filter = Y.
 * Values copied from styles/components/_variables.scss: $color-gray-border #A9A9B5, $color-input-text #1E1E1E,
 * $color-red #E33046; breakpoint 767px as used throughout _matches.scss.
 * Bitrix outputs this file BEFORE build/main.css and styles.css (header-registered template styles come last), so every
 * rule here carries extra specificity (.js-main-matches form.matches-filter …) to beat the site's generic rules
 * (.filter-section + .filter-section {margin-top:50px}, .form-group {margin-bottom:12px}, chosen.css).
 * Everything is scoped under .js-main-matches so nothing else on the site is restyled.
 */

/* slides outside the current filter (server marks the initial state; the script keeps them detached from the Swiper wrapper) */
.js-main-matches .match-slide.is-filtered-out { display: none; }
.js-main-matches .matches-empty[hidden] { display: none; }

/* until the script decides (chosen vs native), keep the raw <select> from flashing; chosen hides it itself */
.js-main-matches form.matches-filter:not(.matches-filter--native) select.matches-filter-select { visibility: hidden; }

/* the filter line: centered above the carousel, three 260px controls */
.js-main-matches form.matches-filter { display: flex; justify-content: center; align-items: flex-end; gap: 30px; max-width: 1000px; margin: 0 auto 60px; padding: 0; }
.js-main-matches form.matches-filter .filter-section { width: 260px; margin: 0; padding: 0; }
.js-main-matches form.matches-filter .filter-section + .filter-section { margin-top: 0; }
.js-main-matches form.matches-filter .filter-section > .form-group { margin: 0; padding: 0; max-width: none; }

/* chosen: the placeholder (select name) must read as a placeholder — site chosen.css paints .chosen-default black */
.js-main-matches form.matches-filter .chosen-container-single .chosen-single.chosen-default { color: #8A8A96; }

/* chosen's deselect "x": the site's chosen.css kept the abbr box but stripped the sprite → draw a text × */
.js-main-matches form.matches-filter .chosen-container-single .chosen-single abbr {
  top: 50%; right: 30px; width: 16px; height: 16px; margin-top: -8px;
  background: none; font-size: 0; line-height: 16px;
}
.js-main-matches form.matches-filter .chosen-container-single .chosen-single abbr:before {
  content: "\00d7"; display: block; font: 700 18px/16px Arial, sans-serif; text-align: center; color: #1E1E1E;
}
.js-main-matches form.matches-filter .chosen-container-single .chosen-single abbr:hover:before { color: #E33046; }

/* native fallback (no jQuery/chosen on the page): a bordered-bottom select in the site's select language */
.js-main-matches form.matches-filter.matches-filter--native select.matches-filter-select {
  -webkit-appearance: none; appearance: none; visibility: visible;
  width: 100%; height: 42px; border: 0; border-bottom: 1px solid #A9A9B5; border-radius: 0;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23272726' stroke-width='1'/></svg>") no-repeat right 8px center;
  padding: 0 30px 0 0; color: #1E1E1E; font: 700 24px/1.1 "Bebas Neue", Arial, sans-serif; text-transform: uppercase;
}

/* empty result («По выбранным фильтрам матчей нет…» + reset-all) — the slider root stays in the DOM above it */
.js-main-matches .matches-empty { text-align: center; padding: 60px 0 40px; min-height: 260px; }
.js-main-matches .matches-empty .matches-empty-text { font-size: 18px; margin: 0 0 24px; }
.js-main-matches .matches-slider-nav[hidden] { display: none; }

/* one card in the result: Swiper (watchOverflow) locks both arrows and the bundle removes them (display:none !important),
   so «Анонс матча» drifts to the left edge of the space-between row → keep the arrows in the row, greyed like the site's own
   end-of-list state (.swiper-button-disabled: opacity .2), and centre the link on its own so the row never depends on them.
   ≤767px keeps the site's rule (arrows hidden, row centred). */
@media (min-width: 768px) {
  .js-main-matches .matches-slider-nav .swiper-prev.swiper-button-lock,
  .js-main-matches .matches-slider-nav .swiper-next.swiper-button-lock { display: flex !important; opacity: .2; pointer-events: none; cursor: default; }
}
.js-main-matches .matches-slider-nav .matches-slider-nav-info { margin: 0 auto; }

/* v3.2 — the section's 110px top gap (bundle: .matches-section {padding-top:110px}) was sized for the slider alone; with the
   filter line above it the client found the gap too wide (stage, 2026-09). index.php adds .matches-section--filters to the
   section only when the flag is ON, so the flag-OFF page keeps the bundle value. Double class = (0,2,0) beats the bundle's
   (0,1,0) although this file is printed first. Values as accepted on stage: 20px desktop, 0 on phones. */
.matches-section.matches-section--filters { padding-top: 20px; }

@media (max-width: 767px) {
  .js-main-matches form.matches-filter { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 40px; }
  .js-main-matches form.matches-filter .filter-section { width: 100%; }
  .matches-section.matches-section--filters { padding-top: 0; }
}