@use '../../abstracts' as *;


@keyframes header-nav-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[x-cloak] {
  display: none !important;
}

.dsm-head {
  border-top: 3px solid $color-blue;
  position: relative;
  // z-index нужен — мегаменю висит в absolute, без него вылезает поверх основного контента
  z-index: 100;
  // Figma: топбар и тёмная полоса меню — Roboto (пункты ~14px regular/semibold)
  font-family: $font-body;

  &__topbar {
    padding: 7px 0 17px;
    background: $color-white;
    color: $color-text;

    @include between($bp-md2, $until-1439) {
      padding: 6px 0 19px;
    }

    @include sm {
      border-bottom: 1px solid $color-dark-blue;
    }
  }

  &__topbar-inner {
    display: flex;
    align-items: center;
    gap: $header-topbar-pack-gap;
    flex-wrap: nowrap;

    @include down-to($bp-header-topbar-grid-max) {
      flex-wrap: wrap;
      row-gap: 12px;
    }

    // ≥993: лого | медали | блок действий (через .dsm-head__topbar-actions + display:contents — дети в потоке inner).
    @include up($bp-md2) {
      gap: 0;
    }

    @include between($bp-md2, $until-1439) {
      justify-content: space-between;
    }
  }

  // Адреса, телефон, мессенджеры, CTA, бургер: <993px — flex-кластер; ≥993px — display:contents
  &__topbar-actions {
    display: flex;
    align-items: center;
    gap: $header-topbar-pack-gap;
    margin-left: auto;
    flex-wrap: nowrap;
    min-width: 0;

    @include down-to($bp-header-topbar-grid-max) {
      justify-content: flex-end;
    }

    @include up($bp-md2) {
      display: contents;
    }

    // 992–1440 (Figma): кластер с gap 20; без margin-left: auto; сброс justify-content (в т.ч. от down-to(1150) flex-end)
    @include between($bp-md2, $until-1439) {
      display: flex;
      flex-wrap: nowrap;
      gap: $header-topbar-pack-gap;
      margin-left: 0;
      justify-content: normal;
      width: 100%;
      max-width: $header-topbar-actions-max-md2-lg;
    }
  }

  &__logo {
    display: block;
    line-height: 0;
    flex-shrink: 0;

    @include up($bp-md2) {
      margin-right: $header-topbar-pack-gap;
    }

    @include up($bp-xl) {
      margin-right: 29px;
    }

    img {
      height: 72px;
      width: auto;
      max-width: 160px;
      display: block;
    }

    @include between($bp-md, $until-991) {
      img {
        max-width: 150px;
        height: auto;
      }
    }

    @include md {
      img {
        height: 67.5px;
        max-width: 150px;
      }
    }

    @media (max-width: #{$bp-sm}) {
      img {
        height: 51.5px;
        max-width: 114px;
      }
    }

    @media (max-width: #{$bp-xs}) {
      img {
        height: 49.5px;
        max-width: 114px;
      }
    }
  }

  &__awards {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;

    @include up($bp-md2) {
      margin-right: auto;
    }

    img {
      display: block;
      object-fit: contain;
    }

    img:nth-child(1) {
      width: 30px;
      height: 30px;
    }

    img:nth-child(2),
    img:nth-child(3) {
      width: 28px;
      height: 29px;
    }

    @include md {
      display: none;
    }

    @include between($bp-md, $until-991) {
      display: none;
      visibility: hidden;
      pointer-events: none;
    }
  }

  &__addresses {
    display: flex;
    flex-direction: column;
    gap: 3px;

    @include between($bp-md2, $until-1439) {
      max-width: 169px;
    }

    @include between($bp-md, $until-991) {
      display: none;
      visibility: hidden;
      pointer-events: none;
    }
  }

  &__city {
    color: $color-blue;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 400;
  }

  &__address-list {
    list-style: disc;
    padding-left: 14px;
    margin: 0;

    @include between($bp-md2, $until-1439) {
      padding-left: 8px;
    }

    li {
      color: $color-header-address;
      font-family: $font-body;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }

    a {
      color: $color-header-address;
      font-family: inherit;
      font-size: inherit;
      font-style: inherit;
      font-weight: inherit;
      line-height: inherit;
      transition: color 0.2s;

      &:hover {
        color: $color-blue;
      }
    }
  }

  &__contacts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    width: 138px;
    align-items: center;
    text-align: center;

    @include up($bp-md2) {
      margin-left: $header-topbar-pack-gap;
    }

    @include between($bp-md2, $until-1439) {
      margin-left: 0;
    }
  }

  &__phone {
    color: $color-text;
    font-size: 17px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;

    &:hover {
      opacity: 0.85;
    }

    @media (max-width: #{$bp-xs}) {
      line-height: 1.2;
    }
  }

  &__schedule {
    color: $color-blue;
    font-size: 11px;
    line-height: normal;
    white-space: nowrap;
  }

  &__messengers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;

    @include up($bp-md2) {
      margin-left: $header-topbar-pack-gap;
    }

    @include between($bp-md2, $until-1439) {
      margin-left: 0;
    }
  }

  &__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    width: 190px;

    @include up($bp-md2) {
      margin-left: $header-topbar-pack-gap;
    }

    .btn {
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      line-height: normal;
      border-radius: $radius-sm;
      justify-content: center;
    }

    // 768–992: колонка, max-width 191px
    @include between($bp-md, $until-991) {
      flex-direction: column;
      width: 100%;
      min-width: 0;
      max-width: $header-topbar-cta-max-md-md2;
      align-items: center;
      align-self: center;
      margin-left: 0;

      .btn {
        width: 100%;
        max-width: 100%;
        padding: 8px 0;
        box-sizing: border-box;
      }
    }

    // 992–1439: колонка CTA — 169px (Figma node 22-540)
    @include between($bp-md2, $until-1439) {
      flex: 0 0 $header-topbar-cta-max-md2-lg;
      width: $header-topbar-cta-max-md2-lg;
      min-width: 0;
      max-width: $header-topbar-cta-max-md2-lg;
      align-items: center;
      align-self: center;
      margin-left: 0;

      .btn {
        width: 100%;
        max-width: 100%;
        padding: 8px 0;
        box-sizing: border-box;
      }
    }
  }

  &__nav {
    // padding-bottom: 12px;
    background: $color-white;
    overflow: visible;

    .container {
      height: auto;
      overflow: visible;
    }

    @include md {
      padding-bottom: 10px;
    }
  }

  &__wrapper {
    width: 100%;
    min-height: 44px;
    display: flex;
    position: relative;
    align-items: center;
    gap: 6px;
    background: $color-dark-blue;
    border-radius: 12px;
    padding: 4px 8px;
    overflow: visible; // не обрезать absolute-мегаменю

    @include md {
      min-height: 48px;
    }

    // Полоса навбара: внутренние отступы и скругление по макету
    @include up($bp-header-nav-desktop) {
      gap: 40px;
      padding: 10px 10px 10px 20px;
      border-radius: 16px;
    }

    // Средние ширины: тёмная полоса навбара
    @include between($bp-header-tablet-min, $bp-header-nav-tablet-max) {
      padding: 10px 20px;
      border-radius: 16px;
    }

    // 768–992: только горизонтальные поля (макет)
    @include between($bp-md, $until-991) {
      padding: 0 20px;
    }
  }

  &__nav-close {
    // По умолчанию скрыт — показывается через @include md выше
    display: none;
  }

  &__menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: $color-dark-blue;
    border: 0;
    color: $color-white;
    cursor: pointer;
    margin-left: auto;
    position: relative;
    z-index: 1001;

    @include up($bp-md2) {
      margin-left: $header-topbar-pack-gap;
    }

    @include between($bp-md2, $until-1439) {
      margin-left: 0;
    }

    &:hover {
      opacity: 0.8;
    }

    .dsm-head__menu-toggle-burger {
      display: block;
    }

    .dsm-head__menu-toggle-close {
      display: none;
      width: 32px;
      height: 32px;
      flex-shrink: 0;
    }

    .dsm-head__menu-toggle-close-bg {
      fill: $color-dark-blue;
    }

    .dsm-head__menu-toggle-close-x {
      stroke: $color-white;
    }

    &.is-open {
      // В макете (vuesax close-square) иконка целиком в SVG: фон кнопки не дублируем
      background: transparent;

      .dsm-head__menu-toggle-burger {
        display: none;
      }

      .dsm-head__menu-toggle-close {
        display: block;
      }
    }
  }

  &__burger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1;

    &:hover {
      opacity: 0.8;
    }
  }

  &__menu-toggle,
  &__burger {
    .burger-line {
      transform-origin: 12px 12px;
      transition:
        transform $header-motion-duration $header-motion-ease,
        opacity $header-motion-duration $header-motion-ease;
    }

    &.is-open {
      .burger-line--top {
        transform: translateY(5px) rotate(45deg);
      }

      .burger-line--mid {
        opacity: 0;
        transform: scaleX(0);
      }

      .burger-line--bot {
        transform: translateY(-5px) rotate(-45deg);
      }
    }
  }

}

