/* Keeps the Google translation utility invisible; the site's own selector is used. */
.site-language-picker {
  min-width: 132px;
  height: 38px;
  padding: 0 30px 0 13px;
  border: 1px solid rgba(254, 161, 22, .8);
  border-radius: 5px;
  outline: 0;
  background-color: #0f172b;
  color: #fff;
  font: 600 13px/38px Arial, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fea116 50%), linear-gradient(135deg, #fea116 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.site-language-picker:hover,
.site-language-picker:focus {
  border-color: #fea116;
  box-shadow: 0 0 0 3px rgba(254, 161, 22, .18);
  background-color: #17233e;
}

.site-language-picker option { background: #fff; color: #172033; font-weight: 600; }
.picker-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 38px; margin-left: 6px; border: 1px solid #fea116; border-radius: 5px; background: #0f172b; color: #fea116; cursor: pointer; }
.picker-icon { pointer-events: none; font-size: 19px; line-height: 1; }
.picker-icon-wrap select { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.picker-icon-wrap:focus-within, .picker-icon-wrap:hover { background: #17233e; box-shadow: 0 0 0 3px rgba(254, 161, 22, .18); }
.currency-picker { width: 40px; height: 38px; margin-left: 0; border: 0; border-radius: 4px; background: transparent; color: transparent; font-size: 11px; font-weight: 700; }
.currency-picker option { background: #fff; color: #172033; }
.google-translate-element, .goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }

html[dir="rtl"] .menu-right-area { text-align: left !important; }
html[dir="rtl"] .main-menu, html[dir="rtl"] .top-contact-info { direction: rtl; }

/* Keep the flag and selector together on desktop. These rules intentionally
   come last so they override the legacy absolute header positioning. */
@media (min-width: 992px) {
  .header-menu-area .menu-right-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
  }

  .header-menu-area .menu-right-area .main-menu {
    order: 1;
  }

  .header-menu-area .menu-right-area .lang-select {
    order: 2;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: auto;
    min-height: 48px;
    margin: 0 24px 0 0;
    vertical-align: middle;
  }

  .header-menu-area .menu-right-area .lang-select .lang-img,
  .header-menu-area .menu-right-area .lang-select .lang-option {
    position: static;
    top: auto;
    right: auto;
    transform: none;
  }

  .header-menu-area .menu-right-area .lang-select .lang-img img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .header-menu-area .menu-right-area .lang-select .lang-option {
    display: flex;
    align-items: center;
    width: 40px;
    min-width: 40px;
    margin: 0;
  }

  .header-menu-area .menu-right-area .lang-select .site-language-picker {
    width: 40px;
    min-width: 40px;
  }
}

/* The legacy mobile menu button is on the right. Keep the selector directly
   beside it and prevent it from being pushed above the header row. */
@media (max-width: 991px) {
  .header-menu-area .menu-right-area {
    position: relative;
    min-height: 42px;
    padding-right: 48px;
  }

  .header-menu-area .menu-right-area .lang-select {
    position: absolute;
    top: 2px;
    right: 64px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    z-index: 1001;
  }

  .header-menu-area .menu-right-area .lang-select .lang-img {
    display: none;
  }

  .header-menu-area .menu-right-area .lang-select .lang-option {
    position: static;
    width: 40px;
    min-width: 40px;
    margin: 0;
  }

  .header-menu-area .menu-right-area .lang-select .site-language-picker {
    width: 40px;
    min-width: 40px;
    height: 36px;
    font-size: 12px;
  }

  .header-menu-area .menu-right-area .mean-container a.meanmenu-reveal {
    right: 0 !important;
    top: 2px !important;
    z-index: 1002;
  }
}