/* Language Floating Button (common_language_floating_button)
   Fixed switcher linking to the Polylang translation of the current page.
   Namespaced under .common-lang-fab — must not leak into other widgets. */

.common-lang-fab-wrap {
    position: fixed;
    bottom: 24px;
    z-index: 99990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* Side offset is a var so the left/right control shares one setting */
    --clf-side: 24px;
}

.common-lang-fab-wrap--right {
    right: var(--clf-side);
}

.common-lang-fab-wrap--left {
    left: var(--clf-side);
    align-items: flex-start;
}

.common-lang-fab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--clf-bg, #ffffff);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease;
}

/* Auto contrast (JS toggles clf-over-light / clf-over-dark on the wrap).
   Over a DARK background the default light pill already contrasts.
   Over a LIGHT background switch to the dark palette. */
.common-lang-fab-wrap.clf-over-light .common-lang-fab {
    background: var(--clf-bg-dark, #14161a);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.common-lang-fab-wrap.clf-over-light .common-lang-fab__name {
    /* !important: must beat the higher-specificity rule Elementor generates
       for the name_color control when the dark pill is active. */
    color: var(--clf-color-dark, #ffffff) !important;
}

.common-lang-fab-wrap.clf-over-light .common-lang-fab__flag {
    background: rgba(255, 255, 255, 0.14);
}

.common-lang-fab:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
}

.common-lang-fab:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

/* Flag holder: always a perfect circle crop */
.common-lang-fab__flag {
    width: var(--clf-flag-size, 40px);
    height: var(--clf-flag-size, 40px);
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef0f3;
}

.common-lang-fab__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback badge when no flag image is available (e.g. editor mock) */
.common-lang-fab__code {
    font: 700 calc(var(--clf-flag-size, 40px) * 0.34) / 1 Inter, system-ui, sans-serif;
    color: #33415c;
    letter-spacing: 0.03em;
}

.common-lang-fab__name {
    font: 600 14px/1 Inter, system-ui, sans-serif;
    color: #1a1a1a;
    white-space: nowrap;
    padding-right: 4px;
    transition: color 0.25s ease;
}

/* Design 1 — flag only: fully rounded circle button */
.common-lang-fab--flag {
    border-radius: 50%;
    padding: 4px;
}

.common-lang-fab--flag .common-lang-fab__name {
    display: none;
}

/* Design 2 — flag + name: rounded-corner pill */
.common-lang-fab--flag_name {
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
}