/* ============================================================
   WP Coin Exchange — Frontend Styles
   Brand colors (same as Send Money):
     Navy  : #0b1d51
     Blue  : #1565c0
     Green : #1a6b3c
     Amber : #d97706
   ============================================================ */

:root {
    --wpc-navy:     #0b1d51;
    --wpc-blue:     #1565c0;
    --wpc-blue-lt:  #e3f0fd;
    --wpc-green:    #1a6b3c;
    --wpc-green-lt: #dcfce7;
    --wpc-red:      #dc2626;
    --wpc-amber:    #d97706;
    --wpc-amber-lt: #fffbeb;
    --wpc-border:   #e5e7eb;
    --wpc-bg:       #f8fafc;
    --wpc-card:     #ffffff;
    --wpc-text:     #111827;
    --wpc-muted:    #6b7280;
    --wpc-radius:   12px;
    --wpc-shadow:   0 2px 16px rgba(11,29,81,.08);
    /* Legacy aliases */
    --wpc-primary:  #0b1d51;
    --wpc-accent:   #1565c0;
    --wpc-orange:   #d97706;
}

/* Scoped box-sizing so padding never pushes the plugin wider than its
   container (prevents horizontal scroll / "broken scrolling" inside themes). */
.wpc-wrap, .wpc-wrap *, .wpc-wrap *::before, .wpc-wrap *::after,
.wpcw-page, .wpcw-page *, .wpcw-page *::before, .wpcw-page *::after,
.wpc-my-orders, .wpc-my-orders *, .wpc-my-orders *::before, .wpc-my-orders *::after {
    box-sizing: border-box;
}

/* ── Layout ──────────────────────────────────────────────────── */

.wpc-wrap {
    display: grid;
    grid-template-columns: 220px 1fr 280px;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--wpc-text);
}

@media (max-width: 1024px) {
    .wpc-wrap { grid-template-columns: 200px 1fr; }
    .wpc-summary { display: none; }
}

@media (max-width: 768px) {
    .wpc-wrap { grid-template-columns: 1fr; padding: 16px 12px; }
    .wpc-sidebar { display: none; }
}

/* ── Sidebar ──────────────────────────────────────────────── */

.wpc-sidebar {
    background: var(--wpc-card);
    border-radius: var(--wpc-radius);
    box-shadow: var(--wpc-shadow);
    padding: 20px 16px;
    align-self: start;
    position: sticky;
    top: 20px;
}

.wpc-sidebar-head h2 {
    font-size: 16px;
    font-weight: 800;
    color: var(--wpc-navy);
    margin: 0 0 6px;
}

.wpc-sidebar-head p {
    font-size: 12px;
    color: var(--wpc-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}

.wpc-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--wpc-muted);
    letter-spacing: .04em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.wpc-apps-list { margin-bottom: 20px; }

.wpc-app-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: var(--wpc-bg);
    border: 1px solid var(--wpc-border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpc-text);
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s;
    margin-bottom: 6px;
}

.wpc-app-btn:hover { background: var(--wpc-blue-lt); border-color: var(--wpc-blue); }

.wpc-app-btn img, .wpc-app-btn .wpc-app-icon-placeholder {
    width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}

.wpc-app-btn .wpc-app-icon-placeholder {
    background: var(--wpc-navy); color: #fff; display: flex;
    align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

.wpc-app-btn .chevron { margin-left: auto; color: var(--wpc-muted); }

.wpc-why ul { list-style: none; margin: 0; padding: 0; }
.wpc-why ul li { font-size: 12px; color: var(--wpc-muted); padding: 3px 0; }
.wpc-check { color: var(--wpc-green); font-weight: 700; margin-right: 4px; }

.wpc-help { margin-top: 20px; text-align: center; }
.wpc-help p { font-size: 12px; color: var(--wpc-muted); margin-bottom: 8px; }

.wpc-whatsapp-btn {
    display: block;
    padding: 10px 16px;
    background: #25d366;
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    transition: background .2s;
}
.wpc-whatsapp-btn:hover { background: #1fba59; color: #fff; }

/* ── Main form area ──────────────────────────────────────── */

.wpc-main {
    background: var(--wpc-card);
    border-radius: var(--wpc-radius);
    box-shadow: var(--wpc-shadow);
    padding: 28px 32px;
}

@media (max-width: 480px) {
    .wpc-main { padding: 20px 16px; }
}

.wpc-form-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--wpc-border);
    flex-wrap: wrap;
}

