/* ═══════════════════════════════════════════════════════════════════════════
   RC4U — Konto klienta — menu uzytkownika, karty, najmy

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

/* --- uklad panelu ---
   Kolumna z danymi klienta i nawigacja wylecialy: powtarzaly to, co i tak
   rozwija sie z ikony konta w naglowku. Zostaje sama tresc. */
.acc{min-width:0}

.accnav__bar{height:6px; border-radius:100px; background:var(--bg-sunken); overflow:hidden}

.accnav__bar i{display:block; height:100%; background:var(--ok); border-radius:100px}

/* --- naglowek sekcji panelu --- */
.acch{margin-bottom:1.4rem; min-width:0}

.acch h2{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.4rem)}

.acch p{color:var(--ink-muted); font-size:.94rem; margin-top:.4rem; max-width:60ch}

/* --- karty panelu --- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.1rem,2vw,1.5rem); min-width:0;
}

.card + .card{margin-top:1.2rem}

.card__h{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 1rem; margin-bottom:1rem; min-width:0;
}

.card__h h3{font-family:var(--display); font-size:1.4rem; letter-spacing:.03em}

.card__h a, .card__h button.linkish{
  font-size:.84rem; font-weight:600; color:var(--accent); background:none; border:0; padding:0;
}

/* --- pasek zadan do zrobienia --- */
.todo{display:grid; gap:.7rem; margin-bottom:1.4rem; min-width:0}

.todo__i{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem; min-width:0;
  border-radius:var(--r-lg); padding:.9rem 1.1rem; border:1px solid;
}

.todo__i svg{flex:0 0 18px}

.todo__i span{min-width:0; flex:1 1 14rem; font-size:.9rem}

.todo__i .btn{flex:0 0 auto; min-height:40px; padding:.5rem 1rem; font-size:.86rem}

.todo__i--pay{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}

.todo__i--warn{background:var(--busy-bg); border-color:var(--busy); color:var(--busy)}

.todo__i--info{background:var(--surface-2); border-color:var(--line-strong); color:var(--ink)}

.todo__i b{color:inherit}

/* --- karta biezacego najmu --- */
.rental{display:grid; gap:1.2rem; min-width:0}

/* kolumna ze zdjeciem w procentach, nie w rem — przy powiekszonym tekscie
   sztywne 15rem urosloby razem z fontem i rozepchalo karte */
@media (min-width:760px){.rental{grid-template-columns:minmax(0,34%) minmax(0,1fr); align-items:start}}

.rental__img{border-radius:var(--r); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; background:var(--bg-sunken)}

.rental__img img{width:100%; height:100%; object-fit:cover}

.rental__b{min-width:0; display:grid; gap:.9rem}

.rental__name{font-family:var(--display); font-size:1.9rem; letter-spacing:.02em; line-height:calc(.95em + 3px); overflow-wrap:anywhere}

.rental__when{display:grid; gap:.5rem}

.rental__row{display:flex; flex-wrap:wrap; gap:.25rem .8rem; align-items:baseline; font-size:.9rem; min-width:0}

.rental__row b{font-weight:600}

.rental__row span{color:var(--ink-muted)}

.rental__acts{display:flex; flex-wrap:wrap; gap:.6rem; min-width:0}

/* --- odliczanie do zwrotu --- */
.countdown{
  display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.4rem;
  background:var(--range-bg); color:var(--range-ink); border-radius:100px;
  padding:.35rem .85rem; font-size:.84rem; font-weight:600; min-width:0;
}

/* --- tabela zamowien --- */
.tbl{width:100%; border-collapse:collapse; font-size:.88rem}

.tbl th{
  text-align:left; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:600; padding:0 .6rem .6rem 0; border-bottom:1px solid var(--line);
}

.tbl td{padding:.75rem .6rem .75rem 0; border-bottom:1px solid var(--line); vertical-align:top}

.tbl tr:last-child td{border-bottom:0}

.tbl td b{font-weight:600}

.tbl__wrap{overflow-x:auto; min-width:0; margin-inline:calc(-1 * clamp(1.1rem,2vw,1.5rem)); padding-inline:clamp(1.1rem,2vw,1.5rem)}

@media (max-width:700px){
  .tbl, .tbl tbody, .tbl tr, .tbl td{display:block; width:100%}
  .tbl thead{display:none}
  .tbl tr{border:1px solid var(--line); border-radius:var(--r); padding:.8rem 1rem; margin-bottom:.7rem}
  .tbl td{border:0; padding:.2rem 0; display:flex; gap:.8rem; justify-content:space-between}
  .tbl td::before{content:attr(data-l); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); flex:0 0 auto}
}

/* --- odznaka statusu zamowienia --- */
.st{
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  font-size:.76rem; font-weight:600; border-radius:100px; padding:.22rem .6rem; border:1px solid;
}

