/* SipSenTravel — language toggle (circular icon button matching other header bubbles).
   Real-color flag inset inside the bubble with a small gap from the edge. */

.lang-toggle-btn {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Flag sits INSIDE the bubble with a gap on every side (the bubble's teal
   shows around it as a ring). Rounded so it looks like a tiny flag chip. */
.lang-toggle-btn .lang-flag {
    position: absolute;
    inset: 3px;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}
.lang-toggle-btn .lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Show only the active language's flag */
.lang-toggle-btn .lang-flag-en { display: none; }
html[lang="en"] .lang-toggle-btn .lang-flag-lt { display: none; }
html[lang="en"] .lang-toggle-btn .lang-flag-en { display: block; }

.lang-toggle-btn:hover {
    transform: translateY(-1px);
}

/* ── Block-level language toggle (for long content pages) ──────────────
   Wrap full LT block: <div class="lang-block lang-lt">...</div>
   Wrap full EN block: <div class="lang-block lang-en">...</div>
   CSS shows only the matching one. */
.lang-block.lang-en { display: none !important; }
html[lang="en"] .lang-block.lang-lt { display: none !important; }
html[lang="en"] .lang-block.lang-en { display: block !important; }