/* ReadyStockFair 2027 — komponenty (W2, 24.10.2026). Wymaga tokens.css. Wszystko pod prefiksem .rsf-, żeby nie kolidować z motywem WordPress. */

/* ── Podstawy ── */
.rsf,.rsf *{box-sizing:border-box}
.rsf{font-family:var(--rsf-sans);font-size:var(--rsf-t-tekst);line-height:var(--rsf-lh-tekst);color:var(--rsf-tekst);-webkit-text-size-adjust:100%}
.rsf h1,.rsf h2,.rsf h3{margin:0}
.rsf :where(h1,h2,.rsf-serif){font-family:var(--rsf-serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
.rsf em{font-style:italic;color:var(--rsf-zolty)}
.rsf-kapitalik{font-size:var(--rsf-t-kapitalik);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rsf-zolty)}
.rsf-jasny .rsf-kapitalik{color:var(--rsf-j-tekst-2)}
.rsf-ukryte{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rsf :where(a,button,input,select,textarea,summary):focus-visible{outline:var(--rsf-fokus-grubosc) solid var(--rsf-fokus-ciemny);outline-offset:2px}
.rsf-jasny :where(a,button,input,select,textarea,summary):focus-visible{outline-color:var(--rsf-fokus-jasny)}

/* ── Przyciski (wysokość ≥ 48 px) ── */
.rsf-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--rsf-s2);min-height:var(--rsf-cel);padding:0 var(--rsf-s5);border:2px solid transparent;border-radius:var(--rsf-r);
  font:700 16px/1.2 var(--rsf-sans);text-decoration:none;cursor:pointer;background:var(--rsf-zolty);color:var(--rsf-navy);text-align:center}
.rsf-btn:hover{background:var(--rsf-zolty-hover)}
.rsf-btn[disabled],.rsf-btn[aria-disabled=true],.rsf-jasny .rsf-btn[disabled],.rsf-jasny .rsf-btn[aria-disabled=true]{opacity:1;background:#AEB4CC;color:#0A1330;cursor:not-allowed}   /* wyłączony: jasnoszary + granat (≈8:1) — wyraźnie inny niż aktywny; zawsze z powodem w tekście obok */
.rsf-btn--kontur{background:transparent;color:var(--rsf-tekst);border-color:var(--rsf-tekst)}
.rsf-btn--kontur:hover{background:rgba(255,255,255,.08)}
/* Na jasnej karcie żółty przycisk ma 1,6:1 do bieli — dlatego tam przycisk jest GRANATOWY z żółtym napisem (11,3:1). */
.rsf-jasny .rsf-btn{background:var(--rsf-navy);color:var(--rsf-zolty)}
.rsf-jasny .rsf-btn:hover{background:#18224A}
.rsf-jasny .rsf-btn--kontur{background:transparent;color:var(--rsf-j-tekst);border-color:var(--rsf-j-tekst)}
.rsf-jasny .rsf-btn--kontur:hover{background:var(--rsf-j-tlo-2)}
.rsf-btn--pelny{width:100%}

/* ── Karta jasna (formularz, kalkulator) — biała w ciemnej stronie ── */
.rsf-jasny{background:var(--rsf-biel);color:var(--rsf-j-tekst);border-radius:var(--rsf-r-karta);box-shadow:var(--rsf-cien-karta)}
.rsf-jasny :where(p,.rsf-pomoc){color:var(--rsf-j-tekst-2)}
.rsf-blok{padding:var(--rsf-s6);border-top:1px solid var(--rsf-j-linia)}
.rsf-blok:first-child{border-top:0}
@media (max-width:719px){.rsf-blok{padding:var(--rsf-s5) var(--rsf-s4)}.rsf-uklad{padding:0 var(--rsf-s2)}}   /* telefon: węższe obramowanie, więcej miejsca na pole */
.rsf-blok__naglowek{display:flex;align-items:baseline;gap:var(--rsf-s3);margin-bottom:var(--rsf-s5)}
.rsf-blok__nr{font:400 var(--rsf-t-karta-h)/1 var(--rsf-serif);color:var(--rsf-j-tekst-2);min-width:1.2em}
.rsf-blok__tytul{font:400 var(--rsf-t-karta-h)/1.05 var(--rsf-serif);margin:0;color:var(--rsf-j-tekst)}
.rsf-blok__opis{margin:0 0 var(--rsf-s5);max-width:62ch;font-size:15px}

/* ── Pole: etykieta NAD polem, podpowiedź i błąd POD polem ── */
.rsf-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--rsf-s5) var(--rsf-s5)}
.rsf-siatka>*{grid-column:span 12;min-width:0}
@media (min-width:720px){
  .rsf-siatka>.rsf-k6{grid-column:span 6}
  .rsf-siatka>.rsf-k4{grid-column:span 4}
  .rsf-siatka>.rsf-k8{grid-column:span 8}
  .rsf-siatka>.rsf-k3{grid-column:span 3}
}
.rsf-pole{display:flex;flex-direction:column;gap:6px}
.rsf-etykieta{font-size:15px;font-weight:600;color:var(--rsf-j-tekst);line-height:1.3}
.rsf-etykieta .rsf-wym{color:var(--rsf-blad);font-weight:700;margin-left:2px}   /* gwiazdka; „wymagane” czyta też aria-required */
.rsf-pomoc{font-size:var(--rsf-t-mala);line-height:1.45;margin:0}
.rsf-input,.rsf-wybor{width:100%;min-height:var(--rsf-cel);padding:10px 14px;border:1.5px solid var(--rsf-j-obrys);border-radius:var(--rsf-r);background:var(--rsf-biel);
  color:var(--rsf-j-tekst);font:400 var(--rsf-t-pole)/1.3 var(--rsf-sans)}
