:root {
    --triumph-red: #CD192D;
    --triumph-red-hover: #aa1221;
    --triumph-gold: #C4982C;
}

html {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'triumphbrokmanmedium' !important;
}

main {
    flex: 1;
}

.container-lading-page {
    background: black !important;
}

.logo-img {
    max-height: 50px;
    height: auto;
    width: auto
}

.header-container {
    background: black !important;
}

.header-links:hover {
    color: var(--triumph-gold) !important;
    transition: 0.3s ease-in-out;
}

.navbar-nav {
    padding-right: 30px !important;
    font-size: 1rem;
}

/*banner principal*/
.banner-limitado {
    background-color: #000;
    position: relative;
    width: 100%;
}

    .banner-limitado .banner-imagem {
        max-width: 1920px;
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }


.btn-recover:hover {
    background: var(--triumph-red-hover) !important;
    transition: 0.3s ease-in-out;
}

.btn-recover {
    background: var(--triumph-red) !important;
    border: var(--triumph-red) !important;
    color: white !important;
    text-transform: uppercase;
}
/*btn entrar*/
.btn-outline-entrar {
    padding: 6px 24px !important;
    border-radius: 0px !important;
}
/*step*/
.step-section {
    background-color: #000000;
    padding: 60px 0;
    color: #ffffff;
}

.como-participar h3 {
    color: var(--triumph-gold);
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-family: 'triumphbrokmanheavy', sans-serif;
}

.step-text {
    font-size: 4rem;
}

.fundo-triangulo-bs {
    background-image: url('https://triumph-sorteio.s3.sa-east-1.amazonaws.com/assets/triangulo.webp');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    min-height: 150px;
}

.step-number-bs {
    color: var(--triumph-gold);
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    font-family: 'triumphbrokmanheavy';
    font-weight: bold;
}

.step-text-bs {
    color: #fff;
}

.btn-cadastro, .btn-enviar-forms {
    background: none;
    border: 2px solid white !important;
    text-transform: uppercase;
    border-radius: 0px !important;
    font-family: 'triumphbrokmandemibold' !important;
    padding: .6rem 3rem !important;
}

/* --- Correção para o Fundo do Modal --- */

