/* Local transfer — the country picker, the method tiles and the pay steps.
   Shared by the deposit page (app layout) and the payment link (checkout layout),
   so it uses only the colour tokens both layouts define, with fallbacks for the rest. */

/* ---------- Country picker ---------- */
.lp-cpick{position:relative;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.lp-cpick[open]{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.lp-cpick>summary{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 14px;cursor:pointer;list-style:none}
.lp-cpick>summary::-webkit-details-marker{display:none}
.lp-cpick>summary b{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-cpick>summary small{font-size:12px;color:var(--muted);white-space:nowrap}
.lp-flag{font-size:22px;line-height:1;width:28px;text-align:center;flex:0 0 auto}
.lp-chev{display:grid;color:var(--muted);transition:transform .18s}
.lp-chev svg{width:18px;height:18px}
.lp-cpick[open] .lp-chev{transform:rotate(180deg)}
.lp-cpick-panel{display:grid;gap:8px;padding:0 10px 10px;border-block-start:1px solid var(--line)}
.lp-cpick-search{display:flex;align-items:center;gap:8px;margin-block-start:10px;padding:0 12px;min-height:44px;border-radius:var(--r-sm,10px);background:var(--page-2);color:var(--muted)}
.lp-cpick-search:focus-within{box-shadow:0 0 0 2px var(--ink)}
.lp-cpick-search svg{width:17px;height:17px;flex:0 0 auto}
.lp-cpick-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14.5px;color:var(--ink);outline:0;height:42px}
.lp-cpick-list{list-style:none;margin:0;padding:0;max-height:min(360px,55vh);overflow:auto;overscroll-behavior:contain}
.lp-cpick-list a{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14.5px}
.lp-cpick-list a:hover{background:var(--page-2)}
.lp-cpick-list a.is-on{background:var(--page-2);font-weight:700}
.lp-cpick-list a>span:nth-child(2){flex:1;min-width:0}
.lp-cpick-list small{min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok);font-size:12px;font-weight:700}
.lp-cpick-sep{height:1px;margin:6px 8px;background:var(--line)}
.lp-cpick-none{margin:4px 8px 8px;font-size:13px;color:var(--muted)}

/* ---------- Method tiles ---------- */
.lp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:760px){.lp-tiles.is-wide{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-tile{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;padding:16px 10px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);text-decoration:none;text-align:center;min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
a.lp-tile:hover{border-color:var(--ink);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
a.lp-tile:active{transform:none}
.lp-tile-logo{width:64px;height:64px;display:grid;place-items:center;border-radius:16px;background:var(--page-2);overflow:hidden;color:var(--ink-soft);margin-block-end:2px}
.lp-tile-logo img{max-width:80%;max-height:80%;object-fit:contain}
.lp-tile-logo svg{width:28px;height:28px}
.lp-tile b{font-size:14.5px;line-height:1.35;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-tile small{font-size:12px;color:var(--muted);line-height:1.4}
.lp-tile.is-off{background:var(--page-2);cursor:not-allowed}
.lp-tile.is-off>*:not(.lp-badge){opacity:.5;filter:grayscale(1)}
.lp-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--paper);color:var(--muted);border:1px solid var(--line)}
/* The fee of each method, all included (agent and platform), shown before choosing. */
.lp-fee{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-deep,#7a5a1e);border:1px solid var(--gold-line,#e6d3a8);font-size:11.5px;font-weight:700;white-space:nowrap}
.lp-fee bdi{font-variant-numeric:tabular-nums}
.lp-fee.is-free{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line,var(--ok-bg))}

/* ---------- The pay card: compact, so paying fits one phone screen ---------- */
.lp-card{display:grid;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.lp-head{display:flex;align-items:center;gap:10px;padding:8px 12px;border-block-end:1px solid var(--line)}
.lp-head>div{flex:1;min-width:0;display:grid;gap:1px}
.lp-head b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-head small{font-size:12px;color:var(--muted)}
.lp-logo{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:var(--page-2);border:1px solid var(--line);overflow:hidden;color:var(--ink-soft)}
.lp-logo img{max-width:80%;max-height:80%;object-fit:contain}
.lp-logo svg{width:18px;height:18px}
.lp-link{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

.lp-step{display:grid;gap:8px;padding:10px 12px;min-width:0}
.lp-step+.lp-step{border-block-start:1px solid var(--line)}
.lp-cap{margin:0;font-size:12.5px;font-weight:700;color:var(--muted)}
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The exact amount to pay, with its copy button and its dollars. */
.lp-amount{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lp-amount b{font-size:28px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-amount b small{font-size:13px;font-weight:700;color:var(--muted);margin-inline-start:4px}
@media(max-width:360px){.lp-amount b{font-size:24px}}
.lp-sub{margin:0;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lp-sub .lp-net{color:var(--ok)}

.lp-copy{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.lp-copy:hover{border-color:var(--ink)}
.lp-copy svg{width:16px;height:16px}

/* The amount step: dollars in, the method's money and (for a deposit) the fee out. */
.lp-money{position:relative}
.lp-money .lp-input{height:52px;font-size:22px;font-weight:700;padding:0 60px 0 14px;text-align:left;font-variant-numeric:tabular-nums}
.lp-money b{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;color:var(--muted);pointer-events:none}
.lp-break{display:grid;gap:0;margin:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.lp-break>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;font-size:13px}
.lp-break>div+div{border-block-start:1px solid var(--line)}
.lp-break dt{color:var(--muted);margin:0}
.lp-break dt small{font-size:11.5px}
.lp-break dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-break .is-pay{background:var(--page-2)}
.lp-break .is-pay dt{color:var(--ink);font-weight:700}
.lp-break .is-pay dd{font-size:16px;font-weight:800}
.lp-break .is-fee dd{color:var(--gold-deep,#7a5a1e)}
.lp-break .is-net{background:var(--ok-bg)}
.lp-break .is-net dt{color:var(--ink);font-weight:700}
.lp-break .is-net dd{color:var(--ok);font-size:16px;font-weight:800}

/* The payment details — one line each, easy to copy. */
.lp-fields{display:grid;gap:6px;margin:0}
.lp-field{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 10px;border-radius:var(--r-md);background:var(--page-2);min-width:0}
[dir="rtl"] .lp-field{padding:6px 10px 6px 6px}
.lp-field>div{flex:1;min-width:0;display:grid;gap:0}
.lp-field dt{margin:0;font-size:11.5px;color:var(--muted);font-weight:600}
.lp-field dd{margin:0;font-size:15px;font-weight:700;overflow-wrap:anywhere;unicode-bidi:plaintext}
.lp-note{display:flex;gap:6px;align-items:flex-start;margin:0;padding:8px 10px;border-radius:var(--r-md);background:var(--warn-bg);color:var(--ink);font-size:12.5px;line-height:1.55}
.lp-note svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--warn)}

/* The payer's name and the receipt picture: both required, and they say so. */
.lp-form{display:grid;gap:8px}
.lp-label{font-size:13px;font-weight:700;color:var(--ink)}
.lp-req{color:var(--bad);font-weight:800}
.lp-input{width:100%;height:46px;padding:0 12px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);font:inherit;font-size:15px}
.lp-input::placeholder{color:var(--faint,#9aa1ad)}
.lp-input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,24,39,.08)}
.lp-proof{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:8px;align-items:end}
.lp-proof-name{display:grid;gap:6px;min-width:0}
.lp-file{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;height:46px;padding:2px 6px;border:1.5px dashed var(--ink-soft);border-radius:var(--r-md);background:var(--page-2);color:var(--ink);cursor:pointer;text-align:center}
.lp-file:hover,.lp-file:focus-within{border-color:var(--ink)}
.lp-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.lp-file-ic{display:grid;place-items:center}
.lp-file-ic svg{width:16px;height:16px}
.lp-file b{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-file img{display:none;width:34px;height:34px;border-radius:7px;object-fit:cover}
.lp-file.is-set{border-style:solid;border-color:var(--ok);background:var(--ok-bg);grid-template-columns:34px minmax(0,1fr);align-items:center;justify-items:start;gap:6px}
.lp-file.is-set b{color:var(--ok);font-size:11px}
.lp-file.is-set img{display:block}
.lp-file.is-set .lp-file-ic{display:none}
.lp-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:0;border-radius:var(--r-md);background:var(--ink);color:var(--paper);font:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none}
.lp-btn svg{width:18px;height:18px}
.lp-btn.is-ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--line)}
.lp-btn.is-wa{background:#1f9d55;color:#fff}

/* ---------- Status after the claim ---------- */
.lp-status-head{display:flex;align-items:center;gap:12px;padding:16px;border-block-end:1px solid var(--line)}
.lp-status-head>div{display:grid;gap:2px;min-width:0}
.lp-status-head b{font-size:16px}
.lp-status-head small{font-size:13px;color:var(--muted);line-height:1.6}
.lp-status-ic{width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--warn-bg);color:var(--warn)}
.lp-status-ic svg{width:21px;height:21px}
.lp-card.is-ok .lp-status-ic{background:var(--ok-bg);color:var(--ok)}
.lp-card.is-bad .lp-status-ic{background:var(--bad-bg);color:var(--bad)}
.lp-rows{display:grid;margin:0}
.lp-rows>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;font-size:13.5px}
.lp-rows>div+div{border-block-start:1px solid var(--line)}
.lp-rows dt{color:var(--muted);margin:0}
.lp-rows dd{margin:0;font-weight:700;min-width:0;overflow-wrap:anywhere;text-align:end}
.lp-live{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--muted)}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--warn);animation:lpPulse 1.6s ease-in-out infinite}
@keyframes lpPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lp-dot{animation:none}}

/* ---------- Sections and states around the steps ---------- */
.lp-wrap{display:grid;gap:16px}
.lp-sec{display:grid;gap:10px}
.lp-sec-h{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.lp-empty{display:flex;align-items:center;gap:8px;margin:0;padding:16px;border:1.5px dashed var(--line);border-radius:var(--r-md);color:var(--muted);font-size:13.5px}
.lp-empty svg{width:18px;height:18px}
.lp-hint{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
.lp-warn{display:flex;gap:8px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:var(--r-md);background:var(--warn-bg);color:var(--ink);font-size:13.5px;line-height:1.6}
.lp-warn svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--warn)}