:root {
    --fc-dark: #0f1115;
    --fc-surface: #151a22;
    --fc-accent: #ff6b00;
}

body {
    background: var(--fc-dark);
    color: #f3f6fb
}

.topbar {
    background: #BA2401;
    /*color: #9aa3b5*/
    /*font-size: .925rem*/
}

.topbar a {
    color: white;
}

.topbar .topbar-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.topbar .topbar-links a {
    display: inline-block;
    font-weight: 500;
    white-space: nowrap;
}

.topbar .topbar-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.topbar .topbar-link-item {
    display: flex;
    align-items: center;
}

.topbar .topbar-link-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.topbar .topbar-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.topbar .topbar-links .col {
    min-width: 0;
}

.topbar .topbar-lang {
    display: flex;
    align-items: center;
}

@media (max-width: 767.98px) {
    .topbar .topbar-content {
        justify-content: flex-end;
    }

    .topbar .topbar-links {
        gap: 0.5rem;
    }
}

@media (max-width: 327px) {
    .topbar-link-item a {
        font-weight: 100;
        font-size: 12px;
        text-transform: uppercase;
    }
}

.brand-logo {
    height: 98px;
    width: auto;
    display: block;
}

header .navbar-brand {
    display: flex;
    justify-content: center;
    width: 100%;
}

@media (min-width: 992px) {
    header .navbar-brand {
        justify-content: flex-start;
    }
}


[v-cloak] {
    display: none;
}

.hero {
    background: #0d1016;
    border: 1px solid #242b39;
    border-radius: 1rem
}

/* BLOCO COLADO: banner + benefits + abas (sem espaçamentos entre eles) */
.stack-tabs {
    border-radius: 3px;
    overflow: hidden;
}

.stack-tabs > * {
    margin: 0 !important;
}

.stack-tabs .carousel {
    margin: 0 !important;
}

.stack-tabs .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 799px) {
    .benefits-img {
        display: none;
        width: 100%;
        height: auto;
    }

    .benefits-img-mob {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (min-width: 800px) {
    .benefits-img {
        display: block;
        width: 100%;
        height: auto;
    }

    .benefits-img-mob {
        display: none;
        width: 100%;
        height: auto;
    }
}


.product-card {
    background: #151a22;
    border: 1px solid #2a3140
}

.modal-soft-dark {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
}

.product-thumb {
    /*background: #0d1118;*/
    background: #fff;
    border: 1px solid #2a3140
}

.category-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-img {
    background: #fff;
    border: 1px solid #2a3140
}

.badge-soft {
    --badge-strong: #ff7a1a;
    --badge-light: #ffb347;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .45rem 1rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 800;
    color: #1a0f00;
    background: linear-gradient(135deg, var(--badge-strong), var(--badge-light));
    /*border-radius: .9rem;*/
    box-shadow: 0 12px 18px rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .18);
    overflow: visible;
}

.badge-soft::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, .3), transparent 60%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.badge-soft--featured {
    --badge-strong: #ff7a00;
    --badge-light: #ffc266;
    color: #1e1200;
}

.badge-soft--launch {
    --badge-strong: #00c853;
    --badge-light: #6ff2ae;
    color: #00290e;
}

.badge-soft--bestseller {
    --badge-strong: #7c4dff;
    --badge-light: #c2b0ff;
    color: #0f083a;
}

/* Faixa das abas */
.tabs-band {
    background: #FF9421;
    padding: .5rem 1rem;
}

.tabs-band .nav-tabs {
    border-bottom: none;
}

.tabs-band .nav-link {
    color: #fff !important;
    font-weight: 700;
    background: transparent;
    border: none;
    margin: 0 .25rem;
    border-radius: .5rem;
}

.tabs-band .nav-link.active {
    background: #E53935;
    color: #fff;
}