.wpc-form-icon {
    font-size: 36px;
    width: 56px;
    height: 56px;
    background: var(--wpc-blue-lt);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wpc-form-header h1 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--wpc-navy);
}

.wpc-form-header p { font-size: 13px; color: var(--wpc-muted); margin: 0; }

.wpc-secure-badge {
    margin-left: auto;
    text-align: right;
    font-size: 12px;
    color: var(--wpc-muted);
    flex-shrink: 0;
}

.wpc-secure-badge strong { color: var(--wpc-green); font-size: 13px; }

/* ── Notices ─────────────────────────────────────────────── */

.wpc-notice {
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.6;
}

.wpc-notice.success { background: var(--wpc-green-lt); border: 1px solid #86efac; color: #15803d; }
.wpc-notice.error   { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.wpc-notice.info    { background: var(--wpc-blue-lt); border: 1px solid #93c5fd; color: var(--wpc-blue); }

/* ── Bank info strip ─────────────────────────────────────── */

.wpc-bank-info {
    background: var(--wpc-blue-lt);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.wpc-bank-info h4 { margin: 0 0 10px; font-size: 14px; color: var(--wpc-navy); }
.wpc-bank-details { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.wpc-bank-details > div { display: flex; align-items: center; gap: 6px; }
.wpc-bank-details span { color: var(--wpc-muted); }

.wpc-copy-btn {
    padding: 3px 10px;
    font-size: 12px;
    background: #fff;
    border: 1px solid var(--wpc-blue);
    border-radius: 6px;
    color: var(--wpc-blue);
    cursor: pointer;
    transition: background .15s;
}
.wpc-copy-btn:hover { background: var(--wpc-blue-lt); }

/* ── Steps ───────────────────────────────────────────────── */

.wpc-step {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--wpc-border);
}

.wpc-step:last-of-type { border-bottom: none; }

.wpc-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wpc-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

.wpc-step-body { flex: 1; min-width: 0; }

.wpc-step-body h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wpc-navy);
}

/* ── App cards ───────────────────────────────────────────── */

.wpc-app-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 480px) {
    .wpc-app-cards { display: grid; grid-template-columns: repeat(2, 1fr); }
    .wpc-app-card  { min-width: unset; }
}

.wpc-app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    border: 2px solid var(--wpc-border);
    border-radius: 10px;
    cursor: pointer;
    min-width: 100px;
    transition: border-color .15s, box-shadow .15s;
    background: var(--wpc-card);
}

.wpc-app-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wpc-app-card img, .wpc-app-initials {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
}

