/* ==========================================================================
   CRDGAME — SECRET PLACES IMAGE MAP
   Полный исправленный файл
   v20260728_3
========================================================================== */


/* ==========================================================================
   BASE
========================================================================== */

.crd-secret-map,
.crd-secret-map * {
  box-sizing: border-box !important;
}

.crd-secret-map {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  max-width: 768px !important;

  margin: 30px auto 42px !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /*
   * Нужно, чтобы кнопки могли находиться
   * справа за пределами изображения.
   */
  overflow: visible !important;
}


/* ==========================================================================
   VIEWPORT
========================================================================== */

.crd-secret-map__viewport {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  overscroll-behavior-x: contain !important;

  scrollbar-width: thin !important;
  scrollbar-color:
    rgba(255, 255, 255, 0.22)
    rgba(255, 255, 255, 0.035) !important;
}

.crd-secret-map__viewport::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.crd-secret-map__viewport::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.035) !important;
}

.crd-secret-map__viewport::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22) !important;

  border: 0 !important;
  border-radius: 0 !important;
}

.crd-secret-map__viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32) !important;
}


/* ==========================================================================
   ZOOM WRAPPER
========================================================================== */

.crd-secret-map__zoom {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  min-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  transition: width 0.22s ease !important;
}


/* ==========================================================================
   CANVAS
========================================================================== */

.crd-secret-map__canvas {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /*
   * Не скрываем рамки крайних карточек.
   */
  overflow: visible !important;

  line-height: 0 !important;
}


/* ==========================================================================
   IMAGE

   ВАЖНО:
   Высота теперь берётся из самой картинки.
   Никакого искусственного aspect-ratio и object-fit.
========================================================================== */

.crd-secret-map__image {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;

  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  vertical-align: top !important;

  object-fit: unset !important;
  object-position: unset !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  outline: 0 !important;
  box-shadow: none !important;

  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;

  pointer-events: none !important;
}


/* ==========================================================================
   HOTSPOTS LAYER
========================================================================== */

.crd-secret-map__hotspots {
  position: absolute !important;

  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  z-index: 3 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  pointer-events: none !important;
}


/* ==========================================================================
   HOTSPOTS
========================================================================== */

.crd-secret-map__hotspot {
  position: absolute !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: transparent !important;
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  outline: 0 !important;
  box-shadow: none !important;

  opacity: 1 !important;

  text-decoration: none !important;

  cursor: pointer !important;
  pointer-events: auto !important;

  /*
   * Координаты уже совпадают с настоящими
   * границами карточек внутри изображения.
   */
  transition:
    box-shadow 0.14s cubic-bezier(0.55, 0, 0.1, 1),
    background-color 0.14s cubic-bezier(0.55, 0, 0.1, 1) !important;
}


/*
 * Двойная золотая рамка строго ВНУТРИ карточки.
 * Она не увеличивает размеры области и не съезжает.
 */

.crd-secret-map__hotspot:hover,
.crd-secret-map__hotspot:focus-visible {
  background: rgba(221, 153, 51, 0.025) !important;

  border: 0 !important;
  outline: 0 !important;

  box-shadow:
    inset 0 0 0 1px rgba(221, 153, 51, 1),
    inset 0 0 0 3px rgba(12, 10, 8, 0.95),
    inset 0 0 0 4px rgba(221, 153, 51, 1) !important;
}


/*
 * Полностью убираем старые номера,
 * чёрные плашки и другие псевдоэлементы.
 */

.crd-secret-map__hotspot::before,
.crd-secret-map__hotspot::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================================
   ZOOM CONTROLS

   На широком экране находятся СПРАВА от изображения.
   Ничего внутри карты не перекрывают.
========================================================================== */

.crd-secret-map__controls {
  position: absolute !important;

  right: -42px !important;
  bottom: 0 !important;

  z-index: 10 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;

  width: 30px !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* ==========================================================================
   ZOOM BUTTON
========================================================================== */

.crd-secret-map__button {
  position: relative !important;
  z-index: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 30px !important;

  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;

  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  fill: #ffffff !important;

  background: rgba(0, 0, 0, 0.5) !important;

  border: 1px solid rgba(255, 255, 255, 0.25) !important;

  outline: 0 !important;
  box-shadow: none !important;

  font-family: Arial, sans-serif !important;
  font-size: 0 !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  text-align: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;

  cursor: pointer !important;

  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;

  -webkit-touch-callout: none !important;

  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;

  -webkit-user-drag: none !important;

  transition: none !important;
}


/* Верхняя кнопка */

.crd-secret-map__button--in,
.crd-secret-map__button[data-crd-secret-zoom-in] {
  border-radius: 5px 5px 0 0 !important;
}


/* Нижняя кнопка */

.crd-secret-map__button--out,
.crd-secret-map__button[data-crd-secret-zoom-out] {
  border-top: 0 !important;
  border-radius: 0 0 5px 5px !important;
}


/* Убираем старые CSS-палочки */

.crd-secret-map__button::before,
.crd-secret-map__button::after {
  content: none !important;
  display: none !important;
}


/* Hover */

.crd-secret-map__button:hover {
  color: #ffffff !important;
  fill: #ffffff !important;

  background: rgba(0, 0, 0, 0.65) !important;

  transform: none !important;
  box-shadow: none !important;
}


/* Active — как в исходном Image Map Pro */

.crd-secret-map__button:active {
  filter: brightness(0.8) !important;

  transform: none !important;
  box-shadow: none !important;
}


/* Focus */

.crd-secret-map__button:focus {
  outline: 0 !important;
}

.crd-secret-map__button:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.65) !important;
  outline-offset: -2px !important;
}


/* Disabled */

.crd-secret-map__button:disabled {
  color: rgba(255, 255, 255, 0.32) !important;
  fill: rgba(255, 255, 255, 0.32) !important;

  opacity: 1 !important;

  cursor: default !important;
  filter: none !important;
}


/* ==========================================================================
   SVG ICON
========================================================================== */

.crd-secret-map__icon {
  display: block !important;

  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;

  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
  fill: currentColor !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  pointer-events: none !important;
}

.crd-secret-map__icon path {
  fill: currentColor !important;
  stroke: none !important;
}


/* ==========================================================================
   ARTICLE OVERRIDES
========================================================================== */

.pa-entry-content .crd-secret-map {
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.pa-entry-content .crd-secret-map__viewport,
.pa-entry-content .crd-secret-map__zoom,
.pa-entry-content .crd-secret-map__canvas {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.pa-entry-content .crd-secret-map img {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  outline: 0 !important;
  box-shadow: none !important;
}

.pa-entry-content .crd-secret-map a {
  text-decoration: none !important;
}


/* ==========================================================================
   NARROW SCREENS

   Справа места уже нет — переносим кнопки ПОД карту.
   Они по-прежнему соединены вертикально, как в источнике.
========================================================================== */

@media (max-width: 900px) {

  .crd-secret-map {
    padding-bottom: 0 !important;
  }

  .crd-secret-map__controls {
    position: relative !important;

    right: auto !important;
    bottom: auto !important;

    width: 30px !important;

    margin: 10px 0 0 auto !important;
  }
}


/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 760px) {

  .crd-secret-map {
    width: 100% !important;
    max-width: 100% !important;

    margin: 24px auto 34px !important;
  }

  .crd-secret-map__hotspot:hover,
  .crd-secret-map__hotspot:focus-visible {
    box-shadow:
      inset 0 0 0 1px rgba(221, 153, 51, 1),
      inset 0 0 0 2px rgba(12, 10, 8, 0.95),
      inset 0 0 0 3px rgba(221, 153, 51, 1) !important;
  }
}