.site-language { position: relative; color: #fff; }
.site-language summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #ffffff35;
  border-radius: 24px;
  background: #ffffff08;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-language summary::-webkit-details-marker { display: none; }
.site-language-dialog {
  position: fixed;
  inset: 0;
  width: min(440px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.site-language-dialog::backdrop { background: #090611b8; backdrop-filter: blur(5px); }
.site-language:not(.site-language-modal)[open] .site-language-dialog {
  display: block;
  position: absolute;
  inset: auto 0 auto auto;
  width: min(300px, 80vw);
  max-height: none;
  margin-top: 8px;
}
.site-language:not(.site-language-modal) .site-language-heading form { display: none; }
.site-language-panel { padding: clamp(18px, 5vw, 28px); }
.site-language-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.site-language-heading h2 { margin: 0; font-size: 22px; }
.site-language-heading button {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); color: inherit; background: var(--surface-soft);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.site-language .site-language-dialog ul {
  position: static;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  background: none;
  box-shadow: none;
}
.site-language a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  text-decoration: none;
}
.site-language a:is(:hover, :focus-visible, [aria-current]) { background: var(--accent-soft); }
.site-language a[aria-current] { box-shadow: inset 3px 0 var(--accent); }
.site-language-flag {
  display: inline-block;
  flex: 0 0 22px;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  font-size: 0;
  box-shadow: inset 0 0 0 1px #0002;
}
.site-language-flag[data-flag="fr"] { background: linear-gradient(90deg, #193774 33.33%, #fff 0 66.66%, #e84048 0); }
.site-language-flag[data-flag="it"] { background: linear-gradient(90deg, #16834a 33.33%, #fff 0 66.66%, #cf2838 0); }
.site-language-flag[data-flag="de"] { background: linear-gradient(#111 33.33%, #db282d 0 66.66%, #ffc82d 0); }
.site-language-flag[data-flag="en"] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%231b3169' d='M0 0h60v40H0z'/%3E%3Cpath stroke='white' stroke-width='8' d='m0 0 60 40M60 0 0 40'/%3E%3Cpath stroke='%23c9233c' stroke-width='3' d='m0 0 60 40M60 0 0 40'/%3E%3Cpath stroke='white' stroke-width='13' d='M30 0v40M0 20h60'/%3E%3Cpath stroke='%23c9233c' stroke-width='8' d='M30 0v40M0 20h60'/%3E%3C/svg%3E") center / cover;
}
@media (max-width: 560px) {
  .site-language summary { min-height: 40px; padding: 0 10px; }
  .site-language summary [lang] { display: none; }
}