/* ============================================================
   Send Money / Currency Exchange
   Brand colors from screenshot:
     Navy     : #0b1d51
     Blue     : #1565c0
     Green    : #1a6b3c
     Amber    : #d97706
   ============================================================ */

:root {
    --snd-navy:    #0b1d51;
    --snd-blue:    #1565c0;
    --snd-blue-lt: #e3f0fd;
    --snd-green:   #1a6b3c;
    --snd-green-lt:#dcfce7;
    --snd-amber:   #d97706;
    --snd-amber-lt:#fffbeb;
    --snd-border:  #e5e7eb;
    --snd-bg:      #f8fafc;
    --snd-text:    #111827;
    --snd-muted:   #6b7280;
    --snd-radius:  10px;
    --snd-shadow:  0 2px 16px rgba(11,29,81,.08);
}

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

/* ── Page wrapper ─────────────────────────────────────── */

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

.snd-page-header {
    text-align: center;
    margin-bottom: 32px;
}

.snd-page-header h1 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: .04em;
    color: var(--snd-navy);
    margin: 0 0 8px;
}

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

.snd-header-underline {
    width: 60px;
    height: 3px;
    background: var(--snd-blue);
    border-radius: 2px;
    margin: 0 auto;
}

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

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

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

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

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

.snd-notice {
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.6;
}
.snd-notice.success { background: var(--snd-green-lt); border: 1px solid #86efac; color: #15803d; }
.snd-notice.error   { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.snd-notice.info    { background: var(--snd-blue-lt); border: 1px solid #93c5fd; color: var(--snd-blue); }

/* ── Form container ───────────────────────────────────── */

.snd-form {
    background: #fff;
    border: 1px solid var(--snd-border);
    border-radius: var(--snd-radius);
    overflow: hidden;
    box-shadow: var(--snd-shadow);
}

.snd-step {
    padding: 22px 28px;
    border-bottom: 1px solid #f3f4f6;
}

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

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

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

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

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

/* ── Transfer type grid ───────────────────────────────── */

.snd-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 640px) {
    .snd-type-grid { grid-template-columns: repeat(2, 1fr); }
}

.snd-type-card {
    border: 2px solid var(--snd-border);
    border-radius: var(--snd-radius);
    padding: 16px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
    text-align: center;
}

.snd-type-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.snd-type-card:hover { border-color: var(--snd-blue); }

.snd-type-card.selected {
    border-color: var(--snd-blue);
    background: var(--snd-blue-lt);
    box-shadow: 0 0 0 3px rgba(21,101,192,.12);
}

.snd-type-flags {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 24px;
}

.snd-flag { font-size: 26px; }
.snd-arrow { font-size: 16px; color: var(--snd-navy); font-weight: 700; }

.snd-type-label strong { font-size: 13px; font-weight: 700; color: var(--snd-navy); display: block; }
.snd-type-label span   { font-size: 11px; color: var(--snd-muted); }

/* ── Calculator ───────────────────────────────────────── */

.snd-calc {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}

@media (max-width: 560px) {
    .snd-calc { grid-template-columns: 1fr; }
    .snd-swap-btn { order: -1; align-self: center; }
}

.snd-calc-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--snd-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.snd-amount-box {
    display: flex;
    border: 1px solid var(--snd-border);
    border-radius: 8px;
    overflow: hidden;
}

.snd-currency-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    background: #f9fafb;
    border-right: 1px solid var(--snd-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--snd-navy);
    white-space: nowrap;
    cursor: default;
}

.snd-amount-box input {
    flex: 1;
    padding: 12px 14px;
    border: none;
    font-size: 20px;
    font-weight: 700;
    color: var(--snd-navy);
    outline: none;
    width: 0;
    min-width: 0;
}

.snd-amount-box input:focus { box-shadow: inset 0 0 0 2px var(--snd-blue); }
.snd-amount-box input[readonly] { background: #f9fafb; color: var(--snd-blue); }

.snd-swap-btn {
    padding: 10px 14px;
    background: var(--snd-navy);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background .15s;
    align-self: flex-end;
}

.snd-swap-btn:hover { background: var(--snd-blue); }

/* Rate breakdown row */
.snd-rate-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f8fafc;
    border: 1px solid var(--snd-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

@media (max-width: 640px) {
    .snd-rate-row { grid-template-columns: repeat(2, 1fr); }
}

.snd-rate-cell {
    padding: 12px 14px;
    border-right: 1px solid var(--snd-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.snd-rate-cell:last-child { border-right: none; }
.snd-rate-cell span { font-size: 11px; color: var(--snd-muted); }
.snd-rate-cell strong { font-size: 14px; font-weight: 700; color: var(--snd-text); }

.snd-rate-highlight span { color: var(--snd-blue); font-weight: 600; }
.snd-rate-highlight strong { font-size: 18px; color: var(--snd-blue); }

.snd-rate-note { font-size: 12px; color: var(--snd-blue); margin: 0; }

/* ── Recipient tabs ───────────────────────────────────── */

.snd-recip-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.snd-recip-tab {
    padding: 8px 16px;
    border: 1px solid var(--snd-border);
    border-radius: 6px;
    background: #f9fafb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    color: var(--snd-muted);
}

.snd-recip-tab.active {
    background: var(--snd-green-lt);
    border-color: #86efac;
    color: var(--snd-green);
}

.snd-recip-tab:hover { border-color: var(--snd-blue); }

.snd-recip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}

@media (max-width: 560px) { .snd-recip-grid { grid-template-columns: 1fr; } }

.snd-recip-note {
    padding: 10px 14px;
    background: var(--snd-green-lt);
    border: 1px solid #86efac;
    border-radius: 7px;
    font-size: 12px;
    color: var(--snd-green);
}

/* ── Fields ───────────────────────────────────────────── */

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

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

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

.snd-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .snd-three-col { grid-template-columns: 1fr; } }

.snd-phone-row { display: flex; }
.snd-flag-prefix {
    padding: 9px 8px;
    background: #f9fafb;
    border: 1px solid var(--snd-border);
    border-right: none;
    border-radius: 7px 0 0 7px;
    font-size: 13px;
}
.snd-dialcode {
    padding: 9px 6px;
    background: #f9fafb;
    border: 1px solid var(--snd-border);
    border-right: none;
    font-size: 13px;
    font-weight: 600;
}
.snd-phone-row input { border-radius: 0 7px 7px 0; }

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

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

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

.snd-upload-area input { display: none; }
.snd-upload-inner { font-size: 14px; color: var(--snd-muted); }
.snd-upload-inner strong { color: var(--snd-blue); }

/* ── Checks ───────────────────────────────────────────── */

.snd-checks { display: flex; flex-direction: column; gap: 10px; }

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

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

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

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

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

.snd-submit-note {
    text-align: center;
    font-size: 12px;
    color: var(--snd-muted);
    padding: 12px 28px 20px;
    line-height: 1.6;
    background: #f8fafc;
    border-top: 1px solid var(--snd-border);
    margin-top: 16px;
}

/* ── Trust bar ────────────────────────────────────────── */

.snd-trust-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid var(--snd-border);
    border-radius: var(--snd-radius);
    margin-top: 20px;
    overflow: hidden;
}

.snd-trust-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    text-align: center;
    border-right: 1px solid var(--snd-border);
}

.snd-trust-item:last-child { border-right: none; }
.snd-trust-item > span:first-child { font-size: 22px; }
.snd-trust-item strong { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--snd-navy); }
.snd-trust-sub { font-size: 11px; color: var(--snd-muted); }

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

