.payment-requests-table-wrapper {
overflow-x: auto;
border-radius: 12px;
border: 1px solid var(--border);
background: #fff;
margin-top: 20px;
}

.payment-requests-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

.payment-requests-table thead {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.payment-requests-table th {
padding: 16px 20px;
text-align: left;
font-weight: 600;
color: #fff;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.payment-requests-table th:first-child {
border-top-left-radius: 12px;
}

.payment-requests-table th:last-child {
border-top-right-radius: 12px;
}

.payment-requests-table td {
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
color: #1e293b;
vertical-align: middle;
}

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

.payment-requests-table tbody tr:hover {
background: #f8fafc;
}

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

.payment-status-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}

.payment-status-badge.status-pending {
background: #fef3c7;
color: #92400e;
}

.payment-status-badge.status-approved {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.payment-status-badge.status-rejected {
background: #fee2e2;
color: #991b1b;
}

.payment-status-badge.status-cancelled {
background: #e2e8f0;
color: #64748b;
}

.payment-request-modal-content {
max-height: 80vh;
overflow-y: auto;
padding: 4px;
}

.payment-request-modal-content::-webkit-scrollbar {
width: 8px;
}

.payment-request-modal-content::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}

.payment-request-modal-content::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}

.payment-request-modal-content::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}

.payment-form-section {
margin-bottom: 24px;
}

.payment-form-section .form-group {
margin-bottom: 20px;
}

.payment-form-section label {
display: block;
font-size: 13px;
font-weight: 600;
color: #475569;
margin-bottom: 8px;
}

.payment-form-section .form-control {
width: 100%;
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
transition: all 0.2s ease;
}

.payment-form-section .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.1);
outline: none;
}

.payment-form-section .form-control[readonly] {
background: #f8fafc;
color: #64748b;
cursor: not-allowed;
}

.payment-form-section small {
display: block;
margin-top: 6px;
font-size: 12px;
color: #94a3b8;
line-height: 1.5;
}

.payment-summary-section {
background: #f8fafc;
border-radius: 12px;
padding: 24px;
margin: 24px 0;
border: 2px solid #e2e8f0;
}

.payment-summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e2e8f0;
}

.payment-summary-item:last-child {
border-bottom: none;
}

.payment-summary-item.final {
border-top: 2px solid var(--primary);
margin-top: 12px;
padding-top: 16px;
}

.summary-label {
font-size: 14px;
font-weight: 600;
color: #475569;
}

.summary-value {
font-size: 16px;
font-weight: 700;
color: #1e293b;
}

.summary-value.discount-amount {
color: #10b981;
}

.summary-value.final-amount {
font-size: 20px;
color: var(--primary);
}

.payment-account-section {
margin-top: 24px;
padding-top: 24px;
border-top: 2px solid #e2e8f0;
}

.payment-account-section h6 {
margin: 0 0 16px 0;
font-size: 16px;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 8px;
}

.payment-account-section h6 i {
color: var(--primary);
font-size: 18px;
}

.account-info {
background: #fff;
border-radius: 8px;
padding: 20px;
border: 1px solid #e2e8f0;
}

.account-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f1f5f9;
}

.account-item:last-child {
border-bottom: none;
}

.account-label {
font-size: 13px;
font-weight: 600;
color: #64748b;
}

.account-value {
font-size: 15px;
font-weight: 700;
color: #1e293b;
font-family: 'Courier New', monospace;
letter-spacing: 1px;
}

@media (max-width: 768px) {
.payment-requests-table-wrapper {
border-radius: 8px;
overflow-x: auto;
}

.payment-requests-table {
font-size: 12px;
}

.payment-requests-table th,
.payment-requests-table td {
padding: 12px 16px;
}

.payment-request-modal-content {
max-height: 85vh;
}

.payment-summary-section {
padding: 20px;
}

.summary-value.final-amount {
font-size: 18px;
}

.account-info {
padding: 16px;
}
}

.payment-step-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 2px solid #e2e8f0;
}

.step-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
position: relative;
}

.step-item:not(:last-child)::after {
content: '';
position: absolute;
top: 16px;
left: calc(50% + 20px);
width: 48px;
height: 2px;
background: #e2e8f0;
z-index: 0;
}

.step-item.completed:not(:last-child)::after {
background: var(--primary);
}

