/* Navbar language picker (js/lang-switcher.js). Sits in .nav-button-wrapper
   and stays visible at every breakpoint — unlike the Contact button, which the
   mobile navbar hides. */
.vt-lang {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.vt-lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--black-0-1, #0000001a);
  border-radius: var(--_borders---border-8px, 8px);
  background: #fff;
  color: var(--black-100, #0c0c0c);
  font-family: inherit;
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: -.2px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}

.vt-lang-toggle:hover {
  background: #f5f5f5;
  border-color: #00000033;
}

.vt-lang-flag {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px #0000001f;
}

.vt-lang-code {
  font-weight: 500;
}

.vt-lang-chevron {
  opacity: .55;
  transition: transform .2s;
}

.vt-lang.is-open .vt-lang-chevron {
  transform: rotate(180deg);
}

.vt-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--black-0-1, #0000001a);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px -12px #00000026, 0 2px 6px #0000000f;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}

.vt-lang.is-open .vt-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vt-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--black-100, #0c0c0c);
  font-size: .875rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s;
}

.vt-lang-option:hover {
  background: #f4f4f4;
}

.vt-lang-option.is-active {
  font-weight: 600;
}

.vt-lang-name {
  flex: 1 1 auto;
}

.vt-lang-check {
  color: #e2231a;
  flex: 0 0 auto;
}

/* The Arabic label needs its own font stack even on the LTR sites. */
.vt-lang-option[lang="ar"] .vt-lang-name {
  font-size: 1rem;
  direction: rtl;
}

/* The picker adds ~86px to the navbar row. On narrower desktops that is enough
   to tip the nav links into wrapping onto two lines and shove the logo off the
   left edge, so give the row room to breathe as space runs out. Nothing here
   changes the navbar at 1300px and up. */
@media screen and (min-width: 992px) {
  .nav-link {
    white-space: nowrap;
  }

  .nav-link-container {
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-menu-wrapper {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .nav-logo-wrapper,
  .nav-button-wrapper {
    flex: 0 0 auto;
  }
}

@media screen and (min-width: 992px) and (max-width: 1300px) {
  .nav-link {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1150px) {
  .nav-link {
    padding-left: 8px;
    padding-right: 8px;
    font-size: .8125rem;
  }

  .nav-logo {
    width: 170px;
  }
}

@media screen and (max-width: 991px) {
  .vt-lang-toggle {
    height: 36px;
    padding: 0 8px;
  }

  .vt-lang-menu {
    min-width: 180px;
  }
}

@media screen and (max-width: 479px) {
  .vt-lang-code {
    display: none;
  }

  .vt-lang-toggle {
    gap: 4px;
    padding: 0 7px;
  }
}