/*
 * Language flag icons.
 *
 * The source PNGs in public/images/flags have inconsistent aspect ratios
 * (ar/de are 1:1, en is 1.90:1, es/fr/hi are ~1.5:1). Rendering them with
 * "height: auto" therefore produced flags of visibly different heights in the
 * language dropdown. Pin a fixed box and let object-fit normalise them.
 */
.lang-flag {
    width: 20px !important;
    height: 14px !important;
    min-width: 20px !important;
    object-fit: cover !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    border-radius: 0.25rem !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    vertical-align: middle !important;
}

/* The larger flag shown for the currently selected language in the navbar. */
.lang-flag-lg {
    width: 26px !important;
    height: 18px !important;
    min-width: 26px !important;
    border-radius: 0.25rem !important;
}