.categories-panel {
  flex: 0 0 30%;
  padding: 4px 8px 0 16px;
  overflow-y: auto;
  background: rgb(224, 242, 240);
  scrollbar-width: none;
}

.category-card {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
  color: white;
  padding: 20px;
  margin-bottom: 12px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 90px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.category-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.category-card.selected {
  outline: 3px solid #20b2aa;
  outline-offset: 2px;
}

.category-title {
  font-size: 18.75px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.3px;
}

@media (prefers-color-scheme: dark) {
  .categories-panel {
    background: rgb(20, 25, 25); /* fundo escuro */
  }

  .category-card {
    color: #e6f6f5; /* texto mais suave */
  }

  .category-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
  }

  .category-card.selected {
    outline: 2px solid #40e0d0; /* destaque turquesa mais vivo no dark */
  }

  .category-title {
    color: #f5fdfc; /* título mais claro */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
  }

  .category-card.selected {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
  }
}

.category-background {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_mercados.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mercados {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_mercados.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.farmacias {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_farmacy.jpg");
}

.refeicoes {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_lanchonete.jpg");
}

.saude {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_clinic.jpg");
}

.publico {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_public_services.jpg");
}

.beleza {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_estetica_beleza.jpg");
}

.advocacia {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_justice.jpg");
}

.construcao {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_construcao.jpg");
}

.mecanica {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_auto.jpg");
}

.servicos {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_services.jpg");
}

.impressao {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_stationary.jpg");
}

.tech {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_smartphones.jpg");
}

.lojas {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_store_clothes.jpg");
}

.hotelaria {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_bedroom.jpg");
}

.lazer {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_chacarra.jpg");
}

.agricultura {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.73) 0%,
      rgba(0, 0, 0, 0.63) 25%,
      rgba(0, 0, 0, 0.43) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("https://htspnfvffwnwnuyrmtwi.supabase.co/storage/v1/object/public/aonde/category-backgrounds/category_animais.jpg");
}