/* =========================================================
   PREMIUM TRANSACTION THEME OVERRIDE
   Red / Black / Gold
   Append this block below the original CSS
========================================================== */

:root {
    --trx-black-950: #050505;
    --trx-black-900: #090909;
    --trx-black-850: #111111;
    --trx-black-800: #181818;
    --trx-black-750: #212121;
    --trx-red: #d90429;
    --trx-red-bright: #ff1744;
    --trx-red-dark: #720014;
    --trx-gold: #d4af37;
    --trx-gold-bright: #ffd76a;
    --trx-gold-dark: #775900;
    --trx-text: #f8f3e6;
    --trx-muted: #aaa59a;
    --trx-line: rgba(212, 175, 55, .22);
    --trx-gold-glow: rgba(212, 175, 55, .24);
    --trx-red-glow: rgba(255, 23, 68, .22);

    --transaction-download-qr-bg:
        linear-gradient(135deg, var(--trx-gold-bright), var(--trx-gold));
    --transaction-download-qr-color: #090909;
}

.standard-form-title.flex {
    color: var(--trx-gold-bright);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, .82),
        0 0 14px var(--trx-gold-glow);
}

.standard-form-title a {
    color: var(--trx-gold-bright);
    transition:
        color .2s ease,
        text-shadow .2s ease;
}

.standard-form-title a:hover,
.standard-form-title a:focus {
    color: var(--trx-red-bright);
    text-shadow: 0 0 10px var(--trx-red-glow);
}

.pending-transaction-section {
    color: var(--trx-text);
}

.pending-transaction-section .head {
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, .18);
}

.pending-transaction-section .head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 120px;
    height: 2px;
    background:
        linear-gradient(90deg, var(--trx-red), var(--trx-gold));
    box-shadow: 0 0 10px var(--trx-gold-glow);
}

.pending-transaction-section .head span {
    color: var(--trx-gold-bright);
    font-weight: 700;
    letter-spacing: .045em;
    text-shadow: 0 0 10px var(--trx-gold-glow);
}

.pending-transaction-section .head a,
.pending-transaction-section .head a:hover {
    color: var(--trx-gold-bright);
}

.pending-transaction-section .head a:hover {
    color: var(--trx-red-bright);
    text-shadow: 0 0 10px var(--trx-red-glow);
}

.pending-transaction-carousel {
    padding: 18px 2px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--trx-gold) var(--trx-black-850);
}

.pending-transaction-carousel::-webkit-scrollbar {
    height: 8px;
}

.pending-transaction-carousel::-webkit-scrollbar-track {
    background: var(--trx-black-850);
    border-radius: 999px;
}

.pending-transaction-carousel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--trx-red), var(--trx-gold));
    box-shadow: 0 0 10px rgba(212, 175, 55, .14);
}

.transaction-item {
    position: relative;
    overflow: hidden;
    color: var(--trx-text);
    background:
        radial-gradient(circle at 8% 0%, rgba(217, 4, 41, .12), transparent 36%),
        linear-gradient(145deg, #1a1a1a, #090909);
    border: 1px solid rgba(212, 175, 55, .22);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .025);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.transaction-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background:
        linear-gradient(var(--trx-red), var(--trx-gold));
    box-shadow: 0 0 12px var(--trx-gold-glow);
}

.transaction-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 42%;
    height: 100%;
    pointer-events: none;
    background:
        linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent);
    transform: skewX(-18deg);
    transition: left .65s ease;
}

.transaction-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 215, 106, .50);
    background:
        radial-gradient(circle at 8% 0%, rgba(217, 4, 41, .18), transparent 38%),
        linear-gradient(145deg, #202020, #0b0b0b);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .46),
        0 0 18px rgba(212, 175, 55, .08);
}

.transaction-item:hover::after {
    left: 145%;
}

.transaction-item .info-section .details .primary {
    color: var(--trx-text);
    font-weight: 700;
}

.transaction-item .info-section .details .secondary {
    color: var(--trx-muted);
}

.transaction-item .info-section .details .highlight {
    color: var(--trx-gold-bright);
    text-shadow: 0 0 9px var(--trx-gold-glow);
}

