/* BuzOps V3 payments and billing product page. */

.payments-hero-console {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.35rem;
  background: var(--bz-white);
  box-shadow: 0 2rem 5.5rem rgba(0,0,0,.34);
  color: var(--bz-ink-900);
  transform: perspective(1400px) rotateY(-3.5deg) rotateX(1deg);
  transform-origin: center;
}

.payments-hero-console__bar {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--bz-border);
  background: #fbfdfe;
  padding-inline: 1rem;
}

.payments-hero-console__brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--bz-ink-900);
  font-family: var(--bz-font-display);
  font-size: .7rem;
  font-weight: 700;
}

.payments-hero-console__brand::before {
  width: .7rem;
  height: .7rem;
  border-radius: .2rem;
  background: #087a59;
  box-shadow: 0 0 0 .22rem var(--bz-success-soft);
  content: "";
}

.payments-hero-console__body {
  display: grid;
  grid-template-columns: 3.4rem minmax(0,1fr);
  min-height: 34rem;
}

.payments-hero-console__rail {
  display: grid;
  align-content: start;
  gap: .5rem;
  border-right: 1px solid var(--bz-border);
  background: #fbfdfe;
  padding: 1rem .65rem;
}

.payments-hero-console__rail span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .62rem;
  color: var(--bz-ink-400);
  font-size: .62rem;
  font-weight: 700;
}

.payments-hero-console__rail span[aria-current="page"] {
  background: var(--bz-success-soft);
  color: #087a59;
}

.payments-hero-console__canvas {
  min-width: 0;
  background: var(--bz-canvas);
  padding: 1rem;
}

.payments-console-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}

.payments-console-head strong {
  display: block;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: .9rem;
}

.payments-console-head small {
  display: block;
  margin-top: .15rem;
  color: var(--bz-ink-500);
  font-size: .54rem;
}

.payments-hero-metrics,
.payments-summary-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .6rem;
  margin-bottom: .65rem;
}

.payments-hero-metric,
.payments-summary-card {
  min-width: 0;
  border: 1px solid var(--bz-border);
  border-radius: .76rem;
  background: var(--bz-white);
  box-shadow: var(--bz-shadow-xs);
  padding: .7rem;
}

.payments-hero-metric small,
.payments-summary-card small {
  display: block;
  overflow: hidden;
  color: var(--bz-ink-500);
  font-size: .49rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payments-hero-metric strong,
.payments-summary-card strong {
  display: block;
  margin-top: .25rem;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: 1rem;
}

.payments-hero-metric span,
.payments-summary-card span {
  display: block;
  margin-top: .25rem;
  color: #087a59;
  font-size: .47rem;
  font-weight: 600;
}

.payments-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(11rem,.82fr);
  gap: .65rem;
}

.payments-chart-panel,
.payments-attention-panel {
  min-width: 0;
  border: 1px solid var(--bz-border);
  border-radius: .82rem;
  background: var(--bz-white);
  box-shadow: var(--bz-shadow-xs);
  padding: .8rem;
}

.payments-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .72rem;
}

.payments-panel-head strong {
  color: var(--bz-ink-900);
  font-size: .64rem;
}

.payments-panel-head span {
  color: var(--bz-ink-400);
  font-size: .48rem;
}

.payments-bars {
  display: flex;
  min-height: 10rem;
  align-items: end;
  gap: .36rem;
  border-bottom: 1px solid var(--bz-border);
  background-image: linear-gradient(to bottom,transparent 24%,var(--bz-border) 25%,transparent 26%,transparent 49%,var(--bz-border) 50%,transparent 51%,transparent 74%,var(--bz-border) 75%,transparent 76%);
  padding: 0 .2rem .15rem;
}

