/* Bitcoin Farm — P2P screens, OKX-style: true black, white type and white primary buttons, green/red only for
   buy/sell, pill shapes, generous spacing. Everything is scoped to #p2pFull (+ the .p2pc chooser at the end). */
#p2pFull {
  --c-bg: #000; --c-card: #121212; --c-card2: #1c1c1c; --c-card3: #262626;
  --c-line: rgba(255,255,255,.08); --c-line2: rgba(255,255,255,.14);
  --c-t1: #fff; --c-t2: #8c8c8c; --c-t3: #5c5c5c;
  --c-up: #25c26e; --c-dn: #f0475c; --c-w: #f5a524; --c-bl: #4c8dff;
  --c-y: #fff;                                   /* accent = white, like OKX */
  padding: 0; background: var(--c-bg); color: var(--c-t1); backdrop-filter: none;
  font-family: var(--pb-font, 'IBM Plex Sans Arabic', system-ui, sans-serif); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#p2pFull * { box-sizing: border-box; }
#p2pFull button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; -webkit-tap-highlight-color: transparent; }
#p2pFull button:disabled { opacity: .35; cursor: not-allowed; }
#p2pFull input, #p2pFull textarea { font-family: inherit; color: var(--c-t1); }
#p2pFull .num { font-family: var(--pb-num, 'Space Grotesk', sans-serif); letter-spacing: -.3px; }
#p2pFull .p2p-up { color: var(--c-up); } #p2pFull .p2p-dn { color: var(--c-dn); } #p2pFull .p2p-y { color: var(--c-t1); }
#p2pFull .p2p-mut { color: var(--c-t2); } #p2pFull .p2p-mut3 { color: var(--c-t3); font-size: 11.5px; }

/* ---------- shell ---------- */
.p2p-head { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px; flex: none; }
.p2p-ttl { flex: 1; font-size: 18px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2p-ttl small { font-weight: 500; font-size: 11.5px; }
.p2p-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--c-t1); font-size: 17px; transition: background .15s; }
.p2p-ic:hover, .p2p-ic:active { background: var(--c-card2); }
html[dir="ltr"] [data-p2p="back"] i { transform: scaleX(-1); }
.p2p-body { flex: 1; overflow-y: auto; padding: 4px 16px 90px; -webkit-overflow-scrolling: touch; }
.p2p-body.p2p-chatbody { display: flex; flex-direction: column; padding-bottom: 0; overflow: hidden; }
.p2p-nav { display: flex; justify-content: space-around; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-line); background: var(--c-bg); flex: none; }
.p2p-nav button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--c-t3); min-width: 64px; transition: color .15s; }
.p2p-nav button i { font-size: 19px; }
.p2p-nav button.on { color: var(--c-t1); }
#p2pFull.p2p-sub .p2p-nav { display: none; }
#p2pFull.p2p-sub .p2p-body { padding-bottom: 110px; }
@media (min-width: 768px) { .p2p-body, .p2p-head, .p2p-nav { width: 100%; max-width: 560px; margin-inline: auto; } }