@media (max-width: 450px) {
    .tabs-band .nav-tabs {
        gap: 0.35rem;
        flex-wrap: nowrap;
    }

    .tabs-band .nav-item {
        flex: 1 1 0;
        min-width: 0;
    }

    .tabs-band .nav-link {
        margin: 0;
        padding: 0.35rem 0.25rem;
        font-size: 1.00rem;
        text-align: center;
        line-height: 1.2;
    }

    .tabs-band .tab-label {
        white-space: nowrap;
        display: block;
    }
}

@media (max-width: 400px) {
    .tabs-band .nav-tabs {
        gap: 0.2rem !important;
    }

    .tabs-band .nav-link {
        font-size: 1.0rem !important;
    }
}

@media (max-width: 360px) {
    .tabs-band .nav-link {
        font-size: 0.80rem !important;
    }
}

@media (max-width: 499px) {
    .hide-on-mob {
        display: none !important;
    }

    .show-on-mob {
        display: block !important;
    }
}

@media (min-width: 500px) {
    .show-on-mob {
        display: none !important;
    }
}


/* ===== Cadastro (reaproveita a paleta do tema) ===== */
.form-card .card-header {
    background: #151a22;
    border-bottom: 1px solid #2a3140
}

.form-card .card-footer {
    background: #151a22;
    border-top: 1px solid #2a3140
}

.form-card .btn-outline-light {
    border-color: #2a3140;
    color: #f3f6fb
}

.form-card .btn-outline-light:hover {
    background: #2a3140
}

.form-card .form-check-input:checked {
    background-color: #FF9421;
    border-color: #FF9421
}

.form-card .btn-primary {
    background: #2e6df6;
    border-color: #2e6df6
}

.form-card .btn-primary:hover {
    filter: brightness(1.05)
}

/* carrossel horizontal */
.hscroll {
    display: flex;
    flex-wrap: nowrap; /* não quebrar linha */
    overflow-x: auto;
    scroll-behavior: smooth; /* animação no scroll */
    padding-bottom: .25rem; /* espaço p/ scrollbar não encostar */
}

/* cada card ocupa uma “laje” fixa (responsivo) */
.product-slide {
    flex: 0 0 auto;
    width: 85%;
}

@media (min-width: 576px) {
    .product-slide {
        width: 48%;
    }
}

@media (min-width: 992px) {
    .product-slide {
        width: 24%;
    }
}

/* (opcional) scrollbar mais fina */
.hscroll::-webkit-scrollbar {
    height: 8px;
}

.hscroll::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 4px;
}

.hscroll {    
    scrollbar-color: #666 transparent;
    scrollbar-width: thin;
}

.wysiwyg-content {
    line-height: 1.6;
}

.wysiwyg-content p {
    margin-bottom: 1rem;
}

.wysiwyg-content ul,
.wysiwyg-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.wysiwyg-content a {
    color: #FF9421;
    text-decoration: underline;
}

.wysiwyg-content img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
    margin: .5rem 0;
}

/* Faixa das abas */
/* ===== Abas dos modelos (faixa laranja + blocos colados) ===== */
.tabs-band {
    --tabs-pad-y: .8rem;
    background: #FF9421; /* mantém a faixa laranja */
    padding: var(--tabs-pad-y) 0;
}

.tabs-band .nav-tabs {
    border-bottom: none;
    justify-content: center;
    gap: 0; /* blocos colados */
}

.tabs-band .nav-item {
    position: relative;
}

/* Botões */
.tabs-band .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.4rem;
    font-family: "Roboto", sans-serif; /* tipografia */
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    border: none !important;
    border-radius: 0 !important;
    line-height: 1;
    background: transparent;
    transform: translateZ(0);
}

/* Texto (para o zoom no hover) */
.tabs-band .nav-link .tab-label {
    display: inline-block;
    transition: transform .12s ease-out;
}

.tabs-band .nav-link:hover .tab-label {
    transform: scale(1.07);
}

/* Cores de fundo e texto por item */
.tabs-band .nav-item:nth-child(1) .nav-link {
    background: #E53935; /* CRF 300F */
    color: #fff;
}

.tabs-band .nav-item:nth-child(2) .nav-link {
    background: #FF4D4D; /* CRF 250F */
    color: #fff;
}

