/* ==========================================================
   ModuCommerce – Componente de Busca / Filtro
   ========================================================== */

/* Garante que a área da hero e da barra de busca
   fiquem num stacking acima dos demais elementos */
.mc-hero{
  position:relative;
  z-index:5;
}

.mc-searchwrap{
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) auto;
  gap:0.75rem;
  align-items:stretch;
}

@media (max-width:767px){
  .mc-searchwrap{

    align-items:stretch;
  }

  /* Quando os resultados estiverem abertos, some o filtro no mobile */
  .mc-searchwrap.mc-searchwrap--results-open .mc-filter{
    display:none;
  }
}

/* ----------------------------------------------------------
   FORM DE BUSCA
   ---------------------------------------------------------- */
.mc-search{
  position:relative;
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.5rem 0.85rem;
  padding-right:2.5rem; /* espaço pro X */
  background:#FFFFFF;
  border:1px solid var(--mc-border);
  border-radius:12px;
  box-shadow:0 4px 14px rgba(15,23,42,0.06);
  transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.mc-search svg{
  flex-shrink:0;
  width:18px;
  height:18px;
  opacity:0.85;
}

.mc-search input{
  all:unset;
  color:var(--mc-text);
  width:100%;
  font-size:0.92rem;
}

/* placeholder */
.mc-search input::placeholder{
  color:var(--mc-text-weak);
}

/* Chrome / Edge / Opera – remove estilo bruto do X e cria “box” melhor */
.mc-search input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;
  height:16px;
  width:16px;
  border-radius:6px;
  background:
    linear-gradient(45deg, transparent 45%, #777 45%, #777 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #777 45%, #777 55%, transparent 55%);
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  cursor:pointer;
}

/* Firefox / IE clear (fallback para não quebrar) */
.mc-search input[type="search"]::-ms-clear{
  display:none;
}

/* Quando a busca está focada */
.mc-search:focus-within{
  border-color:color-mix(in oklab, var(--mc-accent) 45%, var(--mc-border));
  box-shadow:0 8px 20px rgba(15,23,42,0.08);
  transform:translateY(-1px);
}

/* (Opcional) se você tiver um botão X próprio .mc-search__clear */
.mc-search__clear{
  position:absolute;
  right:0.6rem;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
  color:var(--mc-text-weak);
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  opacity:0.7;
  transition:background .12s ease, color .12s ease, opacity .12s ease, transform .08s ease;
}

.mc-search__clear:hover{
  background:rgba(0,0,0,0.04);
  color:var(--mc-text);
  opacity:1;
  transform:translateY(-50%) translateY(-1px);
}

.mc-search__clear:focus-visible{
  box-shadow:var(--mc-focus);
}

/* ----------------------------------------------------------
   DROPDOWN DE RESULTADOS
   ---------------------------------------------------------- */
.mc-search__results{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:6px;
  background:#FFFFFF;
  border-radius:12px;
  border:1px solid var(--mc-border);
  box-shadow:0 10px 24px rgba(15,23,42,0.08);
  padding:6px 0;
  max-height:360px;
  overflow:auto;
  z-index:99999; /* acima de tudo */
  display:none;
}

.mc-search__results.is-open{
  display:block;
}

/* Linha de item de produto – agora em FLEX pra aproximar texto da thumb */
.mc-search__item{
  width:100%;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:12px;                /* distância entre imagem e coluna de texto */
  padding:8px 12px;
  cursor:pointer;
  transition:background .12s ease, transform .08s ease;
}

.mc-search__item + .mc-search__item{
  border-top:1px solid rgba(230,232,236,0.7);
}

.mc-search__item:hover{
  background:color-mix(in oklab, var(--mc-accent) 4%, #FFFFFF);
  transform:translateY(-1px);
}

/* Thumb */
.mc-search__thumb{
  width:56px;
  height:56px;
  border-radius:10px;
  background:var(--mc-layer);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.mc-search__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* coluna de info (título + preço) imediatamente após a foto */
.mc-search__info{

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-width:0;
}

/* Título encostado na imagem */
.mc-search__title{
  flex:1;
  font-size:0.9rem;
  font-weight:600;
  color:var(--mc-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Preço à direita, ocupando só o necessário */
.mc-search__price{
  flex-shrink:0;
  font-size:0.9rem;
  font-weight:700;
  color:var(--mc-accent-ink);
  background:color-mix(in oklab, var(--mc-accent) 18%, #FFFFFF);
  padding:4px 10px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* estado vazio / carregando */
.mc-search__results-empty{
  padding:8px 12px;
  font-size:0.9rem;
  color:var(--mc-text-weak);
}

/* ----------------------------------------------------------
   BOTÃO DE FILTRO (abre modal)
   ---------------------------------------------------------- */
.mc-filter{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:42px;
  padding:0 0.65rem;
  background:#FFFFFF;
  border:1px solid var(--mc-border);
  border-radius:10px;
  box-shadow:0 4px 14px rgba(15,23,42,0.05);
  transition:border-color .16s ease, box-shadow .16s ease, transform .08s ease, background .12s ease;
}

.mc-filter svg{
  width:18px;
  height:18px;
  opacity:0.9;
}

.mc-filter:hover{
  border-color:color-mix(in oklab, var(--mc-accent) 45%, var(--mc-border));
  box-shadow:0 6px 18px rgba(15,23,42,0.08);
  background:#FDFBF7;
  transform:translateY(-1px);
}

@media (max-width:767px){
  .mc-filter{
    justify-self:flex-end;
  }
}

/* ----------------------------------------------------------
   MODAL DE CATEGORIAS
   ---------------------------------------------------------- */

.mc-modal{
  position:fixed;
  inset:0;
  background:rgba(15,17,20,.32);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:12000;
  padding:16px;
}

.mc-modal.is-open{
  display:flex;
}

.mc-modal__box{
  width:min(720px,96vw);
  background:#FFFFFF;
  border:1px solid var(--mc-border);
  border-radius:14px;
  box-shadow:0 12px 32px rgba(15,23,42,0.12);
  display:flex;
  flex-direction:column;
}

.mc-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--mc-border);
}

.mc-modal__head h3{
  margin:0;
  font-size:1.02rem;
  color:var(--mc-primary);
}

.mc-modal__close{
  background:transparent;
  font-size:18px;
  line-height:1;
  padding:4px 8px;
  border-radius:8px;
  transition:background .12s ease;
}

.mc-modal__close:hover{
  background:rgba(0,0,0,0.04);
}

.mc-modal__content{
  padding:14px 16px 16px;
}

.mc-filtergrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

@media (max-width:640px){
  .mc-filtergrid{
    grid-template-columns:1fr;
  }
}

.mc-filtercard{
  display:flex;
  flex-direction:column;
  gap:6px;
  background:#FFFFFF;
  border:1px solid var(--mc-border);
  border-radius:12px;
  padding:10px 11px;
  transition:border-color .16s ease, box-shadow .16s ease, transform .08s ease, background .12s ease;
}

.mc-filtercard strong{
  font-size:.96rem;
  color:var(--mc-text);
}

.mc-filtercard__meta{
  font-size:.82rem;
  color:var(--mc-text-weak);
}

.mc-filtercard:hover{
  border-color:color-mix(in oklab, var(--mc-accent) 45%, var(--mc-border));
  background:#FDFBF7;
  box-shadow:0 8px 20px rgba(15,23,42,0.08);
  transform:translateY(-1px);
}

.mc-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:4px;
}

.mc-chip{
  background:#FFFFFF;
  border:1px solid var(--mc-border);
  border-radius:10px;
  padding:5px 9px;
  font-size:.82rem;
  color:var(--mc-text-weak);
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}

.mc-chip:hover{
  border-color:color-mix(in oklab, var(--mc-accent) 40%, var(--mc-border));
  background:color-mix(in oklab, var(--mc-accent) 12%, #FFFFFF);
  color:var(--mc-accent-ink);
}

.mc-price{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.mc-price input{
  width:100%;
  background:#FFFFFF;
  border:1px solid var(--mc-border);
  border-radius:10px;
  padding:7px 9px;
  font-size:.9rem;
}

.mc-price input:focus{
  box-shadow:var(--mc-focus);
}

.mc-modal__foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:10px 16px 12px;
  border-top:1px solid var(--mc-border);
}

.mc-btn{
  background:var(--mc-primary);
  color:#FFFFFF;
  border:none;
  border-radius:10px;
  padding:9px 14px;
  font-size:0.9rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:filter .12s ease, box-shadow .12s ease, transform .08s ease;
}

.mc-btn--ghost{
  background:#FFFFFF;
  border:1px solid var(--mc-border);
  color:var(--mc-text);
}

.mc-btn:hover{
  filter:brightness(.97);
  box-shadow:0 6px 16px rgba(15,23,42,0.12);
  transform:translateY(-1px);
}

.mc-btn--ghost:hover{
  border-color:color-mix(in oklab, var(--mc-accent) 45%, var(--mc-border));
  color:var(--mc-accent-ink);
}