/* ===================================================================
   strona.css - wspolny arkusz dla czterech stron pomocniczych:
     dziekuje.html, kontakt.html, regulamin.html, polityka-prywatnosci.html
   protokol90dni.pl

   PO CO: te cztery strony zostaly w starym, ciemnym wygladzie, kiedy
   strona glowna i artykuly przeszly na papier. To nie jest kosmetyka:

     - dziekuje.html widzi czlowiek TUZ PO zaplaceniu. Zaplacil na bialej
       stronie i ladowal na czarnej. W tym jednym momencie taka zmiana
       czyta sie jak "czy ta platnosc na pewno poszla gdzie trzeba".
     - regulamin.html i polityka-prywatnosci.html sa linkowane WPROST
       Z OKNA ZAKUPU ("Akceptuje regulamin oraz polityke prywatnosci").
       Czlowiek w trakcie kupowania klikal i dostawal inna strone.

   ZASADY, te same co na stronie glownej i w artykulach:
     papier, tusz, jedna czerwien, wlosowa linia.
     Anton tylko w duzych tytulach (kondensowany kroj dziala od 46 px
     w gore), Work Sans w calej reszcie. Zero zaokraglen, zero cieni,
     zero gradientow, zero rozmycia tla.
     Zadnego szeryfu - Instrument Serif jest na liscie zabanowanych.

   CZEGO TEN ARKUSZ NIE ZMIENIA: pomiaru. Piksel, Google Ads i belka
   zgody na cookies zostaja dokladnie takie, jakie byly.

   ⚠️ NAZWY PLIKU dziekuje.html NIE WOLNO ZMIENIC. Jej adres wchodzi
   w podpis wysylany do HotPay (kup.php liczy SHA-256 z szesciu wartosci,
   jedna z nich jest adres powrotu) oraz sluzy jako event_source_url
   przy wysylce sprzedazy do Mety. Zmiana nazwy zatrzyma platnosci.

   ⚠️ PODPINAC Z NUMEREM WERSJI: /css/strona.css?v=1
      .htaccess trzyma arkusze w pamieci przegladarki MIESIAC.
   =================================================================== */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;
  font-display:swap;src:url(/fonts/anton-400.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;
  font-display:swap;src:url(/fonts/worksans-400.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;
  font-display:swap;src:url(/fonts/worksans-600.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;
  font-display:swap;src:url(/fonts/worksans-700.woff2) format('woff2')}

:root{
  --papier:#e8e4dc; --papier-2:#f1eee7; --tusz:#131313;
  --czerwien:#d6300f; --szary:#57524a;
  --linia:rgba(19,19,19,.18); --linia-mocna:rgba(19,19,19,.34);

  /* Stare nazwy jako aliasy. Gdyby ktoras strona miala wlasna regule
     odwolujaca sie do nich, ma wyjsc w nowych barwach, a nie czarna. */
  --bg:var(--papier); --bg-2:var(--papier-2); --bg-3:var(--papier-2);
  --text:var(--tusz); --light:var(--tusz); --light-2:var(--tusz);
  --text-dim:var(--szary); --dim:var(--szary); --text-faint:var(--szary);
  --amber:var(--czerwien); --red:var(--czerwien); --red-bright:var(--czerwien);
  --line:var(--linia); --line-strong:var(--linia-mocna);
  --radius:0; --t-fast:.15s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--papier);color:var(--tusz);
  font-family:'Work Sans',system-ui,sans-serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{max-width:1240px;margin:0 auto;padding:0 24px}
.container-narrow,.page-narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* ---------- PASEK NA GORZE ---------------------------------------- */
/* Bez rozmycia tla: kosztowalo przemalowanie przy kazdym przewinieciu,
   a na papierze i tak nie ma czego rozmywac. */
.nav{position:sticky;top:0;z-index:50;background:var(--papier);
  border-bottom:1px solid var(--linia)}
.nav-row{display:flex;align-items:center;justify-content:space-between;
  padding:13px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.brand-mark{width:28px;height:28px;border-radius:0;
  background:var(--czerwien);color:#fff;display:grid;place-items:center;
  font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:16px;line-height:1}
.nav-cta{display:inline-flex;align-items:center;font-size:14px;font-weight:600;
  padding:10px 18px;border-radius:0;background:var(--czerwien);color:#fff;
  text-decoration:none;white-space:nowrap;transition:background .15s}
.nav-cta:hover{background:#b02209;transform:none}

/* ---------- TRESC STRONY ------------------------------------------ */
.page{padding:56px 0 88px}
.eyebrow{font-family:'Work Sans',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--czerwien)}
.page-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;
  letter-spacing:.02em;color:var(--szary);margin-bottom:26px;
  text-decoration:none;transition:color .15s}
.page-back:hover{color:var(--tusz)}

/* Tytul strony to jedyne miejsce na kroj display. Dolna granica 46 px
   jest zmierzona - ponizej kondensowany Anton przestaje byc czytelny. */
.page-title,.display{font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(46px,6vw,72px);letter-spacing:.005em;line-height:1.02;
  color:var(--tusz);margin-bottom:18px;text-wrap:balance;
  font-variation-settings:normal}
/* Wyroznienie robimy TYM SAMYM krojem, na czerwono. Wrzucanie szeryfu
   w srodek zdania to sztuczka, ktora sie zestarzala. */
.page-title .it,.it,.serif-it{font-family:inherit;font-style:normal;
  font-weight:inherit;color:var(--czerwien);letter-spacing:inherit}

.lede{font-size:clamp(17px,2.1vw,20px);line-height:1.55;color:var(--szary);
  max-width:60ch}
.page-meta{font-size:14px;color:var(--szary);letter-spacing:.02em;
  margin-bottom:42px;padding-bottom:22px;border-bottom:1px solid var(--linia)}

.page h2{font-family:'Work Sans',sans-serif;font-weight:600;
  font-size:clamp(22px,2.6vw,30px);line-height:1.15;letter-spacing:-.02em;
  color:var(--tusz);margin:48px 0 16px}
.page h3{font-family:'Work Sans',sans-serif;font-size:18px;font-weight:600;
  margin:26px 0 10px;color:var(--tusz);letter-spacing:-.01em}
.page p,.page li{font-size:16px;line-height:1.7;color:var(--tusz);
  margin-bottom:14px}
.page ul,.page ol{margin:0 0 18px 22px}
.page ul li{list-style:disc;padding-left:6px}
.page ol li{list-style:decimal;padding-left:6px}
.page li::marker{color:var(--czerwien)}
.page strong{color:var(--tusz);font-weight:600}
.page a{color:var(--tusz);text-decoration:underline;
  text-decoration-color:var(--czerwien);text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .15s}
.page a:hover{color:var(--czerwien)}

/* ---------- POTWIERDZENIE ZAKUPU ---------------------------------- */
/* Znak potwierdzenia ma bursztyn wpisany wprost w SVG. Atrybuty
   prezentacyjne przegrywaja z kazda regula arkusza, wiec przykrywamy
   je tutaj zamiast ruszac kod strony. */
.thanks-icon{display:flex;justify-content:center;margin-bottom:30px}
.thanks-icon svg{filter:none}
.thanks-icon svg circle{stroke:var(--tusz);fill:none;stroke-width:1.5}
.thanks-icon svg path{stroke:var(--czerwien);stroke-width:3}

/* Kolejne kroki po zakupie. Wlosowe linie zamiast pudelka - ta strona
   ma prowadzic wzrok w dol, a nie zamykac tresc w ramce. */
.steps{display:flex;flex-direction:column;gap:0;list-style:none;margin:26px 0;
  padding:0;counter-reset:steps;background:none;border:0;
  border-top:1px solid var(--tusz)}
.steps li{counter-increment:steps;display:grid;grid-template-columns:auto 1fr;
  gap:20px;padding:22px 0;border-bottom:1px solid var(--linia);
  list-style:none;margin:0}
.steps li::before{content:counter(steps,decimal-leading-zero);
  font-family:'Anton',Impact,sans-serif;font-size:30px;font-weight:400;
  color:var(--czerwien);line-height:1;min-width:48px}
.steps li::marker{content:none}
.steps strong{display:block;font-family:'Work Sans',sans-serif;font-size:18px;
  font-weight:600;color:var(--tusz);margin-bottom:4px;letter-spacing:-.01em}
.steps span.desc{display:block;color:var(--szary);font-size:16px;line-height:1.55}

/* ---------- RAMKI Z OSTRZEZENIEM ---------------------------------- */
/* Bez grubej kolorowej zakladki z boku - patrz komentarz w artykul.css.
   Ramka jest rowna, a uwage bierze czerwony naglowek w srodku. */
.callout{margin:26px 0;padding:20px 22px;background:var(--papier-2);
  border:1px solid var(--linia);border-radius:0}
.callout-title{display:block;margin-bottom:10px;
  font-family:'Work Sans',sans-serif;font-style:normal;font-weight:600;
  font-size:17px;color:var(--czerwien);letter-spacing:-.01em}
.callout p:last-child{margin-bottom:0}
.callout-amber{background:var(--papier-2);border-color:var(--czerwien)}

/* ---------- PRZYCISKI ---------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;
  border-radius:0;white-space:nowrap;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--czerwien);color:#fff;padding:16px 28px;
  font-size:16px;border:0;box-shadow:none}
.btn-primary:hover{background:#b02209;transform:none;box-shadow:none}
.btn-primary .arrow{transition:transform .15s;display:inline-block}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{color:var(--tusz);padding:16px 22px;font-size:15px;
  border:1px solid var(--linia);background:none}
.btn-ghost:hover{border-color:var(--tusz);background:none}

/* ---------- FORMULARZ KONTAKTU ------------------------------------ */
.form-grid{display:grid;grid-template-columns:1fr;gap:44px;margin-top:30px}
.contact-card{background:var(--papier-2);border:1px solid var(--linia);
  border-radius:0;padding:26px;position:relative}
.contact-card h3{font-family:'Work Sans',sans-serif;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--czerwien);
  font-weight:600;margin:0 0 16px}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-info-item{display:flex;flex-direction:column;gap:4px}
.contact-info-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--szary);font-weight:600}
.contact-info-value{font-family:'Work Sans',sans-serif;font-size:17px;
  color:var(--tusz);line-height:1.4;letter-spacing:-.01em;font-weight:600}