.st i{width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px}

.st--wait{background:var(--surface-2); border-color:var(--line-strong); color:var(--ink-muted)}

.st--pay{background:var(--range-bg); border-color:var(--accent); color:var(--accent)}

.st--ok{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}

.st--live{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}

.st--bad{background:var(--busy-bg); border-color:var(--busy); color:var(--busy)}

.st--done{background:var(--surface-2); border-color:var(--line-strong); color:var(--ink)}

/* --- listy „klucz: wartosc" --- */
.dl{display:grid; gap:0; min-width:0}

.dl div{
  display:flex; flex-wrap:wrap; gap:.3rem 1rem; justify-content:space-between;
  padding:.6rem 0; border-bottom:1px dashed var(--line); font-size:.89rem; min-width:0;
}

.dl div:last-child{border-bottom:0}

.dl dt{color:var(--ink-muted); min-width:0}

.dl dd{margin:0; font-weight:600; text-align:right; min-width:0}

/* --- rabaty, kaucja, kupony --- */
.perk{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; min-width:0;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem 1.2rem;
}

.perk__val{
  font-family:var(--display); font-size:2.4rem; line-height:1; letter-spacing:.02em;
  color:var(--accent); flex:0 0 auto;
}

.perk__t{min-width:0; flex:1 1 14rem}

.perk__t b{display:block; font-weight:600; font-size:.98rem}

.perk__t p{font-size:.85rem; color:var(--ink-muted); margin-top:.25rem}

.perk__tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem}

.tag{
  font-size:.72rem; font-weight:600; border-radius:100px; padding:.16rem .55rem;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-muted);
}

.tag--on{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}

.coupon{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; min-width:0;
  border:1px dashed var(--line-strong); border-radius:var(--r-lg); padding:1rem 1.15rem;
}

.coupon__code{
  font-family:var(--display); font-size:1.5rem; letter-spacing:.08em; flex:0 0 auto;
  background:var(--bg-sunken); border-radius:var(--r); padding:.3rem .8rem;
}

.coupon__t{min-width:0; flex:1 1 12rem; font-size:.87rem}

.coupon__t b{display:block; font-weight:600; font-size:.95rem}

.coupon__t span{color:var(--ink-muted)}

/* --- limit kilometrow --- */
.km{display:grid; gap:.5rem; min-width:0}

.km__bar{height:10px; border-radius:100px; background:var(--bg-sunken); overflow:hidden}

.km__bar i{display:block; height:100%; background:var(--accent-fill); border-radius:100px}

.km__bar i.is-over{background:var(--busy)}

.km__row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1rem; font-size:.85rem; min-width:0}

/* --- protokoly: wydanie kontra zwrot --- */
.proto{display:grid; gap:1rem; min-width:0}

@media (min-width:720px){.proto{grid-template-columns:1fr 1fr}}

.proto__c{border:1px solid var(--line); border-radius:var(--r-lg); padding:1rem 1.1rem; min-width:0}

.proto__c h4{
  font-family:var(--body); font-size:.74rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:.8rem;
}

.fuel{display:flex; gap:2px; margin-top:.2rem}

.fuel i{flex:1 1 0; height:9px; background:var(--bg-sunken); border-radius:2px}

.fuel i.is-on{background:var(--accent-fill)}

.dmg{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem}

.dmg span{
  font-size:.72rem; border-radius:var(--r-sm); padding:.15rem .45rem;
  background:var(--busy-bg); color:var(--busy); border:1px solid var(--busy);
}

/* --- dokumenty --- */
.docs{display:grid; gap:.6rem; min-width:0}

.doc{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem; min-width:0;
  border:1px solid var(--line); border-radius:var(--r); padding:.8rem 1rem;
}

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

.doc__t{min-width:0; flex:1 1 12rem}

.doc__t b{display:block; font-weight:600; font-size:.9rem}

.doc__t span{font-size:.78rem; color:var(--ink-muted)}

.doc .btn{flex:0 0 auto; min-height:38px; padding:.45rem .9rem; font-size:.84rem}

/* --- ekran logowania (stan gosc) --- */
.login{
  max-width:26rem; margin-inline:auto; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.6rem,4vw,2.6rem); min-width:0;
}

.login h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem); margin-bottom:.7rem}

.login p{color:var(--ink-muted); font-size:.92rem; margin-bottom:1.4rem}

.login .btn{width:100%}

.login__alt{margin-top:1rem; font-size:.85rem; color:var(--ink-muted)}

.login__why{
  margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line);
  display:grid; gap:.7rem; text-align:left;
}

.login__why div{display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; min-width:0}

.login__why svg{flex:0 0 16px; color:var(--ok); margin-top:.15rem}