/* Language Toggle Button with Flags */

.language-toggle-container {
  position: relative;
  display: inline-block;
}

.language-toggle-wrapper {
  position: relative;
  height: 44px;
  width: 88px;
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 22px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 300ms ease;
  cursor: pointer;
}

/* Border đồng bộ cho cả 2 trạng thái */
.language-toggle-wrapper.vietnamese-active {
  border: 2px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Toggle knob */
.language-toggle-knob {
  height: 36px;
  width: 36px;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  cursor: pointer;
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  will-change: transform;
}

/* When Vietnamese is active (checked), knob stays on left */
.language-toggle-wrapper.vietnamese-active .language-toggle-knob {
  transform: translateX(0) rotate(360deg);
  left: 4px;
}

/* When Vietnamese is NOT active (English), move knob to right */
/* Trượt hết hành trình: 88px (width) - 36px (knob) - 4px (right padding) - 4px (left padding) = 44px */
.language-toggle-wrapper:not(.vietnamese-active) .language-toggle-knob {
  transform: translateX(44px) rotate(0deg);
}

/* Show/hide flags based on state */
.language-toggle-wrapper:not(.vietnamese-active) .flag-vietnamese {
  display: none !important;
}

.language-toggle-wrapper:not(.vietnamese-active) .flag-american {
  display: block !important;
}

.language-toggle-wrapper.vietnamese-active .flag-vietnamese {
  display: block !important;
}

.language-toggle-wrapper.vietnamese-active .flag-american {
  display: none !important;
}

/* Flag images inside knob - căn giữa */
.language-toggle-knob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 50%;
  margin: 0;
  padding: 0;
}

/* Flag container - shows both flags on the track */

.language-toggle-flag {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 300ms ease;
}

/* Show active flag more prominently */
.language-toggle-wrapper:not(.vietnamese-active) .language-toggle-flag.american {
  opacity: 0.7;
}

.language-toggle-wrapper.vietnamese-active .language-toggle-flag.vietnamese {
  opacity: 0.7;
}

/* Hidden checkbox */
.language-toggle-checkbox {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .language-toggle-wrapper {
    height: 40px;
    width: 80px;
  }
  
  .language-toggle-knob {
    height: 32px;
    width: 32px;
    top: 2px;
  }
  
  /* Trượt hết hành trình cho mobile: 80px - 32px - 4px - 4px = 40px */
  .language-toggle-wrapper.vietnamese-active .language-toggle-knob {
    transform: translateX(0) rotate(360deg);
  }
  
  .language-toggle-wrapper:not(.vietnamese-active) .language-toggle-knob {
    transform: translateX(40px) rotate(0deg);
  }
}

