/* One official GTranslate instance: desktop viewport edge, mobile header. */
.gt_switcher_wrapper {
  position: fixed !important;
  right: 84px !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  z-index: 900 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}

.gt_switcher_wrapper .gt_switcher {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gt_switcher_wrapper .gt_switcher a {
  touch-action: manipulation;
}

body.slp-consent-dialog-open .gt_switcher_wrapper {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 1024px) {
  .supei-hf-footer__bottom-links {
    margin-right: 280px;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .gt_switcher_wrapper {
    right: 16px !important;
    bottom: 72px !important;
  }
}

@media (max-width: 768px) {
  /* Replace the mobile browser/GTranslate dotted outline. The actual mobile
     controls receive a solid focus-visible treatment below. */
  .gt_switcher_wrapper .gt_switcher :focus {
    outline: 0 !important;
  }

  .gt_switcher_wrapper {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 2px) !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    /* The live header uses a 980 stacking layer on some templates. */
    z-index: 990 !important;
  }

  .gt_switcher_wrapper .gt_switcher {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    overflow: visible !important;
    line-height: normal !important;
    transition: none !important;
    animation: none !important;
  }

  .gt_switcher_wrapper .gt_switcher .gt_selected {
    width: 44px !important;
    height: 44px !important;
    border-radius: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .gt_switcher_wrapper .gt_switcher .gt_selected > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    padding: 0 12px 0 3px !important;
    overflow: visible !important;
    font-size: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    transition: none !important;
    animation: none !important;
    touch-action: manipulation;
  }

  .gt_switcher_wrapper .gt_switcher .gt_selected > a:focus-visible {
    box-shadow: none !important;
  }

  .gt_switcher_wrapper .gt_switcher .gt_selected > a img {
    width: 26px !important;
    height: 19px !important;
    flex: 0 0 26px !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
    border: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  .gt_switcher_wrapper .gt_switcher .gt_selected > a::after {
    position: absolute !important;
    top: 50% !important;
    right: 2px !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 5px solid #475569 !important;
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
    background: none !important;
    content: "" !important;
    transform: translateY(-35%) !important;
  }

  /* The desktop widget is configured to open upward. On mobile the option
     panel is anchored below the same trigger without changing GTranslate JS. */
  .gt_switcher_wrapper .gt_switcher .gt_option {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 184px !important;
    max-height: min(198px, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 58px)) !important;
    box-sizing: border-box !important;
    border: 1px solid #ccd2d8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18) !important;
    transition: none !important;
    animation: none !important;
    overscroll-behavior: contain;
    outline: 0 !important;
  }

  .gt_switcher_wrapper .gt_switcher .gt_option > a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    padding: 5px 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    border: 0 !important;
    outline: 0 !important;
  }

  .gt_switcher_wrapper .gt_switcher .gt_option > a img {
    width: 24px !important;
    height: 18px !important;
    flex: 0 0 24px !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    opacity: 1 !important;
  }

  .gt_switcher_wrapper .gt_switcher .gt_option > a:focus-visible {
    background: #eff6ff !important;
    box-shadow: inset 0 0 0 2px #1a56db !important;
  }

  body.supei-search-open .gt_switcher_wrapper,
  body.supei-menu-open .gt_switcher_wrapper,
  body.supei-cart-drawer-open .gt_switcher_wrapper,
  body.slp-consent-dialog-open .gt_switcher_wrapper {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}