/* Formularz darowizny BACh. Paleta z logo — ta sama co na stronie. */

.bach-dar {
  --bach-navy: #1D67CD;   /* niebieski marki BACh */
  --bach-blue: #1D67CD;   /* ten sam niebieski — odnośniki i akcenty */
  --bach-green: #D81E5B;  /* czerwień marki BACh — dawniej zieleń */
  --bach-line: #E1E8EF;
  --bach-ink: #14202B;
  --bach-body: #4A5967;

  max-width: 560px;
  margin: 0 auto;
  font-size: 16px;
  color: var(--bach-body);
}

.bach-dar *, .bach-dar *::before, .bach-dar *::after { box-sizing: border-box; }

.bach-dar__test {
  background: #FFF6E8;
  border-left: 4px solid #E0A44A;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  margin: 0 0 18px;
}

.bach-dar--blad p {
  background: #FDF2F6;
  border-left: 4px solid #D81E5B;
  padding: 14px 18px;
  border-radius: 8px;
  margin: 0;
}

.bach-dar__form { display: flex; flex-direction: column; gap: 18px; }

.bach-dar__opcjonalne { font-weight: 400; color: #7A8794; font-size: 14px; }

/* ---------- Wybór rodzaju wsparcia ---------- */
.bach-dar__typ { display: flex; gap: 10px; }

.bach-dar__typ-opcja { flex: 1; position: relative; cursor: pointer; }
.bach-dar__typ-opcja input { position: absolute; opacity: 0; pointer-events: none; }

.bach-dar__typ-opcja span {
  display: block;
  text-align: center;
  padding: 13px 10px;
  border: 2px solid var(--bach-line);
  border-radius: 12px;
  font-weight: 700;
  color: var(--bach-navy);
  transition: .15s;
}

.bach-dar__typ-opcja input:checked + span {
  border-color: var(--bach-green);
  background: #F3FAEC;
}

/* Obrys widoczny przy obsłudze klawiaturą — bez niego nie da się poruszać po formularzu
   bez myszy, a nie każdy darczyńca może z niej korzystać. */
.bach-dar__typ-opcja input:focus-visible + span,
.bach-dar__kwota input:focus-visible + span {
  outline: 3px solid var(--bach-blue);
  outline-offset: 2px;
}

/* ---------- Kwoty ---------- */
.bach-dar__pole { display: flex; flex-direction: column; gap: 7px; border: 0; padding: 0; margin: 0; }

.bach-dar__pole legend,
.bach-dar__pole > label {
  font-weight: 700;
  color: var(--bach-ink);
  font-size: 15px;
  padding: 0;
}

.bach-dar__kwoty { display: flex; gap: 9px; flex-wrap: wrap; }

.bach-dar__kwota { position: relative; cursor: pointer; flex: 1 1 88px; }
.bach-dar__kwota input { position: absolute; opacity: 0; pointer-events: none; }

.bach-dar__kwota span {
  display: block;
  text-align: center;
  padding: 12px 8px;
  border: 2px solid var(--bach-line);
  border-radius: 10px;
  font-weight: 700;
  color: var(--bach-navy);
  white-space: nowrap;
  transition: .15s;
}

.bach-dar__kwota input:checked + span { border-color: var(--bach-green); background: #F3FAEC; }

.bach-dar__wlasna { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bach-dar__wlasna[hidden] { display: none; }

/* ---------- Pola tekstowe ---------- */
.bach-dar input[type="text"],
.bach-dar input[type="email"],
.bach-dar input[type="number"],
.bach-dar select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bach-line);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  color: var(--bach-ink);
  background: #fff;
}

.bach-dar input:focus, .bach-dar select:focus {
  outline: 3px solid var(--bach-blue);
  outline-offset: 1px;
  border-color: var(--bach-blue);
}

.bach-dar__siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bach-dar__podpowiedz { font-size: 13.5px; color: var(--bach-body); }

/* ---------- Zgody ---------- */
.bach-dar__zgoda {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
}

.bach-dar__zgoda input {
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  flex: 0 0 auto;
}

/* ---------- Przycisk ---------- */
.bach-dar__wyslij {
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--bach-green);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: .15s;
}