.transaction-item img {
    padding: 4px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(212, 175, 55, .16);
    box-shadow: 0 0 12px rgba(212, 175, 55, .07);
}

.transaction-item .info-section .details small .copy-btn {
    filter:
        brightness(0)
        saturate(100%)
        invert(84%)
        sepia(48%)
        saturate(666%)
        hue-rotate(351deg)
        brightness(106%)
        contrast(103%);
    transition:
        transform .18s ease,
        filter .18s ease;
}

.transaction-item .info-section .details small .copy-btn:hover {
    transform: scale(1.12);
    filter:
        brightness(0)
        saturate(100%)
        invert(20%)
        sepia(95%)
        saturate(5892%)
        hue-rotate(342deg)
        brightness(103%)
        contrast(104%);
}

.transaction-item .download-qr-btn {
    position: relative;
    overflow: hidden;
    color: #090909;
    font-weight: 700;
    border: 1px solid rgba(255, 215, 106, .56);
    background:
        linear-gradient(135deg, var(--trx-gold-bright), var(--trx-gold));
    box-shadow:
        0 7px 18px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .30);
    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.transaction-item .download-qr-btn:hover {
    color: #fff;
    background:
        linear-gradient(135deg, var(--trx-red), var(--trx-red-dark));
    transform: translateY(-1px);
    box-shadow:
        0 9px 22px rgba(0, 0, 0, .38),
        0 0 14px var(--trx-red-glow);
}

.empty-table-container {
    color: var(--trx-muted);
    background:
        radial-gradient(circle at 50% 20%, rgba(212, 175, 55, .07), transparent 36%),
        linear-gradient(145deg, #171717, #090909);
    border: 1px dashed rgba(212, 175, 55, .24);
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .02),
        0 12px 30px rgba(0, 0, 0, .26);
}

.empty-table-container img {
    opacity: .72;
    filter:
        brightness(0)
        saturate(100%)
        invert(82%)
        sepia(49%)
        saturate(523%)
        hue-rotate(352deg)
        brightness(105%)
        contrast(102%);
}

.pending-transaction-detail-container {
    color: var(--trx-text);
}

.pending-transaction-detail-container .primary {
    color: var(--trx-text);
}

.pending-transaction-detail-container .secondary {
    color: var(--trx-muted);
}

.pending-transaction-detail-container .pending {
    color: var(--trx-gold-bright);
    text-shadow: 0 0 10px var(--trx-gold-glow);
}

.pending-transaction-detail-container .pending-transaction-detail-header img {
    padding: 6px;
    object-fit: contain;
    border-radius: 16px;
    background:
        linear-gradient(145deg, #1b1b1b, #0b0b0b);
    border: 1px solid rgba(212, 175, 55, .28);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, .34),
        0 0 18px rgba(212, 175, 55, .08);
}

.pending-transaction-detail-container
.pending-transaction-detail-header
.payment-method-info-container
.status-title {
    color: var(--trx-gold-bright);
    text-shadow: 0 0 10px var(--trx-gold-glow);
}

.pending-transaction-detail-container
.pending-transaction-detail-header
.payment-method-info-container
.payment-method {
    color: var(--trx-muted);
}

.pending-transaction-payment-link-container a {
    color: var(--trx-gold-bright);
}

.pending-transaction-payment-link-container a:hover,
.pending-transaction-payment-link-container a:focus {
    color: var(--trx-red-bright);
    text-shadow: 0 0 10px var(--trx-red-glow);
}

.pending-transaction-detail-card {
    position: relative;
    overflow: hidden;
    color: var(--trx-text);
    background:
        radial-gradient(circle at 8% 0%, rgba(217, 4, 41, .10), transparent 34%),
        linear-gradient(145deg, #1a1a1a, #090909);
    border-color: rgba(212, 175, 55, .24);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.pending-transaction-detail-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--trx-red), var(--trx-gold));
    box-shadow: 0 0 12px var(--trx-gold-glow);
}

.pending-transaction-detail-card .secondary-section {
    background:
        linear-gradient(90deg, rgba(217, 4, 41, .08), rgba(212, 175, 55, .035));
    border-top: 1px solid rgba(212, 175, 55, .12);
    border-bottom: 1px solid rgba(212, 175, 55, .12);
}