.modal-backdrop {
    /* Usa uma cor preta com 50% de transparência */
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Garante que o modal em si não fique transparente */
.modal {
    background-color: transparent !important;
}

.btn-cadastro:hover {
    background: black;
    border: 2px solid var(--triumph-gold) !important;
    transition: 0.5s ease-in-out;
}

/*banner 4 chances*/
.banner-chances {
    background: black;
}

/* video banner */

.section-video-bg {
    background-image: url('https://triumph-sorteio.s3.sa-east-1.amazonaws.com/assets/banner-video.webp');
    background-size: cover;
    object-fit: cover;
    width: 100%;
    max-width: 1500px;
    background-repeat: no-repeat;
    height: auto;
    height: 800px;
}

.text-highlight {
    color: #E9BA56;
    font-weight: bold;
}

.video-thumbnail-container {
    position: relative;
    cursor: pointer;
    display: block;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
}

.video-thumbnail-container:hover .play-icon {
    color: #fff;
}

.texto-video {
    font-weight: bold;
}
/*/////////////*/
.form-novo-usuario {
    background-color: black !important;
    color: white;
    z-index: 1050;
    overflow-y: auto;
    padding-top: 1rem;
}

.form-control {
    border-radius: 0px !important;
}

.form-label {
    padding-left: 15px;
}
/*
.modal-backdrop {
    background-color: #000 !important;
    opacity: 1 !important;
}*/

.form-novo-usuario .btn-close {
    margin-right: 50px;
}

/*form de login*/
/* LOGIN PAGE */
.login-container {
    width: 100%;
    position: relative;
}

.login-background {
    width: 100%;
}

    .login-background img {
        width: 100%;
    }

.login-forms {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.login-forms__wrapper {
    grid-column: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 5rem 0;
}

#login-form {
    width: 500px;
    height: max-content;
    background: rgba(0, 0, 0, .6);
    padding: 3rem 2rem 3rem 2rem;
}

.back-button {
    position: absolute;
    top: 1.5rem;
    left: 2rem;
    font-size: 1.5rem;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
    border: 1px solid white;
    border-radius: 5px;
    padding: 0px 5px;
}

    .back-button:hover {
        transform: scale(1.15); /* Efeito sutil ao passar o mouse */
        color: #f0f0f0;
    }

.login-forms__wrapper label {
    color: #fff;
}

.login-forms__wrapper button {
    font-family: "triumphbrokmanbold";
    width: 100%;
    padding: .5rem 0;
    background: #a5202d;
    color: #fff;
    margin-top: 1.5rem;
    outline: none;
    border: none;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

    .login-logo img {
        width: 150px;
    }

.login-forms__texto-1 {
    position: relative;
}

    .login-forms__texto-1 .texto-1 {
        position: absolute;
        top: 50px;
        right: 190px;
    }

.texto-1 {
    font-family: "triumphbrokmanblack";
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-style: italic;
    line-height: 1;
    color: #000;
}

    .texto-1 p {
        margin: 0;
    }

.triumph-texto {
    font-size: 3rem;
    padding-right: 55px;
    display: block;
}

.fi-texto-1 {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .fi-texto-1 p:nth-child(1) {
        font-size: 3rem;
    }

    .fi-texto-1 p:nth-child(2) {
        font-size: 5.7rem;
    }

.texto-2 {
    position: absolute;
    top: 230px;
    right: 200px;
}

    .texto-2 div {
        display: flex;
    }

    .texto-2 p {
        font-style: italic;
    }


    .texto-2 div p:nth-child(1) {
        font-size: 1.5rem;
    }

    .texto-2 div p:nth-child(2) {
        font-size: 2rem;
        font-family: "triumphbrokmanbold";
        margin-left: 2px;
    }

.login-forms__texto-2 {
    width: 100%;
    position: absolute;
    bottom: 30px;
    text-align: center;
}

    .login-forms__texto-2 p {
        font-style: italic;
        color: #fff;
        font-family: "triumphbrokmanmedium";
        font-size: 20px;
    }

        .login-forms__texto-2 p span:not(.tr-black) {
            display: block;
        }


.tr-black {
    font-family: "triumphbrokmanbold";
}

.form-links {
    text-align: center;
    margin-top: 1rem;
}

    .form-links p {
        margin: 5px 0;
        color: var(--tr-white);
    }

        .form-links p a {
            color: #f84040ff;
        }


/* select estado/cidade*/
.custom-select-wrapper {
    position: relative;
}

.custom-select-options {
    display: none; /* Começa escondido */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ced4da;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    color: black;
    z-index: 1000;
}

    .custom-select-options.show {
        display: block;
    }

.custom-option {
    padding: 8px 12px;
    cursor: pointer;
}

    .custom-option:hover {
        background-color: #f0f0f0;
    }

.form-check-label a, .text-danger-gold {
    color: var(--triumph-gold) !important;
}

#modalCadastro .form-check-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.select2-container--default .select2-selection--single {
    border: 1px solid #fff !important;
    border-radius: 0px !important;
    height: calc(1.5em + .75rem + 2px) !important;
    padding: .375rem .75rem !important;
    display: flex !important;
    align-items: center !important;
}

.select2-results__option {
    color: #000;
}

.select2-search__field {
    color: #000;
}

.select2-results__option {
    color: #000;
}

.select2-results__option--highlighted[aria-selected] {
    color: #fff;
}

.select2-search__field {
    color: #000;
}
/**/
form {
    margin: 0 auto;
    /*  display: block;*/
}
/* Estilização do Modal para se comportar como uma página inteira */
#modalCadastro.modal.fade.modal-fullscreen .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
}

#modalCadastro .modal-content {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column; /* Mantém a direção vertical */
    height: 100vh; /* Ocupa a altura total da tela */
    overflow: hidden; /* Impede o scroll na página inteira */
}

/* Título do formulário */
#modalCadastro .form-title {
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 30px;
    margin-top: 20px;
}

/* Corpo do Modal (área do formulário) */
#modalCadastro .modal-body {
    flex-grow: 1;
    overflow-y: auto; /* Adiciona a barra de rolagem APENAS a esta área */
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column; /* Garante que o conteúdo interno flua verticalmente */
}

