/* ================================================
   CONVERSOR DE MOEDAS - ESTILOS CSS
   ================================================
   Estrutura: Reset global, body, components, dark mode e responsivo
*/

/* ================================================
   1. RESET GLOBAL E ESTILOS BASE
   ================================================ */

* {
    font-family: "Open Sans", sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
}
/* BOTÃO FLUTUANTE */

.btn-anuncio{

position: fixed;

top: 20px;
left: 20px;

background:#145c14;

color: white;

border: none;

padding: 12px 18px;

border-radius: 8px;

font-weight: bold;

cursor: pointer;

box-shadow: 0 5px 15px rgba(0,0,0,0.3);

z-index: 1000;

transition: 0.3s;

}

.btn-anuncio:hover{

background:#145c14;

}



/* MODAL */

.modal-anuncio{

display: none;

position: fixed;

top:0;
left:0;

width:100%;
height:100%;

background: rgba(0,0,0,0.7);

justify-content: center;

align-items: center;

z-index:1000;

}



/* CONTEÚDO */

.modal-conteudo{

background:#1c1c1c;

padding:30px;

border-radius:12px;

width:300px;

color:white;

box-shadow:0 10px 30px rgba(0,0,0,0.5);

}



.modal-conteudo h2{

text-align:center;
margin-bottom:15px;

}



.modal-conteudo input,
.modal-conteudo select{

width:100%;

padding:8px;

margin-bottom:10px;

border-radius:6px;

border:none;

}



.modal-conteudo button{

width:100%;

padding:10px;

background: #145c14;

color:white;

border:none;

border-radius:6px;

font-weight:bold;

cursor:pointer;

}



.modal-conteudo button:hover{

background: #145c14;

}



/* FECHAR */

.fechar{

position:absolute;

font-size:22px;

cursor:pointer;

right:20px;

top:15px;

}

/* Estilos para títulos */
h1,
h2,
h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

/* ================================================
   2. ESTILO DO BODY E FUNDO
   ================================================ */

body {
    background: #288428;
    background-image: url("../Assets/money.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ================================================
   3. COMPONENTES DE IMAGEM
   ================================================ */

.img {
    width: 400px;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

.img1 {
    width: 40px;
    margin: 15px 0;
}

/* ================================================
   4. LAYOUT PRINCIPAL - GRID
   ================================================ */

.main-container {
    display: grid;
    grid-template-columns: 300px 375px 300px;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 40px;
}

main {
    width: 375px;
    border-radius: 20px;
    background: #59a959;
    padding: 44px 24px 23px;
}

/* ================================================
   5. FORMULÁRIO - LABELS E INPUTS
   ================================================ */

label {
    color: #181515;
    font-size: 14px;
    display: block;
    margin-bottom: 12px;
}

select,
input {
    background: #f3f9f3;
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    height: 48px;
    width: 100%;
    margin-bottom: 24px;
    padding-left: 18px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

/* ================================================
   6. BOTÕES
   ================================================ */

button {
    border-radius: 5px;
    width: 100%;
    background: #288428;
    border: none;
    height: 48px;
    color: #f3f9f3;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
    margin-bottom: 10px;
}

button:hover {
    opacity: .8;
}

.swap {
    transition: transform .4s;
}

.swap:active {
    transform: rotate(180deg);
}

/* ================================================
   7. SEÇÃO DE CONVERSÃO E MOEDAS
   ================================================ */

section {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.currency-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid white;
    width: 200px;
    padding: 10px 0;
    border-radius: 8px;
}

.currency {
    color: #181515;
    font-weight: 700;
    font-size: 20px;
}

.currencyvalue,
.currencyvalue2 {
    color: #181515;
    font-size: 14px;
}

/* ================================================
   8. LOADING, HISTÓRICO E CAIXAS
   ================================================ */

.loading {
    display: none;
    margin-top: 15px;
    font-size: 16px;
}

.history-box,
.fact-box,
.chart-box {
    width: 100%;
    max-width: 400px;   /* limitar largura e permitir centralizar */
    margin: 0 auto 20px;
    border: 2px solid white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    background: #1ea11e;
}

#history-list {
    list-style: none;
    margin-top: 10px;
}

#currencyChart {
    width: 100%;
    height: 240px !important;
    background: #166816;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid white;
}

/* resultado exibido abaixo do botão */
#exchange-rate {
    margin: 10px 0 20px;
    text-align: center;
    white-space: pre-line;          /* respeita a quebra \n gerada pelo script */
    font-weight: 600;
    color: #181515;
    font-size: 16px;
}

.dark-mode #exchange-rate {
    color: #ffffff;
}

.chart-box {
    overflow: hidden;
}

/* ================================================
   9. MODO ESCURO (DARK MODE)
   ================================================ */

.dark-mode {
    background-color: #0f2b0f;
}

.dark-mode main {
    background: #1c4d1c;
}

.dark-mode .history-box,
.dark-mode .chart-box,
.dark-mode .fact-box,
.dark-mode .eco-box {
    background-color: #145c14;
}

.dark-mode .eco-list a {
    color: #ffffff;
}

.dark-mode label,
.dark-mode .currency,
.dark-mode .currencyvalue,
.dark-mode .currencyvalue2 {
    color: #ffffff;
}

/* ================================================
   10. COLUNAS - FLEXBOX
   ================================================ */

.left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;    /* centralizar conteúdo dentro da coluna */
}

.eco-box {
    width: 100%;
    max-width: 400px;
    margin: 20px auto 0;
    border: 2px solid white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;

    background: linear-gradient(135deg,#1ea11e,#27d427);

    box-shadow: 0 8px 20px rgba(0,0,0,0.25);

    position: relative;

    animation: ecoPulse 3s infinite;
}
@keyframes ecoPulse {

0%{
box-shadow:0 0 0 0 rgba(39,212,39,0.6);
}

70%{
box-shadow:0 0 0 15px rgba(39,212,39,0);
}

100%{
box-shadow:0 0 0 0 rgba(39,212,39,0);
}

}


.eco-list {
    list-style: none;
    margin-top: 10px;
}

.eco-list li {
    margin: 8px 0;
}

.eco-list a {
    text-decoration: none;
    color: white;
    font-weight: 600;

    display: inline-block;

    padding: 5px 10px;

    border-radius: 6px;

    transition: 0.2s;
}

.eco-list a:hover {

background: white;

color: #1ea11e;

transform: scale(1.05);

}

#eco-box {
    display: none;
}

.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ================================================
   11. RESPONSIVO - TABLETS (900px e menos)
   ================================================ */

@media(max-width:900px) {

    .main-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    main {
        width: 90%;
    }

    .history-box,
    .fact-box,
    .chart-box {
        width: 90%;
    }

}

/* ================================================
   12. RESPONSIVO - MOBILE (600px e menos)
   ================================================ */

@media(max-width:600px) {

    .main-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
        padding-left: 10px;
    }

    main {
        width: 95%;
    }

    .left-column {
        width: 100%;
        padding-left: 0;         /* remover deslocamento lateral */
        align-items: center;     /* garantir itens centralizados */
    }

    .history-box,
    .fact-box,
    .chart-box {
        width: 95%;
    }

    /* diminuir tamanho de fonte do resultado quando estiver muito estreito */
    #exchange-rate {
        font-size: 14px;
    }

}