/* ==========================================================================
   Nova Solutions — Language switcher (flags only)
   Palette & units follow novatrade-012.webflow.css (navy / gold, vw sizing)
   Breakpoints: Desktop (base) · Tablet ≤991px · Mobile landscape ≤767px ·
   Mobile portrait ≤479px
   ========================================================================== */

/* keep the original desktop layout: links stay right-aligned, switcher after them */
.nav-container > .nav-link-wrap {
  margin-left: auto;
}

.lang-switcher {
  position: relative;
  z-index: 100;
  flex: none;
  margin-left: 1.38026vw;
  font-size: 1.10421vw;
  line-height: 1;
}

.lang-switcher-toggle {
  display: flex;
  align-items: center;
  grid-column-gap: .552105vw;
  padding: .414079vw .552105vw;
  background-color: #1e3a5f;
  border: 1px solid #d4a85380;
  border-radius: .690131vw;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.lang-switcher-toggle:hover,
.lang-switcher.is-open .lang-switcher-toggle {
  background-color: #0f1d30;
  border-color: #d4a853;
  box-shadow: 0 2px 5px #0003;
}

.lang-switcher-toggle:focus-visible,
.lang-option:focus-visible {
  outline: 2px solid #e5b048;
  outline-offset: 2px;
}

.lang-flag {
  display: block;
  width: 1.93237vw;
  min-width: 22px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: .207039vw;
  box-shadow: 0 0 0 1px #f5f5f526;
}

.lang-switcher-chevron {
  display: block;
  width: .483092vw;
  height: .483092vw;
  min-width: 6px;
  min-height: 6px;
  border-right: 2px solid #d4a853;
  border-bottom: 2px solid #d4a853;
  transform: translateY(-25%) rotate(45deg);
  transition: transform .2s ease;
}

.lang-switcher.is-open .lang-switcher-chevron {
  transform: translateY(25%) rotate(-135deg);
}

.lang-switcher-menu {
  position: absolute;
  top: calc(100% + .690131vw);
  right: 0;
  display: flex;
  flex-direction: column;
  grid-row-gap: .276052vw;
  margin: 0;
  padding: .414079vw;
  list-style: none;
  background-color: #1e3a5f;
  border: 1px solid #d4a853;
  border-radius: .690131vw;
  box-shadow: 0 2px 5px #0003, 0 10px 24px #0f1d3066;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.414079vw);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.lang-switcher.is-open .lang-switcher-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.lang-switcher-menu li {
  margin: 0;
  padding: 0;
}

.lang-option {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: .414079vw .552105vw;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .414079vw;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.lang-option:hover {
  background-color: #0f1d30;
  border-color: #d4a85380;
}

.lang-option.is-active {
  border-color: #d4a853;
  background-color: #0f1d30;
}

/* ---------- Right-to-left text for Arabic (layout itself is not mirrored) ---------- */
html[lang="ar"] body p,
html[lang="ar"] body h1, html[lang="ar"] body h2, html[lang="ar"] body h3,
html[lang="ar"] body h5, html[lang="ar"] body h6,
html[lang="ar"] body li, html[lang="ar"] body label,
html[lang="ar"] body blockquote, html[lang="ar"] body .w-richtext,
html[lang="ar"] body input, html[lang="ar"] body textarea {
  direction: rtl;
  unicode-bidi: plaintext;
}

/* ===================== Tablet ≤991px (navbar 8vw) ===================== */
@media screen and (max-width: 991px) {
  .lang-switcher {
    margin-left: auto;
    margin-right: 1.5vw;
    font-size: 1.5vw;
  }

  .lang-switcher-toggle {
    grid-column-gap: 1vw;
    padding: .8vw 1vw;
    border-radius: 1vw;
  }

  .lang-flag {
    width: 3.6vw;
    border-radius: .4vw;
  }

  .lang-switcher-chevron {
    width: .9vw;
    height: .9vw;
  }

  .lang-switcher-menu {
    top: calc(100% + 1.2vw);
    grid-row-gap: .5vw;
    padding: .8vw;
    border-radius: 1vw;
  }

  .lang-option {
    padding: .8vw 1vw;
    border-radius: .7vw;
  }
}

/* ================= Mobile landscape ≤767px (navbar 10vw) ================= */
@media screen and (max-width: 767px) {
  .lang-switcher {
    margin-right: 2vw;
  }

  .lang-switcher-toggle {
    grid-column-gap: 1.2vw;
    padding: 1vw 1.3vw;
    border-radius: 1.2vw;
  }

  .lang-flag {
    width: 4.6vw;
    border-radius: .5vw;
  }

  .lang-switcher-chevron {
    width: 1.1vw;
    height: 1.1vw;
  }

  .lang-switcher-menu {
    top: calc(100% + 1.5vw);
    grid-row-gap: .7vw;
    padding: 1vw;
    border-radius: 1.2vw;
  }

  .lang-option {
    padding: 1vw 1.3vw;
    border-radius: .9vw;
  }
}

/* ================= Mobile portrait ≤479px (navbar 18vw) ================= */
@media screen and (max-width: 479px) {
  .lang-switcher {
    margin-right: 3vw;
  }

  .lang-switcher-toggle {
    grid-column-gap: 2vw;
    padding: 1.8vw 2.2vw;
    border-radius: 2vw;
  }

  .lang-flag {
    width: 7.5vw;
    border-radius: .8vw;
  }

  .lang-switcher-chevron {
    width: 1.8vw;
    height: 1.8vw;
  }

  .lang-switcher-menu {
    top: calc(100% + 2.5vw);
    grid-row-gap: 1.2vw;
    padding: 1.8vw;
    border-radius: 2vw;
  }

  .lang-option {
    padding: 1.8vw 2.2vw;
    border-radius: 1.5vw;
  }
}

/* ---------- Uzbek: longer menu labels — slightly smaller links on desktop so the menu fits the navbar ---------- */
@media screen and (min-width: 992px) {
  html[lang="uz"] .nav-link {
    font-size: .95vw;
    padding: 1.38026vw 1.1vw;
  }
}

/* ---------- Spanish: hero badge text is longer — keep it single-line and centred ---------- */
html[lang="es"] .hero-badge {
  white-space: nowrap;
  width: auto;
  text-align: center;
}