/* ==========================================================================
 * P2P tables: site design layer
 *
 * One look for every [p2p_table] (Marketplace, game listings, Order history,
 * Active orders, Wallet). Colours come from the site tokens defined in the
 * "Home css" snippet (--pl-*), with fallbacks so the tables still render if
 * the snippet is missing.
 * ========================================================================== */

.p2p-table-shell {
    --p2p-table-text: var(--pl-ink, #1b1f2a);
    --p2p-table-muted: var(--pl-muted, #5d6472);
    --p2p-table-border: var(--pl-line, #e3e6eb);
    --p2p-table-header: var(--pl-mist, #f2f4f7);
    --p2p-table-paper: var(--pl-paper, #fff);
    --p2p-table-gold: var(--pl-gold, #fec401);
    --p2p-table-green: var(--pl-green, #1f9d6b);
    --p2p-table-control-line: var(--pl-line-strong, #d3d8e0);
    --p2p-table-ghost-line: var(--pl-line-strong, #cfd4dc);
    --p2p-table-focus: 0 0 0 3px rgba(254, 196, 1, .45);
    width: 100%;
    max-width: 100%;
    color: var(--p2p-table-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
}

.p2p-table-shell *,
.p2p-table-shell *::before,
.p2p-table-shell *::after {
    box-sizing: border-box;
}

.p2p-table-shell input,
.p2p-table-shell select,
.p2p-table-shell button {
    font-family: inherit;
}

/* --------------------------------------------------------------------------
 * Toolbar: search + filter panel
 * -------------------------------------------------------------------------- */

.p2p-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 0 20px;
}

.p2p-table-toolbar--filters {
    flex-direction: column;
    align-items: stretch;
}

.p2p-table-shell .p2p-table-search {
    position: relative;
    display: block;
    width: min(100%, 360px);
    margin: 0;
}

.p2p-table-shell .p2p-table-search input[type="search"] {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px 10px 42px;
    border: 1px solid var(--p2p-table-control-line);
    border-radius: 10px;
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.p2p-table-shell .p2p-table-search input[type="search"]:focus {
    border-color: var(--p2p-table-text);
    box-shadow: var(--p2p-table-focus);
}

.p2p-table-search__icon {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--p2p-table-muted);
    border-radius: 50%;
    transform: translateY(-60%);
    pointer-events: none;
}

.p2p-table-search__icon::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--p2p-table-muted);
    transform: rotate(45deg);
    transform-origin: left center;
}

.p2p-table-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px 16px;
    align-items: end;
    width: 100%;
    padding: 16px;
    border-radius: 14px;
    background: var(--p2p-table-header);
}

.p2p-table-filter {
    min-width: 0;
}

.p2p-table-filter--date_range {
    grid-column: span 2;
}

.p2p-table-filter__label {
    display: block;
    margin: 0 0 6px;
    color: var(--p2p-table-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.p2p-table-shell .p2p-table-filter__control,
.p2p-table-shell .p2p-searchable-select__input {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--p2p-table-control-line);
    border-radius: 10px;
    background-color: var(--p2p-table-paper);
    color: var(--p2p-table-text);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.p2p-table-shell select.p2p-table-filter__control,
.p2p-table-shell .p2p-searchable-select__input {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6472' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}

.p2p-table-shell .p2p-table-filter__control:focus,
.p2p-table-shell .p2p-searchable-select__input:focus,
.p2p-table-shell .p2p-searchable-select.is-open .p2p-searchable-select__input {
    border-color: var(--p2p-table-text);
    box-shadow: var(--p2p-table-focus);
}

.p2p-table-shell .p2p-table-filter__control::placeholder,
.p2p-table-shell .p2p-searchable-select__input::placeholder {
    color: #8a909c;
    opacity: 1;
}

.p2p-table-filter__date-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.p2p-table-filter__date-range label {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
}

.p2p-table-filter__date-range label > span {
    position: absolute;
    top: 50%;
    left: 12px;
    color: var(--p2p-table-muted);
    font-size: 13px;
    font-weight: 600;
    transform: translateY(-50%);
    pointer-events: none;
}

.p2p-table-shell .p2p-table-filter__date-range .p2p-table-filter__control {
    padding-left: 46px;
    padding-right: 8px;
    font-size: 14px;
}

/* Searchable select (filters built by p2p-tables.js) */
.p2p-searchable-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.p2p-searchable-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.p2p-searchable-select__input::-webkit-search-decoration,
.p2p-searchable-select__input::-webkit-search-cancel-button,
.p2p-searchable-select__input::-webkit-search-results-button,
.p2p-searchable-select__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.p2p-searchable-select__list {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--p2p-table-border);
    border-radius: 12px;
    background: var(--p2p-table-paper);
    box-shadow: 0 16px 36px -12px rgba(27, 31, 42, .28);
}

.p2p-searchable-select__list[hidden] {
    display: none !important;
}

.p2p-searchable-select__option {
    display: block;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--p2p-table-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}

.p2p-searchable-select__option:hover,
.p2p-searchable-select__option.is-active {
    background: var(--p2p-table-header);
    color: var(--p2p-table-text);
}

.p2p-searchable-select__option[aria-selected="true"] {
    font-weight: 700;
}

.p2p-searchable-select__empty {
    padding: 10px;
    color: var(--p2p-table-muted);
    font-size: 13px;
    text-align: center;
}

/* Multi-select (checkbox list, e.g. Delivery Method) */
.p2p-multi-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.p2p-table-shell .p2p-multi-select__button {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 36px;
    font-family: inherit;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6472' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}

.p2p-table-shell .p2p-multi-select__button:hover {
    background-color: var(--p2p-table-paper);
    color: var(--p2p-table-text);
}

.p2p-table-shell .p2p-multi-select.is-open .p2p-multi-select__button {
    border-color: var(--p2p-table-text);
    box-shadow: var(--p2p-table-focus);
}

.p2p-multi-select__summary {
    display: block;
    overflow: hidden;
    color: #8a909c;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.p2p-multi-select.has-value .p2p-multi-select__summary {
    color: var(--p2p-table-text);
}

.p2p-multi-select__list {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    min-width: 200px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--p2p-table-border);
    border-radius: 12px;
    background: var(--p2p-table-paper);
    box-shadow: 0 16px 36px -12px rgba(27, 31, 42, .28);
}

.p2p-multi-select__list[hidden] {
    display: none !important;
}

.p2p-table-shell .p2p-multi-select__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--p2p-table-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
}

.p2p-table-shell .p2p-multi-select__option:hover,
.p2p-table-shell .p2p-multi-select__option:focus-within {
    background: var(--p2p-table-header);
}

.p2p-table-shell .p2p-multi-select__option input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--p2p-table-text);
}

.p2p-table-shell .p2p-multi-select__option[aria-selected="true"] {
    font-weight: 700;
}

/* Segmented toggle (Buy / Sell, Credit / Debit) */
.p2p-table-toggle {
    display: flex;
    min-height: 44px;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--p2p-table-control-line);
    border-radius: 10px;
    background: var(--p2p-table-paper);
}

.p2p-table-shell .p2p-table-toggle__button {
    flex: 1 1 0;
    min-width: 56px;
    margin: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--p2p-table-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .15s, color .15s;
}

.p2p-table-shell .p2p-table-toggle__button:hover {
    background: var(--p2p-table-header);
    color: var(--p2p-table-text);
}

.p2p-table-shell .p2p-table-toggle__button.is-active {
    background: var(--p2p-table-text);
    color: var(--pl-on-ink, #fff);
}

.p2p-table-shell .p2p-table-toggle__button:focus-visible {
    outline: none;
    box-shadow: var(--p2p-table-focus);
}

/* Clear filters: ghost button */
.p2p-table-shell .p2p-table-clear {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 18px;
    border: 1.5px solid var(--p2p-table-ghost-line);
    border-radius: 10px;
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: border-color .15s;
}

.p2p-table-shell .p2p-table-clear:hover,
.p2p-table-shell .p2p-table-clear:focus-visible {
    border-color: var(--p2p-table-text);
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text);
}

.p2p-table-shell .p2p-table-clear:focus-visible {
    outline: none;
    box-shadow: var(--p2p-table-focus);
}

/* --------------------------------------------------------------------------
 * Status line (loading / empty / error)
 * -------------------------------------------------------------------------- */

.p2p-table-status {
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--p2p-table-header);
    color: var(--p2p-table-muted);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.p2p-table-status[hidden] {
    display: none !important;
}

.p2p-table-status[data-state="error"],
.p2p-table-notice--error {
    background: var(--pl-bad-bg, #fdecec);
    color: var(--pl-bad-text, #a12a2a);
}

.p2p-table-notice {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--p2p-table-header);
}

/* --------------------------------------------------------------------------
 * Tabulator chrome
 * -------------------------------------------------------------------------- */

.p2p-table-shell .tabulator {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--p2p-table-border);
    border-radius: 14px;
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text);
    font-family: inherit;
    font-size: 15px;
}

.p2p-table-shell.is-loading .tabulator {
    opacity: .55;
    pointer-events: none;
}

.p2p-table-shell .tabulator .tabulator-header {
    border-bottom: 1px solid var(--p2p-table-border);
    background: var(--p2p-table-header);
    color: var(--p2p-table-muted);
    font-weight: 600;
}

.p2p-table-shell .tabulator .tabulator-header .tabulator-col {
    min-height: 0;
    border-right: 0;
    background: transparent;
}

.p2p-table-shell .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 12px 16px;
}

.p2p-table-shell .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-size: 13px;
    line-height: 1.3;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: normal;
}

.p2p-table-shell .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
    background: var(--pl-line, #e9ecf1);
}

.p2p-table-shell .tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: #b4bac5;
}

