/* =====================
  Header base
===================== */

.header {
  position: fixed;
  top: 1.5rem;
  left: 0;
  right: 0;
  z-index: 1000;
  max-width: 1600px;
  padding: 0 2.5rem;
  margin: 0 auto;

}

.header__container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 2rem;
  border-radius: 23.753px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 3.959px 14.845px 0 rgba(0, 0, 0, 0.1),
   0 0.99px 0 0 rgba(255, 255, 255, 0.3) inset,
   0 3.959px 19.794px 0 rgba(255, 0, 23, 0.2) inset;
  backdrop-filter: blur(49.484535217285156px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Logo */

.header__logo img {
  width: 150px;
  display: block;
}

/* =====================
  Desktop navigation
===================== */

.header__nav {
  margin: 0 auto;
}

.header__nav-list {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header__nav-link {
  text-decoration: none;
  color: #fffffc;
  font-weight: 500;
  font-size: 1.125rem;
  transition: color 0.3s ease;
}

.header__nav-link:hover,
.header__nav-link:focus,
.header__nav-link:focus-visible {
  color: #fa1f59;
  outline: none;
}

.header__nav-link:active {
  color: #c12951;
}

/* =====================
  Desktop actions
===================== */

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header__lang {
  background: transparent;
  color: #fffffc;
}

/* =====================
  Burger
===================== */

.header__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  position: relative;
  z-index: 2;
  padding: 0.25rem;
  border-radius: 0.5rem;
}

.header__burger:focus-visible {
  outline: 2px solid rgba(131, 255, 143, 0.75);
  outline-offset: 4px;
}

.header__burger-line {
  width: 24px;
  height: 2px;
  background: #fa1f59;
  border-radius: 2px;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header__burger-line + .header__burger-line {
  margin-top: 5px;
}

/* =====================
  Mobile menu (hidden)
===================== */

.header__mobile {
  display: none;
}

/* =====================
  Адаптив / Мобильные стили
  (медиа-запросы вынесены в конец файла)
===================== */

/* 1) Широкие планшеты и меньше: до 1023.98px */
/* 2) Средние экраны (768px - 1023.98px) */
/* 3) Мобильные до 767.98px */

@media (max-width: 1440px) {
  .header {
    padding: 0 5rem;
  }

  .header__container {
    padding: 1.125rem 1.75rem;
    gap: 1.375rem;
  }

  .header__logo img {
    width: 140px;
  }

  .header__nav-list {
    gap: 1.75rem;
  }

  .header__nav-link {
    font-size: 1rem;
  }

  .header__actions {
    gap: 0.6875rem;
  }

  .header__action {
    padding: 0.75rem 1.375rem;
    font-size: 1rem;
  }

  .header__lang {
    font-size: 1rem;
  }
}

@media (max-width: 1280px) {
  .header {
    padding: 0 4rem;
  }


  .header__container {
    padding: 1rem 1.5rem;
    gap: 1.25rem;
  }

  .header__logo img {
    width: 130px;
  }

  .header__nav-list {
    gap: 1.5rem;
  }

  .header__nav-link {
    font-size: 0.9375rem;
  }

  .header__actions {
    gap: 0.625rem;
  }

  .header__action {
    padding: 0.6875rem 1.25rem;
    font-size: 0.9375rem;
  }

  .header__lang {
    font-size: 0.9375rem;
  }
}

@media (max-width: 1023.98px) {
  .header__container {
   padding: 1.125rem 1.5rem;
   gap: 1.25rem;
  }

  .header__logo img {
   width: 130px;
  }

  .header__nav-list {
   gap: 1.5rem;
  }

  .header__nav-link {
   font-size: 0.9375rem;
  }

  .header__actions {
   gap: 0.625rem;
  }

  .header__action {
   padding: 0.625rem 1.125rem;
   font-size: 0.9375rem;
  }

  .header__lang {
   font-size: 0.9375rem;
  }
}

@media (max-width: 1023.98px) and (min-width: 768px) {
  .header__container {
   padding: 16px 20px;
   gap: 16px;
  }

  .header__logo img {
   width: 120px;
  }

  .header__nav-list {
   gap: 20px;
  }

  .header__nav-link {
   font-size: 14px;
  }

  .header__actions {
   gap: 8px;
  }

  .header__action {
   padding: 8px 16px;
   font-size: 14px;
  }

  .header__lang {
   font-size: 14px;
  }
}

@media (max-width: 767.98px) {
  .header {
   top: 10px;
   padding: 0 1rem;
  }

  .header__container {
   padding: 12px 16px;
   flex-wrap: wrap;
   border-radius: 16px;
   background: rgba(0, 0, 0, 0.2);
   box-shadow: 0 3.959px 14.845px 0 rgba(0, 0, 0, 0.1),
    0 0.99px 0 0 rgba(255, 255, 255, 0.3) inset,
    0 3.959px 19.794px 0 rgba(255, 0, 23, 0.2) inset;
   backdrop-filter: blur(49.484535217285156px);
   max-height: 59px; /* Высота контейнера в закрытом состоянии */
   transition-property: max-height, background-color, border-radius;
   transition-duration: 0.4s;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Когда меню открыто, контейнер "разворачивается" */
  .header--menu-open .header__container {
   max-height: 100vh; /* Фиксированная высота для плавной анимации */
   height: min-content;
   overflow-y: scroll;
  }

  .header__nav,
  .header__actions {
   display: none;
  }

  .header__logo img {
   width: 90px;
   transition: opacity 0.3s ease;
  }

  .header__burger {
   display: flex;
   flex-direction: column;
   justify-content: center;
  }

  .header__mobile {
   width: 100%;
   margin-top: 20px;
   padding: 0;
   background: transparent;
   backdrop-filter: none;
   border: none;

   flex-direction: column;
   gap: 16px;

   /* Начальное состояние - скрыто */
   opacity: 0;
   transform: translateY(-10px);
   transition: opacity 0.3s ease, transform 0.3s ease;

   /* Важно для плавной анимации */
   will-change: opacity, transform;
  }

  /* При открытии меню плавно появляется */
  .header--menu-open .header__mobile {
   opacity: 1;
   transform: translateY(0);
   display: flex;
   transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
  }

  .header__mobile-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
  }

  .header__mobile-list a {
   color: #fffffc;
   font-size: 17px;
   font-weight: 600;
   text-decoration: none;
   padding: 12px 0;
   width: 100%;
   text-align: center;
   opacity: 0;
   transform: translateY(10px);
   transition: all 0.3s ease;
  }

  /* Плавное появление ссылок с задержкой при открытии */
  .header--menu-open .header__mobile-list a {
   opacity: 1;
   transform: translateY(0);
  }

  .header--menu-open .header__mobile-list li:nth-child(1) a {
   transition-delay: 0.2s;
  }
  .header--menu-open .header__mobile-list li:nth-child(2) a {
   transition-delay: 0.25s;
  }
  .header--menu-open .header__mobile-list li:nth-child(3) a {
   transition-delay: 0.3s;
  }

  /* Сбрасываем задержку при закрытии */
  .header__mobile-list a {
   transition-delay: 0s;
  }

  .header__mobile-actions {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding-top: 16px;
   margin-top: 8px;
   opacity: 0;
   transform: translateY(10px);
   transition: all 0.3s ease;
   width: 100%;
   max-width: 280px;
   margin-left: auto;
   margin-right: auto;
  }

  .header--menu-open .header__mobile-actions {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.35s;
  }

  /* Сбрасываем задержку при закрытии */
  .header__mobile-actions {
   transition-delay: 0s;
  }

  .header__mobile-actions .button,
  .header__mobile-actions .custom-select {
   width: 100%;
   padding: 12px;
   font-size: 16px;
   opacity: 0;
   transform: translateY(10px);
   transition: all 0.3s ease;
  }

  .header--menu-open .header__mobile-actions .button,
  .header--menu-open .header__mobile-actions .custom-select {
   opacity: 1;
   transform: translateY(0);
  }

  .header--menu-open .header__mobile-actions .button:nth-child(1) {
   transition-delay: 0.4s;
  }
  .header--menu-open .header__mobile-actions .button:nth-child(2) {
   transition-delay: 0.45s;
  }
  .header--menu-open .header__mobile-actions .custom-select {
   transition-delay: 0.5s;
  }

  /* Сбрасываем задержку для кнопок при закрытии */
  .header__mobile-actions .button,
  .header__mobile-actions .custom-select {
   transition-delay: 0s;
  }

  .header__mobile-actions .custom-select {
   padding: 0;
  }

  /* Burger animation */
  .header--menu-open .header__burger-line:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
  }

  .header--menu-open .header__burger-line:nth-child(2) {
   opacity: 0;
   transform: translateX(-10px);
  }

  .header--menu-open .header__burger-line:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
  }
}

/* Убираем анимацию expandContainer и используем transition для max-height */