/* TrustPay Africa global stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root {
  --brand-primary:#E54F38;
  --brand-primary-soft:#fff2ef;
  --brand-dark:#14171f;
  --brand-muted:#5f6d7a;
  --brand-surface:#f5f7fb;
  --brand-line:rgba(18,24,38,.08);
  --brand-white:#fff;
  --brand-success:#1fad61;
  --brand-warning:#f59e0b;
  --brand-danger:#dc2626;
  --tp-font-base: 15px;
}

html { font-size:var(--tp-font-base); -webkit-text-size-adjust:100%; }
*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0;
  background:#f3f5f7;
  color:var(--brand-dark);
  font-family:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif;
  font-size:1rem;
  line-height:1.5;
}
button,input,select,textarea { font:inherit; }
a { color:var(--brand-primary); }

.tp-shell { min-height:100vh; display:flex; flex-direction:column; }
.tp-topbar { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.98); backdrop-filter:blur(10px); border-bottom:1px solid var(--brand-line); }
.tp-topbar__inner { width:calc(100% - 18px); margin:0 auto; padding:9px 8px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.tp-brand { display:flex; align-items:center; gap:10px; min-width:170px; font-weight:800; }
.tp-brand__logo { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:linear-gradient(135deg,#feeae4,#fdd7cf); color:var(--brand-primary); font-size:15px; font-weight:800; }
.tp-brand__text { font-size:.96rem; }
.tp-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tp-nav a,.tp-topbar__actions a { color:var(--brand-muted); text-decoration:none; border-radius:9px; font-weight:650; }
.tp-nav a { padding:7px 10px; font-size:.84rem; }
.tp-topbar__actions { display:flex; align-items:center; gap:7px; }
.tp-topbar__actions a { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; font-size:.78rem; }
.tp-nav a:hover,.tp-nav a.active,.tp-topbar__actions a:hover,.tp-topbar__actions a.active { color:var(--brand-primary); background:var(--brand-primary-soft); }
.tp-menu a svg,.tp-topbar__actions a svg { width:14px; height:14px; flex:0 0 auto; stroke-width:2; }
.tp-mobile-toggle { display:none; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--brand-line); border-radius:9px; background:#fff; color:var(--brand-dark); cursor:pointer; }

.tp-container { width:calc(100% - 18px); margin:16px auto 38px; }
.tp-app-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; }
.tp-page { display:grid; grid-template-columns:240px minmax(0,1fr); gap:20px; }
.tp-content { min-width:0; }
.tp-card { background:#fff; border:1px solid var(--brand-line); border-radius:14px; box-shadow:0 6px 18px rgba(15,23,42,.035); }
.tp-section { padding:20px; }

.tp-sidebar { padding:12px 10px; height:fit-content; position:sticky; top:78px; background:#f3f4f6; border:1px solid #e6e8ee; border-radius:14px; }
.tp-sidebar__group { margin-bottom:10px; }
.tp-sidebar__title { margin:7px 9px 9px; color:#7a8798; text-transform:uppercase; font-size:.62rem; font-weight:800; letter-spacing:.08em; }
.tp-menu { display:flex; flex-direction:column; gap:4px; }
.tp-menu a,.tp-menu-details summary { display:flex; align-items:center; padding:8px 10px; border-radius:9px; color:#2d3748; font-size:.82rem; font-weight:650; text-decoration:none; }
.tp-menu a { gap:8px; }
.tp-menu a:hover,.tp-menu a.active { background:var(--brand-primary); color:#fff; }
.tp-menu-details summary { justify-content:space-between; cursor:pointer; list-style:none; }
.tp-menu-details summary::-webkit-details-marker { display:none; }
.tp-menu-details summary::after { content:"+"; color:#94a3b8; font-size:1rem; }
.tp-menu-details[open] summary::after { content:"−"; }
.tp-menu-details summary:hover,.tp-menu-details summary.active { background:var(--brand-primary-soft); color:var(--brand-primary); }
.tp-menu-submenu { display:flex; flex-direction:column; gap:3px; margin:3px 0 0 9px; padding-left:9px; border-left:1px solid var(--brand-line); }
.tp-menu-submenu a { padding:7px 9px; border-radius:7px; color:#64748b; font-size:.76rem; }

.tp-page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:17px; }
.tp-page-heading h1 { margin:0; font-size:1.42rem; font-weight:700; }
.tp-page-heading h2 { font-size:1.13rem; }
.tp-page-heading p { margin:5px 0 0; color:var(--brand-muted); font-size:.88rem; }
.tp-eyebrow { margin:0 0 4px!important; color:var(--brand-primary)!important; font-size:.68rem!important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.tp-muted { color:var(--brand-muted); font-size:.88rem; }

.tp-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:20px; }
.tp-stat { padding:16px 15px; border-radius:13px; border:1px solid var(--brand-line); background:linear-gradient(180deg,#fff 0%,#f8fafc 100%); }
.tp-stat__label { display:block; margin-bottom:8px; color:var(--brand-muted); font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.tp-stat__value { font-size:1.55rem; font-weight:800; line-height:1.05; }
.tp-stat__meta { margin-top:7px; color:var(--brand-success); font-size:.76rem; font-weight:600; }

.table-wrap,.tp-table-wrapper { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tp-table { width:100%; border-collapse:collapse; background:#fff; font-size:.84rem; }
.tp-table th { padding:10px; border-bottom:2px solid var(--brand-line); background:#f8fafc; color:var(--brand-muted); font-size:.65rem; font-weight:800; letter-spacing:.07em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.tp-table td { padding:10px; border-bottom:1px solid var(--brand-line); text-align:left; vertical-align:middle; }
.tp-table tbody tr:hover { background:#fafbfc; }
.tp-table a { color:var(--brand-primary); font-weight:650; text-decoration:none; }
.tp-table a:hover { text-decoration:underline; }
.tp-table code { font-size:.78rem; }

.tp-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:7px 13px; border:1px solid transparent; border-radius:9px; background:var(--brand-primary); color:#fff; font-size:.8rem; font-weight:750; line-height:1.2; text-decoration:none; cursor:pointer; }
.tp-btn:hover { opacity:.95; text-decoration:none; }
.tp-btn--primary { background:var(--brand-primary); color:#fff; }
.tp-btn--secondary { background:#fff; border-color:var(--brand-line); color:var(--brand-dark); }
.tp-btn svg { width:14px; height:14px; }

.tp-badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:.68rem; font-weight:750; line-height:1.25; }
.tp-badge--success { background:rgba(31,173,97,.12); color:var(--brand-success); }
.tp-badge--warning { background:rgba(245,158,11,.12); color:var(--brand-warning); }
.tp-badge--danger { background:rgba(229,79,56,.12); color:var(--brand-primary); }
.tp-badge--neutral { background:rgba(95,109,122,.12); color:var(--brand-muted); }

.tp-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.tp-field { min-width:0; }
.tp-field--wide { grid-column:1/-1; }
.tp-field label { display:block; margin-bottom:6px; color:var(--brand-muted); font-size:.75rem; font-weight:750; }
.tp-field input,.tp-field select,.tp-field textarea { width:100%; min-height:38px; padding:9px 11px; border:1px solid rgba(15,23,42,.12); border-radius:9px; background:#fff; color:var(--brand-dark); font-size:.84rem; outline:none; }
.tp-field textarea { min-height:100px; resize:vertical; }
.tp-field input:focus,.tp-field select:focus,.tp-field textarea:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(229,79,56,.10); }
.tp-form-error { margin-top:5px; color:var(--brand-danger); font-size:.76rem; }
.tp-check-row { display:flex; align-items:center; gap:7px; color:#334155; font-size:.82rem; }

.tp-requirements-filter,.payments-filter { display:grid; gap:11px; align-items:end; margin-bottom:18px; padding:14px; background:#f8fafc; border:1px solid var(--brand-line); border-radius:11px; }
.tp-requirements-filter { grid-template-columns:repeat(5,minmax(0,1fr)) auto; }
.tp-requirements-filter label,.payments-filter label { display:flex; flex-direction:column; gap:5px; min-width:0; }
.tp-requirements-filter label span,.payments-filter label span { color:var(--brand-muted); font-size:.65rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.tp-requirements-filter input,.tp-requirements-filter select,.payments-filter input,.payments-filter select { width:100%; min-width:0; min-height:38px; padding:8px 10px; border:1px solid rgba(15,23,42,.12); border-radius:8px; background:#fff; color:var(--brand-dark); font-size:.8rem; }
.tp-requirements-filter__actions,.payments-filter__actions { display:flex; gap:7px; }

.tp-split-form { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.6fr); gap:14px; align-items:start; }
.tp-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 17px; border-bottom:1px solid var(--brand-line); color:#536579; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.tp-panel-body { padding:17px; }
.tp-panel-actions { display:flex; gap:8px; padding:13px 17px; border-top:1px solid var(--brand-line); background:#f8fafc; }

dl { margin:0; }
dt { color:var(--brand-muted); font-size:.72rem; font-weight:800; }
dd { margin:4px 0 12px; font-size:.88rem; }

.transaction-workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.transaction-workspace .workspace-panel {
  padding: 20px !important;
}

.transaction-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.transaction-header h1 {
  margin: 8px 0 10px;
  color: var(--brand-dark);
  font-size: 1.70rem;
  line-height: 1.2;
}

.transaction-eyebrow {
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.transaction-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--brand-muted);
  font-size: .82rem;
}

.transaction-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.transaction-meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 8px;
  background: var(--brand-line);
}

.transaction-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.transaction-summary__item {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--brand-line);
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.transaction-summary__label {
  display: block;
  margin-bottom: 6px;
  color: var(--brand-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.transaction-summary__value {
  display: block;
  color: var(--brand-dark);
  font-size: 1.04rem;
  font-weight: 800;
}

.workspace-panel__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--brand-line);
  margin-bottom: 12px;
}

.workspace-panel__heading h2 {
  margin: 0 0 4px;
  color: var(--brand-dark);
  font-size: 1rem;
}

.workspace-panel__heading p.section-note {
  margin: 0;
  color: var(--brand-muted);
  font-size: .82rem;
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.detail-grid .detail-item {
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--brand-line);
}

.detail-grid .detail-item:nth-child(5) {
  grid-column: 1 / -1;
}

.detail-item dt {
  color: var(--brand-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.detail-item dd {
  margin: 4px 0 0;
  color: var(--brand-dark);
  font-size: .88rem;
  line-height: 1.55;
}

.workflow-timeline-section {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid var(--brand-line);
  box-shadow: none;
}

.workflow-timeline-section .workspace-panel__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--brand-line);
}

.workflow-timeline-section .workspace-panel__heading h2 {
  margin: 0 0 4px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--brand-dark);
}

.workflow-timeline-section .section-note {
  margin: 0;
  color: var(--brand-muted);
  font-size: .84rem;
}

.workflow-progress-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  flex-wrap: nowrap;
}

.workflow-progress-mini__caption {
  color: var(--brand-muted);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.workflow-progress-mini__bar {
  width: 120px;
  height: 8px;
  border-radius: 99px;
  background: var(--brand-line);
  display: inline-flex;
  overflow: hidden;
}

.workflow-progress-mini__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-success);
}

.workflow-progress-mini__percent {
  color: var(--brand-dark);
  font-size: .78rem;
  font-weight: 800;
}

.workflow-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 20px 14px;
  background: #fff;
}

.workflow-timeline::before {
  content: "";
  position: absolute;
    left: 40px;
    top: 32px;
    bottom: 32px;
  width: 2px;
    transform: translateX(-50%);
  background: var(--brand-line);
}

.workflow-timeline-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.workflow-timeline-marker {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.workflow-marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--brand-line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .98rem;
  font-weight: 900;
  color: var(--brand-muted);
}

.workflow-marker--done {
  color: #fff;
  background: var(--brand-success);
  border-color: var(--brand-success);
}

.workflow-marker--active {
  color: #fff;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.workflow-marker--pending {
  color: var(--brand-muted);
  background: #fff;
  border-color: var(--brand-line);
}

.workflow-timeline-card {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--brand-line);
  background: #fff;
  box-shadow: none;
  padding: 0;
}

.workflow-timeline-card--current {
  border-color: var(--brand-primary);
  background: #eef7ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .08);
}

.workflow-timeline-card--pending {
  background: #fff;
  border-color: var(--brand-line);
}

.workflow-timeline-card--completed {
  background: #f7faf8;
}

.workflow-timeline-card__body {
  display: flex;
  align-items: center;
  padding: 14px 16px;
}

.workflow-timeline-card__main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.workflow-timeline-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef2f5;
  border: 1px solid var(--brand-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.workflow-timeline-card--completed .workflow-timeline-card__icon {
  background: var(--brand-success);
  border-color: var(--brand-success);
}

.workflow-timeline-card--current .workflow-timeline-card__icon {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.workflow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: .84rem;
  font-weight: 900;
  color: #fff;
}

.workflow-icon--done {
  color: #fff;
}

.workflow-icon--current {
  color: #fff;
  background: var(--brand-primary);
}

.workflow-icon--pending {
  color: var(--brand-muted);
  background: #fff;
  border-radius: 50%;
}

.workflow-timeline-card__content {
  flex: 1;
  min-width: 0;
}

.workflow-timeline-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-timeline-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--brand-dark);
  font-size: .95rem;
  font-weight: 800;
}

.workflow-step-number {
  color: var(--brand-primary);
  font-weight: 800;
}

.workflow-step-label {
  color: var(--brand-dark);
}

.workflow-current-label {
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
  border-radius: 99px;
  padding: 4px 8px;
  font-size: .72rem;
  font-weight: 800;
  margin-left: 4px;
}

.workflow-timeline-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.workflow-timeline-card__badge {
  border-radius: 99px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 800;
  border: 1px solid transparent;
}

.workflow-timeline-card__badge--completed {
  color: var(--brand-success);
  background: rgba(31,173,97,.10);
  border-color: rgba(31,173,97,.25);
}

.workflow-timeline-card__badge--current {
  color: var(--brand-primary);
  background: rgba(37, 99, 235, .08);
  border-color: var(--brand-primary);
}

.workflow-timeline-card__badge--pending {
  color: var(--brand-muted);
  background: #f8fafc;
  border-color: var(--brand-line);
}

.workflow-timeline-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-muted);
  font-size: 1.2rem;
  font-weight: 700;
}

.workflow-timeline-card__bottom {
  margin-top: 8px;
}

.workflow-timeline-card__description {
  display: block;
  color: var(--brand-muted);
  font-size: .82rem;
}

.workflow-timeline-card--current .workflow-timeline-card__description {
  color: var(--brand-primary);
}

.workflow-timeline-card--current .workflow-timeline-card__actions {
  color: var(--brand-primary);
}

.workflow-timeline-card--current .workflow-timeline-card__badge {
  color: var(--brand-primary);
  background: #eaf5ff;
}

@media (max-width: 768px) {
  .workflow-timeline-section .workspace-panel__heading,
  .workflow-timeline-card__top {
    flex-wrap: wrap;
  }

  .workflow-timeline-card__main {
    align-items: flex-start;
  }

  .workflow-timeline-card__actions {
    align-self: flex-end;
  }

  .workflow-timeline-card__body {
    padding: 12px 14px;
  }

  .workflow-progress-mini {
    width: 100%;
    justify-content: flex-start;
  }
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.table-wrap .tp-table {
  min-width: 100%;
}

.activity-label {
  display: block;
  color: var(--brand-dark);
  font-weight: 800;
}

.activity-code {
  display: block;
  color: var(--brand-muted);
  font-size: .72rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-weight: 700;
}

.tp-pagination { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:18px; font-size:.8rem; }
.tp-pagination a { padding:7px 10px; border:1px solid var(--brand-line); border-radius:8px; background:#fff; color:var(--brand-dark); text-decoration:none; }

.transaction-header h1 { font-size:1.45rem!important; }
.transaction-meta { font-size:.8rem!important; }
.transaction-summary__value { font-size:1.05rem!important; }
.workspace-panel { padding:18px!important; }
.workspace-panel h2 { font-size:1rem!important; }
.section-note { font-size:.8rem!important; }
.detail-item dt { font-size:.68rem!important; }
.detail-item dd { font-size:.84rem; }
.workflow-step__label { font-size:.84rem; }
.workflow-step__meta { font-size:.72rem!important; }

.audit-page-title { font-size:1.42rem!important; }
.audit-page-subtitle,.audit-table td { font-size:.82rem!important; }
.audit-table th,.audit-field label { font-size:.66rem!important; }
.audit-field input,.audit-field select { height:38px!important; font-size:.8rem!important; }
.audit-actions .tp-btn { min-height:38px!important; }

@media (max-width:980px) {
  .tp-app-layout,.tp-page { grid-template-columns:1fr; }
  .tp-sidebar { position:static; }
  .tp-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tp-split-form { grid-template-columns:1fr; }
  .tp-topbar__inner { flex-wrap:wrap; }
  .tp-requirements-filter { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tp-requirements-filter__actions { grid-column:1/-1; }
}

@media (max-width:640px) {
  html { font-size:14px; }
  .tp-summary-grid,.tp-form-grid { grid-template-columns:1fr; }
  .tp-nav { display:none; }
  .tp-mobile-toggle { display:inline-flex; }
  .tp-container { width:calc(100% - 16px); margin-top:14px; }
  .tp-section { padding:16px; }
  .tp-sidebar { display:none; padding:11px; }
  .tp-sidebar.is-open { display:block; }
  .tp-page-heading { align-items:flex-start; flex-direction:column; }
  .tp-requirements-filter,.payments-filter { grid-template-columns:1fr; }
  .tp-requirements-filter__actions,.payments-filter__actions { grid-column:auto; width:100%; }
  .tp-permission-list { grid-template-columns:1fr; }
  .tp-table { min-width:520px; font-size:.82rem; }
  .tp-table th { padding:9px 8px; font-size:.62rem; }
  .tp-table td { padding:9px 8px; }
}

/* =========================================================
   TRUSTPAY NOTIFICATION DROPDOWN
   ========================================================= */

