/* =====================================================================
   ALKEMIST TRANSLATOR — Frontend Language Switcher CSS v2.2
   ===================================================================== */

/* ── CSS custom properties (overridden by inline style from PHP) ─── */
:root {
  --alkt-sw: #6D28D9;
  --alkt-sw-rgb: 109, 40, 217;
  --alkt-sw-gap: 4px;
  --alkt-sw-text: inherit;
}

/* ── Flag icons sizing (flag-icons library) ─────────────────────── */
.alkt-flag.fi {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
  background-size: cover;
  background-position: center;
}

/* ── Inline styles (default / text / flags) ─────────────────────── */
.alkt-switcher {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

.alkt-switcher a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  color: inherit;
  border: 1.5px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}

/* Inter-item spacing for the flag-bearing styles (default / flags): a left
   margin on every item after the first, honouring the dashboard gap setting.
   These styles also carry a flag image per item, so they stay separated even
   where a page builder ignores this margin. */
.alkt-switcher--inline a + a,
.alkt-switcher--flags a + a {
  margin-left: var(--alkt-sw-gap, 4px);
}

.alkt-switcher a:hover {
  background: rgba(var(--alkt-sw-rgb, 109, 40, 217), .08);
  border-color: rgba(var(--alkt-sw-rgb, 109, 40, 217), .2);
  color: var(--alkt-sw, #6D28D9);
  text-decoration: none;
}

.alkt-switcher a.active {
  background: rgba(var(--alkt-sw-rgb, 109, 40, 217), .1);
  border-color: rgba(var(--alkt-sw-rgb, 109, 40, 217), .3);
  color: var(--alkt-sw, #6D28D9);
  font-weight: 700;
}

/* text-only: the spacing between codes is carried entirely by horizontal padding
   on the inner <span>, which is immune to the anchor margin/padding resets that
   page builders (Elementor) apply and that otherwise glue the codes together
   ("ITENDE"). The anchor's own horizontal padding is zeroed here so it can't add
   on top of the span padding and make each item too wide — the gap is therefore
   deterministic (2 × span padding) and compact regardless of theme. */
.alkt-switcher--text a {
  padding-left: 0;
  padding-right: 0;
}
.alkt-switcher--text .alkt-lang-code {
  display: inline-block;
  padding: 2px 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--alkt-sw-text, inherit);
}

/* flags-only: slightly larger flags */
.alkt-switcher--flags .alkt-flag.fi {
  width: 24px;
  height: 18px;
}
.alkt-switcher--flags a { padding: 4px 6px; }

.alkt-lang-code { font-size: 12px; font-weight: 600; }

/* ── Popup style ─────────────────────────────────────────────────── */
.alkt-switcher-popup {
  position: relative;
  display: inline-block;
}

/* Trigger button */
.alkt-popup__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
  font-family: inherit;
  white-space: nowrap;
}
.alkt-popup__trigger:hover {
  border-color: var(--alkt-sw, #6D28D9);
  box-shadow: 0 0 0 3px rgba(var(--alkt-sw-rgb, 109, 40, 217), .12);
  color: var(--alkt-sw, #6D28D9);
}
.alkt-popup__trigger svg:first-child {
  color: var(--alkt-sw, #6D28D9);
  flex-shrink: 0;
}

.alkt-popup__arrow {
  transition: transform .2s ease;
  margin-left: 2px;
}
.alkt-switcher-popup.alkt-popup--open .alkt-popup__arrow {
  transform: rotate(180deg);
}

/* Dropdown panel */
.alkt-popup__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(var(--alkt-sw-rgb, 109, 40, 217), .1);
  z-index: 9999;
  overflow: hidden;
  padding: 6px 0;

  /* Animation */
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.alkt-switcher-popup.alkt-popup--open .alkt-popup__panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.alkt-popup__panel[hidden] {
  display: none !important;
}

/* Language item inside popup */
.alkt-popup__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  color: #111827;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .14s;
  cursor: pointer;
  white-space: nowrap; /* prevents German (Deutsch) from wrapping */
}
.alkt-popup__item:hover {
  background: #F5F3FF;
  color: var(--alkt-sw, #6D28D9);
  text-decoration: none;
}
.alkt-popup__item--active {
  background: rgba(var(--alkt-sw-rgb, 109, 40, 217), .08);
  color: var(--alkt-sw, #6D28D9);
  font-weight: 700;
}

.alkt-popup__lang { flex: 1; min-width: 0; }
.alkt-popup__code { font-size: 11px; font-weight: 700; color: #9CA3AF;
                    letter-spacing: .5px; text-transform: uppercase; flex-shrink: 0; }
.alkt-popup__item--active .alkt-popup__code { color: var(--alkt-sw, #6D28D9); }
.alkt-popup__check { color: var(--alkt-sw, #6D28D9); flex-shrink: 0; }

/* Larger flags inside popup */
.alkt-popup__item .alkt-flag.fi {
  width: 22px;
  height: 16px;
}

/* Overlay for closing popup on outside click */
.alkt-popup-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: transparent;
}