.tabs-band .nav-item:nth-child(3) .nav-link {
    background: #ffffff; /* CRF 230F */
    color: #E53935; /* texto vermelho para contraste */
    color-scheme: only light; /* impede o auto dark mode mobile de inverter o bloco */
    background-image: linear-gradient(#ffffff, #ffffff); /* força o branco mesmo em navegadores que adaptam cores */
}

/* Underline (faixa inferior) em todos */
.tabs-band .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
}

.tabs-band .nav-item:nth-child(1) .nav-link::after {
    background: #E53935;
}
/* 300F: vermelho */
.tabs-band .nav-item:nth-child(2) .nav-link::after {
    background: #2962FF;
}
/* 250F: azul */
.tabs-band .nav-item:nth-child(3) .nav-link::after {
    background: #E53935;
}
/* 230F: vermelho */

/* Ativo: mantém as cores (sem arredondar) */
.tabs-band .nav-link.active {
    outline: none;
}


/* ===== Fixes abas modelos ===== */

/* 1) Underline da 300F deve aparecer (preto) e por cima */
.tabs-band .nav-item:nth-child(1) .nav-link::after {
    background: #000; /* preto */
    z-index: 1;
}

/* 2) Texto da 230F em vermelho com prioridade alta */
.tabs-band .nav-item:nth-child(3) .nav-link,
.tabs-band .nav-item:nth-child(3) .nav-link .tab-label {
    color: #E53935 !important; /* força contraste no fundo branco */
}

/* 3) Zoom mais forte no hover e PERMANECE quando ativo */
.tabs-band .nav-link .tab-label {
    transition: transform .12s ease-out;
}

/* 4) Em dispositivos com tema escuro, reforça o fundo branco fixo */
@media (prefers-color-scheme: dark) {
    .tabs-band .nav-item:nth-child(3) .nav-link {
        background: #ffffff !important;
        background-image: linear-gradient(#ffffff, #ffffff);
    }
}

.tabs-band .nav-link:hover .tab-label {
    transform: scale(1.12); /* zoom maior no hover */
}

.tabs-band .nav-link.active .tab-label {
    transform: scale(1.35); /* mantém zoom quando selecionado */
    text-decoration: overline;
}

    

/* Galeria do produto */
.product-gallery .thumb-btn {
    border: 1px solid var(--bs-secondary);
    background: #111;
    padding: 2px;
    border-radius: .375rem;
    width: 70px;
    height: 70px;
}

.product-gallery .product-thumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .35rem;
}

.product-gallery .thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery .thumb-btn.active {
    outline: 2px solid #FF9421;
    border-color: #FF9421;
}

.product-gallery .product-video iframe {
    border: 0;
    border-radius: .5rem;
}

.product-gallery .video-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.product-gallery .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

.product-gallery .video-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 2px 6px;
    border-radius: .35rem;
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Skeleton loader */
.skeleton-card {
    background: #0a0a0a;
    border: 1px solid #1f1f1f;
    color: transparent;
}

.skeleton-box,
.skeleton-line,
.skeleton-badge {
    position: relative;
    overflow: hidden;
    border-radius: .35rem;
    background: #1e1e1e;
    min-height: 12px;
}

.skeleton-box {
    width: 100%;
    height: 100%;
    border-radius: .5rem;
}

.skeleton-badge {
    width: 120px;
    height: 28px;
    border-radius: .25rem .8rem .8rem .3rem;
}

.skeleton-line.w-50 { width: 50% !important; }
.skeleton-line.w-75 { width: 75% !important; }
.skeleton-line.w-100 { width: 100% !important; }

.skeleton-card .card-body {
    gap: .5rem;
}

.skeleton-box::after,
.skeleton-line::after,
.skeleton-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
    animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}


/* Submenu de categorias abaixo das abas */
.cat-submenu {
    background: #111;
    border-top: 1px solid var(--bs-secondary);
    border-bottom: 1px solid var(--bs-secondary);
    position: sticky;
    top: 0;
    z-index: 10; /* gruda no topo ao rolar */
}

