/* Eventro — checkout page. Extends styles.css; tokens come from there. */

.pay-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.pay-copy .section-sub { margin-bottom: 28px; }

.pay-banner {
  border: 1px solid var(--accent);
  background: #fff8e9;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: .95rem;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.pay-banner strong { color: var(--ink); }

.pay-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pay-points li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  align-items: start; color: var(--ink-soft); font-size: .96rem;
}
.pay-points span {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper-alt); border: 1px solid var(--line);
  font-size: .75rem; letter-spacing: .06em; color: var(--brand); font-weight: 600;
}

.pay-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field textarea {
  width: 100%; font: inherit; font-size: .98rem;
  padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); color: var(--ink);
  resize: vertical;
}
.field textarea:focus { border-color: var(--brand); outline: none; }

.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Confirmation */
.pay-done { text-align: center; padding: 12px 0; }
.pay-tick {
  width: 58px; height: 58px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: #e8f7ee; color: #1c7c4a; font-size: 1.7rem;
}
.pay-done h2 { margin: 0 0 6px; }
.pay-ref { color: var(--ink-faint); margin: 0 0 22px; font-size: .95rem; }

.pay-summary { text-align: left; margin: 0 0 24px; display: grid; gap: 0; }
.pay-summary div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.pay-summary dt { color: var(--ink-faint); font-size: .9rem; }
.pay-summary dd {
  margin: 0; font-size: .9rem; text-align: right; word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.pay-summary a { color: var(--brand); }

@media (max-width: 860px) {
  .pay-inner { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}