/* Content Bridge — newsletter. Prefiks cbnl-. Bez zewnętrznych fontów: dziedziczy krój motywu.
   Formularze inline/stopka dziedziczą kolor tekstu (działają na jasnym i ciemnym tle);
   popup ma własne tło z wariantem dla prefers-color-scheme: dark. Kolory nadpisywalne zmiennymi. */

.cbnl {
  --cbnl-accent: #111827;
  --cbnl-accent-text: #fff;
  --cbnl-radius: 8px;
  --cbnl-border: rgba(127, 127, 127, .45);
  --cbnl-error: #b91c1c;
  --cbnl-ok: #047857;
  font: inherit;
  color: inherit;
  max-width: 560px;
  box-sizing: border-box;
}
.cbnl *, .cbnl *::before, .cbnl *::after { box-sizing: border-box; }
.cbnl--page { margin: 24px auto; }
.cbnl--footer { max-width: 100%; }

.cbnl__eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin: 0 0 6px; }
.cbnl__title { font-size: 1.25em; line-height: 1.25; font-weight: 700; margin: 0 0 8px; color: inherit; }
.cbnl--footer .cbnl__title { font-size: 1.05em; }
.cbnl__lead { font-size: .95em; opacity: .85; margin: 0 0 14px; }

.cbnl__form { margin: 0; }
.cbnl__row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.cbnl__email {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px; /* bez zoomu na iOS */
  color: inherit;
  background: transparent;
  border: 1px solid var(--cbnl-border);
  border-radius: var(--cbnl-radius);
}
.cbnl__email::placeholder { color: inherit; opacity: .6; }
.cbnl__email:focus-visible,
.cbnl__btn:focus-visible,
.cbnl__consent input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cbnl__email[aria-invalid="true"] { border-color: var(--cbnl-error); }
.cbnl__btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  color: var(--cbnl-accent-text);
  background: var(--cbnl-accent);
  border: 1px solid var(--cbnl-accent);
  border-radius: var(--cbnl-radius);
  cursor: pointer;
}
.cbnl__btn:hover { filter: brightness(1.15); }
.cbnl__btn[disabled] { opacity: .6; cursor: progress; }

.cbnl__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; opacity: .85; margin: 0 0 10px; cursor: pointer; }
.cbnl__consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; }
.cbnl__consent a { color: inherit; text-decoration: underline; }

.cbnl__ts { margin: 0 0 10px; }
.cbnl__msg { font-size: 13px; margin: 6px 0 0; min-height: 1em; }
.cbnl__msg:empty { display: none; }
.cbnl__msg--err { color: var(--cbnl-error); }
.cbnl__msg--ok { color: var(--cbnl-ok); }
.cbnl__ok { padding: 8px 0; }
.cbnl__ok[hidden], .cbnl__body[hidden] { display: none; }
.cbnl__ok-t { font-size: 1.05em; font-weight: 700; margin: 0; outline: none; }

/* pułapka na boty — niewidoczna także dla czytników ekranu (aria-hidden w HTML) */
.cbnl__hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.cbnl__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-color-scheme: dark) {
  .cbnl { --cbnl-error: #f87171; --cbnl-ok: #34d399; }
}

/* ---------- popup ---------- */
.cbnl-popup { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 16px; }
.cbnl-popup.cbnl-popup--open { display: flex; }
.cbnl-popup[hidden] { display: none !important; }
.cbnl-popup__bg { position: absolute; inset: 0; background: rgba(17, 24, 39, .55); }
.cbnl-popup__box {
  --cbnl-popup-bg: #fff;
  --cbnl-popup-text: #111827;
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 24px 20px;
  background: var(--cbnl-popup-bg);
  color: var(--cbnl-popup-text);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
  animation: cbnlIn .25s ease;
}
.cbnl-popup__box .cbnl { max-width: none; }
.cbnl-popup__box .cbnl__row { flex-direction: column; }
.cbnl-popup__box .cbnl__email, .cbnl-popup__box .cbnl__btn { flex: 1 1 auto; width: 100%; }
.cbnl-popup__close {
  position: absolute; top: 6px; right: 8px;
  min-width: 44px; min-height: 44px;
  border: 0; background: none; color: inherit; opacity: .7;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.cbnl-popup__close:hover, .cbnl-popup__close:focus-visible { opacity: 1; }
.cbnl-popup__close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.cbnl-popup .cbnl__title { padding-right: 32px; font-size: 22px; }
@keyframes cbnlIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cbnl-popup__box { animation: none; } }
@media (prefers-color-scheme: dark) {
  .cbnl-popup__box { --cbnl-popup-bg: #1f2937; --cbnl-popup-text: #f3f4f6; }
  .cbnl-popup__box .cbnl { --cbnl-accent: #f3f4f6; --cbnl-accent-text: #111827; }
}
@media (max-width: 480px) {
  .cbnl-popup__box { padding: 22px 16px 16px; }
  .cbnl-popup .cbnl__title { font-size: 19px; }
}