.contact-info-value a{color:var(--tusz);text-decoration:none;
  border-bottom:1px solid var(--linia);transition:border-color .15s}
.contact-info-value a:hover{border-color:var(--czerwien)}

.contact-form{display:flex;flex-direction:column;gap:20px}
.form-row{display:flex;flex-direction:column;gap:8px}
.form-row label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--szary);font-weight:600}
.form-row label .req,.req{color:var(--czerwien);margin-left:2px}
.form-row input,.form-row textarea,.form-row select{
  font-family:'Work Sans',sans-serif;font-size:16px;color:var(--tusz);
  background:var(--papier-2);border:1px solid var(--linia);border-radius:0;
  padding:13px 14px;transition:border-color .15s}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{
  outline:none;border-color:var(--czerwien);box-shadow:none}
.form-row textarea{resize:vertical;min-height:140px;line-height:1.5}
.form-checkbox{display:flex;gap:12px;align-items:flex-start;font-size:14px;
  line-height:1.5;color:var(--tusz)}
.form-checkbox input[type="checkbox"]{margin-top:3px;width:18px;height:18px;
  accent-color:var(--czerwien);cursor:pointer;flex-shrink:0}
.form-checkbox a{color:var(--tusz);text-decoration:underline;
  text-decoration-color:var(--czerwien);text-underline-offset:3px}
