/* Kreator vouchera na karcie produktu.
   Voucher pokazuje sie TYLKO w okienku po kliknieciu „Sprawdz…" — okienko to
   `.opa-karta-zoom` z frontend.css (ten sam wyglad co powiekszenie kartki).
   Zmienne `--fb-*` sa w frontend.css przypiete do `.opa-fazab`, wiec powtarzamy
   je tutaj z tych samych zrodel (zmienne motywu). */
.opa-kreator {
  --fb-ink: var(--ink, #3A352C);
  --fb-gold: var(--gold, #9A7B46);
  --fb-line: var(--line, #E8E0D3);
  --fb-sans: "Montserrat", Arial, sans-serif;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  color: var(--fb-ink);
}
/* ⛔ `hidden` MUSI wygrywac z naszym `display`. Napis „Przygotowujemy Twój
   projekt…” mial `display: flex`, wiec atrybut `hidden` nic nie znaczyl i napis
   wisial na gotowym voucherze (zgloszenie Mateusza 6.11.2026). Test sprawdzal
   atrybut, a nie to, co widac — dlatego regula jest dla CALEGO kreatora. */
.opa-kreator [hidden] { display: none !important; }
/* --- wybor tresci: same numerki (Mateusz, 6.11.2026) ------------------ */
.opa-kreator__tresci {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.opa-kreator__tresci legend {
  float: left;            /* legenda w jednym rzedzie z numerkami */
  margin: 0 6px 0 0;
  padding: 0;
  font-family: var(--fb-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 38px;
}
.opa-kreator__tresc {
  position: relative;
  cursor: pointer;
}
.opa-kreator__tresc input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.opa-kreator__tresc span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--fb-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--fb-sans);
  font-size: 15px;
  font-weight: 600;
}
.opa-kreator__tresc:hover span { border-color: var(--fb-gold); }
.opa-kreator__tresc input:checked + span {
  border-color: var(--fb-gold);
  background: var(--fb-gold);
  color: #fff;
}
.opa-kreator__tresc input:focus-visible + span {
  outline: 2px solid var(--fb-gold);
  outline-offset: 2px;
}

/* --- przycisk „Sprawdz…" — wyglad sprzed przebudowy (Mateusz: „wczesniej
   mial ladniejszy UX"). ⚠️ Regula wypadla po cichu, kiedy wycinalismy z tego
   pliku podglad w kroku: stala w tym samym bloku. Przycisk spadal wtedy do
   golego wygladu przegladarki (szary, na cala szerokosc). */
.opa-kreator__sprawdz {
  justify-self: center;
  margin-top: 6px;
  font-family: var(--fb-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 12px 22px;
  border: 1px solid var(--fb-gold);
  border-radius: 999px;
  background: #fff;
  color: var(--fb-ink);
  cursor: pointer;
  box-shadow: none;
  width: auto;
  max-width: 100%;
}
.opa-kreator__sprawdz:hover { background: #fff8ec; }
.opa-kreator__sprawdz:focus-visible { outline: 2px solid var(--fb-gold); outline-offset: 2px; }
.opa-kreator__sprawdz:disabled { opacity: .7; cursor: progress; }
.opa-kreator__wybrana {
  margin: 0;
  font-size: 13px;
  text-align: center;
  color: #5d564c;
}
.opa-kreator__komunikat {
  margin: 0;
  font-size: 13px;
  text-align: center;
  color: #a2412f;
}
.opa-kreator__uwaga-ogolna {
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: #6b6458;
}

/* --- pola --------------------------------------------------------------- */
.opa-kreator__pola { display: grid; gap: 12px; }
.opa-kreator__pole { display: grid; gap: 4px; }
.opa-kreator__pole[hidden] { display: none; }
.opa-kreator__pole label {
  font-family: var(--fb-sans);
  font-size: 13px;
  font-weight: 600;
}
.opa-kreator__pole label em { color: #a2412f; font-style: normal; }
.opa-kreator__pole input[type="text"],
.opa-kreator__pole input[type="email"],
.opa-kreator__pole input[type="tel"],
.opa-kreator__pole select {
  width: 100%;
  box-sizing: border-box;
}
.opa-kreator__przelacznik {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.opa-kreator__podpowiedz,
.opa-kreator__logo-stan {
  margin: 0;
  font-size: 12px;
  color: #6b6458;
}
.opa-kreator__pole.has-error input,
.opa-kreator__pole.has-error select { border-color: #a2412f; }
.opa-kreator__blad {
  margin: 0;
  font-size: 12px;
  color: #a2412f;
}
.opa-kreator__uwagi {
  margin: 8px 0 0;
  font-size: 13px;
  color: #7a5a1f;
}
.opa-kreator__uwagi:empty { display: none; }

/* --- logo: trzy drogi --------------------------------------------------- */
.opa-kreator__logo {
  border: 1px solid var(--fb-line);
  border-radius: 10px;
  margin: 0;
  padding: 10px 12px 12px;
  display: grid;
  gap: 8px;
}
.opa-kreator__logo legend {
  font-family: var(--fb-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 0 4px;
}
.opa-kreator__opcja {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}
.opa-kreator__opcja input { margin-top: 3px; flex: none; }
.opa-kreator__opcja small {
  display: block;
  font-size: 12px;
  color: #6b6458;
}
.opa-kreator__logo-plik { padding-left: 24px; display: grid; gap: 6px; }
.opa-kreator__logo-plik .opa-section { margin: 0; }

/* --- okienko z powiekszeniem: numerki tresci pod voucherem ---------------
   Okienko to `.opa-karta-zoom` z frontend.css (ten sam wyglad co przy
   kartkach); dokladamy tylko pasek pod rysunkiem. */
.opa-kreator-zoom { flex-direction: column; gap: 14px; }
.opa-kreator-zoom .opa-karta-zoom__scena { flex: 0 1 auto; transition: opacity .15s; }
.opa-kreator-zoom .opa-karta-zoom__scena.is-laduje { opacity: .55; }
.opa-kreator-zoom__tresci {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #3A352C;
}
.opa-kreator-zoom__tresci button {
  width: 40px;
  height: 40px;
  border: 1px solid #E8E0D3;
  border-radius: 999px;
  background: #fff;
  color: #3A352C;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.opa-kreator-zoom__tresci button[aria-pressed="true"] {
  border-color: #9A7B46;
  background: #9A7B46;
  color: #fff;
}
.opa-kreator-zoom__tresci button:focus-visible { outline: 2px solid #9A7B46; outline-offset: 2px; }
/* Przycisk z nazwa czesci („Okładka", „Opaska") albo „Voucher" — szerokosc na napis. */
.opa-kreator-zoom__tresci button[data-czesc],
.opa-kreator-zoom__tresci button:not([aria-label]) { width: auto; padding: 0 14px; font-size: 13px; }

/* --- wybor z kontraktu (np. „Ważność vouchera") jako radiowki ------------ */
.opa-kreator__etykieta {
  font-family: var(--fb-sans);
  font-size: 13px;
  font-weight: 600;
}
.opa-kreator__wybor { display: grid; gap: 6px; }
/* Pole linku pod polem wyboru „Dodaj kod QR z linkiem". */
.opa-kreator__wlaczane { display: grid; gap: 4px; padding-left: 24px; }

/* --- „Sprawdz…" pulsuje do pierwszego klikniecia (Sylwia: niewidoczny) ---- */
@keyframes opaKreatorPuls {
  0%   { box-shadow: 0 0 0 0 rgba(154, 123, 70, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(154, 123, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(154, 123, 70, 0); }
}
.opa-kreator__sprawdz--puls { animation: opaKreatorPuls 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .opa-kreator__sprawdz--puls { animation: none; } }

/* --- social media: wiersz = JEDNO pole [ikonka portal ▾ | nazwa] + „×" --------
   (Mateusz, 6.11.2026: „zrob temu ladniejszy UX"). Lista portali byla systemowym
   <select> w czarnej ramce i kroju Arial obok pola w kolorach motywu. Teraz
   portal i nazwa siedza w jednej ramce, jak numer z kierunkowym: ta sama biel,
   linia i krój co reszta pol, wspolne podswietlenie przy pisaniu. */
.opa-kreator__social { display: grid; gap: 8px; }
.opa-kreator__social-pola { display: none !important; }   /* prawdziwe pola kontraktu — wypelnia je skrypt */
.opa-kreator__social-lista { display: grid; gap: 8px; padding-left: 24px; }
.opa-kreator__social-wiersz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 4px;
  align-items: center;
}
.opa-kreator__social-pole {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  min-height: 52px;          /* jak .opa-text-input motywu: 52 px, na telefonie 48 */
  border: 1px solid var(--line, #e7ddd0);
  background: var(--milk, #fffdf9);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Fokus: obrys 2 px w ciemnym zlocie kreatora (#9A7B46, ok. 3,5:1 na papierze).
   Zloto motywu (#b99a60) mialo 2:1 — przy klawiaturze pole wygladalo na nieaktywne. */
.opa-kreator__social-pole:focus-within {
  border-color: #9A7B46;
  outline: 2px solid #9A7B46;
  outline-offset: 1px;
}
.opa-kreator__social-portal {
  position: relative;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line, #e7ddd0);
  background: rgba(154, 123, 70, .06);
}
.opa-kreator__social-ikona {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--fb-gold);
  pointer-events: none;     /* klikniecie w ikonke otwiera liste */
}
.opa-kreator__social-portal select {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  min-height: 50px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233A352C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 7px;
  padding: 0 32px 0 38px;
  font-family: var(--fb-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fb-ink);
  cursor: pointer;
}
.opa-kreator__social-portal select:focus { outline: none; }
.opa-kreator__social-portal select:focus-visible { outline: 2px solid #9A7B46; outline-offset: -3px; }
.opa-kreator__social-wiersz:not([data-portal="instagram"]):not([data-portal="facebook"]):not([data-portal="tiktok"]) .opa-kreator__social-portal select { padding-left: 14px; }
.opa-kreator__social-pole .opa-text-input {
  min-height: 50px;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.opa-kreator__social-pole .opa-text-input:focus { outline: none; }
.opa-kreator__social-usun {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: #8a8275;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.opa-kreator__social-usun:hover { background: rgba(58, 53, 44, .07); color: var(--fb-ink); }
.opa-kreator__social-usun:focus-visible { outline: 2px solid var(--fb-gold); outline-offset: 1px; }
.opa-kreator__plus {
  justify-self: start;
  margin-left: 24px;
  border: 0; background: none; padding: 2px 0;
  font-family: var(--fb-sans); font-size: 13px; font-weight: 600;
  color: var(--fb-gold); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.opa-kreator__social-portal option { color: var(--fb-ink); }
@media (max-width: 760px) {
  .opa-kreator__social-pole { min-height: 48px; }
  .opa-kreator__social-portal select,
  .opa-kreator__social-pole .opa-text-input { min-height: 46px; }
}
/* Telefon: lista bez wciecia, a przy portalu sama ikonka ze strzalka (jak flaga
   przy numerze kierunkowym). Z napisem „Instagram" na nazwe profilu zostawalo
   120 px na 375 px ekranu. Lista do wyboru pokazuje dalej pelne nazwy. */
@media (max-width: 480px) {
  .opa-kreator__social-lista { padding-left: 0; }
  .opa-kreator__plus { margin-left: 0; }
  .opa-kreator__social-portal select { font-size: 13px; padding-right: 28px; background-position: right 10px center; }
}
@media (max-width: 420px) {
  .opa-kreator__social-wiersz[data-portal="instagram"] .opa-kreator__social-portal select,
  .opa-kreator__social-wiersz[data-portal="facebook"] .opa-kreator__social-portal select,
  .opa-kreator__social-wiersz[data-portal="tiktok"] .opa-kreator__social-portal select {
    width: 64px;
    padding: 0 0 0 64px;      /* tekst wypada poza pole — widac ikonke i strzalke */
    overflow: hidden;
    white-space: nowrap;
    background-position: right 10px center;
  }
  /* Ikonka jest wtedy JEDYNYM znakiem portalu — ciemna, nie blado zlota (2,4:1). */
  .opa-kreator__social-ikona { color: var(--fb-ink); }
}
/* Tryb wysokiego kontrastu: strzalka z obrazka ginie w ciemnym tle — wracamy do
   systemowej listy, ktora system sam koloruje. */
@media (forced-colors: active) {
  .opa-kreator__social-portal select { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: 8px; }
}

/* --- odpowiedzi pol wyboru: dopisek w nawiasie + pole pod swoja odpowiedzia ---
   (Mateusz, 6.11.2026: „Do wpisania recznie (wykropkowane miejsce)", „Data
   waznosci (np. 6 miesiecy)"). Pole okresu stoi ZARAZ pod „Data waznosci",
   wciete do tekstu odpowiedzi, a nie pod cala lista. */
.opa-kreator__opcja-dopisek { color: #6b6458; font-weight: 400; }
.opa-kreator__pole--pod-odpowiedzia { padding: 2px 0 4px 24px; }
.opa-kreator .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --- pole na logo w kreatorze: jedna zgrabna linijka zamiast duzej ramki ---
   (Mateusz, 6.11.2026: „element z plusem jest bardzo duzy"). Sekcja i jej
   pole to dalej te same ze sciezki dodatkow — zmieniamy tylko wyglad. */
.opa-kreator__logo-plik .opa-section > h3 { display: none; }
.opa-kreator__logo-plik .opa-file-upload {
  min-height: 0;
  padding: 8px 12px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
}
.opa-kreator__logo-plik .opa-file-upload__icon { width: 28px; height: 28px; font-size: 18px; }
.opa-kreator__logo-plik .opa-file-upload strong { font-family: var(--fb-sans); font-size: 13px; font-weight: 600; }
.opa-kreator__logo-plik .opa-file-upload small { font-size: 11px; font-weight: 500; }
.opa-kreator__logo-plik .opa-file-upload em { font-size: 12px; font-weight: 600; }