/* DEEJAI GLOBAL TOPBAR v15 - barra preta, logo livre e busca por lupa */
:root{--deejai-grad:linear-gradient(135deg,#ff2fc3,#7b2cff)}

/* Topo preto em todas as áreas principais */
.home-topbar,
.mobile-feed-topbar,
.topbar-pro{
  background:#050005 !important;
  background-color:#050005 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}

/* Área de logo pronta para receber imagem depois */
.logo-placeholder,
.mobile-feed-logo,
.brand-icon{
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:transparent !important;
  overflow:visible !important;
}
.logo-placeholder,
.logo-empty,
.mobile-feed-logo span,
.brand-icon{font-size:0!important;line-height:0!important}
.mobile-feed-logo img,
.app-logo-img{object-fit:contain!important;background:transparent!important;border-radius:0!important}

/* Feed: logo ganha largura maior sem quadrado rosa */
.mobile-feed-topbar{
  grid-template-columns:minmax(86px, 26vw) 1fr 46px 42px !important;
  height:72px !important;
  padding:8px 14px !important;
  gap:8px !important;
}
.mobile-feed-logo{width:100%!important;height:56px!important;justify-content:flex-start!important;place-items:center start!important;display:grid!important}
.mobile-feed-logo img{max-width:100%!important;width:auto!important;height:50px!important}

/* Botão lupa */
.global-search-toggle,
.home-search-toggle,
.pro-search-toggle{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  display:grid!important;
  place-items:center!important;
  appearance:none!important;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
  font-size:26px!important;
  font-weight:900!important;
  line-height:1!important;
  padding:0!important;
  cursor:pointer!important;
}
.global-search-toggle svg,
.home-search-toggle svg,
.pro-search-toggle svg{width:28px!important;height:28px!important;stroke:#fff!important}

/* Menu hamburguer sem quadrado */
.mobile-menu-trigger,
.dropdown-btn,
.top-menu .dropdown-btn{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:#fff!important;
}
.mobile-menu-trigger{width:38px!important;height:42px!important;font-size:33px!important;line-height:1!important;padding:0!important}
.dropdown-btn{font-size:0!important;width:42px!important;height:42px!important;position:relative!important;padding:0!important}
.dropdown-btn::before{content:'☰';font-size:32px;line-height:1;color:#fff;font-weight:950}

/* Campo de busca: fechado mostra só a lupa; aberto desliza no centro */
.mobile-feed-search,
.home-search,
.search-pro{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%) scaleX(.86)!important;
  width:min(620px, calc(100vw - 132px))!important;
  height:48px!important;
  z-index:1205!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .22s ease, transform .26s ease!important;
  border-radius:999px!important;
  background:#0b0c16!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#fff!important;
  padding:0 18px!important;
  font-size:14px!important;
  outline:none!important;
  box-shadow:0 18px 50px rgba(0,0,0,.55)!important;
}
.search-open .mobile-feed-search,
.search-open .home-search,
.search-open .search-pro,
.mobile-feed-search.search-open,
.home-search.search-open,
.search-pro.search-open{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate(-50%,-50%) scaleX(1)!important;
}

/* Home topo */
.home-topbar{height:72px!important;display:grid!important;grid-template-columns:minmax(110px,32vw) 1fr 46px 46px!important;align-items:center!important;gap:8px!important;padding:8px 16px!important;position:fixed!important;top:0!important;left:0!important;right:0!important}
.home-topbar>a:first-child{width:100%!important;min-height:54px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important}
.home-topbar .app-logo-img{max-height:48px!important;width:auto!important;max-width:100%!important}
.home-topbar .top-menu{display:flex!important;align-items:center!important;gap:0!important;justify-content:flex-end!important}
.home-topbar .top-menu>a{display:none!important}
.home-topbar .dropdown{display:block!important}

/* Painel interno usuário */
.topbar-pro{min-height:72px!important;padding:10px 0!important;position:sticky!important;top:0!important;display:grid!important;grid-template-columns:1fr 46px auto auto!important;gap:10px!important;align-items:center!important}
.topbar-pro .top-pill{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important}
.topbar-pro .search-pro{width:min(620px, calc(100vw - 120px))!important}

/* Feed sem menu inferior */
.feed-page .bottom-menu:not(.home-bottom-menu),
.public-profile-v11 .bottom-menu:not(.home-bottom-menu){display:none!important}

@media (max-width:480px){
  .mobile-feed-topbar{grid-template-columns:minmax(88px,28vw) 1fr 44px 38px!important;height:72px!important;padding-left:12px!important;padding-right:12px!important}
  .mobile-feed-logo{height:54px!important}
  .mobile-feed-search,.home-search,.search-pro{width:calc(100vw - 94px)!important;height:46px!important;font-size:14px!important}
  .home-topbar{grid-template-columns:minmax(112px,35vw) 1fr 44px 40px!important;height:72px!important;padding-left:14px!important;padding-right:12px!important}
}

/* DEEJAI GLOBAL TOPBAR v15 - ícones aproximados no canto direito */
.home-topbar,
.mobile-feed-topbar,
.topbar-pro{
  position:relative!important;
  padding-right:16px!important;
  overflow:visible!important;
}

/* Em vez de espalhar pelo grid, os botões ficam fixos e próximos ao canto direito */
.home-topbar .global-search-toggle,
.home-topbar .home-search-toggle,
.mobile-feed-topbar .global-search-toggle,
.mobile-feed-topbar .feed-search-toggle,
.topbar-pro .global-search-toggle,
.topbar-pro .pro-search-toggle{
  position:absolute!important;
  right:58px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:38px!important;
  height:42px!important;
  min-width:38px!important;
  z-index:1220!important;
}

.home-topbar .global-search-toggle svg,
.mobile-feed-topbar .global-search-toggle svg,
.topbar-pro .global-search-toggle svg{
  width:27px!important;
  height:27px!important;
}

/* Menu hamburguer alinhado na mesma margem da lupa */
.home-topbar .dropdown,
.mobile-feed-topbar .mobile-menu-trigger,
.topbar-pro .dropdown,
.topbar-pro .dropdown-btn{
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:1220!important;
}

.home-topbar .dropdown-btn,
.topbar-pro .dropdown-btn{
  width:36px!important;
  height:42px!important;
}
.mobile-feed-topbar .mobile-menu-trigger{
  width:36px!important;
  height:42px!important;
}
.dropdown-btn::before,
.mobile-menu-trigger{
  font-size:31px!important;
}

/* Reserva a área esquerda/centro para a futura logo, sem empurrar os ícones */
.home-topbar>a:first-child,
.mobile-feed-logo,
.topbar-pro .brand,
.topbar-pro>a:first-child{
  max-width:calc(100vw - 120px)!important;
  padding-right:110px!important;
  box-sizing:border-box!important;
}

/* A busca aberta continua centralizada e sobrepõe a área da logo */
.mobile-feed-search,
.home-search,
.search-pro{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  width:min(640px, calc(100vw - 94px))!important;
  max-width:calc(100vw - 94px)!important;
  z-index:1215!important;
}

@media (max-width:480px){
  .home-topbar,
  .mobile-feed-topbar,
  .topbar-pro{
    padding-right:12px!important;
  }
  .home-topbar .global-search-toggle,
  .home-topbar .home-search-toggle,
  .mobile-feed-topbar .global-search-toggle,
  .mobile-feed-topbar .feed-search-toggle,
  .topbar-pro .global-search-toggle,
  .topbar-pro .pro-search-toggle{
    right:56px!important;
    width:36px!important;
  }
  .home-topbar .dropdown,
  .mobile-feed-topbar .mobile-menu-trigger,
  .topbar-pro .dropdown,
  .topbar-pro .dropdown-btn{
    right:12px!important;
  }
  .mobile-feed-search,
  .home-search,
  .search-pro{
    width:calc(100vw - 88px)!important;
    max-width:calc(100vw - 88px)!important;
  }
}

/* v18 - corrigir lupa do feed para não virar quadrado branco */
.feed-search-toggle,
.mobile-feed-topbar .feed-search-toggle {
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
}
.feed-search-toggle svg,
.mobile-feed-topbar .feed-search-toggle svg {
  width:27px!important;
  height:27px!important;
  stroke:#fff!important;
}


/* DEEJAI LOGO FIX v28 - usa diretamente /assets/img/logo-deejai.png */
.deejai-logo-link{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
  overflow:visible!important;
}
.deejai-top-logo-img,
.mobile-feed-logo .deejai-top-logo-img,
.home-topbar .deejai-top-logo-img,
.app-logo-img.deejai-top-logo-img{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:auto!important;
  max-width:170px!important;
  height:auto!important;
  max-height:48px!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.mobile-feed-logo .deejai-top-logo-img{max-width:170px!important;max-height:50px!important;}
.home-topbar .deejai-top-logo-img{max-width:180px!important;max-height:50px!important;}
.deejai-brand-block{display:flex!important;align-items:center!important;gap:8px!important;}
.deejai-sidebar-logo{display:block!important;max-width:150px!important;max-height:45px!important;object-fit:contain!important;}
@media (max-width:480px){
  .deejai-top-logo-img,
  .mobile-feed-logo .deejai-top-logo-img,
  .home-topbar .deejai-top-logo-img{max-width:150px!important;max-height:46px!important;}
}

/* DEEJAI LOGO FIX v30 - mostra apenas uma logo, sem duplicar background + img */
.deejai-logo-link,
.deejai-logo-ready,
.mobile-feed-logo,
.home-topbar > a:first-child{
  min-width:150px!important;
  max-width:190px!important;
  height:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
  color:transparent!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
}
.logo-placeholder,
.brand-icon{
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
}
.deejai-top-logo-img,
.deejai-logo-ready img,
.mobile-feed-logo img,
.home-topbar > a:first-child img,
.app-logo-img{
  display:block!important;
  width:auto!important;
  max-width:180px!important;
  max-height:52px!important;
  object-fit:contain!important;
  object-position:left center!important;
  opacity:1!important;
  visibility:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.deejai-logo-missing::after{
  content:attr(data-logo-fallback)!important;
  color:#fff!important;
  font-size:24px!important;
  font-weight:900!important;
  letter-spacing:.5px!important;
  background:linear-gradient(135deg,#ff2fc3,#7b2cff)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
@media(max-width:480px){
  .deejai-logo-link,
  .deejai-logo-ready,
  .mobile-feed-logo,
  .home-topbar > a:first-child{min-width:132px!important;max-width:162px!important;height:52px!important;}
  .deejai-top-logo-img,
  .deejai-logo-ready img,
  .mobile-feed-logo img,
  .home-topbar > a:first-child img,
  .app-logo-img{max-width:158px!important;max-height:48px!important;}
}