/* SYSTEMS-STUDIO-LANGUAGE-SWITCHER */

.ss-language-switcher {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
  z-index: 10000;
  font-family: Arial, Helvetica, sans-serif;
}

.ss-language-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 72px;
  min-height: 38px;
  padding: 8px 13px;

  border: 1px solid rgba(57,255,90,.66);
  border-radius: 10px;
  background: rgba(1,7,20,.90);

  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;

  transition:
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.ss-language-button:hover,
.ss-language-button:focus-visible,
.ss-language-switcher.is-open .ss-language-button {
  color: #39ff5a;
  border-color: #39ff5a;
  background: rgba(1,10,22,.98);
  box-shadow:
    0 0 8px rgba(57,255,90,.30),
    0 0 18px rgba(57,255,90,.16);
  outline: none;
}

.ss-language-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform .18s ease;
}

.ss-language-switcher.is-open .ss-language-arrow {
  transform: rotate(180deg);
}

.ss-language-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;

  display: none;
  width: 168px;
  padding: 8px;

  border: 1px solid rgba(57,255,90,.50);
  border-radius: 12px;
  background: rgba(1,7,20,.98);

  box-shadow:
    0 16px 34px rgba(0,0,0,.48),
    0 0 20px rgba(57,255,90,.12);

  backdrop-filter: blur(8px);
}

.ss-language-switcher.is-open .ss-language-menu {
  display: block;
}

.ss-language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;

  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.ss-language-option:hover,
.ss-language-option:focus-visible {
  color: #39ff5a;
  background: rgba(57,255,90,.09);
  outline: none;
}

.ss-language-option.is-current {
  color: #39ff5a;
  background: rgba(57,255,90,.07);
}

.ss-language-code {
  color: #39ff5a;
  font-size: 11px;
  letter-spacing: .08em;
}

@media (max-width: 900px) {
  .ss-language-switcher {
    width: 100%;
    margin: 12px 0 0;
  }

  .ss-language-button {
    width: 100%;
    justify-content: space-between;
  }

  .ss-language-menu {
    position: static;
    width: 100%;
    margin-top: 7px;
  }
}

/* LANGUAGE MENU FINAL SPACING */
.ss-language-menu {
  top: calc(100% + 12px);
  width: 156px;
}

.ss-language-option {
  padding: 10px 11px;
}