.page-title {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 8rem 3.2rem;

    color: white;
    background: linear-gradient(var(--first-color), var(--second-color));
}

.page-title h2 {
    font-size: 2rem;
}

.page-title a {
    text-decoration: none;
    color: white;
    transition: 0.3s;
}

.page-title a:hover {
    opacity: 0.7;
}

.page-title .breadcrumbs {
    margin-top: 1rem; 
}

form, .calculation-result {
    margin: 2.4rem;
    /*box-shadow: 0px 2px 47px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 2px 47px 5px rgba(0, 0, 0, 0.1);*/
    border-radius: 0.6rem;
    border: solid 1px var(--light-grey);
}

form .form-div, .calculation-result .result-div {
    padding: 1.6rem;
    transition: 0.3s;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

form .form-div + .form-div, .calculation-result .result-div + .result-div {
    margin-top: 1.6rem;
}

form .form-div h4 {
    margin-bottom: 1.2rem;
}

.form-title, .result-title {
    margin: 2.4rem 0;
    padding: 0 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.form-title h3 {
    font-size: 1.2rem;
}

.form-title i, .result-title i {
    color: var(--first-color);
    margin-right: 0.64rem;
}

form .form-input {
    width: 100%;
}

form .form-input + .form-input, form .dynamic-item + .dynamic-item, form .rate-custom-fields {
    margin-top: 1.2rem;
}

form input[type="text"], form input[type="number"], form select, form input[type="date"] {
    padding: 0.64rem;
    font-family: var(--font);
    border-radius: 0.4rem;
    border: 1px solid var(--light-grey);
    outline: none;
    transition: 0.3s;
    width: 100%;
}

form input[type="text"]:hover, form input[type="number"]:hover, form select:hover {
    border-color: var(--first-color);
}

form option {
    background-color: white;
    color: var(--text-color);
    border-color: var(--light-grey);
}

form label {
    font-size: 0.8rem;
    color: var(--text-color);
}

form button {
    font-family: var(--font);
    padding: 1rem;
    color: white;
    background-color: var(--text-color);
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: 0.3s;
}

form button:hover {
    background-color: var(--second-color);
}

form div:has(.dynamic-item) + button {
    margin-top: 1.2rem;
}

form .remove-button {
    font-size: 0.6rem;
    padding: 0.4rem 0.64rem;
    border: 1px solid;
    background-color: white;
    border-radius: 0.64rem;
    color: var(--negative-color);
    transition: 0.3s;
}

form  .remove-button:hover {
    color: white;
    background-color: var(--negative-color);
}

form .loan-time-inputs {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 2fr 1fr;
    gap: 0.6rem;
}

form .form-iof-option {
    margin-top: 0.32rem;
}

form .form-iof-option div {
    margin-left: 0.64rem;
}

form .form-actions {
    margin: 1.2rem 0 2.4rem;
    padding: 0 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

form .form-actions button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

form .form-actions button i {
    margin-right: 0.64rem;
}

form .form-actions button + button {
    margin-top: 0.4rem;
}

form .submit-button {
    background-color: var(--light-second-color);
}

form .clear-button {
    color: var(--negative-color);
    background-color: white;
    border: 1px solid var(--negative-color);
    transition: 0.3s;;
}

form .clear-button:hover {
    color: white;
    background-color: var(--negative-color);
}

.calculation-result .costs-resume {
    width: 100%;
}

.calculation-result .cost {
    padding: 1rem;
    border-radius: 0.64rem;
    border: 1px solid var(--light-grey);
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

.calculation-result #final-value {
    border-color: var(--first-color);
    background-color: var(--white-first-color);
}

.calculation-result .cost + .cost {
    margin-top: 0.64rem;
}

.calculation-result .cost .cost-number {
    font-weight: 700;
    font-size: 1.4rem;
}

.calculation-result .overflow-div {
    margin-top: 1rem;
    overflow-x: auto;
    width: 100%;
    border-radius: 0.64rem;
}

.calculation-result table {
    min-width: 100%;
    border-radius: 0.64rem;
    border-spacing: 0;
    border-collapse: separate;
    table-layout: fixed;
}

.calculation-result table th {
    background-color: var(--second-color);
    color: white;
}

.calculation-result table td, .calculation-result table th {
    border: 1px solid var(--light-grey);
    padding: 0.32rem;
}

.calculation-result table #total-row {
    font-weight: 700;
}

.calculation-result .print-options {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.calculation-result .print-options button {
    padding: 1rem 1rem;
    border-radius: 0.6rem;
    color: var(--text-color);
    background-color: var(--first-color);
    font-family: var(--font), sans-serif;
    cursor: pointer;
    transition: 0.3s;
    border: none;

}

.calculation-result .print-options button + button {
    margin-left: 1rem;
}

.calculation-result .print-options button i {
    font-size: 1rem;
    margin-right: 0.48rem;
}

.calculation-result .print-options button:hover {
    background-color: var(--second-color);
    color: white;
}

.calculation-result .important {
    padding: 1.2rem;
    margin: 1.6rem;
    border: 1px solid var(--third-color);
    border-radius: 0.6rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;

    background-color: var(--white-third-color);
}

.calculation-result .important i {
    font-size: 1.8rem;
    color: var(--third-color);
    margin-bottom: 1rem;
}

.calculation-result .footer-result-div {
    display: none;
}

.calculation-result .credits {
    font-size: 0.9rem;
    text-align: center;
    width: 100%;
}

.calculation-result .credits img {
    width: 6.4rem;
}

@media print, screen and (min-width: 768px) {
    .calculation-content {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 2fr;
        gap: 1rem;
        margin: 4rem 3.2rem 6.4rem;
    }

    form {
        grid-row: 1;
        grid-column: 1;
        margin: 0;
    }

    .calculation-result {
        grid-row: 1;
        grid-column: 2;
        margin: 0;
    }

    .form-title, .result-title {
        text-align: left;
        justify-content: flex-start;
    }

    .calculation-result .costs-resume {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 0.64rem;
        margin-top: 1rem;
    }

    .calculation-result .cost {
        margin-top: 0 !important;
    }

    .calculation-result .important {
        flex-direction: row;
        text-align: justify;
       padding: 1.6rem;
    }

    .calculation-result .important i {
        font-size: 2rem;
        margin-bottom: 0;
        margin-right: 1rem;
    }
}

@media print {

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-sizing: border-box !important;
    }

    /* Configuração da página */
    @page {
        margin: 0.5cm;
    }

    html,
    body {
        margin: auto !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /*
     * Esconde tudo que:
     * - não é .printable
     * - não está dentro de .printable
     * - não é ancestral de .printable
     */
    body *:not(.printable):not(.printable *):not(:has(.printable)) {
        display: none !important;
    }

    /*
     * O container principal deixa de ser GRID
     * durante a impressão.
     */
    .calculation-content {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * Resultado que será impresso
     */
    .printable {
        display: block !important;
        position: static !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
    }

    /* 1. Força a quebra de texto longa em todas as caixas */
    .printable .cost-title,
    .printable .cost-number {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    /* 2. Reduz o tamanho do texto para caber confortavelmente no papel */
    .printable .cost-title {
        font-size: 0.75rem !important;
    }

    .printable .cost-number {
        font-size: 1rem !important; /* Reduzido de 1.4rem para evitar estouro */
    }

    /* 3. Ajusta o Grid para permitir 4 colunas no celular/impressão compacta */
    .printable .costs-resume {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* 2 colunas no papel garante espaço lateral */
        gap: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .printable .cost {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.64rem !important;
        overflow: hidden !important; /* Corta vazamentos indesejados */
    }

    /*
     * Conteúdo interno do resultado
     */
    .printable .result-div {
        display: flex !important;
    }

    /*
     * Não imprimir os botões
     */
    .printable .print-options {
        display: none !important;
    }

    /*
     * Tabela
     */
    .printable .overflow-div {
        overflow: visible !important;
        width: 100% !important;
    }

    .printable table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;

        border-collapse: collapse !important;
        table-layout: auto !important;
    }

    .printable tr {
        display: table-row !important;
        page-break-inside: avoid !important;
    }

    .printable th,
    .printable td {
        display: table-cell !important;
        font-size: 0.65rem !important;
        line-height: 1.1 !important;

        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        hyphens: auto;
    }

    .calculation-result .footer-result-div {
        display: block;
    }

}