/*
  Arkusz wspólny dla wariantów, ładowany na każdej stronie (app/[wersja]/Rama.tsx):
  ikony (`.ic` i ikony na kaflach, w pasku zaufania, w krokach metody) oraz parametry
  i galeria podstrony realizacji (`rz-`).

  Wydzielony z `kalkulator.css` (10.10.2026), żeby kalkulatory ładowały się tylko na
  stronie głównej i podstronach usług. W kaskadzie stoi tam, gdzie wcześniej
  `kalkulator.css` — zaraz po arkuszu wariantu — więc reguły działają tak samo.
  Korzysta ze zmiennych arkusza wariantu (--br, --ink, --line, --mut).
*/

/* ─────────────────────────────── ikony ─────────────────────────────────── */

.ic {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.14em;
}

/* Ikona usługi na zdjęciu kafla — szklany krążek nad gradientem */
.s .im .ico {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 24px;
  color: #fff;
  background: rgba(11, 28, 31, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(7px);
}

/* Ikona na kaflu linkowania wewnętrznego — bez tła, żeby pasowała do trzech wariantów */
.nx .ico {
  display: inline-flex;
  font-size: 26px;
  color: var(--br);
  margin-bottom: 2px;
}

/* Znaki zaufania w pasku pod hero */
.strip .bx span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.strip .bx .ic {
  font-size: 15px;
  opacity: 0.9;
}

/* Ikona w kroku metody — obok numeru, w kolorze marki */
.pr .ico,
.rap .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--br);
}

/* ───────────── podstrona realizacji: parametry i galeria ───────────── */
.rz-par{width:100%;border-collapse:collapse;margin:6px 0 8px;font-size:15.5px}
.rz-par th,.rz-par td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.rz-par th{font-weight:500;color:var(--mut);width:44%;padding-right:18px}
.rz-par td{font-weight:600;color:var(--ink)}
.prose .rz-gal{grid-template-columns:repeat(2,1fr)}
.rz-gal a{display:block;width:100%;height:100%}
.prose .rz-gal{margin-bottom:32px}
.rz-film{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin:6px 0 32px}
.rz-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* nieparzysta liczba zdjęć realizacji — pierwsze na całą szerokość, bez pustego pola */
.rz-gal > figure:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* ───────────── baner zgód na ciasteczka (components/Zgody.tsx) ─────────────
   Karta przyklejona do dołu ekranu, bez zaciemniania strony. Telefon: nad dolnym paskiem
   `.mcta` (komponent mierzy jego wysokość, tu wartość zapasowa); komputer: lewy dolny róg,
   żeby nie zasłaniać okrągłego przycisku WhatsApp po prawej. `position: fixed` — bez CLS. */
.zg{position:fixed;z-index:95;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);overflow-y:auto;overscroll-behavior:contain;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 50px -18px rgba(11,28,31,.5);padding:16px 16px 14px;font-size:14.5px;line-height:1.5}
@media(min-width:1024px){.zg{left:24px;right:auto;bottom:24px;width:min(620px,calc(100vw - 150px));padding:20px 22px 18px;max-height:calc(100vh - 140px)}}
.zg-t{font-family:var(--dis);font-weight:var(--disw);font-size:17px;line-height:1.25;letter-spacing:-.01em;margin:0 0 6px}
.zg-tekst p{margin:0 0 14px}
.zg-tekst a{color:var(--br);font-weight:600}
.zg-przyciski{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.zg-przyciski button{font:inherit;font-size:14px;font-weight:700;line-height:1.25;padding:10px 8px;min-height:44px;border-radius:10px;border:2px solid var(--br);background:var(--br);color:#fff;cursor:pointer;text-align:center;overflow-wrap:anywhere;transition:background .2s,border-color .2s}
.zg-przyciski button:hover{background:var(--brd,var(--br));border-color:var(--brd,var(--br))}
.zg-kat{list-style:none;margin:4px 0 14px;padding:0}
.zg-kat li{padding:10px 0;border-bottom:1px solid var(--line)}
.zg-kat li:first-child{border-top:1px solid var(--line)}
.zg-kat p{margin:3px 0 0;font-size:13.5px;color:var(--mut)}
.zg-kh{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.zg-kh input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--br);cursor:pointer}
.zg-zawsze{font-size:12.5px;font-weight:700;color:var(--br);white-space:nowrap}
@media print{.zg{display:none}}

/* „Ustawienia cookies” w stopce — przycisk (otwiera okno), wygląda jak linki obok */
footer .zg-otworz{display:block;padding:5px 0;margin:0;border:0;background:none;font:inherit;font-size:15.5px;color:inherit;text-align:left;cursor:pointer}
footer .zg-otworz:hover{color:var(--glow)}