.step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: #e2e8f0;
color: #94a3b8;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}

.step-item.active .step-number {
background: var(--primary);
color: #fff;
box-shadow: 0 0 0 4px rgba(255, 111, 15, 0.1);
}

.step-item.completed .step-number {
background: #10b981;
color: #fff;
}

.step-label {
font-size: 13px;
font-weight: 600;
color: #94a3b8;
transition: color 0.3s ease;
}

.step-item.active .step-label {
color: var(--primary);
}

.step-item.completed .step-label {
color: #10b981;
}

.payment-plans-section {
margin-bottom: 24px;
}

.payment-plans-table-wrapper {
overflow-x: auto;
border-radius: 12px;
border: 1px solid var(--border);
background: #fff;
margin-top: 16px;
}

.payment-plans-table-wrapper .subscription-plans-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin: 0;
}

.payment-plans-table-wrapper .subscription-plans-table thead {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
}

.payment-plans-table-wrapper .subscription-plans-table thead tr {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
}

.payment-plans-table-wrapper .subscription-plans-table thead tr th {
padding: 16px 20px;
text-align: left;
font-weight: 600;
color: #ffffff !important;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
background: transparent !important;
}

.payment-plans-table-wrapper .subscription-plans-table th {
padding: 16px 20px;
text-align: left;
font-weight: 600;
color: #ffffff !important;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
background: transparent !important;
}

.payment-plans-table-wrapper .subscription-plans-table th:first-child {
border-top-left-radius: 12px;
}

.payment-plans-table-wrapper .subscription-plans-table th:last-child {
border-top-right-radius: 12px;
}

.payment-plans-table-wrapper .subscription-plans-table td {
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
color: #1e293b;
vertical-align: middle;
}

.payment-plans-table-wrapper .subscription-plans-table tbody tr {
transition: background 0.2s ease;
}

.payment-plans-table-wrapper .subscription-plans-table tbody tr:hover {
background: #f8fafc;
}

.payment-plans-table-wrapper .subscription-plans-table tbody tr:last-child td {
border-bottom: none;
}

.payment-plans-table-wrapper .subscription-plans-table input[type="radio"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--primary);
}

.payment-confirm-section {
margin-bottom: 24px;
}

.payment-confirm-info {
background: #f8fafc;
border-radius: 12px;
padding: 20px;
border: 1px solid #e2e8f0;
}

.confirm-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e2e8f0;
}

.confirm-item:last-child {
border-bottom: none;
}

.confirm-item.final {
border-top: 2px solid var(--primary);
margin-top: 12px;
padding-top: 16px;
}

.confirm-label {
font-size: 14px;
font-weight: 600;
color: #475569;
}

.confirm-value {
font-size: 16px;
font-weight: 700;
color: #1e293b;
}

.confirm-value.discount-amount {
color: #10b981;
}

.confirm-value.final-amount {
font-size: 20px;
color: var(--primary);
}

.account-notice {
background: #fef3c7;
border-left: 4px solid #f59e0b;
border-radius: 8px;
padding: 16px;
margin-top: 20px;
display: flex;
gap: 12px;
align-items: flex-start;
}

.account-notice i {
color: #f59e0b;
font-size: 20px;
flex-shrink: 0;
margin-top: 2px;
}

.account-notice p {
margin: 0;
font-size: 13px;
color: #92400e;
line-height: 1.6;
}

@media (max-width: 768px) {
.payment-step-indicator {
gap: 16px;
margin-bottom: 24px;
}

.step-item:not(:last-child)::after {
width: 32px;
left: calc(50% + 12px);
}

.step-number {
width: 28px;
height: 28px;
font-size: 12px;
}

.step-label {
font-size: 12px;
}

.payment-plans-table-wrapper {
border-radius: 8px;
}

.payment-plans-table-wrapper .subscription-plans-table {
font-size: 12px;
}

.payment-plans-table-wrapper .subscription-plans-table th,
.payment-plans-table-wrapper .subscription-plans-table td {
padding: 12px 16px;
}

.payment-confirm-info {
padding: 16px;
}

.confirm-value.final-amount {
font-size: 18px;
}

.account-notice {
padding: 12px;
}

.account-notice p {
font-size: 12px;
}
}

@media (min-width: 769px) {
.modal-box.payment-modal {
max-width: 900px;
width: 95%;
}
}