/* ═══════════════════════════════════════════════════════════════════════════
   RC4U — Zamowienie — os czasu, stan, podsumowanie platnosci

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

/* ============================================================
   ŁAŃCUCH STATUSÓW REZERWACJI
   Odwzorowuje realne statusy zamówienia: rc4u-awaiting →
   pending (zaakceptowane) → processing (opłacone) → rc4u-issued.
   Tu numeracja niesie treść: to kolejność zdarzeń w czasie.
   ============================================================ */
.flow{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(140px,1fr);
  gap:0; margin:0; padding:0; overflow-x:auto; scrollbar-width:none;
  min-width:0; counter-reset:f;
}

.flow::-webkit-scrollbar{display:none}

.flow__i{
  list-style:none; position:relative; padding:2.6rem .7rem 0; text-align:center;
  counter-increment:f; color:var(--ink-muted);
}

/* linia łącząca — biegnie przez środek kropek */
.flow__i::before{
  content:''; position:absolute; top:13px; left:0; right:50%; height:2px;
  background:var(--line);
}

.flow__i::after{
  content:''; position:absolute; top:13px; left:50%; right:0; height:2px;
  background:var(--line);
}

.flow__i:first-child::before,
.flow__i:last-child::after{display:none}

.flow__dot{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:2px solid var(--line-strong);
  font-family:var(--display); font-size:.92rem; line-height:1; color:var(--ink-muted);
  z-index:1;
}

.flow__dot::before{content:counter(f)}

.flow__i b{display:block; font-size:.86rem; color:var(--ink-muted); font-weight:600}

.flow__i small{display:block; font-size:.72rem; color:var(--ink-muted); margin-top:.15rem}

.flow__i.is-done{color:var(--ink)}

.flow__i.is-done .flow__dot{
  background:var(--ok); border-color:var(--ok); color:#fff;
}

.flow__i.is-done .flow__dot::before{content:'✓'; font-family:var(--body); font-size:.78rem; font-weight:700}

.flow__i.is-done::before,
.flow__i.is-done::after{background:var(--ok)}

.flow__i.is-done b{color:var(--ink)}

.flow__i.is-now .flow__dot{
  background:var(--accent-fill); border-color:var(--accent-on-fill); color:var(--accent-on-fill);
  box-shadow:0 0 0 4px var(--range-bg);
}

.flow__i.is-now b{color:var(--ink); font-weight:700}

.flow__i.is-now::before{background:var(--ok)}

/* ============================================================
   KARTA STANU REZERWACJI
   ============================================================ */
.state{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow);
}

.state__top{
  display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center;
  padding:1.3rem 1.4rem; border-bottom:1px solid var(--line); min-width:0;
}

.state__badge{
  display:inline-flex; align-items:flex-start; gap:.5rem; padding:.45rem .85rem;
  border-radius:14px; font-size:.8rem; font-weight:600; line-height:1.35;
  max-width:100%; min-width:0;
}

.state__badge i{
  width:8px; height:8px; border-radius:50%; background:currentColor;
  display:block; flex:0 0 8px; margin-top:.4rem;
}

.state__badge > span{min-width:0}

.state__badge--wait{background:var(--range-bg); color:var(--ink); border:1px solid var(--accent-fill)}

.state__badge--ok{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok)}

.state__no{margin-left:auto; display:flex; flex-direction:column; text-align:right}

.state__no span{font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-muted)}

.state__no b{font-family:var(--display); font-size:1.4rem; letter-spacing:.05em; line-height:calc(1em + 2px)}

@media (max-width:560px){
  .state__no{margin-left:0; text-align:left}
}

.state__body{padding:1.4rem}

.state__flow{padding:1.6rem 1rem 1.4rem; border-bottom:1px solid var(--line); background:var(--surface-2)}

/* kwota do zapłaty — z widoczną korektą obsługi, gdy cena była negocjowana */
.paysum{display:grid; gap:.65rem; font-size:.92rem}

.paysum__line{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem}

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

.paysum__line b{font-weight:600; text-align:right}

.paysum__line--cut span,
.paysum__line--cut b{text-decoration:line-through; opacity:.6}

.paysum__note{
  font-size:.8rem; color:var(--ok); background:var(--ok-bg); border-radius:var(--r-sm);
  padding:.5rem .7rem; display:flex; gap:.5rem; align-items:flex-start;
}

.paysum__note svg{flex:0 0 15px; margin-top:.15rem}

.paysum__total{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.25rem 1rem;
  border-top:1px solid var(--line-strong); padding-top:.85rem; margin-top:.2rem;
}

.paysum__total span{font-weight:600}

.paysum__total b{font-family:var(--display); font-size:2.2rem; line-height:1; letter-spacing:.01em}