/* ==========================================================================
   Stan płatności i reklamacje
   ========================================================================== */

/* ——————————————————————————————————————————————— Podsumowanie płatności */

.cb-payments__note { margin-bottom: 24px; }

.cb-payments__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.cb-paytile {
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cb-paytile__label {
  font-size: var(--cb-fs-micro);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
}

.cb-paytile__value { font-size: 1.5rem; font-weight: 700; color: var(--cb-brand); }
.cb-paytile__hint { font-size: var(--cb-fs-small); color: var(--cb-ink-muted); }

/* Kafelek alarmowy zmienia tylko kolor liczby i obramowania. Czerwone tło
   na całej płytce krzyczy nawet wtedy, gdy przeterminowana jest jedna
   faktura na trzydzieści. */
.cb-paytile.is-alert { border-color: var(--cb-err); }
.cb-paytile.is-alert .cb-paytile__value { color: var(--cb-err); }

/* ——————————————————————————————————————————————— Filtr */

.cb-payments__filter { display: flex; gap: 24px; margin-bottom: 24px; }

.cb-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cb-ink);
  font-size: var(--cb-fs-body);
  text-decoration: none;
}

.cb-radio::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid var(--cb-line-strong);
  border-radius: 50%;
}

.cb-radio.is-active::before {
  border-color: var(--cb-brand-500);
  border-width: 5px;
}

.cb-radio:hover { text-decoration: none; color: var(--cb-brand-600); }

/* ——————————————————————————————————————————————— Tabela płatności */

.cb-payments td { white-space: nowrap; }
.cb-payments tr.is-overdue td { background: rgba(192, 57, 43, .04); }

.cb-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--cb-fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
}

.cb-pill--ok { background: rgba(27, 127, 74, .12); color: var(--cb-ok); }
.cb-pill--wait { background: rgba(107, 113, 119, .12); color: var(--cb-ink-muted); }
.cb-pill--alert { background: rgba(192, 57, 43, .12); color: var(--cb-err); }

.cb-payments .cb-btn { min-height: 36px; padding: 0 16px; }

/* ——————————————————————————————————————————————— Reklamacje */

.cb-complaints__detail td {
  background: var(--cb-surface-alt);
  padding: 24px;
}

.cb-complaints__detail h3 {
  font-size: var(--cb-fs-small);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
  margin: 0 0 8px;
}

.cb-complaints__detail h3 + * { margin-top: 0; }
.cb-complaints__detail ul { margin: 0 0 20px; padding-left: 20px; }
.cb-complaints__detail p { margin: 0 0 20px; }
.cb-complaints__detail > td > *:last-child { margin-bottom: 0; }

/* ——————————————————————————————————————————————— Formularz reklamacji */

.cb-complaint-form { max-width: 760px; }

.cb-complaint__head,
.cb-complaint__row {
  display: grid;
  grid-template-columns: 32px 72px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 16px;
}

.cb-complaint__head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cb-line);
  font-size: var(--cb-fs-micro);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
}

.cb-complaint__row { padding: 16px 0; border-bottom: 1px solid var(--cb-line); }

.cb-complaint__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--cb-surface-alt);
  border-radius: var(--cb-radius);
  overflow: hidden;
}

.cb-complaint__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cb-complaint__name { font-weight: 700; color: var(--cb-brand); }
.cb-complaint__row .cb-tier-select { min-height: 40px; }

.cb-complaint__fields { margin-top: 32px; max-width: 520px; }

.cb-complaint__fields textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--cb-line-strong);
  border-radius: var(--cb-radius);
  font: inherit;
}

.cb-complaint__fields textarea:focus {
  outline: none;
  border-color: var(--cb-brand-500);
  box-shadow: 0 0 0 3px rgba(0, 186, 242, .15);
}

.cb-complaint__fields input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--cb-line-strong);
  border-radius: var(--cb-radius);
  background: #fff;
}

/* ——————————————————————————————————————————————— Akcje pod zamówieniem */

.cb-order-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 32px 0;
  flex-wrap: wrap;
}

/* ——————————————————————————————————————————————— Responsywność */

@media (max-width: 859px) {
  .cb-payments thead { display: none; }

  .cb-payments tr {
    display: block;
    border: 1px solid var(--cb-line);
    border-radius: var(--cb-radius);
    padding: 16px;
    margin-bottom: 16px;
  }

  .cb-payments td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    padding: 6px 0;
    white-space: normal;
  }

  .cb-payments td::before {
    content: attr(data-label);
    color: var(--cb-ink-muted);
    font-size: var(--cb-fs-micro);
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .cb-complaint__head { display: none; }

  .cb-complaint__row {
    grid-template-columns: 32px 56px minmax(0, 1fr);
    grid-template-areas:
      "check media name"
      ".     qty   qty";
    gap: 8px 12px;
  }

  .cb-complaint__row > input[type="checkbox"] { grid-area: check; }
  .cb-complaint__media { grid-area: media; }
  .cb-complaint__name  { grid-area: name; }
  .cb-complaint__row > span:last-child { grid-area: qty; }

  .cb-order-actions { flex-direction: column; }
  .cb-order-actions .cb-btn { width: 100%; }
}