/* WP Lang Switcher — orientiert an moderner, minimalistischer Jobportal-UI (LuxJobs) */
/* Design via CSS-Variablen fein anpassbar */
:root{
  --wpls-radius: 10px;
  --wpls-gap: .5rem;
  --wpls-pad-y: .5rem;
  --wpls-pad-x: .8rem;
  --wpls-font: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;

  /* Farben (leicht an LuxJobs-typische UI angelehnt: neutral + Akzent) */
  --wpls-fg: #0F172A;            /* Text */
  --wpls-fg-muted:#475569;       /* Sekundärtext */
  --wpls-border:#E2E8F0;         /* Rahmen */
  --wpls-bg:#FFFFFF;             /* Fläche */
  --wpls-soft:#F8FAFC;           /* Soft-Hintergrund */
  --wpls-accent:#22C55E;         /* Akzent (grünlich) */
  --wpls-accent-contrast:#062e12;
  --wpls-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.06);
}

.wpls{
  display:flex;
  flex-wrap:wrap;
  gap: var(--wpls-gap);
  font-family: var(--wpls-font);
  align-items:center;
}

.wpls.align-center{ justify-content:center; }
.wpls.align-end{ justify-content:flex-end; }

.wpls .wpls-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius: var(--wpls-radius);
  padding: var(--wpls-pad-y) var(--wpls-pad-x);
  text-decoration:none;
  border:1px solid var(--wpls-border);
  background: var(--wpls-soft);
  color: var(--wpls-fg);
  box-shadow: 0 0 #0000;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  line-height:1.2;
}

.wpls .wpls-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--wpls-shadow);
  border-color:#cbd5e1;
  background: #fff;
}

.wpls .wpls-btn.is-active{
  border-color: color-mix(in srgb, var(--wpls-accent), #000 10%);
  background: color-mix(in srgb, var(--wpls-accent) 12%, #fff);
  color: var(--wpls-accent-contrast);
}

.wpls.variant-solid .wpls-btn{
  background: var(--wpls-bg);
}
.wpls.variant-solid .wpls-btn.is-active{
  background: var(--wpls-accent);
  color:#fff;
  border-color: var(--wpls-accent);
}

.wpls.variant-ghost .wpls-btn{
  background: transparent;
}

.wpls .wpls-flag{
  width: 1.15em;
  height: 1.15em;
  display:inline-block;
  line-height:0;
}
.wpls .wpls-flag svg{
  width:100%; height:100%; display:block; border-radius: 3px; overflow:hidden;
}

.wpls.size-sm .wpls-btn{ padding: .35rem .55rem; font-size:.9rem; }
.wpls.size-lg .wpls-btn{ padding: .7rem 1rem; font-size:1.05rem; }

/* Dropdown Variante */
.wpls-switcher select{
  font: inherit;
  border:1px solid var(--wpls-border);
  padding:.5rem .6rem;
  border-radius: var(--wpls-radius);
  background: var(--wpls-bg);
  color: var(--wpls-fg);
}

@media (prefers-color-scheme: dark){
  :root{
    --wpls-fg:#E5E7EB;
    --wpls-fg-muted:#9CA3AF;
    --wpls-border:#2A2F3A;
    --wpls-bg:#0B1220;
    --wpls-soft:#101827;
    --wpls-accent:#22C55E;
    --wpls-accent-contrast:#dcfce7;
    --wpls-shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.35);
  }
  .wpls .wpls-btn:hover{ background:#0f172a; }
  .wpls-switcher select{ background:#0f172a; }
}

/* Utility: verstecke Labels, wenn labels="0" verwendet wird (optional via Custom CSS) */
.wpls .wpls-label.sr-only{ position:absolute; left:-9999px; }