:root {
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius: 0.4rem;
    --bs-primary-rgb: 111, 66, 193;
    --bs-focus-ring-color: rgba(111, 66, 193, .25); /* Roxo com 25% de transparência */
}

/* Definição da fonte principal (herdada por todos os elementos) */
html, body {
    font-size: 0.995rem;
    font-family: "Noto Sans Newa", sans-serif;
    font-weight: 400; /* Padrão para corpo de texto */
    font-style: normal;
}

/* Peso da fonte para cabeçalhos (uso de peso mais proeminente) */
h1, h2, h3 {
    font-weight: 800; /* Mais contraste para os títulos principais */
}

h4, h5, h6 {
    font-weight: 600; /* Contraste moderado */
}

/* Classes para texto menor/auxiliar*/
small {
    font-size: 0.875rem; !important;
}

.small-md {
    font-size: 0.9rem;
    letter-spacing: -0.04em;
}

.smaller {
    font-size: 0.80rem !important;
}

/* 1. Seletores Abrangentes para Campos de Texto e Interação */
/* Seleciona todos os inputs com tipos comuns de texto, além de SELECT e TEXTAREA. */
/* O .form-control geralmente é a classe principal para estilização. */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="number"],
input[type="tel"],
select:not([multiple]), /* Seleciona select simples */
textarea /* Inclui a classe genérica para garantir cobertura */
{
    /* 1.1 Redução do Tamanho da Fonte (Tipografia) */
    /* Usar PX: Para previsibilidade (14px). Ótimo para inputs. */
    font-size: 14px;

    /* OU (Se preferir acessibilidade/responsividade) */
    /* font-size: 0.875rem; /* (14px se o root for 16px) */

    /* 1.2 Redução da Altura do Campo (Padding Vertical e Horizontal) */
    /* Reduz o preenchimento para tornar o campo mais compacto verticalmente. */
    /* Usa REM para que o padding seja proporcional ao tamanho da fonte. */
    padding: 0.35rem 0.75rem;

    /* Garante que a altura da linha seja proporcional ao novo tamanho da fonte */
    line-height: 1.4;
}

select:not([multiple]) /* Seleciona select simples */
{
    font-size: 14px;
    padding: 0.55rem 0.45rem;
    line-height: 1.4;
}
/* 2. Estilizando as Opções de SELECT (dropdowns) */
/* Garante que o texto nas opções (o que aparece ao clicar) também seja menor. */
select option {
    font-size: 14px; /* Correspondente ao font-size do select */
}

/* 3. Ajuste para Floating Labels */
/* Se você usa o estilo de Floating Labels (labels que flutuam ao clicar), */
/* pode ser necessário ajustar a posição superior da label flutuante para que não quebre. */
.form-floating > label {
    padding: 1rem 1rem;
    /* Ajuste o top se a label estiver muito baixa ou alta */
    /* top: 0; */
}

.form-select-sm {
    padding-top: 0.46rem;
    padding-bottom: 0.46rem;
    padding-left: 1rem;
    font-size: 1rem;
    border-radius: var(--bs-border-radius-sm);
}

.form-select-sm > option {
    padding: 1em !important;
}

/*botões customizados*/
.btn-outline-secondary {
    border-color: #cccccc; /* A soft gray hex code */
    color: #6c757d; /* Keep text color consistent or adjust */
}

/* Definição do botão Extra Small (.btn-xs) */
.btn-xs, .btn-group-xs > .btn {
    /* Reduzir o padding vertical (metade do .btn-sm) */
    --bs-btn-padding-y: 0.2rem;

    /* Manter ou reduzir o padding horizontal */
    --bs-btn-padding-x: 0.75rem; /* Ajustado de 1rem para 0.75rem */

    /* Reduzir um pouco a fonte, se necessário */
    --bs-btn-font-size: 0.75rem; /* Reduzido de 1rem para 0.75rem */

    /* Usar o menor border-radius disponível, se não for definido, use var(--bs-border-radius-sm) */
    --bs-btn-border-radius: var(--bs-border-radius-sm, 0.25rem);
}

