/* main.221852b6.css jest statycznym, przycietym (purged) bundlem Tailwind —
   zawiera tylko klasy użyte w oryginalnym szablonie sklepu. Karta aukcji
   (web/_aukcja_row.html) korzysta z kilku narzędziowych klas Tailwind,
   których w tamtym bundlu nigdy nie było, więc trzeba je tu dopisać ręcznie
   (inaczej klasa w HTML-u nic nie robi — przeglądarka po prostu ją ignoruje).
   Nazwy klas 1:1 jak w Tailwindzie, żeby szablon zostawał czytelny. */

.w-1\/3 {
  width: 33.3333%;
}

.shrink-0 {
  flex-shrink: 0;
}

.items-stretch {
  align-items: stretch;
}

.self-stretch {
  align-self: stretch;
}

.min-w-0 {
  min-width: 0;
}

.mt-auto {
  margin-top: auto;
}

.inset-x-0 {
  left: 0;
  right: 0;
}

.bottom-1 {
  bottom: 0.25rem;
}

.right-1 {
  right: 0.25rem;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0px;
}

.gap-0 {
  gap: 0;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.p-0\.5 {
  padding: 0.125rem;
}

/* Jedna linia z wielokropkiem — nazwa aukcji w górnym pasku szczegółów
   (web/aukcja_detail.html); długie tytuły nie mogą rozpychać paska ani
   spychać serca poza ekran. */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.text-n300 {
  color: var(--color-n300);
}

.text-primary900 {
  color: var(--color-primary900);
}

.bg-primary50 {
  background-color: var(--color-primary50);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

:where(.dark, .dark *) .dark\:text-n600 {
  color: var(--color-n600);
}

:where(.dark, .dark *) .dark\:text-primary100 {
  color: var(--color-primary100);
}

/* Dwa <input type="range"> nałożone na siebie na całą szerokość toru (suwaki
   zakresu w web/_advanced_filters_fields.html, używane na wyszukiwarce i w
   modalu filtrów kategorii) — bez tego górny przechwytuje kliknięcia na całej
   szerokości i nie da się w ogóle ruszyć drugim uchwytem. Klikalny/przeciągalny
   ma być tylko sam uchwyt (kółko), nie cały tor. */
.range-input {
  pointer-events: none;
}

.range-input::-webkit-slider-thumb {
  pointer-events: auto;
}

.range-input::-moz-range-thumb {
  pointer-events: auto;
}

/* Modale otwierane efektem "circular reveal" (jak w Material/Flutter): koło
   rozszerzające się z punktu kliknięcia przycisku, aż wypełni cały ekran,
   zamiast wjeżdżania z boku/dołu. Klasa .circular-reveal zamiast wbudowanych
   .side-modal/.bottom-modal (main.221852b6.css) - dokłada się ją do
   .commonModal, żeby dostać ten efekt na dowolnym modalu.
   --reveal-x/--reveal-y/--reveal-radius ustawia
   web/static/assets/js/circular-reveal.js na podstawie pozycji klikniętego
   przycisku i przekątnej viewportu (promień w px, WYLICZONY w JS - słowo
   "farthest-corner" nie istnieje dla clip-path: circle(), tylko
   closest-side/farthest-side, więc samo CSS nie umie tego zrobić
   deklaratywnie; bez poprawnej wartości cała deklaracja jest
   nieprawidłowa i przeglądarka po prostu pokazuje/chowa treść bez
   animacji).
   Wartości poniżej to fallback, gdyby JS z jakiegoś powodu nie
   zdążył/nie zadziałał.
   Używane przez web/_user_side_panel.html (menu użytkownika) i
   web/_sort_modal.html (sortowanie). */
.modal.circular-reveal {
  --reveal-x: 100%;
  --reveal-y: 0px;
  --reveal-radius: 150%;
  clip-path: circle(0px at var(--reveal-x) var(--reveal-y));
  transition: clip-path 300ms ease-out;
}

.modal.circular-reveal.active {
  clip-path: circle(var(--reveal-radius) at var(--reveal-x) var(--reveal-y));
}

/* Panel menu użytkownika (web/_user_side_panel.html) - box menu ma zajmować
   tylko połowę szerokości ekranu (przyklejony do prawej, skąd otwiera się
   przez hamburger), nie całą. Samo .modal.circular-reveal wciąż rozlewa
   się na cały ekran (przyciemnione .modalBg w tle) - to tylko zawężenie
   białego boxa z linkami menu. .w-full w znaczniku (main.221852b6.css)
   przegrywa, bo ta reguła ładuje się później - stąd nie trzeba usuwać
   klasy z HTML-a. */
.side-modal-content {
  width: 50%;
  margin-left: auto;
}

/* Wariant .below-header (web/_sort_modal.html) - modal ma zaczynać się
   pod nagłówkiem strony (nie zakrywać go), żeby po otworzeniu wyglądało
   to jak jedna spójna całość z nagłówkiem, a nie nakładka na cały ekran.
   --reveal-top (dokładna wysokość nagłówka na danej stronie, różna dla
   home.html/category.html/obserwowane.html) liczy circular-reveal.js. */
.modal.circular-reveal.below-header {
  top: var(--reveal-top, 0px);
  right: 0;
  bottom: 0;
  left: 0;
}

/* Selektor kraju z wyszukiwarką (web/templates/web/signup.html) — JS ukrywa
   prawdziwy <select id="id_kraj"> (renderowany przez RegistrationForm,
   patrz web.countries.kraje_choices) i wstawia przed nim przycisk +
   panel z polem szukania i listą krajów; bez JS <select> zostaje widoczny
   i w pełni funkcjonalny (progresywne wzbogacenie, nie wymagany fallback). */
.kraj-select-wrap {
  position: relative;
}

.kraj-select-btn {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  font-size: 1rem;
  background-color: var(--color-n0, #fff);
  border: 1px solid var(--color-n300, #d1d5db);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

/* Tailwind (main.221852b6.css) przełącza dark mode klasą .dark na przodku
   (&:where(.dark, .dark *)), nie media query — ten sam mechanizm tutaj. */
.dark .kraj-select-btn {
  background-color: var(--color-dark2, #161c4a);
  border-color: var(--color-n600, #4b5563);
}

.kraj-select-btn:focus {
  outline: none;
  border-color: var(--color-primary, #16a34a);
}

.kraj-select-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  background-color: var(--color-n0, #fff);
  border: 1px solid var(--color-n300, #d1d5db);
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
}

.dark .kraj-select-panel {
  background-color: var(--color-dark2, #161c4a);
  border-color: var(--color-n600, #4b5563);
}

.kraj-select-search {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  color: inherit;
  background-color: transparent;
  border: 1px solid var(--color-n300, #d1d5db);
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.kraj-select-option {
  font-size: 0.875rem;
  padding: 0.5rem 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

.kraj-select-option:hover,
.kraj-select-option:focus {
  background-color: var(--color-n100, #f3f4f6);
  outline: none;
}

.dark .kraj-select-option:hover,
.dark .kraj-select-option:focus {
  background-color: color-mix(in oklab, var(--color-n0, #fff) 15%, transparent);
}

.kraj-select-option[hidden] {
  display: none;
}

/* Pole wyszukiwania na stronie głównej (web/templates/web/home.html) -
   wyróżnione grubą obwódką jak we wzorze. Żółty (amber-400) wraca
   celowo po próbie czerwonej (#da0214, kolor logo) - czytelniej się
   odróżnia od reszty czerwonych akcentów na stronie. border-amber-400
   nie było w oryginalnym szablonie, więc klasy Tailwinda dla tego
   koloru nie ma w wypalonym main.221852b6.css - sama zmienna
   --color-amber-400 jest zdefiniowana (paleta kolorów nie jest
   przycinana, tylko klasy). */
.home-search-box {
  border: 3px solid var(--color-amber-400);
}

/* Zielone tło nagłówka strony głównej ma kończyć się w połowie wysokości
   pola wyszukiwania (dolna połowa inputu ma już stać na jasnym tle listy).
   Zielone tło jest WŁASNYM tłem (background-color) całego przyklejonego
   (position: sticky) nagłówkowego <div> - Safari na iOS koloruje status
   bar / pasek adresu na podstawie zadeklarowanego background-color
   elementu przyklejonego do góry strony, nie na podstawie tego, co
   faktycznie widać po złożeniu warstw. Gdyby zielone tło było tylko
   dekoracyjną nakładką, a właściwym tłem diva byłby biały, Safari
   kolorowałoby status bar na biało mimo widocznej zieleni (patrz
   historia zmian tego pliku).
   Dlatego biel dla dolnej części nagłówka jest dekoracyjną nakładką
   (.home-header-fg, absolutnie pozycjonowana) - reszta nagłówka (logo,
   ikony, sam input) leży na niej w normalnym przepływie. Wysokość 82px
   dobrana "na oko" pod obecny układ (pt-5 + rząd logo + mb-4 + połowa
   wysokości pola wyszukiwania) - do doszlifowania wizualnie po
   wdrożeniu, jeśli proporcje czcionek/ikon się zmienią. */
.home-header-fg {
  top: 82px;
  bottom: 0;
}

/* Rząd Sortuj/Filtruj pod polem wyszukiwania na stronie głównej -
   czarny tekst/ikony. */
.home-sort-filter-row,
.home-sort-filter-row a,
.home-sort-filter-row button {
  color: var(--color-n900);
}

/* Rebranding: primary (był zielony, #29a060) -> #231f20 (kolor tła koła
   w nowym logotypie). main.221852b6.css definiuje --color-primary* w
   :root, więc nadpisanie tych zmiennych tutaj (plik ładowany PO main.css)
   przepisuje kolor wszędzie, gdzie klasy Tailwinda go używają
   (bg-primary, text-primary, border-primary, bg-primary400/600 - tło
   nagłówka strony głównej, itd.) bez ruszania samego bundla.
   primary300 zostaje jasnoszary (nie #231f20) - używany jako
   dark:text-primary300 na ciemnym tle (dolna nawigacja, panel boczny),
   więc musi zostać czytelny/jasny, inaczej byłby niewidoczny. */
:root {
  --color-primary: #231f20;
  --color-primary50: #f4f4f4;
  --color-primary100: #dedede;
  --color-primary200: #c9c7c8;
  --color-primary300: #bdbcbc;
  --color-primary400: #231f20;
  --color-primary500: #231f20;
  --color-primary600: #231f20;
  --color-primary700: #191616;
  --color-primary800: #131112;
  --color-primary900: #0e0c0d;
}

.border-accent-3 {
  border-color: var(--color-accent-3);
}