/*
 * KEIKO language switch - a round flag per language, the one in use ringed in mint with a soft
 * glow, the others dimmed until hovered. The same everywhere: the home page, sign in, the
 * registration wizard and the admin system (partials/langflags).
 */

.kx-flags {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.kx-flags a {
    display: inline-flex;
    padding: 2px;
    border-radius: 50%;
    border: 2px solid transparent;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.kx-flags a:hover,
.kx-flags a:focus-visible {
    opacity: 1;
}

.kx-flags a.is-active {
    opacity: 1;
    border-color: #3cd2a5;
    box-shadow: 0 0 14px -2px rgba(60, 210, 165, 0.55);
}

.kx-flags img {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
}

/* a little bigger where it is the only thing to tap (the phone bar on the home page) */
.kx-flags.is-large img {
    width: 1.85rem;
    height: 1.85rem;
}