/* ==========================================================================
   Translation Flags — estilos do shortcode [translation_flags]
   ========================================================================== */

.tf-container {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    position: relative;
}

/* Botão de cada bandeira */
.tf-flag-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
    font-family: inherit;
    opacity: 0.65;
}

.tf-flag-btn:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 1;
}

.tf-flag-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Bandeira do idioma ativo */
.tf-flag-btn.tf-active {
    border-color: currentColor;
    opacity: 1;
}

/* Emoji da bandeira */
.tf-flag-emoji {
    font-size: 1.5em;
    line-height: 1;
    display: inline-block;
}

/* Nome do idioma (show_label="true") */
.tf-flag-label {
    font-size: 0.82em;
    font-weight: 500;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Estado de carregamento
   ------------------------------------------------------------------ */

.tf-container.tf-loading .tf-flag-btn {
    pointer-events: none;
    opacity: 0.4;
}

/* Spinner minimalista que aparece durante a tradução */
.tf-container.tf-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: tf-spin 0.7s linear infinite;
    opacity: 0.6;
    margin-left: 4px;
}

@keyframes tf-spin {
    to { transform: rotate( 360deg ); }
}

/* ------------------------------------------------------------------
   Responsividade
   ------------------------------------------------------------------ */

@media ( max-width: 480px ) {
    .tf-flag-emoji  { font-size: 1.25em; }
    .tf-flag-label  { font-size: 0.75em; }
    .tf-flag-btn    { padding: 3px 6px; }
}