/* HEADER DARK + MENU DESKTOP */
.header-navbar-custom {
    background: #000 !important;
    box-shadow: 0 8px 20px 0 rgba(80,80,80,.08);
    border-bottom: 0;
    padding: 0.8rem 0;
}
.header-navbar-custom .navbar-brand img {
    max-height: 65px;
    width: auto;
    filter: brightness(1.2);
}
@media (max-width: 991.98px) {
    .header-navbar-custom .navbar-brand img { max-height: 48px; }
}
@media (max-width: 576px) {
    .header-navbar-custom .navbar-brand img { max-height: 36px; }
}
.header-navbar-custom .navbar-nav .nav-link,
.header-navbar-custom .navbar-nav .nav-link:visited {
    color: #fff !important;
    font-weight: 500;
    font-size: 1.09rem;
    margin: 0 0.65rem;
    border-radius: 9px;
    padding: 0.63rem 1rem;
    background: none !important;
    letter-spacing: 0.01em;
    transition: color .16s, background .15s;
}
.header-navbar-custom .navbar-nav .nav-link:hover,
.header-navbar-custom .navbar-nav .nav-link:focus {
    color: #38d430 !important;
    background: #171717 !important;
    text-decoration: none;
}
.header-navbar-custom .user-greeting {
    font-size: .99rem;
    color: #38d430 !important;
    margin-bottom: 3px;
    margin-right: 8px;
    text-shadow: 0 1px 4px #0004;
}

/* Botão hamburguer branco */
.header-navbar-custom .navbar-toggler-icon,
.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E") !important;
}
.header-navbar-custom .navbar-toggler {
    border-color: #38d430;
}

/* Botões principais (verde fitness) */
.btn-azul-logo {
    background: #38d430 !important;
    color: #fff !important;
    border: none;
    border-radius: 2rem;
    font-weight: 600;
    padding: .4rem 1.2rem;
    margin-left: .2rem;
    font-size: 1.05rem;
    transition: background .22s, color .22s;
    box-shadow: 0 2px 8px rgba(56,212,48,0.09);
}
.btn-azul-logo:hover, .btn-azul-logo:focus {
    background: #43ff43 !important;
    color: #171717 !important;
    box-shadow: 0 4px 16px #38d43029;
}



/* OFFCANVAS/MENU MOBILE */
.offcanvas-custom {
    background: #101010 !important;
    color: #fff;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 0 30px 30px;
    min-height: 100vh;
}
.offcanvas-custom .offcanvas-header {
    border-bottom: 1px solid #222;
    background: #111;
}
.offcanvas-custom .navbar-brand img { max-height: 42px; }
.offcanvas-custom .mobile-user {
    font-size: 1.08rem;
    color: #38d430;
    margin-bottom: 7px;
    margin-left: 4px;
    font-weight: 600;
    text-shadow: 0 1px 6px #1112;
}
.offcanvas-custom .mobile-btns {
    margin: 0 0 15px 4px;
    display: flex;
    gap: 10px;
}
.offcanvas-custom .nav-link {
    color: #fff !important;
    font-size: 1.12rem;
    padding: 0.78rem 0.9rem;
    width: 100%;
    border-radius: 11px;
    font-weight: 500;
    transition: color .13s, background .14s;
    letter-spacing: 0.01em;
}
.offcanvas-custom .nav-link:hover, .offcanvas-custom .nav-link:focus {
    color: #38d430 !important;
    background: #151515 !important;
}
.offcanvas-custom .nav-item {
    width: 100%;
    margin-bottom: 3px;
}

/* Card de categorias (modal centralizado) */
#card-categorias-header {
    display: none;
    position: fixed;
    top: 95px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    min-width: 220px;
    max-width: 98vw;
    width: 390px;
    background: #fff;
    color: #1a1a1a;
    border-radius: 20px;
    box-shadow: 0 10px 44px rgba(30,200,50,0.17), 0 2px 8px #38d4300c;
    padding: 24px 23px 16px 24px;
    user-select: none;
    animation: fadeInUp .38s;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(60px);}
    to { opacity: 1; transform: translateX(-50%) translateY(0);}
}
#card-categorias-header {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 9999;
  padding: 32px 24px 20px 24px;
  border-radius: 20px;
  box-shadow: 0 6px 48px #0001;
  min-width: 280px;
  max-width: 94vw;
}
#fechar-card-header {
  position: absolute;
  top: 10px; right: 10px;
  background: none; border: none; font-size: 2rem; color: #555; cursor: pointer;
}
@media (max-width: 600px) {
  #card-categorias-header {
    width: 96vw;
    padding: 18px 10px 12px 10px;
    min-width: unset;
  }
}