.pending-transaction-detail-card>div {
    color: var(--trx-text);
}

.pending-transaction-detail-card .destination-account-number-section .destination-account-number {
    color: var(--trx-gold-bright);
    text-shadow: 0 0 10px rgba(212, 175, 55, .16);
}

.pending-transaction-detail-card
.destination-account-number-section
.destination-account-number
.payment-account-name-label {
    color: var(--trx-muted);
    text-shadow: none;
}

.pending-transaction-detail-card .copy-account-number-button,
.pending-transaction-detail-card .standard-button-group .btn {
    position: relative;
    overflow: hidden;
    color: #090909;
    font-weight: 700;
    background:
        linear-gradient(135deg, var(--trx-gold-bright), var(--trx-gold));
    border: 1px solid rgba(255, 215, 106, .56);
    box-shadow:
        0 7px 18px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .28);
    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.pending-transaction-detail-card .copy-account-number-button:hover,
.pending-transaction-detail-card .standard-button-group .btn:hover {
    color: #fff;
    background:
        linear-gradient(135deg, var(--trx-red), var(--trx-red-dark));
    transform: translateY(-1px);
    box-shadow:
        0 9px 22px rgba(0, 0, 0, .36),
        0 0 14px var(--trx-red-glow);
}

.pending-transaction-detail-card .pending-transaction-detail-qr-code-container {
    background:
        radial-gradient(circle at 50% 16%, rgba(212, 175, 55, .08), transparent 38%),
        linear-gradient(145deg, #171717, #0a0a0a);
}

.pending-transaction-detail-card
.pending-transaction-detail-qr-code-container
img {
    padding: 8px;
    background-color: #fff;
    border: 2px solid var(--trx-gold);
    box-shadow:
        0 0 0 4px rgba(212, 175, 55, .06),
        0 0 26px rgba(212, 175, 55, .16);
}

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

.pending-transaction-remarks {
    color: var(--trx-text);
    background:
        linear-gradient(90deg, rgba(217, 4, 41, .12), rgba(212, 175, 55, .07));
    border-color: var(--trx-gold);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03),
        0 8px 22px rgba(0, 0, 0, .22);
}

.pending-transaction-info-section {
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, .18);
    border-radius: 8px;
    background:
        linear-gradient(145deg, #151515, #090909);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .26);
}

.pending-transaction-info-section .info-section-header {
    color: var(--trx-gold-bright);
    font-weight: 700;
    background:
        linear-gradient(90deg, rgba(217, 4, 41, .10), rgba(212, 175, 55, .035));
    transition:
        color .2s ease,
        background .2s ease;
}

.pending-transaction-info-section .info-section-header:hover {
    color: #fff;
    background:
        linear-gradient(90deg, rgba(217, 4, 41, .24), rgba(212, 175, 55, .08));
}

.pending-transaction-info-section .icon.chevron-icon,
.pending-transaction-info-section .icon.copy-icon {
    filter:
        brightness(0)
        saturate(100%)
        invert(83%)
        sepia(50%)
        saturate(590%)
        hue-rotate(352deg)
        brightness(105%)
        contrast(102%);
    transition:
        transform .22s ease,
        filter .22s ease;
}

.pending-transaction-info-section.open .icon.chevron-icon {
    transform: rotate(90deg);
    filter:
        brightness(0)
        saturate(100%)
        invert(19%)
        sepia(99%)
        saturate(5704%)
        hue-rotate(342deg)
        brightness(104%)
        contrast(104%);
}

.pending-transaction-info-section .info-section-body {
    color: #d7d1c5;
    background-color: rgba(0, 0, 0, .12);
}

.pending-transaction-info-section.open .info-section-body {
    border-top: 1px solid rgba(212, 175, 55, .12);
}

.how-to-pay-list li::marker {
    color: var(--trx-gold-bright);
    font-weight: 700;
}

/* Transactions table */
.transactions-table.table {
    color: var(--trx-text);
    background:
        linear-gradient(145deg, #151515, #090909);
    border-color: rgba(212, 175, 55, .20);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .02);
}

