.pending-transaction-section{color:#fff}.pending-transaction-section .head{display:flex;justify-content:space-between;text-transform:uppercase}.pending-transaction-section .head span{color:var(--pending-trans-section-head-span-color)}.pending-transaction-section .head a,.pending-transaction-section .head a:hover{color:var(--pending-trans-section-head-a-hover-color)}.pending-transaction-carousel{display:flex;flex-direction:row;width:100%;max-width:100%;overflow-x:scroll;gap:8px;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:16px 0}.transaction-item{width:310px;min-height:72px;max-height:120px;scroll-snap-align:start;flex-shrink:0;padding:16px 12px;border-radius:8px;display:flex;flex-direction:column;justify-content:center;gap:8px;cursor:pointer;background-color:var(--pending-trans-car-item-bg)}.transaction-item .info-section{display:flex;align-items:center;gap:8px}.transaction-item img{width:38px;height:38px}.transaction-item .info-section .details{flex-grow:1;display:flex;flex-direction:row;justify-content:space-between;font-size:14px}.transaction-item .info-section .details .highlight{padding-left:4px;color:#f99702}.transaction-item .info-section .details small{font-size:12px}.transaction-item .info-section .details small.ticket-number{display:flex;gap:4px;align-items:center}.transaction-item .info-section .details small .copy-btn{height:12px;width:auto;filter:invert(50%);cursor:pointer}.transaction-item .info-section .details>div:last-child{text-align:right}.transaction-item .info-section .details .primary{color:var(--pending-trans-car-item-info-section-details-primary-color)}.transaction-item .info-section .details .secondary{color:var(--pending-trans-car-item-info-section-details-secondary-color)}.transaction-item .download-qr-btn{background:var(--pending-trans-car-item-download-qr-btn-bg);color:var(--pending-trans-car-item-download-qr-btn-color);align-self:flex-end;border:0}.transaction-item .download-qr-btn:hover{background:var(--pending-trans-car-item-download-qr-btn-hover-bg);color:var(--pending-trans-car-item-download-qr-btn-hover-color)}table:has(+.empty-table-container){margin-bottom:0;padding-bottom:0}table tr td{cursor:pointer}.empty-table-container{background-color:#212121;width:100%;height:233px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;margin-bottom:16px}.pending-transaction-detail-container{display:flex;flex-direction:column;gap:24px}.pending-transaction-detail-container .primary{color:var(--pending-trans-detail-primary-color)}.pending-transaction-detail-container .secondary{color:var(--pending-trans-detail-secondary-color)}.pending-transaction-detail-container .pending{color:#f99702}.pending-transaction-detail-container .pending-transaction-detail-header{display:flex;flex-direction:column;align-items:center;gap:16px}.pending-transaction-detail-container .pending-transaction-detail-header img{width:74px;height:74px}.pending-transaction-detail-container .pending-transaction-detail-header .payment-method-info-container{display:flex;flex-direction:column;align-items:center;gap:8px}.pending-transaction-detail-container .pending-transaction-detail-header .payment-method-info-container .status-title{line-height:16px;font-size:16px;font-weight:500}.pending-transaction-detail-container .pending-transaction-detail-header .payment-method-info-container .payment-method{line-height:16px;font-size:12px;font-weight:500}.pending-transaction-detail-body{display:flex;flex-direction:column;gap:16px}.pending-transaction-payment-link-container{display:flex;flex-direction:column;align-items:center;gap:12px}.pending-transaction-payment-link-container a{color:#f99702}.pending-transaction-detail-card{display:flex;flex-direction:column;border-radius:8px;background-color:var(--pending-trans-detail-card-bg);border:1px solid var(--pending-trans-detail-card-border-color)}.pending-transaction-detail-card .secondary-section{background-color:var(--pending-trans-detail-card-secondary-section-bg)}.pending-transaction-detail-card>div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px;font-size:14px}.pending-transaction-detail-card>div .bank-icon{max-width:120px;max-height:20px}.pending-transaction-detail-card>div>div{width:calc((100% - 8px)/2);flex-grow:0;flex-shrink:0}.pending-transaction-detail-card>div>div:first-child,.pending-transaction-detail-card>div>span:first-child{text-align:left}.pending-transaction-detail-card .destination-account-name{text-align:left}.pending-transaction-detail-card .destination-account-number-section .destination-account-number{width:80%;display:flex;flex-direction:column;gap:4px;font-size:20px;font-weight:500;line-height:24px}.pending-transaction-detail-card .destination-account-number-section .destination-account-number span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.pending-transaction-detail-card .destination-account-number-section .destination-account-number .payment-account-name-label{font-size:12px}.pending-transaction-detail-card[data-payment-type="CRYPTO"] .destination-account-number-section,.pending-transaction-detail-card[data-payment-type="QR"] .destination-account-number-section{align-items:end}.pending-transaction-detail-card[data-payment-type="QR"] .destination-account-number-section .destination-account-number{font-size:16px;gap:0}.pending-transaction-detail-card[data-payment-type="QR"] .destination-account-number-section .destination-account-number .payment-account-name-label{font-size:14px}.pending-transaction-detail-card .destination-account-number-section .standard-button-group{width:max-content;text-align:right}.pending-transaction-detail-card .standard-button-group,.pending-transaction-detail-card .standard-button-group .btn{width:100%;margin:0;text-transform:capitalize;color:#fff}.pending-transaction-detail-card .copy-account-number-button{padding:4px 8px;margin:0}.pending-transaction-detail-card .pending-transaction-detail-qr-code-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:16px;background-color:var(--pending-trans-detail-card-secondary-section-bg)}.pending-transaction-detail-card .pending-transaction-detail-qr-code-container img{width:156px;height:156px;border-radius:8px;background-color:#fff}.pending-transaction-detail-card .pending-transaction-detail-qr-code-container br{display:none}.pending-transaction-detail-card .pending-transaction-detail-qr-code-container p{margin:0;font-size:14px;text-align:center}.pending-transaction-detail-card .pending-transaction-detail-qr-code-container .standard-button-group{align-self:stretch}.pending-transaction-remarks{display:flex;justify-content:center;align-items:center;padding:12px;border-radius:4px;text-align:center;background-color:#f8e68917;color:var(--pending-trans-detail-remarks-color);border:1px dashed #f8e689}.pending-transaction-info-section{display:flex;flex-direction:column;gap:8px}.pending-transaction-info-section .icon{width:16px;height:16px;margin-top:-2px}.pending-transaction-info-section .icon.chevron-icon{width:16px;height:16px;filter:var(--pending-trans-info-chevron-icon-filter);transform:rotate(270deg)}.pending-transaction-info-section.open .icon.chevron-icon{transform:rotate(90deg)}.pending-transaction-info-section .icon.copy-icon{filter:var(--pending-trans-info-copy-icon-filter)}.pending-transaction-info-section .info-section-header{padding:16px;cursor:pointer}.pending-transaction-info-section .info-section-body{display:none;padding:0 16px 16px}.pending-transaction-info-section.open .info-section-body{display:flex;flex-direction:column;gap:10px;border-top:0}.pending-transaction-info-section .info-section-body>div{display:flex;justify-content:space-between;align-items:center;width:100%}.pending-transaction-info-section .info-section-body>div>div{width:calc((100% - 8px)/2);flex-grow:0;flex-shrink:0;display:flex;align-items:center;gap:4px}.pending-transaction-info-section .info-section-body>div>div:nth-child(2){justify-content:flex-end;text-align:right}.how-to-pay-list{list-style:decimal;padding-left:24px}.how-to-pay-list li{margin-bottom:8px;padding-left:8px;text-align:left}.transactions-table.table{font-weight:500;font-size:14px;border-radius:8px;border:1px solid var(--transactions-table-border);background:var(--transactions-table-bg)}.transactions-table.table thead{background:var(--transactions-table-head-bg);color:var(--transactions-table-head-color);border:1px solid var(--transactions-table-head-border)}.transactions-table.table tbody{background:var(--transactions-table-body-bg);color:var(--transactions-table-body-color)}.transactions-table.table thead>tr>th,.transactions-table.table tbody>tr>th,.transactions-table.table thead>tr>td,.transactions-table.table tbody>tr>td{border:0;padding:16px 6px}.transactions-table.table thead tr th:first-child,.transactions-table.table tbody tr td:first-child{padding-left:16px}.transactions-table.table thead tr th:last-child,.transactions-table.table tbody tr td:last-child{padding-right:16px}.transactions-table.table tbody span.transfer-status-4,.transactions-table.table tbody span.transfer-status-4{color:var(--transactions-table-body-span-app-color)}.transactions-table.table tbody span.transfer-status-7,.transactions-table.table tbody span.transfer-status-8{color:var(--transactions-table-body-span-reject-color)}.transactions-table.table tbody span.transfer-status-1,.transactions-table.table tbody span.transfer-status-2{color:var(--transactions-table-body-span-pending-color)}.transactions-table.table .transfer-type-3.transfer-status-4::before,.transactions-table.table .positive.transfer-type-5.transfer-status-4::before{content:'+ '}.transactions-table.table .transfer-type-4.transfer-status-4::before{content:'- '}.transactions-table.table tbody span.amount:not(.transfer-status-4),.transactions-table.table tbody span.amount:not(.transfer-type-3){color:var(--transactions-table-body-color)}.transactions-table.table tbody span.amount.positive.transfer-status-4:not(.transfer-type-4){color:var(--transactions-table-body-span-app-color)}.transactions-table.table tbody tr:nth-child(odd){background:var(--transactions-table-body-tr-odd-bg)}.transactions-table.table tbody tr:nth-child(even){background:var(--transactions-table-body-tr-even-bg)}.transactions-table.table tfoot>tr>td{border:0}.transactions-table+.empty-table-container{background-color:var(--transaction-table-empty-bg);color:var(--transaction-table-empty-color);border:1px solid var(--transactions-table-head-border)}.transactions-table+.empty-table-container img{filter:var(--transaction-table-empty-img-filter)}.concise-transaction-popup:has(.pending-transaction-detail-container) .modal-content{border:5px solid var(--reporting-detail-popup-bg);background-color:var(--reporting-detail-popup-bg)}.transactions-table.table tfoot>tr>td,.transactions-table.table .pagination-section{text-align:right}.transactions-table.table tfoot>tr>td>a,.transactions-table.table .pagination-section a{margin:0 4px}.transactions-table .reporting-button-group{margin:0}.transactions-table .reporting-button-group .btn{width:100px;padding:4px 8px}
/* ============================================
   TANJUNGTOTO — Pending Transaction Section
   Elegant Gold & Amber Theme
   ============================================ */

/* --- Root Variables Override --- */
:root {
  /* Pending Transaction Specific */
  --pending-trans-section-head-span-color: #C9A227;
  --pending-trans-section-head-a-hover-color: #E0A526;

  /* Transaction Card */
  --pending-trans-car-item-bg: linear-gradient(135deg, #2A2118 0%, #1C1611 100%);

  /* Card Text */
  --pending-trans-car-item-info-section-details-primary-color: #F5E6C8;
  --pending-trans-car-item-info-section-details-secondary-color: #A89060;

  /* Download QR Button */
  --pending-trans-car-item-download-qr-btn-bg: linear-gradient(135deg, #C9A227 0%, #D9822B 100%);
  --pending-trans-car-item-download-qr-btn-color: #1C1611;
  --pending-trans-car-item-download-qr-btn-hover-bg: linear-gradient(135deg, #B8912A 0%, #C97A22 100%);
  --pending-trans-car-item-download-qr-btn-hover-color: #1C1611;

  /* Detail Container */
  --pending-trans-detail-primary-color: #F5E6C8;
  --pending-trans-detail-secondary-color: #A89060;

  /* Detail Card */
  --pending-trans-detail-card-bg: #2A2118;
  --pending-trans-detail-card-border-color: rgba(201, 162, 39, 0.25);
  --pending-trans-detail-card-secondary-section-bg: #1C1611;

  /* Remarks */
  --pending-trans-detail-remarks-color: #E0A526;

  /* Info Section */
  --pending-trans-info-chevron-icon-filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(360deg);
  --pending-trans-info-copy-icon-filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(360deg);

  /* Transactions Table */
  --transactions-table-border: rgba(201, 162, 39, 0.3);
  --transactions-table-bg: #1C1611;
  --transactions-table-head-bg: linear-gradient(135deg, #2A2118 0%, #3A2E20 100%);
  --transactions-table-head-color: #C9A227;
  --transactions-table-head-border: rgba(201, 162, 39, 0.4);
  --transactions-table-body-bg: #2A2118;
  --transactions-table-body-color: #F5E6C8;
  --transactions-table-body-tr-odd-bg: #2A2118;
  --transactions-table-body-tr-even-bg: #221A12;

  /* Status Colors */
  --transactions-table-body-span-app-color: #9BCF3E;
  --transactions-table-body-span-reject-color: #E0704A;
  --transactions-table-body-span-pending-color: #E0A526;

  /* Empty State */
  --transaction-table-empty-bg: #221A12;
  --transaction-table-empty-color: #A89060;
  --transaction-table-empty-img-filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(360deg);

  /* Reporting Popup */
  --reporting-detail-popup-bg: #1C1611;
}

/* ============================================
   SECTION OVERRIDES
   ============================================ */

/* --- Pending Transaction Section --- */
.pending-transaction-section {
  color: #F5E6C8;
}

.pending-transaction-section .head {
  border-bottom: 1px solid rgba(201, 162, 39, 0.2);
  padding-bottom: 12px;
  margin-bottom: 8px;
}

.pending-transaction-section .head span {
  color: #C9A227;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.pending-transaction-section .head a {
  color: #D9822B;
  transition: color 0.3s ease;
}

.pending-transaction-section .head a:hover {
  color: #E0A526;
  text-decoration: none;
}

/* --- Carousel Scrollbar --- */
.pending-transaction-carousel::-webkit-scrollbar {
  height: 6px;
}
.pending-transaction-carousel::-webkit-scrollbar-track {
  background: #1C1611;
  border-radius: 3px;
}
.pending-transaction-carousel::-webkit-scrollbar-thumb {
  background: #8C6D2F;
  border-radius: 3px;
}
.pending-transaction-carousel::-webkit-scrollbar-thumb:hover {
  background: #C9A227;
}

/* --- Transaction Item Card --- */
.transaction-item {
  background: linear-gradient(135deg, #2A2118 0%, #1C1611 100%);
  border: 1px solid rgba(201, 162, 39, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.transaction-item:hover {
  border-color: rgba(201, 162, 39, 0.5);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.15);
  transform: translateY(-2px);
}

.transaction-item .info-section .details .highlight {
  color: #E0A526;
  font-weight: 600;
}

.transaction-item .info-section .details .primary {
  color: #F5E6C8;
  font-weight: 600;
}

.transaction-item .info-section .details .secondary {
  color: #A89060;
}

.transaction-item .info-section .details small {
  color: #A89060;
}

.transaction-item .info-section .details small .copy-btn {
  filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(360deg);
}

/* --- Download QR Button --- */
.transaction-item .download-qr-btn {
  background: linear-gradient(135deg, #C9A227 0%, #D9822B 100%);
  color: #1C1611;
  font-weight: 700;
  border-radius: 4px;
  padding: 6px 12px;
  transition: all 0.3s ease;
}

.transaction-item .download-qr-btn:hover {
  background: linear-gradient(135deg, #B8912A 0%, #C97A22 100%);
  color: #1C1611;
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3);
}

/* ============================================
   DETAIL CONTAINER
   ============================================ */

.pending-transaction-detail-container .primary {
  color: #F5E6C8;
}

.pending-transaction-detail-container .secondary {
  color: #A89060;
}

.pending-transaction-detail-container .pending {
  color: #E0A526;
}

.pending-transaction-detail-header img {
  filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.4));
}

.pending-transaction-detail-header .payment-method-info-container .status-title {
  color: #F5E6C8;
  font-weight: 700;
}

.pending-transaction-detail-header .payment-method-info-container .payment-method {
  color: #A89060;
}

/* --- Payment Link --- */
.pending-transaction-payment-link-container a {
  color: #D9822B;
  transition: color 0.3s ease;
}

.pending-transaction-payment-link-container a:hover {
  color: #E0A526;
  text-decoration: none;
}

/* ============================================
   DETAIL CARD
   ============================================ */

.pending-transaction-detail-card {
  background-color: #2A2118;
  border: 1px solid rgba(201, 162, 39, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pending-transaction-detail-card .secondary-section {
  background-color: #1C1611;
}

.pending-transaction-detail-card > div {
  border-bottom: 1px solid rgba(201, 162, 39, 0.1);
}

.pending-transaction-detail-card > div:last-child {
  border-bottom: 0;
}

.pending-transaction-detail-card .destination-account-number-section .destination-account-number {
  color: #F5E6C8;
}

.pending-transaction-detail-card .destination-account-number-section .destination-account-number .payment-account-name-label {
  color: #A89060;
}

.pending-transaction-detail-card .destination-account-name {
  color: #A89060;
}

/* --- Copy Button --- */
.pending-transaction-detail-card .copy-account-number-button {
  background: rgba(201, 162, 39, 0.15);
  border: 1px solid rgba(201, 162, 39, 0.3);
  color: #C9A227;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.pending-transaction-detail-card .copy-account-number-button:hover {
  background: rgba(201, 162, 39, 0.25);
  border-color: #C9A227;
  color: #E0A526;
}

/* --- QR Code Container --- */
.pending-transaction-detail-card .pending-transaction-detail-qr-code-container {
  background-color: #1C1611;
}

.pending-transaction-detail-card .pending-transaction-detail-qr-code-container img {
  border: 2px solid rgba(201, 162, 39, 0.4);
  box-shadow: 0 4px 16px rgba(201, 162, 39, 0.15);
}

.pending-transaction-detail-card .pending-transaction-detail-qr-code-container p {
  color: #A89060;
}

/* ============================================
   REMARKS
   ============================================ */

.pending-transaction-remarks {
  background-color: rgba(224, 165, 38, 0.08);
  color: #E0A526;
  border: 1px dashed rgba(224, 165, 38, 0.5);
  border-radius: 6px;
}

/* ============================================
   INFO SECTION (Accordion)
   ============================================ */

.pending-transaction-info-section .info-section-header {
  border-bottom: 1px solid rgba(201, 162, 39, 0.15);
  transition: background 0.3s ease;
}

.pending-transaction-info-section .info-section-header:hover {
  background: rgba(201, 162, 39, 0.05);
}

.pending-transaction-info-section.open .info-section-header {
  background: rgba(201, 162, 39, 0.08);
  border-bottom-color: rgba(201, 162, 39, 0.3);
}

.pending-transaction-info-section .info-section-body {
  color: #A89060;
}

.pending-transaction-info-section .info-section-body > div > div:first-child {
  color: #A89060;
}

.pending-transaction-info-section .info-section-body > div > div:nth-child(2) {
  color: #F5E6C8;
}

.pending-transaction-info-section .icon.chevron-icon {
  filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(360deg);
}

.pending-transaction-info-section .icon.copy-icon {
  filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(360deg);
}

/* ============================================
   HOW TO PAY LIST
   ============================================ */

.how-to-pay-list {
  color: #A89060;
}

.how-to-pay-list li {
  color: #A89060;
}

.how-to-pay-list li::marker {
  color: #C9A227;
}

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

.transactions-table.table {
  border-radius: 8px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  background: #1C1611;
  overflow: hidden;
}

.transactions-table.table thead {
  background: linear-gradient(135deg, #2A2118 0%, #3A2E20 100%);
  color: #C9A227;
  border-bottom: 1px solid rgba(201, 162, 39, 0.4);
}

.transactions-table.table thead > tr > th {
  color: #C9A227;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.transactions-table.table tbody {
  background: #2A2118;
  color: #F5E6C8;
}

.transactions-table.table tbody tr {
  transition: background 0.2s ease;
}

.transactions-table.table tbody tr:nth-child(odd) {
  background: #2A2118;
}

.transactions-table.table tbody tr:nth-child(even) {
  background: #221A12;
}

.transactions-table.table tbody tr:hover {
  background: rgba(201, 162, 39, 0.08);
}

.transactions-table.table tbody span.transfer-status-4 {
  color: #9BCF3E;
  font-weight: 600;
}

.transactions-table.table tbody span.transfer-status-7,
.transactions-table.table tbody span.transfer-status-8 {
  color: #E0704A;
  font-weight: 600;
}

.transactions-table.table tbody span.transfer-status-1,
.transactions-table.table tbody span.transfer-status-2 {
  color: #E0A526;
  font-weight: 600;
}

.transactions-table.table tbody span.amount.positive.transfer-status-4:not(.transfer-type-4) {
  color: #9BCF3E;
}

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

.empty-table-container {
  background-color: #221A12;
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-radius: 8px;
  color: #A89060;
}

.empty-table-container img {
  filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(360deg);
}

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

.transactions-table.table .pagination-section a {
  color: #C9A227;
  transition: color 0.3s ease;
}

.transactions-table.table .pagination-section a:hover {
  color: #E0A526;
}

/* ============================================
   REPORTING POPUP
   ============================================ */

.concise-transaction-popup:has(.pending-transaction-detail-container) .modal-content {
  border: 5px solid #1C1611;
  background-color: #1C1611;
}

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

@media (max-width: 768px) {
  .transaction-item {
    width: 280px;
    min-height: 68px;
  }

  .pending-transaction-detail-card .destination-account-number-section .destination-account-number {
    font-size: 16px;
  }

  .transactions-table.table thead > tr > th,
  .transactions-table.table tbody > tr > td {
    padding: 12px 4px;
    font-size: 12px;
  }
}