/* main_nav.css — Roxo Premium Mobile First */

/* ===========================
   VARIÁVEIS
=========================== */
:root{
  --roxo-primario: #7b2cbf;
  --roxo-secundario: #9d4edd;
  --roxo-hover: #5a189a;

  --texto-branco:#ffffff;
  --texto-escuro:#2b124c;

  --fundo-claro:#f8f9fa;
  --fundo-branco:#ffffff;

  --borda-roxa:#e7d5ff;

  --sombra-soft: 0 6px 18px rgba(123,44,191,0.12);

  --gap-categorias: 10px;

  --radius-lg: 18px;
  --radius-xl: 28px;
}

/* ===========================
   SEÇÃO PRINCIPAL
=========================== */
.main-nav-section{

  background: linear-gradient(
    135deg,
    var(--roxo-primario),
    var(--roxo-secundario)
  );

  padding: 14px 12px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 12px;

  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* ===========================
   BARRA DE BUSCA
=========================== */
.search-form-new-pesquisa{

  display:flex;
  align-items:center;

  width:100%;
  max-width:680px;

  height:48px;

  background: var(--fundo-branco);

  border-radius: var(--radius-xl);

  box-shadow: var(--sombra-soft);

  overflow:hidden;

  border: 2px solid rgba(255,255,255,0.15);
}

.search-input-new{

  flex:1;

  border:none;
  outline:none;

  padding:0 16px;

  font-size:1rem;

  color: var(--texto-escuro);

  background: transparent;
}

.search-input-new::placeholder{
  color:#9b8bb8;
}

/* BOTÃO BUSCA */

.search-button-new-pesquisa{

  height:100%;

  min-width:58px;

  padding:0 18px;

  border:none;
  outline:none;

  background: linear-gradient(
    135deg,
    var(--roxo-primario),
    var(--roxo-secundario)
  );

  color: var(--texto-branco);

  font-weight:700;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition: all .25s ease;
}

.search-button-new-pesquisa:hover{

  background: linear-gradient(
    135deg,
    var(--roxo-hover),
    var(--roxo-primario)
  );

  transform: translateY(-1px);
}

.search-button-new-pesquisa i{
  font-size:1.1em;
}

/* ===========================
   GRID DE CATEGORIAS
=========================== */
.categories-list-new{

  list-style:none;

  margin:0;
  padding:0;

  display:grid;

  grid-template-columns: repeat(auto-fill, minmax(120px,1fr));

  gap: var(--gap-categorias);

  width:100%;
}

/* ===========================
   BOTÕES DE CATEGORIA
=========================== */
.category-link-new{

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:46px;

  padding: 10px 14px;

  background: var(--fundo-branco);

  color: var(--roxo-primario);

  border: 2px solid transparent;

  border-radius: var(--radius-lg);

  font-size:.92rem;

  font-weight:700;

  text-decoration:none;

  box-shadow: var(--sombra-soft);

  transition:
    background .25s ease,
    color .25s ease,
    transform .18s ease,
    border-color .25s ease;
}

.category-link-new:hover{

  background: linear-gradient(
    135deg,
    var(--roxo-primario),
    var(--roxo-secundario)
  );

  color: var(--texto-branco);

  border-color: rgba(255,255,255,0.25);

  transform: translateY(-3px);
}

.category-link-new:active{
  transform: translateY(0);
}

/* ===========================
   RESPONSIVIDADE
=========================== */

@media (max-width: 767.98px){

  .main-nav-section{
    padding: 12px 10px;
  }

  .categories-list-new{
    grid-template-columns: repeat(2,1fr);
  }

  .category-link-new{
    font-size:.88rem;
    min-height:44px;
  }
}

@media (max-width: 420px){

  .categories-list-new{
    grid-template-columns: repeat(1,1fr);
  }

  .search-form-new-pesquisa{
    height:44px;
  }

  .search-input-new{
    font-size:.92rem;
  }

  .search-button-new-pesquisa{
    min-width:52px;
  }
}