.cat-submenu .cat-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center; /* <-- centraliza */
    gap: .5rem;
    overflow-x: auto;
    padding: .75rem 0;
}

@media (max-width:575.98px) {
    .cat-submenu .cat-row {
        justify-content: flex-start;
    }
}

.cat-submenu .pill {
    flex: 0 0 auto;
    border: 1px solid var(--bs-secondary);
    color: #fff;
    background: #000;
    padding: .4rem .8rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
}

.cat-submenu .pill.active,
.cat-submenu .pill:hover {
    background: #FF9421;
    color: #000;
    border-color: #FF9421;
}

/* Hero da categoria (igual vibe da home) */
.cat-hero {
    background: #0a0a0a;
    border: 1px solid var(--bs-secondary);
    border-radius: .5rem;
}

.cat-hero .product-thumb {
    background: #000;
}

/* Hero da home (mesmo estilo do hero das categorias) */
.home-hero {
    background: #0a0a0a;
    border: 1px solid var(--bs-secondary);
    border-radius: .5rem;
}

.home-hero .product-thumb {
    background: #000;
}

/* imagem do modelo: metade de 674x422 */
.hero-model-img {
    width: 337px;
    max-width: 100%;
    height: auto;
}

/* Cat-hero centralizado com a mesma largura de um .container do Bootstrap */
.cat-hero {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%; /* base: ocupa a largura disponível até o limite dos breakpoints abaixo */
}

