/**
 * Guest topbar – mobile-only (language dropdown + login icon).
 * @author Kaido Mägi
 * @copyright 2026
 */

@media (max-width: 520px) {
    .topbar {
        padding: 10px 12px;
    }

    .topbar-logo-mark {
        display: inline-flex;
    }

    .topbar-nav {
        gap: 8px;
    }

    .topbar .lang-switch--buttons {
        display: none;
    }

    .topbar .topbar-lang-wrap {
        display: inline-flex;
        align-items: center;
    }

    .topbar .topbar-lang-select {
        margin: 0;
        height: 2rem;
        min-width: 3.25rem;
        line-height: 2rem;
        box-sizing: border-box;
        background: var(--field-bg-soft);
        color: var(--text-main);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xs);
        padding: 0 1.75rem 0 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2393a8bc' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.45rem center;
    }

    .topbar .topbar-lang-select:hover {
        border-color: var(--border-strong);
    }

    .topbar .topbar-lang-select:focus {
        outline: none;
        border-color: var(--accent-main);
        box-shadow: 0 0 0 2px var(--accent-glow);
    }

    .topbar .topbar-lang-select option {
        color: var(--text-main);
        background: var(--bg-main-2);
    }

    .topbar .topbar-link-login {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        min-width: 2.25rem;
        min-height: 2.25rem;
        box-sizing: border-box;
        border-radius: var(--radius-xs);
    }

    .topbar .topbar-link-login .topbar-link-text {
        display: none;
    }

    .topbar .topbar-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
        color: var(--text-main);
    }

    .topbar .topbar-link-register {
        display: none;
    }
}