.p2p-table-shell .tabulator .tabulator-header .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow {
    border-bottom-color: var(--p2p-table-text);
}

.p2p-table-shell .tabulator .tabulator-header .tabulator-col[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow {
    border-top-color: var(--p2p-table-text);
}

.p2p-table-shell .tabulator .tabulator-tableholder,
.p2p-table-shell .tabulator .tabulator-tableholder .tabulator-table {
    background: transparent;
    color: inherit;
}

.p2p-table-shell .tabulator-row,
.p2p-table-shell .tabulator-row.tabulator-row-even {
    min-height: 0;
    border-bottom: 1px solid var(--p2p-table-border);
    background: var(--p2p-table-paper);
    transition: background-color .15s;
}

.p2p-table-shell .tabulator-row:last-child {
    border-bottom: 0;
}

.p2p-table-shell .tabulator-row:hover,
.p2p-table-shell .tabulator-row.tabulator-selectable:hover {
    background: color-mix(in srgb, var(--pl-mist, #f2f4f7) 55%, var(--pl-paper, #fff));
}

.p2p-table-shell .tabulator-row:has(.p2p-table-action) {
    cursor: pointer;
}

.p2p-table-shell .tabulator-row .tabulator-cell {
    min-height: 72px;
    padding: 14px 16px;
    border-right: 0;
    white-space: normal;
    line-height: 1.45;
}

.p2p-table-shell .tabulator .tabulator-placeholder span {
    color: var(--p2p-table-muted);
    font-size: 15px;
    font-weight: 500;
}

/* Pagination */
.p2p-table-shell .tabulator .tabulator-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--p2p-table-border);
    background: var(--p2p-table-paper);
    color: var(--p2p-table-muted);
    font-family: inherit;
    font-weight: 500;
}

.p2p-table-shell .tabulator .tabulator-footer .tabulator-paginator,
.p2p-table-shell .tabulator .tabulator-footer .tabulator-pages {
    font-family: inherit;
}

.p2p-table-shell .tabulator .tabulator-footer .tabulator-page {
    min-width: 36px;
    min-height: 36px;
    margin: 0 2px;
    padding: 6px 12px;
    border: 1px solid var(--p2p-table-border);
    border-radius: 8px;
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 1;
}

.p2p-table-shell .tabulator .tabulator-footer .tabulator-page:not(.active):not([disabled]):hover,
.p2p-table-shell .tabulator .tabulator-footer .tabulator-page:not(.active):not([disabled]):focus-visible {
    border-color: var(--p2p-table-text);
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text);
}

