:root {
    --primary-light: #3C5AA6 !important; /* Azul médio inspirado no logo */
    --primary: #2B4A8C !important; /* Azul intermediário */
    --primary-dark: #1D397B !important; /* Azul escuro do logo */

    --font: #E0E0E0 !important; /* Branco acinzentado para melhor leitura */
}







/* -------------------------------- ELEMENTOS HTML -------------------------------- */

body {
    background: -webkit-gradient(linear, left top, left bottom, from(#2c2d22), to(#1a1d22)) fixed;
    padding: 2rem 0rem;
    color: var(--font);
}

main,
header {
    background-color: #3c3d42;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
}


hr {
    background-color: var(--font);
}

small {
    color: #96979b !important;
    font-size: 12px;
}

i {
    cursor: pointer
}


.div-error {
    background-color: #ff697d !important;
    opacity: 0.8;
}



.produto-divisor {
    width: 0.1rem;
    height: 100%;
    background-color: var(--font);
    margin: 0px 1.5rem;
}

.produto-valor {
    font-size: 3.5rem;
    color: var(--primary);
}



.input-checkout {
    padding: 0.8rem;
    border-radius: 0.2rem;
    background-color: #2d2e33;
    border: 2px solid #4e5156;
    color: #8c8c92;
    transition: box-shadow 0.2s;
    transition: border-color 0.2s;
}

.input-checkout:focus {
    border-color: #595d62;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
    outline: none;
}

.input-checkout:read-only {
    background-color: #38373d;
}

select {
    background-color: #2d2e33 !important;
}



.div-input-checkout {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    border-radius: 0.2rem;
    background-color: #2d2e33;
    border: 2px solid #4e5156;
    color: #8c8c92;
    transition: box-shadow 0.2s;
    transition: border-color 0.2s;
}

.div-input-checkout input {
    background: none;
    border: none;
    color: #8c8c92;
}

.div-input-checkout input:focus {
    outline: none;
}



.is-valid {
    border-color: lightgreen !important;
}

.is-invalid {
    border-color: #ff474c !important;
}

.placeholder-error::placeholder {
    color: #ff474c;
    font-size: 12px;
}



.fake-link {
    color: skyblue;
    text-decoration: underline;
    cursor: pointer;
}

.fake-link:hover {
    filter: brightness(5.5);
}


.btn-pagamento {
    background: transparent;
    border-radius: 5px;
    padding: 1.406rem 4.375rem;
    text-wrap: nowrap;
    margin-right: 10px;
    transition: all 0.2s;
    font-size: 1.25rem;
}

.btn-pagamento:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 6px 20px 0 rgba(0, 0, 0, 0.08);
}

.border-pagamento-unselect {
    border: 1px solid #56575c;
}

.border-pagamento-select {
    border: 1px solid var(--font);
}


/* -------------------------------- BTN -------------------------------- */
.btn {
    letter-spacing: 0.2px !important;
}

.btn-sm {
    font-size: 1.1rem !important;
}



/* btn primary */
.button-primary {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #000 !important;
}

.button-primary:hover {
    background-color: var(--primary-dark) !important;
    border: 1px solid var(--primary-dark) !important;
}

.button-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
}

.button-outline-primary:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}






/* -------------------------------- COLOR -------------------------------- */
.color-primary {
    color: var(--primary) !important;
}

.color-font {
    color: var(--font) !important;
}






/* -------------------------------- MODAIS -------------------------------- */
.modal {
    color: #464c50 !important;
}

.modal-content {
    padding: 10px !important;
}

.modal-btn-close {
    background-color: transparent !important;
    border: none !important;
}


/* -------------------------------- FONTE -------------------------------- */
h2 {
    font-size: 22px;
}

h5 {
    font-size: 16px;
}

.description {
    color: #96979b !important;
    font-size: 15px;
}

h1 {
    font-size: 40px;
}

@media screen and (min-width: 421px) and (max-width: 720px) {
    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 20px;
    }

    h4 {
        font-size: 16px;
    }

    h5 {
        font-size: 14px;
    }

    .description {
        font-size: 13px;
    }
}

@media screen and (max-width: 420px) {
    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 16px;
    }

    h4 {
        font-size: 14px;
    }

    h5 {
        font-size: 12px;
    }

    .description {
        font-size: 11px;
    }

    small {
        font-size: 10px;
    }
}