/* Replicando as larguras do .container do Bootstrap */
@media (min-width: 576px) {
    .cat-hero {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .cat-hero {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .cat-hero {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .cat-hero {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .cat-hero {
        max-width: 1320px;
    }
}

/* (opcional) alinhar o conteúdo no centro se quiser reforçar a simetria */
.cat-hero .row {
    margin-left: 0;
    margin-right: 0;
}

/* Bandeira do seletor de idioma */
.topbar .lang-emoji {
    font-size: 18px; /* maior e mais legível */
    line-height: 1;
}

/* Checkout footer */
.checkout-footer {
    background: #111; /* fundo um pouco mais escuro para separar do corpo */
    border-top: 1px solid #333;
}

.checkout-footer .pay-icon {
    height: 28px;
    width: auto;
    filter: none;
}

.checkout-footer .security-badge {
    height: 36px;
    width: auto;
}

.checkout-footer .secure-box {
    background: #1e7e34; /* verde Bootstrap-ish */
    color: #fff;
    border-radius: .5rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}

/* Ajustes gerais do checkout (se ainda não tiver) */
.brand-logo {
    max-height: 40px;
    width: auto;
}


/* ===== Mercado Pago Secure Fields (dark theme) ===== */
.mp-field {
    display: flex;
    align-items: center;
    height: 44px; /* ~ .form-control padrão */
    border: 1px solid #2a3140; /* igual ao restante do tema */
    border-radius: .375rem;
    background: #0d1116; /* fundo dos inputs do tema */
    padding: .375rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.mp-field:hover {
    border-color: #3a4254;
}

.mp-field.is-invalid {
    border-color: #dc3545; /* vermelho padrão erro */
    box-shadow: 0 0 0 .20rem rgba(220, 53, 69, .18);
}

.mp-field.is-valid {
    border-color: #28a745; /* verde sucesso */
}

.mp-field iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent; /* deixa o fundo do container aparecer */
}

/* rótulo e help text no dark */
.form-label.mp-label {
    color: #cbd3e1;
    font-weight: 600;
    margin-bottom: .35rem;
}

.form-text.mp-help {
    color: #9aa3b5;
}


/* mantenha esta como a ÚLTIMA definição de .mp-field */
.mp-field {
    display: flex;
    align-items: center;
    height: 44px;
    border: 1px solid #2a3140;
    border-radius: .375rem;
    background: #212529; /* fundo dark do tema */
    padding: .375rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.mp-field:hover {
    border-color: var(--mp-border-hover);
}

.mp-field:focus-within {
    border-color: #ffffff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .14);
    background: #212529;
}

.mp-field iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

/* mantém seus rótulos coerentes no dark */
.form-label.mp-label {
    color: #cbd3e1;
    font-weight: 600;
    margin-bottom: .35rem;
}

.form-text.mp-help {
    color: #9aa3b5;
}


/* Layout do formulário de cartão + animação */
.mp-card-layout {
    margin-top: 1rem;
}

.mp-card-visual {
    background: linear-gradient(135deg, rgba(57, 66, 82, 0.4), rgba(27, 32, 41, 0.8));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.mp-card-animation {
    width: min(320px, 100%);
    max-height: 260px;
}

@media (max-width: 991.98px) {
    .mp-card-layout {
        margin-top: 1.5rem;
    }

    .mp-card-visual {
        padding: 1.5rem !important;
    }
}

/* Bandeira integrada no campo do cartão */
.mp-card-field-wrapper {
    position: relative;
}

#mp-cardNumber {
    padding-right: 3.5rem;
}

.mp-card-brand {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    max-height: 32px;
    width: auto;
    object-fit: contain;
    pointer-events: none;
    background: rgba(21, 26, 34, .88);
    padding: .125rem .45rem;
    border-radius: .35rem;
}

.mp-card-form .form-control.mp-field:focus,
.mp-card-form .form-select.mp-field:focus {
    color: #f3f6fb;
    background-color: #212529;
    border-color: #ffffff;
    box-shadow: 0 0 0 .20rem rgba(255, 255, 255, .14);
}

.alert-danger {
    background-color: #3b0d0d; /* tom escuro avermelhado */
    border-color: #842029;
    color: #ffd7d7;
}

.alert-danger .btn-close {
    filter: invert(1); /* deixa o X visível no fundo escuro */
}

/* alerta flutuante fixo, visível mesmo no rodapé */
.error-float {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom)); /* respeita área segura nos iPhones */
    z-index: 1080; /* acima do conteúdo, abaixo de modais */
    max-width: min(560px, 90vw);
}

/* opcional, animação de entrada */
@keyframes slideUp {
    from {
        transform: translateY(12px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.error-float {
    animation: slideUp .18s ease-out;
}

/* animação de entrada do bloco */
.fc-pop-in {
    animation: fc-pop 420ms ease-out both;
}

@keyframes fc-pop {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(8px);
    }

    60% {
        opacity: 1;
        transform: scale(1.02) translateY(0);
    }

    100% {
        transform: scale(1);
    }
}

/* animação simples no ícone */
.fc-thumb {
    animation: fc-bounce 900ms ease-out 120ms both;
    transform-origin: bottom center;
}

@keyframes fc-bounce {
    0% {
        transform: translateY(-12px) rotate(-20deg) scale(0.9);
    }

    40% {
        transform: translateY(0) rotate(0) scale(1.06);
    }

    70% {
        transform: translateY(-4px) scale(1);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .2s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.orders-details {
    background: #1b232f;
}

.orders-details-item-table {
    padding: 3px;
}

.orders-pagination .page-link {
    background-color: #151a22;
    border-color: #2a3140;
    color: #f3f6fb;
}

.orders-pagination .page-item.disabled .page-link {
    color: rgba(243, 246, 251, 0.4);
    background-color: #11161f;
    border-color: #2a3140;
}

.orders-pagination .page-item.active .page-link {
    background-color: #ff6b00;
    border-color: #ff6b00;
    color: #0f1115;
}

.breadcrumb-item.active {
    color: aliceblue;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: aliceblue
}

.shipping-input-group .shipping-input {
    max-width: 240px;
}

.shipping-input-group .shipping-select {
    min-width: 220px;
}

/* Ajustes responsivos para a tabela do carrinho */
@media (max-width: 576px) {
    .cart-table .image-col {
        width: 56px;
    }

    .cart-table .price-col {
        width: 88px;
    }

    .cart-table .qty-col {
        width: 116px;
    }

    .cart-table .subtotal-col {
        width: 104px;
    }

    .cart-table .product-col {
        min-width: 170px;
    }
}