.tp-notification-menu {
    position: relative;
}

/* Remove native details marker */
.tp-notification-menu > summary {
    list-style: none;
}

.tp-notification-menu > summary::-webkit-details-marker {
    display: none;
}

/* Bell button */
.tp-notification-trigger {
    position: relative;

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;
    color: #475569;

    cursor: pointer;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.tp-notification-trigger:hover,
.tp-notification-menu[open] .tp-notification-trigger {
    background: #f8fafc;
    border-color: var(--brand-line);
    color: var(--brand-primary);
}

.tp-notification-trigger svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.9;
}


/* Unread count */
.tp-notification-badge {
    position: absolute;

    top: 1px;
    right: 1px;

    min-width: 16px;
    height: 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border: 2px solid #fff;
    border-radius: 999px;

    background: var(--brand-primary);
    color: #fff;

    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
}


/* Floating panel */
.tp-notification-panel {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    z-index: 1000;

    width: 360px;
    max-width: calc(100vw - 24px);

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 14px;

    box-shadow:
        0 20px 45px rgba(15, 23, 42, .12),
        0 4px 12px rgba(15, 23, 42, .05);
}


/* Dropdown header */
.tp-notification-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 14px 16px;

    border-bottom: 1px solid var(--brand-line);

    background: #fff;
}

.tp-notification-panel__header strong {
    color: #172033;

    font-size: .9rem;
    font-weight: 800;
}

.tp-notification-panel__header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-notification-panel__header a,
.tp-notification-panel__header button {
    padding: 0;

    border: 0;
    background: transparent;

    color: var(--brand-primary);

    font: inherit;
    font-size: .72rem;
    font-weight: 750;

    text-decoration: none;
    cursor: pointer;
}

.tp-notification-panel__header a:hover,
.tp-notification-panel__header button:hover {
    text-decoration: underline;
}


/* Individual notification */
.tp-notification-item {
    display: block;

    padding: 13px 16px;

    border-bottom: 1px solid #f0f2f5;

    color: var(--brand-dark);
    text-decoration: none;

    transition: background-color .15s ease;
}

.tp-notification-item:last-of-type {
    border-bottom: 0;
}

.tp-notification-item:hover {
    background: #f8fafc;
    text-decoration: none;
}

.tp-notification-item--unread {
    background: #fff8f6;
}

.tp-notification-item--unread:hover {
    background: #fff3ef;
}


/* Notification title */
.tp-notification-item__title {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #172033;

    font-size: .8rem;
    font-weight: 750;
}


/* Unread dot */
.tp-notification-item__dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--brand-primary);
}


/* Notification message */
.tp-notification-item__message {
    display: block;

    margin-top: 4px;

    color: #64748b;

    font-size: .74rem;
    line-height: 1.45;
}


/* Notification time */
.tp-notification-item__time {
    display: block;

    margin-top: 6px;

    color: #94a3b8;

    font-size: .65rem;
    font-weight: 600;
}


/* Empty state */
.tp-notification-empty {
    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 28px 20px;

    color: #64748b;

    font-size: .78rem;
    text-align: center;
}

.tp-notification-empty::before {
    content: "✓";

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    border-radius: 50%;

    background: #ecfdf3;
    color: #16a34a;

    font-size: 1rem;
    font-weight: 900;
}


/* Mobile */
@media (max-width: 640px) {

    .tp-notification-panel {
        position: fixed;

        top: 64px;
        right: 8px;
        left: 8px;

        width: auto;
        max-width: none;
    }

}

/* =========================================================
   SETTINGS PAGE
   ========================================================= */

.tp-settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.tp-settings-nav {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.tp-settings-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--brand-muted);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
}

.tp-settings-nav a.active,
.tp-settings-nav a:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.tp-settings-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tp-settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.tp-settings-heading h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.tp-settings-heading i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.tp-settings-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.tp-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  background: #f8fafc;
}

.tp-settings-row--space {
  margin-bottom: 14px;
}

.tp-settings-row--split {
  padding: 12px 16px;
}

.tp-settings-divider {
  height: 1px;
  margin: 18px 0;
  background: var(--brand-line);
}

.tp-settings-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tp-settings-block h3 {
  margin: 0;
  font-size: 1rem;
}

.tp-settings-block__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.tp-settings-block__heading .tp-btn {
    flex: 0 0 auto;
}

.tp-inline-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tp-inline-form--compact {
  margin-left: auto;
}

.tp-form-grid--compact {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.tp-list-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tp-list-stack--tight {
  margin-top: 6px;
}

.tp-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
}

.tp-row-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-dark);
}

.tp-stack-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tp-api-key-box {
  padding: 16px;
  border: 1px solid rgba(229,79,56,.18);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff8f6 0%, #fff 100%);
}

.tp-api-key-box strong {
  display: block;
  margin-bottom: 8px;
}

.tp-api-key-box p {
  margin: 0;
  color: var(--brand-dark);
  font-size: .82rem;
  word-break: break-all;
  font-family: "JetBrains Mono", Consolas, monospace;
}

.tp-api-key-box__value {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tp-api-key-box__value .tp-btn {
    flex: 0 0 auto;
}

.tp-settings-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

@media (max-width: 980px) {
  .tp-settings-layout {
    grid-template-columns: 1fr;
  }

  .tp-settings-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .tp-settings-checks,
  .tp-form-grid--compact,
  .tp-row-card {
    grid-template-columns: 1fr;
    display: grid;
  }

  .tp-row-card {
    align-items: flex-start;
  }

  .tp-stack-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .tp-settings-row,
  .tp-settings-row--split {
    flex-direction: column;
    align-items: flex-start;
  }

    .tp-settings-block__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tp-api-key-box__value {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   CHECKBOX / TOGGLE FIELDS
   ========================================================= */

.tp-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    margin: 0;

    border-radius: 5px;
    accent-color: var(--brand-primary);

    cursor: pointer;
    box-shadow: none;
}

.tp-field input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(229, 79, 56, .10);
}

/* Django checkbox field */
.tp-field:has(input[type="checkbox"]) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.tp-field:has(input[type="checkbox"]) > label {
    margin-bottom: 10px;
}

.tp-field:has(input[type="checkbox"]) input[type="checkbox"] {
    align-self: flex-start;
}

/* =========================================================
   ADMIN AUDIT CONSOLE
   ========================================================= */

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

.audit-page-title {
    margin: 0;
    color: var(--brand-dark);
    font-size: 1.42rem;
    font-weight: 750;
    line-height: 1.25;
}

.audit-page-subtitle {
    margin: 6px 0 0;
    color: var(--brand-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}


/* Main audit card */
.audit-panel {
    width: 100%;
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--brand-line);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
}


/* =========================================================
   FILTERS
   ========================================================= */

.audit-filters {
    width: 100%;

    display: grid;
    grid-template-columns:
        minmax(200px, 1.2fr)
        minmax(170px, .8fr)
        minmax(210px, 1fr)
        auto;

    gap: 12px;
    align-items: end;

    margin-bottom: 20px;
    padding: 14px;

    background: #f8fafc;
    border: 1px solid var(--brand-line);
    border-radius: 11px;
}

.audit-field {
    min-width: 0;
}

.audit-field label {
    display: block;
    margin-bottom: 6px;

    color: var(--brand-muted);

    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .06em;

    text-transform: uppercase;
}

.audit-field input,
.audit-field select {
    width: 100%;
    height: 38px;

    padding: 0 10px;

    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 8px;

    background: #fff;
    color: var(--brand-dark);

    font: inherit;
    font-size: .8rem;

    outline: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.audit-field input::placeholder {
    color: #94a3b8;
}

.audit-field input:focus,
.audit-field select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(229, 79, 56, .10);
}


/* Filter buttons */
.audit-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.audit-actions .tp-btn {
    min-height: 38px;
    height: 38px;
    padding: 0 14px;
    white-space: nowrap;
}


/* =========================================================
   TABLE
   ========================================================= */

.audit-table-wrapper {
    width: 100%;
    overflow-x: auto;

    border: 1px solid var(--brand-line);
    border-radius: 10px;

    background: #fff;
}

.audit-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;

    background: #fff;

    font-size: .82rem;
}

.audit-table thead {
    background: #f8fafc;
}

.audit-table th {
    padding: 10px 11px;

    border-bottom: 2px solid var(--brand-line);

    color: var(--brand-muted);

    font-size: .64rem;
    font-weight: 800;

    letter-spacing: .07em;
    text-transform: uppercase;

    text-align: left;
    white-space: nowrap;
}

.audit-table td {
    padding: 11px;

    border-bottom: 1px solid var(--brand-line);

    color: var(--brand-dark);

    font-size: .81rem;
    line-height: 1.4;

    text-align: left;
    vertical-align: middle;
}

.audit-table tbody tr:last-child td {
    border-bottom: 0;
}

.audit-table tbody tr {
    transition: background-color .15s ease;
}

.audit-table tbody tr:hover {
    background: #fafbfc;
}


/* =========================================================
   TABLE CELL STYLES
   ========================================================= */

.audit-timestamp {
    color: #475569;
    white-space: nowrap;
    font-size: .77rem !important;
}

.audit-actor {
    color: #1e293b;
    font-weight: 700;
}

.audit-system {
    color: #94a3b8;
}

.audit-target-id {
    color: #475569;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: .75rem !important;

    word-break: break-word;
}


/* Action badge */
.audit-action-badge {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border-radius: 6px;

    background: #f1f5f9;
    color: #334155;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: .69rem;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   DETAILS EXPANDER
   ========================================================= */

.audit-details {
    position: relative;
}

.audit-details summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: var(--brand-primary);

    font-size: .73rem;
    font-weight: 750;

    cursor: pointer;
    list-style: none;
}

.audit-details summary::-webkit-details-marker {
    display: none;
}

.audit-details summary::before {
    content: "›";

    display: inline-block;

    color: var(--brand-primary);

    font-size: 1rem;
    font-weight: 800;

    transition: transform .15s ease;
}

.audit-details[open] summary::before {
    transform: rotate(90deg);
}