.payments-bars span {
  flex: 1;
  height: var(--height);
  border-radius: .22rem .22rem 0 0;
  background: linear-gradient(to top,#087a59,#57d3a8);
}

.payments-attention-list {
  display: grid;
  gap: .45rem;
}

.payments-attention-item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .48rem;
  border: 1px solid var(--bz-border);
  border-radius: .65rem;
  background: #fcfdfe;
  padding: .55rem;
}

.payments-attention-item__icon {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: .42rem;
  background: var(--attention-soft,var(--bz-warning-soft));
  color: var(--attention-ink,#9a5b00);
  font-size: .45rem;
  font-weight: 700;
}

.payments-attention-item span:nth-child(2) {
  color: var(--bz-ink-600);
  font-size: .49rem;
}

.payments-attention-item strong {
  color: var(--bz-ink-900);
  font-size: .56rem;
}

.payments-transaction-layout {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(12rem,.65fr);
  gap: .7rem;
}

.payments-transaction-list,
.payments-account-summary,
.payments-recurring-list,
.payments-recovery-list,
.payments-reconciliation-panel {
  min-width: 0;
  border: 1px solid var(--bz-border);
  border-radius: .82rem;
  background: var(--bz-white);
  padding: .8rem;
}

.payments-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-bottom: .7rem;
}

.payments-section-title strong {
  color: var(--bz-ink-900);
  font-size: .64rem;
}

.payments-transaction-row {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(6rem,.65fr) auto auto;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid var(--bz-border);
  padding-block: .58rem;
}

.payments-transaction-row:last-child { border-bottom:0; }

.payments-transaction-row strong {
  display: block;
  color: var(--bz-ink-800);
  font-size: .57rem;
}

.payments-transaction-row small {
  display: block;
  margin-top: .1rem;
  color: var(--bz-ink-500);
  font-size: .46rem;
}

.payments-transaction-row > span:not(.bz-status) {
  color: var(--bz-ink-600);
  font-size: .52rem;
  white-space: nowrap;
}

.payments-account-summary__amount {
  margin: .45rem 0 .9rem;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: 1.7rem;
  font-weight: 700;
}

.payments-account-summary__amount small {
  display: block;
  margin-top: .2rem;
  color: var(--bz-ink-500);
  font-family: var(--bz-font-body);
  font-size: .5rem;
  font-weight: 400;
}

.payments-fact-list {
  display: grid;
  gap: .48rem;
}

.payments-fact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  border-top: 1px solid var(--bz-border);
  padding-top: .48rem;
}

.payments-fact-row span,
.payments-fact-row strong { font-size:.5rem; }
.payments-fact-row span { color:var(--bz-ink-500); }
.payments-fact-row strong { color:var(--bz-ink-800); text-align:right; }

.payments-recurring-layout {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(11rem,.8fr);
  gap: .7rem;
}

.payments-recurring-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid var(--bz-border);
  padding-block: .58rem;
}

.payments-recurring-row:last-child { border-bottom:0; }

.payments-recurring-icon {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: .52rem;
  background: var(--recurring-soft,var(--bz-cyan-50));
  color: var(--recurring-ink,var(--bz-cyan-700));
  font-size: .5rem;
  font-weight: 700;
}

.payments-recurring-row strong {
  display: block;
  color: var(--bz-ink-800);
  font-size: .56rem;
}

.payments-recurring-row small {
  display: block;
  margin-top: .1rem;
  color: var(--bz-ink-500);
  font-size: .46rem;
}

.payments-mix-card {
  border: 1px solid var(--bz-border);
  border-radius: .82rem;
  background: var(--bz-white);
  padding: .8rem;
}

.payments-donut {
  position: relative;
  display: grid;
  width: 8rem;
  height: 8rem;
  margin: .7rem auto 1rem;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#087a59 0 62%,var(--bz-cyan-500) 62% 78%,var(--bz-orange-500) 78% 91%,var(--bz-violet) 91% 100%);
}

.payments-donut::before {
  position: absolute;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 50%;
  background: var(--bz-white);
  content: "";
}

