*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0f172a;
    color:#ffffff;
    font-family:Arial, sans-serif;
}

/* ========================= */
/* TOPO */
/* ========================= */

.topo{

    max-width:1200px;

    margin:0 auto;

    display:flex;

    align-items:center;

    padding:20px;

}

.header-wrapper{
    width:100%;
    border-bottom:1px solid #334155;
}

nav{
    display:flex;
    gap:30px;

    margin-left:670px;
}

nav{

    display:flex;

    gap:30px;
}

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:#ffffff;

    font-size:32px;

    cursor:pointer;
}

nav a{
    color:#ffffff;
    text-decoration:none;
}

.logo img{
    max-height:60px;
    width:auto;
    display:block;
}

/* ========================= */
/* CONTAINER */
/* ========================= */

main{
    max-width:1200px;
    margin:auto;
    padding:40px;
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

.hero{
    margin-top:30px;
}

/* ========================= */
/* CAIXA DA CALCULADORA */
/* ========================= */

.calculator-box{
    background:#1e293b;
    border:1px solid #334155;
    border-radius:12px;
    padding:30px;
}

.calculator-box h1{
    text-align:left;
    margin:0;
    margin-bottom:30px;
}

/* ========================= */
/* FORMULÁRIO */
/* ========================= */

.calc-form{
    width:100%;
}

.form-group{
    margin-bottom:25px;
}

.form-group label,
.col label{
    display:block;
    margin-bottom:8px;
    color:#cbd5e1;
    font-size:14px;
}

.form-group input,
.form-group select,
.col input{

    width:100%;
    height:48px;

    padding:0 14px;

    background:#0f172a;

    border:1px solid #334155;

    border-radius:8px;

    color:#ffffff;

    font-size:16px;
}

/* ========================= */
/* LINHAS */
/* ========================= */

.row{
    display:flex;
    gap:25px;
    margin-bottom:25px;
}

.col{
    flex:1;
}

/* ========================= */
/* INPUT + SELECT */
/* ========================= */

.input-combo{
    display:flex;
    width:100%;
}

.input-combo input{
    flex:1;
    height:48px;

    padding:0 14px;

    background:#0f172a;
    border:1px solid #334155;

    color:#ffffff;
    font-size:16px;

    border-radius:8px 0 0 8px;
}

.input-combo select{

    width:130px;
    height:48px;

    padding:0 10px;

    background:#0f172a;

    border:1px solid #334155;
    border-left:none;

    color:#ffffff;

    font-size:15px;

    border-radius:0 8px 8px 0;
}

/* ========================= */
/* BOTÕES */
/* ========================= */

.buttons{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.btn-calc{

    min-width:140px;
    height:46px;

    background:#22c55e;

    border:none;

    border-radius:8px;

    color:#ffffff;

    font-size:16px;
    font-weight:bold;

    cursor:pointer;
}

.btn-calc:hover{
    background:#16a34a;
}

.btn-clear{

    min-width:140px;
    height:46px;

    background:#334155;

    border:none;

    border-radius:8px;

    color:#ffffff;

    font-size:16px;

    cursor:pointer;
}

.btn-clear:hover{
    background:#475569;
}

/* ========================= */
/* FOCUS */
/* ========================= */

input:focus,
select:focus{

    outline:none;
    border-color:#22c55e;
}

/* ========================= */
/* RESPONSIVO */
/* ========================= */

@media(max-width:992px)
{
    .topo{

        justify-content:space-between;

        gap:0;
    }

    .menu-toggle{
        display:block;
    }

    nav{

        display:none;

        position:absolute;

        top:90px;

        left:20px;

        right:20px;

        background:#1e293b;

        border:1px solid #334155;

        border-radius:10px;

        padding:15px;

        flex-direction:column;

        gap:15px;

        z-index:999;
    }

    nav.active{
        display:flex;
    }

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

    .input-combo{
        flex-direction:column;
    }

    .input-combo input{
        border-radius:8px;
        margin-bottom:8px;
    }

    .input-combo select{
        width:100%;
        border-radius:8px;
        border-left:1px solid #334155;
    }

    .buttons{
        flex-direction:column;
    }

    .btn-calc,
    .btn-clear{
        width:100%;
    }
}

.currency-group{
    max-width:100px;
}

/* ========================= */
/* RESULTADOS */
/* ========================= */

.result-box{

    display:none;

    margin-top:30px;
}

.result-box h2{

    margin-bottom:20px;

    font-size:22px;
}

.result-grid{

    display:flex;

    gap:20px;
}

.result-card{

    flex:1;

    min-height:120px;

    background:#0f172a;

    border:1px solid #334155;

    border-radius:10px;

    padding:20px;

    text-align:center;
}

.result-card span{

    display:block;

    color:#94a3b8;

    font-size:14px;

    margin-bottom:10px;
}

.result-card strong{

    display:block;

    font-size:clamp(18px, 2vw, 24px);

    line-height:1.3;

    word-break:break-word;

    overflow-wrap:anywhere;
}

.final-card{

    border:1px solid #22c55e;
}

.final-card strong{

    color:#22c55e;
}

@media(max-width:992px)
{
    .result-grid{

        flex-direction:column;
    }
}

.results-section{
    display:none;
    margin-top:30px;
}

.results-divider{

    height:1px;

    background:#334155;

    margin:40px 0;
}

.chart-section h2,
.table-section h2{

    margin-bottom:20px;
}

.chart-section{

    width:100%;

    margin-top:20px;
}

.chart-section canvas{

    width:100%;

    max-height:450px;
}

.table-responsive{

    max-height:500px;

    overflow:auto;
}

#resultTable{

    width:100%;

    border-collapse:collapse;
}

#resultTable th{

    background:#0f172a;

    padding:14px;

    border:1px solid #334155;
}

#resultTable td{

    padding:12px;

    border:1px solid #334155;

    text-align:center;
}

.results-section .calculator-box{

    display:block;
}

.chart-section{

    display:block;

    width:100%;

    margin-top:20px;
}

.table-section{

    display:block;

    width:100%;

    margin-top:20px;
}

.chart-section{

    min-height:500px;
}

#resultTable{

    width:100%;

    border-collapse:collapse;

    font-size:14px;
}

#resultTable thead{

    position:sticky;

    top:0;
}

#resultTable th{

    background:#0f172a;

    color:#ffffff;

    padding:14px;

    border:1px solid #334155;
}

#resultTable td{

    padding:12px;

    border:1px solid #334155;

    text-align:center;
}

#resultTable tbody tr:nth-child(even){

    background:#172033;
}

#resultTable tbody tr:hover{

    background:#24324a;
}

/* ========================= */
/* BANNERS */
/* ========================= */

.banner-box{

    margin-top:30px;

    width:100%;

    min-height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#1e293b;

    border:2px dashed #475569;

    border-radius:10px;

    color:#94a3b8;

    font-size:18px;

    font-weight:bold;
}

#adsenseBanner{
    display:none;
}