/* ==========================================================================
   payments.css — payments.html
   Page-scoped only. Every value comes from css/tokens.css. Nothing in
   css/components.css or css/layout.css is restyled here; each class below is
   either page-owned or a page-owned modifier sitting alongside a shared one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gateway banner + summary tiles
   -------------------------------------------------------------------------- */
.pay-gateway .banner-text { max-width: 78ch; }

.pay-tiles { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Status tones match orders.html, so a failed attempt reads the same on both
   pages. --text-subtle on .stat-hint falls under 4.5:1 in both themes. */
.pay-tiles .stat-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.pay-tiles .stat-icon.is-success { background: var(--success-soft); color: var(--success); }
.pay-tiles .stat-icon.is-muted { background: var(--surface-3); color: var(--text-muted); }

.pay-tiles .stat-hint {
  min-height: 2.4em;
  color: var(--text-muted);
}

/* Reserved tiles while the session and the history are read, so the band is
   never a blank strip and nothing jumps when the real figures land. */
.pay-tile-boot {
  gap: var(--space-3);
}

.pay-tile-boot .skeleton-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */
.pay-filters {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) repeat(3, minmax(9rem, 1fr)) auto;
  align-items: end;
  gap: var(--space-3) var(--space-4);
  padding: var(--card-pad-tight);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-inset);
}

.pay-filter { min-width: 0; }

.pay-filter-reset {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
}