.wpc-app-initials {
    background: var(--wpc-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.wpc-app-card span {
    font-size: 12px;
    font-weight: 600;
    color: var(--wpc-text);
    text-align: center;
}

.wpc-app-card.selected {
    border-color: var(--wpc-blue);
    box-shadow: 0 0 0 3px rgba(21,101,192,.15);
}

.wpc-app-card:hover { border-color: var(--wpc-blue); }

/* ── Inputs ──────────────────────────────────────────────── */

.wpc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.wpc-input-icon {
    position: absolute;
    left: 12px;
    font-size: 15px;
    color: var(--wpc-muted);
    pointer-events: none;
}

.wpc-input-wrap input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--wpc-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--wpc-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

.wpc-input-wrap input:focus {
    border-color: var(--wpc-blue);
    box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}

.wpc-naira { font-weight: 700; color: var(--wpc-text); }

.wpc-two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wpc-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

@media (max-width: 640px) {
    .wpc-two-col   { grid-template-columns: 1fr; }
    .wpc-three-col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .wpc-three-col { grid-template-columns: 1fr; }
}

.wpc-hint { font-size: 12px; color: var(--wpc-muted); margin: 6px 0 0; }

/* ── Estimate box ────────────────────────────────────────── */

.wpc-estimate-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--wpc-blue-lt);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 480px) {
    .wpc-estimate-box { grid-template-columns: 1fr; }
    .wpc-estimate-right { border-left: none !important; border-top: 1px solid #93c5fd; }
}

.wpc-estimate-left, .wpc-estimate-right { padding: 16px 20px; }
.wpc-estimate-right { border-left: 1px solid #93c5fd; }
.wpc-estimate-label { font-size: 11px; color: var(--wpc-muted); font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
.wpc-estimate-amount { font-size: 22px; font-weight: 800; color: var(--wpc-text); }
.wpc-estimate-coins  { font-size: 20px; font-weight: 800; color: var(--wpc-blue); }
.wpc-coins-app       { font-size: 14px; margin-left: 4px; }

/* ── Upload area ─────────────────────────────────────────── */

.wpc-upload-area {
    display: block;
    border: 2px dashed var(--wpc-border);
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.wpc-upload-area:hover, .wpc-upload-area.drag-over {
    border-color: var(--wpc-blue);
    background: var(--wpc-blue-lt);
}

.wpc-upload-area input[type="file"] { display: none; }
.wpc-upload-inner { font-size: 14px; color: var(--wpc-muted); }
.wpc-upload-inner strong { color: var(--wpc-blue); }

/* ── Confirm checkbox ────────────────────────────────────── */

.wpc-confirm-label {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--wpc-muted);
    align-items: flex-start;
    cursor: pointer;
    line-height: 1.5;
}

.wpc-confirm-label input {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--wpc-navy);
}

/* ── Submit button ───────────────────────────────────────── */

.wpc-submit-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: var(--wpc-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .03em;
    transition: background .2s, transform .1s;
    margin-top: 8px;
}

.wpc-submit-btn:hover   { background: var(--wpc-blue); }
.wpc-submit-btn:active  { transform: scale(.99); }

.wpc-submit-btn--withdraw { background: var(--wpc-green); }
.wpc-submit-btn--withdraw:hover { background: #155e30; }

.wpc-submit-hint { text-align: center; font-size: 12px; color: var(--wpc-muted); margin-top: 10px; }

/* ── Order summary sidebar ───────────────────────────────── */

.wpc-summary {
    background: var(--wpc-card);
    border-radius: var(--wpc-radius);
    box-shadow: var(--wpc-shadow);
    padding: 20px 18px;
    align-self: start;
    position: sticky;
    top: 20px;
}

.wpc-summary h3 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--wpc-navy);
    margin: 0 0 16px;
    border-bottom: 1px solid var(--wpc-border);
    padding-bottom: 10px;
    text-transform: uppercase;
}

.wpc-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--wpc-border);
    gap: 8px;
}

.wpc-summary-row span    { color: var(--wpc-muted); flex-shrink: 0; }
.wpc-summary-row strong  { text-align: right; color: var(--wpc-text); word-break: break-all; }
.wpc-green { color: var(--wpc-green) !important; }

.wpc-important-note {
    margin-top: 16px;
    background: var(--wpc-blue-lt);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
}

.wpc-important-note p  { margin: 0 0 8px; font-weight: 700; color: var(--wpc-navy); }
.wpc-important-note ul { list-style: none; margin: 0; padding: 0; }
.wpc-important-note ul li { padding: 2px 0; color: var(--wpc-muted); }

.wpc-trusted {
    margin-top: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--wpc-muted);
    padding: 12px;
    background: var(--wpc-bg);
    border-radius: 8px;
}

.wpc-trusted strong { display: block; color: var(--wpc-navy); margin-bottom: 4px; }
.wpc-trusted p { margin: 0; }

/* ── My Orders page ──────────────────────────────────────── */

.wpc-my-orders {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wpc-my-orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.wpc-my-orders-header h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--wpc-navy); }

.wpc-action-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.wpc-btn-primary {
    display: inline-block;
    padding: 9px 20px;
    background: var(--wpc-navy);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s;
}
.wpc-btn-primary:hover { background: var(--wpc-blue); color: #fff; }

.wpc-btn-outline {
    display: inline-block;
    padding: 9px 20px;
    background: #fff;
    color: var(--wpc-navy);
    border: 1px solid var(--wpc-navy);
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s;
}
.wpc-btn-outline:hover { background: var(--wpc-blue-lt); }

.wpc-table-section { margin-bottom: 36px; }
.wpc-table-section h3 { font-size: 16px; font-weight: 700; color: var(--wpc-navy); margin-bottom: 12px; }

.wpc-table-wrap { overflow-x: auto; }

.wpc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wpc-table th, .wpc-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--wpc-border);
    text-align: left;
}

