/* ═══════════════════════════════════════════════════════════════════════════
   RC4U — Komponenty wspolne — przyciski, pola, znaczniki, nawigacja

   Zrodlo: design/makiety/rc4u-redesign.html (blok <style> nr 1).
   Wygenerowane 2026-08-28. Zmiany wprowadzaj TUTAJ — makieta jest juz tylko
   dokumentacja decyzji, nie zrodlem prawdy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- przyciski --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  flex-wrap:wrap; max-width:100%; min-width:0; text-align:center;
  padding:.86rem 1.6rem; border:1px solid transparent; border-radius:var(--r);
  font-weight:600; font-size:.94rem; letter-spacing:.01em; text-decoration:none;
  transition:transform .12s ease, background .15s, border-color .15s, color .15s;
  min-height:48px;              /* cel dotykowy — mobile first */
}

.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--accent-fill); color:var(--accent-on-fill); border-color:var(--accent-fill)}

.btn--primary:hover{background:var(--sky-200); border-color:var(--sky-200)}

.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}

.btn--ghost:hover{border-color:var(--ink); background:var(--surface-2)}

.btn--onDark{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}

.btn--onDark:hover{background:rgba(255,255,255,.12); border-color:#fff}

.btn--lg{padding:1.05rem 2rem; font-size:1rem; min-height:56px}

.btn--block{width:100%}

/* --- skos z logo: badge --- */
.slash{
  display:inline-block; padding:.3rem .85rem .32rem;
  background:var(--accent-fill); color:var(--accent-on-fill);
  font-family:var(--display); font-size:.95rem; letter-spacing:.06em;
  transform:skewX(var(--skew));
}

.slash > span{display:inline-block; transform:skewX(calc(-1 * var(--skew)))}

/* --- nagłówek strony --- */
.nav{
  position:sticky; top:var(--demobar-h,0px); z-index:60; background:var(--bg);
  border-bottom:1px solid var(--line);
}

.nav__in{
  max-width:var(--maxw); margin-inline:auto; padding:.85rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem; min-width:0;
}

.nav__logo{height:26px; width:auto; max-width:118px; flex:0 0 auto; filter:var(--logo-filter)}

.nav__links{display:none; gap:1.7rem; margin-left:1rem}

.nav__links a{
  color:var(--ink); text-decoration:none; font-size:.9rem; font-weight:500;
  padding:.4rem 0; border-bottom:2px solid transparent;
}

.nav__links a:hover{border-bottom-color:var(--accent-fill)}

.nav__right{margin-left:auto; display:flex; align-items:center; gap:.75rem; min-width:0}

/* wąski ekran: header musi zmieścić się co do piksela — inaczej cała strona
   jeździ w poziomie (widoczne na mobilnym Firefoksie, który ma węższy
   viewport CSS niż Chrome czy Opera) */
@media (max-width:560px){
  .nav__in{gap:.7rem; padding-inline:var(--gutter)}
  .nav__logo{height:22px; max-width:96px}
  .nav__right{gap:.45rem}
  .nav__right .btn{padding:.55rem .8rem !important; font-size:.86rem}
  .nav__burger{width:40px; height:40px; flex:0 0 40px}
  .nav__lang{padding:.3rem .45rem; font-size:.72rem}
}

@media (max-width:400px){
  /* przy najwezszych ekranach CTA z naglowka ustepuje — burger i tak prowadzi
     do menu, a na stronie sa wlasne przyciski rezerwacji */
  .nav__right .btn{display:none}
}

.nav__lang{
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  border-radius:var(--r-sm); padding:.35rem .6rem; font-size:.78rem; font-weight:600; letter-spacing:.06em;
  height:34px; display:inline-flex; align-items:center;   /* rowno z przyciskiem konta */
}

/* motyw — ten sam prostokat co jezyk i konto */
.nav__theme{
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  border-radius:var(--r-sm); height:34px; width:34px; flex:0 0 34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s;
}

.nav__theme:hover{border-color:var(--ink); background:var(--surface-2)}

@media (max-width:420px){.nav__theme{display:none}}

.nav__burger{
  display:inline-flex; border:1px solid var(--line-strong); background:transparent;
  color:var(--ink); border-radius:var(--r-sm); width:44px; height:44px;
  align-items:center; justify-content:center;
}

@media (min-width:960px){
  .nav__links{display:flex}
  .nav__burger{display:none}
}

/* --- wyszukiwarka terminu: rdzeń nowego flow --- */
.finder{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:1.15rem; display:grid; gap:.85rem;
}

.finder--inHero{margin-top:2.2rem}

.finder__row{display:grid; gap:.85rem}

@media (min-width:720px){
  .finder__row{grid-template-columns:1fr 1fr auto; align-items:end}
  .finder{padding:1.35rem}
}

.field{display:grid; gap:.35rem}

.field label{
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted);
}

.field input, .field select{
  font-family:inherit; font-size:.98rem; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--r); padding:.8rem .9rem;
  min-height:50px; width:100%;
}

.finder__title{
  font-family:var(--display); font-size:1.45rem; letter-spacing:.04em;
  line-height:1; color:var(--ink); margin-bottom:.15rem;
}

/* przycisk dokladnie tej samej wysokosci co pola dat */
.finder .btn{min-height:50px; height:50px; padding-block:0}

.finder__hint{
  display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-muted);
  border-top:1px dashed var(--line); padding-top:.8rem;
}

.finder__hint b{color:var(--ink); font-weight:600}

