/* ==============================================================
   SUFFAYA — Styles i18n (Switcher de langue)
   ============================================================== */

.lang-switcher {
    position: relative;
}

.lang-switcher-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.lang-switcher-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
}

.lang-switcher-current {
    font-size: var(--font-size-xs);
    letter-spacing: 0.5px;
}

.lang-switcher-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: var(--z-dropdown);
    overflow: hidden;
    animation: dropdown-in 0.15s ease-out;
}

html[dir="rtl"] .lang-switcher-dropdown {
    right: auto;
    left: 0;
}

.lang-switcher-dropdown.open {
    display: block;
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.lang-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-gray-100);
}

.lang-option:last-child {
    border-bottom: none;
}

.lang-option:hover {
    background: var(--color-gray-50);
}

.lang-option.active {
    background: var(--color-primary-50);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.lang-option-code {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-400);
    min-width: 22px;
}

.lang-option.active .lang-option-code {
    color: var(--color-primary);
}

.lang-option-name {
    flex: 1;
}