.bach-dar__wyslij:hover { background: #6BAA3A; }
.bach-dar__wyslij:disabled { background: #A9C88C; cursor: progress; }

.bach-dar__stopka { font-size: 13.5px; text-align: center; margin: 0; }

@media (max-width: 480px) {
  .bach-dar__siatka { grid-template-columns: 1fr; }
  .bach-dar__typ { flex-direction: column; }
}

/* ============ Panel darczyńcy ============ */

.bach-panel {
  --bach-navy: #1D67CD;   /* niebieski marki BACh */
  --bach-blue: #1D67CD;   /* ten sam niebieski — odnośniki i akcenty */
  --bach-green: #D81E5B;  /* czerwień marki BACh — dawniej zieleń */
  --bach-line: #E1E8EF;
  --bach-ink: #14202B;
  --bach-body: #4A5967;

  max-width: 720px;
  margin: 0 auto;
  color: var(--bach-body);
  font-size: 16px;
}

.bach-panel *, .bach-panel *::before, .bach-panel *::after { box-sizing: border-box; }
.bach-panel h2, .bach-panel h3 { color: var(--bach-navy); margin: 0 0 10px; }
.bach-panel h3 { margin-top: 34px; font-size: 20px; }

.bach-panel__info, .bach-panel__blad {
  padding: 13px 17px;
  border-radius: 10px;
  margin-bottom: 22px;
  font-size: 15px;
}

.bach-panel__info { background: #F3FAEC; border-left: 4px solid var(--bach-green); }
.bach-panel__blad { background: #FDF2F6; border-left: 4px solid #D81E5B; }

.bach-panel__gora {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bach-line);
}

.bach-panel__email { margin: 0; font-size: 15px; }

.bach-panel__wyloguj, .bach-panel__odwolaj {
  background: none;
  border: 1px solid var(--bach-line);
  border-radius: 999px;
  padding: 8px 18px;
  font: inherit;
  font-size: 14.5px;
  color: var(--bach-body);
  cursor: pointer;
}

.bach-panel__wyloguj:hover { border-color: var(--bach-navy); color: var(--bach-navy); }
.bach-panel__odwolaj:hover { border-color: #D81E5B; color: #D81E5B; }

.bach-panel__podsumowanie {
  background: #F4F8FC;
  border-radius: 14px;
  padding: 24px;
  margin-top: 24px;
  text-align: center;
}

.bach-panel__liczba {
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: var(--bach-navy);
  letter-spacing: -.02em;
}

.bach-panel__opis { font-size: 14.5px; }

.bach-panel__tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.bach-panel__tabela th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--bach-line);
  color: var(--bach-navy);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.bach-panel__tabela td { padding: 12px; border-bottom: 1px solid var(--bach-line); }
.bach-panel__kwota { font-weight: 700; color: var(--bach-ink); white-space: nowrap; }
.bach-panel__pusto { color: var(--bach-body); font-style: italic; }

.bach-panel__wsparcie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--bach-line);
  border-left: 4px solid var(--bach-green);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
}

.bach-panel__form { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.bach-panel__siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bach-panel__pole { display: flex; flex-direction: column; gap: 6px; }
.bach-panel__pole label { font-weight: 700; color: var(--bach-ink); font-size: 15px; }

.bach-panel input[type="text"], .bach-panel input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bach-line);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
}

.bach-panel input:focus { outline: 3px solid var(--bach-blue); outline-offset: 1px; }

.bach-panel__zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; cursor: pointer; }
.bach-panel__zgoda input { width: 19px; height: 19px; margin: 2px 0 0; flex: 0 0 auto; }

.bach-panel__przycisk {
  align-self: flex-start;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--bach-green);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.bach-panel__przycisk:hover { background: #6BAA3A; }
.bach-panel__stopka { font-size: 14px; margin-top: 26px; }

@media (max-width: 480px) {
  .bach-panel__siatka { grid-template-columns: 1fr; }
  .bach-panel__tabela { font-size: 14px; }
  .bach-panel__tabela th:nth-child(4), .bach-panel__tabela td:nth-child(4) { display: none; }
}

/* Dwie drogi wejścia do panelu — link i hasło. Obok siebie, bo żadna nie jest ważniejsza. */
.bach-panel__drogi { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }

.bach-panel__droga {
  background: #fff;
  border: 1px solid var(--bach-line);
  border-radius: 14px;
  padding: 22px;
}

.bach-panel__droga h3 { margin-top: 0; font-size: 18px; }
.bach-panel__opis-drogi { font-size: 14.5px; margin: 0 0 6px; }
.bach-panel__podpowiedz { font-size: 13.5px; color: var(--bach-body); }

.bach-panel input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bach-line);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
}

.bach-panel__przycisk--drugi { background: var(--bach-navy); }
.bach-panel__przycisk--drugi:hover { background: #14488F; }

@media (max-width: 640px) { .bach-panel__drogi { grid-template-columns: 1fr; } }

/* ==========================================================================
   Lista darczyńców — krótki kod [bach_darczyncy]
   ==========================================================================
   Własne barwy, a nie odziedziczone po formularzu: lista stoi na osobnej stronie
   i nie ma wokół siebie pudełka `.bach-dar`. */

.bach-lista {
  --bach-navy: #1D67CD;
  --bach-line: #E1E8EF;
  --bach-ink: #14202B;
  --bach-body: #4A5967;

  max-width: 900px;
  margin: 0 auto;
  font-size: 16px;
  color: var(--bach-body);
}

.bach-lista__pusto {
  background: #F5F8FB;
  border-left: 4px solid var(--bach-navy);
  padding: 14px 18px;
  border-radius: 8px;
  margin: 0;
}

/* Szerokość kolumn pilnuje `table-layout: fixed` — bez tego długie nazwisko
   rozpychało kolumnę z imieniem, a kwoty skakały w poziomie od wiersza do wiersza. */
.bach-lista__tabela {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 15.5px;
}

.bach-lista__tabela th,
.bach-lista__tabela td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bach-line);
  overflow-wrap: break-word;
}

.bach-lista__tabela thead th {
  background: var(--bach-navy);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .02em;
  border-bottom: none;
}

.bach-lista__tabela thead th:first-child { border-radius: 8px 0 0 0; }
.bach-lista__tabela thead th:last-child { border-radius: 0 8px 0 0; }

.bach-lista__tabela tbody tr:nth-child(even) { background: #F7FAFC; }

.bach-lista__tabela td:first-child { color: var(--bach-ink); font-weight: 600; }

.bach-lista__wiersz--anonim td:first-child { color: var(--bach-body); font-weight: 400; }

.bach-lista__kwota { text-align: right; white-space: nowrap; }

.bach-lista__nota {
  margin: 18px 0 0;
  font-size: 14.5px;
  color: #7A8794;
}

/* Na telefonie kwota i data zostają, miejscowość ustępuje — bez tego tabela wychodzi
   za ekran i trzeba nią przesuwać w poziomie, żeby przeczytać cokolwiek. */
@media (max-width: 560px) {
  .bach-lista__tabela { font-size: 14.5px; }
  .bach-lista__tabela th,
  .bach-lista__tabela td { padding: 9px 10px; }
  .bach-lista__tabela th:last-child,
  .bach-lista__tabela td:last-child { display: none; }
}