/* Checkout design B (Apple Settings) — единый источник стилей платёжных страниц.
   Подключается из templates/payments/_header_b.php. Тёмная тема через html.dark. */
    :root{
      --bg:#f2f2f7; --card:#fff; --ink:#1c1c1e; --muted:#8a8a8e; --faint:#aeaeb2;
      --hair:#e6e6eb; --accent:#0a84ff; --accent-2:#0066d6; --radius:26px;
      --warn-bg:#fff7e6; --warn-ink:#946200; --ok-bg:#e6f7ee; --ok-ink:#1ca65f;
      --err-bg:#fff4f3; --err-ink:#c93026; --info-bg:#eef4ff; --pink:#e0457e;
      --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,sans-serif;
      --mono:"SF Mono",ui-monospace,"JetBrains Mono",monospace;
    }
    html.dark{
      --bg:#000; --card:#1c1c1e; --ink:#f5f5f7; --muted:#98989f; --faint:#6c6c70;
      --hair:#2c2c2e; --warn-bg:#2a2206; --ok-bg:#0c2a1a; --err-bg:#2a0f0d; --info-bg:#11233f;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.45}
    .wrap{max-width:1040px;margin:0 auto;padding:26px 20px 36px}
    .onecol{max-width:560px;margin:0 auto}
    .top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
    .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
    .logo .mark{width:32px;height:32px;border-radius:10px;background:var(--ink);color:var(--card);display:grid;place-items:center;font-weight:900;font-size:18px;transform:skewX(-7deg)}
    .logo .mark span{transform:skewX(7deg)}
    .logo img{height:24px;width:auto;max-width:60vw;display:block}
    html.dark .logo img{filter:brightness(0) invert(1)}
    .controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
    .ctrl{display:flex;align-items:center;gap:7px;background:var(--card);border:none;border-radius:13px;padding:10px 13px;font-weight:600;font-size:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);cursor:pointer;color:var(--ink)}
    .ctrl select{border:none;background:transparent;font-weight:600;font-size:14px;color:var(--ink);outline:none;font-family:var(--font);cursor:pointer}
    .grid{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}
    .card{background:var(--card);border-radius:var(--radius);box-shadow:0 1px 3px rgba(0,0,0,.05),0 12px 34px rgba(0,0,0,.05)}
    .pad{padding:28px}
    .ohead{display:flex;align-items:center;gap:16px;margin-bottom:22px}
    .ohead .shop{width:56px;height:56px;border-radius:16px;object-fit:cover;background:var(--bg);flex:none}
    .back{width:56px;height:56px;background:var(--bg);border-radius:16px;display:grid;place-items:center;color:var(--accent);font-size:20px;flex:none;text-decoration:none}
    .lbl{font-size:11px;letter-spacing:.06em;color:var(--faint);font-weight:600;text-transform:uppercase}
    .num{font-size:22px;font-weight:800;letter-spacing:-.02em;word-break:break-word}
    .sub{color:var(--muted);font-size:15px}
    .k{font-size:12px;letter-spacing:.02em;color:var(--muted);font-weight:600;margin:0 0 9px}
    .amount-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .amount{font-size:34px;font-weight:800;letter-spacing:-.03em}
    .amount .cur{font-size:18px;font-weight:700;color:var(--muted)}
    .fiat{color:var(--muted);font-size:14px;margin-top:7px}
    .iconbtn{width:42px;height:42px;background:var(--bg);border-radius:12px;display:grid;place-items:center;color:var(--muted);cursor:pointer;flex:none;border:none}
    .badge{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--ok-bg);color:var(--ok-ink);font-weight:700;font-size:13px;padding:8px 13px;border-radius:11px}
    .section{margin-top:24px}
    .warn{display:flex;gap:13px;background:var(--warn-bg);border-radius:18px;padding:16px 17px;margin-bottom:8px}
    .warn .wi{color:#e8a91e;font-size:20px;flex:none}
    .warn b{color:var(--warn-ink)}.warn p{color:#9c7a2e;font-size:14px;margin-top:3px}
    .addr{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:15px;padding:15px 16px}
    .addr code{font-family:var(--mono);font-size:15px;color:var(--pink);word-break:break-all;flex:1}
    .note{display:flex;gap:12px;background:var(--info-bg);border-radius:16px;padding:15px 16px;margin-top:16px}
    .note .ni{color:var(--accent);font-size:18px;flex:none}.note b{font-size:14.5px}.note p{color:var(--muted);font-size:13.5px;margin-top:2px}
    .field{display:flex;gap:10px;margin-top:8px}
    .input{flex:1;width:100%;background:var(--bg);border:1px solid transparent;border-radius:15px;padding:15px 16px;font-size:15px;font-family:var(--font);outline:none;color:var(--ink)}
    .input::placeholder{color:var(--faint)}.input:focus{background:var(--card);border-color:var(--accent)}
    .input.empty_field,.input.bad{border-color:#ff453a;background:var(--err-bg)}
    .scan{width:54px;background:var(--bg);border-radius:15px;display:grid;place-items:center;color:var(--muted);flex:none;cursor:pointer;border:none}
    .btn{width:100%;margin-top:18px;border:none;border-radius:16px;padding:17px;background:var(--accent);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;font-family:var(--font);text-decoration:none}
    .btn:hover{background:var(--accent-2)}
    .btn.ghost{background:var(--bg);color:var(--accent)}
    .status{display:flex;gap:12px;background:var(--bg);border-radius:16px;padding:15px 16px;margin-top:15px}
    .status .si{color:var(--muted);font-size:18px;flex:none}.status b{font-size:14px}.status p{color:var(--muted);font-size:13.5px;margin-top:2px}
    .alertbox{display:flex;gap:12px;border-radius:16px;padding:15px 16px;margin-top:14px;font-size:14px}
    .alertbox.err{background:var(--err-bg);color:var(--err-ink)}
    .alertbox.info{background:var(--info-bg);color:var(--muted)}
    .alertbox .ico{flex:none;font-size:18px}
    .center{text-align:center;padding:34px 28px}
    .spin{width:54px;height:54px;border-radius:50%;border:4px solid var(--hair);border-top-color:var(--accent);margin:6px auto 18px;animation:sp .9s linear infinite}
    @keyframes sp{to{transform:rotate(360deg)}}
    .bigicon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:32px;margin:6px auto 18px}
    .bigicon.ok{background:var(--ok-bg);color:var(--ok-ink)}.bigicon.err{background:var(--err-bg);color:var(--err-ink)}.bigicon.wait{background:var(--info-bg);color:var(--accent)}
    .h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
    .muted{color:var(--muted);font-size:15px}
    .side h3{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:4px 4px 12px}
    .glist{background:var(--card);border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair)}
    .currency-forms{margin:0}
    .method{display:flex;align-items:center;gap:13px;padding:14px 16px;cursor:pointer;position:relative;border:none;background:transparent;width:100%;text-align:left;font-family:var(--font);color:var(--ink)}
    .glist .currency-forms+.currency-forms .method::before{content:"";position:absolute;top:0;left:60px;right:0;height:1px;background:var(--hair)}
    .method{-webkit-tap-highlight-color:transparent}
    .method:hover,.method:active{background:var(--bg)}
    .coin{width:36px;height:36px;border-radius:9px;object-fit:contain;background:var(--bg);flex:none;padding:5px}
    html.dark .coin{background:#e9e9eb}
    .method .nm{font-weight:600;font-size:15.5px}
    .method .fee{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:1px}
    .method .chev{margin-left:auto;color:var(--faint);font-size:16px}
    .xfields{padding:4px 16px 16px;border-top:1px solid var(--hair);display:none}
    .xfields.show{display:block}
    .xfields .input{margin-top:10px}
    .xbtn{width:100%;margin-top:12px;border:none;border-radius:14px;padding:15px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;cursor:pointer;font-family:var(--font)}
    .xbtn:hover{background:var(--accent-2)}
    .sec{display:flex;gap:13px;background:var(--card);border-radius:18px;padding:16px;margin-top:16px;box-shadow:inset 0 0 0 1px var(--hair)}
    .sec .shield{width:40px;height:40px;border-radius:12px;background:var(--info-bg);color:var(--accent);display:grid;place-items:center;font-size:18px;flex:none}
    .sec b{font-size:14px}.sec p{color:var(--muted);font-size:13px;margin-top:3px}
    .foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;padding:0 6px;flex-wrap:wrap}
    .foot .back2{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:600;font-size:14px;text-decoration:none}
    .foot .pays{display:flex;gap:14px;align-items:center;opacity:.7}
    .foot .pays img{height:22px}
    .alert{border-radius:14px;padding:13px 15px;font-size:14px;margin:8px 0}
    .alert-warning{background:var(--warn-bg);color:var(--warn-ink);font-weight:600}
    .alert-danger{background:var(--err-bg);color:var(--err-ink)}
    .alert-success{background:var(--ok-bg);color:var(--ok-ink)}
    .text-muted{color:var(--muted)}
    /* совместимость с встроенной bootstrap-разметкой не-переоформленных хендлеров (BinancePay и т.п.) */
    .row{margin:0}
    .col-sm-12,.col-md-12{padding:0!important;width:100%}
    .input-group{display:flex;gap:8px;margin:10px 0}
    .input-group .form-control,.form-control.font-size-12{flex:1;background:var(--bg);border:1px solid transparent;border-radius:13px;padding:13px 14px;font-size:14px;color:var(--ink);font-family:var(--mono);outline:none}
    .input-group-append{display:flex;align-items:stretch}
    .btn-secondary,.input-group .btn{width:auto!important;margin:0!important;background:var(--bg)!important;color:var(--muted)!important;border-radius:13px!important;padding:0 16px!important;display:inline-flex;align-items:center;box-shadow:none}
    .btn-dark{background:var(--ink);color:var(--card)}
    .clipboard{cursor:pointer}
    .card img[src^="data:image"]{max-width:148px;border-radius:14px}
    /* компактный крипто-экран: QR слева + детали справа (как у конкурентов) */
    .crypto{display:flex;gap:18px;align-items:flex-start;margin:6px 0 2px}
    .crypto .qr{flex:none;width:148px;text-align:center}
    .crypto .qr img{width:148px;height:148px;background:#fff;padding:7px;border-radius:14px;display:block}
    .crypto .qr .cap{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.3}
    .crypto .det{flex:1;min-width:0;background:var(--bg);border-radius:16px;overflow:hidden}
    .crypto .det .it{padding:12px 14px}
    .crypto .det .it+.it{border-top:1px solid var(--hair)}
    .crypto .det .lab{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
    .crypto .det .val{display:flex;align-items:center;gap:8px}
    .crypto .det code{font-family:var(--mono);font-size:13px;color:var(--pink);word-break:break-all;flex:1;line-height:1.4}
    .crypto .det .iconbtn{width:30px;height:30px;border-radius:8px;font-size:13px}
    @media(max-width:560px){.crypto{flex-direction:column;align-items:center}.crypto .det{width:100%}}
    @media(max-width:880px){.grid{grid-template-columns:1fr}.pad{padding:22px}.amount{font-size:30px}.top{flex-direction:column;align-items:stretch}.controls{justify-content:flex-end}}