.audit-details pre {
    max-width: 520px;

    margin: 9px 0 0;
    padding: 10px 11px;

    overflow-x: auto;

    border: 1px solid var(--brand-line);
    border-radius: 8px;

    background: #f8fafc;
    color: #334155;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: .68rem;
    line-height: 1.5;

    white-space: pre-wrap;
    word-break: break-word;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.audit-pagination {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 7px;
    flex-wrap: wrap;

    margin-top: 18px;
}

.audit-pagination .tp-btn {
    min-height: 34px;
    padding: 6px 11px;

    font-size: .75rem;
}

.audit-page-status {
    padding: 6px 9px;

    color: var(--brand-muted);

    font-size: .77rem;
    font-weight: 600;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.audit-empty {
    min-height: 160px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    color: var(--brand-muted);

    font-size: .82rem;
    text-align: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .audit-filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .audit-actions {
        grid-column: 1 / -1;
    }

}


@media (max-width: 640px) {

    .audit-page-header {
        flex-direction: column;
    }

    .audit-panel {
        padding: 16px;
    }

    .audit-filters {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .audit-actions {
        grid-column: auto;
        width: 100%;
    }

    .audit-actions .tp-btn {
        flex: 1;
    }

    .audit-table {
        min-width: 760px;
    }

}

/* ==========================================================================
   TRUSTPAY AFRICA — PREMIUM UI REFRESH
   Append-only override layer
   ========================================================================== */

:root {
    --tp-font-base: 15px;

    --brand-primary: #E9553D;
    --brand-primary-hover: #D94731;
    --brand-primary-soft: #FFF3F0;

    --brand-dark: #101828;
    --brand-muted: #667085;
    --brand-surface: #F6F8FB;
    --brand-line: #E7EAF0;
    --brand-white: #FFFFFF;

    --tp-navy: #172033;
    --tp-slate: #475467;
    --tp-soft: #F8FAFC;

    --tp-radius-sm: 9px;
    --tp-radius-md: 13px;
    --tp-radius-lg: 17px;

    --tp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .03), 0 4px 12px rgba(16, 24, 40, .04);
    --tp-shadow-md: 0 8px 28px rgba(16, 24, 40, .07);
    --tp-shadow-float: 0 18px 48px rgba(16, 24, 40, .12);
}

html {
    font-size: var(--tp-font-base);
}

body,
button,
input,
select,
textarea {
    font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
}

body {
    background:
        radial-gradient(circle at 78% -10%, rgba(229, 79, 56, .045), transparent 24rem),
        #F4F6F8;
    color: var(--brand-dark);
    letter-spacing: -.006em;
}

/* ---------- Topbar ---------- */

.tp-topbar {
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid rgba(16,24,40,.07);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.tp-topbar__inner {
    min-height: 60px;
    padding: 9px 12px;
}

.tp-brand__logo {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(145deg, #FFF0EC, #FFE0D9);
    box-shadow: inset 0 0 0 1px rgba(229,79,56,.11);
}

.tp-brand__text {
    color: #111827;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.tp-topbar__actions a {
    color: #536174;
    font-weight: 700;
}

.tp-topbar__actions a:hover,
.tp-topbar__actions a.active {
    background: #F8FAFC;
    color: var(--brand-primary);
}

/* ---------- Layout ---------- */

.tp-container {
    width: calc(100% - 22px);
    margin-top: 18px;
}

.tp-app-layout {
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 18px;
}

/* ---------- Sidebar ---------- */

.tp-sidebar {
    top: 80px;
    padding: 15px 11px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.76), rgba(248,250,252,.92));
    border: 1px solid rgba(16,24,40,.07);
    border-radius: 16px;
    box-shadow: var(--tp-shadow-sm);
}

.tp-sidebar__title {
    margin: 8px 10px 10px;
    color: #98A2B3;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .115em;
}

.tp-menu {
    gap: 5px;
}

.tp-menu a,
.tp-menu-details summary {
    min-height: 37px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #344054;
    font-size: .80rem;
    font-weight: 700;
    transition:
        background-color .16s ease,
        color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.tp-menu a svg,
.tp-menu-details summary svg {
    color: #667085;
}

.tp-menu a:hover {
    background: #F2F4F7;
    color: #111827;
    transform: translateX(1px);
}

.tp-menu a:hover svg {
    color: var(--brand-primary);
}

.tp-menu a.active {
    background: linear-gradient(135deg, #EF5B43, #E54F38);
    color: #fff;
    box-shadow: 0 7px 18px rgba(229,79,56,.19);
}

.tp-menu a.active svg {
    color: #fff;
}

.tp-menu-details summary:hover,
.tp-menu-details summary.active {
    background: #FFF2EF;
    color: var(--brand-primary);
}

.tp-menu-submenu {
    margin-top: 5px;
    padding-left: 11px;
    border-left-color: #E4E7EC;
}

.tp-menu-submenu a {
    min-height: 32px;
    padding: 6px 9px;
    color: #667085;
    font-size: .73rem;
}

.tp-menu-submenu a.active {
    background: #FFF2EF;
    color: var(--brand-primary);
    box-shadow: none;
}

/* ---------- Typography ---------- */

.tp-page-heading {
    margin-bottom: 20px;
}

.tp-page-heading h1,
.audit-page-title {
    color: #101828;
    font-size: 1.52rem !important;
    font-weight: 800 !important;
    letter-spacing: -.035em;
}

.tp-page-heading h2 {
    font-weight: 800;
    letter-spacing: -.025em;
}

.tp-page-heading p,
.audit-page-subtitle {
    color: #667085;
    font-size: .84rem !important;
    line-height: 1.6;
}

.tp-eyebrow {
    color: #C9422E !important;
    font-weight: 800;
    letter-spacing: .10em;
}

.tp-muted {
    color: #667085;
}

/* ---------- Cards ---------- */

.tp-card,
.audit-panel {
    border: 1px solid rgba(16,24,40,.07);
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: var(--tp-shadow-sm);
}

.tp-section {
    padding: 22px;
}

.tp-card:hover {
    border-color: rgba(16,24,40,.09);
}

/* ---------- Stats ---------- */

.tp-summary-grid {
    gap: 14px;
}

.tp-stat {
    position: relative;
    overflow: hidden;
    padding: 18px 17px;
    border: 1px solid #EAECF0;
    border-radius: 14px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
}

.tp-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--brand-primary), #F79076);
    opacity: .82;
}

.tp-stat__label {
    color: #7B8798;
    font-size: .62rem;
    letter-spacing: .09em;
}

.tp-stat__value {
    color: #101828;
    font-size: 1.62rem;
    letter-spacing: -.035em;
}

/* ---------- Buttons ---------- */

.tp-btn {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EF5B43, #E54F38);
    box-shadow: 0 4px 10px rgba(229,79,56,.14);
    font-size: .78rem;
    font-weight: 800;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.tp-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(229,79,56,.18);
}

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

.tp-btn--secondary {
    background: #fff;
    border-color: #E4E7EC;
    color: #344054;
    box-shadow: 0 1px 2px rgba(16,24,40,.03);
}

.tp-btn--secondary:hover {
    background: #F8FAFC;
    border-color: #D0D5DD;
    box-shadow: 0 3px 8px rgba(16,24,40,.05);
}

/* ---------- Form fields ---------- */

.tp-field label,
.audit-field label,
.tp-requirements-filter label span,
.payments-filter label span {
    color: #475467;
    font-weight: 800;
}

.tp-field input,
.tp-field select,
.tp-field textarea,
.audit-field input,
.audit-field select,
.tp-requirements-filter input,
.tp-requirements-filter select,
.payments-filter input,
.payments-filter select {
    border-color: #DDE2E8;
    background: #fff;
    color: #101828;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.015);
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background-color .16s ease;
}

.tp-field input:hover,
.tp-field select:hover,
.tp-field textarea:hover,
.audit-field input:hover,
.audit-field select:hover {
    border-color: #C9D0D9;
}

.tp-field input:focus,
.tp-field select:focus,
.tp-field textarea:focus,
.audit-field input:focus,
.audit-field select:focus {
    border-color: #EE7A66;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(229,79,56,.09);
}

.tp-field input::placeholder,
.audit-field input::placeholder {
    color: #A3ADBC;
}

.contract-hero__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.contract-document {
    background: #fff;
    border-top: 4px solid var(--brand-primary);
}

.contract-layout {
    grid-template-columns: minmax(0, 1.75fr) minmax(250px, .85fr);
}

.contract-document__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--brand-line);
}

.contract-document__heading h2 {
    margin-bottom: 0;
}

.contract-parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0;
}

.contract-parties div {
    padding: 12px;
    background: #f8fafc;
    border: 1px solid var(--brand-line);
    border-radius: 8px;
}

.contract-parties dt {
    color: var(--brand-muted);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.contract-parties dd {
    margin-top: 4px;
    font-weight: 700;
}

.contract-terms {
    white-space: pre-line;
    line-height: 1.8;
    padding-top: 20px;
    border-top: 1px solid var(--brand-line);
}

.contract-additional-terms {
    margin-top: 26px;
    padding: 18px;
    border: 1px dashed #b8d8d1;
    border-radius: 12px;
    background: #f4faf8;
}

.contract-additional-terms > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    cursor: pointer;
}

.contract-additional-terms > summary::-webkit-details-marker {
    display: none;
}

.contract-additional-terms > summary span:first-child {
    display: grid;
    gap: 4px;
}

.contract-additional-terms > summary small {
    color: var(--brand-muted);
    font-size: .78rem;
    font-weight: 500;
}

.contract-additional-terms__button {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #b8d8d1;
    border-radius: 9px;
    background: #fff;
    color: var(--tp-ink);
    font-size: .76rem;
    font-weight: 800;
}

.contract-additional-terms > summary:hover .contract-additional-terms__button {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.contract-additional-terms--locked {
    display: none;
}


.contract-additional-terms h3 {
    margin: 0 0 4px;
    color: var(--tp-ink);
    font-size: .98rem;
}

.contract-additional-terms p {
    margin: 0 0 12px;
    color: var(--brand-muted);
    font-size: .78rem;
}

.contract-additional-terms textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    margin-bottom: 10px;
    padding: 11px;
    border: 1px solid #c9e0db;
    border-radius: 9px;
    background: #fff;
    color: var(--tp-ink);
    resize: vertical;
}

.contract-additional-terms textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(216, 95, 67, .12);
}