.form-select:focus {
    /* Manter as propriedades de borda do Bootstrap, se necessário */
    /* border-color: var(--bs-form-select-focus-border-color); */

    /* Zera os dois primeiros valores (offset x e y) */
    /* Zera o terceiro valor (blur radius) */
    /* Reduz o quarto valor (spread radius) para 0.15rem */

    /* Exemplo: Reduz o anel para 0.15rem */
    box-shadow: 0 0 0 0.05rem rgba(var(--bs-primary-rgb), .25);
    border-color: rgba(87,79,236,.5);
    color: var(--bs-body-color);

    /* Você também pode usar a variável de foco se a cor estiver configurada */
    /* box-shadow: 0 0 0 0.15rem var(--bs-focus-ring-color); */
}

.form-selector span {
    /* Garante que o span seja um bloco (ou inline-block) para aceitar a largura */
    display: inline-block;

    /* Define uma largura mínima que acomode o maior valor (ex: 8.5" ou 8.75") */
    min-width: 65px; /* Ajuste este valor conforme a necessidade visual */

    /* Centraliza o texto dentro da largura fixa */
    text-align: center;
}

/* Or for a custom class */
.btn-soft-gray-border {
    border-color: #cccccc;
    color: #6c757d;
    background-color: transparent; /* Ensure no background */
}

/*
 * Botão WhatsApp (Base: #25D366)
 */
.btn-whatsapp {
    color: #fff; /* Texto branco */
    background-color: #25D366; /* Verde WhatsApp principal */
    border-color: #25D366;
}

/* Estado Hover, Focus e Active (Quando o usuário interage) */
.btn-whatsapp:hover,
.btn-whatsapp:focus,
.btn-whatsapp:active {
    background-color: #1FAF59; /* Verde um pouco mais escuro para o hover */
    border-color: #1FAF59;
    /* Sombra (Box-Shadow) */
    box-shadow: 0 4px 11px rgba(37, 211, 102, 0.45);
    /* Usamos o RGB do verde principal com 45% de opacidade para a sombra */
}
/*
 * 2. REGRAS GERAIS E SOBRESCRITAS DE UTILITÁRIOS
 */
.product-detail .product-img {
    padding: 4px !important;
}

.monospace {
    font-family: "Ubuntu Mono", monospace;
}

.mono-bold {
    font-family: "Ubuntu Mono", monospace;
    font-weight: 700;
}

.typed {
    font-family: "Ubuntu Mono", monospace;
    font-weight: 400;
    font-style: normal;
}
/*
 * 3. COMPONENTE: CUPOM (Efeito Picotado)
 */
.coupon .kanan .info::after, .coupon .kanan .info::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    /* Ajuste para a cor de fundo real do seu container .coupon */
    background: #fff; /* Exemplo: se o fundo for branco */
    border-radius: 100%;
}
/* O background do dl:before, por exemplo, é #ddd. Verifique a cor correta */
.dl:before{content:" ";height:20px;width:20px;background:#ddd;border-radius:20px;position:absolute;left:50%;top:20px;margin-left:-10px}

/*pequeno acerto nos nav itens do menu*/
.nav-item.active .nav-link span { font-weight: bold;}

/*toast*/
#wrapper_toast_br,
#wrapper_toast_tc { /*top-center position toast*/
    max-width: 650px;
    min-width: 400px;
}
.toast{
    max-width: 650px;
    min-width: 400px;
}
.js-toast{
    max-width: 650px;
    min-width: 400px;
}

/* =================================================================*/
.doc-section-title {
    display: block;
    scroll-margin-top: 100px;
    /*border-bottom: 2px solid #dde4ea!important;*/
    /*border-bottom:  1px solid #eaeff7;*/
    border-bottom:  1px solid #f8f9fa;
    /*box-shadow: 0 6px 12px rgba(140,152,164,.075);*/
    /*background-color: var(--bs-gray-200);*/
}

.doc-section-title p,
.doc-section-title .container-doc {
    margin-bottom: 0 !important;
}

.anchor-js-link {
    font-weight: 400;
    color: rgba(13,110,253,0.5);
    transition: color 0.15s ease-in-out;
    text-decoration: none;
    opacity: 0;
}
.doc-anchor:hover > .anchor-js-link {
    opacity: 1;
}
.anchor-js-link::after {
    content: "#";
}


