/* Container & flags */
/* Make sure the container is a flexbox and centers items vertically */
.language-toggle {
  float: right;
  display: flex !important;
  align-items: center !important;
}

/* Force each <img> to be exactly 32×32px, crop to circle */
.language-toggle .flag {
  width: 32px !important;
  height: 32px !important;
  display: block !important;        /* so object-fit works predictably */
  border-radius: 50% !important;    /* make it a circle */
  object-fit: cover !important;      /* fill the circle, cropping as needed */
  flex-shrink: 0 !important;         /* never let it shrink smaller */
  margin: 0 !important;              /* remove any stray margins */
}

/* --- Toggle switch --- */
.language-toggle .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin: 0 12px;          /* a bit more breathing room around the switch */
}
.language-toggle .switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  cursor: pointer;
}
.language-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 12px;
  transition: background-color .3s;
}
.language-toggle .slider:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform .3s;
}
.language-toggle .switch input:checked + .slider {
  background-color: #666;
}
.language-toggle .switch input:checked + .slider:before {
  transform: translateX(26px);
}

/* Focus outline for accessibility */
.language-toggle .switch input:focus + .slider {
  box-shadow: 0 0 2px #666;
}

/* --- Language‐specific visibility --- */
.lang-en .text-en { display: block; }
.lang-en .text-ko { display: none; }
.lang-ko .text-en { display: none; }
.lang-ko .text-ko { display: block; }