/* P1R6CU-R8 — bundle detail presentation inside the confirmation step.
   Values remain a projection of the canonical server bundle snapshot. */

/* Bundle confirmation is a projection of the server snapshot. Its presentation
   is static here; no runtime stylesheet is injected by the renderer. */
#step-confirmation #conf-bundle-summary-row.bundle-confirmation-row {
  display: block;
  padding: var(--public-space-sm) 0 var(--public-space-2xs);
}

#step-confirmation .bundle-confirmation-card {
  padding: var(--public-space-md);
  border: 1px solid var(--public-border);
  border-radius: var(--radius-md);
  background: var(--public-surface);
}

#step-confirmation .bundle-confirmation-title {
  margin: 0 0 var(--public-space-sm);
  color: var(--public-title);
  font-size: 1rem;
  font-weight: 700;
}

#step-confirmation .bundle-confirmation-facts {
  display: grid;
  gap: var(--public-space-xs);
}

#step-confirmation .bundle-confirmation-fact,
#step-confirmation .bundle-confirmation-global {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--public-space-md);
}

#step-confirmation .bundle-confirmation-fact-label,
#step-confirmation .bundle-confirmation-component-balance {
  color: var(--public-text-muted);
  font-size: .84rem;
}

#step-confirmation .bundle-confirmation-fact-value {
  color: var(--public-title);
  font-size: .88rem;
  font-weight: 650;
  text-align: end;
}

#step-confirmation .bundle-confirmation-fact--emphasis .bundle-confirmation-fact-value,
#step-confirmation .bundle-confirmation-global span:last-child {
  color: var(--public-accent);
  font-weight: 800;
}

#step-confirmation .bundle-confirmation-composition,
#step-confirmation .bundle-confirmation-global {
  margin-block-start: var(--public-space-sm);
  padding-block-start: var(--public-space-sm);
  border-block-start: 1px solid var(--public-divider);
}

#step-confirmation .bundle-confirmation-composition-title {
  margin: 0 0 var(--public-space-xs);
  color: var(--public-text-muted);
  font-size: .82rem;
  font-weight: 700;
}

#step-confirmation .bundle-confirmation-component {
  padding-block: var(--public-space-xs);
  border-block-end: 1px dashed var(--public-divider);
}

#step-confirmation .bundle-confirmation-component:last-child {
  border-block-end: 0;
}

#step-confirmation .bundle-confirmation-component-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--public-space-xs);
  color: var(--public-title);
  font-size: .88rem;
  font-weight: 650;
}

#step-confirmation .bundle-confirmation-badge {
  display: inline-flex;
  padding: .125rem .4375rem;
  border-radius: 999px;
  background: var(--brand-success-ghost);
  color: var(--brand-success);
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

#step-confirmation .bundle-confirmation-global {
  font-size: .88rem;
  font-weight: 750;
}

#step-confirmation .bundle-confirmation-global span:last-child {
  text-align: end;
}

@container confirmation-step (max-width: 32rem) {
  #step-confirmation .bundle-confirmation-fact,
  #step-confirmation .bundle-confirmation-global {
    display: grid;
    gap: var(--public-space-2xs);
  }

  #step-confirmation .bundle-confirmation-fact-value,
  #step-confirmation .bundle-confirmation-global span:last-child {
    text-align: start;
  }

  #step-confirmation .bundle-confirmation-component-label {
    align-items: flex-start;
  }
}