/* ==============================
   Demo Transactions Styles
   ============================== */
.demo-container {
  padding: 3rem 1rem;
}

.demo-container h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #111827;
}

.demo-table-wrapper {
  overflow-x: auto;
}

.demo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.demo-table th {
  background: #0fd3e1;
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
}

.demo-table th:first-child {
  border-radius: 25px 0 0 25px;
}
.demo-table th:last-child {
  border-radius: 0 25px 25px 0;
}

.demo-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
}

.demo-table .method-icon {
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}

/* Remove link styling inside demo table */
.demo-table a {
  color: inherit;          /* same as parent text */
  text-decoration: none;   /* remove underline */
}

.demo-table a:hover {
  text-decoration: underline; /* optional subtle hover effect */
  color: #0fd3e1;             /* optional hover color */
}


.status {
  font-weight: 600;
}

.status.paid {
  color: #16a34a; /* green-600 */
}

.demo-table tr.faded td {
  color: #374151;   /* normal text color */
  opacity: var(--fade-opacity, 1); /* default full */
}


/* Note text */
.demo-note {
  font-size: 1rem;
  color: #374151;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Button */
.btn-demo {
  display: inline-block;
  padding: 14px 28px;
  background: #0fd3e1;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.1s ease;
}

.btn-demo:hover {
  background: #0fb8c4;
  transform: translateY(-1px);
}

.btn-demo:active {
  transform: translateY(0);
}

.payid {
  display: inline-flex;
  flex-direction: column;
  font-family: monospace; /* keeps alignment */
  font-size: 0.85rem;
  line-height: 1.2;
}

.payid .line {
  display: block;
}


/* Responsive */
@media (max-width: 768px) {
  .demo-table th,
  .demo-table td {
    font-size: 0.85rem;
    padding: 10px 12px;
  }
}