:root {
    --text-main: #ffffff;
    --text-dim: #94a3b8;
    --border-color: #1a1a1a;
    --status-bg: rgba(34, 197, 94, 0.1);
    --status-text: #22c55e;
    --scroll-thumb: #333333;
}

/* 1. THE SWIPE WRAPPER */
.payment-swipe-container {
    width: 100%;
    overflow-x: auto; /* Enables horizontal swiping */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    background: transparent;
}

/* 2. THE TABLE STructure */
.payment-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px; /* Forces swipe mode on small mobile screens */
    color: var(--text-main);
    font-family: 'Neue Montreal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.payment-table th {
    text-align: left;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 400;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.payment-table td {
    padding: 18px 15px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    white-space: nowrap; /* Prevents text wrapping during swipe */
    color: var(--text-main); /* Ensure rows are white */
}

.payment-table tr:last-child td {
    border-bottom: none;
}

/* 3. STATUS PILL */
.status-pill {
    background-color: var(--status-bg);
    color: var(--status-text);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

/* Optional: Additional status colors for dynamic logic while keeping base design */
.status-pill.status-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.status-pill.status-warning {
    background-color: rgba(234, 179, 8, 0.1);
    color: #eab308;
}

/* 4. SCROLLBAR STYLING (Optional for Desktop) */
.payment-swipe-container::-webkit-scrollbar {
    height: 4px;
}
.payment-swipe-container::-webkit-scrollbar-track {
    background: transparent;
}
.payment-swipe-container::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 10px;
}