/* Estilos CSS personalizados para o tema claro */
body {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f8fafc; /* slate-50 */
    color: #334155; /* slate-700 */
}

/* Animação para destacar a atualização de preço */
.price-update {
    animation: flash 0.7s ease-out;
}

@keyframes flash {
    0% { transform: scale(1); opacity: 1; }
    25% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.price-up { color: #16a34a; /* green-600 */ }
.price-down { color: #dc2626; /* red-600 */ }

/* Efeito de brilho sutil no hover dos cards */
.card-hover-effect {
    background-color: #ffffff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 1rem; /* rounded-xl */
    text-align: center; /* Centraliza todo o texto dentro do card */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-hover-effect:hover {
    transform: translateY(-4px);
    border-color: #10b981; /* emerald-500 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.05);
}

/* Garante que o container do logo/nome também seja centralizado */
.card-hover-effect .flex.items-center {
    justify-content: center;
}

/* Centraliza o texto "Atualizado agora" */
.card-hover-effect .text-right {
    text-align: center;
}


/* Estilos da Marca */
#brand-title {
    font-size: 3.75rem; /* 60px */
    font-weight: 900; /* font-black */
    letter-spacing: -0.05em;
    line-height: 1;
}

@media (min-width: 640px) { /* sm breakpoint */
    #brand-title {
        font-size: 5rem; /* 80px */
    }
}

#brand-title .cota-part {
    color: #1e293b; /* slate-800 */
}
#brand-title .card-part {
    color: #10b981; /* emerald-500 */
}

/* Estilos da Frase Dinâmica */
#dynamic-phrase {
    transition: opacity 0.5s ease-in-out;
}
#dynamic-phrase .variable-part-main {
    color: #16a34a; /* Cor atualizada */
    font-weight: 700;
}
#dynamic-phrase .variable-part-secondary {
    color: #16a34a; /* Cor atualizada */
    font-weight: 700;
}


/* Estilos do Input do Conversor */
.converter-input {
    background-color: #ffffff;
    border: 1px solid #cbd5e1; /* slate-300 */
    color: #1e293b; /* slate-800 */
    transition: border-color 0.3s, box-shadow 0.3s;
}
.converter-input:focus {
    outline: none;
    border-color: #10b981; /* emerald-500 */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Estilos das Abas de Navegação Principal */
.tab {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: #64748b; /* slate-500 */
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.tab.active {
    color: #10b981; /* emerald-500 */
    border-bottom-color: #10b981; /* emerald-500 */
}

.tab-content.hidden {
    display: none;
}

/* Estilos para o Seletor de Direção da Conversão (dentro de cada moeda) */
.currency-toggle-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem; /* rounded-lg */
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-weight: 600;
    color: #475569; /* slate-600 */
    transition: all 0.3s ease;
}

.currency-toggle-btn.active {
    background-color: #ffffff;
    color: #10b981; /* emerald-500 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Estilos para o Seletor de Moeda (Dólar/Euro) */
.currency-selector-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: #64748b; /* slate-500 - Cor do inativo */
    transition: all 0.3s ease;
}

.currency-selector-btn.active {
    background-color: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.25);
}

.currency-content.hidden {
    display: none;
}