/* lang-switcher.css */
/* The container for your language switcher */
.lang-switcher {
  position: absolute;
  right: 20px;
  top: 10px;
}

/* Hide the native checkbox so we can fully style our toggle */
.lang-switcher input[type="checkbox"] {
  display: none;
}

/* The toggle switch container (background) */
.lang-switcher label {
  display: inline-block;
  width: 90px;
  height: 36px;
  background: #ddd;             /* background of toggle */
  border-radius: 18px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  overflow: hidden;            /* keeps flags/knob inside shape */
}

/* The sliding knob (partially transparent white) */
.lang-switcher label:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  transition: transform 0.3s ease;
  z-index: 2;
}

/* 
   Each flag is a circular container (28x28), always visible.
   We'll only apply a glow to whichever is selected.
*/
.lang-switcher .flag {
  position: absolute;
  top: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  pointer-events: none; 
  transition: box-shadow 0.3s ease;
  z-index: 3;   /* Above the knob to see the glow properly */
  overflow: hidden;
}

/* 
   If using <img>, ensure it is also forced circular:
     .flag img {
       width: 100%;
       height: 100%;
       border-radius: 50%;
       object-fit: cover;
     }
*/

/* Serbian on the left, English on the right. */

/* Default: UNCHECKED => Serbian glows, English no glow, knob slides right. */
.lang-switcher label:before {
  transform: translateX(54px); /* knob is on the RIGHT by default */
}

.lang-switcher .flag.sr {
  left: 4px;
  box-shadow: 0 0 8px 3px orange; /* Glow by default (unchecked) */
}
.lang-switcher .flag.en {
  right: 4px;
  box-shadow: none;               /* No glow by default (unchecked) */
}

/* When CHECKED => knob goes LEFT => English glows => Serbian no glow */
.lang-switcher input[type="checkbox"]:checked + label:before {
  transform: none; /* knob at left side */
}

.lang-switcher input[type="checkbox"]:checked + label .flag.sr {
  box-shadow: none;
}
.lang-switcher input[type="checkbox"]:checked + label .flag.en {
  box-shadow: 0 0 8px 3px orange;
}

/* Optional hover effect on the entire switch */
.lang-switcher label:hover {
  background: #ccc;
}