body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f2f5;
    line-height: 1.6;
}

.header-image {
    width: 100%;
    height: auto;
    /* max-height: 400px;*/
    object-fit: cover;
    margin-bottom: 2.5rem;
}

.card-custom {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-bottom: 0.2rem;
    background-color: white;
    padding: 20px;
    /*text-align: center;*/
}

    .card-custom img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        margin-bottom: 15px; /* Espaço entre a imagem e o restante conteúdo */
    }

.details-info {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    font-size: 1.2rem;
    color: #555;
    gap: 2rem;
}

    .details-info div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .details-info .date,
    .details-info .distance {
        font-weight: bold;
    }

.options-extra {
    margin-top: 20px;
    text-align: left;
}

    .options-extra h4 {
        font-weight: 600;
        margin-bottom: 15px;
        color: #333;
    }

.option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .option-item .description {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
        color: #555;
    }

        .option-item .description i {
            color: #28a745;
            font-size: 1.0rem;
        }

    .option-item .info-icon {
        color: #007bff;
        font-size: 1.0rem;
    }

    .option-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

form .section-title { /* Aplicar <h5 class="section-title"> nos <asp:Literal> dos títulos */
    margin: 2rem 0rem 0rem 0rem;
    font-size: 1.25rem;
    font-weight: 600;
    /*border-left: 4px solid #004080;*/
    padding-left: .75rem;
}

.form-label {
    font-weight: 500;
    color: #495057;
    text-align: left; /* Alinhamento das labels à esquerda */
    display: block; /* Certificar que ocupa a largura total */
    margin-bottom: .35rem;
}