.payments-donut span {
  position: relative;
  z-index: 1;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
}

.payments-donut small {
  display: block;
  margin-top: .12rem;
  color: var(--bz-ink-500);
  font-family: var(--bz-font-body);
  font-size: .44rem;
  font-weight: 400;
}

.payments-recovery-layout {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(12rem,.8fr);
  gap: .7rem;
}

.payments-recovery-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid var(--bz-border);
  padding-block: .58rem;
}

.payments-recovery-row:last-child { border-bottom:0; }

.payments-recovery-row strong {
  display: block;
  color: var(--bz-ink-800);
  font-size: .56rem;
}

.payments-recovery-row small {
  display: block;
  margin-top: .1rem;
  color: var(--bz-ink-500);
  font-size: .46rem;
}

.payments-recovery-row > span:not(.bz-status) {
  color: var(--bz-ink-700);
  font-size: .52rem;
  font-weight: 600;
}

.payments-recovery-steps {
  display: grid;
  gap: .55rem;
}

.payments-recovery-step {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: .55rem;
  align-items: start;
}

.payments-recovery-step__index {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: .5rem;
  background: var(--step-soft,var(--bz-warning-soft));
  color: var(--step-ink,#9a5b00);
  font-size: .5rem;
  font-weight: 700;
}

.payments-recovery-step strong {
  display: block;
  color: var(--bz-ink-800);
  font-size: .55rem;
}

.payments-recovery-step small {
  display: block;
  margin-top: .1rem;
  color: var(--bz-ink-500);
  font-size: .46rem;
}

.payments-reconciliation-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .65rem;
  margin-bottom: .65rem;
}

.payments-reconciliation-card {
  border: 1px solid var(--bz-border);
  border-radius: .78rem;
  background: var(--bz-white);
  padding: .75rem;
}

.payments-reconciliation-card small {
  display: block;
  color: var(--bz-ink-500);
  font-size: .49rem;
}

.payments-reconciliation-card strong {
  display: block;
  margin-top: .25rem;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: 1rem;
}

.payments-reconciliation-table {
  overflow-x: auto;
  border: 1px solid var(--bz-border);
  border-radius: .76rem;
  background: var(--bz-white);
}

.payments-reconciliation-row {
  display: grid;
  min-width: 35rem;
  grid-template-columns: minmax(0,1.2fr) repeat(3,minmax(6rem,.7fr));
  align-items: center;
  gap: .55rem;
  border-bottom: 1px solid var(--bz-border);
  padding: .62rem .7rem;
}

.payments-reconciliation-row:last-child { border-bottom:0; }
.payments-reconciliation-row--head { background:#fbfdfe; color:var(--bz-ink-400); font-size:.48rem; font-weight:700; text-transform:uppercase; }
.payments-reconciliation-row strong { color:var(--bz-ink-800); font-size:.56rem; }
.payments-reconciliation-row span:not(.bz-status) { color:var(--bz-ink-500); font-size:.51rem; }

.payments-revenue-models {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1rem;
}

.payments-revenue-card {
  min-height: 100%;
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-white);
  box-shadow: var(--bz-shadow-xs);
  padding: 1.3rem;
}

.payments-revenue-card__icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  margin-bottom: 1rem;
  place-items: center;
  border-radius: .78rem;
  background: var(--revenue-soft,var(--bz-success-soft));
  color: var(--revenue-ink,#087a59);
  font-family: var(--bz-font-display);
  font-size: .68rem;
  font-weight: 700;
}

.payments-revenue-card h3 { margin-bottom:.45rem; font-size:1.05rem; }
.payments-revenue-card p { margin:0; font-size:.78rem; }

.payments-flow {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: .75rem;
}

.payments-flow-step {
  position: relative;
  min-height: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--bz-radius-lg);
  background: rgba(255,255,255,.055);
  padding: 1.2rem;
  backdrop-filter: blur(10px);
}

