/* Boarding with Faz — currency converter */
#fx,#fx *{box-sizing:border-box}
#fx{position:relative;margin:24px 0 32px}
.fx-card{background:#fff;border:1px solid var(--line,#E5E0D4);border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(19,35,58,.06)}
.fx-amount label,.fx-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#535A63);margin:0 0 6px}
.fx-amount input{width:100%;font:600 28px/1.2 var(--sans,Inter,sans-serif);padding:12px 14px;border:1px solid #CFC8B8;border-radius:12px;color:var(--ink,#14171C);background:#fff}
.fx-amount input:focus,.fx-btn:focus-visible,.fx-swap:focus-visible,.fx-q:focus{outline:3px solid var(--amber,#EBBE6A);outline-offset:1px}
.fx-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;margin:18px 0}
.fx-btn{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px 14px;border:1px solid #CFC8B8;border-radius:12px;background:#fff;cursor:pointer;font:inherit;color:var(--ink,#14171C);min-height:52px}
.fx-btn b{font-size:17px;color:var(--navy,#13233A)}.fx-btn span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted,#535A63);font-size:14px}.fx-btn i{font-style:normal;color:var(--muted,#535A63)}
.fx-swap{width:48px;height:48px;border-radius:50%;border:1px solid #CFC8B8;background:var(--paper,#F6F3EC);color:var(--navy,#13233A);cursor:pointer;display:grid;place-items:center;margin-bottom:2px}
.fx-swap:hover{background:var(--navy,#13233A);color:#fff}
.fx-out{background:var(--navy,#13233A);color:#fff;border-radius:14px;padding:18px 20px;position:relative}
#fx .fx-res{margin:0 0 6px;display:flex;flex-direction:column}#fx .fx-small{font-size:14px;color:rgba(255,255,255,.75)}#fx .fx-big{font:normal clamp(28px,5vw,40px)/1.15 var(--serif,Georgia,serif);color:#fff;word-break:break-word}
#fx .fx-rate{margin:0 0 4px;font-size:14px;color:rgba(255,255,255,.85)}#fx .fx-meta{margin:0;font-size:12.5px;color:rgba(255,255,255,.65)}
.fx-copy,.fx-retry{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer}.fx-retry{position:static;margin-left:6px;background:var(--amber,#EBBE6A);color:var(--navy,#13233A)}
[dir=rtl] .fx-copy{right:auto;left:14px}
#fx .fx-note{font-size:13px;color:var(--muted,#535A63);margin:14px 0 0;line-height:1.5}.fx-note a{color:inherit}
.fx-pop{position:absolute;z-index:50;width:min(360px,100%);background:#fff;border:1px solid var(--line,#E5E0D4);border-radius:14px;box-shadow:0 18px 40px rgba(19,35,58,.18);padding:10px}
.fx-q{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid #CFC8B8;border-radius:10px;margin:0 0 8px}
.fx-list{list-style:none;margin:0;padding:0;max-height:320px;overflow:auto}
.fx-list li[role=option]{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14.5px}.fx-list li[role=option] b{display:inline-block;width:44px;color:var(--navy,#13233A)}
.fx-list li[role=option]:hover,.fx-list li.on{background:var(--paper,#F6F3EC)}.fx-list li[aria-selected=true]{background:#FDF1D8}
.fx-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#C98A2B);padding:8px 10px 4px}
.fx-quick{margin-top:28px}.fx-quick h2{margin:0 0 10px}#fx .fx-quick table{display:table;width:100%;max-width:none;border-collapse:collapse;background:#fff;border:1px solid var(--line,#E5E0D4);border-radius:12px;overflow:hidden}
.fx-quick td{padding:10px 12px;border-bottom:1px solid var(--line,#E5E0D4);font-size:15px}.fx-quick tr:last-child td{border-bottom:0}.fx-quick td button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--navy,#13233A);cursor:pointer;text-decoration:underline;text-decoration-color:var(--amber,#EBBE6A);text-underline-offset:3px}.fx-cn{color:var(--muted,#535A63);font-size:13.5px}
@media (max-width:640px){.fx-card{padding:18px}.fx-pair{grid-template-columns:1fr;gap:8px}.fx-swap{justify-self:center;transform:rotate(90deg);margin:0}.fx-cn{display:none}}
/* language switcher */
.lang-sw{font-size:14px;font-weight:600;border:1px solid currentColor;border-radius:999px;padding:4px 11px!important;opacity:.85;white-space:nowrap}
.lang-sw:hover{opacity:1}
