/* ========== состояние «active» для кнопки ========== */
.menu-toggle.active {
  transform: rotate(-90deg);
  /* при открытии: сразу поворачиваем за 0.4s */
  transition: transform 0.4s ease 0s;
}



/* ===================================================================
   MOBILE FIXES — общий блок для экранов <= 767.98px
   =================================================================== */
@media screen and (max-width:  820px) {
  /* new: фон-блюр */
  .mobile-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;  height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.2s;
    z-index: 22; /* между line(25) и menu(24) */
  }

  .mobile-backdrop.active {
    opacity: 1;
    transition: opacity 0.3s ease 0s;
    pointer-events: all;
  }
}

  /* 1) Бургер-кнопка */
  .menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* при закрытии: ждём 0.2s (линия) → разворот 0.4s */
    transition: transform 0.4s ease 0.2s;
  }
  .menu-toggle .bar {
    position: relative;
    width: 1.6rem;
    height: 2px;
    background: #E9C560;
    /* при открытии: перекрасимся через 0.4s */
    transition: background 0.2s ease 0.4s;
  }
  .menu-toggle .bar::before,
  .menu-toggle .bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #E9C560;
    transition:
      transform 0.4s ease,
      top 0.4s ease,
      bottom 0.4s ease,
      background 0.2s ease 0.4s;
  }
  .menu-toggle .bar::before { top: -6px; }
  .menu-toggle .bar::after  { bottom: -6px; }

  /* при открытии — через 0.4s перекрашиваем бургер-полоски */
  .menu-toggle.active .bar,
  .menu-toggle.active .bar::before,
  .menu-toggle.active .bar::after {
    background: rgba(152,25,84,1);
  }

  /* 2) Фиолетовая линия */
  .menu-toggle::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 4px;
    height: 0;
    background: linear-gradient(
      180deg,
      rgba(89,65,118,1) 0%,
      rgba(152,25,84,1) 100%
    );
    transform-origin: top center;
    /* компенсируем поворот родителя */
    transform: translateX(-50%) rotate(90deg);
    /* при открытии: delay 0.6s (0.4 + 0.2) → рост 0.3s */
    transition: height 0.3s ease 0.6s;
    z-index: 25;
  }
  /* при закрытии: схлопываем сразу за 0.2s */
  .menu-toggle:not(.active)::after {
    transition: height 0.2s ease 0s;
  }
  .menu-toggle.active::after {
    height: 50vh;
  }

  /* 3) Полупрозрачный выпадающий бокс */
    .mobile-menu {
    position: fixed;
    top: 50%;
    right: 5% !important;      /* сдвинуто по линии */
    width: 90% !important;     /* увеличенная ширина */
    background: linear-gradient(
      90deg,
      rgba(89, 65, 118, 0.7) 0%,
      rgba(152, 25, 84, 0.7)  100%
    ) !important;
    border-radius: 0 !important;
    padding: 3rem 2rem !important;  /* увеличенные отступы */
    transform: translateY(-50%) scaleY(0);
    transform-origin: top center;
    opacity: 0;
    z-index: 24 !important;
    transition:
      transform 0.4s ease 0s,
      opacity   0.3s ease  0s;
  }

  .mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-menu-list li + li {
    margin-top: 1.5rem !important;
  }
  .mobile-menu-list a {
    color: #fff;
    font-size: 1.25rem;
    text-decoration: none;
  }
  /* при активном бургере показываем бокс */
  .menu-toggle.active ~ .mobile-menu,
.mobile-menu.active {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
  /* ваши задержки/время анимаций */
  transition:
    transform 0.4s ease 0.9s,
    opacity   0.3s ease 0.9s;
}

  /* 4) TG и X-иконки внизу */
   .side-icons {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    gap: 1rem !important;
    z-index: 23 !important;
  }


/* ===================================================================
   Точные медиа-запросы под популярные смартфоны
   =================================================================== */
/* iPhone 16 Pro Max (≈ 430px) */
@media screen and (max-width: 430px) and (min-width: 391px) {
   .mobile-menu {
      width: 92% !important;
      right: 4%  !important;
      padding: 2.5rem 1.5rem !important;
    }
  
  .mobile-menu {
    right: 8% !important;
    width: 75% !important;
    padding: 1.8rem 1.2rem !important;
  }
  .mobile-menu-list a {
    font-size: 1.2rem;
  }
}

/* Google Pixel (≈ 393px) */
@media screen and (max-width: 393px) and (min-width: 361px) {
  .menu-toggle {
    top: 0.9rem;
    right: 0.9rem;
    width: 1.8rem;
    height: 1.8rem;
  }
  .mobile-menu {
    right: 6% !important;
    width: 78% !important;
    padding: 1.6rem 1rem !important;
  }
  .mobile-menu-list a {
    font-size: 1.15rem;
  }
}

/* Samsung Galaxy S (≈ 360px) */
@media screen and (max-width: 360px) {
  .menu-toggle {
    top: 0.7rem;
    right: 0.7rem;
    width: 1.6rem;
    height: 1.6rem;
  }
  .mobile-menu {
    right: 4% !important;
    width: 82% !important;
    padding: 1.4rem 0.8rem !important;
  }
  .mobile-menu-list a {
    font-size: 1.1rem;
  }
}
/* Скрываем основной desktop-menu на мобилках */
@media screen and (max-width:  767.98px) {
  .top-bar .nav-menu {
    display: none !important;
  }
}