.snd-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: 961px) {
    .snd-sidebar { position: sticky; top: 20px; }
}

/* Today's rates card — dark navy */
.snd-rates-card {
    background: var(--snd-navy);
    color: #fff;
    border-radius: var(--snd-radius);
    overflow: hidden;
}

.snd-rates-card-hd {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.snd-rates-card-hd strong { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.snd-rates-card-hd small  { font-size: 11px; color: rgba(255,255,255,.6); }

.snd-rate-entry {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.snd-rate-pair {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    margin-bottom: 6px;
}

.snd-rate-arrow { font-size: 14px; color: rgba(255,255,255,.6); }
.snd-rate-pair-label { font-size: 12px; color: rgba(255,255,255,.6); margin-left: 4px; }

.snd-rate-big { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.snd-rate-big span { font-size: 20px; color: #60a5fa; }

.snd-rate-buysell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 12px;
}

.snd-rate-buysell div span { display: block; color: rgba(255,255,255,.55); }
.snd-rate-buysell div strong { color: #fff; }

.snd-view-all {
    display: block;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #60a5fa;
    text-align: center;
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,.1);
}
.snd-view-all:hover { color: #93c5fd; }

/* Other sidebar cards */
.snd-sidebar-card {
    background: #fff;
    border: 1px solid var(--snd-border);
    border-radius: var(--snd-radius);
    padding: 16px;
    box-shadow: var(--snd-shadow);
}

.snd-sidebar-card h3 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Important info */
.snd-important h3 { color: var(--snd-amber); }
.snd-important { background: var(--snd-amber-lt); border-color: #fde68a; }
.snd-important ul { list-style: none; margin: 0; padding: 0; }
.snd-important ul li { font-size: 12px; color: #374151; padding: 3px 0 3px 14px; position: relative; line-height: 1.5; }
.snd-important ul li::before { content: '•'; position: absolute; left: 0; color: var(--snd-amber); font-weight: 700; }

/* Why choose us */
.snd-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.snd-why-list li { display: flex; gap: 10px; align-items: flex-start; }
.snd-why-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.snd-why-list strong { display: block; font-size: 13px; color: var(--snd-navy); }
.snd-why-list p { margin: 0; font-size: 12px; color: var(--snd-muted); line-height: 1.4; }

/* Help card */
.snd-help p { font-size: 13px; color: var(--snd-muted); margin-bottom: 12px; }
.snd-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;
}
.snd-wa-btn:hover { background: #1fba59; color: #fff; }

/* Trusted */
.snd-trusted { text-align: center; }
.snd-trusted-label { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--snd-navy); margin: 0 0 6px; }
.snd-stars { color: #f59e0b; font-size: 22px; letter-spacing: 2px; margin-bottom: 4px; }
.snd-trusted-sub { font-size: 12px; color: var(--snd-muted); margin: 0; }

/* ── My Transfers page ────────────────────────────────── */

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

.snd-my-transfers {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--snd-text);
}

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

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

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

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

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

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

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

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

.snd-table td small { color: var(--snd-muted); margin-left: 2px; }
.snd-table code { font-size: 12px; }

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

/* Status chips (standalone — send-money.css is the only sheet on this page) */
.wpc-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.wpc-status.status-pending    { background: #fef3c7; color: #92400e; }
.wpc-status.status-processing { background: var(--snd-blue-lt); color: var(--snd-navy); }
.wpc-status.status-completed  { background: var(--snd-green-lt); color: var(--snd-green); }
.wpc-status.status-rejected   { background: #fee2e2; color: #991b1b; }
.wpc-status.status-cancelled  { background: #f3f4f6; color: #4b5563; }

@media (max-width: 480px) {
    .snd-my-transfers-header h2 { font-size: 18px; }
    .snd-table th, .snd-table td { padding: 8px; }
}

/* ── Page footer ──────────────────────────────────────── */

.snd-page-footer {
    text-align: center;
    padding: 20px 0 0;
    font-size: 12px;
    color: var(--snd-muted);
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.snd-page-footer a { color: var(--snd-navy); text-decoration: none; }
.snd-page-footer a:hover { text-decoration: underline; }

/* ── Extra responsive ─────────────────────────────────── */

@media (max-width: 480px) {

    .snd-page-header h1 { font-size: 22px; }

    .snd-step { padding: 16px; }

    .snd-type-grid { grid-template-columns: repeat(2, 1fr); }

    .snd-calc { grid-template-columns: 1fr; }
    .snd-swap-btn { width: 100%; justify-content: center; }

    .snd-rate-row { grid-template-columns: repeat(2, 1fr); }

    .snd-three-col { grid-template-columns: 1fr; }

    .snd-recip-grid { grid-template-columns: 1fr; }

    .snd-submit-btn {
        width: calc(100% - 32px);
        margin: 0 16px;
    }

    .snd-trust-item { min-width: calc(50% - 1px); padding: 12px 8px; }
    .snd-trust-item strong { font-size: 10px; }
}