/* ============================================================
   lang-switcher.css — editorial language selector
   ------------------------------------------------------------
   Theme-aware: reads the page's own surface. Dangerous Street pages
   are dark by default; NEUN pages set data-dt-theme="light".
   Nothing here is decorative for its own sake.
   ============================================================ */

.ds-lang {
  --l-ink: #f2f0ec;
  --l-sub: #8a8580;
  --l-surface: rgba(13, 13, 13, .92);
  --l-line: rgba(255, 255, 255, .14);
  --l-hover: rgba(255, 255, 255, .06);
  --l-accent: #C9A87C;
  --l-dur: 240ms;
  --l-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  display: inline-block;
  font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
}

/* NEUN / any light surface */
:root[data-dt-theme="light"] .ds-lang,
.ds-lang[data-theme="light"] {
  --l-ink: #161512;
  --l-sub: #6E6E6A;
  --l-surface: rgba(251, 250, 247, .96);
  --l-line: rgba(22, 21, 18, .16);
  --l-hover: rgba(22, 21, 18, .05);
  --l-accent: #8A7A64;
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

/* Floating fallback placement: bottom-left, clear of cart + chat. */
.ds-lang--float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
}
@media (max-width: 768px) {
  .ds-lang--float { left: 14px; bottom: 14px; }
}

/* ---------- trigger: the current locale IS the control ---------- */
.ds-lang__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* 44px minimum touch target */
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  color: var(--l-ink);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--l-dur) var(--l-ease),
              background-color var(--l-dur) var(--l-ease);
}
.ds-lang__trigger:hover { border-color: var(--l-accent); }
.ds-lang__trigger:focus-visible {
  outline: 2px solid var(--l-accent);
  outline-offset: 2px;
}
.ds-lang__code {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1;
}
.ds-lang__chev {
  color: var(--l-sub);
  transition: transform var(--l-dur) var(--l-ease);
}
.ds-lang[data-open="true"] .ds-lang__chev { transform: rotate(180deg); }

/* ---------- list ---------- */
.ds-lang__list {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  min-width: 176px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 5px;
  display: flex;
  flex-direction: column;
  /* animate opacity/transform only */
  opacity: 0;
  transform: translateY(4px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--l-dur) var(--l-ease),
              transform var(--l-dur) var(--l-ease),
              visibility 0s linear var(--l-dur);
}
.ds-lang[data-open="true"] .ds-lang__list {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
/* When mounted in a header, open downward instead. */
[data-lang-slot] .ds-lang__list {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateY(-4px);
}
[data-lang-slot] .ds-lang[data-open="true"] .ds-lang__list { transform: translateY(0); }

/* ---------- options ---------- */
.ds-lang__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  color: var(--l-ink);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--l-dur) var(--l-ease);
}
.ds-lang__opt:hover { background: var(--l-hover); }
.ds-lang__opt:focus-visible {
  outline: 2px solid var(--l-accent);
  outline-offset: -2px;
}
.ds-lang__opt[aria-selected="true"] .ds-lang__opt-code { color: var(--l-accent); }
/* Selection is not conveyed by colour alone. */
.ds-lang__opt[aria-selected="true"]::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--l-accent);
  margin-left: auto;
  flex-shrink: 0;
}
.ds-lang__opt-code {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--l-sub);
  width: 22px;
  flex-shrink: 0;
}
.ds-lang__opt-name {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* Untranslated locales are shown, but never dressed up as finished. */
.ds-lang__opt[data-pending] .ds-lang__opt-name { color: var(--l-sub); }
.ds-lang__soon {
  margin-left: auto;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--l-sub);
  border: 1px solid var(--l-line);
  padding: 2px 5px;
  flex-shrink: 0;
}
.ds-lang__opt[aria-selected="true"] .ds-lang__soon { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .ds-lang__list,
  .ds-lang__chev,
  .ds-lang__trigger,
  .ds-lang__opt { transition: none !important; }
}

/* ============================================================
   Language suggestion — a quiet bar, never a takeover.
   No full-screen scrim, no countdown, no dark pattern.
   ============================================================ */
.ds-suggest {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 8px);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: min(560px, calc(100vw - 28px));
  padding: 14px 44px 14px 18px;
  background: rgba(13, 13, 13, .94);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #f2f0ec;
  font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms cubic-bezier(.22,.61,.36,1),
              transform 280ms cubic-bezier(.22,.61,.36,1),
              visibility 0s linear 280ms;
}
.ds-suggest[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
:root[data-dt-theme="light"] .ds-suggest {
  background: rgba(251, 250, 247, .96);
  border-color: rgba(22, 21, 18, .16);
  color: #161512;
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
}
.ds-suggest__msg {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
}
.ds-suggest__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ds-suggest__go,
.ds-suggest__stay {
  min-height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 240ms cubic-bezier(.22,.61,.36,1),
              border-color 240ms cubic-bezier(.22,.61,.36,1);
}
.ds-suggest__go {
  background: #C9A87C;
  border: 1px solid #C9A87C;
  color: #0a0a0a;
}
.ds-suggest__stay {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .24);
  color: inherit;
}
:root[data-dt-theme="light"] .ds-suggest__go { background: #1A1714; border-color: #1A1714; color: #F6F5F2; }
:root[data-dt-theme="light"] .ds-suggest__stay { border-color: rgba(22, 21, 18, .22); }
.ds-suggest__go:focus-visible,
.ds-suggest__stay:focus-visible,
.ds-suggest__x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ds-suggest__x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: .5;
  cursor: pointer;
  transition: opacity 240ms;
}
.ds-suggest__x:hover { opacity: 1; }

@media (max-width: 640px) {
  .ds-suggest {
    left: 14px; right: 14px; bottom: 14px;
    transform: translateY(8px);
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 16px 14px;
  }
  .ds-suggest[data-open="true"] { transform: translateY(0); }
  .ds-suggest__actions > * { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-suggest, .ds-suggest__go, .ds-suggest__stay, .ds-suggest__x { transition: none !important; }
}