/* ---------- basic blocks ---------- */
.p2p-empty { text-align: center; color: var(--c-t2); padding: 56px 10px; }
.p2p-empty i { font-size: 34px; margin-bottom: 12px; color: var(--c-t3); }
.p2p-empty.p2p-sm { padding: 16px; font-size: 13px; }
.p2p-card { background: var(--c-card); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.p2p-r { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.p2p-r > span:last-child { text-align: end; }
.p2p-top0 { padding-top: 0; }
.p2p-lbl { font-size: 13px; font-weight: 600; color: var(--c-t2); margin: 18px 0 8px; }
.p2p-kv { font-size: 12.5px; color: var(--c-t2); margin: 3px 0; } .p2p-kv b { color: var(--c-t1); font-weight: 500; }
.p2p-big { font-size: 22px; font-weight: 700; }
.p2p-md { font-size: 18px !important; }
.p2p-err { color: var(--c-dn); font-size: 12.5px; min-height: 18px; }
.p2p-terms { font-size: 13px; white-space: pre-wrap; line-height: 1.7; }
.p2p-mt { margin-top: 10px; }
.p2p-dim { opacity: .5; }
.p2p-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.p2p-badge.up { background: rgba(37,194,110,.14); color: var(--c-up); } .p2p-badge.dn { background: rgba(240,71,92,.14); color: var(--c-dn); }
.p2p-badge.w { background: rgba(245,165,36,.14); color: var(--c-w); } .p2p-badge.bl { background: rgba(76,141,255,.15); color: var(--c-bl); }
.p2p-badge.g { background: var(--c-card2); color: var(--c-t2); }
.p2p-note { font-size: 12.5px; line-height: 1.6; border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; background: var(--c-card); color: var(--c-t2); }
.p2p-note i { margin-top: 3px; }
.p2p-note.w i { color: var(--c-w); } .p2p-note.d { background: rgba(240,71,92,.08); color: #ff9aa7; } .p2p-note.d i { color: var(--c-dn); }
.p2p-note.i i { color: var(--c-bl); } .p2p-note.ok { background: rgba(37,194,110,.08); color: #8fe3b6; } .p2p-note.ok i { color: var(--c-up); }
.p2p-note.p2p-sm { margin: 8px 0; font-size: 11.5px; }
.p2p-gate { flex-wrap: wrap; align-items: center; } .p2p-gate span { flex: 1; } .p2p-gate .p2p-btn { padding: 7px 14px; font-size: 12.5px; }

/* ---------- buttons + inputs ---------- */
.p2p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: 14px; white-space: nowrap; transition: transform .1s, opacity .15s; }
.p2p-btn:active:not(:disabled) { transform: scale(.97); }
.p2p-btn-up { background: var(--c-up) !important; color: #fff !important; } .p2p-btn-dn { background: var(--c-dn) !important; color: #fff !important; }
.p2p-btn-y { background: #fff !important; color: #000 !important; } .p2p-btn-g { background: var(--c-card2) !important; color: var(--c-t1) !important; }
.p2p-btn-o { border: 1px solid var(--c-line2) !important; }
.p2p-ad .p2p-btn, .p2p-ad-mid .p2p-btn { min-width: 76px; padding: 8px 18px; font-size: 13.5px; }
.p2p-bl { width: 100%; padding: 14px; font-size: 15px; } .p2p-grow { flex: 1; } .p2p-sm { padding: 7px 13px; font-size: 12.5px; }
.p2p-link { color: var(--c-t1); font-size: 13px; font-weight: 600; }
.p2p-row2 { display: flex; gap: 10px; align-items: stretch; } .p2p-row2 > * { flex: 1; }
.p2p-field { background: var(--c-card); border: 1px solid transparent; border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; transition: border-color .15s; }
.p2p-field:focus-within { border-color: var(--c-t1); }
.p2p-field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 17px; font-weight: 600; font-family: var(--pb-num, inherit); }
.p2p-field input::placeholder { color: var(--c-t3); font-weight: 400; }
.p2p-unit { color: var(--c-t2); font-weight: 600; } .p2p-max { color: var(--c-t1); font-weight: 700; font-size: 13px; padding-inline-start: 8px; border-inline-start: 1px solid var(--c-line2); }
.p2p-ta { width: 100%; min-height: 96px; background: var(--c-card); border: 1px solid transparent; border-radius: 12px; padding: 12px 14px; font-size: 14px; resize: vertical; outline: 0; }
.p2p-ta:focus { border-color: var(--c-t1); }
.p2p-chk { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; margin: 14px 0; align-items: flex-start; }
.p2p-chk input { width: 19px; height: 19px; accent-color: #fff; flex: none; margin-top: 2px; }
.p2p-foot { position: fixed; bottom: 0; inset-inline: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, #000 18%); z-index: 3; }
@media (min-width: 768px) { .p2p-foot { max-width: 560px; margin-inline: auto; } }
#p2pFull:not(.p2p-sub) .p2p-foot { position: static; padding: 12px 0; background: none; }

/* ---------- market ---------- */
/* Buy / Sell: big bold text tabs (OKX) */
.p2p-bs { display: flex; gap: 22px; margin: 2px 0 14px; }
.p2p-bs span { font-size: 22px; font-weight: 700; color: var(--c-t3); cursor: pointer; transition: color .15s; }
.p2p-bs .b.on { color: var(--c-up); } .p2p-bs .s.on { color: var(--c-dn); }
.p2p-filters { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.p2p-filters::-webkit-scrollbar { display: none; }
.p2p-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; background: var(--c-card2) !important; border: 1px solid transparent !important;
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 500; color: var(--c-t1); transition: background .15s; }
.p2p-chip i { font-size: 10px; color: var(--c-t2); }
.p2p-chip.on { background: #fff !important; color: #000 !important; } .p2p-chip.on i { color: #000; }
.p2p-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.p2p-ad { border-bottom: 1px solid var(--c-line); padding: 18px 0; }
.p2p-ad-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer; }
.p2p-m0 { margin: 0; }
.p2p-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #3a3a3a, #1f1f1f); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; flex: none; }
.p2p-av-l { width: 56px; height: 56px; font-size: 22px; }
.p2p-nm { font-weight: 700; font-size: 14px; } .p2p-nm.p2p-l { font-size: 19px; }
.p2p-vb { color: var(--c-bl); font-size: 13px; } .p2p-st { font-size: 12px; color: var(--c-t2); }
.p2p-price { font-size: 24px; font-weight: 700; line-height: 1.2; } .p2p-price small { font-size: 12.5px; color: var(--c-t2); font-weight: 500; }
.p2p-ad-mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.p2p-pm { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.p2p-pm span { font-size: 12px; color: var(--c-t2); padding-inline-start: 8px; position: relative; }
.p2p-pm span::before { content: ''; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--c, #fff); }
b.p2p-pm span, .p2p-r > .p2p-pm span { color: var(--c-t1); font-size: 13.5px; }

/* ---------- lists, tabs, sheets ---------- */
.p2p-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--c-line); margin: 12px 0; overflow-x: auto; scrollbar-width: none; }
.p2p-tabs span { padding: 10px 0; color: var(--c-t2); font-weight: 600; font-size: 14px; position: relative; cursor: pointer; white-space: nowrap; }
.p2p-tabs span.on { color: var(--c-t1); }
.p2p-tabs span.on::after { content: ''; position: absolute; bottom: -1px; left: 25%; right: 25%; height: 3px; background: #fff; border-radius: 3px; }
.p2p-list { padding: 2px 16px; display: flex; flex-direction: column; }
.p2p-li { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-line); text-align: start; width: 100%; font-size: 14px; }
.p2p-li:last-child { border-bottom: 0; }
.p2p-sheet-ov { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; justify-content: center; z-index: 10; opacity: 0; transition: opacity .3s ease; }
.p2p-sheet-ov[hidden] { display: none; }   /* without this, the invisible layer would still catch every tap */
.p2p-sheet-ov.show { opacity: 1; }
.p2p-sheet { background: var(--c-card); width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; border-radius: 24px 24px 0 0;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .34s cubic-bezier(.32,.72,0,1); will-change: transform; }
.p2p-sheet-ov.show .p2p-sheet { transform: none; }
.p2p-sheet h4 { font-size: 18px; margin: 8px 0 14px; }
.p2p-sheet .p2p-field, .p2p-sheet .p2p-note { background: var(--c-card2); }
.p2p-sheet .p2p-chip { background: var(--c-card3) !important; } .p2p-sheet .p2p-chip.on { background: #fff !important; }
.p2p-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--c-line2); margin: 0 auto 8px; }
.p2p-zoom { width: 100%; border-radius: 14px; display: block; }

/* ---------- order ---------- */
.p2p-timer { color: var(--c-w); font-size: 18px; font-weight: 700; font-family: var(--pb-num, inherit); }
.p2p-steps { display: flex; gap: 6px; margin: 10px 0 16px; }
.p2p-steps div { flex: 1; font-size: 11.5px; font-weight: 500; color: var(--c-t3); }
.p2p-steps div::before { content: ''; display: block; height: 3px; border-radius: 3px; background: var(--c-card3); margin-bottom: 7px; }
.p2p-steps .d { color: var(--c-t1); } .p2p-steps .d::before { background: #fff; }
.p2p-cp { color: var(--c-t2); font-size: 12.5px; margin-inline-start: 6px; padding: 2px; }
.p2p-cp:active { color: #fff; }
.p2p-ord { display: block; width: 100%; text-align: start; background: var(--c-card) !important; border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.p2p-adcard { cursor: default; }
.p2p-chatfab { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 16px; width: 52px; height: 52px; border-radius: 50% !important;
  background: #fff !important; color: #000 !important; display: grid; place-items: center; font-size: 20px; box-shadow: 0 10px 28px rgba(0,0,0,.6); z-index: 4; }
.p2p-chatfab span { position: absolute; top: -2px; inset-inline-end: -2px; background: var(--c-dn); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 10px; padding: 0 6px; border: 2px solid #000; font-family: var(--pb-num, inherit); }
.p2p-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 12px; background: var(--c-line); border-radius: 16px; overflow: hidden; }
.p2p-stats div { background: var(--c-card); padding: 14px 6px; text-align: center; }
.p2p-stats b { display: block; font-family: var(--pb-num, inherit); font-size: 17px; } .p2p-stats span { font-size: 11.5px; color: var(--c-t2); }
.p2p-me { display: flex; gap: 14px; align-items: center; margin: 6px 0 16px; }
.p2p-rv { border-bottom: 1px solid var(--c-line); padding: 12px 0; font-size: 13px; }
.p2p-hero { text-align: center; padding: 24px 0 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.p2p-hero i { font-size: 30px; color: #000; background: #fff; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; }
.p2p-hero b { font-size: 19px; }

/* ---------- chat ---------- */
.p2p-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 0 12px; }
.p2p-m { max-width: 80%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }
.p2p-m small { display: block; font-size: 10px; color: var(--c-t3); margin-top: 3px; font-family: var(--pb-num, inherit); }
.p2p-m.me { align-self: flex-start; background: #fff; color: #000; border-end-start-radius: 6px; } .p2p-m.me small { color: #777; }
.p2p-m.them { align-self: flex-end; background: var(--c-card2); border-end-end-radius: 6px; }
.p2p-m.sys { align-self: center; max-width: 92%; background: none; color: var(--c-t2); font-size: 12px; text-align: center; padding: 4px 10px; }
.p2p-m.adm { align-self: center; max-width: 94%; background: rgba(76,141,255,.12); color: #b7cdfb; border-radius: 14px; }
.p2p-mimg { display: block; max-width: 220px; max-height: 260px; border-radius: 12px; margin-top: 4px; cursor: zoom-in; }
.p2p-chatin { display: flex; gap: 6px; align-items: center; padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
.p2p-chatin #p2pTxt { flex: 1; min-width: 0; background: var(--c-card2); border: 0; outline: 0; border-radius: 999px; padding: 12px 16px; font-size: 14px; }
.p2p-chatin [data-send] { background: #fff; color: #000; }
.p2p-proofs { display: flex; gap: 10px; flex-wrap: wrap; }
.p2p-proofs img, .p2p-addimg { width: 88px; height: 88px; border-radius: 14px; object-fit: cover; }
.p2p-addimg { background: var(--c-card) !important; color: var(--c-t2); display: grid; place-items: center; font-size: 18px; }

/* menu entry on the "More" page */
.more-grid .p2p-more-btn i { color: #25c26e; }

/* ---------- Deposit / Withdraw chooser (p2p-entry.js): OKX-style bottom sheet over the dashboard ---------- */
.p2pc-ov { position: fixed; inset: 0; z-index: 10002; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .3s ease; }
.p2pc-ov.show { opacity: 1; }
.p2pc { width: 100%; max-width: 520px; background: #121212; color: #fff; border-radius: 24px 24px 0 0;
  padding: 10px 14px calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .34s cubic-bezier(.32,.72,0,1); will-change: transform;
  font-family: var(--pb-font, inherit); -webkit-font-smoothing: antialiased; }
.p2pc-ov.show .p2pc { transform: none; }
.p2pc-grab { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); margin: 0 auto 10px; }
.p2pc-h { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 10px; }
.p2pc-h b { font-size: 20px; }
.p2pc-x { background: #1c1c1c; border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; cursor: pointer; display: grid; place-items: center; }
.p2pc-opt { width: 100%; display: flex; align-items: center; gap: 14px; text-align: start; background: none; border: 0; border-radius: 16px; padding: 14px 10px;
  color: inherit; font-family: inherit; cursor: pointer; transition: background .15s; }
.p2pc-opt:hover, .p2pc-opt:focus-visible, .p2pc-opt:active { background: #1c1c1c; outline: none; }
.p2pc-opt + .p2pc-opt { margin-top: 2px; }
.p2pc-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #262626; color: #fff; font-size: 18px; flex: none; }
.p2pc-ic-y { background: #fff; color: #000; }
.p2pc-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p2pc-tx b { font-size: 16px; font-weight: 700; }
.p2pc-tx small { color: #8c8c8c; font-size: 13px; line-height: 1.5; }
.p2pc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.p2pc-tags em { font-style: normal; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; background: rgba(37,194,110,.14); color: #25c26e; }
.p2pc-tags em + em { background: #262626; color: #d9d9d9; }
.p2pc-go { color: #5c5c5c; font-size: 13px; }
html[dir="ltr"] .p2pc-go { transform: scaleX(-1); }

/* ---------- My orders: list rows (OKX / Binance style) ---------- */
.p2p-pills { display: flex; gap: 8px; margin: 4px 0 6px; overflow-x: auto; scrollbar-width: none; }
.p2p-pills::-webkit-scrollbar { display: none; }
.p2p-pills button { flex: none; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--c-t2); background: var(--c-card2) !important; transition: background .15s, color .15s; }
.p2p-pills button.on { background: #fff !important; color: #000 !important; }
.p2p-orow { display: block; width: 100%; text-align: start; padding: 16px 0; border-bottom: 1px solid var(--c-line) !important; }
.p2p-orow:active { background: var(--c-card) !important; }
.p2p-orow-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.p2p-orow-side { font-size: 16px; font-weight: 700; }
.p2p-orow-st { font-size: 13px; font-weight: 600; color: var(--c-t1); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.p2p-orow-st i { font-size: 10px; color: var(--c-t3); }
html[dir="ltr"] .p2p-orow-st i { transform: scaleX(-1); }
.p2p-orow-st.act { color: var(--c-w); } .p2p-orow-st.dn { color: var(--c-dn); } .p2p-orow-st.ok { color: var(--c-t2); } .p2p-orow-st.off { color: var(--c-t3); }
.p2p-orow-st .num { font-weight: 700; }
.p2p-orow-g { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
.p2p-orow-g span { color: var(--c-t2); }
.p2p-orow-g b { text-align: end; font-weight: 500; }
.p2p-orow-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--c-t2); }
.p2p-orow-who { display: inline-flex; align-items: center; gap: 8px; color: var(--c-t1); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p2p-orow-who .p2p-av { width: 22px; height: 22px; font-size: 10.5px; }