/* Ações principais do cabeçalho público: busca e carrinho. */
.topbar-search {
  position: relative;
  /* No desktop, a search fica com largura confortável (~20rem) sem
     invadir o espaço da marca. Em telas intermediárias ela pode encolher
     (flex-basis menor) e, no mobile (≤900px), o grupo inteiro
     (`.topbar-end`) ganha `flex: 1 1 12rem` para preencher a linha. */
  flex: 0 1 20rem;
  width: 20rem;
  max-width: 20rem;
  min-width: 12rem;
}

/* Agrupa busca e cart à direita da nav. Quando a search cai para a
   próxima linha (em telas muito estreitas), o cart continua grudado
   nela — eles viajam juntos como um bloco só. A definição vive aqui
   porque o grupo é específico das páginas públicas que têm busca.

   No desktop o grupo se mantém compacto (largura = conteúdo) e é
   empurrado para a borda direita do container pela `margin-left: auto`.
   Isso alinha o cart com o resto da página. Em mobile, a media query
   abaixo relaxa isso para que o grupo ocupe a linha inteira. */
.topbar-end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  min-width: 0;
}

.topbar-search__icon {
  position: absolute;
  top: 50%;
  left: 0.95rem;
  z-index: 1;
  display: grid;
  width: 2rem;
  height: 2rem;
  color: var(--purple-dark) !important;
  pointer-events: none;
  place-items: center;
  transform: translateY(-50%);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.topbar-search__icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.topbar-search .search-input {
  min-height: 3.35rem;
  min-width: auto;
  padding: 0.85rem 1rem 0.85rem 3.15rem;
  border: 2px solid rgba(124, 58, 237, 0.28) !important;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    0 8px 22px rgba(76, 29, 149, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
  font-size: 0.98rem;
}

.topbar-search:hover .search-input {
  border-color: rgba(124, 58, 237, 0.5) !important;
  box-shadow: 0 10px 26px rgba(76, 29, 149, 0.14) !important;
}

.topbar-search:focus-within .search-input {
  border-color: var(--purple-dark) !important;
  background: var(--surface) !important;
  box-shadow:
    0 0 0 4px rgba(124, 58, 237, 0.14),
    0 12px 30px rgba(76, 29, 149, 0.16) !important;
}

.topbar-search:focus-within .topbar-search__icon {
  color: var(--gold-dark) !important;
  transform: translateY(-50%) scale(1.08);
}

.cart-button {
  width: 3.3rem;
  height: 3.3rem;
  border: 2px solid rgba(255, 255, 255, 0.75) !important;
  background: linear-gradient(145deg, var(--purple-dark), #5b21b6) !important;
  color: #fff !important;
  box-shadow:
    0 10px 24px rgba(91, 33, 182, 0.3),
    0 0 0 3px rgba(167, 139, 250, 0.18) !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.cart-button:hover {
  border-color: #fff !important;
  background: linear-gradient(145deg, #8b5cf6, var(--purple-dark)) !important;
  box-shadow:
    0 14px 30px rgba(91, 33, 182, 0.38),
    0 0 0 4px rgba(251, 191, 36, 0.22) !important;
  filter: saturate(1.08);
  transform: translateY(-2px) scale(1.03);
}

.cart-button:active {
  transform: translateY(0) scale(0.98);
}

.cart-button:focus-visible {
  outline: 3px solid var(--gold) !important;
  outline-offset: 3px;
}

.cart-icon {
  display: grid;
  place-items: center;
}

.cart-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.cart-badge {
  top: -0.42rem;
  right: -0.42rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.35rem;
  border: 2px solid var(--surface) !important;
  background: var(--gold) !important;
  color: var(--on-gold) !important;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 5px 12px rgba(217, 119, 6, 0.35) !important;
}

@media (max-width: 900px) {
  /* Em ≤900px o .nav tem flex-wrap e o `.topbar-end` (definido acima)
     engloba a busca e o cart. Eles viajam juntos: lado a lado enquanto
     couber, e caem juntos para a próxima linha quando não couber.
     Aqui só ajustamos tamanho do input e do cart-button. */

  .topbar-search .search-input {
    min-height: 3.1rem;
  }

  .cart-button {
    width: 3rem;
    height: 3rem;
  }
}

@media (max-width: 520px) {
  .topbar-search .search-input {
    min-height: 3rem;
    padding-left: 2.9rem;
    border-radius: 1rem;
  }

  .topbar-search__icon {
    left: 0.75rem;
  }

  .cart-button {
    width: 2.85rem;
    height: 2.85rem;
  }

  .cart-icon svg {
    width: 1.35rem;
    height: 1.35rem;
  }
}