/* public/css/trocar_ouro.css?v=1763872063691 */
.header-info-bar { width: 90%; max-width: 600px; margin: 5px auto 15px auto; text-align: center; font-size: 0.8em; color: #a0a0a0; }
.header-info-bar a { color: var(--cor-titulo-dourado); text-decoration: none; }

.cambio-card {
    background: rgba(20, 20, 20, 0.7);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.gold-border { border-left: 4px solid #ffd700; }
.silver-border { border-left: 4px solid #c0c0c0; }

.cambio-card h3 {
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-top: 0;
    font-family: 'Cinzel', serif;
    color: #fff;
}

/* Barra de Mineração */
.mining-status {
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}
.mining-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 5px;
}
.progress-bg {
    width: 100%;
    height: 10px;
    background: #222;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #444;
}
.progress-fill {
    height: 100%;
    width: 0%;
    transition: width 0.5s linear;
}
/* Cores das Barras */
.fill-gold {
    background: linear-gradient(90deg, #e67e22, #f1c40f);
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.4);
}
.fill-silver {
    background: linear-gradient(90deg, #7f8c8d, #bdc3c7);
    box-shadow: 0 0 8px rgba(189, 195, 199, 0.4);
}

/* Inputs e Botões */
.action-row {
    display: flex;
    gap: 10px;
}
input[type="number"] {
    background: #111;
    border: 1px solid #555;
    color: white;
    padding: 10px;
    border-radius: 5px;
    flex-grow: 1;
    font-size: 1.1em;
    text-align: center;
}
button {
    padding: 10px 20px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.btn-success { background-color: #28a745; color: white; }
.btn-primary { background-color: #007bff; color: white; }

.quick-btns {
    margin-top: 8px; 
    display: flex; 
    justify-content: space-between;
    gap: 5px;
}
.btn-small {
    background-color: #444;
    color: #ccc;
    padding: 6px 0;
    font-size: 0.8em;
    flex-grow: 1;
    border: 1px solid #555;
}
.btn-small:hover { background-color: #666; border-color: #777; }

#message-area {
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
    min-height: 20px;
    padding: 10px;
    border-radius: 5px;
}
/* Adicione ao final do arquivo CSS anterior */
.sucesso { color: #28a745; background: rgba(40,167,69,0.1); padding: 10px; border-radius: 5px; }
.erro { color: #dc3545; background: rgba(220,53,69,0.1); padding: 10px; border-radius: 5px; }