/* Estilo para os campos de formulário (mantenha seus estilos) */
#modalCadastro .form-control {
    border: 1px solid #fff;
    border-radius: 0;
    color: #000;
}

    #modalCadastro .form-control::placeholder {
        color: #ccc;
    }

    #modalCadastro .form-control:focus {
        background-color: transparent;
        border-color: #E9BA56;
        box-shadow: none;
        color: #fff;
    }

/* Estilo para os radio buttons e checkboxes (mantenha seus estilos) */
#modalCadastro .form-check-input {
    background-color: transparent;
    border: 1px solid #fff;
}

    #modalCadastro .form-check-input:checked {
        background-color: #fff;
        border-color: #fff;
    }

        #modalCadastro .form-check-input:checked:where([type='radio']) {
            background-image: radial-gradient(circle at center, #000 50%, transparent 52%);
            border-color: #fff;
        }

#modalCadastro .form-check-label a {
    color: #fff;
    text-decoration: underline;
}

/* Botão de Enviar */
#modalCadastro .btn-cadastro {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
    padding: 10px;
    width: 100%;
    margin: 20px auto 0;
    display: block;
    letter-spacing: 1px;
}


/* Container da imagem na parte inferior */
#modalCadastro .modal-body > div:last-child {
    flex-shrink: 0; /* Impede que a imagem encolha */
    text-align: center;
    padding: 0;
    margin-top: -75px; /* Adiciona um pouco de espaço entre o form e a imagem */
}

    #modalCadastro .modal-body > div:last-child img {
        width: 90%;
        display: block;
        object-fit: cover;
        margin: 0 auto;
    }
/***/
.text-error {
    color: limegreen;
    font-size: 0.9rem;
    margin-top: 4px;
}

.btn-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background-color: #ffffff6b;
    color: black;
    border: none;
    padding: 10px 16px;
    font-size: 1.3rem;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
}

/* termos */
.terms-container {
    background-color: #1a1a1a; /* Cor de fundo escura */
    border: 1px solid #333; /* Borda sutil */
    border-radius: 4px;
    max-height: 350px; /* Altura máxima da caixa */
    overflow-y: auto; /* Adiciona barra de rolagem vertical se o conteúdo exceder a altura */
    padding: 15px;
    margin-bottom: 15px; /* Espaço abaixo da caixa */
}

.terms-content h3 {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 10px;
    color: #ddd; /* Cor do título */
}

.terms-content p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #ccc; /* Cor do texto */
    margin-bottom: 8px;
}


/* form de sorteio area lead*/

.step-form-sorteio {
    font-size: 2rem;
    margin-right: 20px;
    border-right: 1px solid #212529;
    margin-top: 10px;
    padding-right: 10px;
    color: var(--triumph-red);
    font-family: "triumphbrokmanextrabold"
}

.btn-baixarNF {
    border: 1px solid var(--triumph-red) !important;
    border-radius: 5px !important;
}

.hint-forms-sorteio {
    font-size: 0.75rem !important;
}

.whatsapp-flutuante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #198754; /*verde*/
    border-radius: 50%;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

    .whatsapp-flutuante:hover {
        transform: scale(1.1);
    }

.btn-top {
    right: 80px;
}

.btn .spinner-border {
    width: 1rem;
    height: 1rem;
}

.btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.editar-dados-lead {
    font-size: 1rem;
    color: black !important;
    border: none;
    background: none;
    height: 40px;
}

    .editar-dados-lead i:hover, .editar-dados-lead:hover, .btn-outline-sair:hover {
        color: var(--triumph-red) !important;
        cursor: pointer;
    }

.font-step {
    font-size: 1.1rem;
}

.banner-limitado .banner-conteudo {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
}

#form-leads .btn-enviar-forms:disabled {
    pointer-events: auto !important;
    cursor: not-allowed;
}

#form-leads .btn-enviar-forms {
    position: relative; /* Necessário para o z-index funcionar */
    z-index: 2; /* Coloca o botão em uma camada superior */
}

.toast-container.position-fixed {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.toast-container .toast {
    pointer-events: auto;
}

#form-leads {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.navbar-brand {
    max-width: 180px !important;
}

.margin-step {
    padding: 3rem 3rem 3rem 3rem;
}

.logo-footer {
    max-width: 460px !important;
}


/*======= Pagina de como participar ====== */

.carousel-title {
    text-align: center;
    margin: 40px 0;
    font-weight: bold;
    font-size: 1.6rem;
}

    .carousel-title b, .carousel-title strong {
        color: var(--triumph-gold); /* cor amarela para destaque */
    }