.wpc-table th {
    background: var(--wpc-bg);
    font-weight: 700;
    color: var(--wpc-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.wpc-note-row td  { background: var(--wpc-amber-lt); font-size: 12px; padding: 6px 12px; }

.wpc-empty { text-align: center; padding: 40px 20px; color: var(--wpc-muted); }
.wpc-empty p { font-size: 15px; margin-bottom: 16px; }

.wpc-coin-login-prompt { padding: 24px; text-align: center; color: var(--wpc-muted); }

/* ── Status chips ────────────────────────────────────────── */

.wpc-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.status-pending    { background: #fef3c7; color: #92400e; }
.status-verifying  { background: var(--wpc-blue-lt); color: var(--wpc-navy); }
.status-processing { background: var(--wpc-blue-lt); color: var(--wpc-navy); }
.status-completed  { background: var(--wpc-green-lt); color: var(--wpc-green); }
.status-rejected   { background: #fee2e2; color: #991b1b; }
.status-cancelled  { background: #f3f4f6; color: #4b5563; }

/* ============================================================
   Withdrawal Request Form (crypto → Naira)
   ============================================================ */

.wpcw-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--wpc-text);
}

.wpcw-page-header {
    text-align: center;
    margin-bottom: 28px;
}

.wpcw-page-header h1 {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: .03em;
    color: var(--wpc-navy);
    margin: 0 0 8px;
}

@media (max-width: 480px) {
    .wpcw-page-header h1 { font-size: 20px; }
}

.wpcw-page-header p { font-size: 15px; color: var(--wpc-muted); margin: 0; }

.wpcw-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .wpcw-layout { grid-template-columns: 1fr; }
    /* Stop the sidebar sticking once it stacks, otherwise the main form
       scrolls underneath the pinned sidebar on mobile. */
    .wpcw-sidebar { order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: static; top: auto; }
}

@media (max-width: 600px) {
    .wpcw-sidebar { grid-template-columns: 1fr; }
}

/* Alert bar */
.wpcw-alert-bar {
    background: var(--wpc-amber-lt);
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 20px;
}

/* Steps */
.wpcw-form {
    background: #fff;
    border: 1px solid var(--wpc-border);
    border-radius: var(--wpc-radius);
    overflow: hidden;
    box-shadow: var(--wpc-shadow);
}

.wpcw-step {
    padding: 20px 24px;
    border-bottom: 1px solid #f3f4f6;
}

@media (max-width: 480px) {
    .wpcw-step { padding: 16px; }
}

.wpcw-step:last-of-type { border-bottom: none; }

.wpcw-step-hd {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.wpcw-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wpc-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wpcw-step-hd strong {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: block;
    color: var(--wpc-navy);
    margin-bottom: 2px;
}

.wpcw-step-hd p { margin: 0; font-size: 12px; color: var(--wpc-muted); }

/* App cards */
.wpcw-app-cards { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 480px) {
    .wpcw-app-cards { display: grid; grid-template-columns: repeat(2, 1fr); }
    .wpcw-app-card  { min-width: unset; }
}

.wpcw-app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border: 2px solid var(--wpc-border);
    border-radius: 10px;
    cursor: pointer;
    min-width: 90px;
    transition: border-color .15s;
    position: relative;
}

.wpcw-app-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.wpcw-app-card img, .wpcw-app-initials {
    width: 46px; height: 46px; border-radius: 10px; object-fit: cover;
}

.wpcw-app-initials {
    background: var(--wpc-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}

.wpcw-app-initials.wpcw-other { background: var(--wpc-muted); font-size: 20px; }
.wpcw-app-card span { font-size: 11px; font-weight: 600; text-align: center; }

.wpcw-app-card.selected {
    border-color: var(--wpc-blue);
    box-shadow: 0 0 0 3px rgba(21,101,192,.12);
}

.wpcw-app-card:hover { border-color: var(--wpc-blue); }

/* Currency & network options */
.wpcw-two-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 480px;
}

@media (max-width: 480px) {
    .wpcw-two-options { max-width: 100%; }
}

.wpcw-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--wpc-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: border-color .15s;
    position: relative;
}

.wpcw-option-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.wpcw-option-card.selected {
    border-color: var(--wpc-blue);
    background: var(--wpc-blue-lt);
}

.wpcw-option-card:hover { border-color: var(--wpc-blue); }

.wpcw-coin-icon, .wpcw-net-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 16px; color: #fff; flex-shrink: 0;
}