.p2p-table-shell .tabulator .tabulator-footer .tabulator-page.active {
    border-color: var(--p2p-table-text);
    background: var(--p2p-table-text);
    color: var(--pl-on-ink, #fff);
}

.p2p-table-shell .tabulator .tabulator-footer .tabulator-page[disabled] {
    color: #a7adb8;
    opacity: 1;
}

/* --------------------------------------------------------------------------
 * Shared cell pieces
 * -------------------------------------------------------------------------- */

.p2p-cell-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.p2p-cell-title {
    color: var(--p2p-table-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.p2p-cell-sub {
    color: var(--p2p-table-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.p2p-cell-money {
    color: var(--p2p-table-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Row action: ghost button that fills ink when its row is hovered */
.p2p-table-shell .p2p-table-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 1.5px solid var(--p2p-table-ghost-line);
    border-radius: 10px;
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}

.p2p-table-shell .tabulator-row:hover .p2p-table-action,
.p2p-table-shell .p2p-table-action:hover,
.p2p-table-shell .p2p-table-action:focus-visible {
    border-color: var(--p2p-table-text);
    background: var(--p2p-table-text);
    color: var(--pl-on-ink, #fff) !important;
}

.p2p-table-shell .p2p-table-action:focus-visible {
    outline: none;
    box-shadow: var(--p2p-table-focus);
}

/* Listing CTA (Buy / Sell) is the page's primary action: gold */
.p2p-table-shell .p2p-listing-action,
.p2p-table-shell .tabulator-row:hover .p2p-listing-action {
    min-width: 84px;
    border-color: var(--p2p-table-gold);
    background: var(--p2p-table-gold);
    color: var(--pl-on-gold, #1b1f2a) !important;
}

.p2p-table-shell .p2p-listing-action:hover,
.p2p-table-shell .p2p-listing-action:focus-visible {
    border-color: #ffd23f;
    background: #ffd23f;
    color: var(--pl-on-gold, #1b1f2a) !important;
}

/* --------------------------------------------------------------------------
 * Pills: status, trade side, role
 * -------------------------------------------------------------------------- */

.p2p-order-history-status,
.p2p-active-order-status,
.p2p-order-history-type,
.p2p-active-order-category,
.p2p-order-history-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--p2p-table-header);
    color: var(--p2p-table-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Status: neutral by default, then green / gold / red by meaning */
.p2p-order-history-status::before,
.p2p-active-order-status::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}

.p2p-order-history-status,
.p2p-active-order-status {
    color: var(--pl-text, #4a5263);
}

.p2p-table-shell [class*="-status--completed"],
.p2p-table-shell [class*="-status--active"] {
    background: var(--pl-ok-bg, #e3f4ec);
    color: var(--pl-ok-text, #146c4a);
}

.p2p-table-shell [class*="-status--processing"],
.p2p-table-shell [class*="-status--awaiting"],
.p2p-table-shell [class*="-status--payment-sent"],
.p2p-table-shell [class*="-status--pending"],
.p2p-table-shell [class*="-status--editing"],
.p2p-table-shell [class*="-status--draft"],
.p2p-table-shell [class*="-status--under"],
.p2p-table-shell [class*="-status--review"] {
    background: var(--pl-warn-bg, #fff3c4);
    color: var(--pl-gold-deep, #7a5d00);
}

.p2p-table-shell [class*="-status--cancel"],
.p2p-table-shell [class*="-status--fail"],
.p2p-table-shell [class*="-status--refund"],
.p2p-table-shell [class*="-status--disput"],
.p2p-table-shell [class*="-status--payment-disputed"] {
    background: var(--pl-bad-bg, #fdecec);
    color: var(--pl-bad-text, #a12a2a);
}

/* Trade side */
.p2p-order-history-type.is-buy,
.p2p-active-order-category.is-buy {
    background: var(--pl-ok-bg, #e3f4ec);
    color: var(--pl-ok-text, #146c4a);
}

.p2p-order-history-type.is-sell,
.p2p-active-order-category.is-sell {
    background: var(--pl-line, #e9ecf2);
    color: var(--p2p-table-text);
}

/* Role: outlined, same as the Maker / Taker legend under the table */
.p2p-order-history-role {
    min-height: 24px;
    padding: 2px 10px;
    border: 1px solid var(--p2p-table-border);
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text);
    font-size: 12px;
    font-weight: 700;
}

.p2p-order-history-role.is-maker {
    border-color: rgba(254, 196, 1, .9);
    background: color-mix(in srgb, var(--pl-gold, #fec401) 8%, var(--pl-paper, #fff));
}

/* --------------------------------------------------------------------------
 * Order history + Active orders
 * -------------------------------------------------------------------------- */

.p2p-order-history-trade,
.p2p-order-history-party {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.p2p-order-history-party__name {
    color: var(--p2p-table-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * My listings
 * -------------------------------------------------------------------------- */

.p2p-cell-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.p2p-cell-sub--ink {
    color: var(--p2p-table-text);
    font-size: 14px;
    white-space: nowrap;
}

.p2p-my-listing-details {
    display: -webkit-box;
    max-width: 52ch;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.p2p-my-listing-visibility {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 1px 9px;
    border: 1px solid var(--p2p-table-border);
    border-radius: 999px;
    background: var(--p2p-table-paper);
    color: var(--p2p-table-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.p2p-my-listing-card__status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.p2p-my-listing-card header > div > span {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * Wallet transactions
 * -------------------------------------------------------------------------- */

.p2p-wallet-amount,
.p2p-wallet-balance,
.p2p-wallet-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.p2p-wallet-amount {
    font-weight: 700;
}

.p2p-wallet-amount.is-credit {
    color: var(--p2p-table-green);
}

.p2p-wallet-amount.is-debit {
    color: var(--p2p-table-text);
}

.p2p-wallet-balance {
    color: var(--p2p-table-muted);
    font-weight: 500;
}

.p2p-wallet-details {
    color: var(--p2p-table-text);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * Marketplace: game directory as a card grid at every width
 * -------------------------------------------------------------------------- */

.p2p-table-shell--marketplace_games .tabulator {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.p2p-table-shell--marketplace_games .tabulator .tabulator-header,
.p2p-table-shell--marketplace_games .tabulator .tabulator-footer {
    display: none;
}

.p2p-table-shell--marketplace_games .tabulator .tabulator-tableholder {
    overflow: visible !important;
}

.p2p-table-shell--marketplace_games .tabulator .tabulator-tableholder .tabulator-table {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    width: 100% !important;
    min-width: 0 !important;
}

.p2p-table-shell--marketplace_games .tabulator-row,
.p2p-table-shell--marketplace_games .tabulator-row.tabulator-row-even {
    width: auto !important;
    overflow: hidden;
    border: 1px solid var(--p2p-table-border);
    border-radius: 16px;
    background: var(--p2p-table-paper);
    transition: border-color .15s, box-shadow .15s;
}

.p2p-table-shell--marketplace_games .tabulator-row:last-child {
    border-bottom: 1px solid var(--p2p-table-border);
}

.p2p-table-shell--marketplace_games .tabulator-row:hover {
    border-color: var(--p2p-table-text);
    background: var(--p2p-table-paper);
    box-shadow: 0 18px 36px -24px rgba(27, 31, 42, .45);
}

.p2p-table-shell--marketplace_games .tabulator-row .tabulator-cell {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
    padding: 0;
    border: 0;
}

.p2p-game-card {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 24px 20px 20px;
    color: var(--p2p-table-text);
    text-align: center;
}

.p2p-game-card__identity {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.p2p-table-shell .p2p-game-card__name {
    min-width: 0;
    color: var(--p2p-table-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

/* One fixed-size button, centred at the bottom of the card at every width */
.p2p-table-shell .p2p-game-card__action {
    width: 168px;
    max-width: 100%;
    margin-top: auto;
    align-self: center;
}

/* --------------------------------------------------------------------------
 * Marketplace: game listings
 * -------------------------------------------------------------------------- */

.p2p-listing-user,
.p2p-listing-server,
.p2p-listing-limits,
.p2p-listing-delivery {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
}

.p2p-listing-user,
.p2p-listing-card__header > .p2p-listing-card__seller {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.p2p-listing-user__body,
.p2p-listing-card__seller > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.p2p-listing-avatar,
.p2p-listing-card__header > div > .p2p-listing-avatar {
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--p2p-table-border);
    color: var(--p2p-table-muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.p2p-listing-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p2p-table-shell .p2p-listing-user__name {
    color: var(--p2p-table-text) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

.p2p-table-shell a.p2p-listing-user__name:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.p2p-listing-user__metrics {
    color: var(--p2p-table-muted);
    font-size: 13px;
}

.p2p-listing-server,
.p2p-listing-delivery {
    color: var(--p2p-table-text);
    font-size: 14px;
}

.p2p-listing-server span + span,
.p2p-listing-delivery span + span {
    color: var(--p2p-table-muted);
    font-size: 13px;
}

.p2p-listing-delivery span:first-child {
    overflow-wrap: anywhere;
}

.p2p-listing-price {
    color: var(--p2p-table-text);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.p2p-listing-price__unit {
    color: var(--p2p-table-muted);
    font-size: 13px;
    font-weight: 500;
}

.p2p-listing-limits {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.p2p-listing-limits__label {
    color: var(--p2p-table-muted);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
 * Phone cards (every table switches to one card column below its breakpoint)
 * -------------------------------------------------------------------------- */

.p2p-table-shell.is-mobile-table .tabulator {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.p2p-table-shell.is-mobile-table .tabulator .tabulator-header {
    display: none;
}

.p2p-table-shell.is-mobile-table .tabulator .tabulator-tableholder,
.p2p-table-shell.is-mobile-table .tabulator .tabulator-tableholder .tabulator-table {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

.p2p-table-shell.is-mobile-table .tabulator-row,
.p2p-table-shell.is-mobile-table .tabulator-row .tabulator-cell {
    display: block;
    width: 100% !important;
    min-height: 0;
    padding: 0;
    border: 0;
}

.p2p-table-shell.is-mobile-table .tabulator-row,
.p2p-table-shell.is-mobile-table .tabulator-row.tabulator-row-even {
    margin: 0 0 12px;
    overflow: hidden;
    border: 1px solid var(--p2p-table-border);
    border-radius: 14px;
    background: var(--p2p-table-paper);
}

.p2p-table-shell.is-mobile-table .tabulator-row:last-child {
    border-bottom: 1px solid var(--p2p-table-border);
}

.p2p-table-shell.is-mobile-table .tabulator-row:hover {
    background: var(--p2p-table-paper);
}

.p2p-table-shell.is-mobile-table .tabulator .tabulator-footer {
    border: 1px solid var(--p2p-table-border);
    border-radius: 14px;
}

.p2p-order-history-card,
.p2p-active-order-card,
.p2p-wallet-card,
.p2p-listing-card {
    display: block;
    width: 100%;
    padding: 16px;
    color: var(--p2p-table-text);
}

.p2p-order-history-card header,
.p2p-active-order-card header,
.p2p-wallet-card header,
.p2p-listing-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--p2p-table-border);
}

.p2p-order-history-card header > div,
.p2p-active-order-card header > div,
.p2p-wallet-card header > div,
.p2p-listing-card__header > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.p2p-order-history-card header strong,
.p2p-active-order-card header strong,
.p2p-wallet-card header strong,
.p2p-table-shell .p2p-listing-card__header strong,
.p2p-table-shell .p2p-listing-card__header a {
    color: var(--p2p-table-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.p2p-order-history-card header > div > span,
.p2p-active-order-card header > div > span,
.p2p-wallet-card header > div > span,
.p2p-listing-card__header > div > span {
    color: var(--p2p-table-muted);
    font-size: 13px;
}

.p2p-listing-card__price {
    flex: 0 0 auto;
    color: var(--p2p-table-text);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.p2p-order-history-card dl,
.p2p-wallet-card dl,
.p2p-listing-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 14px 0;
}

.p2p-wallet-card dl {
    margin-bottom: 0;
}

.p2p-order-history-card dl > div,
.p2p-wallet-card dl > div,
.p2p-listing-card__details > div {
    min-width: 0;
}

.p2p-order-history-card dt,
.p2p-wallet-card dt,
.p2p-listing-card__details dt {
    margin: 0 0 3px;
    color: var(--p2p-table-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.p2p-order-history-card dd,
.p2p-wallet-card dd,
.p2p-listing-card__details dd {
    margin: 0;
    color: var(--p2p-table-text);
    font-size: 14px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.p2p-order-history-card__wide,
.p2p-wallet-card__wide,
.p2p-listing-card__wide {
    grid-column: 1 / -1;
}

.p2p-active-order-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0;
    color: var(--p2p-table-muted);
    font-size: 13px;
    font-weight: 600;
}

.p2p-order-history-card__action,
.p2p-active-order-card__action {
    width: 100%;
}

/* My Listings: Edit + Remove. Remove stays a ghost button when its row is hovered. */
/* Every My Listings row opens its details, including ones without buttons. */
.p2p-table-shell .tabulator-row:has(.p2p-my-listing-actions),
.p2p-table-shell .tabulator-row:has(.p2p-my-listing-card) {
    cursor: pointer;
}

.p2p-table-shell .p2p-my-listing-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.p2p-table-shell .p2p-my-listing-close {
    cursor: pointer;
}

.p2p-table-shell .tabulator-row:hover .p2p-my-listing-close:not(:hover):not(:focus-visible) {
    border-color: var(--p2p-table-ghost-line);
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text) !important;
}

.p2p-table-shell .p2p-my-listing-close:disabled {
    cursor: progress;
    opacity: .6;
}

.p2p-my-listing-card .p2p-my-listing-close {
    margin-top: 8px;
}

/* Listing Buy / Sell: one fixed size, right-aligned, in the table and on phone cards */
.p2p-table-shell .p2p-listing-action {
    width: 96px;
    min-width: 0;
}

.p2p-table-shell .p2p-listing-action--full {
    display: flex;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
 * Withdraw requests (peerloot-withdrawals): cells, card buttons, dialog
 * -------------------------------------------------------------------------- */

.p2p-table-shell--withdraw_requests .tabulator-row {
    cursor: pointer;
}

.p2p-table-shell .plw-amount {
    align-items: flex-end;
}

.p2p-table-shell .plw-network {
    color: var(--p2p-table-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.plw-address {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.p2p-table-shell .plw-action {
    min-width: 96px;
    cursor: pointer;
    font-family: inherit;
}

/* Cancel is destructive: red ghost, never the ink row-hover fill */
.p2p-table-shell .plw-action--cancel,
.p2p-table-shell .tabulator-row:hover .plw-action--cancel {
    border-color: var(--pl-bad-line, #e7b4b4);
    background: var(--p2p-table-paper);
    color: var(--pl-bad-text, #a12a2a) !important;
}

.p2p-table-shell .plw-action--cancel:hover,
.p2p-table-shell .plw-action--cancel:focus-visible,
.p2p-table-shell .tabulator-row:hover .plw-action--cancel:hover {
    border-color: #a12a2a;
    background: #a12a2a;
    color: #fff !important;
}

.plw-card__actions {
    display: flex;
    gap: 10px;
}

.p2p-table-shell .plw-action--grow {
    flex: 1 1 0;
}

/* The card's own buttons decide; the row-hover ink fill is for desktop rows */
.p2p-table-shell.is-mobile-table .tabulator-row:hover .plw-action:not(.plw-action--cancel) {
    border-color: var(--p2p-table-ghost-line);
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text) !important;
}

.p2p-table-shell .plw-notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #b9e2cf;
    border-radius: 10px;
    background: var(--pl-ok-bg, #e3f4ec);
    color: var(--pl-ok-text, #146c4a);
    font-size: 14px;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .p2p-table-toolbar {
        margin-bottom: 16px;
    }

    .p2p-table-shell .p2p-table-search {
        width: 100%;
    }

    .p2p-table-shell .p2p-table-search input[type="search"],
    .p2p-table-shell .p2p-table-filter__control,
    .p2p-table-shell .p2p-searchable-select__input {
        font-size: 16px;
    }

    .p2p-table-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 12px;
    }

    .p2p-table-filter--date_range,
    .p2p-table-filter--toggle,
    .p2p-table-filter--clear {
        grid-column: 1 / -1;
    }

    .p2p-table-filter--clear .p2p-table-filter__label {
        display: none;
    }

    .p2p-table-shell .p2p-table-clear {
        width: 100%;
    }

    .p2p-table-shell--marketplace_games .tabulator .tabulator-tableholder .tabulator-table {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .p2p-game-card {
        gap: 14px;
        padding: 18px 16px 16px;
    }

    .p2p-table-shell .p2p-game-card__name {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .p2p-table-filters {
        grid-template-columns: 1fr;
    }

    .p2p-order-history-card dl,
    .p2p-listing-card__details {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------------------------
 * Notifications inbox (peerloot-notifications): My Account → Notifications
 * -------------------------------------------------------------------------- */

.p2p-table-shell--notifications .tabulator-row {
    cursor: pointer;
}

.p2p-table-shell--notifications .tabulator-row.pln-row--unread,
.p2p-table-shell--notifications .tabulator-row.pln-row--unread.tabulator-row-even {
    background: color-mix(in srgb, var(--pl-gold, #fec401) 8%, var(--pl-paper, #fff));
}

.p2p-table-shell--notifications .tabulator-row.pln-row--unread:hover {
    background: color-mix(in srgb, var(--pl-gold, #fec401) 18%, var(--pl-paper, #fff));
}

.pln-msg {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
}

.pln-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--p2p-table-header);
    color: var(--p2p-table-text);
}

.pln-icon svg {
    width: 18px;
    height: 18px;
}

.pln-sev--success {
    background: rgba(31, 157, 107, .12);
    color: var(--p2p-table-green);
}

.pln-sev--warning {
    background: rgba(254, 196, 1, .2);
    color: var(--pl-gold-deep, #7a5d00);
}

.pln-sev--error {
    background: rgba(192, 54, 44, .1);
    color: var(--pl-bad-text, #c0362c);
}

.pln-msg__text {
    min-width: 0;
    padding-top: 7px;
    color: var(--p2p-table-text);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.pln-row--unread .pln-msg__text,
.pln-card.is-unread .pln-msg__text {
    font-weight: 650;
}

.pln-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--p2p-table-gold);
    box-shadow: 0 0 0 2px rgba(254, 196, 1, .25);
    vertical-align: 1px;
}

.pln-type {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--p2p-table-header);
    color: var(--p2p-table-text);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pln-type--disputes {
    background: var(--pl-bad-bg, #fdecea);
    color: var(--pl-bad-text, #a12a2a);
}

.pln-date {
    color: var(--p2p-table-text);
    font-size: 14px;
    font-weight: 600;
}

.pln-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.p2p-table-shell .pln-markread {
    min-height: 40px;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--p2p-table-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
}

.p2p-table-shell .pln-markread:hover {
    background: var(--p2p-table-header);
    color: var(--p2p-table-text);
}

.p2p-table-shell .pln-markread:focus-visible {
    outline: none;
    box-shadow: var(--p2p-table-focus);
}

.p2p-table-shell .pln-markread:disabled {
    opacity: .5;
    cursor: default;
}

/* Phone cards */
.pln-card {
    display: block;
    width: 100%;
    padding: 16px;
    color: var(--p2p-table-text);
}

.pln-card.is-unread {
    background: color-mix(in srgb, var(--pl-gold, #fec401) 8%, var(--pl-paper, #fff));
}

.pln-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-left: 48px;
    color: var(--p2p-table-muted);
    font-size: 13px;
}

.pln-card__actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.p2p-table-shell .pln-grow {
    flex: 1 1 0;
}

.p2p-table-shell .pln-card .pln-markread {
    border: 1.5px solid var(--p2p-table-ghost-line);
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text);
}

/* The card's own buttons decide; the row-hover ink fill is for desktop rows */
.p2p-table-shell.is-mobile-table .tabulator-row:hover .pln-open {
    border-color: var(--p2p-table-ghost-line);
    background: var(--p2p-table-paper);
    color: var(--p2p-table-text) !important;
}