/* tc-translate.css — floating language switcher (js/tc-translate.js injects the markup).
   Theme-agnostic structural styles; colors ride the brand vars injected by App.razor so every
   template (Blackhawk, Zonar, future themes) skins it for free. Stacked directly ABOVE the
   live-chat launcher (.tc-chat-launch: right 32 / bottom 32 / height 52 in comm-chat.base.css)
   so the two floating actions read as one bottom-right cluster — Marcos 2026-07-10. */

.tc-lang {
    position: fixed;
    right: 32px;
    bottom: 96px;                 /* base chat FAB (right 32 / bottom 32 / h 52) + 12px gap */
    z-index: 99990;               /* same stacking cluster as .tc-chat-launch */
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transition: opacity .3s ease;
}

/* Boot state: hidden until tc-translate.js confirms the theme's load/nav overlays are gone. */
.tc-lang.tc-lang--boot {
    opacity: 0;
    pointer-events: none;
}

/* Per-theme: mirror each theme's chat-FAB skin offsets so the pill always floats 12px above it.
   Keep these in sync with templates/{theme}/comm-chat.css .tc-chat-launch. */
.tc-lang--zonar     { right: 105px; bottom: 159px; }   /* zonar chat: right 105 / bottom 95 */
.tc-lang--blackhawk { right: 32px;  bottom: 184px; }   /* bh chat: right 32 / bottom 120 */

.tc-lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-primary, #223a66);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: transform .15s ease, box-shadow .15s ease;
}

.tc-lang-btn:hover,
.tc-lang-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
}

.tc-lang-btn:active {
    transform: translateY(0);
}

.tc-lang-globe {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Busy = batches in flight: gentle pulse on the globe so the user sees work happening. */
.tc-lang--busy .tc-lang-globe {
    animation: tc-lang-pulse 1s ease-in-out infinite;
}

@keyframes tc-lang-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.tc-lang-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    min-width: 185px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tc-lang-opt {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #222;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}

.tc-lang-opt:hover,
.tc-lang-opt:focus-visible {
    background: rgba(0, 0, 0, .07);
}

.tc-lang-opt.is-active {
    background: var(--brand-button, #223a66);
    color: #fff;
    cursor: default;
}

/* Active option gets a leading check so state reads without color alone (ADA). */
.tc-lang-opt.is-active::before {
    content: "\2713\00a0\00a0";
}

@media (max-width: 767.98px) {
    /* Mobile chat FAB collapses to a 52px circle at right 15 (base bottom safe+20; bh safe+90;
       zonar keeps its 95px). Pill follows, 12px above each. */
    .tc-lang            { right: 15px; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
    .tc-lang--zonar     { right: 15px; bottom: 159px; }
    .tc-lang--blackhawk { right: 15px; bottom: calc(env(safe-area-inset-bottom, 0px) + 154px); }

    .tc-lang-btn {
        padding: 9px 14px;
        font-size: 14px;
    }

    /* Options stay ≥16px-equivalent touch targets; text 15px is fine (buttons don't zoom iOS). */
}