/* =================================================================*/
/* =================================================================
 * A. ESTILOS PARA OPÇÕES DE FRETE DINÂMICAS
 * (MELHOR ENVIO - .btn-outline-secondary)
 */
#checkout-frete-fallback-option label.btn-outline-secondary,
#checkout-frete-melhorenvio label.btn-outline-secondary {
    border-color: #e9ecef;
    transition: all 0.2s ease-in-out;
    background-color: #fafafa; /* Garantir fundo branco */
}

/* Cores de Texto Padrão: Mais suave que o preto puro */
#checkout-frete-fallback-option label strong,
#checkout-frete-melhorenvio label strong {
    color: #424548;
}
/* Texto de detalhe/preço (muted) */
#checkout-frete-fallback-option label span.text-muted,
#checkout-frete-melhorenvio label span.text-muted {
    color: #535557 !important; /
}

#checkout-frete-fallback-option label.btn-outline-secondary:hover,
#checkout-frete-melhorenvio label.btn-outline-secondary:hover {
    background-color: #F0F0F0;
    border-color: #E0E0E0;
    color: #3d3d3d;
}

#checkout-frete-fallback-option label.btn-outline-secondary:hover *,
#checkout-frete-melhorenvio label.btn-outline-secondary:hover * {
    /* Remove a regra que forçava cor branca */
    color: inherit !important;
}

#checkout-frete-fallback-option input[type="radio"]:checked + label.btn-outline-secondary,
#checkout-frete-fallback-option input[type="radio"]:checked + label.btn-outline-primary,
#checkout-frete-melhorenvio input[type="radio"]:checked + label.btn-outline-secondary,
#checkout-frete-melhorenvio input[type="radio"]:checked + label.btn-outline-primary {
    background-color: #e8e8e8;
    border-color: #B8B8B8;
    color: #383838;
}

#checkout-frete-fallback-option input[type="radio"]:checked + label.btn-outline-secondary *,
#checkout-frete-fallback-option input[type="radio"]:checked + label.btn-outline-primary *
#checkout-frete-melhorenvio input[type="radio"]:checked + label.btn-outline-secondary *,
#checkout-frete-melhorenvio input[type="radio"]:checked + label.btn-outline-primary * {
    color: #3a3838 !important;
}

/* ===============================
 * B. ESTILOS PARA FORMA PAGAMENTO
 * ===============================
 */

/* Seletor para o Pagamento (Se você precisar do Pagamento) */
#checkout-pagamento label.btn-outline-primary {
    color: #0d6efd; /* Cor do texto padrão (Azul) */
}

#checkout-pagamento input[type="radio"]:checked + label.btn-outline-primary {
    background-color: #0d6efd; /* Azul primário */
    border-color: #0d6efd;
    color: #fff;
}

/* Garante que o texto fique BRANCO no CHECKED (Fallback e Pagamento) */
#checkout-pagamento input[type="radio"]:checked + label.btn-outline-primary * {
    color: #fff !important;
}

/*
 * Estilos de HOVER (Aplique-os onde eles fazem sentido)
 */
#checkout-pagamento label.btn-outline-primary:hover {
    background-color: #0d6efd; /* Pode ser azul no hover para todos, ou defina cores diferentes */
    border-color: #0d6efd;
    color: #fff;
}
/* Garante que o texto fique BRANCO no HOVER */
#checkout-pagamento label.btn-outline-primary:hover * {
    color: #fff !important;
}

/***********************/
/*swipper pagination*/
.swiper-pagination-progressbar-fill {
    border: 2px solid rgb(166, 166, 166);
    border-radius: 5px;
}

.swiper-pagination-progressbar {
    background-color: rgba(238, 238, 238, 0.3);
    border-radius: 5px;
}

/*Process Steps - Variações de Status por Item*/
/* --- 1. Regra de PRIORIDADE: Ponto Branco em 'ACTIVE' --- */
/* Garante que o ponto interno fique branco quando APENAS ATIVO, independente da cor */
.process-step-item {
    font-size: 0.9em;
}
.process-step-item.active:before {
    background: #ffffff !important;
}