.wpcw-usdt { background: #26a17b; }
.wpcw-usdc { background: #2775ca; }
.wpcw-trc  { background: #ef0027; }
.wpcw-bep  { background: #f0b90b; color: #000; }

/* Wallet address box */
.wpcw-wallet-box {
    background: var(--wpc-bg);
    border: 1px solid var(--wpc-border);
    border-radius: 10px;
    padding: 16px 18px;
}

.wpcw-wallet-label { font-size: 12px; color: var(--wpc-muted); font-weight: 600; margin-bottom: 8px; }

.wpcw-wallet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wpcw-wallet-addr {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--wpc-navy);
    word-break: break-all;
    flex: 1;
}

.wpcw-copy-btn {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--wpc-blue);
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wpc-blue);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}
.wpcw-copy-btn:hover { background: var(--wpc-blue-lt); }

.wpcw-wallet-warn {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--wpc-amber-lt);
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 12px;
    color: #92400e;
}

/* Amount row */
.wpcw-amount-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wpcw-amount-input {
    padding: 10px 14px;
    border: 1px solid var(--wpc-border);
    border-radius: 8px;
    font-size: 15px;
    width: 200px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

@media (max-width: 480px) {
    .wpcw-amount-input { width: 100%; }
}

.wpcw-amount-input:focus {
    border-color: var(--wpc-blue);
    box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}

.wpcw-amount-currency { font-weight: 700; font-size: 15px; color: var(--wpc-navy); }
.wpcw-amount-eg { font-size: 12px; color: var(--wpc-muted); }

/* TxID row */
.wpcw-txid-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.wpcw-txid-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--wpc-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: monospace;
    outline: none;
    min-width: 0;
    transition: border-color .15s, box-shadow .15s;
}

.wpcw-txid-input:focus {
    border-color: var(--wpc-blue);
    box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}

.wpcw-txid-help { font-size: 12px; color: var(--wpc-blue); white-space: nowrap; text-decoration: underline; }

/* Upload */
.wpcw-upload-area {
    display: block;
    border: 2px dashed var(--wpc-border);
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.wpcw-upload-area:hover, .wpcw-upload-area.drag-over {
    border-color: var(--wpc-blue);
    background: var(--wpc-blue-lt);
}

.wpcw-upload-area input[type="file"] { display: none; }
.wpcw-upload-inner { font-size: 14px; color: var(--wpc-muted); }
.wpcw-upload-inner strong { color: var(--wpc-blue); }

/* Contact + bank fields */
.wpcw-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

@media (max-width: 700px) {
    .wpcw-three-col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .wpcw-three-col { grid-template-columns: 1fr; }
}

.wpcw-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.wpcw-field input, .wpcw-bank-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--wpc-border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.wpcw-field input:focus, .wpcw-bank-select:focus {
    border-color: var(--wpc-blue);
    box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}

.wpcw-phone-row { display: flex; align-items: center; }

.wpcw-flag {
    padding: 9px 10px;
    background: var(--wpc-bg);
    border: 1px solid var(--wpc-border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 13px;
    white-space: nowrap;
    font-weight: 600;
}

.wpcw-phone-row input { border-radius: 0 8px 8px 0; }

.wpcw-bank-note {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--wpc-amber-lt);
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 12px;
    color: #92400e;
}

/* Confirmation checkboxes */
.wpcw-checks { display: flex; flex-direction: column; gap: 10px; }

.wpcw-checks label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    line-height: 1.5;
}

.wpcw-checks input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--wpc-navy);
}

/* Submit */
.wpcw-submit-btn {
    display: block;
    width: calc(100% - 48px);
    margin: 0 24px 0;
    padding: 16px;
    background: var(--wpc-navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s;
}

.wpcw-submit-btn:hover { background: var(--wpc-blue); }

@media (max-width: 480px) {
    .wpcw-submit-btn { width: calc(100% - 32px); margin: 0 16px; }
}

.wpcw-submit-hint {
    text-align: center;
    font-size: 12px;
    color: var(--wpc-muted);
    padding: 12px 24px 20px;
    margin: 0;
}

/* Trust bar */
.wpcw-trust-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    border-top: 1px solid var(--wpc-border);
    margin-top: 24px;
    padding-top: 20px;
}

.wpcw-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    text-align: center;
    min-width: 120px;
}

@media (max-width: 480px) {
    .wpcw-trust-item { min-width: calc(50% - 4px); }
}

.wpcw-trust-icon { font-size: 22px; }
.wpcw-trust-item strong { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--wpc-navy); }
.wpcw-trust-item span { font-size: 11px; color: var(--wpc-muted); }

/* ── Withdrawal sidebar ───────────────────────────────────── */

.wpcw-sidebar { display: flex; flex-direction: column; gap: 16px; }
/* Sticky only on desktop. Declared as min-width so it can't override the
   stacked/static mobile layout regardless of source order. */