.transactions-table.table thead {
    color: var(--trx-gold-bright);
    background:
        linear-gradient(90deg, var(--trx-red-dark), #151515, var(--trx-gold-dark));
    border-color: rgba(212, 175, 55, .28);
}

.transactions-table.table thead tr th {
    color: var(--trx-gold-bright);
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    text-shadow: 0 0 9px rgba(212, 175, 55, .14);
}

.transactions-table.table tbody {
    color: #d7d1c5;
    background: #101010;
}

.transactions-table.table tbody tr {
    transition:
        background .18s ease,
        box-shadow .18s ease;
}

.transactions-table.table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, .018);
}

.transactions-table.table tbody tr:nth-child(even) {
    background-color: rgba(212, 175, 55, .035);
}

.transactions-table.table tbody tr:hover {
    background:
        linear-gradient(90deg, rgba(217, 4, 41, .12), rgba(212, 175, 55, .06));
    box-shadow:
        inset 3px 0 0 var(--trx-red),
        inset -3px 0 0 var(--trx-gold);
}

.transactions-table.table tbody span.transfer-status-4,
.transactions-table.table tbody span.amount.positive.transfer-status-4:not(.transfer-type-4) {
    color: var(--trx-gold-bright);
    font-weight: 700;
    text-shadow: 0 0 9px var(--trx-gold-glow);
}

.transactions-table.table tbody span.transfer-status-7,
.transactions-table.table tbody span.transfer-status-8 {
    color: var(--trx-red-bright);
    font-weight: 700;
    text-shadow: 0 0 9px var(--trx-red-glow);
}

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

.transactions-table.table tbody span.amount:not(.transfer-status-4),
.transactions-table.table tbody span.amount:not(.transfer-type-3) {
    color: var(--trx-text);
}

.transactions-table+.empty-table-container {
    color: var(--trx-muted);
    background:
        linear-gradient(145deg, #171717, #090909);
    border-color: rgba(212, 175, 55, .20);
}

.transactions-table.table tfoot>tr>td,
.transactions-table .pagination-section {
    color: var(--trx-muted);
    background-color: #0d0d0d;
    border-top: 1px solid rgba(212, 175, 55, .12);
}

.transactions-table.table tfoot>tr>td>a,
.transactions-table .pagination-section a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    color: var(--trx-gold-bright);
    background: #151515;
    border: 1px solid rgba(212, 175, 55, .20);
    border-radius: 5px;
    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.transactions-table.table tfoot>tr>td>a:hover,
.transactions-table .pagination-section a:hover {
    color: #fff;
    background:
        linear-gradient(135deg, var(--trx-red), var(--trx-red-dark));
    border-color: var(--trx-red-bright);
    transform: translateY(-1px);
    box-shadow: 0 0 12px var(--trx-red-glow);
}

.transactions-table .reporting-button-group .btn {
    color: #090909;
    font-weight: 700;
    background:
        linear-gradient(135deg, var(--trx-gold-bright), var(--trx-gold));
    border: 1px solid rgba(255, 215, 106, .52);
    box-shadow:
        0 7px 18px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}

.transactions-table .reporting-button-group .btn:hover {
    color: #fff;
    background:
        linear-gradient(135deg, var(--trx-red), var(--trx-red-dark));
}

::selection {
    color: #090909;
    background: var(--trx-gold-bright);
}

@media (max-width: 767px) {
    .transaction-item {
        width: min(290px, 86vw);
    }

    .pending-transaction-detail-card>div {
        gap: 10px;
    }

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

    .transactions-table.table {
        box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
    }
}

@media (prefers-reduced-motion: reduce) {
    .transaction-item,
    .transaction-item::after,
    .transaction-item .download-qr-btn,
    .transaction-item .info-section .details small .copy-btn,
    .pending-transaction-detail-card .copy-account-number-button,
    .pending-transaction-detail-card .standard-button-group .btn,
    .pending-transaction-info-section .info-section-header,
    .pending-transaction-info-section .icon.chevron-icon,
    .pending-transaction-info-section .icon.copy-icon,
    .transactions-table.table tbody tr,
    .transactions-table.table tfoot>tr>td>a,
    .transactions-table .pagination-section a {
        transition: none !important;
    }
}