.rsf-input::placeholder{color:#59617F;opacity:1}
.rsf-input:hover{border-color:var(--rsf-j-tekst)}
.rsf-input:focus{border-color:var(--rsf-j-tekst);box-shadow:0 0 0 1px var(--rsf-j-tekst)}
.rsf-input[readonly]{background:var(--rsf-j-tlo-2)}
.rsf-input--liczba{text-align:right;font-variant-numeric:tabular-nums}
.rsf-pole--z-rejestru .rsf-input{background:var(--rsf-z-rejestru)}
.rsf-plakietka{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;background:var(--rsf-navy);color:var(--rsf-zolty);margin-left:var(--rsf-s2);vertical-align:middle}
.rsf-pole--blad .rsf-input{border-color:var(--rsf-blad);border-width:2px}
.rsf-blad{display:flex;gap:6px;align-items:flex-start;font-size:var(--rsf-t-mala);font-weight:600;color:var(--rsf-blad);margin:0;line-height:1.4}
.rsf-blad::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--rsf-blad);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}

/* ── Prefiks kraju przy NIP (lista wyboru + pole) ── */
.rsf-nip{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--rsf-s2)}

/* ── Przełącznik dwustanowy (segment): „Bez zabudowy | Z zabudową”. Prawdziwe radio, nie obrazek. ── */
.rsf-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1.5px solid var(--rsf-j-obrys);border-radius:var(--rsf-r);overflow:hidden;background:var(--rsf-biel)}
.rsf-seg label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:var(--rsf-cel);padding:8px var(--rsf-s3);cursor:pointer;font-weight:600;font-size:15px;line-height:1.25;color:var(--rsf-j-tekst)}
.rsf-seg label+label{border-left:1.5px solid var(--rsf-j-obrys)}
.rsf-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.rsf-seg label:has(input:checked){background:var(--rsf-navy);color:var(--rsf-zolty)}
.rsf-seg label:has(input:checked)::before{content:"✓";margin-right:6px;font-weight:800}   /* wybór widać także bez koloru */
.rsf-seg label:has(input:focus-visible){outline:var(--rsf-fokus-grubosc) solid var(--rsf-fokus-jasny);outline-offset:-3px;box-shadow:inset 0 0 0 5px var(--rsf-biel)}
.rsf-seg label:hover:not(:has(input:checked)){background:var(--rsf-j-tlo-2)}
.rsf-seg__podpis{display:block;font-weight:400;font-size:13px}

/* ── Licznik (−  liczba  +): ilości i metry ── */
.rsf-krok{display:grid;grid-template-columns:var(--rsf-cel) minmax(72px,1fr) var(--rsf-cel);max-width:220px}
.rsf-krok button{min-height:var(--rsf-cel);border:1.5px solid var(--rsf-j-obrys);background:var(--rsf-j-tlo-2);color:var(--rsf-j-tekst);font:700 22px/1 var(--rsf-sans);cursor:pointer}
.rsf-krok button:first-child{border-radius:var(--rsf-r) 0 0 var(--rsf-r)}
.rsf-krok button:last-child{border-radius:0 var(--rsf-r) var(--rsf-r) 0}
.rsf-krok button:hover{background:var(--rsf-j-linia)}
.rsf-krok .rsf-input{border-radius:0;border-left:0;border-right:0;text-align:center;font-variant-numeric:tabular-nums}

/* ── Wiersz usługi: nazwa + cena po lewej, licznik po prawej ── */
.rsf-usluga{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--rsf-s3);align-items:center;padding:var(--rsf-s3) 0;border-top:1px solid var(--rsf-j-linia)}
.rsf-usluga:first-of-type{border-top:0}
@media (max-width:519px){.rsf-usluga{grid-template-columns:minmax(0,1fr)}.rsf-usluga .rsf-krok{justify-self:start}}   /* telefon: licznik pod nazwą, nazwa nie łamie się w słowie */
.rsf-usluga__nazwa{font-weight:600;overflow-wrap:anywhere}
.rsf-usluga__cena{font-size:var(--rsf-t-mala);color:var(--rsf-j-tekst-2)}

