/* Shared language choice for public, account and creator headers. */
.header-language-switch {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--warm-white, #fff7ed);
  font-family: "Rubik", Arial, sans-serif;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.5;
}
.header-language-switch > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 247, 237, .45);
  border-radius: 12px;
  color: var(--warm-white, #fff7ed);
  background: #332943;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.header-language-switch > summary::marker { content: ""; }
.header-language-switch > summary::-webkit-details-marker { display: none; }
.header-language-switch > summary:hover,
.header-language-switch[open] > summary { background: #42384f; border-color: #b4a9bd; }
.header-language-switch > summary:focus-visible {
  outline: 3px solid #79d5df;
  outline-offset: 3px;
}
.header-language-switch .language-globe {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.header-language-switch .language-chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.header-language-switch[open] .language-chevron { transform: translateY(2px) rotate(225deg); }
.header-language-switch .language-options {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 150;
  width: 200px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid #d9d2df;
  border-radius: 14px;
  background: #fff;
  color: var(--aubergine, #281e3b);
  box-shadow: 0 12px 36px rgba(23, 14, 34, .2);
}
.header-language-switch .language-options a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #463b54;
  font-size: .875rem;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  font-weight: 550;
}
.header-language-switch .language-options a[hidden] { display: none; }
.header-language-switch .language-options a::before {
  content: attr(data-language-code);
  width: 26px;
  flex: 0 0 26px;
  font-size: .75rem;
  font-weight: 750;
  color: #62556f;
}
.header-language-switch .language-options a:hover,
.header-language-switch .language-options a:focus-visible {
  background: #f3f0f6;
  color: #281e3b;
}
.header-language-switch .language-options a:focus-visible {
  outline: 2px solid #23727b;
  outline-offset: -2px;
  box-shadow: none;
}
.header-language-switch .language-options a[aria-current="true"],
.header-language-switch .language-options a[aria-current="page"],
.header-language-switch .language-options a[aria-current="true"]:hover,
.header-language-switch .language-options a[aria-current="page"]:hover {
  background: #edf7f5;
  color: #196c5c;
  font-weight: 700;
}
.header-language-switch .language-options a[aria-current="true"]::after,
.header-language-switch .language-options a[aria-current="page"]::after {
  content: "✓";
  margin-left: auto;
  font-size: .875rem;
}
.header-language-indicator {
  margin-left: auto;
  min-width: 46px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 247, 237, .45);
  border-radius: 11px;
  color: #fff7ed;
  font-size: .875rem;
  font-weight: 750;
}

.language-handoff,
.language-handoff-notice {
  box-sizing: border-box;
  width: min(460px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid #d9d2df;
  border-radius: 18px;
  background: #fff7ed;
  color: #281e3b;
  font-family: "Rubik", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: anywhere;
}
.language-handoff {
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(23, 14, 34, .3);
}
.language-handoff::backdrop { background: rgba(23, 14, 34, .62); }
.language-handoff-notice { margin: 20px auto; }
.language-handoff h2,
.language-handoff-notice h2 {
  margin: 0 0 12px;
  color: #281e3b;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.language-handoff p,
.language-handoff-notice p { margin: 0 0 18px; color: #463b54; font-size: 1rem; }
.language-handoff-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.language-handoff-actions a,
.language-handoff-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #281e3b;
  border-radius: 10px;
  background: #281e3b;
  color: #fff7ed;
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.language-handoff-actions button { background: #fff7ed; color: #281e3b; }
.language-handoff-actions a:hover { background: #3b3050; color: #fff7ed; }
.language-handoff-actions button:hover { background: #eee8f2; color: #281e3b; }
.language-handoff-actions a:focus-visible,
.language-handoff-actions button:focus-visible {
  outline: 3px solid #23727b;
  outline-offset: 3px;
  box-shadow: none;
}
@media (max-width: 400px) {
  .header-language-switch > summary { min-width: 80px; padding-inline: 9px; gap: 6px; }
  .language-handoff,
  .language-handoff-notice { padding: 22px; }
}