.swiper-slide img {
    width: 100%;
    max-width: 250px;
    object-fit: cover;
}

.swiper {
    padding: 20px 0;
}

.section-carrossel {
    background: #000 !important;
    font-family: "triumphbrokmanmedium", sans-serif;
}

.font-step {
    font-size: 1.3rem;
}

.como-participar h2 {
    font-family: "triumphbrokmanbold",sans-serif;
    font-size: 2.2rem;
}

.fundo-triangulo-como-participar {
    margin-top: -100px;
}

/*@media (max-width: 360){
    .login-forms {
        grid-template-columns: 0;
    }

    .login-forms__wrapper {
        width: 90%;
        max-width: 350px;
        margin: 0 auto;
        margin-top: 200px;
    }
}
*/

.img-logo-footer {
    margin-top: -90px !important;
}

.btn-catalogo {
    font-size: 1.2rem !important;
}

@media (max-width: 414px) {
    #modalCadastro .modal-body > div:last-child img {
        margin-top: 100px !important;
    }

    .como-participar h3 {
        font-size: 2rem !important;
        margin-top: 2rem !important;
    }

    .btn-cadastro {
        margin-bottom: -80px !important;
        font-size: 1rem !important;
        padding: 15px 25px !important;
    }

    .banner-limitado .banner-conteudo {
        bottom: 0rem;
    }

    .step-section {
        padding: 100px 0px 0px 0px;
    }

    .font-step {
        font-size: 1rem;
    }

    .margin-step {
        padding: 1rem 0rem 0rem 1.1rem;
    }

    .section-video-bg {
        min-height: 30vh;
    }

    .img-fluid {
        margin-top: -60px !important;
    }

    .section-video-bg {
        background-image: none;
    }

        .section-video-bg h2 {
            margin-bottom: 60px !important;
        }

    .btn-enviar-forms {
        font-size: 1rem !important;
    }

    .section-video-bg {
        height: 100%;
    }

    .logo-footer {
        max-width: 250px !important;
    }

    .btn-cadastro, .btn-enviar-forms {
        padding: .6rem 2rem !important;
    }

    #modalCadastro .modal-body > div:last-child {
        margin-top: -75px; /* Adiciona um pouco de espaço entre o form e a imagem */
    }

        #modalCadastro .modal-body > div:last-child img {
            width: 100%;
        }

    .login-forms {
        grid-template-columns: 0;
    }

    .login-forms__wrapper {
        width: 90%;
        max-width: 350px;
        margin: 0 auto;
        margin-top: 400px;
    }

    .como-participar h2 {
        font-size: 1.5rem;
    }

    .font-step-como-participar {
        margin-left: 120px !important;
        margin-top: 70px !important;
    }

    .fundo-triangulo-como-participar {
        background-size: auto;
    }

    .img-como-participar img {
        max-width: 330px !important;
    }

    .promocao-valida p {
        margin-top: 100px;
    }

    .btn-como-participar {
        padding: 10px !important;
    }

    .swiper-slide {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .fundo-triangulo-como-participar {
        margin-top: 0;
        margin-top: -100px;
    }
}