.contract-terms--additional {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

.contract-signatures .contract-signature {
    padding: 16px 0;
    border-bottom: 1px solid var(--brand-line);
}

@media (max-width: 720px) {
    .contract-hero__actions,
    .contract-hero__actions .tp-btn {
        width: 100%;
    }

    .contract-parties {
        grid-template-columns: 1fr;
    }
}

/* ---------- Filter bars ---------- */

.tp-requirements-filter,
.payments-filter,
.audit-filters {
    padding: 15px;
    background:
        linear-gradient(180deg, #FAFBFC 0%, #F7F9FB 100%);
    border: 1px solid #EAECF0;
    border-radius: 13px;
}

/* ---------- Tables ---------- */

.table-wrap,
.tp-table-wrapper,
.audit-table-wrapper {
    border: 1px solid #EAECF0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.tp-table,
.audit-table {
    background: transparent;
}

.tp-table thead,
.audit-table thead {
    background: #F8FAFC;
}

.tp-table th,
.audit-table th {
    padding: 11px 12px;
    border-bottom: 1px solid #E4E7EC;
    background: #F8FAFC;
    color: #667085;
    font-size: .62rem !important;
    font-weight: 800;
    letter-spacing: .08em;
}

.tp-table td,
.audit-table td {
    padding: 12px !important;
    border-bottom: 1px solid #F0F2F5;
    color: #344054;
    font-size: .80rem !important;
}

.tp-table tbody tr,
.audit-table tbody tr {
    transition: background-color .13s ease;
}

.tp-table tbody tr:hover,
.audit-table tbody tr:hover {
    background: #FCFCFD;
}

.tp-table tbody tr:last-child td,
.audit-table tbody tr:last-child td {
    border-bottom: 0;
}

.tp-table a {
    color: #D94B36;
    font-weight: 750;
}

/* ---------- Badges ---------- */

.tp-badge {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .005em;
}

.tp-badge--success {
    background: #ECFDF3;
    color: #067647;
}

.tp-badge--warning {
    background: #FFFAEB;
    color: #B54708;
}

.tp-badge--danger {
    background: #FFF1F0;
    color: #D92D20;
}

.tp-badge--neutral {
    background: #F2F4F7;
    color: #475467;
}

/* ---------- Audit console ---------- */

.audit-page-header {
    margin-bottom: 20px;
}

.audit-panel {
    padding: 22px;
}

.audit-action-badge {
    padding: 5px 8px;
    border: 1px solid #E4E7EC;
    border-radius: 7px;
    background: #F8FAFC;
    color: #344054;
    font-size: .66rem;
    font-weight: 700;
}

.audit-timestamp {
    color: #667085;
}

.audit-actor {
    color: #101828;
    font-weight: 750;
}

.audit-details summary {
    color: #D94B36;
    font-weight: 800;
}

.audit-details pre {
    border-color: #EAECF0;
    background: #F8FAFC;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.02);
}

/* ---------- Notification dropdown ---------- */

.tp-notification-trigger {
    border-radius: 10px;
}

.tp-notification-trigger:hover,
.tp-notification-menu[open] .tp-notification-trigger {
    border-color: #EAECF0;
    background: #F8FAFC;
}

.tp-notification-panel {
    border-color: #EAECF0;
    border-radius: 15px;
    box-shadow: var(--tp-shadow-float);
}

/* ---------- Settings and general content ---------- */

.tp-settings-heading h2,
.workspace-panel h2 {
    color: #101828;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

.section-note {
    color: #7A8699 !important;
}

/* ---------- Selection ---------- */

::selection {
    background: rgba(229,79,56,.18);
    color: #101828;
}

/* ---------- Scrollbars ---------- */

* {
    scrollbar-width: thin;
    scrollbar-color: #CBD2DC transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: #CBD2DC;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #98A2B3;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ---------- Responsive refinements ---------- */

@media (max-width: 980px) {
    .tp-app-layout {
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .tp-container {
        width: calc(100% - 14px);
    }

    .tp-card,
    .audit-panel {
        border-radius: 13px;
    }

    .tp-section,
    .audit-panel {
        padding: 16px;
    }

    .tp-page-heading h1,
    .audit-page-title {
        font-size: 1.38rem !important;
    }
}

/* ==========================================================================
   TRUSTPAY AFRICA — FINAL READABILITY LAYER
   Keep this section last so older compact rules cannot shrink the interface.
   ========================================================================== */

:root {
    --tp-font-base: 15px;
}

html {
    font-size: 15px !important;
    -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif !important;
}

body {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.008em;
}

/* Top navigation */
.tp-brand__text {
    font-size: 1.02rem !important;
}

.tp-nav a {
    font-size: .88rem !important;
}

.tp-topbar__actions a {
    font-size: .84rem !important;
}

/* Sidebar */
.tp-sidebar__title {
    font-size: .68rem !important;
}

.tp-menu a,
.tp-menu-details summary {
    font-size: .87rem !important;
}

.tp-menu-submenu a {
    font-size: .80rem !important;
}

/* Main headings */
.tp-page-heading h1,
.audit-page-title,
.transaction-header h1 {
    font-size: 1.68rem !important;
    font-weight: 800 !important;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.tp-page-heading h2 {
    font-size: 1.24rem !important;
}

.tp-page-heading p,
.audit-page-subtitle {
    font-size: .93rem !important;
    line-height: 1.65;
}

.tp-eyebrow {
    font-size: .72rem !important;
}

.tp-muted {
    font-size: .90rem !important;
}

/* Dashboard/statistics */
.tp-stat__label {
    font-size: .71rem !important;
}

.tp-stat__value {
    font-size: 1.75rem !important;
}

.tp-stat__meta {
    font-size: .80rem !important;
}

/* Buttons */
.tp-btn {
    min-height: 40px;
    padding: 9px 15px;
    font-size: .85rem !important;
}

/* Forms */
.tp-field label {
    font-size: .80rem !important;
}

.tp-field input,
.tp-field select,
.tp-field textarea {
    font-size: .90rem !important;
}

.tp-field input,
.tp-field select {
    min-height: 42px;
}

.tp-form-error {
    font-size: .80rem !important;
}

.tp-check-row {
    font-size: .87rem !important;
}

.tp-requirements-filter label span,
.payments-filter label span {
    font-size: .70rem !important;
}

.tp-requirements-filter input,
.tp-requirements-filter select,
.payments-filter input,
.payments-filter select {
    min-height: 42px;
    font-size: .86rem !important;
}

/* Tables */
.tp-table,
.audit-table {
    font-size: .88rem !important;
}

.tp-table th,
.audit-table th {
    padding: 12px !important;
    font-size: .70rem !important;
}

.tp-table td,
.audit-table td {
    padding: 12px !important;
    font-size: .86rem !important;
    line-height: 1.5;
}

.tp-table code {
    font-size: .82rem !important;
}

/* Badges */
.tp-badge {
    font-size: .73rem !important;
}

/* Definition/detail layouts */
dt,
.detail-item dt {
    font-size: .76rem !important;
}

dd,
.detail-item dd {
    font-size: .90rem !important;
}

/* Transaction workflow */
.transaction-meta {
    font-size: .86rem !important;
}

.transaction-summary__value {
    font-size: 1.15rem !important;
}

.workspace-panel h2 {
    font-size: 1.08rem !important;
}

.section-note {
    font-size: .86rem !important;
}

.workflow-step__label {
    font-size: .90rem !important;
}

.workflow-step__meta {
    font-size: .78rem !important;
}

/* Audit */
.audit-field label {
    font-size: .72rem !important;
}

.audit-field input,
.audit-field select {
    height: 42px !important;
    font-size: .88rem !important;
}

.audit-actions .tp-btn {
    min-height: 42px !important;
    height: 42px;
}

.audit-timestamp {
    font-size: .82rem !important;
}

.audit-target-id {
    font-size: .80rem !important;
}

.audit-action-badge {
    font-size: .72rem !important;
}

.audit-details summary {
    font-size: .80rem !important;
}

.audit-details pre {
    font-size: .75rem !important;
}

.audit-page-status {
    font-size: .82rem !important;
}

.audit-empty {
    font-size: .88rem !important;
}

/* Notifications */
.tp-notification-panel__header strong {
    font-size: .96rem !important;
}

.tp-notification-panel__header a,
.tp-notification-panel__header button {
    font-size: .78rem !important;
}

.tp-notification-item__title {
    font-size: .86rem !important;
}

.tp-notification-item__message {
    font-size: .80rem !important;
}

.tp-notification-item__time {
    font-size: .72rem !important;
}

.tp-notification-empty {
    font-size: .84rem !important;
}

/* Pagination */
.tp-pagination,
.audit-pagination {
    font-size: .84rem !important;
}

.tp-pagination a,
.audit-pagination .tp-btn {
    font-size: .82rem !important;
}

/* Responsive readability */
@media (max-width: 640px) {
    html {
        font-size: 15px !important;
    }

    .tp-page-heading h1,
    .audit-page-title,
    .transaction-header h1 {
        font-size: 1.50rem !important;
    }

    .tp-menu a,
    .tp-menu-details summary {
        font-size: .90rem !important;
    }

    .tp-table,
    .audit-table {
        font-size: .86rem !important;
    }
}

/* ==========================================================================
   TRUSTPAY AFRICA — SYSTEM-WIDE RESPONSIVE LAYER
   Keep this section LAST in trustpay.css.
   ========================================================================== */

/* Prevent accidental page-wide overflow but allow table content to scroll within its own container */
html,
body {
    max-width: 100%;
    overflow-x: auto !important;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.tp-content,
.tp-card,
.tp-section,
.workspace-panel,
.audit-panel,
.req-workspace {
    min-width: 0;
}

/* Tables should scroll inside their own container, never the whole page */
.table-wrap,
.tp-table-wrapper,
.audit-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Important: many pages render the table directly without a wrapper. */
.table-wrap > table,
.tp-table-wrapper > table,
.audit-table-wrapper > table,
table.tp-table,
table.audit-table,
.req-table-wrap > table,
table.req-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse !important;
}

/* This keeps wide tables scrollable on small screens without breaking the page shell */
.table-wrap,
.tp-table-wrapper,
.audit-table-wrapper,
.req-table-wrap,
.req-table-wrapper,
.tp-card,
.tp-section,
.workspace-panel,
.audit-panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Generic responsive forms */
input,
select,
textarea,
button {
    max-width: 100%;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    .tp-container {
        width: calc(100% - 20px) !important;
        margin: 14px auto 28px !important;
    }

    .tp-app-layout,
    .tp-page {
        grid-template-columns: 210px minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .tp-sidebar {
        padding: 12px 9px !important;
    }

    .tp-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tp-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tp-requirements-filter,
    .payments-filter,
    .audit-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tp-requirements-filter__actions,
    .payments-filter__actions,
    .audit-actions {
        grid-column: 1 / -1 !important;
    }
}

/* ==========================================================================
   MOBILE / SMALL TABLET
   ========================================================================== */

@media (max-width: 820px) {

    html {
        font-size: 15px !important;
    }

    body {
        min-width: 0 !important;
        overflow-x: auto !important;
    }

    table.tp-table,
table.audit-table,
table.req-table,
    .table-wrap > table,
    .tp-table-wrapper > table,
    .audit-table-wrapper > table,
    .req-table-wrap > table {
        min-width: 720px !important;
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }

    /* ---------- Global shell ---------- */

    .tp-shell {
        width: 100%;
        min-width: 0;
    }

    .tp-topbar {
        position: sticky;
        top: 0;
        z-index: 3000;
    }

    .tp-topbar__inner {
        width: 100% !important;
        min-height: 58px;
        padding: 9px 12px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

    .tp-brand {
        min-width: 0 !important;
        flex: 1 1 auto;
    }

    .tp-brand__logo {
        width: 31px !important;
        height: 31px !important;
        flex: 0 0 31px;
    }

    .tp-brand__text {
        font-size: .94rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide desktop-style header links on mobile.
       Keep notification bell + hamburger visible. */
    .tp-nav {
        display: none !important;
    }

    .tp-topbar__actions > a {
        display: none !important;
    }

    .tp-topbar__actions {
        gap: 4px !important;
        flex: 0 0 auto;
    }

    .tp-mobile-toggle {
        display: inline-flex !important;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .tp-notification-trigger {
        width: 38px !important;
        height: 38px !important;
    }

    /* ---------- Main layout ---------- */

    .tp-container {
        width: calc(100% - 14px) !important;
        margin: 10px auto 24px !important;
    }

    .tp-app-layout,
    .tp-page {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    .tp-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Sidebar becomes collapsible */
    .tp-sidebar {
        position: static !important;
        display: none !important;
        width: 100% !important;
        max-height: calc(100vh - 82px);
        margin: 0 0 12px !important;
        padding: 11px !important;
        overflow-y: auto;
        border-radius: 13px !important;
    }

    .tp-sidebar.is-open {
        display: block !important;
    }

    .tp-sidebar__group {
        margin-bottom: 8px !important;
    }

    .tp-menu a,
    .tp-menu-details summary {
        min-height: 42px !important;
        padding: 9px 11px !important;
        font-size: .90rem !important;
    }

    .tp-menu-submenu a {
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: .84rem !important;
    }

    /* ---------- Cards / panels ---------- */

    .tp-card,
    .audit-panel,
    .workspace-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 13px !important;
    }

    .tp-section,
    .audit-panel,
    .workspace-panel {
        padding: 16px !important;
    }

    /* Override common inline desktop spacing on templates */
    .tp-card.tp-section {
        padding: 16px !important;
    }

    /* ---------- Headings ---------- */

    .tp-page-heading,
    .audit-page-header,
    .transaction-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .tp-page-heading h1,
    .audit-page-title,
    .transaction-header h1 {
        font-size: 1.45rem !important;
        line-height: 1.25 !important;
    }

    .tp-page-heading p,
    .audit-page-subtitle {
        font-size: .88rem !important;
    }

    /* ---------- Summary cards ---------- */

    .tp-summary-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
    }

    .tp-stat {
        padding: 14px !important;
    }

    .tp-stat__value {
        font-size: 1.45rem !important;
    }

    /* ---------- Forms ---------- */

    .tp-form-grid,
    .tp-split-form {
        grid-template-columns: 1fr !important;
    }

    .tp-field--wide {
        grid-column: auto !important;
    }

    .tp-field input,
    .tp-field select,
    .tp-field textarea,
    .audit-field input,
    .audit-field select {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important; /* prevents iOS auto-zoom */
    }

    .tp-field textarea {
        min-height: 110px !important;
    }

    /* ---------- Filters ---------- */

    .tp-requirements-filter,
    .payments-filter,
    .audit-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    .tp-requirements-filter__actions,
    .payments-filter__actions,
    .audit-actions {
        grid-column: auto !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .tp-requirements-filter__actions .tp-btn,
    .payments-filter__actions .tp-btn,
    .audit-actions .tp-btn {
        width: 100% !important;
    }

    /* ---------- Buttons ---------- */

    .tp-btn {
        min-height: 42px !important;
        padding: 9px 13px !important;
    }

    /* ---------- Tables ---------- */

    .table-wrap,
    .tp-table-wrapper,
    .audit-table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible;
        border-radius: 10px !important;
        -webkit-overflow-scrolling: touch;
    }

    .tp-table {
        min-width: 720px !important;
    }

    .audit-table {
        min-width: 820px !important;
    }

    .tp-table th,
    .audit-table th {
        padding: 10px !important;
        white-space: nowrap;
    }

    .tp-table td,
    .audit-table td {
        padding: 10px !important;
    }

    /* ---------- Detail layouts ---------- */

    .transaction-summary,
    .transaction-summary-grid,
    .detail-grid,
    .workspace-grid,
    .payment-summary-grid,
    .milestone-summary-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---------- Panel headers/actions ---------- */

    .tp-panel-heading,
    .tp-panel-actions {
        flex-wrap: wrap !important;
    }

    .tp-panel-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tp-panel-actions .tp-btn {
        width: 100% !important;
    }

    /* ---------- Pagination ---------- */

    .tp-pagination,
    .audit-pagination {
        width: 100%;
        justify-content: center !important;
        gap: 6px !important;
    }

    /* ---------- Notifications ---------- */

    .tp-notification-panel {
        position: fixed !important;
        top: 64px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 78px);
        overflow-y: auto;
    }
}

/* ==========================================================================
   PHONE
   ========================================================================== */

@media (max-width: 560px) {

    .tp-container {
        width: calc(100% - 10px) !important;
        margin-top: 7px !important;
    }

    .tp-topbar__inner {
        padding: 8px 9px !important;
    }

    .tp-brand__text {
        font-size: .88rem !important;
    }

    .tp-card,
    .workspace-panel,
    .audit-panel {
        border-radius: 11px !important;
    }

    .tp-section,
    .workspace-panel,
    .audit-panel,
    .tp-card.tp-section {
        padding: 13px !important;
    }

    .tp-page-heading h1,
    .audit-page-title,
    .transaction-header h1 {
        font-size: 1.32rem !important;
    }

    .tp-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .tp-stat {
        min-height: 0 !important;
    }

    /* Stack any generic horizontal action bars */
    .tp-panel-actions,
    .tp-requirements-filter__actions,
    .payments-filter__actions,
    .audit-actions {
        grid-template-columns: 1fr !important;
    }

    /* Forms remain comfortably tappable */
    .tp-field input,
    .tp-field select,
    .tp-field textarea,
    .audit-field input,
    .audit-field select {
        font-size: 16px !important;
    }

    /* Slightly smaller minimum table width on phones */
    .tp-table {
        min-width: 650px !important;
    }

    .audit-table {
        min-width: 760px !important;
    }

    /* Dropdown menus should not render offscreen */
    .tp-row-menu__panel,
    .requirement-actions__menu,
    .tp-action-menu,
    .table-action-menu {
        position: fixed !important;
        top: auto !important;
        right: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 5000 !important;
        border-radius: 14px !important;
    }

    /* Pagination controls can wrap naturally */
    .tp-pagination,
    .audit-pagination {
        flex-wrap: wrap !important;
    }
}

/* ==========================================================================
   VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 380px) {

    .tp-brand__text {
        max-width: 130px;
    }

    .tp-mobile-toggle,
    .tp-notification-trigger {
        width: 36px !important;
        height: 36px !important;
    }

    .tp-section,
    .workspace-panel,
    .audit-panel,
    .tp-card.tp-section {
        padding: 11px !important;
    }

    .tp-page-heading h1,
    .audit-page-title,
    .transaction-header h1 {
        font-size: 1.24rem !important;
    }
}

/* ======================================================================
   TRANSACTION REQUIREMENTS — GLOBALIZED PAGE STYLES
   ====================================================================== */
/* =========================================================
   TRANSACTION REQUIREMENTS WORKSPACE
   ========================================================= */

.req-workspace {
    --req-border: #e7eaf0;
    --req-soft: #f8fafc;
    --req-text: #101828;
    --req-muted: #667085;
    --req-subtle: #98a2b3;
    --req-primary: var(--brand-primary);
    --req-primary-soft: var(--brand-primary-soft);

    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- Header ---------- */

.req-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.req-header__copy {
    min-width: 260px;
    flex: 1;
}

.req-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #8b95a5;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.req-eyebrow svg {
    width: 14px;
    height: 14px;
}

.req-title {
    margin: 0;
    color: var(--req-text);
    font-size: 1.72rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.req-subtitle {
    max-width: 690px;
    margin: 8px 0 0;
    color: var(--req-muted);
    font-size: .88rem;
    line-height: 1.6;
}

.req-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.req-search {
    position: relative;
    min-width: 300px;
    width: min(380px, 42vw);
}

.req-search svg {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 16px;
    height: 16px;
    color: #98a2b3;
    transform: translateY(-50%);
    pointer-events: none;
}

.req-search input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 39px;
    border: 1px solid #dfe3e8;
    border-radius: 11px;
    background: #fff;
    color: var(--req-text);
    font: inherit;
    font-size: .85rem;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.req-search input:focus {
    border-color: #ee7a66;
    box-shadow: 0 0 0 3px rgba(229,79,56,.08);
}

.req-new-button {
    white-space: nowrap;
}

/* ---------- Summary ---------- */

.req-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.req-summary__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid var(--req-border);
    border-radius: 13px;
    background: #fff;
}

.req-summary__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff3f0;
    color: var(--req-primary);
}

.req-summary__icon svg {
    width: 18px;
    height: 18px;
}

.req-summary__value {
    color: var(--req-text);
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.1;
}

.req-summary__label {
    margin-top: 3px;
    color: var(--req-muted);
    font-size: .75rem;
    font-weight: 650;
}

/* ---------- Filters ---------- */

.req-filter-card {
    padding: 14px;
    border: 1px solid var(--req-border);
    border-radius: 14px;
    background: linear-gradient(180deg, #fafbfc, #f8fafc);
}

.req-filter-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.req-filter-card__title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475467;
    font-size: .76rem;
    font-weight: 800;
}

.req-filter-card__title svg {
    width: 15px;
    height: 15px;
}

.req-filter-form {
    display: grid;
    grid-template-columns:
        minmax(160px, 1.1fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        minmax(160px, 1fr)
        minmax(150px, .95fr)
        auto;
    gap: 10px;
    align-items: end;
}

.req-filter-field {
    min-width: 0;
}

.req-filter-field span {
    display: block;
    margin-bottom: 5px;
    color: #667085;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.req-filter-field select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #dfe3e8;
    border-radius: 9px;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: .80rem;
    outline: none;
}

.req-filter-field select:focus {
    border-color: #ee7a66;
    box-shadow: 0 0 0 3px rgba(229,79,56,.08);
}

.req-filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ---------- Main workspace ---------- */

.req-main {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* Browse tree */
.req-browser {
    position: sticky;
    top: 82px;
    max-height: calc(100vh - 105px);
    overflow: auto;
    padding: 15px;
    border: 1px solid var(--req-border);
    border-radius: 14px;
    background: #fbfcfd;
}

.req-browser__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
    padding: 0 3px 10px;
    border-bottom: 1px solid #eef0f3;
}

.req-browser__title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #475467;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.req-browser__title svg {
    width: 15px;
    height: 15px;
}

.req-browser details {
    margin: 0;
}

.req-browser details + details {
    margin-top: 4px;
}

.req-browser summary {
    list-style: none;
}

.req-browser summary::-webkit-details-marker {
    display: none;
}

.req-category > summary,
.req-type > summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 36px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}

.req-category > summary {
    padding: 7px 8px 7px 26px;
    color: #1d2939;
    font-size: .82rem;
    font-weight: 800;
}

.req-type > summary {
    padding: 6px 8px 6px 26px;
    color: #536174;
    font-size: .78rem;
    font-weight: 700;
}

.req-category > summary:hover,
.req-type > summary:hover {
    background: #f2f4f7;
}

.req-category > summary::before,
.req-type > summary::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.6px solid #7a8699;
    border-bottom: 1.6px solid #7a8699;
    transform: translateY(-65%) rotate(-45deg);
    transition: transform .15s ease;
}

.req-category[open] > summary::before,
.req-type[open] > summary::before {
    transform: translateY(-65%) rotate(45deg);
}

.req-type-list {
    margin: 2px 0 7px 12px;
    padding: 0 0 0 13px;
    border-left: 1px solid #e4e7ec;
    list-style: none;
}

.req-type-list li {
    margin: 0;
    padding: 6px 7px;
    border-radius: 7px;
    color: #667085;
    font-size: .73rem;
    line-height: 1.4;
}

.req-type-list li:hover {
    background: #fff;
    color: #344054;
}

.req-count {
    margin-left: auto;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef1f5;
    color: #667085;
    font-size: .64rem;
    font-weight: 800;
    text-align: center;
}

/* ---------- Results ---------- */

.req-results {
    min-width: 0;
}

.req-results__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.req-results__title {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    color: var(--req-text);
    font-size: 1rem;
    font-weight: 800;
}

.req-results__count {
    color: #98a2b3;
    font-weight: 700;
}

.req-results__meta {
    color: #98a2b3;
    font-size: .73rem;
}

/* Table */
.req-table-wrap {
    position: relative;
    overflow: visible;
    border: 1px solid var(--req-border);
    border-radius: 13px;
    background: #fff;
}

.req-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.req-table th {
    padding: 11px 12px;
    border-bottom: 1px solid #e4e7ec;
    background: #f8fafc;
    color: #667085;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.req-table th:first-child {
    border-radius: 12px 0 0 0;
}

.req-table th:last-child {
    border-radius: 0 12px 0 0;
    text-align: center;
}

.req-table td {
    padding: 12px;
    border-bottom: 1px solid #f0f2f5;
    color: #475467;
    font-size: .79rem;
    line-height: 1.45;
    vertical-align: middle;
}

.req-table tbody tr:last-child td {
    border-bottom: 0;
}

.req-table tbody tr:hover td {
    background: #fcfcfd;
}

.req-table__name {
    margin-bottom: 4px;
    color: #101828;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.4;
}

.req-table__instruction {
    margin-bottom: 6px;
    color: #7a8699;
    font-size: .71rem;
    line-height: 1.45;
}

.req-table__badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.req-table__badges .tp-badge,
.req-verification {
    font-size: .65rem !important;
}

.req-code {
    color: #536174;
    font-size: .76rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.req-stage {
    color: #536174;
    font-size: .76rem;
    line-height: 1.45;
}

.req-verification {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1.25;
}

.req-verification--required {
    background: #fff7e8;
    color: #b54708;
}

.req-verification--none {
    background: #f2f4f7;
    color: #475467;
}

/* ---------- Row actions ---------- */

.requirements-action-cell {
    position: relative;
    width: 54px;
    min-width: 54px;
    padding: 8px !important;
    text-align: center;
    overflow: visible;
}

.tp-row-menu {
    position: relative;
    display: inline-block;
}

.tp-row-menu > summary {
    list-style: none;
}

.tp-row-menu > summary::-webkit-details-marker {
    display: none;
}

.tp-row-menu__trigger {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #667085;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.tp-row-menu__trigger svg {
    width: 17px;
    height: 17px;
    stroke-width: 2.2;
}

.tp-row-menu__trigger:hover,
.tp-row-menu[open] > .tp-row-menu__trigger {
    border-color: #e4e7ec;
    background: #f2f4f7;
    color: #101828;
}

.tp-row-menu__panel {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 2200;
    width: 188px;
    padding: 6px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(16,24,40,.14), 0 4px 10px rgba(16,24,40,.05);
    text-align: left;
}

.tp-row-menu__panel form {
    margin: 0;
    padding: 0;
}

.tp-row-menu__item {
    width: 100%;
    min-height: 37px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: #344054;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.tp-row-menu__item svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #667085;
}

.tp-row-menu__item:hover {
    background: #f8fafc;
    color: #101828;
    text-decoration: none;
}

.tp-row-menu__danger-section {
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top: 1px solid #f0f2f5;
}

.tp-row-menu__item--danger,
.tp-row-menu__item--danger svg {
    color: #d92d20;
}

.tp-row-menu__item--danger:hover {
    background: #fff5f4;
    color: #b42318;
}

/* ---------- Pagination ---------- */

.req-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef0f3;
    flex-wrap: wrap;
}

.req-pagination__status {
    color: #667085;
    font-size: .78rem;
}

.req-pagination__links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.req-page-number {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #fff;
    color: #344054;
    font-size: .75rem;
    font-weight: 750;
    text-decoration: none;
}

.req-page-number:hover {
    border-color: #d0d5dd;
    background: #f8fafc;
    text-decoration: none;
}

.req-page-number--active {
    border-color: rgba(229,79,56,.16);
    background: var(--req-primary-soft);
    color: var(--req-primary);
}

/* ---------- Empty state ---------- */

.req-empty {
    padding: 42px 24px !important;
    text-align: center;
}

.req-empty__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border-radius: 12px;
    background: #f2f4f7;
    color: #667085;
}

.req-empty__icon svg {
    width: 19px;
    height: 19px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1250px) {
    .req-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .req-filter-actions {
        grid-column: 1 / -1;
    }

    .req-main {
        grid-template-columns: 225px minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .req-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .req-main {
        grid-template-columns: 1fr;
    }

    .req-browser {
        position: static;
        max-height: none;
    }

    .req-table-wrap {
        overflow-x: auto;
        overflow-y: visible;
    }

    .req-table {
        min-width: 900px;
    }
}

@media (max-width: 720px) {
    .req-header {
        flex-direction: column;
    }

    .req-header__actions,
    .req-search {
        width: 100%;
    }

    .req-search {
        min-width: 0;
    }

    .req-new-button {
        width: 100%;
    }

    .req-summary {
        grid-template-columns: 1fr;
    }

    .req-filter-form {
        grid-template-columns: 1fr;
    }

    .req-filter-actions {
        grid-column: auto;
    }

    .req-filter-actions .tp-btn {
        flex: 1;
    }
}


/* =========================================================
   MOBILE REQUIREMENTS — CARD LAYOUT
   ========================================================= */

@media (max-width: 760px) {
    .req-workspace {
        gap: 14px;
    }

    .req-header {
        gap: 14px;
    }

    .req-header__copy {
        min-width: 0;
        width: 100%;
    }

    .req-title {
        font-size: 1.45rem;
    }

    .req-subtitle {
        font-size: .84rem;
    }

    .req-header__actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .req-search {
        width: 100%;
        min-width: 0;
    }

    .req-search input {
        height: 44px;
        font-size: .88rem;
    }

    .req-new-button {
        width: 100%;
        min-height: 44px;
    }

    .req-summary {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .req-summary__item {
        min-height: 64px;
        padding: 12px 13px;
    }

    .req-summary__icon {
        width: 34px;
        height: 34px;
    }

    .req-summary__value {
        font-size: 1rem;
    }

    .req-filter-card {
        padding: 12px;
    }

    .req-filter-card__top {
        margin-bottom: 10px;
    }

    .req-filter-form {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .req-filter-field select {
        height: 43px;
        font-size: .85rem;
    }

    .req-filter-actions {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .req-filter-actions .tp-btn {
        width: 100%;
        min-height: 42px;
    }

    .req-main {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .req-browser {
        position: static;
        max-height: 280px;
        padding: 12px;
        overflow-y: auto;
    }

    .req-results__header {
        margin-bottom: 8px;
    }

    /* Mobile rows become cards instead of a wide table */
    .req-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .req-table {
        min-width: 0 !important;
        width: 100%;
        display: block;
    }

    .req-table colgroup,
    .req-table thead {
        display: none;
    }

    .req-table tbody {
        display: grid;
        gap: 10px;
    }

    .req-table tr {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 14px 46px 13px 14px;
        border: 1px solid var(--req-border);
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16,24,40,.025);
    }

    .req-table tbody tr:hover td {
        background: transparent;
    }

    .req-table td {
        display: block;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        font-size: .82rem;
    }

    .req-table td:not(:first-child):not(.requirements-action-cell) {
        display: grid;
        grid-template-columns: 112px minmax(0,1fr);
        gap: 10px;
        align-items: start;
        margin-top: 9px;
        padding-top: 9px !important;
        border-top: 1px solid #f0f2f5 !important;
    }

    .req-table td:nth-child(2)::before {
        content: "Transaction";
    }

    .req-table td:nth-child(3)::before {
        content: "Stage";
    }

    .req-table td:nth-child(4)::before {
        content: "Responsible";
    }

    .req-table td:nth-child(5)::before {
        content: "Verification";
    }

    .req-table td:not(:first-child):not(.requirements-action-cell)::before {
        color: #98a2b3;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .req-table__name {
        padding-right: 4px;
        font-size: .92rem;
    }

    .req-table__instruction {
        font-size: .76rem;
    }

    .req-table__badges {
        margin-top: 7px;
    }

    .req-code,
    .req-stage {
        font-size: .80rem;
        line-height: 1.45;
    }

    .requirements-action-cell {
        position: absolute !important;
        top: 8px;
        right: 8px;
        width: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible;
    }

    .tp-row-menu__panel {
        top: 36px;
        right: 0;
        width: 184px;
        z-index: 4000;
    }

    .req-pagination {
        align-items: stretch;
    }

    .req-pagination__status {
        width: 100%;
        text-align: center;
    }

    .req-pagination__links {
        width: 100%;
        justify-content: center;
    }

    .req-pagination__links > .tp-btn {
        min-height: 38px;
    }

    .req-empty {
        display: block !important;
        padding: 34px 18px !important;
    }
}

@media (max-width: 430px) {
    .req-filter-actions {
        grid-template-columns: 1fr;
    }

    .req-table td:not(:first-child):not(.requirements-action-cell) {
        grid-template-columns: 96px minmax(0,1fr);
    }

    .req-browser {
        max-height: 240px;
    }

    .tp-row-menu__panel {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        border-radius: 14px;
        box-shadow: 0 22px 60px rgba(16,24,40,.20);
    }

    .tp-row-menu__item {
        min-height: 44px;
        font-size: .84rem;
    }
}

/* =========================================================
   TRUSTPAY FIXED SIDEBAR
   Sidebar does NOT move when page/content scrolls
   ========================================================= */

:root {
    --tp-topbar-height: 64px;
    --tp-sidebar-width: 240px;
}

/* Top navigation stays fixed at the top */
.tp-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--tp-topbar-height);
    z-index: 1200;
}

/* Entire sidebar is fixed to the viewport */
.tp-sidebar {
    position: fixed !important;
    top: var(--tp-topbar-height) !important;
    left: 0 !important;
    bottom: 0 !important;

    width: var(--tp-sidebar-width) !important;
    height: calc(100vh - var(--tp-topbar-height)) !important;
    max-height: calc(100vh - var(--tp-topbar-height)) !important;

    overflow-y: auto !important;
    overflow-x: auto !important;

    z-index: 1000;
}

/* Main layout no longer needs sidebar as a grid column */
.tp-app-layout {
    display: block !important;
    width: 100%;
    min-height: 100vh;
}

/* Push the content to the right of the fixed sidebar */
.tp-content,
.tp-main,
.tp-main-content {
    margin-left: var(--tp-sidebar-width) !important;
    padding-top: var(--tp-topbar-height);
    width: calc(100% - var(--tp-sidebar-width)) !important;
    min-width: 0;
    box-sizing: border-box;
}

/* If your base template uses main directly */
.tp-app-layout > main {
    margin-left: var(--tp-sidebar-width) !important;
    padding-top: var(--tp-topbar-height);
    width: calc(100% - var(--tp-sidebar-width)) !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Allow the page to scroll normally, while tables keep their own internal horizontal scroll */
html,
body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
}

/* Sidebar scrolls independently if menu is taller than screen */
.tp-sidebar {
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

/* Internal wide tables scroll, not the whole application */
.tp-table-wrapper,
.table-responsive,
.audit-table-wrapper,
.req-table-wrap,
.req-table-wrapper,
.payment-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) and (min-width: 821px) {

    :root {
        --tp-sidebar-width: 210px;
    }

    .tp-sidebar {
        width: var(--tp-sidebar-width) !important;
    }

    .tp-content,
    .tp-main,
    .tp-main-content,
    .tp-app-layout > main {
        margin-left: var(--tp-sidebar-width) !important;
        width: calc(100% - var(--tp-sidebar-width)) !important;
    }
}

/* =========================================================
   MOBILE
   Sidebar becomes drawer
   ========================================================= */

@media (max-width: 820px) {

    :root {
        --tp-topbar-height: 60px;
    }

    .tp-sidebar {
        position: fixed !important;
        top: var(--tp-topbar-height) !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(84vw, 280px) !important;
        height: calc(100vh - var(--tp-topbar-height)) !important;

        transform: translateX(-105%);
        transition: transform 0.22s ease;

        visibility: hidden;
        pointer-events: none;

        z-index: 1500;
    }

    .tp-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .tp-content,
    .tp-main,
    .tp-main-content,
    .tp-app-layout > main {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: var(--tp-topbar-height);
    }

    .tp-mobile-toggle {
        display: inline-flex !important;
    }
}

/* Desktop hides mobile menu button */
@media (min-width: 821px) {
    .tp-mobile-toggle {
        display: none !important;
    }

    .tp-sidebar {
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}


@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --pub-accent:var(--brand-primary,#ef5a3c);
  --pub-accent-dark:#d94a2f;
  --pub-ink:#0f172a;
  --pub-navy:#0d1b2a;
  --pub-text:#667085;
  --pub-line:#e7ebf0;
  --pub-soft:#f7f9fc;
  --pub-success:#15803d;
}

/* Public pages must scroll normally and never inherit dashboard offsets. */
body:has(.landing),
body:has(.login-shell){
  margin:0!important;
  min-height:100vh!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:#fff;
}
body:has(.landing) .tp-sidebar,
body:has(.login-shell) .tp-sidebar,
body:has(.landing) .tp-topbar,
body:has(.login-shell) .tp-topbar{display:none!important;}
body:has(.landing) .tp-app-layout,
body:has(.login-shell) .tp-app-layout,
body:has(.landing) .tp-content,
body:has(.login-shell) .tp-content,
body:has(.landing) main,
body:has(.login-shell) main{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.landing,.landing *,.login-shell,.login-shell *{
  box-sizing:border-box;
  font-family:"Plus Jakarta Sans",Arial,sans-serif;
}

/* ================= LANDING ================= */
.landing{
  width:100%;
  min-height:100vh;
  color:var(--pub-ink);
  background:#fff;
  overflow-x:hidden;
}
.landing section[id]{scroll-margin-top:90px;}
.landing a{transition:.2s ease;}

.landing__nav{
  position:sticky;
  top:0;
  z-index:50;
  min-height:78px;
  padding:14px clamp(20px,5vw,82px);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(15,23,42,.06);
  backdrop-filter:blur(18px) saturate(160%);
}
.landing__brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--pub-ink);
  text-decoration:none;
  font-size:1rem;
  font-weight:800;
  white-space:nowrap;
}
.landing__brand-mark{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:14px;color:#fff;
  background:linear-gradient(145deg,#1d3952,#0d1b2a);
  box-shadow:0 10px 24px rgba(15,23,42,.15);
  font-weight:800;
}
.landing__nav-links{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(18px,2.3vw,34px);
  color:#667085;font-size:.88rem;font-weight:650;
}
.landing__nav-links a{color:inherit;text-decoration:none;position:relative;}
.landing__nav-links a:hover{color:var(--pub-ink);}
.landing__nav-actions{display:flex;align-items:center;gap:10px;}

.landing .tp-btn{
  min-height:46px;
  padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;
  border:1px solid var(--pub-accent);
  background:var(--pub-accent);
  color:#fff;
  text-decoration:none;
  font-size:.9rem;font-weight:750;
}
.landing .tp-btn:hover{
  transform:translateY(-2px);
  background:var(--pub-accent-dark);
  border-color:var(--pub-accent-dark);
  box-shadow:0 14px 30px rgba(239,90,60,.18);
}
.landing .tp-btn--secondary{
  background:#fff;color:#334155;border-color:#dfe4ea;box-shadow:none;
}
.landing .tp-btn--secondary:hover{background:#f8fafc;color:var(--pub-ink);}

.landing__hero{
  position:relative;
  isolation:isolate;
  min-height:720px;
  padding:clamp(72px,8vw,118px) clamp(22px,6vw,104px) clamp(88px,9vw,126px);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  align-items:center;
  gap:clamp(48px,7vw,110px);
  background:
    radial-gradient(circle at 85% 18%,rgba(255,223,212,.76),transparent 29%),
    radial-gradient(circle at 12% 88%,rgba(224,238,248,.7),transparent 28%),
    linear-gradient(180deg,#fff,#fbfcfe);
}
.landing__hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(15,23,42,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.025) 1px,transparent 1px);
  background-size:40px 40px;
}
.landing__hero-copy{position:relative;z-index:3;max-width:760px;}
.landing__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 12px;border:1px solid rgba(239,90,60,.16);
  border-radius:999px;background:rgba(239,90,60,.06);color:var(--pub-accent);
  font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
.landing__eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;box-shadow:0 0 0 4px rgba(239,90,60,.1);
}
.landing h1{
  max-width:760px;margin:24px 0;
  color:var(--pub-ink);
  font-size:clamp(3.4rem,6.2vw,6.8rem);
  line-height:.95;letter-spacing:-.06em;font-weight:800;
}
.landing__headline-accent{display:block;color:var(--pub-accent);}
.landing__lead{
  max-width:660px;margin:0;color:#5f6b7a;
  font-size:clamp(1.04rem,1.3vw,1.22rem);line-height:1.75;
}
.landing__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.landing__actions .tp-btn{min-height:54px;padding:0 24px;border-radius:14px;}
.landing__trust{
  display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:30px;
  color:#7a8493;font-size:.83rem;font-weight:650;
}
.landing__trust span{display:inline-flex;align-items:center;gap:7px;}
.landing__trust svg{width:16px;height:16px;color:var(--pub-success);}

.landing__visual{position:relative;min-height:560px;display:grid;place-items:center;}
.landing__visual::before{
  content:"";position:absolute;width:min(500px,39vw);aspect-ratio:1;right:5%;top:2%;
  border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff,#f8eee9 46%,#ecdcd3);
  box-shadow:0 40px 90px rgba(99,68,53,.08);
}
.landing__orbit{
  position:absolute;width:88%;height:78%;border-radius:50%;
  border:1px dashed rgba(124,93,79,.14);transform:rotate(-12deg);
}
.landing__phone{
  position:relative;z-index:3;width:286px;padding:10px;
  border-radius:36px;background:linear-gradient(160deg,#1b2738,#070c13);
  box-shadow:0 55px 110px rgba(15,23,42,.25),0 14px 30px rgba(15,23,42,.13);
  transform:rotate(3deg);transition:.35s ease;
}
.landing__visual:hover .landing__phone{transform:rotate(1deg) translateY(-5px);}
.landing__phone::before{
  content:"";position:absolute;top:8px;left:50%;width:78px;height:16px;
  transform:translateX(-50%);border-radius:20px;background:#080d14;z-index:4;
}
.landing__phone-screen{
  min-height:470px;padding:24px 17px 19px;overflow:hidden;
  border-radius:27px;background:linear-gradient(160deg,#fcfeff,#edf3f7);
}
.landing__phone-top,.landing__phone-balance-meta,.landing__phone-card-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.landing__phone-top{color:#647184;font-size:.66rem;font-weight:750;}
.landing__phone-balance{
  margin-top:55px;padding:20px;border-radius:20px;color:#fff;
  background:linear-gradient(135deg,#183650,#0e2033);
}
.landing__phone-balance small{color:#aebdca;font-size:.67rem;}
.landing__phone-balance strong{display:block;margin-top:8px;font-size:1.65rem;}
.landing__phone-balance-meta{margin-top:12px;color:#cad4dc;font-size:.62rem;}
.landing__phone-card{
  margin-top:13px;padding:14px;border:1px solid rgba(15,23,42,.055);
  border-radius:16px;background:rgba(255,255,255,.9);
  box-shadow:0 10px 26px rgba(34,52,73,.07);
}
.landing__phone-card-row{color:#26364a;font-size:.72rem;font-weight:750;}
.landing__phone-card-row + .landing__phone-card-row{
  margin-top:13px;color:#6a7687;font-size:.66rem;font-weight:600;
}
.landing__phone-status{color:var(--pub-success);}
.landing__progress{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:15px;}
.landing__progress span{height:4px;border-radius:999px;background:#dce5eb;}
.landing__progress .is-active{background:var(--pub-accent);}
.landing__float{
  position:absolute;z-index:5;width:215px;padding:14px 15px;
  display:flex;align-items:center;gap:11px;
  border:1px solid rgba(255,255,255,.88);border-radius:18px;
  background:rgba(255,255,255,.82);box-shadow:0 20px 50px rgba(15,23,42,.12);
  backdrop-filter:blur(18px);color:#243246;font-size:.73rem;font-weight:750;
}
.landing__float-icon{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  border-radius:12px;background:rgba(239,90,60,.1);color:var(--pub-accent);
}
.landing__float small{display:block;margin-top:3px;color:#7b8795;font-size:.61rem;}
.landing__float--top{top:72px;left:0;}
.landing__float--bottom{right:0;bottom:58px;}

.landing__trust-strip{border-block:1px solid var(--pub-line);background:#fff;}
.landing__trust-strip-inner{
  padding:30px clamp(22px,6vw,104px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
}
.landing__trust-item{
  padding:16px;display:flex;align-items:center;gap:12px;border-radius:16px;
}
.landing__trust-item:hover{background:#f8fafc;}
.landing__trust-item-icon{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border-radius:13px;background:#f6f8fb;border:1px solid #e8edf2;color:var(--pub-accent);
}
.landing__trust-item strong{display:block;color:#26364a;font-size:.9rem;}
.landing__trust-item span:last-child{
  display:block;margin-top:3px;color:#7b8795;font-size:.76rem;line-height:1.45;
}

.landing__section{
  padding:clamp(82px,8vw,120px) clamp(22px,6vw,104px);
  position:relative;
}
.landing__section--soft{background:linear-gradient(180deg,#f8fafc,#f4f7fa);}
.landing__section--warm{
  background:radial-gradient(circle at 8% 12%,rgba(243,225,214,.58),transparent 26%),#faf7f4;
}
.landing__inner{width:min(1220px,100%);margin:0 auto;}
.landing__section-heading{max-width:760px;margin-bottom:50px;}
.landing__section-heading--center{margin-inline:auto;text-align:center;}
.landing__section-heading h2,.landing__security-copy h2,.landing__business-copy h2{
  margin:18px 0 16px;color:var(--pub-ink);
  font-size:clamp(2.4rem,4.3vw,4.2rem);line-height:1;letter-spacing:-.05em;
}
.landing__section-heading p,.landing__security-copy>p,.landing__business-copy>p{
  max-width:680px;margin:0;color:#667386;font-size:1rem;line-height:1.75;
}
.landing__section-heading--center p{margin-inline:auto;}

.landing__feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.landing__feature{
  min-height:245px;padding:30px;position:relative;overflow:hidden;
  border:1px solid rgba(15,23,42,.07);border-radius:22px;background:#fff;
  transition:.24s ease;
}
.landing__feature:hover{
  transform:translateY(-6px);border-color:rgba(239,90,60,.18);
  box-shadow:0 24px 70px rgba(15,23,42,.10);
}
.landing__feature-icon{
  width:48px;height:48px;display:grid;place-items:center;
  border-radius:15px;background:rgba(239,90,60,.09);color:var(--pub-accent);
}
.landing__feature h3{margin:24px 0 10px;color:#1e293b;font-size:1.08rem;}
.landing__feature p{margin:0;color:#697689;font-size:.9rem;line-height:1.68;}

.landing__steps{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,58px);
}
.landing__steps::before{
  content:"";position:absolute;top:21px;left:7%;right:7%;height:1px;
  background:linear-gradient(90deg,transparent,#d7dfe7 12%,#d7dfe7 88%,transparent);
}
.landing__step{
  position:relative;padding:66px 28px 30px;
  border-radius:20px;border:1px solid rgba(15,23,42,.06);background:rgba(255,255,255,.8);
}
.landing__step-number{
  position:absolute;top:0;left:28px;z-index:2;height:42px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #dce4eb;border-radius:999px;background:#fff;color:var(--pub-accent);
  font-size:.68rem;font-weight:800;
}
.landing__step h3{margin:0 0 10px;color:var(--pub-ink);font-size:1.14rem;}
.landing__step p{margin:0;color:#697689;font-size:.9rem;line-height:1.7;}

.landing__use-cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;}
.landing__use-case{
  min-height:190px;padding:25px;border:1px solid rgba(193,177,168,.36);
  border-radius:20px;background:rgba(255,255,255,.7);transition:.22s ease;
}
.landing__use-case:hover{
  transform:translateY(-5px);background:#fff;border-color:rgba(239,90,60,.18);
  box-shadow:0 22px 50px rgba(63,45,36,.08);
}
.landing__use-case>span{color:var(--pub-accent);font-size:.7rem;font-weight:800;}
.landing__use-case h3{margin:18px 0 9px;color:#1e293b;font-size:1.04rem;}
.landing__use-case p{margin:0;color:#6d7888;font-size:.86rem;line-height:1.62;}

.landing__security,.landing__business{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(48px,7vw,110px);align-items:center;
}
.landing__security-card{
  padding:clamp(30px,4vw,48px);border-radius:28px;color:#fff;
  background:linear-gradient(145deg,#17314c,#0b1a2a);
  box-shadow:0 36px 100px rgba(15,23,42,.16);
}
.landing__security-card h3{margin:11px 0 27px;font-size:clamp(1.65rem,2.5vw,2.25rem);}
.landing__security-list-item{
  display:flex;gap:13px;padding:17px 0;border-top:1px solid rgba(255,255,255,.075);
}
.landing__security-list-item:first-child{border-top:0;}
.landing__security-list-item svg{width:18px;height:18px;color:#5ee19e;flex:0 0 18px;}
.landing__security-list-item strong{display:block;font-size:.92rem;}
.landing__security-list-item span{display:block;margin-top:4px;color:#a8b8c8;font-size:.79rem;line-height:1.5;}
.landing__security-points{display:grid;gap:14px;margin-top:30px;}
.landing__security-point{padding:14px;display:flex;gap:13px;border-radius:16px;}
.landing__security-point-number{
  width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;
  border-radius:10px;background:#edf8f2;color:var(--pub-success);font-size:.72rem;font-weight:800;
}
.landing__security-point p{margin:4px 0 0;color:#718096;font-size:.82rem;line-height:1.5;}

.landing__business-list{margin-top:28px;display:grid;gap:12px;}
.landing__business-list span{display:flex;align-items:center;gap:10px;color:#435167;font-size:.88rem;font-weight:650;}
.landing__business-list svg{width:17px;height:17px;color:var(--pub-success);}
.landing__api-card{
  padding:clamp(28px,4vw,44px);border:1px solid rgba(15,23,42,.07);
  border-radius:26px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.10);
}
.landing__api-card-header{
  display:flex;justify-content:space-between;align-items:center;gap:15px;
  padding-bottom:19px;border-bottom:1px solid #edf0f3;
}
.landing__api-status{color:var(--pub-success);font-size:.74rem;font-weight:750;}
.landing__api-code{
  margin-top:22px;padding:22px;overflow:auto;border-radius:17px;background:#0d1927;
  color:#d8e5ef;font-family:Consolas,monospace!important;font-size:.78rem;line-height:1.8;
}
.landing__api-code *{font-family:inherit!important;}
.code-green{color:#70dfa5}.code-gold{color:#f4c17c}

.landing__cta{
  padding:clamp(38px,5vw,62px);display:flex;align-items:center;justify-content:space-between;gap:38px;
  border-radius:28px;color:#fff;background:linear-gradient(135deg,#15324f,#091827);
  box-shadow:0 36px 100px rgba(15,23,42,.16);
}
.landing__cta-copy{max-width:760px;}
.landing__cta h2{margin:0 0 11px;font-size:clamp(2rem,3.2vw,2.85rem);line-height:1.04;}
.landing__cta p{margin:0;color:#b3c1cf;line-height:1.65;}
.landing__cta .tp-btn{background:#fff;border-color:#fff;color:#10233a;box-shadow:none;}

.landing__footer{
  padding:64px clamp(22px,6vw,104px) 42px;
  display:grid;grid-template-columns:1.6fr repeat(3,minmax(140px,.7fr));
  gap:52px;background:#fff;color:#8792a3;font-size:.8rem;
}
.landing__footer-brand p{max-width:380px;margin:16px 0 0;color:#798596;line-height:1.7;}
.landing__footer-title{margin-bottom:14px;color:#26364a;font-size:.71rem;font-weight:800;text-transform:uppercase;}
.landing__footer-links{display:grid;gap:10px;}
.landing__footer-links a{color:#718096;text-decoration:none;}
.landing__footer-links a:hover{color:var(--pub-accent);}
.landing__footer-bottom{
  padding:21px clamp(22px,6vw,104px) 31px;
  display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid #edf0f3;color:#8a95a3;font-size:.73rem;
}

/* ================= LOGIN ================= */
.login-shell{
  width:100%;
  min-height:100vh;
  padding:clamp(24px,5vw,64px);
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 10% 10%,rgba(239,90,60,.09),transparent 25%),
    radial-gradient(circle at 88% 92%,rgba(42,110,150,.08),transparent 27%),
    linear-gradient(180deg,#f8fafc,#f3f6f9);
}
.login-workspace{
  width:min(1040px,100%);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  overflow:hidden;
  border:1px solid rgba(15,23,42,.07);
  border-radius:26px;
  background:#fff;
  box-shadow:0 28px 80px rgba(15,23,42,.12);
}
.login-form-panel{padding:clamp(42px,5vw,64px);}
.login-brand{
  display:inline-flex;align-items:center;gap:11px;
  color:var(--pub-ink);text-decoration:none;font-size:.98rem;font-weight:800;
}
.login-brand__mark{
  width:40px;height:40px;display:grid;place-items:center;border-radius:13px;
  color:#fff;background:linear-gradient(145deg,#1d3952,#0d1b2a);font-weight:800;
}
.login-form-panel h1{
  margin:48px 0 12px;color:var(--pub-ink);
  font-size:clamp(2.3rem,4vw,3.35rem);line-height:1.04;letter-spacing:-.045em;
}
.login-intro{
  max-width:520px;margin:0 0 32px;color:#667085;font-size:.96rem;line-height:1.7;
}
.login-form-panel form{display:grid;gap:18px;}
.login-field{display:grid;gap:8px;}
.login-field label{color:#344054;font-size:.8rem;font-weight:750;}
.login-field input{
  width:100%;min-height:50px;padding:0 14px;border:1px solid #d6dce4;border-radius:11px;
  background:#fff;color:var(--pub-ink);font:inherit;font-size:.94rem;outline:none;
}
.login-field input:focus{
  border-color:var(--pub-accent);box-shadow:0 0 0 4px rgba(239,90,60,.1);
}
.login-submit{
  width:100%;min-height:52px;margin-top:4px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:12px;background:var(--pub-accent);color:#fff;
  font-size:.92rem;font-weight:750;cursor:pointer;
  box-shadow:0 12px 24px rgba(239,90,60,.18);
}
.login-submit:hover{background:var(--pub-accent-dark);transform:translateY(-1px);}
.login-create{margin:26px 0 0;color:#7a8493;text-align:center;font-size:.86rem;}
.login-create a{color:var(--pub-accent);font-weight:750;text-decoration:none;}
.login-aside{
  position:relative;overflow:hidden;padding:clamp(44px,5vw,64px);
  display:flex;flex-direction:column;justify-content:center;
  color:#fff;background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.08),transparent 32%),
    radial-gradient(circle at 0% 100%,rgba(239,90,60,.12),transparent 30%),
    linear-gradient(145deg,#18344e,#0d1b2a);
}
.login-aside__eyebrow{
  display:flex;align-items:center;gap:9px;color:#ff9d88;
  font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.login-aside__eyebrow::before{content:"";width:28px;height:2px;background:#ff9d88;}
.login-aside h2{
  max-width:390px;margin:24px 0 14px;color:#fff;
  font-size:clamp(2rem,3vw,2.75rem);line-height:1.05;letter-spacing:-.04em;
}
.login-aside>p{max-width:390px;margin:0;color:#b6c5d5;font-size:.92rem;line-height:1.7;}
.login-benefits{display:grid;gap:18px;margin-top:38px;}
.login-benefit{display:flex;align-items:flex-start;gap:12px;}
.login-benefit svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;color:#ff9d88;}
.login-benefit strong{display:block;color:#fff;font-size:.88rem;}
.login-benefit span{display:block;margin-top:4px;color:#b6c5d5;font-size:.78rem;line-height:1.5;}
.login-back{
  display:inline-flex;align-items:center;gap:7px;width:fit-content;margin-top:38px;
  color:#fff;font-size:.82rem;font-weight:750;text-decoration:none;
}
.login-back:hover{color:#ffb2a3;}

/* Responsive */
@media(max-width:1050px){
  .landing__hero{grid-template-columns:1fr;min-height:auto;}
  .landing__visual{min-height:520px;}
  .landing__feature-grid,.landing__use-cases{grid-template-columns:repeat(2,minmax(0,1fr));}
  .landing__security,.landing__business{grid-template-columns:1fr;}
}
@media(max-width:820px){
  .landing__nav{grid-template-columns:1fr auto;}
  .landing__nav-links{display:none;}
  .landing__trust-strip-inner{grid-template-columns:repeat(2,minmax(0,1fr));}
  .landing__steps{grid-template-columns:1fr;}
  .landing__steps::before{display:none;}
  .landing__cta{flex-direction:column;align-items:flex-start;}
  .landing__footer{grid-template-columns:repeat(2,minmax(0,1fr));}
  .landing__footer-brand{grid-column:1/-1;}
  .login-workspace{grid-template-columns:1fr;max-width:650px;}
  .login-aside{display:none;}
}
@media(max-width:620px){
  .landing__nav{min-height:68px;padding:12px 16px;}
  .landing__brand{font-size:.9rem;}
  .landing__brand-mark{width:35px;height:35px;}
  .landing__nav-actions .tp-btn--secondary{display:none;}
  .landing__nav-actions .tp-btn{min-height:38px;padding-inline:12px;font-size:.78rem;}
  .landing__hero{padding:48px 18px 62px;gap:28px;}
  .landing h1{font-size:clamp(2.7rem,12vw,3.55rem);line-height:.97;}
  .landing__lead{font-size:.98rem;}
  .landing__actions{flex-direction:column;}
  .landing__actions .tp-btn{width:100%;}
  .landing__visual{min-height:400px;}
  .landing__orbit{display:none;}
  .landing__phone{width:220px;}
  .landing__float{width:155px;padding:10px;font-size:.64rem;}
  .landing__trust-strip-inner,
  .landing__feature-grid,
  .landing__use-cases{grid-template-columns:1fr;}
  .landing__section{padding:68px 18px;}
  .landing__cta{padding:28px 20px;}
  .landing__cta .tp-btn{width:100%;}
  .landing__footer{grid-template-columns:1fr;padding:42px 18px 24px;}
  .landing__footer-brand{grid-column:auto;}
  .landing__footer-bottom{padding:18px;flex-direction:column;}
  .login-shell{padding:18px 14px 40px;background:#fff;}
  .login-workspace{width:100%;border:0;border-radius:0;box-shadow:none;}
  .login-form-panel{padding:24px 8px 34px;}
  .login-form-panel h1{margin-top:40px;font-size:2.35rem;}
  .login-field input{font-size:16px;}
}

/* =========================================================
   TRUSTPAY — FINAL RESPONSIVE TABLE FIX
   KEEP THIS AT THE VERY END OF trustpay.css
   ========================================================= */

/* Never allow dashboard/grid containers to grow beyond viewport */
.tp-content,
.tp-main,
.tp-main-content,
.tp-page,
.tp-app-layout,
.tp-app-layout > main,
.tp-card,
.tp-section,
.workspace-panel,
.audit-panel,
.req-workspace {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* ---------------------------------------------------------
   TABLE WRAPPERS
   --------------------------------------------------------- */

.table-wrap,
.tp-table-wrapper,
.audit-table-wrapper,
.req-table-wrapper,
.payment-table-wrapper,
.escrow-table-wrapper,
.document-table-wrapper,
.contract-table-wrapper,
.milestone-table-wrapper,
.dispute-table-wrapper {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;

    position: relative;

    border-radius: 10px;

    scrollbar-width: thin;
    scrollbar-color: #b8c1cc #eef1f4;
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

.tp-table,
.audit-table,
.table-wrap > table,
.tp-table-wrapper > table,
.audit-table-wrapper > table {
    width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    overflow-x: visible !important;
}


/* Normal tables */
.tp-table {
    min-width: 760px !important;
}


/* Audit normally needs more columns */
.audit-table {
    min-width: 900px !important;
}


/* ---------------------------------------------------------
   TABLE HEADERS
   --------------------------------------------------------- */

.tp-table th,
.audit-table th {
    padding: 11px 13px !important;

    white-space: nowrap !important;

    font-size: 0.74rem !important;
    font-weight: 800;

    text-align: left;
    vertical-align: middle;

    background: #f8fafc;
    color: #667085;

    border-bottom: 1px solid #e4e7ec;
}


/* ---------------------------------------------------------
   TABLE CELLS
   --------------------------------------------------------- */

.tp-table td,
.audit-table td {
    padding: 12px 13px !important;

    font-size: 0.84rem !important;
    line-height: 1.45;

    text-align: left;
    vertical-align: middle;

    color: #344054;

    border-bottom: 1px solid #eef1f4;

    white-space: normal;
}


/* References */
.tp-table td:first-child,
.audit-table td:first-child {
    white-space: nowrap;
}


/* Status, dates and buttons */
.tp-table .tp-badge,
.audit-table .tp-badge,
.tp-table .tp-btn,
.audit-table .tp-btn,
.audit-timestamp,
.tp-table time,
.audit-table time {
    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   CARD MUST NOT CLIP TABLE WRAPPER
   --------------------------------------------------------- */

.tp-card:has(.table-wrap),
.tp-card:has(.tp-table-wrapper),
.workspace-panel:has(.table-wrap),
.workspace-panel:has(.tp-table-wrapper),
.audit-panel:has(.audit-table-wrapper) {
    overflow: visible !important;
}


/* ---------------------------------------------------------
   LAPTOP
   --------------------------------------------------------- */

@media (max-width: 1200px) {

    .tp-table {
        min-width: 720px !important;
    }

    .audit-table {
        min-width: 840px !important;
    }

}


/* ---------------------------------------------------------
   TABLET / MOBILE
   --------------------------------------------------------- */

@media (max-width: 820px) {

    /*
       Wrapper is the scroll area.
       The whole dashboard must NOT scroll sideways.
    */
    .table-wrap,
    .tp-table-wrapper,
    .audit-table-wrapper,
    .req-table-wrapper,
    .payment-table-wrapper,
    .escrow-table-wrapper,
    .document-table-wrapper,
    .contract-table-wrapper,
    .milestone-table-wrapper,
    .dispute-table-wrapper {
        width: 100% !important;

        max-width: calc(100vw - 32px) !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    .tp-table {
        width: 760px !important;
        min-width: 760px !important;
    }


    .audit-table {
        width: 900px !important;
        min-width: 900px !important;
    }


    .tp-table th,
    .audit-table th {
        padding: 10px 12px !important;
        font-size: 0.72rem !important;
    }


    .tp-table td,
    .audit-table td {
        padding: 11px 12px !important;
        font-size: 0.82rem !important;
    }
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 560px) {

    .table-wrap,
    .tp-table-wrapper,
    .audit-table-wrapper {
        max-width: calc(100vw - 24px) !important;
    }


    .tp-table {
        width: 720px !important;
        min-width: 720px !important;
    }


    .audit-table {
        width: 850px !important;
        min-width: 850px !important;
    }


    .tp-table th,
    .audit-table th {
        padding: 9px 10px !important;
    }


    .tp-table td,
    .audit-table td {
        padding: 10px !important;
    }
}


/* ---------------------------------------------------------
   FINAL SCROLL OVERRIDE
   Only the wrapper should scroll. Tables must stay normal.
   --------------------------------------------------------- */

.table-wrap,
.tp-table-wrapper,
.audit-table-wrapper,
.req-table-wrap,
.req-table-wrapper,
.payment-table-wrapper,
.escrow-table-wrapper,
.document-table-wrapper,
.contract-table-wrapper,
.milestone-table-wrapper,
.dispute-table-wrapper {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.table-wrap > table,
.tp-table-wrapper > table,
.audit-table-wrapper > table,
table.tp-table,
table.audit-table,
.req-table-wrap > table,
table.req-table {
    display: table !important;
    width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-width: none !important;
}

/* ---------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------- */

.table-wrap::-webkit-scrollbar,
.tp-table-wrapper::-webkit-scrollbar,
.audit-table-wrapper::-webkit-scrollbar {
    height: 7px;
}

.table-wrap::-webkit-scrollbar-track,
.tp-table-wrapper::-webkit-scrollbar-track,
.audit-table-wrapper::-webkit-scrollbar-track {
    background: #eef1f4;
}

.table-wrap::-webkit-scrollbar-thumb,
.tp-table-wrapper::-webkit-scrollbar-thumb,
.audit-table-wrapper::-webkit-scrollbar-thumb {
    background: #aeb8c5;
    border-radius: 999px;
}

/* ======================================================================
   TRUSTPAY AFRICA - FRESH SYSTEM THEME
   Keep this layer last so the shared shell and page primitives stay aligned.
   ====================================================================== */

:root {
    --brand-primary: #d85f43;
    --brand-primary-soft: #fff0ea;
    --brand-dark: #142b3a;
    --brand-muted: #60727d;
    --brand-surface: #edf3f2;
    --brand-line: #dce7e5;
    --brand-white: #ffffff;
    --brand-success: #2e8f80;
    --brand-warning: #c7832e;
    --brand-danger: #c84c4c;
    --tp-ink: #142b3a;
    --tp-mint: #dcefeb;
    --tp-shadow-soft: 0 12px 32px rgba(20, 43, 58, .07);
    --tp-shadow-float: 0 22px 60px rgba(20, 43, 58, .16);
}

body {
    background:
        radial-gradient(circle at 8% 0%, rgba(216, 95, 67, .08), transparent 26rem),
        linear-gradient(135deg, #f7faf9 0%, #edf3f2 52%, #f5f2ed 100%);
    color: var(--tp-ink);
}

.tp-topbar {
    background: rgba(247, 250, 249, .92);
    border-bottom-color: rgba(20, 43, 58, .10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.tp-topbar__inner {
    width: min(1440px, calc(100% - 40px));
    min-height: 68px;
    padding: 12px 0;
}

.tp-brand__logo {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--tp-ink);
    color: #f8c4a7;
    box-shadow: 4px 4px 0 rgba(216, 95, 67, .20);
}

.tp-brand__text {
    color: var(--tp-ink);
    font-size: 1rem;
    letter-spacing: -.02em;
}

.tp-topbar__actions a {
    color: #526873;
    border-radius: 10px;
}

.tp-topbar__actions a:hover,
.tp-topbar__actions a.active {
    background: var(--tp-mint);
    color: var(--tp-ink);
}

.tp-container {
    width: min(1440px, calc(100% - 40px));
    margin-top: 24px;
}

.tp-app-layout {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 24px;
}

.tp-sidebar {
    top: 92px;
    padding: 16px 12px;
    background: var(--tp-ink);
    border: 0;
    border-radius: 18px;
    box-shadow: var(--tp-shadow-float);
}

.tp-sidebar__title {
    color: #8da6ad;
}

.tp-menu a,
.tp-menu-details summary {
    color: #d6e3e3;
    border-radius: 11px;
}

.tp-menu a svg,
.tp-menu-details summary svg {
    color: #8da6ad;
}

.tp-menu a:hover {
    background: rgba(220, 239, 235, .12);
    color: #fff;
    transform: translateX(2px);
}

.tp-menu a.active {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 9px 20px rgba(216, 95, 67, .24);
}

.tp-menu a.active svg {
    color: #fff;
}

.tp-menu-details summary:hover,
.tp-menu-details summary.active {
    background: rgba(220, 239, 235, .12);
    color: #fff;
}

.tp-menu-submenu {
    border-left-color: rgba(220, 239, 235, .22);
}

.tp-menu-submenu a {
    color: #9eb4b8;
}

.tp-menu-submenu a.active {
    background: rgba(216, 95, 67, .18);
    color: #f8c4a7;
}

.tp-card,
.audit-panel {
    border-color: rgba(20, 43, 58, .10);
    border-radius: 18px;
    box-shadow: var(--tp-shadow-soft);
}

.tp-section {
    padding: 24px;
}

.tp-page-heading h1,
.audit-page-title,
.transaction-header h1 {
    color: var(--tp-ink);
    letter-spacing: -.045em;
}

.tp-page-heading p,
.audit-page-subtitle,
.tp-muted {
    color: var(--brand-muted);
}

.tp-stat,
.transaction-summary__item {
    border-color: var(--brand-line);
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff 0%, #f3f8f7 100%);
}

.tp-stat::before {
    background: linear-gradient(180deg, var(--brand-primary), #f3a37e);
}

.tp-stat__value,
.transaction-summary__value {
    color: var(--tp-ink);
}

.tp-btn {
    background: var(--brand-primary);
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(216, 95, 67, .18);
}

.tp-btn:hover {
    background: #c95137;
    box-shadow: 0 10px 22px rgba(216, 95, 67, .24);
}

.tp-btn--secondary {
    background: #fff;
    border-color: var(--brand-line);
    color: var(--tp-ink);
    box-shadow: 0 2px 5px rgba(20, 43, 58, .05);
}

.tp-btn--secondary:hover {
    background: var(--tp-mint);
    border-color: #b8d8d1;
    color: var(--tp-ink);
}

.tp-field input,
.tp-field select,
.tp-field textarea,
.tp-requirements-filter input,
.tp-requirements-filter select,
.payments-filter input,
.payments-filter select {
    border-color: #cadbd8;
    border-radius: 10px;
}

.tp-field input:focus,
.tp-field select:focus,
.tp-field textarea:focus,
.tp-requirements-filter input:focus,
.tp-requirements-filter select:focus,
.payments-filter input:focus,
.payments-filter select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(216, 95, 67, .12);
}

.table-wrap,
.tp-table-wrapper,
.audit-table-wrapper {
    border-color: var(--brand-line);
    border-radius: 14px;
}

.tp-table th,
.audit-table th {
    background: #eef5f3;
    border-bottom-color: #d7e5e2;
    color: #56717a;
}

.tp-table td,
.audit-table td {
    border-bottom-color: #e6efed;
    color: #38515c;
}

.tp-table tbody tr:hover,
.audit-table tbody tr:hover {
    background: #f3f8f7;
}

.tp-table a,
.audit-details summary {
    color: #c95137;
}

.tp-badge--success {
    background: #e2f3ee;
    color: #247468;
}

.tp-badge--warning {
    background: #fff1d9;
    color: #98601d;
}

.tp-badge--danger {
    background: #fbe5e2;
    color: #a83f3f;
}

.workspace-panel__heading,
.transaction-summary__item,
.detail-grid .detail-item {
    border-bottom-color: var(--brand-line);
}

.workflow-timeline-section {
    border-radius: 18px;
}

.workflow-timeline-card--current {
    border-color: rgba(216, 95, 67, .48);
    background: #fff7f3;
}

.workflow-marker--active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 5px rgba(216, 95, 67, .13);
}

.workflow-marker--done {
    background: var(--brand-success);
    border-color: var(--brand-success);
}

@keyframes tp-rise {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.tp-content > *,
.transaction-workspace > * {
    animation: tp-rise .42s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .tp-content > *,
    .transaction-workspace > * {
        animation: none;
    }
}

@media (max-width: 1100px) {
    .tp-topbar__inner,
    .tp-container {
        width: calc(100% - 28px);
    }

    .tp-app-layout {
        grid-template-columns: 210px minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .tp-topbar__inner,
    .tp-container {
        width: calc(100% - 20px);
    }

    .tp-sidebar {
        border-radius: 14px;
    }
}

/* ---------- Hosted checkout ---------- */

.checkout-shell {
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.22fr);
    gap: 28px;
    align-items: center;
    max-width: 1080px;
    margin: 8vh auto 0;
}

.checkout-intro {
    padding: 18px 0;
}

.checkout-intro h1 {
    max-width: 440px;
    margin: 10px 0 16px;
    color: var(--tp-ink);
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: .98;
    letter-spacing: -.065em;
}

.checkout-intro p {
    max-width: 430px;
    color: var(--brand-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.checkout-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.checkout-trust span {
    padding: 7px 10px;
    border: 1px solid #c9e0db;
    border-radius: 999px;
    background: rgba(220, 239, 235, .7);
    color: #356c67;
    font-size: .72rem;
    font-weight: 800;
}

.checkout-card {
    padding: 28px;
    border-top: 5px solid var(--brand-primary);
    box-shadow: var(--tp-shadow-float);
}

.checkout-card__top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--brand-line);
}

.checkout-card__top h2 {
    margin: 5px 0 4px;
    color: var(--tp-ink);
    font-size: 1.28rem;
}

.checkout-card__top p {
    margin: 0;
    color: var(--brand-muted);
    font-size: .82rem;
}

.checkout-amount {
    flex: 0 0 auto;
    text-align: right;
}

.checkout-amount span,
.checkout-result__summary span {
    display: block;
    color: var(--brand-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.checkout-amount strong {
    display: block;
    margin-top: 5px;
    color: var(--tp-ink);
    font-size: 1.28rem;
}

.checkout-form {
    padding-top: 22px;
}

.checkout-form__section + .checkout-form__section {
    margin-top: 24px;
}

.checkout-form__section h3 {
    margin: 0 0 12px;
    color: var(--tp-ink);
    font-size: .95rem;
}

.checkout-methods {
    display: grid;
    gap: 9px;
}

.checkout-method {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--brand-line);
    border-radius: 11px;
    cursor: pointer;
}

.checkout-method:has(input:checked) {
    border-color: var(--brand-primary);
    background: #fff7f3;
    box-shadow: 0 0 0 3px rgba(216, 95, 67, .10);
}

.checkout-method input {
    accent-color: var(--brand-primary);
}

.checkout-method span {
    display: grid;
    gap: 2px;
}

.checkout-method small {
    color: var(--brand-muted);
    font-size: .72rem;
}

.checkout-submit {
    width: 100%;
    margin-top: 24px;
    min-height: 48px !important;
    font-size: .9rem !important;
}

.checkout-note {
    margin: 12px 0 0;
    color: var(--brand-muted);
    font-size: .72rem;
    line-height: 1.55;
    text-align: center;
}

.checkout-error {
    margin-top: 18px;
    padding: 10px 12px;
    border: 1px solid #f0c9c1;
    border-radius: 9px;
    background: #fff4f1;
}

.checkout-result {
    max-width: 620px;
    margin: 10vh auto 0;
    padding: 42px;
    text-align: center;
}

.checkout-result__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--tp-mint);
    color: var(--brand-success);
    font-size: 1.7rem;
    font-weight: 800;
}

.checkout-result__icon--muted {
    background: #eef2f3;
    color: var(--brand-muted);
}

.checkout-result h1 {
    margin: 10px 0;
    color: var(--tp-ink);
    font-size: 2rem;
    letter-spacing: -.04em;
}

.checkout-result p {
    color: var(--brand-muted);
    line-height: 1.7;
}

.checkout-result__summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    margin: 24px 0;
    padding: 16px;
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    background: #f4f8f7;
    text-align: left;
}

.checkout-result__summary strong {
    color: var(--tp-ink);
    text-align: right;
}

@media (max-width: 760px) {
    .checkout-shell {
        display: block;
        margin-top: 24px;
    }

    .checkout-intro {
        padding: 8px 4px 20px;
    }

    .checkout-intro h1 {
        font-size: 2.7rem;
    }

    .checkout-card,
    .checkout-result {
        padding: 20px;
    }

    .checkout-card__top {
        display: block;
    }

    .checkout-amount {
        margin-top: 18px;
        text-align: left;
    }
}