.form-control {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    padding: 0.5rem 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

    .form-control:focus {
        border-color: #80bdff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

.form-control,
.form-select,
.form-time {
    border-radius: .5rem; /* Uniformização */
}

.form-time {
    width: 60px; /* Diminuir a largura */
    padding: 5px; /* Ajustar o padding para que fique mais compacto */
    font-size: 14px; /* Diminuir o tamanho da fonte */
    text-align: center;
    border: 1px solid #ddd;
}

.btn-custom {
    background-color: #004080;
    color: white;
}

    .btn-custom:hover {
        background-color: #0059b3;
    }

.btn-santander {
    background: linear-gradient(to bottom, #50C878, #45A968) !important;
    color: #fff !important;
    border: 1px solid #45A968 !important;
    border-radius: 0.375rem;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    box-shadow: none;
}

    .btn-santander:hover {
        background: linear-gradient(to bottom, #5DDC89, #50C878) !important;
        color: #fff !important;
    }

    .btn-santander:active,
    .btn-santander:focus {
        background: linear-gradient(to bottom, #3A8C58, #2F7048) !important;
        transform: scale(0.97);
        outline: none;
        box-shadow: none;
        color: #fff !important;
    }

.content-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    max-width: 95rem; /* Conteúdo centralizado */
    margin-inline: auto;
}

.nav-tabs .nav-link.active {
    background-color: #343a40;
    color: #ffffff;
    border-color: #343a40;
}

.nav-tabs .nav-link {
    color: #343a40;
    padding-block: .75rem;
    font-weight: 600;
    transition: background-color .25s ease; /* Feedback de hover */
}

    .nav-tabs .nav-link:hover:not(.active) {
        background-color: #e9ecef;
    }

.two-column {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 1.5rem;
}

    .two-column .form-group {
        flex: 1 1 48%;
        margin-bottom: 1.25rem;
    }

.custom-radio-wrapper {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.custom-radio-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-radio-label {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #495057;
    padding-left: 25px;
    position: relative;
}

.custom-radio-circle {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #e9ecef;
    border-radius: 50%;
    border: 2px solid #ced4da;
    transition: background-color 0.3s, border-color 0.3s;
}

.custom-radio-text {
    margin-left: 10px;
}

.custom-radio-input:checked ~ .custom-radio-label .custom-radio-circle {
    background-color: #007bff;
    border-color: #007bff;
}

    .custom-radio-input:checked ~ .custom-radio-label .custom-radio-circle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        background-color: white;
        border-radius: 50%;
    }

.custom-radio-label:hover .custom-radio-circle {
    border-color: #007bff;
}

.custom-checkbox input[type="checkbox"]:disabled {
    background-color: #004080; /* Cor de fundo personalizada quando desabilitado */
    cursor: not-allowed; /* Cursor indicando que o item está desabilitado */
    pointer-events: none; /* Impede a interação com o checkbox */
}

    .custom-checkbox input[type="checkbox"]:disabled + label {
        color: white; /* Cor do texto associado ao checkbox */
    }

.btnCustom {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 8px;
    width: 100%; /* Garantir que ocupem toda a largura */
}

    .btnCustom:hover {
        opacity: 0.9;
    }



.bg-orange {
    background-color: #f08c00 !important;
}

.center-text {
    text-align: center;
}

.barcode {
    font-family: 'Libre Barcode 39', cursive;
    font-size: 20px; /* Ajuste o tamanho conforme necessário */
    letter-spacing: 3px; /* Ajuste o espaçamento se necessário */
}

.mb-0 {
    margin-bottom: 0 !important; /* Garante que não há espaço entre as labels */
}

.countdown-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-family: 'Poppins', sans-serif;
}

.countdown-element {
    text-align: center;
}

.count-number {
    background-color: #fff;
    color: #e63946;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex; /* Alterado de inline-block para flex */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    width: 60px;
}

.count-label {
    margin-top: 8px;
    font-size: 13px;
    color: #333;
    font-weight: 600;
    /*text-transform: uppercase;*/
}

/* Remover o traço */
.count-number:before {
    display: none; /* Remove a linha do meio */
}

/* Estilos para truncamento de texto responsivo */
.nav-link {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Garante que o texto não será quebrado */
    overflow: hidden; /* Oculta o texto extra */
    text-overflow: ellipsis; /* Adiciona as reticências ao final do texto */
    max-width: 100%; /* Garante que ele ocupe todo o espaço disponível */
}

.tab-text {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 225px; /* Ajuste conforme necessário */
}

.custom-select-height {
    height: 70px; /* Aumentando ainda mais a altura da dropdown conforme necessário */
    font-size: 18px; /* Ajuste o tamanho da fonte conforme necessário */
}



/*bandeira:*/
.flag {
    width: 24px !important;
    height: 18px !important;
    margin-right: 8px !important;
    margin-top: 4px !important;
    vertical-align: middle; /* Alinhando verticalmente a bandeira com o texto */
    border-radius: 0 !important; /* Removendo o arredondamento da bandeira */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    align-items: center;
    text-align: left; /* Alinha o texto da seleção para a esquerda */
    justify-content: flex-start; /* Adiciona alinhamento à esquerda */
    padding-top: 8px;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered img {
        margin-right: 8px;
        margin-bottom: 0px;
    }
/* Estilo personalizado para alinhar itens à esquerda */
.select2-results__option {
    text-align: left; /* Alinha o texto das opções para a esquerda */
    margin-top: 4px;
}
/* Ajustes para abrir dropdown para cima */
.select2-dropdown.select2-dropdown--above {
    top: auto;
    bottom: 100%;
}

/* Aumentar a altura da caixa de seleção */
.select2-container .select2-selection--single {
    min-height: 45px; /* Aumentar a altura da caixa de seleção */
    display: flex;
    align-items: center;
    Centralizar o texto verticalmente
}




/* Estilo para indicar que a prova está esgotada com um ar de selo */
.sold-out-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg); /* Centralizar e inclinar o texto */
    width: 95%; /* Define uma largura para se parecer com um selo */
    background: rgba(6, 4, 9, 0.62);
    color: white;
    font-size: 28px;
    font-weight: bold;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    z-index: 10;
    border: 2px solid white;
    border-radius: 10px; /* Adiciona um leve arredondamento para parecer um selo */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.card-container {
    position: relative;
}

.barcode {
    font-family: '3 of 9 Barcode', cursive;
    font-size: 35px; /* Ajuste conforme necessário */
    letter-spacing: 0px; /* Remove o espaçamento entre caracteres */
    font-weight: 400;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Empilha os códigos na vertical */
    align-items: center; /* Garante alinhamento central */
    line-height: 0.7; /* Reduz o espaçamento vertical entre os códigos */
}

    .barcode span {
        margin: 0;
        padding: 0;
        display: block; /* Faz com que cada código fique em uma linha */
    }



@media (max-width: 768px) {
    /* Para telas menores, como tablets ou smartphones */
    .tab-text {
        max-width: 120px; /* Diminui a largura disponível para truncar em dispositivos móveis */
    }
}

@media (max-width: 576px) {
    /* Para telas muito pequenas, como smartphones */
    .tab-text {
        max-width: 80px; /* Trunca ainda mais em telas pequenas */
    }
}

/* Título Principal - Altura 60px */
.m-titulo {
    display: table;
    width: 100%;
    height: 60px;
    text-align: center;
    background-color: #000;
}

/* Título Variante - Altura 80px */
.m-titulo2 {
    display: table;
    width: 100%;
    height: 80px;
    text-align: center;
    background-color: #000;
}

/* Conteúdo do Título */
.m-titulo-content,
.m-titulo-content2 {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 18.5px;
    font-weight: bold;
    letter-spacing: -0.4px;
    color: #fff;
}

.m-titulo-content2 {
    text-align: justify;
}

/* Bloco de Item de Navegação ou Passo */
.m-item {
    display: table;
    width: 100%;
    height: 30px;
    text-align: center;
    background-color: #fff;
    margin: 0;
    padding: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
    /* border-left: 1px solid rgba(141, 141, 141, 0.5); */
}


.step-indicator > div {
    transition: all 0.3s ease;
}

.step-active {
    background-color: #50C878;
    color: #fff;
}

.step-inactive {
    background-color: #f9f9f9;
    color: #212529;
}
/* ----------Responsividade ---------- */
@media (max-width: 992px) {
    .two-column .form-group {
        flex: 1 1 100%;
    }
    /* Coluna única em tablets */
}

@media (max-width: 576px) {
    .nav-tabs .nav-link {
        font-size: .875rem;
    }

    .btn-primary, .btn-custom, .btnCustom {
        font-size: .9rem;
    }
}
@media (max-width: 576px) {
    .superhalf-box {
        padding: 1.5rem;
    }

    .superhalf-options {
        gap: 2rem;
    }

    .superhalf-box .box-title {
        font-size: 1.2rem;
    }
}



/* ---------- Bloco SuperHalfs genérico ---------- */
.superhalf-box {
    background-color: #d88700; /* ligeiramente mais escuro p/ contraste */
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2.5rem; /* maior dist. vertical entre painéis */
    box-shadow: 0 4px 10px rgba(0,0,0,.07);
}

    /* ---------- Título com ícone ---------- */
    .superhalf-box .box-title {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: 1.4rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: .75rem;
    }

    /* ---------- Texto descritivo ---------- */
    .superhalf-box p {
        color: #fff;
        line-height: 1.55;
        max-width: 65ch; /* largura de leitura confortável */
        margin-bottom: 1.25rem;
    }

    /* links sobre fundo laranja */
    .superhalf-box a {
        color: #ffe59d;
        text-decoration: underline;
    }

        .superhalf-box a:hover {
            color: #fff;
        }

    /* ---------- Input de Passaporte ---------- */
    .superhalf-box input[type="text"] {
        max-width: 100% !important; /* não cresce indefinidamente */
        width: 100%;
        border-radius: 10px;
        border: 2px solid #fff;
        padding: .8rem 1rem;
        font-size: 1rem;
    }

/* ---------- Grupo de opções (Sim / Não) ---------- */
.superhalf-options {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 1rem;
}

    .superhalf-options .custom-radio-label { /* já existe o markup */
        font-size: 1.15rem;
        color: #fff;
        font-weight: 600;
    }

    .superhalf-options .custom-radio-circle {
        border: 2px solid #fff;
    }

    /* ----- Radios do cartão SuperHalfs ----- */
    .superhalf-options .form-check-input[type="radio"] {
        width: 22px;
        height: 22px;
        border: 2px solid #fff; /* contorno branco */
        border-radius: 50%; /* círculo perfeito */
        background-color: transparent; /* remove o quadrado */
        box-shadow: none; /* remove sombra retangular do BS */
        accent-color: #fff; /* cor da bolinha marcada (browsers modernos) */
    }

        /* bolinha interior para navegadores sem accent-color */
        .superhalf-options .form-check-input[type="radio"]:checked::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
        }
      .ui-datepicker {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.9rem;
}

.ui-datepicker-header {
    background: #cb171d;
    color: #fff;
    border: none;
    padding: 0.5rem;
    border-radius: 0.375rem 0.375rem 0 0;
    text-align: center;
    font-weight: bold;
}

.ui-datepicker-prev, .ui-datepicker-next {
    background-color: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
}

.ui-datepicker-calendar td a {
    text-decoration: none;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    color: #212529;
    transition: all 0.2s ease-in-out;
    display: inline-block;
}

.ui-datepicker-calendar td a:hover {
    background-color: #cb171d;
    color: #fff;
}

.ui-datepicker-calendar .ui-state-active {
    background-color: #a81218 !important;
    color: #fff !important;
}


.flag-icon {
    width: 36px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

    .flag-icon:hover {
        transform: scale(1.05);
    }

/* opcional: reduz a lacuna interna do form-select para ficar mais compacto */
.col-md-8.offset-md-2 .form-select.w-auto {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

    /* opcional: suaviza o hover/active dos selects */
    .col-md-8.offset-md-2 .form-select.w-auto:focus {
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }