/* ================================================
   Language Switcher Component
   Visual menu with flags and language labels
   ================================================ */

.language-switcher {
    position: relative;
    z-index: var(--z-index-dropdown);
    margin-left: var(--space-4);
}

.current-language {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
    min-width: 80px;
}

.current-language:hover,
.current-language:focus {
    border-color: var(--color-brand-primary);
    background: var(--color-neutral-100);
    color: var(--color-brand-primary);
    outline: none;
}

.current-language:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.current-language .chevron-down {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
    fill: currentColor;
}

.current-language[aria-expanded="true"] .chevron-down {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    margin: 0;
    padding: var(--space-2);
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);
}

.language-menu:not([hidden]) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-neutral-700);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
}

.lang-option:hover,
.lang-option:focus {
    background: var(--color-neutral-100);
    color: var(--color-brand-primary);
    outline: none;
}

.lang-option:active {
    background: var(--color-neutral-200);
}

.lang-option.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.flag-icon {
    width: 24px;
    height: 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.flag-icon.flag-en {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect fill='%23012169' width='60' height='40'/%3E%3Cpath fill='%23fff' d='M0 0h60v4h-60zm0 8h60v4h-60zm0 8h60v4h-60zm0 8h60v4h-60zm0 8h60v4h-60z'/%3E%3Cpath fill='%23C8102E' d='M0 0h24v16h-24z'/%3E%3Cpath fill='%23fff' d='M4 8l8-3 8 3-8 3z' fill-rule='evenodd'/%3E%3Cpath fill='%23C8102E' d='M12 2l2.5 7.5h-5z' fill-rule='evenodd'/%3E%3Cpath stroke='%23012169' stroke-width='0.5' d='M12 2l2.5 7.5h-5z'/%3E%3C/svg%3E");
}

.flag-icon.flag-de {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect fill='%23000' width='60' height='13.33'/%3E%3Crect fill='%23D00' y='13.33' width='60' height='13.33'/%3E%3Crect fill='%23FFCE00' y='26.66' width='60' height='13.33'/%3E%3C/svg%3E");
}

.flag-icon.flag-es {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect fill='%23AA151B' width='60' height='40'/%3E%3Crect fill='%23F1BF00' y='10' width='60' height='20'/%3E%3C/svg%3E");
}

.flag-icon.flag-fr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect fill='%2300255C' width='20' height='40'/%3E%3Crect fill='%23FFF' x='20' width='20' height='40'/%3E%3Crect fill='%23EF4135' x='40' width='20' height='40'/%3E%3C/svg%3E");
}

.flag-icon.flag-it {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect fill='%23009246' width='20' height='40'/%3E%3Crect fill='%23FFF' x='20' width='20' height='40'/%3E%3Crect fill='%23CE2B37' x='40' width='20' height='40'/%3E%3C/svg%3E");
}

.flag-icon.flag-zh {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 60'%3E%3Crect fill='%23DE2910' width='90' height='60'/%3E%3Cpath fill='%23FFDE00' d='M12.5 8.5l2.5 7.5h-5l-2.5-7.5z'/%3E%3Cpath fill='%23FFDE00' d='M8.5 22l9-3.5-6.5 6.5v-9l-6.5 6.5 4-3.5z'/%3E%3Cpath fill='%23FFDE00' d='M23.5 12l-8 5.5 2-8.5 6 3z'/%3E%3Cpath fill='%23FFDE00' d='M16.5 27l3.5-9h7l-7 5.5z'/%3E%3Cpath fill='%23FFDE00' d='M5.5 15l6.5 2.5-2 7-4.5-9.5z'/%3E%3C/svg%3E");
}

.flag-icon.flag-he {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23FFFFFF'/%3E%3Crect y='5' width='60' height='4' fill='%23003F87'/%3E%3Crect y='31' width='60' height='4' fill='%23003F87'/%3E%3Cpath d='M30 13l6 10H24z' fill='none' stroke='%23003F87' stroke-width='2'/%3E%3Cpath d='M30 27l-6-10h12z' fill='none' stroke='%23003F87' stroke-width='2'/%3E%3C/svg%3E");
}

.flag-icon.flag-ar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='13.33' fill='%23007A3D'/%3E%3Crect y='13.33' width='60' height='13.33' fill='%23FFFFFF'/%3E%3Crect y='26.66' width='60' height='13.34' fill='%23000000'/%3E%3Cpolygon points='0,0 18,6.66 18,33.33 0,40' fill='%23CE1126'/%3E%3C/svg%3E");
}

.flag-icon.flag-bn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23006A4E'/%3E%3Ccircle cx='28' cy='20' r='10' fill='%23F42A41'/%3E%3C/svg%3E");
}

.flag-icon.flag-pt-br {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%2300923F'/%3E%3Cpolygon points='30,6 54,20 30,34 6,20' fill='%23FEDD00'/%3E%3Ccircle cx='30' cy='20' r='7' fill='%23002776'/%3E%3C/svg%3E");
}

.flag-icon.flag-ru {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='13.33' fill='%23FFFFFF'/%3E%3Crect y='13.33' width='60' height='13.33' fill='%230039A6'/%3E%3Crect y='26.66' width='60' height='13.34' fill='%23D52B1E'/%3E%3C/svg%3E");
}

.flag-icon.flag-ja {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23FFFFFF'/%3E%3Ccircle cx='30' cy='20' r='10' fill='%23BC002D'/%3E%3C/svg%3E");
}

.lang-name {
    font-weight: var(--font-weight-medium);
}

.lang-code {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.current-language .lang-code {
    font-size: var(--font-size-sm);
}

/* Toast notification for missing translations */
.language-toast {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    padding: var(--space-4);
    background: var(--color-neutral-900);
    color: var(--color-neutral-0);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-index-tooltip);
    max-width: 400px;
    animation: toastSlideIn var(--transition-base);
}

@keyframes toastSlideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.language-toast.hiding {
    animation: toastSlideOut var(--transition-base) forwards;
}

@keyframes toastSlideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

.language-toast-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-base);
}

.language-toast-message {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-300);
    line-height: var(--line-height-base);
}

/* Responsive styles */
@media (max-width: 768px) {
    .language-switcher {
        margin-left: 0;
        margin-top: var(--space-3);
    }

    .language-menu {
        left: 0;
        right: 0;
        min-width: 100%;
    }
}

/* Loading state */
.current-language.loading {
    opacity: 0.7;
    pointer-events: none;
}

.current-language.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    margin-left: var(--space-2);
    border: 2px solid var(--color-neutral-200);
    border-top-color: var(--color-brand-primary);
    border-radius: 50%;
    animation: languageSpinner 0.6s linear infinite;
}

@keyframes languageSpinner {
    to {
        transform: rotate(360deg);
    }
}