.form-submit{align-self:flex-start;margin-top:8px}
.form-note{font-size:13px;color:var(--szary);font-style:normal;line-height:1.5}

/* ---------- TABELA COOKIES W POLITYCE ----------------------------- */
.cookies-table{width:100%;border-collapse:collapse;margin:18px 0 24px;
  font-size:15px;background:none;border:0;border-top:1px solid var(--tusz);
  border-radius:0;overflow:visible}
.cookies-table th,.cookies-table td{padding:13px 14px 13px 0;text-align:left;
  border-bottom:1px solid var(--linia);vertical-align:top}
.cookies-table th{font-family:'Work Sans',sans-serif;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--szary);
  background:none;font-weight:600}
.cookies-table td{color:var(--tusz);line-height:1.5}
.cookies-table tr:last-child td{border-bottom:1px solid var(--tusz)}

/* ---------- STOPKA -------------------------------------------------- */
.footer{border-top:1px solid var(--linia);padding:34px 0 52px;
  background:none;margin-top:60px}
.footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px;
  align-items:center;font-size:14px;color:var(--szary)}
.footer a{color:var(--szary);transition:color .15s;text-decoration:none}
.footer a:hover{color:var(--tusz)}
.footer-brand{display:flex;align-items:center;gap:8px;font-weight:600;
  color:var(--tusz)}
