/* ==========================================================================
 * СТРЕЛКИ В ПОЛНОЭКРАННОМ ПРОСМОТРЕ ФОТО (.mfp-sw-gallery)
 * --------------------------------------------------------------------------
 * Проблема: кнопки листания (Magnific Popup) были пустыми кружками —
 * стрелок на них не было видно, только жёлтая заливка при наведении.
 *
 * Причина: базовые стили в css/slick.css задают псевдоэлементам стрелки
 * нулевой размер:
 *     .mfp-arrow:before, .mfp-arrow:after { width: 0; height: 0; ... }
 * А в css/game-gallery.css стрелка нарисована ФОНОМ псевдоэлемента:
 *     .mfp-sw-gallery .mfp-arrow-left:after { content:''; inset:0;
 *         background-image: url("data:image/svg+xml, ...шеврон..."); }
 * Явные width:0/height:0 перебивают «inset: 0», поэтому фон рисовался
 * в квадрат нулевого размера — то есть нигде.
 *
 * Здесь возвращаем псевдоэлементу реальный размер и убираем сдвиг,
 * который тоже приходит из slick.css (transform: translate(-50%,-50%)).
 * Стрелки остаются светлыми на тёмном круге и тёмными на жёлтом при наведении.
 * ========================================================================== */

.mfp-sw-gallery .mfp-arrow:after {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  border: 0 !important;
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 52% 52% !important;
  pointer-events: none;
}

/* Пустой ::before из slick.css не должен перекрывать стрелку */
.mfp-sw-gallery .mfp-arrow:before {
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* Шевроны: в обычном состоянии — светлые, при наведении — тёмные на жёлтом */
.mfp-sw-gallery .mfp-arrow-left:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f2ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") !important;
}
.mfp-sw-gallery .mfp-arrow-right:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f2ee' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") !important;
}
.mfp-sw-gallery .mfp-arrow-left:hover:after,
.mfp-sw-gallery .mfp-arrow-left:focus-visible:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241d09' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") !important;
}
.mfp-sw-gallery .mfp-arrow-right:hover:after,
.mfp-sw-gallery .mfp-arrow-right:focus-visible:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241d09' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") !important;
}

/* Тот же дефект был у стрелок внутри самой галереи на странице:
   там SVG рисуется фоном самой кнопки, поэтому размеры не нужны —
   но подстрахуемся, чтобы фон не «схлопывался». */
.sw-gallery__arrow {
  background-size: 46% 46% !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
}
.sw-gallery__arrow:hover {
  background-size: 46% 46% !important;
}

/* Клавиатурный фокус должен быть виден */
.mfp-sw-gallery .mfp-arrow:focus-visible {
  outline: 3px solid #ffc607;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mfp-sw-gallery .mfp-arrow {
    transition: none !important;
  }
}