/* =======================================================
   TRYMPEX - CONSULTA DE PRAZO
   Versão 5.0
======================================================= */


/* =======================================================
   CARD PRINCIPAL
======================================================= */

.trympex-box {

    position: relative;

    max-width: 1100px;

    margin: 60px auto;

    padding: 55px;

    background: linear-gradient(
        135deg,
        #071A33 0%,
        #0D2D57 100%
    );

    border-radius: 22px;

    border-bottom: 6px solid #D71920;

    box-shadow: 0 25px 60px rgba(0,0,0,.25);

    overflow: hidden;

    box-sizing: border-box;
}


/* =======================================================
   MARCA D'ÁGUA
======================================================= */

.trympex-watermark {

    position: absolute;

    right: 35px;

    top: 30px;

    width: 95px;

    height: 95px;

    border: 3px solid rgba(255,255,255,.06);

    border-radius: 18px;

    transform: rotate(45deg);

    pointer-events: none;
}


/* =======================================================
   TÍTULO
======================================================= */

.trympex-titulo {

    margin: 0;

    font-size: 58px;

    font-weight: 900;

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;

    line-height: 1;

    letter-spacing: -1px;
}


.trympex-titulo span,
.trympex-titulo strong {

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;
}


/* =======================================================
   LINHA DECORATIVA
======================================================= */

.trympex-titulo + .trympex-linha {

    width: 95px;

    height: 5px;

    background: #D71920 !important;

    border-radius: 30px;

    margin: 28px 0 45px;
}


/* =======================================================
   IDENTIFICAÇÃO / TRYMPEX LOGISTICS
======================================================= */

.trympex-tag {

    display: block;

    margin-bottom: 14px;

    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =======================================================
   TEXTO EXPLICATIVO
======================================================= */

.trympex-subtitulo {

    margin: 20px 0 0;

    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 16px;

    line-height: 1.6;

    font-weight: 400;

    opacity: .95;
}


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

.trympex-form {

    display: flex;

    gap: 25px;

    align-items: flex-end;

    flex-wrap: wrap;
}


/* =======================================================
   CAMPOS
======================================================= */

.trympex-campo {

    flex: 1;

    position: relative;

    min-width: 0;
}


/* =======================================================
   LABELS
======================================================= */

.trympex-campo label {

    display: block;

    margin-bottom: 10px;

    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =======================================================
   INPUT
======================================================= */

.trympex-campo input {

    width: 100%;

    height: 60px;

    padding: 0 20px;

    border: none;

    border-radius: 10px;

    background: #FFFFFF;

    font-size: 16px;

    color: #071A33 !important;

    -webkit-text-fill-color: #071A33 !important;

    font-weight: 600;

    transition: .30s;

    box-sizing: border-box;
}


/* Placeholder */

.trympex-campo input::placeholder {

    color: #777777 !important;

    -webkit-text-fill-color: #777777 !important;

    opacity: 1;
}


/* Foco */

.trympex-campo input:focus {

    outline: none;

    box-shadow:
        0 0 0 4px rgba(253,185,19,.35);
}


/* =======================================================
   LISTA AUTOCOMPLETE
======================================================= */

.trympex-lista {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: #FFFFFF;

    border-radius: 10px;

    box-shadow: 0 15px 30px rgba(0,0,0,.18);

    overflow: hidden;

    z-index: 9999;
}


/* Item */

.trympex-item {

    padding: 14px 18px;

    cursor: pointer;

    transition: .20s;

    border-bottom: 1px solid #EFEFEF;

    color: #071A33 !important;

    -webkit-text-fill-color: #071A33 !important;

    background: #FFFFFF;

    font-weight: 500;
}


/* Hover */

.trympex-item:hover {

    background: #F4F6F9;

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;
}


/* Nenhum resultado */

.trympex-item.vazio {

    color: #888888 !important;

    -webkit-text-fill-color: #888888 !important;

    cursor: default;
}


/* =======================================================
   BOTÃO
======================================================= */

.trympex-botao {

    display: flex;

    align-items: flex-end;
}


.trympex-botao button {

    height: 60px;

    padding: 0 42px;

    background: #FDB913 !important;

    color: #071A33 !important;

    -webkit-text-fill-color: #071A33 !important;

    border: none;

    border-radius: 10px;

    font-size: 17px;

    font-weight: 800;

    cursor: pointer;

    transition: .25s;

    box-shadow:
        0 12px 25px rgba(253,185,19,.30);
}


.trympex-botao button:hover {

    background: #D71920 !important;

    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;

    transform: translateY(-3px);

    box-shadow:
        0 18px 35px rgba(215,25,32,.35);
}


/* =======================================================
   ÁREA DO RESULTADO
======================================================= */

#resultado {

    width: 100%;

    margin-top: 35px;

    display: none;

    box-sizing: border-box;
}


/* =======================================================
   RESULTADO - CARD
======================================================= */

/*
   O consulta.js atual cria:

   .trympex-card
   .trympex-table

   Portanto estas são as classes que precisamos
   estilizar para o resultado aparecer corretamente.
*/

.trympex-box .trympex-card {

    display: block !important;

    width: 100% !important;

    margin-top: 0 !important;

    padding: 30px !important;

    background: #FFFFFF !important;

    color: #071A33 !important;

    border-radius: 16px !important;

    border-left: 8px solid #D71920 !important;

    box-shadow:
        0 20px 45px rgba(0,0,0,.12) !important;

    box-sizing: border-box !important;
}


/* =======================================================
   TÍTULO DO RESULTADO
======================================================= */

.trympex-box .trympex-card h3 {

    margin: 0 0 25px !important;

    padding: 0 !important;

    background: transparent !important;

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;

    font-size: 28px !important;

    line-height: 1.2 !important;

    font-weight: 800 !important;
}


/* =======================================================
   TABELA DO RESULTADO
======================================================= */

.trympex-box .trympex-table {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border-collapse: collapse !important;

    border-spacing: 0 !important;

    background: #FFFFFF !important;

    color: #071A33 !important;
}


/* =======================================================
   LINHAS DA TABELA
======================================================= */

.trympex-box .trympex-table tr {

    background: #FFFFFF !important;
}


/* =======================================================
   CÉLULAS DA TABELA
======================================================= */

.trympex-box .trympex-table td {

    padding: 12px 15px !important;

    background: #FFFFFF !important;

    color: #071A33 !important;

    -webkit-text-fill-color: #071A33 !important;

    border-bottom: 1px solid #E9E9E9 !important;

    font-size: 16px !important;

    line-height: 1.5 !important;

    vertical-align: middle !important;
}


/* =======================================================
   PRIMEIRA COLUNA
======================================================= */

.trympex-box .trympex-table td:first-child {

    width: 190px !important;

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;

    font-weight: 700 !important;
}


/* =======================================================
   TEXTO EM NEGRITO
======================================================= */

.trympex-box .trympex-table td strong {

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;

    font-weight: 700 !important;
}


/* =======================================================
   ÚLTIMA LINHA
======================================================= */

.trympex-box .trympex-table tr:last-child td {

    border-bottom: none !important;
}


/* =======================================================
   RESULTADO ANTIGO
   Mantido para compatibilidade
======================================================= */

.trympex-resultado {

    background: #FFFFFF;

    border-radius: 16px;

    padding: 35px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.12);

    border-left: 8px solid #D71920;

    color: #071A33;
}


