/* =========================================================
Official Merchant Pay - Premium Banking UI
Design tokens follow EU banking style: deep navy, accent
crimson (LV flag), generous whitespace, large typography.
========================================================= */
:root{
--navy-900:#081628;
--navy-800:#0b1f3a;
--navy-700:#13325c;
--navy-600:#1a4178;
--accent:#9A1B1F; /* Latvian flag crimson */
--accent-2:#c93237;
--gold:#c9a85a;
--ok:#0f9d58;
--warn:#e3a008;
--bg:#f4f6fb;
--surface:#ffffff;
--surface-2:#f8fafd;
--line:#e3e8f0;
--line-strong:#cfd6e4;
--text:#0c1830;
--muted:#5b6781;
--muted-2:#8a93a8;
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
--shadow-1:0 1px 2px rgba(11,31,58,.06), 0 2px 6px rgba(11,31,58,.04);
--shadow-2:0 10px 30px -12px rgba(11,31,58,.18), 0 2px 8px rgba(11,31,58,.06);
--shadow-3:0 30px 60px -20px rgba(11,31,58,.28);
--grad-brand:linear-gradient(135deg,#0b1f3a 0%,#13325c 60%,#1a4178 100%);
--grad-accent:linear-gradient(135deg,#9A1B1F 0%,#c93237 100%);
--font:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme="dark"]{
--bg:#070e1c;
--surface:#0d1830;
--surface-2:#0a1428;
--line:#1c2a47;
--line-strong:#27375a;
--text:#e9eefb;
--muted:#9aa6c2;
--muted-2:#6a7693;
--shadow-1:0 1px 2px rgba(0,0,0,.4);
--shadow-2:0 10px 40px -10px rgba(0,0,0,.6);
--shadow-3:0 30px 80px -20px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font);
font-size:15px;
line-height:1.55;
color:var(--text);
background:var(--bg);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
min-height:100vh;
display:flex; flex-direction:column;
position:relative;
isolation:isolate;
}
/* ───────── LATVIAN COAT OF ARMS BACKDROP ───────── */
body::before{
content:"";
position:fixed; inset:0;
z-index:-3;
background:
radial-gradient(ellipse 140% 120% at 50% 50%, #f5f6f8 0%, #e2e5ea 50%, #c8ccd3 100%);
}
/* Coat of arms watermark - disabled */
.coa-bg{display:none !important}
[data-theme="dark"]::before{
background:radial-gradient(ellipse 140% 120% at 50% 50%, #142340 0%, #0d1830 55%, #070e1c 100%);
}
body::after{
content:"";
position:fixed; inset:0;
z-index:-1;
background:linear-gradient(180deg, rgba(244,246,251,.10), rgba(244,246,251,.25));
pointer-events:none;
}
[data-theme="dark"]::after{
background:linear-gradient(180deg, rgba(7,14,28,.30), rgba(7,14,28,.55));
}
/* ───────── TOPBAR ───────── */
.topbar{
position:sticky; top:0; z-index:30;
background:var(--grad-brand);
color:#eaf0fb;
box-shadow:var(--shadow-2);
}
.topbar__inner{
max-width:1180px; margin:0 auto;
padding:14px 22px;
display:flex; align-items:center; gap:16px; justify-content:space-between;
}
.topbar__progress{height:3px; background:rgba(255,255,255,.08); position:relative; overflow:hidden}
.topbar__progress span{
position:absolute; inset:0 auto 0 0; width:33%;
background:var(--grad-accent);
transition:width .55s cubic-bezier(.65,.05,.36,1);
}
body[data-step="2"] .topbar__progress span{width:66%}
body[data-step="3"] .topbar__progress span{width:100%}
.brand{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.brand__mark{width:40px; height:40px; flex:none; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.brand__text{display:flex; flex-direction:column; line-height:1.15}
.brand__text strong{font-weight:700; letter-spacing:.2px}
.brand__text em{font-style:normal; font-size:11.5px; color:#a8b6d4; letter-spacing:.4px; text-transform:uppercase}
.topbar__meta{display:flex; align-items:center; gap:10px}
.pill{
display:inline-flex; align-items:center; gap:8px;
padding:6px 12px; border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
font-size:12px; font-weight:600; letter-spacing:.3px;
}
.pill--ok{color:#bff5cf}
.pill svg{color:#bff5cf}
.lang{display:inline-flex; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:3px}
.lang button{
background:transparent; border:0; color:#cad6ee; font:600 12px/1 var(--font);
padding:6px 10px; border-radius:999px; cursor:pointer; letter-spacing:.5px;
}
.lang button.is-active{background:#fff; color:var(--navy-800)}
.theme-toggle{
width:36px; height:36px; border-radius:50%;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
color:#fff; cursor:pointer; display:grid; place-items:center;
transition:transform .2s ease;
}
.theme-toggle:hover{transform:rotate(-15deg)}
/* ───────── STEPPER ───────── */
.stepper{
list-style:none; margin:22px auto 0; padding:0 22px;
max-width:1180px; display:flex; gap:10px; flex-wrap:wrap;
}
.stepper__item{
display:flex; align-items:center; gap:10px;
padding:10px 14px; border-radius:999px;
background:var(--surface); border:1px solid var(--line);
color:var(--muted); font-weight:600; font-size:13px;
box-shadow:var(--shadow-1);
}
.stepper__item span{
width:22px; height:22px; border-radius:50%;
background:var(--surface-2); border:1px solid var(--line-strong);
color:var(--muted); display:grid; place-items:center; font-size:12px;
}
.stepper__item.is-current{
color:var(--text); border-color:transparent;
background:linear-gradient(var(--surface),var(--surface)) padding-box,
var(--grad-accent) border-box;
border:1px solid transparent;
}
.stepper__item.is-current span{background:var(--grad-accent); color:#fff; border-color:transparent}
.stepper__item.is-done{color:var(--text)}
.stepper__item.is-done span{background:var(--ok); color:#fff; border-color:transparent}
/* ───────── SHELL ───────── */
.shell{
flex:1;
max-width:1180px; width:100%;
margin:18px auto 40px; padding:0 22px;
display:flex; flex-direction:column; gap:22px;
}
/* ───────── CARD ───────── */
.card{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-xl);
box-shadow:var(--shadow-2);
overflow:hidden;
animation:rise .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.card__head{
display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
padding:24px 28px 8px;
}
.card__eyebrow{
margin:0; font-size:11.5px; font-weight:700; color:var(--accent);
letter-spacing:1.4px; text-transform:uppercase;
}
.card__title{margin:6px 0 4px; font-size:24px; font-weight:800; letter-spacing:-.2px}
.card__sub{margin:0; color:var(--muted)}
.card__sub code, .card__sub time{
font-family:var(--mono); font-size:13px; color:var(--text);
background:var(--surface-2); padding:2px 8px; border-radius:6px; border:1px solid var(--line);
}
.merchant-info{
text-align:right; color:var(--muted); font-size:12.5px; line-height:1.7;
}
.merchant-info b{color:var(--text); margin-right:4px}
/* Compact card head on phones - no wrapping mess */
@media (max-width:760px){
.card__head{
flex-direction:column; align-items:stretch;
gap:14px; padding:18px 18px 6px;
}
.card__title{
font-size:20px; line-height:1.2;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card__sub{font-size:13px; line-height:1.6}
.card__sub code, .card__sub time{font-size:12px; padding:1px 6px}
.merchant-info{
text-align:left; font-size:12px; line-height:1.5;
padding:10px 12px; border-radius:10px;
background:var(--surface-2); border:1px solid var(--line);
display:flex; flex-direction:column; gap:4px;
}
.merchant-info > div{
display:flex; gap:6px; align-items:baseline;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
min-width:0;
}
.merchant-info > div b{margin:0; flex:none}
.merchant-info .verified-seal{
margin-top:4px; align-self:flex-start; white-space:normal;
}
}
/* ───────── GRID & FIELDS ───────── */
.grid{
display:grid; gap:20px;
grid-template-columns:1fr 1fr;
padding:18px 28px 6px;
}
@media (max-width:760px){ .grid{grid-template-columns:1fr} }
.field label{
display:block; font-weight:600; font-size:13px; margin-bottom:8px; color:var(--text);
}
.field input{
width:100%; padding:14px 14px;
background:var(--surface-2); color:var(--text);
border:1.5px solid var(--line);
border-radius:var(--r-md);
font:500 15px/1.2 var(--font);
outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus{
border-color:var(--navy-700);
background:var(--surface);
box-shadow:0 0 0 4px rgba(19,50,92,.12);
}
.field__help{margin:6px 2px 0; color:var(--muted); font-size:12px}
.amount-input{
position:relative; display:flex; align-items:center;
background:var(--surface-2);
border:1.5px solid var(--line); border-radius:var(--r-md);
transition:border-color .15s, box-shadow .15s, background .15s;
}
.amount-input:focus-within{
border-color:var(--accent); background:var(--surface);
box-shadow:0 0 0 4px rgba(154,27,31,.12);
}
.amount-input__cur{
font:800 28px/1 var(--font); color:var(--accent);
padding:0 6px 0 16px;
}
.amount-input input{
flex:1; border:0; background:transparent;
font:800 28px/1 var(--font); color:var(--text);
padding:18px 6px; letter-spacing:-.5px;
}
.amount-input input::placeholder{
color:var(--muted-2); font-weight:700; opacity:.6; letter-spacing:-.5px;
}
.amount-input input:focus{box-shadow:none; background:transparent}
.amount-input__cents{
padding:0 16px; font:600 12px/1 var(--font); color:var(--muted);
letter-spacing:1.5px;
}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chips button{
font:600 13px/1 var(--font); color:var(--text);
background:var(--surface-2); border:1.5px solid var(--line);
border-radius:999px; padding:8px 14px; cursor:pointer;
transition:all .15s ease;
}
.chips button:hover{border-color:var(--navy-700); color:var(--navy-700)}
.chips button.is-active{
background:var(--navy-800); color:#fff; border-color:var(--navy-800);
}
/* ───────── METHODS ───────── */
.methods{
border:0; padding:18px 28px 6px; margin:0;
display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media (max-width:760px){ .methods{grid-template-columns:1fr} }
.methods legend{
font:700 13px/1 var(--font); color:var(--text);
margin-bottom:4px; padding:0;
}
.method{
position:relative; display:block; cursor:pointer;
background:var(--surface-2);
border:1.5px solid var(--line);
border-radius:var(--r-lg);
padding:16px 18px;
transition:transform .12s ease, border-color .15s, box-shadow .15s, background .15s;
}
.method:hover{transform:translateY(-1px); border-color:var(--line-strong)}
.method input{position:absolute; opacity:0; pointer-events:none}
.method.is-active{
border-color:transparent;
background:
linear-gradient(var(--surface),var(--surface)) padding-box,
var(--grad-accent) border-box;
box-shadow:0 8px 24px -10px rgba(154,27,31,.35);
}
.method__head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.method__title{display:flex; align-items:center; gap:10px; color:var(--text)}
.method__title svg{color:var(--accent)}
.method__title b{display:block; font-size:15px}
.method__title em{font-style:normal; font-size:11.5px; color:var(--muted); letter-spacing:.4px}
.method__meta{
list-style:none; padding:12px 0 0; margin:12px 0 0; border-top:1px dashed var(--line);
display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.method__meta li{display:flex; flex-direction:column; gap:2px}
.method__meta span{font-size:11px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase}
.method__meta b{font-size:13px; color:var(--text)}
.badge{
font:700 10.5px/1 var(--font); letter-spacing:.6px; text-transform:uppercase;
padding:5px 9px; border-radius:999px;
background:var(--surface); color:var(--muted); border:1px solid var(--line);
}
.badge--accent{background:var(--grad-accent); color:#fff; border-color:transparent}
/* ───────── CONSENT ───────── */
.consent{
display:flex; gap:12px; align-items:flex-start;
margin:18px 28px 0;
padding:14px 16px;
background:var(--surface-2);
border:1px dashed var(--line);
border-radius:var(--r-md);
font-size:13px; color:var(--muted);
}
.consent input{
appearance:none; -webkit-appearance:none;
width:20px; height:20px; flex:none;
border:1.5px solid var(--line-strong); border-radius:6px;
background:var(--surface); cursor:pointer;
display:grid; place-items:center; transition:.15s;
}
.consent input:checked{background:var(--grad-accent); border-color:transparent}
.consent input:checked::after{
content:""; width:11px; height:6px;
border-left:2px solid #fff; border-bottom:2px solid #fff;
transform:rotate(-45deg) translate(1px,-2px);
}
.consent a{color:var(--navy-700); text-decoration:underline; text-underline-offset:2px}
/* ───────── FOOTER OF CARD ───────── */
.card__foot{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:20px 28px 24px; margin-top:14px;
border-top:1px solid var(--line);
background:linear-gradient(180deg, transparent, var(--surface-2));
}
.card__foot--wrap{flex-wrap:wrap}
.totals{display:flex; gap:18px; align-items:baseline; flex-wrap:wrap}
.totals > div{display:flex; flex-direction:column; gap:2px; line-height:1.1}
.totals span{font-size:11.5px; color:var(--muted); letter-spacing:.6px; text-transform:uppercase}
.totals b{font-family:var(--mono); font-size:15px; color:var(--text)}
.totals__grand b{font-size:22px; color:var(--accent); font-weight:800; letter-spacing:-.2px}
/* ───────── BUTTONS ───────── */
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:var(--r-md);
font:700 14px/1 var(--font); letter-spacing:.2px;
border:0; cursor:pointer; transition:transform .12s ease, box-shadow .15s, background .15s, opacity .15s;
}
.btn:disabled{opacity:.55; cursor:not-allowed; filter:grayscale(.2)}
.btn:not(:disabled):active{transform:translateY(1px)}
.btn--primary{
background:var(--grad-accent); color:#fff;
box-shadow:0 10px 24px -10px rgba(154,27,31,.6);
}
.btn--primary:not(:disabled):hover{box-shadow:0 16px 32px -10px rgba(154,27,31,.7)}
.btn--ghost{
background:var(--surface); color:var(--text); border:1.5px solid var(--line);
}
.btn--ghost:hover{border-color:var(--line-strong); background:var(--surface-2)}
/* ───────── REVIEW (KV) ───────── */
.kv{display:grid; grid-template-columns:1fr 1fr; gap:0; margin:8px 28px 0; padding:0;
border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2)}
.kv > div{display:flex; gap:18px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface)}
.kv > div:nth-child(2n){border-left:1px solid var(--line)}
.kv > div:nth-last-child(-n+2){border-bottom:0}
.kv dt{margin:0; min-width:130px; color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.4px}
.kv dd{margin:0; font-weight:600; color:var(--text)}
@media (max-width:680px){ .kv{grid-template-columns:1fr} .kv>div{border-left:0!important} }
.lock{
width:42px; height:42px; border-radius:12px;
display:grid; place-items:center; flex:none;
background:var(--surface-2); color:var(--ok); border:1px solid var(--line);
}
/* ───────── DETAILS (Step 3) ───────── */
.details{
display:block;
padding:18px 28px 6px;
}
.details__main{max-width:none}
.rows{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.rows li{
display:flex; gap:18px; align-items:center; justify-content:space-between;
padding:14px 18px;
background:var(--surface);
border-bottom:1px solid var(--line);
}
.rows li:last-child{border-bottom:0}
.rows li:nth-child(odd){background:var(--surface-2)}
.rows li > span{color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; flex:1}
.rows__val{display:flex; align-items:center; gap:8px; max-width:60%; min-width:0}
.rows__val code{
font-family:var(--mono); font-size:14px; color:var(--text);
background:transparent; padding:0; word-break:break-all;
}
.rows__val .mono{font-weight:600; letter-spacing:.5px}
.copy{
width:30px; height:30px; flex:none;
border-radius:8px; border:1px solid var(--line);
background:var(--surface); cursor:pointer;
position:relative; transition:.15s;
}
.copy::before{
content:""; position:absolute; inset:0; margin:auto;
width:11px; height:13px; border:1.6px solid currentColor; border-radius:2px;
color:var(--muted); top:8px; left:9px;
}
.copy::after{
content:""; position:absolute; width:11px; height:13px;
border:1.6px solid currentColor; border-radius:2px;
color:var(--muted); top:5px; left:12px; background:var(--surface);
}
.copy:hover{border-color:var(--accent); color:var(--accent)}
.copy:hover::before,.copy:hover::after{color:var(--accent)}
.copy.is-done{background:var(--ok); border-color:var(--ok)}
.copy.is-done::before,.copy.is-done::after{display:none}
.copy.is-done::before{
content:""; display:block; position:absolute; inset:auto;
top:9px; left:9px; width:11px; height:6px;
border-left:2px solid #fff; border-bottom:2px solid #fff;
transform:rotate(-45deg);
}
.callout{
display:flex; gap:12px; align-items:flex-start;
margin-top:14px; padding:14px 16px;
background:linear-gradient(180deg, rgba(227,160,8,.08), transparent), var(--surface-2);
border:1px solid var(--line); border-left:3px solid var(--warn);
border-radius:var(--r-md);
font-size:13.5px; color:var(--muted);
}
.callout svg{color:var(--warn); flex:none; margin-top:2px}
.callout p{margin:0}
.callout b{color:var(--text)}
/* Receipt-style callout - strong accent for credit agent notice */
.callout--receipt{
background:
linear-gradient(135deg, rgba(154,27,31,.06), rgba(19,50,92,.06)),
var(--surface);
border:1px solid var(--line); border-left:4px solid var(--accent);
box-shadow:0 4px 16px -8px rgba(154,27,31,.25);
font-size:13.5px; color:var(--muted); line-height:1.6;
padding:16px 18px; gap:14px;
}
.callout--receipt svg{color:var(--accent); margin-top:0}
.callout--receipt b{display:block; margin-bottom:6px; color:var(--text); font-size:14px; font-weight:700}
.callout--receipt u{color:var(--accent); text-decoration-thickness:2px; text-underline-offset:2px}
/* ───────── QR ───────── */
.details__qr{
display:flex; flex-direction:column; align-items:center; gap:10px;
padding:18px;
background:
radial-gradient(circle at 50% 0%, rgba(19,50,92,.10), transparent 70%),
var(--surface-2);
border:1px solid var(--line); border-radius:var(--r-lg);
}
.qrwrap{position:relative; padding:14px; background:#fff; border-radius:14px; box-shadow:var(--shadow-1)}
.qrwrap #qr{display:block}
.qrwrap #qr img, .qrwrap #qr canvas{display:block; width:200px!important; height:200px!important; image-rendering:pixelated}
.qr-corners i{position:absolute; width:14px; height:14px; border:3px solid var(--accent)}
.qr-corners i:nth-child(1){top:-2px; left:-2px; border-right:0; border-bottom:0; border-radius:6px 0 0 0}
.qr-corners i:nth-child(2){top:-2px; right:-2px; border-left:0; border-bottom:0; border-radius:0 6px 0 0}
.qr-corners i:nth-child(3){bottom:-2px; left:-2px; border-right:0; border-top:0; border-radius:0 0 0 6px}
.qr-corners i:nth-child(4){bottom:-2px; right:-2px; border-left:0; border-top:0; border-radius:0 0 6px 0}
.qrwrap__cap{margin:6px 0 0; text-align:center; font-size:12px; color:var(--muted); letter-spacing:.4px}
.qrwrap__cap b{color:var(--text); font-family:var(--mono)}
.qrwrap__hint{margin:0; font-size:12.5px; color:var(--muted); text-align:center}
/* ───────── STATUS ───────── */
.status{
display:inline-flex; align-items:center; gap:8px;
padding:8px 12px; border-radius:999px;
font:600 12px/1 var(--font); letter-spacing:.3px;
border:1px solid var(--line); background:var(--surface-2); color:var(--muted);
}
.status .dot{width:8px; height:8px; border-radius:50%; background:var(--warn); box-shadow:0 0 0 4px rgba(227,160,8,.18); animation:pulse 1.6s infinite}
.status--paid{color:#0a6f3f; border-color:transparent; background:rgba(15,157,88,.12)}
.status--paid .dot{background:var(--ok); box-shadow:0 0 0 4px rgba(15,157,88,.18); animation:none}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.55; transform:scale(.9)}}
/* ───────── TRUST STRIP ───────── */
.trust{
display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
padding:14px;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
}
.trust > div{
display:flex; flex-direction:column; align-items:center; gap:2px;
padding:10px;
border-right:1px dashed var(--line);
}
.trust > div:last-child{border-right:0}
.trust b{font-size:13px; letter-spacing:.5px; color:var(--text)}
.trust span{font-size:11.5px; color:var(--muted); text-align:center}
@media (max-width:760px){ .trust{grid-template-columns:repeat(3,1fr)} .trust>div{border-right:0; border-bottom:1px dashed var(--line); padding-bottom:8px} }
/* ───────── FOOT (merged with seals - one seamless block) ───────── */
.foot{
max-width:1180px; width:100%; margin:-22px auto 0; padding:18px 22px;
display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
font-size:12px; color:var(--muted);
background:var(--surface);
border:1px solid var(--line); border-top:0;
border-radius:0 0 var(--r-lg) var(--r-lg);
box-shadow:var(--shadow-1);
}
.foot__links{display:flex; gap:14px}
.foot__links a{color:var(--muted); text-decoration:none}
.foot__links a:hover{color:var(--text)}
/* ───────── TOAST ───────── */
.toast{
position:fixed; bottom:24px; left:50%; transform:translate(-50%,30px);
background:var(--navy-900); color:#fff;
padding:12px 18px; border-radius:12px;
box-shadow:var(--shadow-3);
font-size:13.5px; font-weight:600;
opacity:0; pointer-events:none; transition:.25s ease;
z-index:60;
}
.toast.is-show{opacity:1; transform:translate(-50%,0)}
/* ───────── A11Y ───────── */
:focus-visible{outline:3px solid rgba(154,27,31,.45); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important; transition-duration:.001ms!important}
}
/* ───────── SECURITY RIBBON ───────── */
.pill--timer{color:#ffd9a8}
.pill--timer svg{color:#ffd9a8}
.secribbon{
background:var(--surface);
border-bottom:1px solid var(--line);
box-shadow:var(--shadow-1);
}
.secribbon__inner{
max-width:1180px; margin:0 auto; padding:10px 22px;
display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.secribbon__item{
display:flex; align-items:center; gap:10px;
font-size:12px; color:var(--muted);
padding:4px 0;
border-right:1px dashed var(--line); padding-right:14px;
}
.secribbon__item:last-child{border-right:0}
.secribbon__item svg{color:var(--navy-700); flex:none}
.secribbon__item b{display:block; color:var(--text); font-size:12.5px; line-height:1.2}
.secribbon__item em{font-style:normal; font-size:11px; color:var(--muted-2); letter-spacing:.2px}
.secribbon__item--ok svg{color:var(--ok)}
.secribbon__item--ok b{color:var(--ok)}
@media (max-width:760px){
.secribbon__inner{grid-template-columns:1fr; gap:6px; padding:8px 14px}
.secribbon__item{
border-right:0; border-bottom:1px dashed var(--line);
padding:6px 0; padding-right:0;
gap:8px; font-size:11.5px;
flex-wrap:nowrap; min-width:0;
}
.secribbon__item:last-child{border-bottom:0}
.secribbon__item > span{
display:flex; align-items:baseline; gap:8px;
flex:1; min-width:0; white-space:nowrap; overflow:hidden;
}
.secribbon__item b{font-size:12px; flex:none}
.secribbon__item em{
font-size:11px; flex:1; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
}
/* ───────── OFFICIAL MERCHANT SEAL ───────── */
.verified-seal{
display:inline-flex; align-items:center; gap:6px;
margin-top:6px;
padding:4px 10px; border-radius:999px;
background:rgba(15,157,88,.10);
color:var(--ok);
font-weight:700; font-size:11.5px; letter-spacing:.3px;
border:1px solid rgba(15,157,88,.25);
}
/* ───────── METHOD HINT ───────── */
.method__hint{
margin:10px 0 0; padding-top:10px;
border-top:1px dashed var(--line);
font-size:11.5px; color:var(--muted-2); letter-spacing:.2px;
font-family:var(--mono);
}
/* ───────── TOTALS NOTE ───────── */
.totals__grand{display:flex; flex-direction:column; gap:2px}
.totals__note{
font-style:normal; font-size:10.5px; color:var(--muted-2);
letter-spacing:.3px; text-transform:none; font-weight:500;
}
/* ───────── RISK / COMPLIANCE PANEL ───────── */
.riskpanel{
margin:18px 28px 0;
padding:16px 18px;
background:linear-gradient(180deg, rgba(15,157,88,.06), transparent), var(--surface-2);
border:1px solid var(--line);
border-left:3px solid var(--ok);
border-radius:var(--r-md);
}
.riskpanel__row{
display:grid; grid-template-columns:repeat(2,1fr); gap:12px 18px;
}
@media (min-width:760px){ .riskpanel__row{grid-template-columns:repeat(4,1fr)} }
.riskpanel__chk{display:flex; gap:10px; align-items:flex-start}
.riskpanel__chk b{display:block; font-size:12.5px; color:var(--text)}
.riskpanel__chk em{font-style:normal; font-size:11px; color:var(--muted)}
.check{
width:18px; height:18px; flex:none; border-radius:50%;
background:var(--ok); position:relative; box-shadow:0 0 0 4px rgba(15,157,88,.15);
}
.check::after{
content:""; position:absolute; left:5px; top:7px;
width:7px; height:4px;
border-left:2px solid #fff; border-bottom:2px solid #fff;
transform:rotate(-45deg);
}
.riskpanel__bar{
display:flex; align-items:center; gap:12px;
margin-top:14px; padding-top:14px;
border-top:1px dashed var(--line);
font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;
}
.meter{flex:1; height:6px; background:var(--line); border-radius:999px; overflow:hidden; position:relative}
.meter i{
display:block; height:100%;
background:linear-gradient(90deg,#0f9d58,#c9a85a 70%,#9A1B1F);
border-radius:999px; transition:width .8s ease;
}
.riskpanel__low{color:var(--ok); font-weight:800; font-size:12.5px; letter-spacing:.4px}
/* ───────── PARTNER BANKS ───────── */
.partners{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
padding:16px 18px;
box-shadow:var(--shadow-1);
}
.partners__title{
margin:0 0 12px; font-size:11.5px; font-weight:700;
color:var(--muted); letter-spacing:.6px; text-transform:uppercase;
}
.partners__row{display:flex; flex-wrap:wrap; gap:8px}
.bankchip{
display:inline-flex; align-items:center; gap:8px;
padding:6px 12px 6px 6px;
border-radius:999px;
background:var(--surface-2); border:1px solid var(--line);
font-size:12.5px; font-weight:600; color:var(--text);
}
.bankchip i{
width:18px; height:18px; border-radius:50%;
display:inline-block; flex:none;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}
/* ───────── EXTENDED FOOT ───────── */
.foot__legal{display:flex; flex-direction:column; gap:4px; line-height:1.5}
.foot__line1 b{color:var(--text)}
.foot__line2,.foot__line3{font-size:11.5px; color:var(--muted-2)}
.foot abbr{text-decoration:none; border-bottom:1px dotted var(--muted-2); cursor:help}
/* ───────── COOKIE BANNER ───────── */
.cookie{
position:fixed; left:20px; right:20px; bottom:20px;
max-width:760px; margin:0 auto;
display:flex; gap:14px; align-items:center;
padding:14px 16px;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-3);
z-index:55;
transform:translateY(120%); opacity:0;
transition:transform .35s ease, opacity .25s ease;
}
.cookie.is-show{transform:none; opacity:1}
.cookie__ico{
width:40px; height:40px; flex:none;
border-radius:12px; display:grid; place-items:center;
background:rgba(201,168,90,.15); color:var(--gold);
}
.cookie__txt{flex:1; min-width:0}
.cookie__txt b{display:block; font-size:13.5px; color:var(--text); margin-bottom:2px}
.cookie__txt p{margin:0; font-size:12px; color:var(--muted); line-height:1.5}
.btn--sm{padding:10px 16px; font-size:13px; flex:none}
@media (max-width:600px){ .cookie{flex-direction:column; align-items:stretch; text-align:left} }
/* ───────── LOADER OVERLAY ───────── */
.loader{
position:fixed; inset:0; z-index:80;
display:grid; place-items:center;
background:radial-gradient(circle at 50% 30%, rgba(11,31,58,.55), rgba(7,14,28,.85));
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
opacity:0; pointer-events:none;
transition:opacity .25s ease;
}
.loader.is-show{opacity:1; pointer-events:auto}
.loader__card{
width:min(380px, 92vw);
padding:28px 26px 22px;
background:linear-gradient(180deg,#0f2348,#0b1f3a);
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
box-shadow:0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
color:#eaf0fb;
text-align:center;
transform:translateY(10px) scale(.98);
transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.loader.is-show .loader__card{transform:none}
.loader__ring{
position:relative; width:64px; height:64px;
margin:0 auto 14px; display:grid; place-items:center;
}
.loader__ring svg{position:absolute; inset:0}
.loader__spin{transform-origin:32px 32px; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__lock{color:#fff; filter:drop-shadow(0 0 8px rgba(154,27,31,.8)); position:relative; z-index:1}
.loader__title{display:block; font-size:16px; font-weight:700; letter-spacing:.2px; margin-bottom:4px}
.loader__sub{margin:0 0 18px; font-size:12.5px; color:#a8b6d4}
.loader__steps{
list-style:none; padding:14px 0 0; margin:0;
text-align:left;
display:flex; flex-direction:column; gap:8px;
border-top:1px dashed rgba(255,255,255,.10);
}
.loader__steps li{
display:flex; align-items:center; gap:10px;
font-size:12.5px; color:#a8b6d4;
opacity:.45; transition:opacity .25s, color .25s;
}
.loader__steps li.is-active{opacity:1; color:#eaf0fb}
.loader__steps li.is-done{opacity:1; color:#bff5cf}
.loader__steps li > span{
width:14px; height:14px; flex:none; border-radius:50%;
background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.20);
position:relative;
}
.loader__steps li.is-active > span{
border-color:#c93237;
box-shadow:0 0 0 4px rgba(154,27,31,.22);
animation:pulse 1s infinite;
}
.loader__steps li.is-done > span{background:#0f9d58; border-color:#0f9d58; box-shadow:none; animation:none}
.loader__steps li.is-done > span::after{
content:""; position:absolute; left:3px; top:4px;
width:7px; height:4px;
border-left:2px solid #fff; border-bottom:2px solid #fff;
transform:rotate(-45deg);
}
.loader__steps em{font-style:normal; font-family:var(--mono); letter-spacing:.2px}
/* ───────── CENTRAL BANK LOGO ───────── */
.cb-logo{
width:44px; height:44px; flex:none;
display:grid; place-items:center;
background:#fff; border-radius:50%;
padding:2px;
box-shadow:0 4px 14px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.15);
}
.cb-logo svg{width:40px; height:40px; display:block}
/* ───────── COMPLIANCE SEALS ───────── */
.seals{
max-width:1180px; width:100%; margin:0 auto;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg) var(--r-lg) 0 0;
border-bottom:0;
padding:20px 22px 24px;
box-shadow:none;
}
.seals__title{
margin:0 0 18px;
font-size:11.5px; font-weight:700; letter-spacing:.6px;
text-transform:uppercase; color:var(--muted);
text-align:center;
}
.seals__row{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:14px;
}
@media (max-width:980px){ .seals__row{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){ .seals__row{grid-template-columns:repeat(3,1fr)} }
.seal{
display:flex; flex-direction:column; align-items:center; gap:18px;
color:var(--navy-700);
transition:transform .2s ease;
padding:14px 6px;
background:var(--surface);
border:1px solid var(--line);
border-radius:12px;
}
.seal:hover{transform:translateY(-2px) rotate(-2deg)}
.seal svg{
width:60px; height:60px;
filter:drop-shadow(0 4px 8px rgba(11,31,58,.15));
}
.seal span{
font-size:10.5px; font-weight:600;
text-align:center; color:var(--muted);
letter-spacing:.2px; line-height:1.3;
max-width:90px;
}
.seal--gold{color:#a8842c}
.seal--gold span{color:#a8842c}
/* ───────── ADMIN PANEL ───────── */
.admin-fab{
position:fixed; right:20px; bottom:20px;
width:48px; height:48px; border-radius:50%;
background:var(--navy-800); color:#fff;
border:0; cursor:pointer;
display:grid; place-items:center;
box-shadow:0 12px 30px -6px rgba(11,31,58,.5);
z-index:50; transition:transform .2s, background .15s;
}
.admin-fab:hover{background:var(--accent); transform:scale(1.08)}
.admin{position:fixed; inset:0; z-index:90; display:grid; place-items:center}
.admin[hidden]{display:none}
.admin__backdrop{
position:absolute; inset:0;
background:rgba(7,14,28,.72);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.admin__panel{
position:relative;
width:min(820px, 96vw);
max-height:92vh;
background:var(--surface); color:var(--text);
border-radius:18px;
box-shadow:var(--shadow-3);
display:flex; flex-direction:column;
overflow:hidden;
}
.admin__head{
display:flex; align-items:flex-start; justify-content:space-between;
gap:16px; padding:20px 24px;
background:linear-gradient(135deg,#0b1f3a,#13325c); color:#fff;
}
.admin__head h2{margin:0 0 4px; font-size:18px}
.admin__head p{margin:0; font-size:12.5px; color:#a8b6d4}
.admin__close{
width:32px; height:32px; border-radius:8px;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
color:#fff; font-size:22px; line-height:1; cursor:pointer;
}
.admin__close:hover{background:rgba(255,255,255,.2)}
.admin__body{
padding:18px 24px;
overflow:auto;
display:flex; flex-direction:column; gap:18px;
}
.admin__sec{
padding:14px 16px;
background:var(--surface-2);
border:1px solid var(--line);
border-radius:12px;
}
.admin__sec h3{
margin:0 0 10px;
font-size:13px; font-weight:700;
color:var(--accent); letter-spacing:.4px; text-transform:uppercase;
}
.admin__hint{margin:0 0 10px; font-size:12px; color:var(--muted)}
.admin__grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.admin__row{display:grid; grid-template-columns:1fr; gap:10px; max-width:280px}
@media (max-width:600px){ .admin__grid{grid-template-columns:1fr} }
.admin label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.admin input[type="text"], .admin input[type="number"]{
padding:10px 12px;
background:var(--surface); color:var(--text);
border:1.5px solid var(--line); border-radius:8px;
font:500 13.5px/1.2 var(--mono);
outline:none; transition:.15s;
}
.admin input:focus{border-color:var(--navy-700); box-shadow:0 0 0 3px rgba(19,50,92,.12)}
.admin__foot{
display:flex; justify-content:flex-end; gap:10px;
padding:14px 24px; border-top:1px solid var(--line);
background:var(--surface-2);
}
.switch{
display:flex; align-items:center; gap:10px;
font-size:13px; color:var(--text); cursor:pointer;
margin-bottom:8px; text-transform:none; letter-spacing:0;
}
.switch input{position:absolute; opacity:0; pointer-events:none}
.switch span{
width:38px; height:22px; border-radius:999px;
background:var(--line-strong); position:relative; flex:none;
transition:.2s;
}
.switch span::after{
content:""; position:absolute; left:2px; top:2px;
width:18px; height:18px; border-radius:50%;
background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
transition:.2s;
}
.switch input:checked + span{background:var(--ok)}
.switch input:checked + span::after{left:18px}
/* Hide cookie banner on mobile */
@media (max-width:760px){
.cookie{display:none !important}
/* Compact topbar on phones */
.topbar__inner{padding:10px 12px; gap:8px; flex-wrap:nowrap}
.topbar__meta{gap:6px; flex-wrap:nowrap; justify-content:flex-end; flex:none}
.brand{gap:8px; min-width:0; flex:1 1 auto; overflow:hidden}
.brand__mark, .cb-logo svg{width:32px!important; height:32px!important}
.brand__text{flex:1 1 auto; min-width:0; line-height:1.15; overflow:hidden}
.brand__text strong{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.brand__text em{font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
/* Sacrifice the TLS pill on phone - keep timer + lang + theme */
.pill--ok{display:none}
.pill--timer{padding:4px 8px; font-size:11px; gap:4px}
.pill--timer svg{width:12px; height:12px}
.lang{padding:2px}
.lang button{padding:4px 7px; font-size:10.5px}
.theme-toggle{width:30px; height:30px; flex:none}
.theme-toggle svg{width:14px; height:14px}
}
/* Very narrow phones - keep one line at any cost */
@media (max-width:420px){
.brand__text em{display:none}
.brand__text strong{font-size:13px}
.pill--timer{padding:4px 7px}
.pill--timer #sessionTimer{font-size:10.5px}
.lang button{padding:3px 6px}
}
/* ───────── RECEIPT NOTICE (after payment details) ───────── */
.receipt-notice{
display:flex; gap:14px; align-items:flex-start;
margin:18px 28px 0;
padding:18px 20px;
background:
linear-gradient(135deg, rgba(154,27,31,.06), rgba(19,50,92,.06)),
var(--surface);
border:1px solid var(--line);
border-left:4px solid var(--accent);
border-radius:var(--r-md);
box-shadow:0 4px 16px -8px rgba(154,27,31,.25);
}
.receipt-notice__ico{
width:42px; height:42px; flex:none;
border-radius:10px; display:grid; place-items:center;
background:var(--grad-accent); color:#fff;
box-shadow:0 6px 14px -6px rgba(154,27,31,.5);
}
.receipt-notice__txt{flex:1; min-width:0}
.receipt-notice__txt b{
display:block; font-size:14px; font-weight:700;
color:var(--text); margin-bottom:6px; letter-spacing:.1px;
}
.receipt-notice__txt p{
margin:0; font-size:13px; color:var(--muted); line-height:1.6;
}
.receipt-notice__txt u{color:var(--accent); text-decoration-thickness:2px; text-underline-offset:2px}
@media (max-width:600px){
.receipt-notice{margin:16px 16px 0; padding:14px 16px}
}
/* ──── Mobile: only show 3 essential seals (SEPA, GDPR, ISO 27001) ──── */
@media (max-width:560px){
.seals__row{grid-template-columns:repeat(3,1fr) !important; gap:10px}
.seal:not(.seal--essential){display:none !important}
.seal{padding:10px 4px; gap:10px}
.seal svg{width:48px; height:48px}
.seal span{
font-size:10px; max-width:100%;
overflow-wrap:break-word; word-break:break-word; hyphens:auto;
padding:0 2px;
}
}
/* ──── Partner-bank logo banners (replace bankchips) ──── */
.partners__row{
display:flex; flex-direction:row; flex-wrap:wrap;
align-items:center; justify-content:center;
gap:14px;
}
.partner-logo{
display:block;
height:160px; width:auto;
max-width:100%;
border-radius:10px;
background:#fff;
border:1px solid var(--line);
padding:10px 20px;
object-fit:contain;
}
@media (max-width:560px){
.partners__row{gap:8px}
.partner-logo{height:120px; padding:6px 12px}
}
/* ──── Attention pulse for primary CTAs ──── */
@keyframes ctaPulse{
0% { transform:scale(1); box-shadow:0 10px 24px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(220,38,38,.55); }
50% { transform:scale(1.06); box-shadow:0 18px 36px -10px rgba(0,0,0,.55), 0 0 0 14px rgba(220,38,38,0); }
100% { transform:scale(1); box-shadow:0 10px 24px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(220,38,38,0); }
}
.btn--primary{
padding:18px 30px !important;
font-size:16px !important;
border-radius:14px !important;
}
.btn--primary svg{ width:22px !important; height:22px !important }
.btn--primary:not(:disabled){
animation: ctaPulse 1.6s ease-in-out infinite;
transform-origin:center;
}
.btn--primary:not(:disabled):hover{
animation-play-state:paused;
transform:scale(1.07);
}
@media (prefers-reduced-motion: reduce){
.btn--primary:not(:disabled){ animation:none }
}
@media (max-width:560px){
.btn--primary{ padding:16px 24px !important; font-size:15px !important }
}
/* ──── Step 1 (merchant/order) - elegant accent border ──── */
.card.step[data-step="1"]{
position:relative;
border:2px solid transparent !important;
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
var(--grad-accent) border-box;
box-shadow:0 24px 48px -16px rgba(11,31,58,.28);
outline:1.5px dashed #0b3b7a;
outline-offset:10px;
}
[data-theme="dark"] .card.step[data-step="1"]{
box-shadow:0 24px 48px -16px rgba(0,0,0,.6);
}
@media (max-width:560px){
.card.step[data-step="1"]{ outline-offset:6px }
}
/* ──── FX ticker (replaces partners block) ──── */
.fxticker{
position:relative;
display:flex; align-items:stretch;
background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
border:1px solid var(--line);
border-radius:var(--r-lg);
overflow:hidden;
box-shadow:var(--shadow-1);
}
.fxticker__label{
flex:0 0 auto;
display:flex; align-items:center; gap:8px;
padding:12px 18px;
background:var(--grad-accent);
color:#fff;
font:800 12px/1 var(--font);
letter-spacing:1.2px; text-transform:uppercase;
position:relative;
z-index:2;
box-shadow:6px 0 14px -6px rgba(0,0,0,.25);
}
.fxticker__viewport{
flex:1 1 auto;
overflow:hidden;
position:relative;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.fxticker__track{
display:inline-flex; align-items:center;
gap:38px;
padding:12px 24px;
white-space:nowrap;
animation: fxScroll 90s linear infinite;
will-change:transform;
}
.fxticker:hover .fxticker__track{ animation-play-state:paused }
@keyframes fxScroll{
from{ transform:translateX(0) }
to { transform:translateX(-50%) }
}
.fx{
display:inline-flex; align-items:baseline; gap:8px;
font:600 13.5px/1 var(--font);
color:var(--text);
}
.fx b{
font-family:var(--mono);
font-weight:700;
color:var(--muted);
letter-spacing:.4px;
font-size:12px;
}
.fx i{
font-style:normal;
font-family:var(--mono);
font-weight:700;
color:var(--text);
font-size:14px;
}
.fx u{
text-decoration:none;
font-family:var(--mono);
font-size:11.5px;
font-weight:700;
padding:2px 6px;
border-radius:4px;
}
.fx u.up{ color:#0d8a4a; background:rgba(13,138,74,.10) }
.fx u.dn{ color:#c92a2a; background:rgba(201,42,42,.10) }
[data-theme="dark"] .fx u.up{ background:rgba(46,204,113,.18); color:#3ddc84 }
[data-theme="dark"] .fx u.dn{ background:rgba(255,99,99,.18); color:#ff7676 }
@media (max-width:560px){
.fxticker__label{ padding:10px 12px; font-size:10.5px; gap:6px }
.fxticker__label svg{ width:12px; height:12px }
.fxticker__track{ gap:26px; padding:10px 18px; animation-duration:60s }
.fx{ font-size:12.5px; gap:6px }
.fx i{ font-size:13px }
}
/* ──── Seals - embossed wax/medal style ──── */
.seal{
position:relative;
isolation:isolate;
background:
radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 55%),
linear-gradient(160deg, #f7f9ff 0%, #e9eef9 50%, #d6dfee 100%) !important;
border:1px solid #c1cce0 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -1px 0 rgba(11,31,58,.12),
0 6px 14px -8px rgba(11,31,58,.35) !important;
padding:18px 8px 14px !important;
border-radius:14px !important;
}
.seal::before{
content:"";
position:absolute; inset:0;
border-radius:inherit;
background:
radial-gradient(circle at 50% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 40%);
pointer-events:none;
z-index:0;
}
.seal::after{
content:"";
position:absolute; left:50%; bottom:6px;
width:36px; height:6px;
transform:translateX(-50%);
background:linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
opacity:.55;
border-radius:6px;
pointer-events:none;
z-index:0;
}
.seal > *{ position:relative; z-index:1 }
.seal svg{
width:64px !important; height:64px !important;
border-radius:50%;
padding:6px;
background:
radial-gradient(circle at 35% 30%, #ffffff 0%, #f3f6ff 55%, #d8e0f0 100%);
border:2px double var(--accent);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.85),
inset 0 -3px 6px rgba(11,31,58,.10),
0 4px 10px rgba(11,31,58,.20),
0 0 0 1px rgba(255,255,255,.6);
color:var(--accent);
filter:none !important;
transition:transform .25s ease;
}
.seal:hover{ transform:translateY(-3px) !important }
.seal:hover svg{ transform:rotate(-6deg) scale(1.05) }
.seal span{
font-weight:700 !important;
color:var(--navy-700) !important;
font-size:10.5px !important;
letter-spacing:.4px !important;
}
/* Gold variant: warmer cream surface, gold ring */
.seal--gold{
background:
radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 55%),
linear-gradient(160deg, #fff8e6 0%, #fbeec4 50%, #ecd58a 100%) !important;
border:1px solid #d8b766 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(120,80,15,.18),
0 6px 14px -8px rgba(120,80,15,.45) !important;
}
.seal--gold svg{
border-color:#b8861f !important;
color:#a8842c !important;
background:
radial-gradient(circle at 35% 30%, #ffffff 0%, #fff5d4 55%, #f0d68a 100%) !important;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.9),
inset 0 -3px 6px rgba(120,80,15,.18),
0 4px 10px rgba(120,80,15,.25),
0 0 0 1px rgba(255,255,255,.7) !important;
}
.seal--gold::after{
background:linear-gradient(90deg, transparent 0%, #b8861f 50%, transparent 100%) !important;
}
.seal--gold span{ color:#7a5a14 !important }
[data-theme="dark"] .seal{
background:
radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
linear-gradient(160deg, #1a2540 0%, #131c33 50%, #0c1426 100%) !important;
border-color:#243456 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -1px 0 rgba(0,0,0,.4),
0 6px 14px -8px rgba(0,0,0,.7) !important;
}
[data-theme="dark"] .seal svg{
background:radial-gradient(circle at 35% 30%, #2b3858 0%, #1c2640 55%, #131b30 100%);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.08),
inset 0 -3px 6px rgba(0,0,0,.5),
0 4px 10px rgba(0,0,0,.5);
}
[data-theme="dark"] .seal span{ color:#cfd8ee !important }
@media (max-width:560px){
.seal{ padding:12px 4px 10px !important }
.seal svg{ width:54px !important; height:54px !important; padding:5px }
.seal::after{ width:28px; height:5px; bottom:4px }
}
/* ──── Consent checkbox attention pulse (stops on check) ──── */
@keyframes consentPulse{
0% { box-shadow:0 0 0 0 rgba(220,38,38,.55), inset 0 0 0 0 rgba(220,38,38,0); transform:scale(1) }
50% { box-shadow:0 0 0 10px rgba(220,38,38,0), inset 0 0 0 0 rgba(220,38,38,0); transform:scale(1.18) }
100% { box-shadow:0 0 0 0 rgba(220,38,38,0), inset 0 0 0 0 rgba(220,38,38,0); transform:scale(1) }
}
.consent input:not(:checked){
animation: consentPulse 1.4s ease-in-out infinite;
border-color: var(--accent) !important;
border-width:2px !important;
position:relative;
z-index:1;
}
.consent input:checked{
animation:none !important;
}
.consent:has(input:not(:checked)){
border-color: var(--accent) !important;
border-style: dashed !important;
}
@media (prefers-reduced-motion: reduce){
.consent input:not(:checked){ animation:none }
}
/* =====================================================================
v2 BANK REDESIGN OVERRIDES — modern EU bank look (Stripe / Wise feel)
- Primary accent: deep banking navy (NOT red)
- Selected state: green border + tint + checkmark
- Amount: hero, monumental
- Reduced visual noise, more whitespace
===================================================================== */
:root{
--brand:#0b3b7a; /* primary banking navy */
--brand-2:#1657ad;
--brand-ink:#0a2950;
--success:#0f9d58;
--success-2:#0c8048;
--success-bg:#ecfdf3;
--success-border:#a6e3c1;
/* repaint legacy --accent-driven UI in navy */
--accent:#0b3b7a;
--accent-2:#1657ad;
--grad-accent:linear-gradient(135deg,#0a2950 0%,#0b3b7a 50%,#1657ad 100%);
}
[data-theme="dark"]{
--success-bg:rgba(15,157,88,.10);
--success-border:rgba(15,157,88,.45);
}
/* shell: больше воздуха */
.shell{ gap:28px; margin-top:24px; margin-bottom:56px; }
.card{ border-radius:20px; box-shadow:0 1px 2px rgba(11,31,58,.05), 0 12px 36px -16px rgba(11,31,58,.18); border-color:#e5eaf3; }
.card__head{ padding:28px 32px 4px; }
.card__title{ font-size:24px; letter-spacing:-.2px; }
.card__eyebrow{ color:var(--muted); letter-spacing:1.2px; }
.grid{ padding:18px 32px 0; gap:24px; }
.methods{ padding:8px 32px 0; }
.card__foot{ padding:24px 32px 32px; }
/* === SECURITY DETAILS (свернуто) === */
.secdetails{
max-width:1180px; margin:14px auto 0; padding:0 22px;
}
.secdetails > summary{
list-style:none; cursor:pointer;
display:flex; align-items:center; gap:12px;
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
padding:10px 16px;
font-size:13px; color:var(--muted);
box-shadow:var(--shadow-1);
transition:border-color .2s;
}
.secdetails > summary::-webkit-details-marker{ display:none; }
.secdetails > summary:hover{ border-color:var(--brand); }
.secdetails > summary svg{ color:var(--success); }
.secdetails > summary b{ color:var(--text); font-weight:700; }
.secdetails > summary em{ font-style:normal; color:var(--muted-2); font-size:12px; }
.secdetails__chev{ margin-left:auto; transition:transform .2s; color:var(--muted-2); }
.secdetails[open] .secdetails__chev{ transform:rotate(180deg); }
.secdetails__grid{
margin-top:10px; padding:14px 18px;
background:var(--surface); border:1px solid var(--line); border-radius:14px;
display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 24px;
font-size:12.5px;
}
.secdetails__grid > div{ display:flex; flex-direction:column; gap:2px; }
.secdetails__grid span{ color:var(--muted-2); font-weight:600; text-transform:uppercase; font-size:10.5px; letter-spacing:.6px; }
.secdetails__grid em{ font-style:normal; color:var(--text); font-size:12.5px; }
/* === AMOUNT — hero === */
.field--amount{ grid-column:1 / -1; }
.field--amount label{ font-size:12.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); font-weight:700; }
.amount-input{
margin-top:8px;
background:linear-gradient(180deg,#fafcff 0%,#f1f5fc 100%);
border:1.5px solid var(--line);
border-radius:18px;
padding:22px 26px;
display:flex; align-items:baseline; gap:14px;
position:relative; overflow:hidden;
transition:border-color .2s, box-shadow .2s;
}
.amount-input::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
background:var(--brand); border-radius:18px 0 0 18px;
}
.amount-input:focus-within{
border-color:var(--brand);
box-shadow:0 0 0 4px rgba(11,59,122,.10);
}
.amount-input__cur{
font-size:42px; font-weight:700; color:var(--brand-ink); line-height:1;
}
.amount-input input{
flex:1; border:0; background:transparent; outline:none;
font:800 56px/1 var(--font);
letter-spacing:-1.5px; color:var(--brand-ink);
font-variant-numeric:tabular-nums;
min-width:0;
}
.amount-input__cents{
font-size:13px; font-weight:700; color:var(--muted);
letter-spacing:1px; padding:6px 12px;
background:rgba(11,59,122,.08); border-radius:8px;
align-self:center;
}
[data-theme="dark"] .amount-input{ background:linear-gradient(180deg,#0a1428,#0d1830); }
[data-theme="dark"] .amount-input__cur,
[data-theme="dark"] .amount-input input{ color:#eaf0fb; }
/* === METHODS — selected = green === */
.methods legend{ font-size:13px; color:var(--muted); letter-spacing:.4px; margin-bottom:12px; padding:0 4px; }
.method{
border:1.5px solid var(--line) !important;
border-radius:16px !important;
padding:18px 20px !important;
background:var(--surface) !important;
transition:border-color .2s, background .2s, box-shadow .2s;
position:relative;
}
.method:hover{ border-color:#c9d3e6 !important; }
.method.is-active{
border-color:var(--success) !important;
background:var(--success-bg) !important;
box-shadow:0 0 0 3px rgba(15,157,88,.12);
}
.method.is-active::after{
content:""; position:absolute; top:14px; right:14px;
width:24px; height:24px; border-radius:50%;
background:var(--success);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:16px;
box-shadow:0 4px 10px -2px rgba(15,157,88,.45);
}
.method.is-active .badge--accent{
background:var(--success) !important;
color:#fff !important; border-color:transparent !important;
}
.method__title svg{ color:var(--brand); }
.method.is-active .method__title svg{ color:var(--success); }
.method__hint{ display:none !important; } /* убираем технический шум под методом */
.method__meta li b{ color:var(--text); }
/* === TRUST ROW (над кнопкой) === */
.trust-row{
list-style:none; margin:8px 32px 0; padding:14px 0 0;
display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
border-top:1px dashed var(--line);
}
.trust-row li{
display:flex; align-items:center; gap:10px;
font-size:12.5px; color:var(--muted);
}
.trust-row svg{ color:var(--success); flex:none; }
.trust-row b{ display:block; color:var(--text); font-weight:700; font-size:13px; }
.trust-row em{ font-style:normal; font-size:11.5px; color:var(--muted-2); }
/* === TOTALS — сумма доминирует === */
.totals{ gap:8px; }
.totals > div:not(.totals__grand){ font-size:13px; color:var(--muted); }
.totals__grand{
margin-top:8px; padding-top:14px; border-top:1px solid var(--line);
display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.totals__grand span{ color:var(--muted); font-size:13px; font-weight:600; }
.totals__grand b{
font-size:30px; font-weight:800; color:var(--brand-ink);
letter-spacing:-.5px; font-variant-numeric:tabular-nums;
}
.totals__note{ display:none !important; } /* убрали "Komisija €0,00 · Regula (ES) 2021/1230 (CBPR+)" */
/* === PAY BUTTON — банковский синий + зелёный hover === */
.btn--primary{
background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%) !important;
color:#fff !important;
border:0 !important;
padding:16px 28px !important;
font-size:15.5px !important; font-weight:700 !important;
border-radius:14px !important;
box-shadow:0 8px 20px -6px rgba(11,59,122,.45) !important;
}
.btn--primary:not(:disabled):hover{
background:linear-gradient(135deg,var(--success) 0%,var(--success-2) 100%) !important;
box-shadow:0 10px 24px -6px rgba(15,157,88,.5) !important;
}
.btn--primary:disabled{ opacity:.55; }
/* === STEPPER — синие пилюли === */
.stepper__item.is-current{ background:var(--surface) !important; }
.stepper__item.is-current span{ background:var(--brand) !important; }
/* === BADGES без красного === */
.badge--accent{ background:rgba(11,59,122,.10); color:var(--brand); border-color:transparent; }
/* === CARD EYEBROW (Tirgotājs) — приглушаем === */
.card__eyebrow{ color:var(--muted) !important; }
/* === SEALS — менее «парадные», приглушены === */
.seals--slim{
margin-top:8px; padding:18px 22px;
background:transparent; border:0; box-shadow:none;
}
.seals--slim .seals__row{
display:flex; flex-wrap:wrap; gap:18px 28px;
justify-content:center; opacity:.78;
}
.seals--slim .seal{
width:auto; padding:0;
display:flex; flex-direction:row; align-items:center; gap:10px;
background:transparent; box-shadow:none; border:0;
}
.seals--slim .seal svg{ width:38px; height:38px; flex:none; color:var(--muted); }
.seals--slim .seal span{ font-size:11.5px; color:var(--muted); font-weight:600; }
.seals__more{ max-width:1180px; margin:8px auto 0; padding:0 22px; text-align:center; }
.seals__more > summary{
list-style:none; cursor:pointer;
display:inline-block; padding:6px 14px;
font-size:12px; color:var(--muted); border:1px dashed var(--line); border-radius:999px;
}
.seals__more > summary::-webkit-details-marker{ display:none; }
.seals__more > summary:hover{ color:var(--brand); border-color:var(--brand); }
.seals__row--extra{
margin-top:14px; opacity:.55;
}
/* === Topbar — без красных пилюль, более «банковски» === */
.pill--timer{ background:rgba(255,255,255,.10) !important; color:#cad6ee; }
/* === Verified seal — зелёный (а не красный) === */
.verified-seal{
background:var(--success-bg) !important;
color:var(--success-2) !important;
border-color:var(--success-border) !important;
}
/* === CONSENT — синяя обводка вместо красной (не путать с ошибкой) === */
.consent input:not(:checked){
border-color:var(--brand) !important;
animation:consentPulseBlue 1.6s ease-in-out infinite !important;
}
.consent:has(input:not(:checked)){
border-color:var(--brand) !important;
}
@keyframes consentPulseBlue{
0% { box-shadow:0 0 0 0 rgba(11,59,122,.55); transform:scale(1) }
50% { box-shadow:0 0 0 10px rgba(11,59,122,0); transform:scale(1.15) }
100% { box-shadow:0 0 0 0 rgba(11,59,122,0); transform:scale(1) }
}
/* === COA-bg окончательно скрываем === */
.coa-bg{ display:none !important; }
/* === Mobile === */
@media (max-width:640px){
.amount-input{ padding:18px 18px 18px 22px; }
.amount-input__cur{ font-size:30px; }
.amount-input input{ font-size:40px; }
.totals__grand b{ font-size:24px; }
.trust-row{ grid-template-columns:1fr; gap:10px; }
.card__head, .grid, .methods, .card__foot{ padding-left:20px; padding-right:20px; }
.seals--slim .seals__row{ gap:14px 20px; }
.seals--slim .seal svg{ width:32px; height:32px; }
}
/* === FOOTER — закруглить со всех сторон и центрировать === */
.foot{
border-radius: var(--r-lg) !important;
border-top: 1px solid var(--line) !important;
margin-top: 8px !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 10px !important;
}
.foot__legal,
.foot__line1,
.foot__line2,
.foot__line3{
text-align: center !important;
width: 100%;
}
.foot__links{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
/* === TOTALS v2 — убираем НДС, чиним вёрстку строк === */
.totals > div:nth-child(1), /* Starpsumma */
.totals > div:nth-child(2){ /* PVN */
display: none !important;
}
.totals{
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
align-items: flex-start;
flex: 1;
}
.totals__grand{
width: 100%;
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
.totals__grand span{
font-size: 11.5px !important;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted) !important;
font-weight: 700 !important;
}
.totals__grand b{
font-size: 32px !important;
}
/* === STEP 3 FOOTER — mobile: синяя сверху по центру, белые снизу в одну строку === */
@media (max-width: 640px){
.card__foot--wrap{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-items: stretch !important;
}
.card__foot--wrap > #btnSimulate{
order: 1;
width: 100%;
justify-content: center;
}
.card__foot--wrap > #btnNew,
.card__foot--wrap > #btnReceipt{
order: 2;
flex: 1 1 0;
min-width: 0;
justify-content: center;
padding-left: 8px !important;
padding-right: 8px !important;
}
.card__foot--wrap::after{
content: "";
order: 2;
flex-basis: 100%;
height: 0;
}
/* Помещаем две белые кнопки в одну строку через flex-wrap */
.card__foot--wrap{
flex-wrap: wrap !important;
flex-direction: row !important;
}
.card__foot--wrap > #btnSimulate{
flex: 1 1 100%;
}
}
/* === SEALS as images === */
.seals--img .seals__row{
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 18px 36px !important;
opacity: 1 !important;
}
.seals--img .seal{
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 14px;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
.seals--img .seal img{
width: 86px; height: 86px;
object-fit: contain;
filter: drop-shadow(0 6px 14px rgba(11,31,58,.18));
transition: transform .25s ease;
}
.seals--img .seal:hover img{ transform: scale(1.05); }
.seals--img .seal--center img{
width: 110px; height: 110px;
filter: drop-shadow(0 10px 22px rgba(11,59,122,.28));
}
.seals--img .seal span{
font-size: 13px !important;
font-weight: 700 !important;
color: var(--text) !important;
max-width: 130px;
line-height: 1.25;
}
.seals--img .seal--center span{
font-size: 14px !important;
color: var(--brand) !important;
}
@media (max-width: 640px){
.seals--img .seals__row{ gap: 14px 18px !important; }
.seals--img .seal img{ width: 64px; height: 64px; }
.seals--img .seal--center img{ width: 80px; height: 80px; }
.seals--img .seal span{ font-size: 11.5px !important; max-width: 90px; }
}
/* === SEALS — без подписей, крупнее === */
.seals--img .seal span{ display: none !important; }
.seals--img .seals__row{ gap: 28px 56px !important; }
.seals--img .seal img{ width: 140px !important; height: 140px !important; }
.seals--img .seal--center img{ width: 180px !important; height: 180px !important; }
@media (max-width: 640px){
.seals--img .seals__row{ gap: 18px 24px !important; }
.seals--img .seal img{ width: 92px !important; height: 92px !important; }
.seals--img .seal--center img{ width: 118px !important; height: 118px !important; }
}
/* === METHOD click fix: убедиться что радио и оверлеи не блокируют клики === */
.method.is-active::after{ pointer-events:none !important; }
.method::before{ pointer-events:none !important; }
.method *{ pointer-events: auto; }
.method input[type="radio"]{ pointer-events:none !important; }
/* === IBAN long-value wrap fix === */
.rows__val code{ word-break: break-all; white-space: normal !important; max-width: 100%; text-align: right; }
.rows li .rows__val{ flex-wrap: wrap; justify-content: flex-end; }
/* ---- FINAL CONFIRMATION MODAL v1 ---- */
.fmodal-backdrop{position:fixed;inset:0;background:rgba(8,18,40,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
.fmodal-backdrop.is-open{display:flex;animation:fmodalFade .18s ease-out}
.fmodal{background:#fff;border-radius:16px;max-width:480px;width:100%;box-shadow:0 24px 64px rgba(8,18,40,.35);padding:28px 28px 22px;position:relative;animation:fmodalPop .22s cubic-bezier(.2,.9,.3,1.2)}
.fmodal__icon{width:56px;height:56px;border-radius:50%;background:#e7f6ee;color:#0f9d58;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:28px;line-height:1;font-weight:700}
.fmodal__icon svg{width:30px;height:30px;stroke:#0f9d58;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fmodal__title{margin:0 0 10px;text-align:center;font-size:20px;font-weight:700;color:#0b3b7a;line-height:1.25}
.fmodal__body{margin:0 0 22px;text-align:center;font-size:15px;line-height:1.55;color:#3a4a63}
.fmodal__btn{display:block;width:100%;padding:13px 18px;border-radius:10px;border:0;background:#0f9d58;color:#fff;font-weight:600;font-size:15px;cursor:pointer;transition:background .15s}
.fmodal__btn:hover{background:#0c8a4d}
.fmodal__close{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:22px;color:#9aa6b8;cursor:pointer;line-height:1;padding:4px 8px;border-radius:6px}
.fmodal__close:hover{color:#0b3b7a;background:#f1f4f9}
@keyframes fmodalFade{from{opacity:0}to{opacity:1}}
@keyframes fmodalPop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:480px){.fmodal{padding:22px 20px 18px}.fmodal__title{font-size:18px}.fmodal__body{font-size:14px}}
/* ---- FINAL MODAL icon override v2 ---- */
.fmodal__icon{width:88px;height:88px;background:transparent;border-radius:0;margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.fmodal__icon img{width:88px;height:88px;display:block}
/* === MOBILE: prevent active-method checkmark overlapping the badge === */
@media (max-width: 720px){
.method{ position: relative; }
/* if a badge exists, hide the absolute checkmark and let the badge show its own check */
.method.is-active:has(.badge--accent)::after{ display:none !important; }
/* otherwise keep the checkmark but smaller and tucked away */
.method.is-active::after{
width:20px; height:20px; top:10px; right:10px; background-size:13px;
}
.method .badge--accent{
position: relative; padding-right: 26px;
}
/* embed a tiny check inside the badge when method is active */
.method.is-active .badge--accent::after{
content:"";
position:absolute; top:50%; right:6px; transform:translateY(-50%);
width:14px; height:14px; border-radius:50%;
background:#fff;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:10px;
}
}
/* === FIX: green check overlaps the recommended badge (all viewports) === */
.method.is-active::after{ display:none !important; }
.method .badge--accent{
position: relative;
padding-right: 28px !important;
}
.method.is-active .badge--accent{
background: var(--success) !important;
color: #fff !important;
border-color: transparent !important;
}
.method.is-active .badge--accent::after{
content:"";
position:absolute; top:50%; right:6px; transform:translateY(-50%);
width:16px; height:16px; border-radius:50%;
background:#fff;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:11px;
}
/* For methods WITHOUT a badge (e.g. SCT standard) keep a subtle outside checkmark */
.method.is-active:not(:has(.badge--accent))::after{
display:block !important;
content:""; position:absolute; top:14px; right:14px;
width:22px; height:22px; border-radius:50%;
background:var(--success);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:14px;
pointer-events:none;
}
/* === FIX2: ensure checkmark shows on methods WITHOUT badge === */
.method.is-active:not(:has(.badge--accent))::after{
display:block !important;
content:"" !important;
position:absolute !important;
top:14px !important; right:14px !important;
width:22px !important; height:22px !important;
border-radius:50% !important;
background:#0f9d58 !important;
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:14px !important;
pointer-events:none !important;
}
/* === FIX3: embed checkmark into ANY .badge inside an active method, hide outside check === */
.method.is-active::after{ display:none !important; }
.method .badge{
position: relative;
padding-right: 28px !important;
}
.method.is-active .badge{
background: var(--success) !important;
color: #fff !important;
border-color: transparent !important;
}
.method.is-active .badge::after{
content:"";
position:absolute; top:50%; right:6px; transform:translateY(-50%);
width:16px; height:16px; border-radius:50%;
background:#fff;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:11px;
pointer-events:none;
}
/* === FIX4: kill outside checkmark for good (override FIX2 !important) === */
.method.is-active::after,
.method.is-active:not(:has(.badge--accent))::after,
.method.is-active:has(.badge)::after {
display:none !important;
content:none !important;
background:none !important;
}
/* === WIDE TRUST BADGES (GDPR / ISO27001 / SEPA) — single-row responsive === */
.seals--img .seal{
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
flex:1 1 0 !important;
min-width:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.seals--img .seal::before,
.seals--img .seal::after{ display:none !important }
.seals--img .seal > span{ display:none !important }
.seals--img .seal img{
width:100% !important;
height:auto !important;
max-width:100% !important;
max-height:none !important;
object-fit:contain !important;
display:block !important;
}
.seals__row{
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:center !important;
gap:clamp(8px, 2vw, 24px) !important;
width:100% !important;
}
/* === HIDE security ribbon + payment purpose field === */
.secdetails{ display:none !important; }
.field:has(> #desc){ display:none !important; }
/* === HIDE "EUR" pill, add spacing under amount === */
.amount-input__cents{ display:none !important; }
.field--amount{ margin-bottom: 28px !important; }
.methods{ margin-top: 20px !important; }
.methods > legend{ margin-bottom: 14px !important; padding-top: 6px !important; }
/* === FIX-PACK 2026-06-01: rows / copy / stepper / brand / footer / spacing === */
/* details: ровные строки, IBAN не уползает, копировать всегда справа */
.rows li{
display:grid !important;
grid-template-columns: minmax(140px, 1fr) minmax(0, 2.4fr) auto !important;
align-items:center !important;
gap:14px !important;
padding:14px 18px !important;
}
.rows li > span:first-child{
flex:none !important;
align-self:center !important;
}
.rows__val{
display:flex !important;
align-items:center !important;
gap:10px !important;
max-width:none !important;
min-width:0 !important;
flex-wrap:nowrap !important;
}
.rows__val code{
flex:1 1 auto !important;
min-width:0 !important;
word-break:break-all !important;
overflow-wrap:anywhere !important;
}
.rows li .copy{
margin-left:auto !important;
flex:none !important;
}
/* кнопка copy: чистая SVG-иконка вместо двойных ::before/::after */
.copy{
width:34px !important;
height:34px !important;
flex:none !important;
border-radius:8px !important;
border:1px solid var(--line) !important;
background:var(--surface) center / 16px 16px no-repeat !important;
background-image:url("data:image/svg+xml;utf8,") !important;
cursor:pointer !important;
transition:.15s !important;
}
.copy::before, .copy::after{ content:none !important; display:none !important; }
.copy:hover{ border-color:var(--accent) !important; }
.copy.is-done{
background:#0f9d58 url("data:image/svg+xml;utf8,") center / 16px 16px no-repeat !important;
border-color:#0f9d58 !important;
}
/* мобильная адаптация: метка над значением, кнопка остаётся справа */
@media (max-width:560px){
.rows li{
grid-template-columns: 1fr auto !important;
grid-template-areas:
"lab btn"
"val val" !important;
row-gap:6px !important;
}
.rows li > span:first-child{ grid-area:lab !important }
.rows__val{ grid-area:val !important }
/* НО: если внутри rows__val есть .copy — выносим её в зону btn */
.rows li .copy{ grid-area:btn !important }
}
/* stepper: ровный ряд */
.stepper{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:18px !important;
padding:14px 0 !important;
margin:0 0 14px !important;
list-style:none !important;
flex-wrap:nowrap !important;
}
.stepper__item{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
white-space:nowrap !important;
}
.stepper__item span{
width:26px !important; height:26px !important;
display:inline-grid !important; place-items:center !important;
border-radius:50% !important;
font-size:13px !important; line-height:1 !important;
}
.stepper__item b{ font-size:14px !important; font-weight:600 !important }
/* brand: фиксированный размер логотипа во всех странах */
.brand{ align-items:center !important; gap:12px !important }
.cb-logo, .brand__mark{
width:44px !important; height:44px !important;
flex:none !important;
}
.cb-logo svg, .cb-logo img, .brand__mark{
width:40px !important; height:40px !important;
display:block !important;
}
.cb-logo--img img{
width:40px !important; height:40px !important;
border-radius:50% !important;
object-fit:cover !important;
}
.brand__text strong{ font-size:14.5px !important; line-height:1.2 !important }
.brand__text em{ font-size:11px !important; line-height:1.2 !important }
/* footer: компактнее */
.foot{
padding:14px 18px !important;
font-size:12px !important;
gap:10px !important;
}
.foot__legal{ gap:3px !important; line-height:1.45 !important }
.foot__line1{ font-size:12.5px !important }
.foot__line2, .foot__line3{ font-size:11px !important }
.foot__links{ gap:10px !important; flex-wrap:wrap !important }
.foot__links a{ font-size:11.5px !important }
/* единые отступы между секциями */
.shell > section.card{ margin-bottom:18px !important }
.shell > section.seals{ margin-bottom:18px !important }
/* === Latvia: remove white circle around coat of arms === */
.cb-logo--img{
background:transparent !important;
box-shadow:none !important;
padding:0 !important;
border-radius:0 !important;
overflow:visible !important;
}
.cb-logo--img img{
border-radius:0 !important;
background:transparent !important;
object-fit:contain !important;
}
/* === COMBO TRUST BADGES (single image) === */
.seals__row--combo{
display:flex !important;
justify-content:center !important;
align-items:center !important;
width:100% !important;
}
.seals__combo{
width:100% !important;
max-width:980px !important;
height:auto !important;
display:block !important;
object-fit:contain !important;
}
@media (max-width:560px){
.seals__combo{ max-width:100% !important; }
}
/* === HIDE "show all certificates" details + tighten seals/footer gap === */
.seals__more{ display:none !important; }
.seals{ margin-bottom: 8px !important; padding-bottom: 0 !important; }
.foot{ margin-top: 8px !important; }
/* === BADGE WIDTH FIX 2026-06-01 — wider pills, inline checkmark === */
.method .badge,
.method .badge--accent{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
padding:6px 34px 6px 14px !important;
min-height:26px !important;
line-height:1 !important;
white-space:nowrap !important;
letter-spacing:.02em !important;
}
.method.is-active .badge::after,
.method.is-active .badge--accent::after{
width:16px !important;
height:16px !important;
right:10px !important;
top:50% !important;
transform:translateY(-50%) !important;
background-size:11px !important;
}
/* === BADGE WIDTH FIX (MOBILE) 2026-06-01 === */
@media (max-width: 640px){
.method .badge,
.method .badge--accent{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
padding:5px 30px 5px 12px !important;
min-height:24px !important;
line-height:1 !important;
font-size:11px !important;
white-space:nowrap !important;
letter-spacing:.02em !important;
vertical-align:middle !important;
}
.method.is-active .badge::after,
.method.is-active .badge--accent::after{
width:14px !important;
height:14px !important;
right:8px !important;
top:50% !important;
transform:translateY(-50%) !important;
background-size:10px !important;
}
/* keep badge area in method header on a single baseline */
.method__head, .method-head, .method header{
display:flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
}
}
/* === TZ 2026-06-01: header cleanup, stepper bottom, big labels, mobile methods, blue footer === */
.topbar__progress{ display:none !important; }
.theme-toggle{ display:none !important; }
/* Step1 head: hide merchant info row (eyebrow+h1 removed in HTML) */
.card.step[data-step="1"] .merchant-info{ display:none !important; }
.card.step[data-step="1"] .card__head{ padding-bottom:8px !important; }
/* Big labels for amount + method (CAPSLOCK) */
.field--amount > label,
.methods > legend{
font-size:15px !important;
font-weight:800 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
color:#0b3b7a !important;
margin-bottom:8px !important;
display:block !important;
}
/* Mobile: methods in single row, compact */
@media (max-width:640px){
.methods{
display:grid !important;
grid-template-columns: 1fr 1fr !important;
gap:8px !important;
padding:0 !important;
border:0 !important;
}
.methods > legend{
grid-column: 1 / -1;
font-size:13px !important;
margin-bottom:4px !important;
}
.method{
padding:10px 8px 10px 10px !important;
margin:0 !important;
min-height:auto !important;
}
.method__head{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:6px !important;
}
.method__title{ gap:4px !important; }
.method__title svg{ display:none !important; }
.method__title span{ display:flex; flex-direction:column; }
.method__title b{ font-size:12px !important; line-height:1.15 !important; }
.method__title em{ display:none !important; }
.method__meta{ font-size:11px !important; padding-left:0 !important; margin-top:6px !important; }
.method__meta li{ gap:4px !important; padding:2px 0 !important; }
.method__meta li span{ font-size:10px !important; }
.method__meta li b{ font-size:11px !important; }
.method .badge,
.method .badge--accent{
font-size:9px !important;
padding:3px 22px 3px 8px !important;
min-height:18px !important;
letter-spacing:.01em !important;
}
.method.is-active .badge::after,
.method.is-active .badge--accent::after{
width:11px !important; height:11px !important;
right:5px !important; background-size:8px !important;
}
}
/* Stepper at bottom */
.stepper{
margin: 18px auto 8px !important;
max-width: 720px !important;
}
.stepper__item{ cursor: pointer; }
/* Back button next to stepper */
.step-back{
display:inline-flex;
align-items:center;
gap:6px;
background:#fff;
border:1.5px solid #e3e8f0;
color:#0b3b7a;
padding:7px 13px;
border-radius:999px;
font:600 12px/1 'Inter',Arial,sans-serif;
cursor:pointer;
margin: 16px auto 0;
max-width: 720px;
transition:.15s;
}
.step-back:hover{ background:#f6f8fc; border-color:#0b3b7a; }
.step-back svg{ flex:none; }
/* Pay button: never disabled visually */
#btnPay[disabled]{ opacity: 1 !important; cursor:pointer !important; pointer-events:auto !important; filter:none !important; }
/* Hide Mostra tutti (defensive) */
.seals__more{ display:none !important; }
/* Blue footer (matches header) */
.foot{
background: linear-gradient(135deg,#0b3b7a 0%,#0a2f60 100%) !important;
color:#eaf0fb !important;
border-top:0 !important;
margin-top: 14px !important;
padding: 18px 22px !important;
border-radius: 12px !important;
}
.foot *{ color:#eaf0fb !important; }
.foot b, .foot strong{ color:#fff !important; }
.foot a{ color:#cdd5e2 !important; opacity:.95; }
.foot a:hover{ opacity:1; color:#fff !important; }
.foot__line2 abbr, .foot__line2{ color:#b8c4dd !important; }
.foot__line3{ color:#a4b3d0 !important; }
/* Compress bottom whitespace */
.shell, main.shell{ padding-bottom: 0 !important; }
.card.step--details footer.card__foot{ margin-bottom: 0 !important; }
.seals{ margin-bottom: 6px !important; padding-top: 0 !important; }
.card.step{ margin-bottom: 12px !important; }
/* Hide btnReceipt as defensive (also removed in HTML) */
#btnReceipt{ display:none !important; }
/* === TZ FIX 2026-06-01 v2 === */
/* card__foot: stable horizontal layout with total prominently next to button */
.card__foot{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
gap:16px !important;
flex-wrap:wrap !important;
}
.card__foot .totals{ flex:1 1 auto !important; min-width:0 !important; }
.card__foot #btnPay{ flex:0 0 auto !important; }
/* total label + value side-by-side, big and visible */
.totals__grand{
display:flex !important;
align-items:baseline !important;
gap:12px !important;
flex-direction:row !important;
}
.totals__grand b{
font-size:28px !important;
font-weight:800 !important;
color:#0b3b7a !important;
font-variant-numeric: tabular-nums !important;
display:inline-block !important;
}
/* btnPay must always look enabled */
#btnPay{ opacity:1 !important; cursor:pointer !important; pointer-events:auto !important; }
@media (max-width:640px){
.card__foot{
flex-direction:column !important;
align-items:stretch !important;
gap:10px !important;
}
.card__foot #btnPay{ width:100% !important; justify-content:center; }
.totals__grand{ justify-content:space-between; }
.totals__grand b{ font-size:26px !important; }
}
/* === TZ FIX 2026-06-01 v3 — totals слева, кнопка справа, не липнут === */
.card__foot{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:space-between !important;
gap:24px !important;
flex-wrap:wrap !important;
}
.card__foot .totals{
flex:1 1 auto !important;
min-width:0 !important;
margin-right:auto !important;
align-items:flex-start !important;
text-align:left !important;
}
.totals__grand{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:4px !important;
text-align:left !important;
}
.totals__grand span{
font-size:11.5px !important;
letter-spacing:1px !important;
text-transform:uppercase !important;
color:#5d6b85 !important;
font-weight:700 !important;
}
.totals__grand b{
font-size:32px !important;
font-weight:800 !important;
color:#0b3b7a !important;
font-variant-numeric: tabular-nums !important;
line-height:1 !important;
}
.card__foot #btnPay{ flex:0 0 auto !important; margin-left:auto !important; }
#btnPay{ opacity:1 !important; cursor:pointer !important; pointer-events:auto !important; }
@media (max-width:640px){
.card__foot{
flex-direction:row !important;
align-items:center !important;
gap:12px !important;
}
.totals__grand b{ font-size:24px !important; }
}
/* === TZ FIX 2026-06-01 v4 — remove standalone back chip, restyle btnNew === */
.step-back{ display:none !important; }
#btnStepBack{ display:none !important; }
#btnNew{
background: linear-gradient(135deg, #c0282d 0%, #9a1b1f 100%) !important;
color:#fff !important;
border:0 !important;
padding:10px 18px !important;
font-weight:700 !important;
border-radius:10px !important;
box-shadow: 0 6px 16px -8px rgba(192,40,45,.55) !important;
transition: .15s !important;
}
#btnNew:hover{
background: linear-gradient(135deg, #d63d42 0%, #b02327 100%) !important;
box-shadow: 0 10px 22px -8px rgba(192,40,45,.65) !important;
transform: translateY(-1px) !important;
}
#btnNew svg{ stroke:#fff !important; color:#fff !important; }
/* ===== MOBILE METHOD CARDS — COMPACT (2026-06-01 mobile) ===== */
@media (max-width:760px){
.methods{
grid-template-columns:1fr 1fr !important;
gap:10px !important;
padding:14px 16px 4px !important;
}
.method{
padding:11px 11px 10px !important;
border-radius:14px !important;
border-width:1.5px !important;
}
.method:hover{transform:none !important}
.method__head{
flex-direction:column !important;
align-items:flex-start !important;
gap:6px !important;
}
.method__title{gap:8px !important}
.method__title svg{width:18px; height:18px; flex:none}
.method__title b{
font-size:13px !important;
line-height:1.2 !important;
font-weight:700 !important;
}
.method__title em{display:none !important}
.method__head .badge{
font-size:9px !important;
padding:3px 7px !important;
letter-spacing:.4px !important;
}
.method__meta{
grid-template-columns:1fr !important;
padding-top:8px !important;
margin-top:8px !important;
gap:2px !important;
}
.method__meta li{flex-direction:row !important; align-items:baseline !important; gap:6px !important; justify-content:space-between}
.method__meta li:not(:first-child){display:none !important}
.method__meta span{font-size:9.5px !important; letter-spacing:.4px !important}
.method__meta b{font-size:12px !important; font-weight:700 !important}
.method__hint{display:none !important}
}
@media (max-width:380px){
.methods{grid-template-columns:1fr !important}
.method__meta li:not(:first-child){display:flex !important}
}
/* ===== END MOBILE METHODS COMPACT ===== */
/* ===== MOBILE: checkmark to top-right corner (2026-06-01) ===== */
@media (max-width:760px){
/* hide checkmark inside the badge */
.method.is-active .badge::after,
.method.is-active .badge--accent::after{
display:none !important;
content:none !important;
}
/* badge clean text only */
.method .badge,
.method .badge--accent{
padding:3px 8px !important;
padding-right:8px !important;
}
/* corner checkmark on the card itself */
.method{position:relative !important}
.method.is-active::after{
display:grid !important;
place-items:center !important;
content:"" !important;
position:absolute !important;
top:8px !important;
right:8px !important;
width:20px !important;
height:20px !important;
border-radius:50% !important;
background:#1e9e5e !important;
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;
background-position:center !important;
background-size:14px 14px !important;
box-shadow:0 2px 6px -1px rgba(30,158,94,.45) !important;
border:0 !important;
transform:none !important;
inset:auto 8px auto auto !important;
}
/* extra right padding so head row never sits under the badge */
.method__head{padding-right:24px !important}
}
/* ===== END MOBILE CHECKMARK CORNER ===== */
/* ===== TIGHTEN SEALS + BANCA (2026-06-01 v8 OVERRIDE-ALL) ===== */
html, body{min-height: 100vh}
body{display: flex !important; flex-direction: column !important}
main.shell{
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
gap: 0 !important;
margin-top: 12px !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.shell > section.card{flex: 0 0 auto !important; margin-bottom: 0 !important}
/* HARD KILL all margin/padding around seals */
.shell > section.seals,
.shell > section.seals.seals--slim,
.shell > section.seals.seals--img,
section.seals,
.seals{
flex: 0 0 auto !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.seals__row, .seals__row--combo{margin: 0 !important; padding: 0 !important}
.seals__combo{
/* CROP empty whitespace from PNG: take only middle band */
aspect-ratio: 1280 / 300 !important;
width: 100% !important;
max-width: 980px !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
object-fit: cover !important;
object-position: center center !important;
}
.seals__more{display: none !important}
/* Banca grows to fill remaining space; logo centered → equal gap top/bottom */
section.bditalia{
flex: 1 1 auto !important;
margin: 0 auto !important;
padding: 0 16px !important;
max-width: 980px !important;
width: 100% !important;
display: grid !important;
place-items: center !important;
place-content: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
min-height: 1px !important;
}
.bditalia__inner, .bditalia__text{display:none !important}
.bditalia__logo{
width: 600px !important;
max-width: 90% !important;
height: auto !important;
display: block !important;
margin: auto !important;
align-self: center !important;
justify-self: center !important;
filter: drop-shadow(0 2px 4px rgba(11,31,58,.10));
}
/* Footer pinned at bottom, with breathing room above */
.foot{
flex: 0 0 auto !important;
margin: 28px auto 0 !important;
}
section.bditalia{margin-bottom: 8px !important}
@media (max-width:760px){.bditalia__logo{width: 420px !important}}
@media (max-width:560px){.bditalia__logo{width: 280px !important}}
/* ===== END TIGHTEN v8 ===== */
/* ===== FORCE BLUE + KILL LOGO WHITE BG (2026-06-01) ===== */
:root{
--accent: #0b3b7a !important;
--accent-2: #1657ad !important;
--grad-accent: linear-gradient(135deg,#0a2950 0%,#0b3b7a 50%,#1657ad 100%) !important;
}
/* hard navy outline on the order card (any leftover red) */
.card.step[data-step="1"]{
border:2px solid #0b3b7a !important;
background: var(--surface) !important;
outline: 1.5px dashed #0b3b7a !important;
outline-offset: 10px !important;
}
/* kill white square baked into brand logo PNG */
.cb-logo, .cb-logo--img, .brand__mark{
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.cb-logo img, .cb-logo--img img{
background: transparent !important;
border-radius: 0 !important;
object-fit: contain !important;
mix-blend-mode: normal !important;
}
/* ===== END FORCE BLUE ===== */
/* ===== FOOTER FULL WIDTH (2026-06-01 v2 - breakout from .shell) ===== */
.foot{
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
background: var(--grad-brand, linear-gradient(135deg,#0b1f3a 0%,#13325c 60%,#1a4178 100%)) !important;
color: #cfd8ec !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: 0 -2px 8px rgba(0,0,0,.15) !important;
padding: 22px 28px !important;
box-sizing: border-box !important;
}
.foot a, .foot__links a{ color:#cfd8ec !important }
.foot a:hover, .foot__links a:hover{ color:#fff !important }
.foot abbr, .foot b, .foot u, .foot em{ color:#eaf0fb !important }
.foot__legal, .foot__links{ color:#cfd8ec !important }
.foot > *{
max-width: 1180px;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width:760px){
.foot{ padding: 16px 18px !important }
}
/* ===== END FOOTER FULL WIDTH ===== */
/* ===== STEPPER READ-ONLY (2026-06-01) ===== */
.stepper__item{ cursor: default !important; pointer-events: none !important; }
.stepper{ pointer-events: none !important; }
/* ===== END STEPPER READ-ONLY ===== */
/* ===== MOBILE FIXES (2026-06-01 brand+methods) ===== */
@media (max-width:760px){
/* allow long brand titles to wrap (DE: Bundesministerium für Wirtschaft) */
.brand__text{ flex:1 1 auto !important; min-width:0 !important; overflow:visible !important }
.brand__text strong{
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
text-overflow:clip !important;
overflow:visible !important;
line-height:1.15 !important;
font-size:13.5px !important;
display:block !important;
}
.brand__text em{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
font-size:10.5px !important;
line-height:1.2 !important;
display:block !important;
}
/* method titles: allow long German words to break */
.method__title b{
overflow-wrap:anywhere !important;
word-break:break-word !important;
white-space:normal !important;
min-width:0 !important;
}
.method__title{ min-width:0 !important; flex-wrap:wrap !important }
.method{ min-width:0 !important; overflow:hidden !important }
.methods{ min-width:0 !important }
}
@media (max-width:560px){
.brand__text strong{ font-size:13px !important }
.brand__text em{ font-size:10px !important }
}
@media (max-width:480px){
/* keep both SEPA cards on one row, no wrapping */
.methods{ grid-template-columns:1fr 1fr !important; gap:6px !important; padding:10px 10px 0 !important }
.method{ padding:8px 8px 7px !important; min-width:0 !important }
.method__title b{ font-size:11.5px !important; line-height:1.15 !important }
.method__head .badge{ font-size:8px !important; padding:2px 5px !important; letter-spacing:.3px !important }
/* stack label + value vertically so nothing gets clipped */
.method__meta li{
flex-direction:column !important;
align-items:flex-start !important;
gap:1px !important;
justify-content:flex-start !important;
}
.method__meta span{ font-size:8.5px !important; white-space:nowrap !important }
.method__meta b{ font-size:10.5px !important; white-space:normal !important; overflow-wrap:anywhere !important }
}
@media (max-width:360px){
.methods{ gap:5px !important; padding:8px 8px 0 !important }
.method{ padding:7px 6px !important }
.method__title b{ font-size:10.5px !important }
.method__head .badge{ font-size:7.5px !important; padding:2px 4px !important }
.method__meta span{ font-size:8px !important }
.method__meta b{ font-size:10px !important }
}
/* ===== END MOBILE FIXES ===== */