/* ============================================================
   LANGUAGE TOGGLE — brcnlng (used on Arabic AND English pages)
   Neon capsule switch: dark recessed track, squircle knob with
   a glowing cyan outline and neon active text. Direction-
   agnostic: the active segment is always first in DOM order,
   and the knob anchors to inline-start, so it mirrors
   automatically in RTL and LTR layouts.
   Palette (strict): #5bc0de + #ffffff + #000000
   ============================================================ */

:root {
  --brcnlng-actions-gap: 0.6rem;
  --brcnlng-toggle-padding: 3px;
  --brcnlng-seg-min-width: 3.1rem;
  --brcnlng-seg-padding-y: 0.44rem;
  --brcnlng-radius-track: 999px;
  --brcnlng-radius-knob: 999px;
  --brcnlng-font-size: 0.72rem;
  --brcnlng-seg-letter-spacing: 0.12em;
  --brcnlng-track-bg: rgba(0, 0, 0, 0.55);
  --brcnlng-track-border-color: rgba(91, 192, 222, 0.28);
  --brcnlng-seg-color: rgba(255, 255, 255, 0.45);
  --brcnlng-seg-hover-color: #ffffff;
  --brcnlng-active-color: #eaf9ff;
  --brcnlng-knob-border-color: rgba(91, 192, 222, 0.9);
  --brcnlng-knob-glow-color: rgba(91, 192, 222, 0.35);
  --brcnlng-knob-glow-boost-color: rgba(91, 192, 222, 0.6);
  --brcnlng-neon-text-glow: 0 0 8px rgba(91, 192, 222, 0.8);
  --brcnlng-transition-duration: 0.25s;
  --brcnlng-transition-ease: ease;
}

/* Actions group: CTA + toggle + hamburger stay glued */
.brcnlng-actions {
  display: flex;
  align-items: center;
  gap: var(--brcnlng-actions-gap);
  flex-shrink: 0;
}

/* Recessed dark track */
.brcnlng-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: var(--brcnlng-toggle-padding);
  border-radius: var(--brcnlng-radius-track);
  background: var(--brcnlng-track-bg);
  border: 1px solid var(--brcnlng-track-border-color);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

/* Neon outline knob — always frames the first (active) segment */
.brcnlng-toggle::before {
  content: "";
  position: absolute;
  top: var(--brcnlng-toggle-padding);
  bottom: var(--brcnlng-toggle-padding);
  inset-inline-start: var(--brcnlng-toggle-padding);
  width: calc(50% - var(--brcnlng-toggle-padding));
  border-radius: var(--brcnlng-radius-knob);
  background: rgba(91, 192, 222, 0.08);
  border: 1.5px solid var(--brcnlng-knob-border-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              inset 0 0 10px rgba(91, 192, 222, 0.12),
              0 0 14px var(--brcnlng-knob-glow-color);
  pointer-events: none;
  transition: box-shadow var(--brcnlng-transition-duration) var(--brcnlng-transition-ease);
}

.brcnlng-toggle:has(a.brcnlng-opt:hover)::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              inset 0 0 10px rgba(91, 192, 222, 0.12),
              0 0 22px var(--brcnlng-knob-glow-boost-color);
}

/* Equal segments so the knob frames exactly one half */
.brcnlng-opt {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: var(--brcnlng-seg-min-width);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--brcnlng-seg-padding-y) 0.85rem;
  font-size: var(--brcnlng-font-size);
  font-weight: 800;
  letter-spacing: var(--brcnlng-seg-letter-spacing);
  line-height: 1;
  color: var(--brcnlng-seg-color);
  white-space: nowrap;
}

a.brcnlng-opt {
  transition: color var(--brcnlng-transition-duration) var(--brcnlng-transition-ease);
}

a.brcnlng-opt:hover {
  color: var(--brcnlng-seg-hover-color);
}

.brcnlng-opt.brcnlng-active {
  color: var(--brcnlng-active-color);
  text-shadow: var(--brcnlng-neon-text-glow);
}

/* Compact on small phones so logo + toggle + hamburger always fit */
@media (max-width: 480px) {
  .brcnlng-opt {
    min-width: 2.7rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.68rem;
  }
}