/* --- 2. Variação de Status: WARNING (Laranja) para 'Em Análise' --- */
.process-step-item.process-step-warning {
    /* Cor da linha e da borda do ponto. */
    border-color: #ffc107;
}
.process-step-item.process-step-warning:before {
    /* Cor da borda do ponto. */
    border-color: #ffc107;
}
/* Altera o fundo do ponto para Laranja APENAS quando COMPLETO. */
.process-step-item.process-step-warning.complete:before {
    background: #ffc107 !important;
}

/* --- 3. Variação de Status: SUCCESS (Verde) para 'Completo' --- */
.process-step-item.process-step-success {
    /* Cor da linha e da borda do ponto. */
    border-color: #28a745;
}
.process-step-item.process-step-success:before {
    /* Cor da borda do ponto. */
    border-color: #28a745;
}
/* Altera o fundo do ponto para Verde APENAS quando COMPLETO. */
.process-step-item.process-step-success.complete:before {
    background: #28a745 !important;
}

/* --- 4. Variação de Status: SECONDARY (Opcional, se precisar de um tom de cinza/azul) --- */
.process-step-item.process-step-secondary {
    /* Ex: Cor mais discreta/neutra */
    border-color: #6c757d;
}
.process-step-item.process-step-secondary:before {
    border-color: #6c757d;
}
.process-step-item.process-step-secondary.complete:before {
    background: #6c757d !important;
}
/*Process Steps - Variações de Status por Item*/
/* ... (regras existentes: active:before, warning, success, secondary) ... */

/* --- 5. Variação de Status: DANGER (Vermelho) para 'Cancelado/Erro' --- */
.process-step-item.process-step-danger {
    /* Cor da linha e da borda do ponto. */
    border-color: #dc3545; /* Bootstrap Red */
}
.process-step-item.process-step-danger:before {
    /* Cor da borda do ponto. */
    border-color: #dc3545;
}
/* Altera o fundo do ponto para Vermelho quando COMPLETO ou o marcador opcional */
.process-step-item.process-step-danger.complete:before,
.process-step-item.process-step-danger.active:before {
    background: #dc3545 !important;
}

/* ----------------------------------------------------------------------------------- */
/* REGRAS CRUCIAIS PARA CANCELADO:                                                      */
/* ----------------------------------------------------------------------------------- */

/* Quando o pedido é CANCELADO, todas as etapas COMPLETED devem herdar a cor de erro */
/* Isso fará com que todas as linhas e bolhas anteriores fiquem vermelhas */
.process-steps .process-step-item.complete.process-step-danger {
    border-color: #dc3545;
}
.process-steps .process-step-item.complete.process-step-danger:before {
    border-color: #dc3545;
    /* Linha abaixo garante que a bolha fique VERMELHA, não verde/laranja/etc. */
    background: #dc3545 !important;
}

/* O passo opcional Cancelado deve ser o ponto ATIVO e vermelho */
.process-steps .process-step-item.active.process-step-danger {
    border-color: #dc3545;
}
.process-steps .process-step-item.active.process-step-danger:before {
    border-color: #dc3545;
    background: #dc3545 !important; /* Ponto vermelho em vez de branco */
    /* Você pode querer que o ponto ATIVO cancelado seja branco, dependendo do design */
    /* Se quiser branco, REMOVA a linha background: #dc3545 !important; e deixe a regra original do 'active:before' em vigor. */
}
/***********************/
@media print {

    .fit-print {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 0.75rem !important;

        /* Adicionando a variável de volta (sem o !important inválido) */
        --bs-btn-font-size: 0.75rem;
    }

    /* Regra para compactar o padding dos botões de rádio no checkout na impressão (se necessário) */
    .fit-print #checkout-frete label.btn-outline-primary,
    .fit-print #checkout-pagamento label.btn-outline-primary {
        padding: 0.3rem 0.6rem !important; /* Exemplo: Reduz o padding padrão do btn-sm */
    }

    /* Remova esta regra, ou a utilize se tiver certeza da estrutura interna */
    /*.fit-print .p-3 { padding: 0.5rem !important; }*/
}