/* --- sekcje --- */
.section{padding:clamp(3.4rem,7vw,6.5rem) 0}

.section--alt{background:var(--bg-alt)}

.section__head{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:flex-end;
  justify-content:space-between; margin-bottom:clamp(1.8rem,3vw,2.8rem);
}

.section__head .lead-col{max-width:56ch}

/* ─── Naglowek i stopka z pozostalych blokow makiety ────────────────────
   W makiecie te reguly dopisywano tam, gdzie akurat trwala praca.
   Tu wracaja na miejsce: sa na kazdej stronie, wiec naleza do warstwy
   wspolnej, a nie do modulu floty czy kalendarza. */

/* --- stopka --- */
.foot{background:var(--navy-900); color:#c8d8e6; padding:clamp(2.6rem,5vw,4rem) 0 2rem; margin-top:0}

.foot a{color:#c8d8e6; text-decoration:none; font-size:.88rem}

.foot a:hover{color:var(--sky-300); text-decoration:underline}

.foot__grid{display:grid; gap:2rem; grid-template-columns:1fr}

@media (min-width:760px){.foot__grid{grid-template-columns:2fr 1fr 1fr 1.2fr}}

.foot h4{font-size:1.05rem; letter-spacing:.1em; margin-bottom:.9rem; color:#fff; text-transform:uppercase}

.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}

.foot__logo{height:30px; margin-bottom:1rem}

.foot__bottom{
  border-top:1px solid rgba(255,255,255,.13); margin-top:2.2rem; padding-top:1.2rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; font-size:.78rem; color:#8fa6ba;
}

/* ============================================================
   KONTO — ikona w naglowku i panel klienta
   Odwzorowuje rc4u-konto: dashboard, zamowienia, profil,
   dokumenty i platnosci. Dochodzi to, co system JUZ liczy,
   a czego panel dzis nie pokazuje: rabaty, kupony, kaucja,
   limit kilometrow i protokoly wydania/zwrotu.
   ============================================================ */

/* --- przycisk konta w naglowku --- */
.nav__acc{position:relative; flex:0 0 auto}

.nav__accbtn{
  display:inline-flex; align-items:center; gap:.45rem; min-width:0;
  height:34px; padding:0 .5rem; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:transparent; color:var(--ink);
  font-size:.82rem; font-weight:500;
  transition:border-color .15s, background .15s;
}

.nav__accbtn:hover{border-color:var(--ink); background:var(--surface-2)}

.nav__accbtn[aria-expanded="true"]{border-color:var(--accent); background:var(--surface-2)}

.nav__avatar{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  background:var(--accent-fill); color:var(--accent-on-fill);
  font-size:.7rem; font-weight:700; letter-spacing:.02em;
  display:grid; place-items:center;
}

.nav__accname{max-width:8ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

@media (max-width:860px){.nav__accname{display:none}}

@media (max-width:560px){.nav__accbtn{padding:0 .4rem; height:32px}}

/* --- rozwijane menu konta --- */
.nav__menu{
  position:absolute; right:0; top:calc(100% + .5rem); z-index:80; width:min(19rem, calc(100vw - 2rem));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:.55rem; text-align:left;
}

.nav__menuhead{
  padding:.5rem .7rem .6rem; font-size:.78rem; color:var(--ink-muted);
  border-bottom:1px solid var(--line); margin-bottom:.35rem; min-width:0;
}

.nav__menuhead b{display:block; font-size:.92rem; color:var(--ink); font-weight:600}

.nav__menuhead span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.nav__menuitem{
  display:flex; align-items:center; gap:.6rem; width:100%; min-width:0;
  padding:.6rem .7rem; border:0; border-radius:var(--r); background:transparent;
  color:var(--ink); font-size:.88rem; text-align:left; min-height:42px;
}

.nav__menuitem:hover{background:var(--surface-2)}

.nav__menuitem svg{flex:0 0 16px; color:var(--ink-muted)}

.nav__menuitem--sep{border-top:1px solid var(--line); margin-top:.35rem; padding-top:.7rem; border-radius:0 0 var(--r) var(--r)}

.nav__menubadge{
  margin-left:auto; flex:0 0 auto; font-size:.72rem; font-weight:700;
  background:var(--accent-fill); color:var(--accent-on-fill);
  border-radius:100px; padding:.1rem .5rem;
}

.nav__meter{display:block; margin-top:.7rem}

.nav__meter > span:first-child{display:flex; justify-content:space-between; gap:.5rem; font-size:.72rem; margin-bottom:.3rem}

.nav__meter b{font-weight:600; color:var(--ink-muted)}


/* ── Notka ────────────────────────────────────────────────────────────────────
   Wyjaśnienie przy formularzu albo komunikat kontekstowy. Mieszka tutaj, bo
   używa jej i front (kreator rezerwacji), i konto klienta, i panel. */

.note{
  border-left:3px solid var(--accent-fill); background:var(--surface-2);
  padding:.85rem 1rem; font-size:.86rem; color:var(--ink-muted); border-radius:0 var(--r) var(--r) 0;
}

.note b{color:var(--ink)}

.note code{
  font-size:.85em; padding:.05rem .3rem; border-radius:4px;
  background:var(--surface); border:1px solid var(--line);
}

/* Wariant ostrzegawczy: tryb produkcyjny płatności, nadpisanie przez zmienną
   środowiskową — rzeczy, które trzeba zauważyć, zanim się kliknie zapisz. */
.note--warn{border-left-color:var(--busy); background:var(--busy-bg)}