@media (max-width: 1100px) {
  .pay-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-filter-search { grid-column: 1 / -1; }
  .pay-filter-reset { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 480px) {
  .pay-filters { grid-template-columns: minmax(0, 1fr); }
}

.pay-result-line {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.pay-result-line:empty { display: none; }

/* Shared classes on this page that inherit --text-subtle — under 4.5:1 in
   both themes — reached through a page-owned ancestor. */
.pay-rail .section-nav-title,
.pay-rail .section-nav-tail,
.pay-filters .field-hint,
.pay-billing-form .field-hint,
.pay-billing-form .field-optional,
.pay-pagination .pagination-count,
.pay-entity dt {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Transaction table
   -------------------------------------------------------------------------- */
.pay-boot { margin-top: var(--space-4); }

.pay-table-wrap { margin-top: var(--space-4); }

/* The pane this table sits in is ~920px on a 1440px screen. Left to their
   natural widths the seven columns wanted 983px, so the Details control sat
   outside the card until you scrolled sideways. Description absorbs the
   slack and every other column sizes to its content, which brings the table
   back inside the card at every width above the card-collapse breakpoint. */
.pay-table thead th { color: var(--text-muted); }

@media (min-width: 721px) {
  /* Seven columns at the default --row-px spend 280px on gutters alone.
     Tighten this one table's gutters and let Description absorb the slack. */
  .pay-table th,
  .pay-table td { padding-inline: var(--space-3); }

  .pay-table thead th:nth-child(3),
  .pay-table td[data-label="Description"] { width: 100%; }

  .pay-table td[data-label="Reference"] { max-width: 11rem; }

}

@media (min-width: 1181px) {
  /* There is room for "Credit / debit card" on one line at desktop widths;
     below that it wraps rather than widening the table past its card. */
  .pay-table td[data-label="Method"] { min-width: 9rem; }
}

.pay-date {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--text);
  white-space: nowrap;
}

.pay-time {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pay-ref {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  word-break: break-all;
}

.pay-desc {
  display: block;
  color: var(--text);
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}

.pay-plan {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.pay-invoice {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-normal);
}

.pay-method {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.pay-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
}

.pay-mark > svg { width: 1.15rem; height: 1.15rem; }
.pay-mark-upi { color: var(--success); }
.pay-mark-card { color: var(--primary); }
.pay-mark-netbanking { color: var(--info); }
.pay-mark-wallet { color: var(--accent); }

.pay-amount { font-weight: var(--fw-semibold); white-space: nowrap; }

/* The shared chevron points down; turn it into a left / right arrow so the
   previous and next buttons are not two identical marks. */
.pay-page-prev > svg { transform: rotate(90deg); }
.pay-page-next > svg { transform: rotate(-90deg); }

.pay-toggle-chevron {
  width: 0.9em;
  height: 0.9em;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.pay-toggle[aria-expanded="true"] .pay-toggle-chevron { transform: rotate(180deg); }

.pay-row.is-open td { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   Gateway-response disclosure
   -------------------------------------------------------------------------- */
.pay-table tbody tr.pay-detail-row > td {
  padding: 0;
  background: var(--surface-inset);
  border-top: 0;
}

.pay-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
  padding: var(--card-pad-tight) var(--row-px) var(--card-pad);
  border-top: 1px dashed var(--border);
}

@media (max-width: 900px) {
  .pay-detail { grid-template-columns: minmax(0, 1fr); }
}

.pay-detail-grid,
.pay-detail-items { min-width: 0; }

.pay-detail-title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.pay-kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
}

.pay-kv > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
}

@media (max-width: 560px) {
  .pay-kv > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

.pay-kv dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.pay-kv dd {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text);
  line-height: var(--lh-snug);
  word-break: break-word;
}

.pay-code {
  display: inline-block;
  padding: var(--space-0) var(--space-2);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-xs);
  background: var(--danger-soft);
  color: var(--danger-soft-text);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
}

.pay-item-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.pay-item-list > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pay-item-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.pay-item-meta { font-size: var(--fs-xs); color: var(--text-muted); }

.pay-detail-totals .totals-row.is-total > span:last-child { font-size: var(--fs-lg); }

/* --- Phone: the disclosure has to stay welded to the row card ------------- */
@media (max-width: 720px) {
  .pay-table-wrap { margin-top: var(--space-5); }

  .pay-table tbody tr.pay-row.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
  }

  .pay-row.is-open td { background: transparent; }

  .pay-table tbody tr.pay-detail-row {
    margin-top: 0;
    padding: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--surface-inset);
  }

  .pay-table tbody tr.pay-detail-row > td {
    display: block;
    padding: 0;
    text-align: left;
  }

  .pay-detail { padding: var(--space-4); }

  .pay-date, .pay-time { display: inline; }
  .pay-time::before { content: " · "; }

  /* .table td.shrink keeps width:1%/nowrap inside .table-collapse, which
     squeezed the Details control out of the card. */
  .pay-table td.shrink {
    width: auto;
    white-space: normal;
    justify-content: flex-end;
  }
  .pay-table .table-actions { justify-content: flex-end; }
  .pay-table tbody td { gap: var(--space-3); min-width: 0; }
  .pay-table .pay-desc,
  .pay-table .pay-ref,
  .pay-table .pay-invoice { overflow-wrap: anywhere; }

  /* The collapsed card lays each cell out as one flex row, so the three
     description lines were squeezed side by side. Stack them under the
     label instead, right-aligned like every other value in the card. */
  .pay-table td[data-label="Description"] {
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: var(--space-1);
  }
  .pay-table td[data-label="Description"] > .pay-desc {
    flex: 1 1 55%;
    text-align: right;
  }
  .pay-table td[data-label="Description"] > .pay-plan,
  .pay-table td[data-label="Description"] > .pay-invoice {
    flex: 1 1 100%;
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */
.pay-empty p, .pay-methods-empty p { max-width: 52ch; }

.pay-tip { display: inline-flex; max-width: 100%; }
.pay-tip > .btn { max-width: 100%; }

.pay-disabled-hint {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Methods offered at checkout
   -------------------------------------------------------------------------- */
.pay-method-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border-subtle);
}

.pay-legend-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.pay-legend-copy { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pay-legend-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.pay-legend-hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }

/* --------------------------------------------------------------------------
   Billing details
   -------------------------------------------------------------------------- */
.pay-local-note { margin-bottom: var(--space-6); }

.pay-billing-form { margin-top: var(--space-2); }

.pay-billing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-top: var(--space-2);
}

.pay-billing-saved {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
}

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

.pay-entity {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.pay-entity dd { font-size: var(--fs-md); color: var(--text-muted); }