/* ============================================================
   ROZSIEW — styl wspólnego modułu udostępniania.
   Neutralny wobec projektu: kolory bierze z tokenów gospodarza,
   a gdy ich nie ma — z własnych wartości zapasowych. Dzięki temu
   ten sam plik ubiera się w paletę KAKAWY i AURA One bez zmian.
   ============================================================ */

/* Łańcuch zapasowy czyta najpierw tokeny KAKAWY (--surface-*/--text-*),
   potem tokeny AURA One (--bg2/--ink/--dim), a na końcu wartość własną.
   Dzięki temu jeden plik ubiera się w obie palety bez rozgałęzień. */
.rz {
  --rz-tlo:      var(--surface-1, var(--bg2, #1D1712));
  --rz-tlo-2:    var(--surface-2, var(--bg2, #2A211A));
  --rz-hi:       var(--text-hi,  var(--ink,  #F3EBDD));
  --rz-mid:      var(--text-mid, var(--dim,  #C7B9A6));
  --rz-low:      var(--text-low, var(--dim,  #8A7A66));
  --rz-akc:      var(--accent,   #C97B3D);
  --rz-akc-hi:   var(--accent-hi, var(--accent2, #E39A55));
  --rz-akc-ink:  var(--accent-ink, var(--bg, #160D06));
  --rz-linia:    var(--line, rgba(243,235,221,.12));
  --rz-r:        var(--r-m, 16px);
  --rz-pill:     var(--r-pill, 999px);
  --rz-ease:     var(--ease-out, cubic-bezier(.22,.61,.36,1));
  font-family: var(--font-body, var(--sans, system-ui), sans-serif);
  color: var(--rz-hi);
}

.rz__oko { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--rz-akc); }
.rz__tytul { font-family: var(--font-display, var(--sans, Georgia), serif); font-size: clamp(26px, 7vw, 34px);
  line-height: 1.12; margin: 6px 0 10px; font-weight: 400; }
.rz__lead { color: var(--rz-mid); font-size: 15.5px; line-height: 1.55; margin-bottom: 22px; }
.rz__etykieta { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--rz-low);
  margin: 26px 0 10px; }

/* ---------- przycisk główny: arkusz systemowy ---------- */
.rz__glowny { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 56px; border: 0; border-radius: var(--rz-pill); background: var(--rz-akc);
  color: var(--rz-akc-ink); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; font-family: inherit; cursor: pointer; transition: background 220ms var(--rz-ease); }
.rz__glowny:active, .rz__glowny:hover { background: var(--rz-akc-hi); }
.rz__glowny svg { width: 20px; height: 20px; }
.rz__pod { text-align: center; font-size: 13px; color: var(--rz-low); margin-top: 10px; line-height: 1.45; }

/* ---------- warianty treści ---------- */
.rz__warianty { display: flex; flex-wrap: wrap; gap: 8px; }
.rz__wariant { min-height: 40px; padding: 0 15px; border-radius: var(--rz-pill);
  border: 1px solid var(--rz-linia); background: transparent; color: var(--rz-mid);
  font-size: 13.5px; font-family: inherit; cursor: pointer; transition: all 220ms var(--rz-ease); }
.rz__wariant[aria-selected="true"] { background: var(--rz-akc); color: var(--rz-akc-ink);
  border-color: transparent; font-weight: 600; }

.rz__podglad { margin-top: 12px; padding: 16px; border-radius: var(--rz-r);
  background: var(--rz-tlo-2); border: 1px solid var(--rz-linia); }
.rz__podglad p { font-size: 15px; line-height: 1.5; color: var(--rz-hi); }
.rz__link { display: block; margin-top: 8px; font-size: 13px; color: var(--rz-akc-hi); word-break: break-all; }
.rz__kopiuj { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 42px;
  padding: 0 16px; border-radius: var(--rz-pill); border: 1px solid var(--rz-linia);
  background: transparent; color: var(--rz-mid); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; font-family: inherit; cursor: pointer; }
.rz__kopiuj svg { width: 15px; height: 15px; }
.rz__kopiuj.zrobione { border-color: var(--rz-akc); color: var(--rz-akc-hi); }

/* ---------- kafle kanałów ---------- */
.rz__kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.rz__kafel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 86px; padding: 10px 6px; border-radius: var(--rz-r); border: 1px solid var(--rz-linia);
  background: var(--rz-tlo-2); color: var(--rz-mid); font-size: 12px; text-decoration: none;
  font-family: inherit; cursor: pointer; text-align: center; line-height: 1.25;
  transition: border-color 220ms var(--rz-ease), color 220ms var(--rz-ease), transform 150ms var(--rz-ease); }
.rz__kafel svg { width: 23px; height: 23px; }
.rz__kafel:active { transform: scale(.96); }
.rz__kafel:hover { border-color: var(--rz-akc); color: var(--rz-hi); }
.rz__kafel.zrobione { border-color: var(--rz-akc); color: var(--rz-akc-hi); }

/* ---------- kod QR ---------- */
.rz__qr { margin-top: 14px; padding: 18px; border-radius: var(--rz-r); background: var(--rz-tlo-2);
  border: 1px solid var(--rz-linia); text-align: center; }
.rz__qr img { border-radius: 10px; display: block; margin: 0 auto 12px; max-width: 100%; height: auto; }
.rz__qr p { font-size: 13.5px; color: var(--rz-mid); line-height: 1.5; max-width: 300px; margin: 0 auto; }

/* ---------- wizytówka twórcy ---------- */
.rz__wizytowka { margin-top: 26px; padding: 18px; border-radius: var(--rz-r);
  background: var(--rz-tlo); border: 1px solid var(--rz-akc); }
.rz__wizytowka__kto { display: flex; align-items: flex-start; gap: 12px; }
.rz__wizytowka__kto > svg { width: 26px; height: 26px; color: var(--rz-akc); flex: none; margin-top: 2px; }
.rz__wizytowka__kto div { display: grid; gap: 3px; min-width: 0; }
.rz__wizytowka__kto b { font-size: 17px; font-weight: 600; }
.rz__wizytowka__kto span { font-size: 13px; color: var(--rz-mid); }
.rz__wizytowka__kto a { font-size: 14px; color: var(--rz-akc-hi); text-decoration: none; word-break: break-all; }
.rz__wizytowka__nota { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--rz-mid); }
.rz__wizytowka__pobierz { display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 14px; min-height: 48px; border-radius: var(--rz-pill); background: var(--rz-akc);
  color: var(--rz-akc-ink); font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 600; text-decoration: none; }
.rz__wizytowka__pobierz svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) { .rz * { transition: none !important; } }

/* ============================================================
   OKNO MODALNE dla wersji stacjonarnej.
   Własna warstwa nad kanonem — żadna reguła nie dotyka istniejących
   arkuszy, więc kompozycja strony pozostaje nietknięta.
   ============================================================ */
/* Reset dla wariantu „w klasach gospodarza": przycisk ma dziedziczyc wyglad
   sasiadow, wiec zdejmujemy domyslna ramke i tlo <button>. Regula stoi PRZED
   .rzo__wywolaj, zeby wariant wlasny nadal wygrywal. */
.js-rzo-wywolaj { border: 0; background: transparent; color: inherit; font-family: inherit; cursor: pointer; }
.js-rzo-wywolaj svg { width: 16px; height: 16px; flex: none; }

.rzo__wywolaj { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1px solid rgba(243,235,221,.16); background: rgba(20,16,12,.72);
  color: rgba(243,235,221,.72); font: 500 12px/1 system-ui, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .25s, border-color .25s, background .25s; }
.rzo__wywolaj:hover { color: #F3EBDD; border-color: var(--accent, #C97B3D); background: rgba(20,16,12,.92); }
.rzo__wywolaj svg { width: 16px; height: 16px; }
.rzo__wywolaj--plywajaca { position: fixed; left: 20px; bottom: 20px; z-index: 9998; }

/* Blok, w którym przycisk siedzi, gdy trafia do stopki gospodarza.
   Bez niego inline-flex ląduje na linii bazowej ostatniego wiersza
   i nachodzi na tekst. Odstęp trzymamy tutaj, nie na przycisku,
   żeby wersja pływająca go nie dziedziczyła. */
.rzo__gniazdo { display: block; width: 100%; text-align: center;
  margin-top: 34px; padding-top: 4px; padding-bottom: 8px; line-height: 1; }

html.rzo-otwarte { overflow: hidden; }

.rzo { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 24px; background: rgba(6,5,4,.76);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  opacity: 0; transition: opacity 240ms cubic-bezier(.22,.61,.36,1); }
.rzo.widoczne { opacity: 1; }

.rzo__karta { position: relative; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 30px 30px 34px; border-radius: 18px;
  background: var(--surface-1, var(--bg2, #1D1712));
  border: 1px solid var(--line, rgba(243,235,221,.14));
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
  transform: translateY(12px) scale(.985); transition: transform 280ms cubic-bezier(.22,.61,.36,1); }
.rzo.widoczne .rzo__karta { transform: none; }

.rzo__zamknij { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid;
  place-items: center; border-radius: 50%; border: 1px solid var(--line, rgba(243,235,221,.14));
  background: transparent; color: var(--text-mid, var(--dim, #C7B9A6)); cursor: pointer;
  transition: color .2s, border-color .2s; }
.rzo__zamknij:hover { color: var(--text-hi, var(--ink, #F3EBDD)); border-color: var(--accent, #C97B3D); }
.rzo__zamknij svg { width: 17px; height: 17px; }

/* kod QR jako gwiazda wersji stacjonarnej — większy i wyżej */
.rz__qr--gwiazda { margin: 0 0 22px; padding: 22px; }
.rz__qr--gwiazda img { width: 240px; height: 240px; }

@media (max-width: 620px) {
  .rzo { padding: 0; place-items: end center; }
  .rzo__karta { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 26px 20px 30px; }
}
@media (prefers-reduced-motion: reduce) { .rzo, .rzo__karta, .rzo__wywolaj { transition: none } }