/* Language Switcher Component */
.ai-language-switcher {
    display: flex;
    gap: var(--ai-spacing-xs);
    background: var(--ai-bg);
    border: 1px solid var(--ai-border);
    border-radius: var(--ai-radius-md);
    padding: var(--ai-spacing-xs);
    box-shadow: var(--ai-shadow-sm);
}

.ai-lang-btn {
    display: flex;
    align-items: center;
    gap: var(--ai-spacing-xs);
    padding: var(--ai-spacing-xs);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ai-radius-sm);
    color: var(--ai-text-light);
    cursor: pointer;
    transition: all var(--ai-transition-fast);
    font-size: var(--ai-font-size-xs);
    font-weight: var(--ai-font-weight-medium);
    white-space: nowrap;
    min-width: auto;
}

.ai-lang-btn:hover {
    background: var(--ai-bg-light);
    color: var(--ai-text);
    border-color: var(--ai-border);
}

.ai-lang-btn.active {
    background: var(--ai-primary);
    color: white;
    border-color: var(--ai-primary);
}

.ai-lang-btn.active:hover {
    background: var(--ai-primary-dark);
    border-color: var(--ai-primary-dark);
}

/* Language switcher in header */
.ai-header .ai-language-switcher {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.ai-header .ai-lang-btn {
    background: var(--ai-bg-light);
    border: 1px solid var(--ai-border);
    font-size: var(--ai-font-size-xs);
    padding: var(--ai-spacing-xs);
}

.ai-header .ai-lang-btn:hover {
    background: var(--ai-bg);
    border-color: var(--ai-primary);
}

.ai-header .ai-lang-btn.active {
    background: var(--ai-primary);
    color: white;
    border-color: var(--ai-primary);
}

/* Language switcher in footer */
.ai-footer .ai-language-switcher {
    background: var(--ai-bg-dark);
    border-color: var(--ai-border-dark);
}

.ai-footer .ai-lang-btn {
    background: var(--ai-bg);
    border-color: var(--ai-border);
    color: var(--ai-text);
}

.ai-footer .ai-lang-btn:hover {
    background: var(--ai-bg-light);
    border-color: var(--ai-primary);
}

.ai-footer .ai-lang-btn.active {
    background: var(--ai-primary);
    color: white;
    border-color: var(--ai-primary);
}

/* Fixed position (top-right) */
.ai-language-switcher.fixed {
    position: fixed;
    top: var(--ai-spacing-sm);
    right: var(--ai-spacing-sm);
    z-index: 1001;
    background: var(--ai-bg);
    border: 1px solid var(--ai-border);
    box-shadow: var(--ai-shadow-md);
    padding: var(--ai-spacing-xs);
    gap: var(--ai-spacing-xs);
}

/* Responsive design */
@media (max-width: 768px) {
    .ai-language-switcher {
        gap: var(--ai-spacing-xs);
        padding: var(--ai-spacing-xs);
    }
    
    .ai-lang-btn {
        padding: var(--ai-spacing-xs);
        font-size: var(--ai-font-size-xs);
    }
    
    .ai-language-switcher.fixed {
        top: var(--ai-spacing-sm);
        right: var(--ai-spacing-sm);
    }
}

/* Language-specific styles */
.ai-lang-vi {
    /* Vietnamese specific styles if needed */
}

.ai-lang-en {
    /* English specific styles if needed */
}

/* Animation for language switching */
.ai-lang-btn {
    transition: all var(--ai-transition-normal);
}

.ai-lang-btn:active {
    transform: scale(0.95);
}

/* Accessibility */
.ai-lang-btn:focus {
    outline: 2px solid var(--ai-primary);
    outline-offset: 2px;
}

.ai-lang-btn:focus:not(:focus-visible) {
    outline: none;
}

/* Print styles */
@media print {
    .ai-language-switcher {
        display: none;
    }
}