@media (min-width: 901px) {
    .wpcw-sidebar { position: sticky; top: 20px; }
}

.wpcw-sidebar-card {
    background: #fff;
    border: 1px solid var(--wpc-border);
    border-radius: var(--wpc-radius);
    padding: 18px;
    box-shadow: var(--wpc-shadow);
}

.wpcw-sidebar-card h3 {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wpc-navy);
}

/* How it works */
.wpcw-how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wpcw-how-steps li { display: flex; gap: 12px; align-items: flex-start; }

.wpcw-how-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--wpc-blue-lt);
    color: var(--wpc-navy);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}

.wpcw-how-steps strong { display: block; font-size: 13px; color: var(--wpc-navy); margin-bottom: 2px; }
.wpcw-how-steps p { margin: 0; font-size: 12px; color: var(--wpc-muted); line-height: 1.4; }

/* Reminders */
.wpcw-reminders ul { list-style: none; margin: 0; padding: 0; }
.wpcw-reminders ul li { font-size: 12px; color: #374151; padding: 4px 0 4px 16px; position: relative; line-height: 1.5; }
.wpcw-reminders ul li::before { content: '•'; position: absolute; left: 0; color: var(--wpc-amber); font-weight: 700; }

/* Safe & Secure */
.wpcw-secure ul { list-style: none; margin: 0; padding: 0; }
.wpcw-secure ul li { font-size: 12px; color: #374151; padding: 3px 0; }

/* Help */
.wpcw-help p { font-size: 13px; color: var(--wpc-muted); margin-bottom: 12px; }

.wpcw-wa-btn {
    display: block;
    padding: 10px;
    background: #25d366;
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    transition: background .2s;
}
.wpcw-wa-btn:hover { background: #1fba59; color: #fff; }

/* Please note */
.wpcw-please-note p { font-size: 13px; color: #374151; margin-bottom: 6px; }
.wpcw-please-note strong { color: var(--wpc-navy); display: block; margin-bottom: 12px; }
.wpcw-lock-icon { text-align: center; font-size: 40px; }

/* ============================================================
   Admin styles
   ============================================================ */

.wpc-admin-wrap { max-width: 1400px; }

.wpc-admin-card {
    background: #fff;
    border: 1px solid var(--wpc-border);
    border-radius: 10px;
    padding: 24px;
    margin: 20px 0;
}

.wpc-admin-card h2 { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--wpc-navy); }

.wpc-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 16px 0;
    padding: 0;
    border-bottom: 2px solid var(--wpc-border);
}

.wpc-admin-tabs li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    transition: background .15s;
    margin-bottom: -2px;
}

.wpc-admin-tabs li a:hover { background: #f3f4f6; }

.wpc-admin-tabs li a.active {
    background: #fff;
    border-color: var(--wpc-border);
    color: var(--wpc-navy);
    border-bottom-color: #fff;
}

.wpc-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 5px;
    background: #e5e7eb;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.wpc-admin-tabs li a.active .wpc-count { background: var(--wpc-blue-lt); color: var(--wpc-navy); }

.wpc-search-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.wpc-search-form input {
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    width: 280px;
    max-width: 100%;
}

.wpc-search-form button {
    padding: 7px 16px;
    background: var(--wpc-navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}

.wpc-search-form button:hover { background: var(--wpc-blue); }

.wpc-admin-table { font-size: 13px; }
.wpc-admin-table th { font-size: 12px; }
.wpc-admin-table td { vertical-align: top; }

.wpc-admin-empty { padding: 40px; text-align: center; color: var(--wpc-muted); }

/* Modal */

.wpc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9998;
}

.wpc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 48px rgba(0,0,0,.2);
    padding: 28px;
    width: 480px;
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 9999;
}

.wpc-modal h3 { margin: 0 0 20px; font-size: 16px; font-weight: 700; color: var(--wpc-navy); }

.wpc-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--wpc-muted);
}

.wpc-modal-field { margin-bottom: 16px; }

.wpc-modal-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.wpc-modal-field select,
.wpc-modal-field input,
.wpc-modal-field textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s;
}

.wpc-modal-field select:focus,
.wpc-modal-field input:focus,
.wpc-modal-field textarea:focus {
    border-color: var(--wpc-blue);
    box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}

.wpc-modal-actions { display: flex; gap: 10px; margin-top: 20px; }

.wpc-rate-input { text-align: right; }