/* static/css/theme.css */

:root {
  --primary-bg: #1a202c; /* Ciemne tło */
  --secondary-bg: #2d3748; /* Tło kart */
  --primary-text: #e2e8f0; /* Główny tekst */
  --secondary-text: #a0aec0; /* Drugorzędny tekst */
  --accent-color: #6366f1; /* Kolor akcentu (np. fioletowy) */
  --accent-hover: #4f46e5; /* Kolor akcentu po najechaniu */
  --success-color: #34d399; /* Kolor sukcesu (np. zielony) */
  --error-color: #f87171; /* Kolor błędu (np. czerwony) */
  --link-color: #60a5fa; /* Kolor linków */
  --link-hover: #3b82f6; /* Kolor linków po najechaniu */
  --border-color: #4a5568; /* Kolor ramek */
}

.products-container {
  /* Ustawia maksymalną wysokość kontenera. 
     Możesz dostosować tę wartość (np. 400px, 50vh), 
     aby idealnie pasowała do Twojego layoutu. */
  max-height: 220px;

  /* Dodaje pionowy pasek przewijania, ale tylko wtedy, 
     gdy zawartość przekracza ustawioną max-height. */
  overflow-y: auto;
}

/* Cały pasek przewijania */
::-webkit-scrollbar {
  width: 8px; /* Szerokość paska */
}

/* Tło (ścieżka), po której porusza się suwak */
::-webkit-scrollbar-track {
  background: #2d3748; /* Kolor tła kart */
  border-radius: 10px;
}

/* Suwak (to co przeciągamy) */
::-webkit-scrollbar-thumb {
  background: #4a5568; /* Ciemniejszy szary */
  border-radius: 10px;
}

/* Suwak po najechaniu myszką */
::-webkit-scrollbar-thumb:hover {
  background: #718096; /* Jaśniejszy szary */
}

/* Style dla strony powitalnej */
/* .landing-page-bg { */
/* background-image: url("path_do_twojego_tla.jpg"); /* Opcjonalnie: dodaj tło */
*/
  /* background-size: cover; */
  /* background-position: center; */
/* } */

.landing-container {
  background-color: rgba(
    0,
    0,
    0,
    0.7
  ); /* Półprzezroczyste tło dla czytelności */
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}