.messenger-link {
  width: 24px;
  height: 24px;

  img {
    width: 24px;
    height: 24px;
    display: block;
  }
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.2s, opacity 0.2s;

  &:hover {
    transform: translateY(-1px);
    opacity: 0.85;
  }
}

// Планшет: три колонки
@include between($bp-md, $until-991) {
  .dsm-head__topbar-inner {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 12px;
  }

  .dsm-head__logo {
    grid-column: 1;
    margin-right: 0;
  }

  .dsm-head__awards {
    grid-column: 2;
    margin-right: 0;
  }

  .dsm-head__topbar-actions {
    grid-column: 3;
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

.nav {
  &__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    flex: 1;
    overflow: visible;

    @include up($bp-header-nav-desktop) {
      gap: 30px;
    }

    // 568–1024: иначе на ровно 768px остаётся gap: 2px → «Услуги» + «О клинике» слипаются
    @include between($bp-header-tablet-min, $bp-header-nav-tablet-max) {
      gap: 10px;
      flex: 1;
      min-width: 0;
      flex-wrap: nowrap;
    }
  }

  &__item {
    position: relative;

    > a,
    > .nav__services-trigger {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 10px;
      color: $color-white;
      font-size: 14px;
      line-height: 1;
      white-space: nowrap;
      text-decoration: none;
      transition: color 0.2s;
      border: 0;
      background: transparent;
      cursor: pointer;

      &:hover {
        color: rgba($color-white, 0.72);
      }

    }

    &--active > a {
      color: $color-header-link-accent;
    }

    // &--collapsible: перенос в «Ещё» — nav-overflow.ts (568–991px)

    &--more {
      display: none; // ≤991: не .is-empty — см. _after-mega.scss; JS 568–991px

      > button {
        display: inline-flex;
        align-items: center;
        padding: 8px 10px;
        color: $color-white;
        font-size: 18px;
        letter-spacing: 2px;
        line-height: 1;
        background: transparent;
        border: 0;
        cursor: pointer;

        &:hover { opacity: 0.8; }
      }
    }

    &--dropdown {
      &.is-open > .nav__dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
    }

    // Пункт с основной ссылкой и отдельной кнопкой-шевроном (как «Услуги», но без мегаменю)
    &--dropdown-split {
      position: relative;

      .nav__dropdown-split-row {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        color: $color-white;
        gap: 4px;

        @include up($bp-header-nav-desktop) {
          gap: 10px;
          padding: 10px 0;
        }
      }

      .nav__dropdown-split-link {
        color: inherit;
        font-size: 14px;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;

        &:hover { color: rgba($color-white, 0.72); }
      }

      .nav__dropdown-split-trigger {
        padding: 0;
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
        display: flex;
        align-items: center;
        flex-shrink: 0;

        img {
          transition: transform 0.2s ease;
          width: 19px;
        }

        &:hover { opacity: 0.8; }
      }

      &.is-open {
        > .nav__dropdown-split-row > .nav__dropdown-split-trigger img {
          transform: rotate(180deg);
        }

        > .nav__dropdown {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
      }
    }

    &--services {
      position: relative;

      // Только шапка в строку — мегаменю соседом, без flex-wrap на li (иначе ломается сетка)
      .nav__services-heading {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .nav__services-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        color: $color-white;

        @include up($bp-header-nav-desktop) {
          gap: 10px;
          padding: 10px 0;
        }
      }

      .nav__services-link {
        color: inherit;
        font-size: 14px;
        line-height: 1;
        text-decoration: none;
        transition: color 0.25s ease, opacity 0.25s ease;

        &:hover {
          color: rgba($color-white, 0.82);
        }

        &:focus-visible {
          outline: 2px solid rgba($color-white, 0.85);
          outline-offset: 3px;
          border-radius: 2px;
        }
      }

      .nav__services-heading > .nav__services-row > .nav__services-trigger {
        margin-left: auto;
        padding: 0;
        gap: 8px;
        color: inherit;

        img {
          flex-shrink: 0;
          transition: transform 0.38s cubic-bezier(0.33, 1, 0.53, 1);
        }
      }

      &:not(.is-open):hover .nav__dropdown {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
      }

      &.is-open > .nav__dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      &.is-open .nav__services-heading .nav__services-trigger img {
        transform: rotate(180deg);
      }
    }
  }

  &__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: $color-white;
    border-radius: $radius-md;
    box-shadow: 0 8px 32px rgba($color-text, 0.12);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity $header-motion-duration $header-motion-ease,
      visibility $header-motion-duration $header-motion-ease,
      transform $header-motion-duration $header-motion-ease;
    z-index: 100;

    > a {
      display: block;
      padding: 10px 20px;
      color: $color-text;
      font-size: 14px;
      text-decoration: none;
      transition: color 0.2s, background 0.2s;

      &:hover {
        color: $color-blue;
        background: rgba($color-blue, 0.05);
      }
    }

    > li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    > li > a {
      display: block;
      padding: 10px 20px;
      color: $color-text;
      font-size: 14px;
      text-decoration: none;
      transition: color 0.2s, background 0.2s;

      &:hover {
        color: $color-blue;
        background: rgba($color-blue, 0.05);
      }
    }
  }
}

// Ряд: список ссылок + поиск (не <li>, чтобы не ограничивать вёрстку и include в Битрикс)
.dsm-head__nav-main {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

// Поиск: ≥1025 — развёрнутое поле прямо в навбаре; 577–1024 — иконка-кнопка + панель под полосой; ≤576 — внутри мобильного оверлея
.dsm-head__nav-search {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  min-width: 0;

  .dsm-head__search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    // ширину даём авто, фиксируем только высоту
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: $color-white;
    cursor: pointer;
    flex-shrink: 0;

    &:hover {
      background: rgba($color-white, 0.12);
    }
  }

  .dsm-head__search-toggle-icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  .dsm-head__search-panel {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .dsm-head__search {
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .dsm-head__search-btn {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: $color-text;

    img {
      display: block;
      flex-shrink: 0;
    }

    &:hover {
      opacity: 0.85;
    }
  }

  .dsm-head__search-input {
    display: block;
    margin: 0;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: $color-text;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;

    &::placeholder {
      color: $color-text-secondary;
    }

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  .dsm-head__search-clear {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: $color-text-secondary;
    line-height: 0;

    &:hover {
      color: $color-text;
    }

    svg {
      display: block;
    }
  }
}

// 568–991: не даём flex сжимать подписи пунктов (иначе визуально «слипаются» с соседями).
// На 992–1440 разрешаем усадку, чтобы элементы навбара не накладывались на поиск.
@include between($bp-header-tablet-min, $until-991) {
  .nav__list > .nav__item:not(.nav__item--mobile-info) {
    flex-shrink: 0;
  }
}

// Выпадающее «Ещё»: карточка (568–991, синхрон с nav-overflow.ts)
@include between($bp-header-tablet-min, $until-991) {
  .nav__item--more > .nav__dropdown.nav__more-list {
    left: auto;
    right: 0;
    min-width: 200px;
    padding: 20px;
    border: 1px solid $color-nav-border;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba($color-text, 0.12);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
    list-style: none;
    margin: 0;

    > li.nav__item {
      display: list-item;
    }

    > a {
      padding: 0;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;
      color: $color-text;
      background: transparent;
      border-radius: 0;

      &:hover {
        color: $color-blue;
        background: transparent;
      }
    }

    > li.nav__item > a {
      padding: 0;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;
      color: $color-text;
      background: transparent;
      border-radius: 0;
      white-space: nowrap;

      &:hover {
        color: $color-blue;
        background: transparent;
      }
    }
  }
}

// ≤576: поиск внутри открытого мобильного оверлея — растягиваем на всю ширину
@include sm {
  .dsm-head__nav-main.is-open .dsm-head__nav-search {
    width: 100%;
  }
}

// Дропдаун пункта со ссылкой + подменю (.nav__item--dropdown-split)
.nav__item--dropdown-split > .nav__dropdown {
  @include up($bp-header-nav-desktop) {
    left: 0;
    right: auto;
    min-width: 260px;
    width: max-content;
    max-width: min(360px, calc(100vw - 48px));
    padding: 30px 20px;
    border: 1px solid $color-nav-border;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 8px 32px rgba($color-text, 0.12);

    > a {
      padding: 0;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.3;
      color: $color-text;
      background: transparent;
      white-space: nowrap;

      &:hover {
        color: $color-blue;
        background: transparent;
      }
    }
  }
}