.payment-orders-page { display: grid; gap: 16px; }
.payment-orders-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.payment-orders-summary article { border: 1px solid #e3e8ee; border-radius: 14px; background: #fff; padding: 14px 16px; }
.payment-orders-summary span, .payment-orders-filter span { display: block; color: #687383; font-size: 12px; }
.payment-orders-summary strong { display: block; margin-top: 5px; font-size: 24px; color: #17212b; }
.payment-orders-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding: 14px; border: 1px solid #e3e8ee; border-radius: 14px; background: #fff; }
.payment-orders-filter select, .payment-orders-filter input { min-width: 150px; margin-top: 5px; border: 1px solid #d8dee7; border-radius: 9px; background: #fff; padding: 8px 10px; color: #27313c; }
.payment-orders-filter select { padding-right: 30px; }
.payment-orders-result-count { margin-left: auto; align-self: center; color: #687383; font-size: 13px; }
.payment-orders-table-wrap { overflow: auto; border: 1px solid #e3e8ee; border-radius: 14px; background: #fff; }
.payment-orders-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.payment-orders-table th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: #f7f8fa; color: #5e6977; font-weight: 600; text-align: left; white-space: nowrap; }
.payment-orders-table td { padding: 11px 12px; border-top: 1px solid #edf0f4; color: #2e3945; vertical-align: top; white-space: nowrap; }
.payment-orders-table td strong, .payment-orders-table td small { display: block; }
.payment-orders-table td small { margin-top: 3px; color: #7b8695; }
.payment-orders-table code { color: #20303d; font-size: 11px; }
.payment-orders-flag { display: inline-flex; margin-left: 6px; border-radius: 999px; padding: 2px 6px; background: #e9f3ff; color: #1769aa; font-size: 10px; font-weight: 700; }
.payment-orders-flag.is-warning { background: #fff0df; color: #a65600; }
.payment-orders-status { display: inline-flex; border-radius: 999px; padding: 3px 8px; background: #edf1f5; color: #4d5966; font-weight: 700; }
.payment-orders-status.is-verified, .payment-orders-status.is-already_processed { background: #e5f6ed; color: #177142; }
.payment-orders-status.is-refunded, .payment-orders-status.is-rejected, .payment-orders-status.is-cancelled { background: #fde9e7; color: #9f2e27; }
.payment-orders-note { margin: 0; color: #74808f; font-size: 12px; }
.payment-orders-pagination { display: flex; align-items: end; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.payment-orders-pagination > span { align-self: center; min-width: 84px; color: #687383; font-size: 13px; text-align: center; }
.payment-orders-pagination .payment-orders-filter select { min-width: 90px; }
.payment-orders-empty { padding: 34px !important; text-align: center; color: #7b8695 !important; }
.payment-orders-internal-note { min-width: 280px; max-width: 360px; white-space: normal !important; }
.payment-orders-internal-note p { margin: 0; line-height: 1.5; }
.payment-orders-internal-note details { margin-top: 8px; }
.payment-orders-internal-note summary { cursor: pointer; color: #1769aa; font-weight: 600; }
.payment-orders-internal-note textarea { display: block; width: 100%; margin: 8px 0; border: 1px solid #d8dee7; border-radius: 9px; padding: 8px 10px; resize: vertical; }
.payment-orders-state { border: 1px solid #e3e8ee; border-radius: 14px; background: #fff; padding: 28px; }
.payment-orders-state.is-error { border-color: #f1c6c1; }
@media (max-width: 900px) { .payment-orders-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .payment-orders-result-count { width: 100%; margin-left: 0; } .payment-orders-pagination { justify-content: flex-start; } }