/* =============================================================
   Language Switcher — gold-themed for GoldenIPTV Pro
   Adapted from design parts/multi-lang/styles.css
   ============================================================= */

:root {
  --ls-accent:        #eab308;
  --ls-accent-text:   #0a0a0a;
  --ls-bg:            rgba(14, 14, 16, 0.94);
  --ls-bg-solid:      #0e0e10;
  --ls-bg-blur:       22px;
  --ls-border:        rgba(255, 255, 255, 0.10);
  --ls-text:          #f3f4f6;
  --ls-text-muted:    #8a93a0;
  --ls-row-hover:     rgba(255, 255, 255, 0.06);
  --ls-row-bg:        transparent;
  --ls-code-bg:       rgba(255, 255, 255, 0.05);
  --ls-code-text:     #d1d5db;
  --ls-trigger-bg:    rgba(255, 255, 255, 0.04);
  --ls-trigger-border:rgba(255, 255, 255, 0.12);
  --ls-shadow:        0 24px 64px -16px rgba(0, 0, 0, 0.7),
                      0 8px 24px -8px rgba(234, 179, 8, 0.18);
  --ls-radius:        18px;
  --ls-radius-row:    12px;
  --ls-radius-pill:   999px;
  --ls-font:          'Inter', system-ui, -apple-system, "Noto Sans", sans-serif;
}

.ls {
  position: relative;
  display: inline-block;
  font-family: var(--ls-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Trigger pill */
.ls-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px 0 14px;
  background: var(--ls-trigger-bg);
  color: var(--ls-text);
  border: 1px solid var(--ls-trigger-border);
  border-radius: var(--ls-radius-pill);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
  user-select: none;
}
.ls-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(234, 179, 8, 0.4);
}
.ls-trigger:active { transform: translateY(1px); }
.ls-trigger:focus-visible {
  outline: 2px solid var(--ls-accent);
  outline-offset: 2px;
}
.ls-trigger__code { font-variant-numeric: tabular-nums; }
.ls-trigger__caret {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  margin-top: 1px;
  transition: transform 180ms ease;
  opacity: 0.85;
}
.ls-trigger[aria-expanded="true"] .ls-trigger__caret { transform: rotate(180deg); color: var(--ls-accent); }

/* Panel */
.ls-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1000;
  width: min(calc(100vw - 24px), 460px);
  max-height: min(72vh, 560px);
  overflow-y: auto;
  padding: 10px;
  background: var(--ls-bg);
  -webkit-backdrop-filter: blur(var(--ls-bg-blur)) saturate(140%);
  backdrop-filter: blur(var(--ls-bg-blur)) saturate(140%);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-radius);
  box-shadow: var(--ls-shadow);
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.ls-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.ls-panel::-webkit-scrollbar { width: 6px; }
.ls-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
.ls-panel::-webkit-scrollbar-track { background: transparent; }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ls-panel { background: var(--ls-bg-solid); }
}

/* Grid + Rows */
.ls-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.ls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px 8px 8px;
  background: var(--ls-row-bg);
  color: var(--ls-text);
  border: none;
  border-radius: var(--ls-radius-row);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  user-select: none;
}
.ls-row:hover { background: var(--ls-row-hover); }
.ls-row:focus-visible {
  outline: none;
  background: var(--ls-row-hover);
  box-shadow: inset 0 0 0 1px var(--ls-accent);
}
.ls-row.is-active {
  background: var(--ls-accent);
  color: var(--ls-accent-text);
}
.ls-row.is-active .ls-row__code {
  background: rgba(0, 0, 0, 0.18);
  color: var(--ls-accent-text);
}
.ls-row.is-active:hover {
  background: var(--ls-accent);
  filter: brightness(1.05);
}

.ls-row__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 6px;
  background: var(--ls-code-bg);
  color: var(--ls-code-text);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: background 140ms ease, color 140ms ease;
}
.ls-row__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

@media (max-width: 520px) {
  .ls-panel { width: min(calc(100vw - 16px), 460px); right: 0; padding: 8px; }
  .ls-row { min-height: 48px; padding: 10px 12px 10px 8px; font-size: 14px; }
  .ls-row__code { min-width: 32px; height: 26px; font-size: 10.5px; }
}

/* Compact trigger when placed next to the mobile hamburger button. */
.ls-mobile-trigger-wrap .ls-trigger {
  height: 36px;
  padding: 0 10px 0 12px;
  background: rgba(234, 179, 8, .08);
  border-color: rgba(234, 179, 8, .35);
  color: #facc15;
  font-size: 12.5px;
}
.ls-mobile-trigger-wrap .ls-trigger:hover {
  background: rgba(234, 179, 8, .14);
  border-color: rgba(234, 179, 8, .55);
}

/* On phones, anchor the panel to the viewport edges instead of the trigger,
   otherwise it overflows the left edge because the trigger sits near the
   right of the navbar. Single column for readability. */
@media (max-width: 640px) {
  .ls-mobile-trigger-wrap .ls-panel {
    position: fixed;
    top: 76px;
    left: 10px;
    right: 10px;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: min(70vh, 540px);
    transform-origin: top right;
  }
  .ls-mobile-trigger-wrap .ls-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ls-mobile-trigger-wrap .ls-row {
    min-height: 50px;
    padding: 10px 14px 10px 10px;
  }
  .ls-mobile-trigger-wrap .ls-row__code {
    min-width: 36px;
    height: 28px;
  }
}
@media (max-width: 380px) {
  .ls-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-panel, .ls-trigger, .ls-trigger__caret, .ls-row, .ls-row__code { transition: none; }
}