.footer-brand .brand-mark{width:22px;height:22px;font-size:12px}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-disclaimer{width:100%;font-size:13px;color:var(--szary);margin-top:8px;
  font-style:normal}

/* ---------- BELKA ZGODY NA COOKIES -------------------------------- */
/* Te strony maja inne nazwy klas niz strona glowna (cb-inner zamiast
   cb-bar), wiec wyglad trzeba opisac osobno. Logika jest ta sama
   i jej nie ruszamy. */
#cookie-banner{position:fixed;right:16px;bottom:16px;left:auto;z-index:90;
  max-width:520px;display:none}
#cookie-banner.show{display:block}
#cookie-banner .cb-inner{display:flex;align-items:center;gap:12px 18px;
  flex-wrap:wrap;background:var(--papier-2);border:1px solid var(--tusz);
  border-radius:0;padding:14px 16px;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
#cookie-banner .cb-text{font-size:13px;line-height:1.45;color:var(--szary);
  flex:1;min-width:200px}
#cookie-banner .cb-text a{color:var(--tusz);text-decoration:underline;
  text-underline-offset:2px}
#cookie-banner .cb-buttons{display:flex;gap:8px;flex-shrink:0}
#cookie-banner .cb-buttons button,
#cookie-banner .cb-reject,#cookie-banner .cb-accept{
  font-family:'Work Sans',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.06em;padding:9px 15px;min-height:34px;cursor:pointer;
  background:none;border:1px solid var(--linia);border-radius:0;
  color:var(--szary);transition:color .15s,border-color .15s}
#cookie-banner .cb-accept{border-color:var(--czerwien);color:var(--czerwien)}
#cookie-banner .cb-buttons button:hover{color:var(--tusz);border-color:var(--tusz)}

/* ---------- TELEFON ------------------------------------------------ */
@media(max-width:640px){
  body{font-size:16px}
  .container,.container-narrow,.page-narrow{padding:0 18px}
  .page{padding:34px 0 56px}
  .page h2{margin:36px 0 14px}
  .steps li{grid-template-columns:auto 1fr;gap:14px;padding:18px 0}
  .steps li::before{font-size:24px;min-width:38px}
  .contact-card{padding:20px}
  .footer-row{flex-direction:column;align-items:flex-start;gap:16px}
  #cookie-banner{right:12px;left:12px;bottom:12px;max-width:none}
  .btn-primary,.btn-ghost{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}