.payments-flow-step:not(:last-child)::after {
  position: absolute;
  top: 1.85rem;
  right: -.65rem;
  color: var(--bz-cyan-200);
  content: "→";
  font-size: .75rem;
}

.payments-flow-step__index {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: .9rem;
  place-items: center;
  border-radius: .68rem;
  background: rgba(87,211,168,.14);
  color: #8be8c6;
  font-family: var(--bz-font-display);
  font-size: .64rem;
  font-weight: 700;
}

.payments-flow-step:nth-child(2) .payments-flow-step__index,
.payments-flow-step:nth-child(5) .payments-flow-step__index {
  background: rgba(255,160,77,.14);
  color: var(--bz-orange-200);
}

.payments-flow-step h3 { margin-bottom:.4rem; color:var(--bz-white); font-size:1rem; }
.payments-flow-step p { margin:0; color:#aebccd; font-size:.74rem; }

.payments-signal-board {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(16rem,.85fr);
  gap: 1rem;
}

.payments-signal-table,
.payments-action-queue {
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius-xl);
  background: var(--bz-white);
  box-shadow: var(--bz-shadow-sm);
  padding: 1rem;
}

.payments-signal-head,
.payments-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .8rem;
}

.payments-signal-head strong,
.payments-action-head strong { color:var(--bz-ink-900); font-size:.72rem; }

.payments-signal-row {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) repeat(4,minmax(5rem,.72fr));
  align-items: center;
  gap: .55rem;
  border-bottom: 1px solid var(--bz-border);
  padding-block: .65rem;
}

.payments-signal-row:last-child { border-bottom:0; }
.payments-signal-row--head { color:var(--bz-ink-400); font-size:.5rem; font-weight:700; text-transform:uppercase; }
.payments-signal-row strong { color:var(--bz-ink-800); font-size:.58rem; }
.payments-signal-row span:not(.bz-status) { color:var(--bz-ink-500); font-size:.52rem; }

.payments-action-list { display:grid; gap:.55rem; }

.payments-action-item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--bz-border);
  border-radius: .72rem;
  background: #fcfdfe;
  padding: .7rem;
}

.payments-action-item__icon {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: .55rem;
  background: var(--action-soft,var(--bz-warning-soft));
  color: var(--action-ink,#9a5b00);
  font-size: .52rem;
  font-weight: 700;
}

.payments-action-item strong { display:block; color:var(--bz-ink-800); font-size:.58rem; }
.payments-action-item small { display:block; margin-top:.1rem; color:var(--bz-ink-500); font-size:.48rem; }

@media(max-width:72rem){
  .payments-revenue-models{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payments-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .payments-flow-step:not(:last-child)::after{display:none}
}

@media(max-width:64rem){
  .payments-hero-console{transform:none}
  .payments-signal-board{grid-template-columns:1fr}
}

@media(max-width:48rem){
  .payments-hero-console__body{grid-template-columns:2.8rem minmax(0,1fr)}
  .payments-hero-console__rail{padding-inline:.4rem}
  .payments-hero-metrics,.payments-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payments-hero-grid,.payments-transaction-layout,.payments-recurring-layout,.payments-recovery-layout{grid-template-columns:1fr}
  .payments-signal-table{overflow-x:auto}
  .payments-signal-row{min-width:40rem}
  .payments-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:36rem){
  .payments-hero-console__body{display:block;min-height:0}
  .payments-hero-console__rail{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--bz-border);padding:.55rem}
  .payments-hero-console__canvas{padding:.75rem}
  .payments-console-head{display:block}
  .payments-console-head .bz-badge{margin-top:.5rem}
  .payments-transaction-row{grid-template-columns:minmax(0,1fr) auto}
  .payments-transaction-row .bz-status{grid-column:1/-1;justify-self:start}
  .payments-reconciliation-grid,.payments-revenue-models,.payments-flow{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){.payments-hero-console{transform:none!important}}