.transactions-page {
  min-height: 100vh;
  background: #fffaf4;
}

.transactions-hero {
  padding: 52px 0 38px;
  background: linear-gradient(
    90deg,
    #fff7ea,
    #f7e4ca
  );
  border-bottom: 1px solid #ead8c1;
}

.transactions-hero h1 {
  color: var(--blue);
  font-family: "Playfair Display", serif;
  font-size: clamp(38px, 4vw, 58px);
  margin-bottom: 12px;
}

.transactions-hero p {
  color: #5a667a;
  font-weight: 650;
}

.transactions-section {
  padding: 34px 0 70px;
}

.transaction-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 26px;
}

.transaction-summary-card {
  background: #ffffff;
  border: 1px solid #ead8c1;
  border-radius: 14px;
  padding: 22px;
}

.transaction-summary-card span {
  display: block;
  color: #667085;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.transaction-summary-card strong {
  color: var(--blue);
  font-size: 30px;
  font-weight: 900;
}

.transaction-summary-card.success {
  border-color: #bfe8cc;
}

.transaction-summary-card.failed {
  border-color: #ecc7ce;
}

.transactions-message {
  background: #ffffff;
  border: 1px solid #ead8c1;
  border-radius: 12px;
  padding: 18px;
  color: #667085;
  font-weight: 800;
}

.transactions-list {
  display: grid;
  gap: 18px;
}

.transaction-card {
  background: #ffffff;
  border: 1px solid #ead8c1;
  border-radius: 14px;
  padding: 22px;
  box-shadow:
    0 12px 28px
    rgba(15, 23, 42, 0.06);
}

.transaction-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.transaction-property {
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 5px;
}

.transaction-card-header small {
  color: #667085;
  font-weight: 700;
}

.transaction-status {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.transaction-status.success {
  background: #effaf3;
  border: 1px solid #bfe8cc;
  color: #0d7a32;
}

.transaction-status.failed {
  background: #fff1f3;
  border: 1px solid #ecc7ce;
  color: #a1122b;
}

.transaction-details {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  gap: 12px;
}

.transaction-details div {
  background: #fffaf4;
  border: 1px solid #f0e1cf;
  border-radius: 10px;
  padding: 13px;
}

.transaction-details span {
  display: block;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 6px;
}

.transaction-details strong {
  display: block;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  word-break: break-word;
}

.failure-reason {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  background: #fff1f3;
  border: 1px solid #ecc7ce;
}

.failure-reason strong {
  color: #a1122b;
  font-size: 12px;
}

.failure-reason p {
  color: #7a2635;
  font-size: 13px;
  margin-top: 5px;
}

@media (max-width: 850px) {
  .transaction-summary-grid {
    grid-template-columns: 1fr;
  }

  .transaction-details {
    grid-template-columns:
      repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .transaction-card-header {
    flex-direction: column;
  }

  .transaction-details {
    grid-template-columns: 1fr;
  }
}