/* ================================================================
   Gerivas Technology — Navbar Premium (gt-navbar)
   Design: Swiss Tech / NCR Style
   Layout: Esquerda=Logo | Centro=Pesquisa | Direita=Ações
   ================================================================ */

/* ----------------------------------------------------------
   RESET & VARIÁVEIS DE SUPORTE
   ---------------------------------------------------------- */
.gt-navbar *,
.gt-navbar *::before,
.gt-navbar *::after {
  box-sizing: border-box;
}

/* ----------------------------------------------------------
   WRAPPER PRINCIPAL DA NAVBAR
   ---------------------------------------------------------- */
.gt-navbar {
  background: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

/* ----------------------------------------------------------
   CONTENTOR HORIZONTAL (Logo | Pesquisa | Ações)
   ---------------------------------------------------------- */
.gt-nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ----------------------------------------------------------
   GRUPO ESQUERDO — LOGÓTIPO
   ---------------------------------------------------------- */
.gt-nav-brand {
  flex: 0 0 auto;
}

.gt-nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.gt-logo-img {
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
}

.gt-logo-img:hover {
  opacity: 0.85;
}

/* Tema Escuro: inverter logo */
body.theme-dark .gt-logo-img {
  filter: invert(1) brightness(1.3);
}

/* ----------------------------------------------------------
   GRUPO CENTRO — BARRA DE PESQUISA (centrada, lupa à direita)
   ---------------------------------------------------------- */
.gt-nav-search {
  flex: 1;
  max-width: 560px;
  /* Afasta do logo e centra no espaço disponível */
  margin: 0 auto;
  position: relative;
}

.gt-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Ícone da lupa posicionado À DIREITA dentro do input */
.gt-search-icon {
  position: absolute;
  right: 14px;
  font-size: 1.15rem;
  color: #888;
  pointer-events: none;
  z-index: 2;
  transition: color 0.2s ease;
}

.gt-search-input {
  width: 100%;
  height: 44px;
  padding: 0 46px 0 18px; /* padding-right = espaço para o ícone à direita */
  border: 1.5px solid #E0E0E0;
  border-radius: 10px;
  background: #F7F7F7;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #1a1a1a;
  outline: none;
  transition: all 0.25s ease;
}

.gt-search-input::placeholder {
  color: #AAAAAA;
}

.gt-search-input:focus {
  border-color: var(--primary, #E31E25);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(227, 30, 37, 0.08);
}

.gt-search-input:focus + .gt-search-icon,
.gt-search-box:focus-within .gt-search-icon {
  color: var(--primary, #E31E25);
}

/* ----------------------------------------------------------
   GRUPO DIREITO — AÇÕES DO UTILIZADOR (sempre visíveis)
   ---------------------------------------------------------- */
.gt-nav-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Item de ação com ícone + texto (Localização, Login) */
.gt-action-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: #333;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0; /* nunca colapsa */
}

.gt-action-item ion-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
}

.gt-action-label {
  display: inline; /* sempre visível no desktop */
}

.gt-action-item:hover {
  background: #F5F5F5;
  color: var(--primary, #E31E25);
}

.gt-action-login {
  border: 1.5px solid #DCDCDC;
  padding: 7px 14px;
}

.gt-action-login:hover {
  border-color: var(--primary, #E31E25);
}

/* Botão só com ícone (Wishlist, Carrinho, Menu) */
.gt-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: #333;
  font-size: 1.3rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.gt-icon-btn:hover {
  background: #F5F5F5;
  color: var(--primary, #E31E25);
}

.gt-icon-btn .cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  background: var(--primary, #E31E25);
  color: #FFF;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Hamburger apenas em mobile */
.gt-hamburger {
  display: none;
}

/* ----------------------------------------------------------
   BARRA DE CATEGORIAS — Scroll horizontal
   ---------------------------------------------------------- */
.gt-nav-categories {
  border-top: 1px solid #F0F0F0;
  background: #FFFFFF;
  padding-top: 2.5rem;
}

.gt-categories-track {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding-top: 0.6rem;
  padding-bottom: 1.2rem;
}

.gt-categories-track::-webkit-scrollbar {
  display: none;
}

.gt-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1.5px solid transparent;
  border-radius: 20px;
  background: transparent;
  color: #555;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gt-cat-btn:hover,
.gt-cat-btn.active {
  background: var(--primary, #E31E25);
  color: #FFFFFF;
  border-color: var(--primary, #E31E25);
}

.gt-cat-btn ion-icon {
  font-size: 0.95rem;
}

.gt-cat-promo {
  color: var(--primary, #E31E25);
  font-weight: 700;
}

.gt-cat-promo:hover,
.gt-cat-promo.active {
  background: var(--primary, #E31E25);
  color: #FFFFFF;
}

/* Botão "Todos os Produtos" — destaque com borda escura */
.gt-cat-all-products {
  background: #111111;
  color: #FFFFFF;
  border-color: #111111;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 7px 18px;
  gap: 8px;
}

.gt-cat-all-products ion-icon {
  font-size: 1.1rem;
}

.gt-cat-all-products:hover {
  background: #333333;
  border-color: #333333;
  color: #FFFFFF;
}

/* Divisor vertical entre "Todos os Produtos" e as restantes categorias */
.gt-cat-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #DDDDDD;
  margin: 0 0.5rem;
  flex-shrink: 0;
  align-self: center;
}

/* ----------------------------------------------------------
   AJUSTE DO CONTEÚDO PRINCIPAL
   ---------------------------------------------------------- */
.hero-under-construction,
.hero-slider,
#main-content {
  margin-top: 0 !important;
}

/* ----------------------------------------------------------
   BOTÃO HAMBURGER INFERIOR (só aparece em tablet e mobile)
   Posicionado abaixo da barra de pesquisa via order: 4
   ---------------------------------------------------------- */
.gt-hamburger-bottom {
  display: none; /* oculto no desktop */
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 2px;
  color: #444;
  transition: color 0.2s ease;
}

.gt-hamburger-bottom ion-icon {
  font-size: 1.4rem;
  display: block;
}

.gt-hamburger-bottom:hover {
  color: var(--primary, #E31E25);
}

/* ----------------------------------------------------------
   SUGESTÕES DE PESQUISA (herdadas)
   ---------------------------------------------------------- */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  z-index: 2000;
  display: none;
  overflow: hidden;
}

.search-suggestions.active {
  display: block;
}

.suggestions-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #999;
  padding: 12px 16px 6px;
}

.suggestions-list {
  list-style: none;
  padding: 0 0 8px;
  margin: 0;
}

.suggestions-list li {
  padding: 10px 16px;
  font-size: 0.88rem;
  color: #333;
  cursor: pointer;
  transition: background 0.15s ease;
}

.suggestions-list li:hover {
  background: #F5F5F5;
  color: var(--primary, #E31E25);
}

/* ================================================================
   RESPONSIVIDADE — TABLET & MOBILE
   ================================================================ */

/* ---------------------------------------------------------------
   TABLET (768px – 1024px)
   Layout: Logo | Pesquisa (reduzida) | Ícones (sem texto)
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .gt-nav-container {
    padding: 0 1.2rem;
    gap: 1rem;
    height: 65px;
  }

  /* Pesquisa: cabe menos largura mas mantém-se na mesma linha */
  .gt-nav-search {
    max-width: 340px;
  }

  /* Tablet: esconde o TEXTO das ações, mantém só os ícones */
  .gt-action-label {
    display: none;
  }

  .gt-action-item {
    padding: 8px 10px;
  }

  /* Ocultar barra de categorias no tablet */
  .gt-nav-categories {
    display: none;
  }

  /* Mostrar hamburger inferior no tablet */
  .gt-hamburger-bottom {
    display: flex;
    order: 4;
    flex: 0 0 100%;
    padding: 8px 0 10px;
    border-top: 1px solid #F0F0F0;
  }
}

/* ---------------------------------------------------------------
   MOBILE (até 768px)
   Layout linha 1: Logo (esq) | Ícones essenciais (dir)
   Layout linha 2: Pesquisa a largura total
   Barra de categorias: scroll horizontal
   --------------------------------------------------------------- */
@media (max-width: 768px) {

  /* ── Container principal: empilha em 2 linhas ── */
  .gt-nav-container {
    flex-wrap: wrap;
    height: auto;            /* remove altura fixa do desktop */
    padding: 0.7rem 1rem;
    gap: 0.5rem;
    align-items: center;
  }

  /* Linha 1 — Logo à esquerda, ocupa o espaço que sobra */
  .gt-nav-brand {
    flex: 1 1 auto;
    order: 1;
  }

  .gt-logo-img {
    height: 36px;
  }

  /* Linha 1 — Ações à direita (sem quebrar) */
  .gt-nav-actions {
    flex: 0 0 auto;
    order: 2;
    gap: 0.2rem;
  }

  /* Linha 2 — Pesquisa a largura total */
  .gt-nav-search {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;             /* remove o margin:auto do desktop */
  }

  .gt-search-input {
    font-size: 0.88rem;
    height: 42px;
  }

  /* Esconder: texto de localização e botão "Entrar" no mobile */
  .gt-action-location,
  .gt-action-login {
    display: none;
  }

  /* Mostrar hamburger (menu de categorias completo) no mobile */
  .gt-hamburger {
    display: flex;
  }

  /* Ocultar barra de categorias no mobile */
  .gt-nav-categories {
    display: none;
  }

  /* Mostrar hamburger inferior abaixo da pesquisa */
  .gt-hamburger-bottom {
    display: flex;
    order: 4;
    flex: 0 0 100%;
    padding: 6px 0 8px;
    border-top: 1px solid #F0F0F0;
  }
}

/* ---------------------------------------------------------------
   MOBILE PEQUENO (até 480px)
   Reduz padding e tamanho de fonte para ecrãs muito pequenos
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  .gt-nav-container {
    padding: 0.6rem 0.75rem;
  }

  .gt-logo-img {
    height: 32px;
  }

  .gt-search-input {
    font-size: 0.82rem;
    height: 40px;
  }

  .gt-categories-track {
    padding: 0.4rem 0.75rem;
    gap: 0.25rem;
  }

  .gt-cat-btn {
    font-size: 0.7rem;
    padding: 5px 10px;
  }

  .gt-cat-all-products {
    font-size: 0.7rem;
    padding: 5px 10px;
  }

  /* Ícones de ação ligeiramente menores */
  .gt-icon-btn {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }
}

/* ================================================================
   DARK THEME OVERRIDES
   ================================================================ */
body.theme-dark .gt-navbar {
  background: #111111;
  border-bottom-color: #222222;
}

body.theme-dark .gt-nav-categories {
  background: #111111;
  border-top-color: #222222;
}

body.theme-dark .gt-search-input {
  background: #1A1A1A;
  border-color: #333;
  color: #EEEEEE;
}

body.theme-dark .gt-search-input::placeholder {
  color: #666;
}

body.theme-dark .gt-action-item,
body.theme-dark .gt-icon-btn {
  color: #CCCCCC;
}

body.theme-dark .gt-action-item:hover,
body.theme-dark .gt-icon-btn:hover {
  background: #222222;
  color: var(--primary, #E31E25);
}

body.theme-dark .gt-action-login {
  border-color: #333333;
}

body.theme-dark .gt-cat-btn {
  color: #AAAAAA;
}

body.theme-dark .search-suggestions {
  background: #1A1A1A;
  border-color: #333;
}

body.theme-dark .suggestions-list li:hover {
  background: #222222;
}

/* Logo branco no tema escuro */
body.theme-dark .gt-logo-img {
  filter: brightness(0) invert(1); /* converte qualquer cor → branco puro */
}

/* Divisor das categorias no tema escuro */
body.theme-dark .gt-cat-divider {
  background: #444444;
}

/* Botão "Todos os Produtos" no tema escuro */
body.theme-dark .gt-cat-all-products {
  background: #FFFFFF;
  color: #111111;
  border-color: #FFFFFF;
}

body.theme-dark .gt-cat-all-products:hover {
  background: #DDDDDD;
  border-color: #DDDDDD;
}