/*
  Keyboard focus styles (accessibility)
  - Use :focus-visible where supported (keyboard-only)
  - Provide :focus fallback for older browsers
  - Keep visuals minimal, avoid layout shifts
*/

/* Base focus ring for interactive elements */
@supports selector(:focus-visible) {
  :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"]):focus {
    outline: none;
  }

  :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"]):focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px;
  }
}

/* Fallback for browsers without :focus-visible */
@supports not selector(:focus-visible) {
  :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"]):focus {
    outline: 2px solid currentColor !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px;
  }
}

/* Ensure focused elements are not hidden under the fixed header */
:focus-visible {
  scroll-margin-top: 120px;
}

/* Category tree menu (left sidebar) */
.block_content.list-block .tree a {
  display: block;
  padding: 7px 0 7px 15px;
  border-radius: 4px;
}

.block_content.list-block .tree a:focus-visible,
.block_content.list-block .tree a:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
  background-color: rgba(0, 0, 0, 0.06);
  text-decoration: none;
}

/* Top megamenu focus styles */
#leo-top-menu .nav > li > a:focus-visible,
#leo-top-menu .nav > li > a:focus {
  outline: 3px solid currentColor !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12) !important;
  text-decoration: none;
}

#leo-top-menu .dropdown.open > .dropdown-menu {
  opacity: 1 !important;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1, 1) !important;
  -moz-transform: scale(1, 1) !important;
  -ms-transform: scale(1, 1) !important;
  -o-transform: scale(1, 1) !important;
  transform: scale(1, 1) !important;
  visibility: visible !important;
}

#leo-top-menu li.dropdown-submenu.open > .dropdown-menu,
#leo-top-menu li.parent.dropdown-submenu.open > .dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  -webkit-transform: scale(1, 1) !important;
  -moz-transform: scale(1, 1) !important;
  -ms-transform: scale(1, 1) !important;
  -o-transform: scale(1, 1) !important;
  transform: scale(1, 1) !important;
  visibility: visible !important;
}

#leo-top-menu .dropdown-menu a {
  display: block;
  padding: 6px 10px;
}

#leo-top-menu .dropdown-menu a:focus-visible,
#leo-top-menu .dropdown-menu a:focus {
  outline: 3px solid currentColor !important;
  outline-offset: 2px;
  background-color: rgba(0, 0, 0, 0.06);
  text-decoration: none;
}



/* Видимый фокус карточки в мегаменю */
.leo-dd-menu a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
  border-radius: 10px;
}


/* Category tree grower button */
.block_content .tree .grower {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  cursor: pointer;
}

.block_content .tree .grower:focus-visible,
.block_content .tree .grower:focus {
  outline: 2px solid currentColor !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Фокус на заголовке секции фильтра */

#amazzing_filter .af_subtitle_heading.af-kb-toggle:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Чтобы выглядело как кликабельный контрол */
#amazzing_filter .af_subtitle_heading.af-kb-toggle {
  cursor: pointer;
}

/* контейнеры значений должны уметь позиционировать инпут */
#amazzing_filter .af-slider .slider_value {
  position: relative;
}

/* 1) Инпуты НЕ должны быть display:none, иначе Tab их не увидит */
#amazzing_filter .af-slider .slider_value .input-text {
  display: inline-block !important;
}

/* 2) Скрываем инпут "визуально", но оставляем фокусируемым */
#amazzing_filter .af-slider .slider_value .input-text {
  position: absolute;
  left: 0;
  top: 0;

  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;

  border: 0;
  outline: none;

  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 3) Когда Tab попал внутрь from/to — показываем инпут нормально */
#amazzing_filter .af-slider .slider_value:focus-within .input-text {
  position: static;

  width: 6.5em;
  height: auto;
  padding: 6px 8px;
  margin-left: 6px;

  border: 1px solid currentColor;
  border-radius: 6px;

  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* 4) Когда показываем инпут — прячем “красивое” число, чтобы не было дубля */
#amazzing_filter .af-slider .slider_value:focus-within > .value {
  display: none;
}

/* 5) Видимый фокус на самом поле */
#amazzing_filter .af-slider .slider_value:focus-within .input-text:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}