.nav-language-switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  min-width: 148px;
  height: 64px;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  color: #fff7f4;
  cursor: pointer;
}

.nav-language-switch::before,
.nav-language-switch::after {
  content: none;
}

.nav-language-switch .flag-language-switch__group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 148px;
  height: 64px;
  padding: 10px 62px 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(24, 56, 99, 0.98), rgba(35, 85, 142, 0.94)),
    radial-gradient(circle at 78% 50%, rgba(255, 255, 255, 0.18), transparent 42%);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 1px 1px 4px rgba(255, 255, 255, 0.16),
    inset -1px -1px 8px rgba(4, 20, 40, 0.3),
    0 12px 28px rgba(20, 20, 20, 0.1),
    0 0 24px rgba(47, 128, 201, 0.22);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.nav-language-switch .flag-language-switch__group::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  clip-path: inset(0 0 0 0 round 999px);
  background: linear-gradient(135deg, #183863, #2f80c9);
  box-shadow:
    0 0 0 0 inset rgba(5, 15, 35, 0.1),
    -0.05em -0.05em 0.05em 0 inset rgba(4, 20, 40, 0.28),
    0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.13),
    0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 0.42),
    0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.16),
    -0.075em -0.25em 0.25em 0.1em inset rgba(4, 20, 40, 0.28);
  transition: box-shadow 300ms ease, clip-path 250ms ease, transform 250ms ease;
}

.nav-language-switch .flag-language-switch__group::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: inherit;
  background: linear-gradient(-135deg, rgba(5, 5, 5, 0.34), transparent 22%, transparent 100%);
  filter: blur(0.0125em);
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.nav-language-switch:hover {
  transform: translateY(-2px);
}

.nav-language-switch:hover .flag-language-switch__group::before {
  clip-path: inset(1px 1px 1px 1px round 999px);
  box-shadow:
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.26),
    -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.18),
    0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.14),
    0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.12),
    0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.18),
    -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.16);
}

.nav-language-switch:active .flag-language-switch__group {
  transform: scale(0.975);
}

.nav-language-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-language-switch .flag-language-switch__option {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  padding: 12px 22px 10px 24px;
  border-radius: 50%;
  overflow: visible;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  z-index: 2;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.9, 0.24, 1);
}

.nav-language-switch .flag-language-switch__option img {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 64px;
  height: 64px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 247, 244, 0.92);
  box-shadow:
    0 6px 14px rgba(20, 20, 20, 0.18),
    0 0 14px rgba(255, 255, 255, 0.18);
  transform: translateY(-50%);
  z-index: 1;
}

.nav-language-switch .flag-language-switch__label {
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1;
  color: #fff7f4;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
  position: relative;
  z-index: 3;
}

.nav-language-switch .flag-language-switch__code {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 800;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  color: rgba(255, 244, 244, 0.78);
  position: relative;
  z-index: 3;
}

.nav-language-switch.is-language-de #app-lang-wheel-de + .flag-language-switch__option,
.nav-language-switch.is-language-en #app-lang-wheel-en + .flag-language-switch__option,
.nav-language-switch.is-language-pt #app-lang-wheel-pt + .flag-language-switch__option,
.nav-language-switch.is-language-hr #app-lang-wheel-hr + .flag-language-switch__option,
.nav-language-switch.is-language-es #app-lang-wheel-es + .flag-language-switch__option,
.nav-language-switch.is-language-tr #app-lang-wheel-tr + .flag-language-switch__option {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.nav-language-switch .next-trigger {
  position: absolute;
  inset: 0;
  z-index: 30;
  cursor: pointer;
}

.nav-language-switch.is-language-de #app-trigger-for-de,
.nav-language-switch.is-language-en #app-trigger-for-en,
.nav-language-switch.is-language-pt #app-trigger-for-pt,
.nav-language-switch.is-language-hr #app-trigger-for-hr,
.nav-language-switch.is-language-es #app-trigger-for-es,
.nav-language-switch.is-language-tr #app-trigger-for-tr {
  display: block;
}

.nav-language-switch:not(.is-language-de) #app-trigger-for-de,
.nav-language-switch:not(.is-language-en) #app-trigger-for-en,
.nav-language-switch:not(.is-language-pt) #app-trigger-for-pt,
.nav-language-switch:not(.is-language-hr) #app-trigger-for-hr,
.nav-language-switch:not(.is-language-es) #app-trigger-for-es,
.nav-language-switch:not(.is-language-tr) #app-trigger-for-tr {
  display: none;
}