.elementor-16408 .elementor-element.elementor-element-12a5afb{--display:flex;}.elementor-16408 .elementor-element.elementor-element-12a5afb.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-16408 .elementor-element.elementor-element-32f053c.elementor-element{--align-self:center;}@media(min-width:768px){.elementor-16408 .elementor-element.elementor-element-12a5afb{--width:89.425%;}}/* Start custom CSS for container, class: .elementor-element-12a5afb */<style>
/* ======================================================= */
/* --- 1. DEFINIÇÃO DE CORES E FONTES (VARIÁVEIS) --- */
/* ======================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Cores principais */
    --cor-primaria: #6D28D9;          /* Roxo (Botões Ativos, Ícones) */
    --cor-secundaria: #1F2937;        /* Preto/Cinza Escuro (Botões Inativos, Texto Principal) */
    
    /* Cores de Fundo e Contraste */
    --cor-fundo-widget: #FFFFFF;      /* Branco Puro */
    --cor-borda-input: #D1D5DB;       /* Cinza Claro */
    --cor-texto-principal: #1F2937;
    --cor-texto-secundario: #4B5563;
    --cor-texto-claro: #6B7280;
    
    /* Outros */
    --sombra: 0 5px 15px rgba(0, 0, 0, 0.1);
    --raio-borda: 0.5rem;
    --transicao-suave: 0.3s ease;
}

.meu-conversor-container-final {
    font-family: 'Inter', system-ui, sans-serif;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
}

.meu-conversor-container-final * {
    box-sizing: border-box;
}

/* ======================================================= */
/* --- 2. WIDGET GERAL E LAYOUT --- */
/* ======================================================= */

.converter-widget {
    background-color: var(--cor-fundo-widget);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra);
    padding: 2rem;
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    color: var(--cor-texto-principal);
}

.widget-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    justify-content: center;
}

.flag-icon {
    font-size: 1.5rem;
}

.widget-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

/* --- Área de Taxa de Câmbio --- */
.rate-info-area {
    text-align: center;
    margin-bottom: 1.5rem;
}

.rate-label {
    display: block;
    font-size: 0.875rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.rate-status {
    color: var(--cor-primaria);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.rate-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cor-primaria);
}


/* ======================================================= */
/* --- 3. BOTÕES DE COTAÇÃO (MUITO FOCO AQUI) --- */
/* ======================================================= */
.rate-types {
    display: flex;
    gap: 0.25rem; 
    margin-bottom: 1.5rem;
}

.rate-btn {
    flex-grow: 1;
    border: none;
    border-radius: 0.25rem;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicao-suave);
    
    /* Estilo Base (Inativo) */
    background-color: var(--cor-secundaria);
    color: #FFFFFF;
}

/* Estilo Ativo - Comercial (Roxo) */
.rate-btn[data-rate-type="comercial"].active {
    background-color: var(--cor-primaria);
    box-shadow: 0 4px 6px rgba(109, 40, 217, 0.4); /* Sombra roxa sutil */
}

/* Estilo Ativo - Turismo e B2Gether (Branco/Neutro) */
.rate-btn[data-rate-type="turismo"].active,
.rate-btn[data-rate-type="b2gether"].active {
    /* Mantém a cor preta ou use uma cor mais clara se preferir */
    background-color: var(--cor-secundaria);
}

.rate-btn:hover:not(.active) {
    background-color: #374151; /* Escurece um pouco no hover */
}


/* ======================================================= */
/* --- 4. FORMULÁRIO E INPUTS --- */
/* ======================================================= */

.converter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.input-container {
    background-color: var(--cor-fundo-widget);
    border-radius: var(--raio-borda);
    padding: 0.5rem 1rem;
    border: 1px solid var(--cor-borda-input);
    transition: border-color var(--transicao-suave);
}

.input-container:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 1px var(--cor-primaria); /* Anel de foco sutil */
}

.input-label {
    display: block;
    font-size: 0.75rem;
    color: var(--cor-texto-claro);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.currency-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.currency-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0;
    outline: none;
    text-align: left;
    color: var(--cor-texto-principal);
}

.currency-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cor-texto-secundario);
    cursor: pointer;
    outline: none;
    min-width: 65px;
    text-align-last: right;
    background-image: none;
    transition: color var(--transicao-suave);
}

.currency-select:hover {
    color: var(--cor-primaria); /* Destaque no hover */
}

/* --- Ícone de Troca --- */
.switch-icon {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: calc(50% - 15px);
    background-color: var(--cor-fundo-widget);
    border: 3px solid var(--cor-fundo-widget);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

.switch-icon .icon {
    display: block;
    font-size: 1.125rem;
    color: var(--cor-primaria);
    font-weight: 700;
    line-height: 1;
    padding: 0.4rem;
    border: 1px solid var(--cor-primaria);
    border-radius: 50%;
    background-color: var(--cor-fundo-widget);
    transition: transform var(--transicao-suave);
}

.switch-icon:hover .icon {
    transform: rotate(180deg);
}

/* --- Botão Principal --- */
.custom-quote-btn {
    display: block;
    width: 100%;
    background-color: var(--cor-primaria);
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    padding: 1rem;
    border-radius: var(--raio-borda);
    font-size: 1rem;
    font-weight: 600;
    transition: background-color var(--transicao-suave);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(109, 40, 217, 0.4);
}

.custom-quote-btn:hover {
    background-color: #4C1D95; /* Roxo mais escuro no hover */
}

/* --- Estilo de Desabilitado (B2Gether/Turismo) --- */
.b2gether-active .currency-input,
.b2gether-active .currency-select {
    color: var(--cor-texto-claro);
    cursor: not-allowed;
    background: transparent;
}
.b2gether-active .input-container {
    border-color: #E5E7EB;
}

/* Remove setas do input number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}


/* ======================================================= */
/* --- 5. MEDIA QUERY (RESPONSIVIDADE PERFEITA) --- */
/* ======================================================= */

@media (max-width: 480px) {
    
    .converter-widget {
        padding: 1rem; /* Reduz o padding interno para telas pequenas */
    }

    /* Ajusta o tamanho da fonte para melhor visualização em celular */
    .currency-input,
    .currency-select {
        font-size: 1.1rem; 
    }
    
    /* Torna os botões de cotação mais flexíveis */
    .rate-types {
        flex-wrap: wrap; 
        gap: 0.5rem;
    }
    
    .rate-btn {
        flex: 1 1 30%; /* Ocupa cerca de 30% para caber 3 por linha, se possível */
        padding: 0.6rem 0.3rem; 
        font-size: 0.8rem; 
    }
    
    .custom-quote-btn {
        padding: 0.8rem;
        font-size: 0.95rem;
    }
}
</style>/* End custom CSS */