/* Enhanced Language Switcher Styles */

/* Main language selector container - consistent size */
#language-selector {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 10;
  isolation: isolate;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: white !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  border-radius: 0.5rem !important;
  width: 120px !important;
  height: 40px !important;
  min-width: 120px !important;
  min-height: 40px !important;
  max-width: 120px !important;
  max-height: 40px !important;
  contain: layout style paint;
}

#language-selector:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Language option buttons - consistent dimensions */
#th-option, #en-option {
  position: relative;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 11;
  background-clip: padding-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0.375rem 1rem !important;
  width: 60px !important;
  height: 40px !important;
  min-width: 60px !important;
  min-height: 40px !important;
  max-width: 60px !important;
  max-height: 40px !important;
  flex: 0 0 60px !important;
  contain: layout style;
  box-sizing: border-box !important;
}

/* Text sizing consistency */
#th-text, #en-text {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: normal !important;
  white-space: nowrap !important;
  width: auto !important;
  text-align: center !important;
}

/* Smooth gradient animation */
#th-option.active, #en-option.active {
  background: linear-gradient(135deg, #8147B5 0%, #1585B9 100%);
  animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% {
    background: linear-gradient(135deg, #8147B5 0%, #1585B9 100%);
  }
  50% {
    background: linear-gradient(135deg, #9158C6 0%, #2696CA 100%);
  }
}

/* Ripple effect on click - contained within button */
#th-option::before, #en-option::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

#th-option:active::before, #en-option:active::before {
  width: 100px;
  height: 100px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wrapper div for EN option - maintain consistent sizing */
#language-selector > div {
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}

/* Hover states for inactive options */
#th-option:not(.active):hover, #en-option:not(.active):hover {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(1.02);
}

#th-option:not(.active):hover #th-text,
#en-option:not(.active):hover #en-text {
  color: #6b7280;
  transform: translateY(-1px);
}

/* Active state enhancements */
.language-active {
  box-shadow: 
    0 4px 14px rgba(129, 71, 181, 0.3),
    0 2px 8px rgba(21, 133, 185, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Smooth focus states for accessibility */
#th-option:focus, #en-option:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(129, 71, 181, 0.3);
}

/* Pulse animation for active state */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(129, 71, 181, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(129, 71, 181, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(129, 71, 181, 0);
  }
}

.language-pulse {
  animation: pulse 1.5s ease-out;
}

/* Smoother transform transitions */
.smooth-transform {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Enhanced shadow for depth - contained */
.enhanced-shadow {
  box-shadow: 
    0 4px 12px rgba(129, 71, 181, 0.2),
    0 2px 6px rgba(21, 133, 185, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: inherit;
}

/* Gradient animation for text */
.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Prevent background overflow and ensure proper containment */
#language-selector * {
  box-sizing: border-box;
}

#language-selector::before,
#language-selector::after {
  display: none !important;
}

/* Ensure no pseudo-elements extend beyond container */
#th-option::after, #en-option::after {
  display: none !important;
}

/* Force proper layout containment */
.bg-white {
  background-color: white !important;
  background-clip: padding-box !important;
}

/* Language button states with consistent sizing */
.language-btn {
  width: 60px !important;
  height: 40px !important;
  min-width: 60px !important;
  min-height: 40px !important;
  max-width: 60px !important;
  max-height: 40px !important;
  padding: 0.375rem 1rem !important;
  box-sizing: border-box !important;
  flex: 0 0 60px !important;
}

.active-lang {
  background: linear-gradient(135deg, #8147B5 0%, #1585B9 100%) !important;
  border-radius: 0.375rem !important;
}

.inactive-lang {
  background: transparent !important;
}

/* Override any global styles that might cause overflow */
#language-selector,
#language-selector > *,
#language-selector > * > * {
  overflow: visible !important;
  position: relative !important;
}