@import '../app.css';


:root {
    --main-color: #0086f1;
    --header-color: var(--main-color);
    --first-menu-link: #003258;
    --brand-blue: #003258;
    --third-menu-bg: #0f2f56;
}

/* ===== Scrollbar ===== */
body::-webkit-scrollbar {
    width: 8px;
}

body {
    overflow-x: hidden;
}

body::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border-radius: 100px;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) #e4e4e4;
}

/* =========================================
   FIRST MENU (topo) — fundo branco centralizado
   ========================================= */
.first-menu {
    background-color: #fff;
}

.first-menu .nav {
    justify-content: center;
}

.first-menu .menu-link,
.first-menu .nav-item .menu-link {
    color: var(--first-menu-link) !important;
    font-weight: 600;
    text-decoration: none;
}

.first-menu .menu-link:hover,
.first-menu .menu-link:focus {
    color: var(--first-menu-link) !important;
    text-decoration: underline;
}

.first-menu .nav-item a {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    -webkit-background-clip: initial !important;
    background-image: none !important;
    background-size: initial !important;
    background-position: initial !important;
    transition: color .2s ease-in-out;
    position: relative;
}

.first-menu .nav-item a::before {
    content: none !important;
}

/* =========================================
   SECOND MENU (como no print)
   ========================================= */
.second-menu {
    background: #f7f7f7;
    color: var(--brand-blue);
}

.second-menu .searchbar-wrapper {
    position: relative;
    max-width: 720px;
}

.second-menu .searchbar {
    border: 1px solid #d9d9d9;
    border-radius: 10rem;
    background: #fff;
    overflow: hidden;
}

.second-menu #searchProducts,
.second-menu .searchbar-input {
    height: 44px;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding-left: 16px;
    background: transparent;
}

.second-menu .searchbar:focus-within {
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(0, 134, 241, .15);
}

.second-menu .input-group-text,
.second-menu .searchbar-append {
    border: none !important;
    background: transparent;
    color: var(--brand-blue);
    padding-right: 14px;
}

.second-menu .link-as-text,
.second-menu .link-as-text:visited,
.second-menu .link-as-text i {
    color: var(--brand-blue) !important;
    text-decoration: none;
}

.second-menu .link-as-text:hover {
    opacity: .85;
}

.second-menu .dropdown-menu {
    min-width: 220px;
}

.badge-cart,
.second-menu #bagCount {
    position: absolute;
    top: -6px;
    right: -10px;
    font-weight: 700 !important;
    background-color: rgb(255, 101, 0);
    color: #fff;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1;
}

.second-menu .cart-wrapper {
    position: relative;
}

@media (max-width: 575.98px) {
    .second-menu .searchbar-wrapper {
        max-width: 100%;
    }

    /* .second-menu form { display: none; } */
}

/* =========================================
   THIRD MENU — VISUAL DO PRINT (faixa azul, texto branco, divisores)
   SEM quebrar dropdown + SEM “traço/animação” nos links
   ========================================= */
.third-menu {
    background-color: var(--third-menu-bg) !important;
    border-bottom: none !important;
    padding-block: 12px;
    /* altura maior da faixa */
}

.third-menu .nav {
    justify-content: center !important;
    align-items: center;
    gap: 0;
}

/* Top-level links: brancos, negrito, sem “pill”, com área maior */
.third-menu .nav-pills .nav-link {
    background: transparent !important;
    color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    padding: .5rem 1rem;
    line-height: 1.2;
    font-weight: 700;
}

.third-menu .nav-pills .nav-link:hover,
.third-menu .nav-pills .nav-link:focus {
    color: #fff !important;
    opacity: 1;
    /* não altera o banner */
    box-shadow: none !important;
}

.third-menu .nav-pills .nav-link.active,
.third-menu .nav-pills .show>.nav-link {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    font-weight: 700;
}

/* “Todas as categorias” (continua dropdown) */
.third-menu .nav>.nav-item>.btn.btn-all-categories {
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    padding: .5rem 1rem;
    line-height: 1.2;
    font-weight: 700;
}

/* Divisores entre itens (border-left) */
.third-menu .nav>.nav-item+.nav-item>.nav-link,
.third-menu .nav>.nav-item+.nav-item>.btn.btn-all-categories {
    border-left: 1px solid rgba(255, 255, 255, .55);
    margin-left: .75rem;
    padding-left: .75rem;
}

/* Remove só o caret visual (dropdown funcionando) */
.third-menu .nav>.nav-item>.dropdown-toggle::after {
    display: none;
}

/* Foco sem “aura” */
.third-menu .nav .nav-link:focus,
.third-menu .nav .btn:focus {
    box-shadow: none !important;
    outline: 0;
}

/* ===== KILL SWITCH: remove QUALQUER traço/animação nos links do topo ===== */
.third-menu .nav>.nav-item>.nav-link,
.third-menu .nav>.nav-item>.btn.btn-all-categories {
    text-decoration: none !important;
    background: transparent !important;
    background-image: none !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    transition: none !important;
    /* corta animações herdadas */
}

.third-menu .nav>.nav-item>.nav-link::before,
.third-menu .nav>.nav-item>.nav-link::after,
.third-menu .nav>.nav-item>.btn.btn-all-categories::before,
.third-menu .nav>.nav-item>.btn.btn-all-categories::after {
    content: none !important;
    display: none !important;
}

.third-menu .nav>.nav-item>.nav-link:hover,
.third-menu .nav>.nav-item>.nav-link:focus,
.third-menu .nav>.nav-item>.nav-link:active,
.third-menu .nav>.nav-item>.btn.btn-all-categories:hover,
.third-menu .nav>.nav-item>.btn.btn-all-categories:focus,
.third-menu .nav>.nav-item>.btn.btn-all-categories:active {
    text-decoration: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    transition: none !important;
}

/* ======== MEGA-MENU (conteúdo interno) ======== */
.third-menu .dropdown-menu {
    background: #fff;
    border: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.third-menu .dropdown-menu a {
    color: #212529;
    text-decoration: none;
}

.third-menu .dropdown-menu a:hover,
.third-menu .dropdown-menu a:focus {
    color: var(--main-color);
    text-decoration: none;
}

.third-menu .dropdown-menu .dropdown-view-all {
    color: var(--main-color);
    font-weight: 600;
}

.third-menu .dropdown-menu .dropdown-view-all:hover,
.third-menu .dropdown-menu .dropdown-view-all:focus {
    color: var(--main-color);
}

.third-menu .dropdown-menu h6 {
    color: #212529;
    margin-bottom: .5rem;
}

/* Responsivo */
@media (max-width: 575.98px) {

    .third-menu .nav>.nav-item>.nav-link,
    .third-menu .nav>.nav-item>.btn.btn-all-categories {
        padding: .4rem .75rem;
    }

    .third-menu {
        padding-block: 10px;
    }
}

/* =========================================
   LOADER
   ========================================= */
#loader {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
}

#loader::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    /* centraliza */
    border: 6px solid #3498db;
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #loader::after {
        animation: none;
    }
}