/* assets/style.css — стилі сторінок оплати (без inline-стилів і скриптів: CSP script-src 'self'). */
:root{--primary:#1e7e34;--bg:#121212;--card:#1f1f1f;--text:#f0f0f0;--input-bg:#2a2a2a;--input-border:#444;--ph:#999;}
*{box-sizing:border-box}
body{font-family:'Roboto',sans-serif;background:var(--bg);color:var(--text);margin:0;padding:0}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;margin:0}
.center .box{margin:0}
.actions{text-align:center;margin-top:28px}
.btn-big{padding:14px 32px;font-size:17px;border-radius:12px;box-shadow:0 4px 14px rgba(30,126,52,.35)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flyDown{from{opacity:0;transform:translateY(-140px)}to{opacity:1;transform:none}}
.badges{text-align:center;margin-top:26px}
.badges img{max-width:100%;height:auto;display:inline-block}
.logo{display:block;width:min(340px,90%);height:auto;margin:0 auto 44px;animation:flyDown 1s ease-out both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.center .box{animation:fadeUp .6s ease-out both}
.ok-icon{width:72px;height:72px;margin:0 auto 18px;animation:pop .5s ease-out .2s both}
.ok-icon svg{width:100%;height:100%}
.ok-icon .ring{fill:none;stroke:var(--primary);stroke-width:3}
.ok-icon .tick{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s ease-out .6s forwards}
.spinner{width:44px;height:44px;margin:0 auto 18px;border:4px solid var(--input-border);border-top-color:var(--primary);border-radius:50%;animation:spin .9s linear infinite}
@media (prefers-reduced-motion: reduce){.logo,.center .box,.ok-icon,.ok-icon .tick,.spinner{animation:none;opacity:1;stroke-dashoffset:0;transform:none}}
.box{max-width:420px;width:90%;margin:40px auto;background:var(--card);padding:30px 25px 40px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
h2{margin-top:0;margin-bottom:30px;font-size:1.4em;line-height:1.5}
label{display:block;margin:0 0 6px;font-size:14px}
input,select,button{width:100%;padding:9px 16px;margin-bottom:20px;border-radius:10px;border:1px solid var(--input-border);font-size:16px;background:var(--input-bg);color:var(--text)}
input::placeholder{color:var(--ph)}
input:focus,select:focus{border-color:var(--primary);outline:none}
button,.btn{display:inline-block;background:var(--primary);border:none;color:#fff;font-weight:bold;cursor:pointer;text-align:center;text-decoration:none;padding:12px 20px;border-radius:10px}
button:hover,.btn:hover{background:#16652a}
.amount-info{font-weight:bold;margin-bottom:20px;text-align:center}
.safe-payment{color:#00d100;font-size:.9em;margin-bottom:20px}
@media (max-width:480px){.box{padding:25px 20px 35px}input,select,button{font-size:15px}}

/* ===== Світла тема (за логотипом: зелений, блакитний, пастель) ===== */
[data-theme="light"]{--bg:#eef7f1;--card:#ffffff;--text:#1d2b22;--input-bg:#f6faf7;--input-border:#cdd9d1;--ph:#6f7f76;--primary:#1e7e34}
[data-theme="light"] body{background:linear-gradient(160deg,#e9f7ee 0%,#f3f0fb 50%,#e8f1fb 100%);min-height:100vh}
[data-theme="light"] .box{box-shadow:0 14px 40px rgba(30,126,52,.14);border:1px solid #e1ece5}
[data-theme="light"] button,[data-theme="light"] .btn{color:#fff}
[data-theme="light"] .safe-payment{color:#1e7e34}
[hidden]{display:none!important}
.theme-toggle{position:fixed;top:14px;right:14px;width:44px;height:44px;margin:0;padding:0;border-radius:50%;border:1px solid var(--input-border);background:var(--card);color:var(--text);font-size:19px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:10}
.theme-toggle:hover{background:var(--input-bg)}
.key-icon{display:block;width:64px;height:64px;margin:0 auto 14px}
.mini-icon{width:20px;height:20px;vertical-align:middle;margin-right:6px}
[data-theme="light"] .theme-toggle{color:var(--text)}