/* ── Zgoda (kratka z długim tekstem). Cały wiersz jest celem kliknięcia. ── */
.rsf-zgoda{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--rsf-s3);align-items:start;font-size:15px;line-height:1.5;color:var(--rsf-j-tekst);padding:var(--rsf-s2) 0;cursor:pointer}
.rsf-zgoda input{width:24px;height:24px;margin:1px 0 0;accent-color:var(--rsf-navy)}
.rsf-zgoda small{display:block;font-size:var(--rsf-t-mala);color:var(--rsf-j-tekst-2)}

/* ── Komunikaty ── */
.rsf-alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--rsf-s3);padding:var(--rsf-s3) var(--rsf-s4);border-radius:var(--rsf-r);border:1.5px solid;font-size:15px;line-height:1.5;color:var(--rsf-j-tekst)}
.rsf-alert__znak{font-weight:800;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:#fff;margin-top:1px}
.rsf-alert--ok{background:var(--rsf-ok-tlo);border-color:var(--rsf-ok)}   .rsf-alert--ok .rsf-alert__znak{background:var(--rsf-ok)}
.rsf-alert--blad{background:var(--rsf-blad-tlo);border-color:var(--rsf-blad)} .rsf-alert--blad .rsf-alert__znak{background:var(--rsf-blad)}
.rsf-alert--info{background:var(--rsf-info-tlo);border-color:var(--rsf-info-obrys)} .rsf-alert--info .rsf-alert__znak{background:var(--rsf-navy);color:var(--rsf-zolty)}

/* ── Układ formularza: pola po lewej, wycena po prawej (od 960 px). Na telefonie wycena jest paskiem u dołu. ── */
.rsf-uklad{display:grid;gap:var(--rsf-s6);align-items:start;max-width:var(--rsf-szer-formularza);margin:0 auto;padding:0 var(--rsf-s4)}
@media (min-width:960px){.rsf-uklad{grid-template-columns:minmax(0,1fr) 340px;gap:var(--rsf-s7)}}

/* ── Wycena (podsumowanie). Liczby przychodzą z Panelu TE; ten komponent tylko je pokazuje. ── */
.rsf-wycena{background:var(--rsf-navy);color:var(--rsf-tekst);padding:var(--rsf-s5);border:1px solid rgba(255,194,26,.4)}
@media (min-width:960px){.rsf-wycena{position:sticky;top:var(--rsf-s5)}}
.rsf-wycena__suma{font:400 clamp(44px,5vw,60px)/1 var(--rsf-serif);color:var(--rsf-zolty);margin:6px 0 var(--rsf-s3);font-variant-numeric:tabular-nums}
.rsf-wycena table{width:100%;border-collapse:collapse;font-size:15px}
.rsf-wycena td{padding:8px 0;border-top:1px solid rgba(255,255,255,.14);vertical-align:top;color:var(--rsf-tekst-2)}
.rsf-wycena td:last-child{text-align:right;color:var(--rsf-tekst);white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:var(--rsf-s3)}
.rsf-wycena tr.rsf-razem td{font-weight:700;color:var(--rsf-tekst)}
.rsf-wycena__nota{font-size:13px;color:var(--rsf-tekst-2);margin:var(--rsf-s3) 0 0}
.rsf-wycena__pusta{color:var(--rsf-tekst-2);margin:0}
.rsf-wycena--laduje .rsf-wycena__suma{opacity:.7}   /* przy przeliczaniu liczba blaknie, nie znika — układ nie skacze */

/* Telefon: wycena = pasek u dołu z kwotą; rozwija się do pełnej tabeli (details). */
.rsf-pasek{display:none}
@media (max-width:959px){
  .rsf-wycena--pelna{display:none}   /* na telefonie zamiast pełnej karty jest pasek poniżej */
  .rsf-pasek{display:block;position:sticky;bottom:0;z-index:20;background:var(--rsf-navy);border-top:2px solid var(--rsf-zolty);color:var(--rsf-tekst);padding:var(--rsf-s2) var(--rsf-s4) calc(var(--rsf-s2) + env(safe-area-inset-bottom))}
  .rsf-pasek summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--rsf-s3);min-height:var(--rsf-cel);cursor:pointer}
  .rsf-pasek summary::-webkit-details-marker{display:none}
  .rsf-pasek__kwota{font:400 30px/1 var(--rsf-serif);color:var(--rsf-zolty);font-variant-numeric:tabular-nums}
  .rsf-pasek__link{font-size:14px;font-weight:600;text-decoration:underline}
  .rsf-pasek[open] .rsf-pasek__tresc{max-height:55vh;overflow:auto;padding-bottom:var(--rsf-s3)}
}

/* ── Stopka formularza: przycisk + powód wyłączenia ── */
.rsf-wyslij{display:flex;flex-direction:column;gap:var(--rsf-s3);align-items:stretch}
@media (min-width:720px){.rsf-wyslij{flex-direction:row;align-items:center}}
.rsf-wyslij .rsf-pomoc{flex:1}

@media (prefers-reduced-motion:reduce){.rsf *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}