/* ============================================
   HEADER FIXO PROFISSIONAL - v2.0
   Sistema unificado sem conflitos
   ============================================ */

/* Variáveis CSS para alturas */
:root {
  --topbar-h: 0px;
  --header-h: 0px;
  --categories-h: 0px;
  --header-offset: 0px;
}

/* ============================================
   LAYOUT BASE - DESKTOP
   ============================================ */

/* Compensação do header fixo no body */
body {
  padding-top: var(--header-offset) !important;
  scroll-padding-top: calc(var(--header-offset) + 20px);
  -webkit-overflow-scrolling: touch;
}

/* Top bar fixa no topo */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000002;
  margin: 0;
  will-change: transform;
  backface-visibility: hidden;
}

/* Header principal */
.header {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: 1000001;
  width: 100%;
  background: #fff;
  margin: 0;
  box-shadow: none;
  will-change: transform;
  backface-visibility: hidden;
}

/* Barra de categorias */
.categories-bar {
  position: fixed;
  top: calc(var(--topbar-h) + var(--header-h));
  left: 0;
  right: 0;
  z-index: 1000000;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  will-change: transform;
  backface-visibility: hidden;
}

/* Container interno das categorias */
.categories-container {
  background: #fff;
  border: none;
  border-top: 1px solid #e0e0e0;
  box-shadow: none;
  max-width: 1400px;
  margin: 0 auto;
}

/* Conteúdo principal */
.banners-home,
.breadcrumb,
.main-content,
main {
  position: relative;
  z-index: 1;
}

/* ============================================
   MOBILE - Sistema sticky simplificado
   ============================================ */
@media (max-width: 768px) {
  body {
    padding-top: 0 !important;
    scroll-padding-top: 80px;
  }

  .top-bar {
    display: none !important;
  }

  .header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1000001;
    transform: translateZ(0);
  }

  .categories-bar {
    position: sticky;
    position: -webkit-sticky;
    top: 56px;
    z-index: 1000000;
    background: #fff;
    padding: 0;
    transform: translateZ(0);
  }
}

/* ============================================
   Z-INDEX HIERARCHY (do menor para maior)
   ============================================ */

/* Elementos do header */
.mobile-menu,
.menu-overlay { 
  z-index: 1000010 !important; 
}

.search-suggestions,
.header-search-results { 
  z-index: 1000020 !important; 
}

.all-categories-dropdown { 
  z-index: 1000030 !important; 
  background: #fff !important; 
}

/* Overlay escuro do carrinho */
.overlay,
.cart-overlay {
  z-index: 4000000 !important;
}

/* Carrinho lateral */
.cart-sidebar {
  z-index: 4500000 !important;
}

/* ============================================
   MODAIS - Acima de tudo
   ============================================ */
.modal,
.modal-backdrop,
.modal-overlay {
  z-index: 4800000 !important;
}

.modal-content,
.modal-notificacao,
.modal-voltagem,
.modal-login,
.modal-cadastro,
.modal-sucesso {
  z-index: 4800001 !important;
}

/* Modal de notificação */
.modal-notificacao-overlay {
  z-index: 4800000 !important;
}

/* Modal overlay padrão */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Toast notifications - acima dos modais */
.toast {
  z-index: 4900000 !important;
}

/* Loading overlay - acima de TUDO */
.loading-modal-overlay {
  z-index: 5000000 !important;
}

/* ============================================
   ÁREA DE USUÁRIO LOGADO - Compacta
   ============================================ */
.user-info-header {
  padding: 6px 10px !important;
  gap: 8px !important;
  max-width: 180px !important;
}

.user-info-content {
  min-width: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
  max-width: 130px !important;
}

.user-greeting {
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  line-height: 1.3 !important;
}

.user-greeting strong {
  font-weight: 600 !important;
}

.user-razao {
  font-size: 10px !important;
  color: #666 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 130px !important;
  line-height: 1.2 !important;
}

.user-link {
  font-size: 11px !important;
  color: #333 !important;
  white-space: nowrap !important;
}

.user-info-header > i:first-child {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}

/* ============================================
   LOGO - Tamanho padronizado
   ============================================ */
.header .logo-img {
  height: 60px !important;
  width: auto !important;
  max-height: 60px !important;
}

/* ============================================
   CLASSES OBSOLETAS (compatibilidade)
   Não fazem mais nada - sistema CSS controla tudo
   ============================================ */
.header-sticky,
.header-hidden,
.header-visible,
.categories-bar.hidden {
  /* Classes mantidas apenas para compatibilidade */
  /* O posicionamento é 100% controlado pelo CSS acima */
}

.header-spacer {
  display: none !important;
  height: 0 !important;
}

.header-spacer.active {
  display: none !important;
  height: 0 !important;
}

/* ============================================
   MODAL SISTEMA - Garantir z-index acima de tudo
   ============================================ */
.modal-sistema-overlay {
  z-index: 5000000 !important;
}

.modal-sistema {
  z-index: 5000001 !important;
}

/* Modal de pedidos/carrinhos */
.modal-pedido-overlay,
.modal-confirmar-overlay {
  z-index: 5000010 !important;
}

.modal-pedido,
.modal-confirmar {
  z-index: 5000011 !important;
}