/* ===== Transactions Page: Alignment + Colorful Theme ===== */
#transactions-page {
  background: linear-gradient(180deg, rgba(79, 172, 254, 0.06) 0%, rgba(0, 242, 254, 0.06) 100%);
  border-radius: var(--card-radius);
}

#transactions-page .page-header {
  text-align: left;
  margin-bottom: var(--space-6);
}

#transactions-page .page-header h2 {
  justify-content: flex-start;
  border: 0;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 40%, #43e97b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Center cards and constrain width for better alignment */
#transactions-page .colorful-card {
  align-self: center;
  max-width: 1100px;
  border-top: 4px solid transparent;
}

/* Force all text left on Transactions page */
#transactions-page .colorful-card.info-card,
#transactions-page .colorful-card .card-header,
#transactions-page .colorful-card .card-body {
  text-align: left;
}

/* Per-section vibrant header gradients */
#transactions-page .tnx-leisure .card-header {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
#transactions-page .tnx-business .card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
#transactions-page .tnx-forms .card-header {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}
#transactions-page .tnx-history .card-header {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
#transactions-page .tnx-forex-cards .card-header {
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}
#transactions-page .tnx-faq .card-header {
  background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
}
#transactions-page .tnx-rbi .card-header {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

/* Accent border color to complement headers */
#transactions-page .tnx-leisure { border-top-color: #4facfe; }
#transactions-page .tnx-business { border-top-color: #667eea; }
#transactions-page .tnx-forms { border-top-color: #f6d365; }
#transactions-page .tnx-history { border-top-color: #43e97b; }
#transactions-page .tnx-forex-cards { border-top-color: #a18cd1; }
#transactions-page .tnx-faq { border-top-color: #f5576c; }
#transactions-page .tnx-rbi { border-top-color: #1e3c72; }

/* Make Forms Download buttons colorful */
#transactions-page .quick-actions-grid .action-btn {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.12) 0%, rgba(0, 242, 254, 0.12) 100%);
  border-color: transparent;
  min-height: 44px; /* better tap target on mobile */
}
#transactions-page .quick-actions-grid .action-btn:hover {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: var(--text-white);
}

/* Readability and list spacing */
#transactions-page p,
#transactions-page li {
  line-height: 1.7;
  overflow-wrap: anywhere;
}
#transactions-page ol,
#transactions-page ul {
  padding-left: 1.25rem;
}
#transactions-page li ul,
#transactions-page li ol {
  margin-top: 0.25rem;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  #transactions-page .colorful-card { max-width: 100%; }
  #transactions-page .page-header h2 {
    font-size: var(--text-xl);
    background: none !important;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--text-primary) !important;
  }
  #transactions-page .card-header { padding: var(--space-4); }
  #transactions-page .card-header h3 { font-size: var(--text-lg); }
  #transactions-page .card-body { padding: var(--space-4); }
  #transactions-page .quick-actions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Slightly reduce margins on compact screens */
  #transactions-page .m-3 { margin: var(--space-2) !important; }
}

/* Tablet and Desktop: two-column only for Required Documents lists */
@media (min-width: 768px) and (max-width: 991px) {
  /* Small tablets/portrait: keep single column for readability */
  #transactions-page .docs-list { column-count: 1; column-gap: var(--space-5); }
  #transactions-page .docs-list > li { break-inside: avoid; padding-right: var(--space-3); }
}
@media (min-width: 992px) and (max-width: 1199px) {
  /* Larger tablets/landscape: use two columns */
  #transactions-page .docs-list { column-count: 2; column-gap: var(--space-6); }
  #transactions-page .docs-list > li { break-inside: avoid; padding-right: var(--space-4); }
}
@media (min-width: 1200px) {
  /* Desktop: keep two columns with a wider gap */
  #transactions-page .docs-list { column-count: 2; column-gap: var(--space-8); }
  #transactions-page .docs-list > li { break-inside: avoid; padding-right: var(--space-4); }
}

@media (min-width: 1440px) {
  /* Very large screens: 3 columns */
  #transactions-page .docs-list { column-count: 3; column-gap: var(--space-10); }
  #transactions-page .docs-list > li { break-inside: avoid; padding-right: var(--space-4); }
}