.trympex-resultado h3 {

    margin: 0 0 25px;

    color: #071A33 !important;

    font-size: 28px;

    font-weight: 800;
}


.trympex-resultado hr {

    border: none;

    height: 1px;

    background: #E9E9E9;

    margin: 25px 0;
}


.trympex-resultado .trympex-linha {

    width: auto;

    height: auto;

    margin: 0;

    color: #2F3B4B !important;

    -webkit-text-fill-color: #2F3B4B !important;

    background: transparent;

    font-size: 16px;

    line-height: 1.7;
}


/* =======================================================
   SETA
======================================================= */

.trympex-seta {

    text-align: center;

    font-size: 34px;

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;

    margin: 18px 0;
}


/* =======================================================
   LOADING
======================================================= */

.trympex-loading {

    background: #FFFFFF;

    border-radius: 12px;

    padding: 22px;

    text-align: center;

    font-weight: 700;

    color: #071A33 !important;

    -webkit-text-fill-color: #071A33 !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.10);
}


/* =======================================================
   ERRO
======================================================= */

.trympex-erro {

    background: #FFECEC;

    color: #B30000 !important;

    -webkit-text-fill-color: #B30000 !important;

    border-left: 6px solid #D71920;

    padding: 18px;

    border-radius: 10px;

    font-weight: 600;
}


/* =======================================================
   MOBILE
======================================================= */

@media (max-width: 768px) {

    .trympex-box {

        padding: 30px 20px;

        margin: 20px;
    }


    .trympex-titulo {

        font-size: 38px;
    }


    .trympex-form {

        flex-direction: column;

        gap: 18px;
    }


    .trympex-campo {

        width: 100%;
    }


    .trympex-botao {

        width: 100%;
    }


    .trympex-botao button {

        width: 100%;
    }


    .trympex-resultado {

        padding: 22px;
    }


    /* Resultado atual no mobile */

    .trympex-box .trympex-card {

        padding: 20px !important;

        margin-top: 0 !important;

        border-left-width: 5px !important;
    }


    .trympex-box .trympex-card h3 {

        font-size: 23px !important;
    }


    .trympex-box .trympex-table td {

        padding: 10px 8px !important;

        font-size: 14px !important;
    }


    .trympex-box .trympex-table td:first-child {

        width: 40% !important;
    }

}


/* =======================================================
   PROTEÇÃO CONTRA O TEMA COLIBRI
======================================================= */


/* Título principal */

.trympex-box h1.trympex-titulo,
.trympex-box h1.trympex-titulo *,
.trympex-box .trympex-titulo,
.trympex-box .trympex-titulo *,
.trympex-box .trympex-titulo span,
.trympex-box .trympex-titulo strong {

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;

    text-shadow: none !important;
}


/* Textos sobre fundo azul */

.trympex-box .trympex-tag,
.trympex-box .trympex-subtitulo,
.trympex-box .trympex-campo label {

    color: #FFFFFF !important;

    -webkit-text-fill-color: #FFFFFF !important;
}


/* =======================================================
   PROTEÇÃO EXTRA DO RESULTADO
======================================================= */

.trympex-box .trympex-card,
.trympex-box .trympex-card *,
.trympex-box .trympex-table,
.trympex-box .trympex-table * {

    box-sizing: border-box;
}


.trympex-box .trympex-card table,
.trympex-box .trympex-card tbody,
.trympex-box .trympex-card tr,
.trympex-box .trympex-card td {

    background-color: #FFFFFF !important;
}


/* Valores da tabela */

.trympex-box .trympex-card td {

    color: #071A33 !important;

    -webkit-text-fill-color: #071A33 !important;
}


/* Rótulos da tabela */

.trympex-box .trympex-card td:first-child,
.trympex-box .trympex-card td:first-child strong {

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;
}


/* Título do card */

.trympex-box .trympex-card h3 {

    color: #D71920 !important;

    -webkit-text-fill-color: #D71920 !important;
}