/* Kreator zgłoszeń Skup Gastro — pozycja po pozycji.
   Kolory i font biorą się ze zmiennych motywu (op-*), z awaryjnymi wartościami na wypadek
   wstawienia kreatora na stronie, która ich nie definiuje. Mobile-first: telefon jest tu
   przypadkiem podstawowym, bo klient stoi w lokalu i fotografuje sprzęt. */

.sg-kreator {
  --sgk-gniazdo: var(--op-gniazdo, #D6350F);
  --sgk-gniazdo-ciemny: var(--op-gniazdo-ciemny, #A82709);
  --sgk-tusz: var(--op-tusz, #14171A);
  --sgk-pianka: var(--op-pianka, #16181A);
  --sgk-papier: var(--op-papier, #F4F5F6);
  --sgk-kant: var(--op-kant, #6A737A);
  --sgk-metal: var(--op-metal, #C9CFD4);
  --sgk-biel: #fff;
  font-family: var(--op-font, Archivo, system-ui, sans-serif);
  color: var(--sgk-tusz);
  max-width: 640px;
  margin: 0 auto;
  /* Nagłówek strony jest przyklejony — bez tego przewinięcie do kreatora chowa jego tytuł pod paskiem. */
  scroll-margin-top: 96px;
}

.sg-kreator a { color: var(--sgk-gniazdo); }   /* motyw daje linkom własny kolor, tu ma być cynober */
.sg-kreator__naglowek a { color: #fff; }

.sg-kreator *, .sg-kreator *::before, .sg-kreator *::after { box-sizing: border-box; }

.sg-kreator__noscript {
  padding: 16px; border: 2px solid var(--sgk-gniazdo); border-radius: 10px; line-height: 1.5;
}

/* ---------- rama ---------- */

.sg-kreator__naglowek {
  background: var(--sgk-pianka); color: #fff; padding: 18px 20px; border-radius: 12px 12px 0 0;
}
.sg-kreator__naglowek h2 { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: #fff; }
.sg-kreator__naglowek p { margin: 0; font-size: 14px; line-height: 1.5; color: #C9CFD4; }

.sg-kreator__ciało {
  background: var(--sgk-biel); border: 1px solid var(--sgk-metal); border-top: 0;
  border-radius: 0 0 12px 12px; padding: 18px 16px 20px;
}

/* Osadzony na stronie: karta wokół ma już tło, ramkę i tytuł. Druga ramka w środku wyglądała
   jak pudełko w pudełku, a czarny nagłówek dublował czarny nagłówek karty. */
.sg-kreator--osadzony { max-width: none; }
.sg-kreator--osadzony .sg-kreator__ciało {
  background: transparent; border: 0; border-radius: 0; padding: 0;
}
.sg-kreator__notka {
  margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid var(--sgk-gniazdo);
  background: var(--sgk-papier); border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.55; color: var(--sgk-tusz);
}
.sg-kreator__plakietka-wiersz { margin: 0 0 12px; }

/* Pasek kroków. Numer w kółku ma `line-height:1` i własny box-sizing — reguła `*` nie łapie
   pseudoelementów, a `padding` na kółku robił z niego elipsę. */
.sg-kreator__kroki { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sg-kreator__krok { display: flex; align-items: center; gap: 8px; font-size: 11px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sgk-kant); }
.sg-kreator__krok-numer {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--sgk-metal); color: var(--sgk-tusz);
  font-size: 13px; line-height: 1; letter-spacing: 0; box-sizing: border-box;
}
.sg-kreator__krok--aktywny { color: var(--sgk-tusz); }
.sg-kreator__krok--aktywny .sg-kreator__krok-numer { background: var(--sgk-gniazdo); color: #fff; }
.sg-kreator__kreska { flex: 1; height: 2px; background: var(--sgk-metal); }

/* ---------- pozycje ---------- */

.sg-kreator__pozycja {
  border: 1px solid var(--sgk-metal); border-radius: 12px; padding: 12px; margin-bottom: 10px;
  background: var(--sgk-biel);
}
.sg-kreator__pozycja-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sg-kreator__pozycja-lp { font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sgk-kant); }
.sg-kreator__usun {
  background: none; border: 0; color: var(--sgk-kant); font-size: 13px; font-weight: 700;
  text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 4px;
}
.sg-kreator__usun:hover { color: var(--sgk-gniazdo); }

.sg-kreator label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 4px; }
.sg-kreator .sg-kreator__gwiazdka { color: var(--sgk-gniazdo); }

.sg-kreator input[type=text], .sg-kreator input[type=tel], .sg-kreator input[type=email],
.sg-kreator input[type=number],
.sg-kreator select, .sg-kreator textarea {
  width: 100%; font-family: inherit; font-size: 16px;  /* mniej = Safari przybliża stronę */
  padding: 10px 12px; border: 1px solid var(--sgk-metal); border-radius: 8px;
  background: var(--sgk-papier); color: var(--sgk-tusz); min-height: 46px;
}
.sg-kreator textarea { min-height: 84px; resize: vertical; }
.sg-kreator input:focus, .sg-kreator select:focus, .sg-kreator textarea:focus {
  outline: 2px solid var(--sgk-gniazdo); outline-offset: 1px; border-color: var(--sgk-gniazdo);
}

/* ---------- kafle zdjęć ---------- */

.sg-kreator__zdjecia { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
/* Obok siebie aż do bardzo wąskich ekranów: jeden pod drugim kosztowało 100 px
   przewijania na każdą pozycję, a przy 390 px kafel ma i tak 155 px szerokości. */
@media (max-width: 340px) { .sg-kreator__zdjecia { grid-template-columns: 1fr; } }

.sg-kreator__kafel { position: relative; }
.sg-kreator__kafel input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* `.sg-kreator label` ma wyższą specyficzność niż sama klasa i narzucała kaflom `display:block`
   oraz wersaliki — napisy zlewały się wtedy w jedną linię. Stąd selektor z elementem. */
.sg-kreator label.sg-kreator__kafel-przycisk {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; min-height: 68px; padding: 10px; margin: 0; cursor: pointer; text-align: center;
  border: 2px dashed var(--sgk-metal); border-radius: 10px; background: var(--sgk-papier);
  font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--sgk-tusz);
  text-transform: none; letter-spacing: 0;
}
.sg-kreator__kafel-nazwa { display: block; font-size: 13px; font-weight: 800; }
.sg-kreator__kafel-przycisk:hover { border-color: var(--sgk-gniazdo); }
.sg-kreator__kafel input[type=file]:focus-visible + .sg-kreator__kafel-przycisk {
  outline: 2px solid var(--sgk-gniazdo); outline-offset: 2px;
}
/* Tabliczka ma być widocznie ważniejsza od zwykłego zdjęcia — selektor z elementem, bo
   inaczej przegrywa z regułą kafla wyżej. */
.sg-kreator .sg-kreator__kafel--tabliczka label.sg-kreator__kafel-przycisk {
  border-color: var(--sgk-gniazdo); background: #FFF7F4;
}
.sg-kreator .sg-kreator__kafel--tabliczka .sg-kreator__kafel-nazwa { color: var(--sgk-gniazdo-ciemny); }

.sg-kreator .sg-kreator__kafel--gotowy label.sg-kreator__kafel-przycisk {
  border-style: solid; border-color: #2E7D32; background: #fff; padding: 8px;
}
.sg-kreator__podglad { width: 100%; height: 86px; object-fit: cover; border-radius: 6px; display: block; }
.sg-kreator__kafel-stan { display: block; font-size: 11px; font-weight: 700; color: var(--sgk-kant); text-transform: none; }
.sg-kreator .sg-kreator__kafel--blad label.sg-kreator__kafel-przycisk { border-color: var(--sgk-gniazdo); background: #FFF4F1; }

/* „Nie mam dostępu" i „Co to jest tabliczka" to jedna myśl — stały w dwóch wierszach
   i robiły zupę z linków pod kaflami. */
.sg-kreator__pod-kaflami { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.sg-kreator__pod-kaflami .sg-kreator__wyjasnienie { margin: 0; }
.sg-kreator__bez-tabliczki {
  background: none; border: 0; padding: 6px 0; min-height: 44px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--sgk-kant); text-decoration: underline;
}
.sg-kreator__bez-tabliczki:hover { color: var(--sgk-gniazdo); }
.sg-kreator__brak-info {
  margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--sgk-kant);
  background: var(--sgk-papier); border-left: 3px solid var(--sgk-metal); padding: 8px 10px; border-radius: 0 6px 6px 0;
}

/* Wyjaśnienie „co to tabliczka" — rozwijane, bo połowa klientów nie zna tej nazwy. */
.sg-kreator__wyjasnienie { margin-top: 2px; }
.sg-kreator__wyjasnienie summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--sgk-kant);
  min-height: 44px; display: flex; align-items: center; text-decoration: underline;
}
.sg-kreator__wyjasnienie summary:hover { color: var(--sgk-gniazdo); }
.sg-kreator__wyjasnienie-tresc {
  font-size: 13px; line-height: 1.55; color: var(--sgk-tusz);
  background: var(--sgk-papier); border-radius: 8px; padding: 12px 14px;
}
.sg-kreator__wyjasnienie-tresc ul { margin: 8px 0 0; padding-left: 18px; }
.sg-kreator__wyjasnienie-tresc li { margin-bottom: 4px; }

/* ---------- przyciski ---------- */

.sg-kreator__dodaj {
  width: 100%; min-height: 46px; border: 1px dashed var(--sgk-kant); border-radius: 10px;
  background: #fff; color: var(--sgk-tusz); font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; margin-bottom: 14px;
}
.sg-kreator__dodaj:hover { border-color: var(--sgk-gniazdo); color: var(--sgk-gniazdo); }
.sg-kreator__dodaj[disabled] { opacity: .45; cursor: not-allowed; }

.sg-kreator__akcje { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.sg-kreator__btn {
  flex: 1; min-height: 52px; border: 0; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 800;
  background: var(--sgk-gniazdo); color: #fff;
}
.sg-kreator__btn:hover { background: var(--sgk-gniazdo-ciemny); }
.sg-kreator__btn[disabled] { opacity: .55; cursor: not-allowed; }
.sg-kreator__btn--jasny { background: #fff; color: var(--sgk-tusz); border: 1px solid var(--sgk-metal); flex: 0 0 auto; padding: 0 18px; }
.sg-kreator__btn--jasny:hover { background: #fff; border-color: var(--sgk-gniazdo); color: var(--sgk-gniazdo); }

.sg-kreator__stan { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--sgk-kant); min-height: 0; }
.sg-kreator__stan--blad { color: var(--sgk-gniazdo); font-weight: 700; }

.sg-kreator__stopka { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sgk-metal);
  font-size: 12px; line-height: 1.5; color: var(--sgk-kant); }
.sg-kreator__hurt { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--sgk-kant); }
.sg-kreator__hurt a { color: var(--sgk-gniazdo); font-weight: 700; }

.sg-kreator__zgoda { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.sg-kreator__zgoda input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--sgk-gniazdo); }
.sg-kreator__zgoda label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500;
  line-height: 1.5; margin: 0; }

.sg-kreator__pole { margin-bottom: 12px; }
.sg-kreator__pole--blad input, .sg-kreator__pole--blad select { border-color: var(--sgk-gniazdo); background: #FFF4F1; }
.sg-kreator__blad-pola { margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--sgk-gniazdo); }

.sg-kreator__dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Sztuki i stan zostają obok siebie także na wąskim ekranie — to dwa krótkie pola,
   rozbijanie ich na dwa wiersze wydłużyłoby kartę urządzenia bez powodu. */
.sg-kreator__dwie--waskie { grid-template-columns: 84px 1fr; gap: 8px; margin-top: 10px; }
.sg-kreator__podpis { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--sgk-kant); }
.sg-kreator__podpis--luzny { margin: -4px 0 14px; }
/* Notka jest szara; gdy telefon też siedział w szarym pudle, oba zlewały się w jedną plamę. */
.sg-kreator__telefon-gora { padding: 0; background: transparent; }
@media (max-width: 480px) {
  .sg-kreator__dwie { grid-template-columns: 1fr; gap: 0; }
  .sg-kreator__dwie--waskie { grid-template-columns: 84px 1fr; gap: 10px; }
}

/* ---------- podziękowanie ---------- */

.sg-kreator__koniec { text-align: center; padding: 28px 18px; }
.sg-kreator__koniec-znak { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.sg-kreator__koniec h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; }
.sg-kreator__koniec p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }

.sg-kreator__plakietka {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px;
  background: var(--op-tasma, #E8B923); color: #14171A; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}


/* ============================================================
   Sekcja hero (op-tablica) — dostrojenie pod kreator.
   Style op-* są WKLEJONE w treść strony, więc plik motywu ich nie przebije;
   stąd selektory z `body` — wygrywają specyficznością, nie kolejnością.
   ============================================================ */

/* `clip` przycina tak samo jak `hidden`, ale nie robi z sekcji kontenera przewijania —
   bez tego przyklejona kolumna tekstu nie ma się do czego przykleić. */
body .op-tablica { overflow: clip; }

@media (min-width: 1024px) {
  /* Kreator jest dwa razy wyższy od kolumny tekstu (1076 px wobec 545 px). Bez przyklejenia
     nagłówek, telefon i liczby uciekały z ekranu, a obok formularza zostawała pustka. */
  body .op-tablica__tekst { position: sticky; top: 104px; }
}