@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.j3m-mobile-menu-wrapper,
.j3m-mobile-menu-wrapper * {
  font-family: 'Roboto', sans-serif;
}

/* Гамбургер */
.j3m-hamburger {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2147483647 !important;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dcdcdc;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  user-select: none;
  backface-visibility: hidden;
  isolation: isolate;
}

.j3m-hamburger-line {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #000;
  margin: 5px auto; /* авто-отступы центрируют линию */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
  transform-origin: center; /* вращение строго из центра */
}

.j3m-hamburger.j3m-active .j3m-hamburger-line:nth-child(1) {
  transform: rotate(45deg);
}
.j3m-hamburger.j3m-active .j3m-hamburger-line:nth-child(2) {
  opacity: 0;
}
.j3m-hamburger.j3m-active .j3m-hamburger-line:nth-child(3) {
  transform: rotate(-45deg);
}

/* Панель меню */
.j3m-menu-panel {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 2147483646 !important;
}

.j3m-menu-panel[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.j3m-panel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}

.j3m-panel-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  padding-top: 96px;
  text-align: center;
  z-index: 2147483644 !important;
}

/* Ровный крестик из линий (вместо символа ×) */
.j3m-close-btn {
  position: absolute;
  top: 28px;
  left: 28px;
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 12px;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
}

.j3m-close-line-h,
.j3m-close-line-v {
  position: absolute;
  width: 26px;
  height: 3px;
  background-color: #fff;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: center;
}

.j3m-close-line-h {
  transform: rotate(45deg);
}
.j3m-close-line-v {
  transform: rotate(-45deg);
}

/* Ссылки и прочее */
.j3m-links-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 88%;
  max-width: 520px;
}

.j3m-link-item {
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.j3m-link-item:hover,
.j3m-link-item:focus {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.24);
}

.j3m-social-block {
  margin-top: 44px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

.j3m-vk-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 19px;
}

.j3m-vk-icon {
  display: none;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.52 0 10-4.48 10-10S17.52 2 12 2zm3.77 13.45c-.28.28-.73.45-1.23.45-.42 0-.82-.12-1.1-.36l-1.3-.96c-.18-.14-.32-.15-.46-.02l-1.56 1.44c-.2.18-.5.26-.8.16-.5-.14-1-.66-1-1.28v-6.7c0-.28-.23-.5-.5-.5H7c-.28 0-.5.22-.5.5v6.7c0 .84.5 1.5 1.1 1.7l1.57 1.15c.14.1.27.1.4.02l1.3-1.06c.28-.22.7-.34 1.07-.16.37.18.58.54.58 1v.3c0 .28-.22.5-.5.5z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 991px) {
  .j3m-hamburger {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .j3m-hamburger,
  .j3m-menu-panel {
    display: none !important;
  }
}