@media (min-width: 415px) and (max-width: 577px) {

    #modalCadastro .modal-body > div:last-child img {
        margin-top: 100px !important;
    }

    .font-step {
        font-size: medium;
        margin-left: 120px !important;
        margin-top: 80px !important;
    }

    .como-participar h3 {
        font-size: 2rem !important;
        margin-top: 2rem !important;
    }

    .btn-cadastro {
        margin-bottom: -160px !important;
        font-size: 1.3rem !important;
        padding: 10px 15px !important;
    }

    .section-video-bg {
        min-height: 30vh;
    }

    .img-fluid {
        margin-top: -60px !important;
    }

    .section-video-bg {
        background-image: none;
    }

        .section-video-bg h2 {
            margin-bottom: 60px !important;
        }

    .btn-enviar-forms {
        font-size: 1rem !important;
    }

    .step-section {
        padding: 60px 0px 0px 0px;
    }

    .section-video-bg {
        height: 100%;
    }

    .logo-footer {
        max-width: 250px !important;
    }

    .btn-cadastro, .btn-enviar-forms {
        padding: .6rem 2rem !important;
    }

    .login-forms__wrapper {
        width: 90%;
        max-width: 350px;
        margin: 0 auto;
        margin-top: 450px;
        margin-right: 35px;
    }

    .fundo-triangulo-como-participar {
        margin-top: -110px;
    }

    .fundo-triangulo-como-participar {
        background-size: auto;
    }

    .img-como-participar img {
        max-width: 350px !important;
    }

    .promocao-valida p {
        margin-top: 200px !important;
        padding: 10px;
    }

    .btn-como-participar {
        padding: 10px !important;
        height: 90px !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .font-step {
        font-size: 1.2rem;
    }

    .como-participar h3 {
        font-size: 3rem !important;
    }

    .btn-cadastro {
        margin-bottom: -45px;
        font-size: 1rem !important;
        padding: 6px 35px !important;
    }

    .section-video-bg {
        min-height: 30vh;
    }

    .img-fluid {
        margin-top: -60px !important;
    }

    .section-video-bg {
        background-image: none;
    }

        .section-video-bg h2 {
            margin-bottom: 80px !important;
        }

    .login-forms {
        grid-template-columns: 1fr; /* só uma coluna no mobile */
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .login-forms__wrapper {
        grid-column: auto;
        margin: 1.5rem 0;
        justify-content: center;
    }

    #login-form {
        width: 90%;
        max-width: 400px;
        margin: 0 auto;
    }

    .texto-1,
    .texto-2 {
        position: static;
        text-align: center;
        margin: 1rem 0;
    }

    .section-video-bg {
        height: 100%;
    }

    .logo-footer {
        max-width: 350px !important;
    }

    #modalCadastro .modal-body > div:last-child img {
        margin-top: 100px !important;
    }

    .login-forms__wrapper {
        width: 90%;
        max-width: 350px;
        margin: 0 auto;
        margin-top: 450px;
    }

    .carousel-title {
        font-size: 1.4rem;
    }

    .carousel-controls {
        justify-content: center; /* Centraliza os controles no mobile */
        flex-direction: column; /* Empilha paginação e botões */
        align-items: center;
    }

        .carousel-controls .swiper-pagination {
            margin-right: 0;
            margin-bottom: 15px; /* Espaço entre paginação e botões */
        }

    .fundo-triangulo-como-participar {
        margin-top: 0;
    }

    .fundo-triangulo-como-participar {
        background-size: auto;
        margin-top: -160px;
    }

    .font-step-como-participar {
        margin-top: 60px !important;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .font-step, .btn-enviar-forms {
        font-size: 1.2rem;
    }

    .btn-cadastro {
        margin-bottom: -45px;
        font-size: 1rem !important;
        padding: 6px 35px !important;
    }

    .section-video-bg {
        min-height: 30vh;
    }

    .img-fluid {
        margin-top: -60px !important;
    }

    .section-video-bg {
        background-image: none;
    }

        .section-video-bg h2 {
            margin-bottom: 80px !important;
        }
}

@media (max-width: 768px) {
    .carousel-title {
        font-size: 1.3rem;
        margin: 20px 0;
    }

    .img-logo-footer {
        margin-top: 15px !important;
    }

    .btn-catalogo {
        font-size: 1.2rem !important;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .navbar-nav {
        padding-right: 10px !important;
        font-size: 0.7rem;
    }

    .btn .btn-warning .btn-outline-entrar {
        font-size: 0.6rem !important;
    }

    .navbar-brand {
        max-width: 120px !important;
    }

    .btn-cadastro {
        margin-bottom: -30px;
        font-size: 1.4rem !important;
    }

    .section-video-bg {
        height: 580px;
    }

    .font-step {
        font-size: 0.8rem;
    }

    .font-step-como-participar {
        margin-left: 90px !important;
    }

    .img-logo-footer {
        margin-top: -20px !important;
    }
}

@media (min-width: 1201px) and (max-width: 1440px) {
    .banner-limitado .banner-conteudo {
        bottom: 1rem;
    }

    .font-step {
        font-size: 0.9rem;
    }

    .font-step-como-participar {
        margin-left: 90px !important;
    }
}

@media (min-width: 1441px) and (max-width: 1920px) {
}

@media (min-width: 1921px) and (max-width: 2560px) {
}

@media (min-width: 2561px) {
}