@charset "UTF-8";
/* ============================================================
   ecash.expert -- Modern Minimal theme
   Layered on top of Bootstrap 5 (vendor.css). Bootstrap markup
   and data-bs-* behaviors are preserved; we only restyle.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Tokens (ECA$H EXPERT brand) -------------------- */
:root {
    color-scheme: light;

    /* surfaces */
    --bg:           #ffffff;
    --bg-page:      #f5f7fa;
    --bg-soft:      #eef2f7;
    --bg-elev:      #ffffff;
    --bg-hover:     #f9fafb;

    /* brand: dark navy header/footer */
    --brand-navy:        #1d2c44;
    --brand-navy-hover:  #243651;
    --brand-navy-deep:   #14213a;
    --brand-yellow:      #f5b300;

    /* text */
    --text:         #0f172a;
    --text-soft:    #475569;
    --text-muted:   #64748b;
    --text-faint:   #94a3b8;
    --text-on-accent: #ffffff;
    --text-on-brand: #ffffff;

    /* border */
    --border:       #e2e8f0;
    --border-soft:  #eef2f7;
    --border-strong:#cbd5e1;

    /* primary accent (login button blue) */
    --accent:       #3b82f6;
    --accent-hover: #2563eb;
    --accent-soft:  #eff6ff;
    --accent-text:  #1e40af;

    /* semantic */
    --success:      #10b981;
    --success-hover:#059669;
    --success-soft: #ecfdf5;
    --success-text: #065f46;
    --warning:      #f59e0b;
    --warning-soft: #fffbeb;
    --warning-text: #92400e;
    --danger:       #ef4444;
    --danger-soft:  #fef2f2;
    --danger-text:  #991b1b;

    /* shapes */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* shadows (soft, only for elevated overlays) */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
    --shadow:    0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);

    /* type */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* layout */
    --container-max: 1200px;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg:           #1a2238;
    --bg-page:      #14213a;
    --bg-soft:      #243651;
    --bg-elev:      #1d2c44;
    --bg-hover:     #2a3e5e;

    --brand-navy:        #14213a;
    --brand-navy-hover:  #1d2c44;
    --brand-navy-deep:   #0d172a;

    --text:         #f1f5f9;
    --text-soft:    #cbd5e1;
    --text-muted:   #94a3b8;
    --text-faint:   #64748b;
    --text-on-accent: #ffffff;

    --border:       #2a3e5e;
    --border-soft:  #243651;
    --border-strong:#3b5278;

    --accent:       #60a5fa;
    --accent-hover: #93c5fd;
    --accent-soft:  rgba(96, 165, 250, 0.15);
    --accent-text:  #bfdbfe;

    --success:      #10b981;
    --success-hover:#34d399;
    --success-soft: rgba(16, 185, 129, 0.15);
    --success-text: #6ee7b7;
    --warning:      #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.15);
    --warning-text: #fcd34d;
    --danger:       #ef4444;
    --danger-soft:  rgba(239, 68, 68, 0.15);
    --danger-text:  #fca5a5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ---------- Base ------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    background: var(--bg-page);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------- Crypto-style subtle background -----------------
   Multi-layer body background:
     1) Hex-honeycomb pattern (base64 SVG) — repeats across viewport
     2) Four warm/cool radial spots — brand glow in the corners
     3) Solid var(--bg-page) underneath
   No ::before pseudo-element — patterns sit directly on body so they
   can't be hidden by stacking-context quirks. */
body {
    min-height: 100vh;
    position: relative;
    background-color: var(--bg-page);
    background-image:
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1NicgaGVpZ2h0PSc5OCcgdmlld0JveD0nMCAwIDU2IDk4Jz48cGF0aCBkPSdNMjggMEw1NiAxNi4xNjZWNDlMMjggNjUuMTY2TDAgNDlWMTYuMTY2eiBNMjggNjUuMTY2TDU2IDgxLjMzM1Y5Ny41IE0yOCA2NS4xNjZMMCA4MS4zMzNWOTcuNScgZmlsbD0nbm9uZScgc3Ryb2tlPScjMGYxNzJhJyBzdHJva2Utd2lkdGg9JzEnIHN0cm9rZS1vcGFjaXR5PScwLjEwJy8+PC9zdmc+"),
        radial-gradient(circle at 12% 18%, rgba(96, 165, 250, 0.08), transparent 35%),
        radial-gradient(circle at 88% 8%,  rgba(245, 179, 0, 0.06),  transparent 28%),
        radial-gradient(circle at 78% 92%, rgba(96, 165, 250, 0.06), transparent 32%),
        radial-gradient(circle at 6% 95%,  rgba(16, 185, 129, 0.05), transparent 30%);
    background-size: 56px 98px, auto, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, fixed, fixed, fixed;
}
[data-theme="dark"] body {
    background-image:
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1NicgaGVpZ2h0PSc5OCcgdmlld0JveD0nMCAwIDU2IDk4Jz48cGF0aCBkPSdNMjggMEw1NiAxNi4xNjZWNDlMMjggNjUuMTY2TDAgNDlWMTYuMTY2eiBNMjggNjUuMTY2TDU2IDgxLjMzM1Y5Ny41IE0yOCA2NS4xNjZMMCA4MS4zMzNWOTcuNScgZmlsbD0nbm9uZScgc3Ryb2tlPScjZmZmZmZmJyBzdHJva2Utd2lkdGg9JzEnIHN0cm9rZS1vcGFjaXR5PScwLjEzJy8+PC9zdmc+"),
        radial-gradient(circle at 12% 18%, rgba(96, 165, 250, 0.10), transparent 35%),
        radial-gradient(circle at 88% 8%,  rgba(245, 179, 0, 0.07),  transparent 28%),
        radial-gradient(circle at 78% 92%, rgba(96, 165, 250, 0.08), transparent 32%),
        radial-gradient(circle at 6% 95%,  rgba(16, 185, 129, 0.06), transparent 30%);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--accent-hover); }

p { margin: 0 0 0.75rem; }
strong, b { font-weight: 600; }

h1, .h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.4rem;  font-weight: 600; letter-spacing: -0.015em; }
h3, .h3 { font-size: 1.15rem; font-weight: 600; }
h4, .h4 { font-size: 1rem;    font-weight: 600; }
h5, .h5 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; }
h6, .h6 { font-size: 0.85rem; font-weight: 600; }

code, pre, .text-mono, .font-monospace {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

::selection { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- Container -------------------------------------- */
.container,
.container-fluid,
.container-sm, .container-md, .container-lg, .container-xl {
    width: 100%;
    max-width: var(--container-max);
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto;
    margin-left: auto;
}

/* ---------- Navbar (dark navy, polished) ------------------- */
.navbar.navbar-expand-xl,
nav.navbar {
    background: var(--brand-navy) !important;
    border: 0 !important;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
.navbar > .container { min-height: 72px; padding-top: 11px; padding-bottom: 11px; gap: 32px; }
.navbar-collapse { flex-grow: 1; }
@media (min-width: 1200px) {
    .navbar-collapse { margin-left: 8px; }
}

/* Brand: HTML structure with inline SVG icon + crisp web-font text */
.navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: #fff !important;
    font-size: 0 !important;       /* hide raw socialName text */
    line-height: 1;
    transition: opacity 0.15s;
}
.navbar-brand:hover { opacity: 0.85; color: #fff !important; }

.brand-mark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    color: var(--brand-yellow);
    transition: transform 0.4s cubic-bezier(.5,0,.2,1);
}
.navbar-brand:hover .brand-mark { transform: rotate(180deg); }

.brand-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 17px !important;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1;
}
.brand-text .b-cash { color: #fff; }
.brand-text .b-dollar { color: var(--brand-yellow); margin: 0 -1px; font-weight: 800; }
.brand-text .b-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.22);
}
.brand-text .b-expert {
    font-weight: 400;
    font-size: 13px !important;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .brand-text { font-size: 14px !important; }
    .brand-text .b-divider { height: 14px; margin: 0 5px !important; }
    .brand-text .b-expert { font-size: 11px !important; letter-spacing: 0.16em !important; }
    .brand-mark { width: 32px; height: 32px; }
}

.navbar-toggler {
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 8px;
    padding: 0 10px;
    box-shadow: none !important;
    background: transparent;
    height: 40px;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.navbar-toggler-icon {
    background-image: none !important;
    width: 22px;
    height: 16px;
    position: relative;
    display: block;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.18s ease, top 0.18s ease, bottom 0.18s ease, opacity 0.18s ease;
}
/* Three evenly-spaced lines (top/middle/bottom) for the hamburger:
   - container 16px tall, 2px-thick line; spacing 5px on each side. */
.navbar-toggler-icon::before {
    top: 0;
    box-shadow: 0 7px 0 #fff;
}
.navbar-toggler-icon::after {
    bottom: 0;
}
/* When menu is open: morph into an X (top/bottom rotate, middle hides). */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top: 7px;
    transform: rotate(45deg);
    box-shadow: none;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    bottom: 7px;
    transform: rotate(-45deg);
}

.navbar-nav { gap: 2px; }
.navbar-nav .nav-link {
    color: #ffffff !important;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 8px 14px !important;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}
.navbar-nav .nav-link:hover { color: var(--brand-yellow) !important; background: rgba(255,255,255,0.08); }
.navbar-nav .nav-link.active { color: var(--brand-yellow) !important; background: rgba(255,255,255,0.12); }

/* nav tools area (lang + theme + account) ------------------- */
.nav-tools {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto !important;       /* push to right edge */
}
/* Desktop: brand left, menu absolutely centered, tools right */
@media (min-width: 1200px) {
    .navbar > .container { position: relative; }
    .navbar-collapse {
        display: flex !important;
        align-items: center;
        flex-basis: auto !important;
        flex-grow: 1;
    }
    .navbar-collapse .navbar-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        z-index: 1;
    }
    .navbar-collapse .nav-tools {
        margin-left: auto !important;
        position: relative;
        z-index: 2;
    }
}

/* Universal tool button -- ALL items share this base */
.nav-tools .nt-btn,
.nav-tools .btn,
.nav-tools .btn-outline-dark {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: background 0.15s, border-color 0.15s !important;
    cursor: pointer;
    white-space: nowrap;
}
.nav-tools .nt-btn:hover,
.nav-tools .btn:hover,
.nav-tools .btn-outline-dark:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}

/* Account button -- accent (primary blue) */
.nav-tools .nt-account,
.nav-tools .nt-account.btn-outline-dark {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    padding: 0 16px !important;
    color: #fff !important;
}
.nav-tools .nt-account:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}
.nav-tools .nt-account svg {
    width: 16px; height: 16px;
}

/* Lang button -- shows flag + ISO code */
.nav-tools .nt-lang { padding: 0 12px !important; }
.nav-tools .nt-lang .flag {
    width: 22px; height: 16px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover; background-position: center;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
.flag-uk, .flag-uah {
    background-image: linear-gradient(180deg, #0057B7 50%, #FFD700 50%);
}
.flag-ru {
    background-image: linear-gradient(180deg, #fff 0 33.33%, #0039A6 33.33% 66.66%, #D52B1E 66.66%);
}
/* English / Union Jack -- proper SVG */
.flag-en, .flag-gb, .flag-uk-gb {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><clipPath id='s'><path d='M0,0 v30 h60 v-30 z'/></clipPath><clipPath id='t'><path d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/></clipPath><g clip-path='url(%23s)'><path d='M0,0 v30 h60 v-30 z' fill='%23012169'/><path d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/><path d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/><path d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/><path d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/></g></svg>");
}
.flag-us {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'><rect width='60' height='30' fill='%23B22234'/><path d='M0,3 h60 M0,9 h60 M0,15 h60 M0,21 h60 M0,27 h60' stroke='%23fff' stroke-width='2.3'/><rect width='24' height='15' fill='%233C3B6E'/></svg>");
}
.nav-tools .nt-lang .code { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; font-weight: 600; }

/* Generic chevron for all dropdown buttons in nav -- consistent */
.nav-tools .dropdown-toggle::after {
    content: '';
    border: 0;
    width: 8px; height: 8px;
    margin: 0 0 0 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
    background-size: contain; background-repeat: no-repeat;
    vertical-align: middle;
}

/* Account user-icon */
.nav-tools .nt-account::before {
    content: '';
    width: 16px; height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a8 8 0 0116 0v1'/></svg>");
    background-size: contain; background-repeat: no-repeat;
    flex-shrink: 0;
}

/* ---------- Theme toggle: animated sun ↔ moon -------------- */
.theme-toggle {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 10px !important;
    width: 38px; height: 38px;
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background 0.18s, border-color 0.18s;
    overflow: hidden;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.22) !important; }

/* sun icon -- visible in light mode */
.theme-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbbf24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4' fill='%23fbbf24'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>");
    background-size: 22px 22px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s cubic-bezier(.5,0,.2,1), opacity 0.3s;
    transform: rotate(0deg) scale(1);
    opacity: 1;
}
/* moon icon -- visible in dark mode */
.theme-toggle::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cbd5e1' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/></svg>");
    background-size: 22px 22px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s cubic-bezier(.5,0,.2,1), opacity 0.3s;
    transform: rotate(-90deg) scale(0.5);
    opacity: 0;
}
[data-theme="dark"] .theme-toggle::before { transform: rotate(90deg) scale(0.5); opacity: 0; }
[data-theme="dark"] .theme-toggle::after  { transform: rotate(0deg) scale(1); opacity: 1; }
.theme-toggle:active::before, .theme-toggle:active::after { transform: scale(0.85); }

/* ---------- Cards ------------------------------------------ */
.card {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 16px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.18);
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 18px !important;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.card-header strong { color: var(--text-muted); font-weight: 500; }
.card-body { padding: 18px !important; }

/* keep float-end behavior in headers but add gap */
.card-header .float-end { margin-left: auto; }

/* ---------- Buttons ---------------------------------------- */
.btn {
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: var(--radius) !important;
    padding: 9px 16px !important;
    border: 1px solid transparent !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s !important;
    box-shadow: none !important;
}
.btn:active { transform: translateY(0.5px); }

.btn-sm  { padding: 5px 12px !important; font-size: 0.8rem !important; border-radius: 8px !important; }
.btn-lg  { padding: 12px 22px !important; font-size: 1rem !important; }

.btn-success,
.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--text-on-accent) !important; }
.btn-success:hover,
.btn-primary:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }

.btn-dark { background: var(--text) !important; border-color: var(--text) !important; color: var(--bg) !important; }
.btn-dark:hover { background: var(--text-soft) !important; border-color: var(--text-soft) !important; }

.btn-outline-dark { background: transparent !important; border-color: var(--border-strong) !important; color: var(--text) !important; }
.btn-outline-dark:hover { background: var(--bg-soft) !important; border-color: var(--text) !important; color: var(--text) !important; }

.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-danger:hover { filter: brightness(0.92); }

.btn-secondary { background: var(--bg-soft) !important; border-color: var(--border) !important; color: var(--text) !important; }
.btn-secondary:hover { background: var(--bg-hover) !important; }

.dropdown-toggle.btn-dark { padding-right: 14px !important; }

/* ---------- Forms ------------------------------------------ */
.form-control,
.form-select {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 9px 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important;
    box-shadow: none !important;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus,
.form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none;
}
.form-control:disabled,
.form-control[readonly] {
    background: var(--bg-soft) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

.form-select { background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; padding-right: 32px !important; }

textarea.form-control { min-height: 100px; resize: vertical; }

label, .form-label { font-size: 0.82rem; font-weight: 500; color: var(--text-soft); margin-bottom: 6px !important; }

.form-check { padding-left: 1.6em; }
.form-check-input {
    width: 1.05em; height: 1.05em;
    margin-top: 0.2em; margin-left: -1.6em;
    border: 1.5px solid var(--border-strong) !important;
    border-radius: 4px !important;
    background-color: var(--bg) !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: none !important;
}
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.form-check-input[type="radio"] { border-radius: 50% !important; }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-soft) !important; outline: 0; }
.form-check-label { font-size: 0.88rem; color: var(--text-soft); cursor: pointer; }

input[type="file"].form-control { padding: 7px 12px !important; }
input[type="file"]::file-selector-button {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    margin-right: 10px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.85rem;
}

.form-group { margin-bottom: 1rem; }

/* ---------- Tables ----------------------------------------- */
.table {
    color: var(--text) !important;
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
}
.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text) !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    box-shadow: none !important;
}
.table thead > tr > th {
    background: transparent !important;
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border) !important;
    padding-top: 9px !important; padding-bottom: 9px !important;
}
.table-bordered { border: none; }
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0 !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-soft) !important;
}
.table-hover tbody tr:hover > * { background-color: var(--bg-hover) !important; }
.table tbody tr:last-child > * { border-bottom: none !important; }
.table img { vertical-align: middle; }

.table-responsive {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Alerts ----------------------------------------- */
.alert {
    border-radius: var(--radius) !important;
    border: 1px solid transparent !important;
    padding: 11px 14px !important;
    font-size: 0.88rem;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.alert::before {
    content: '';
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    margin-top: 7px;
}
.alert-success    { background: var(--success-soft) !important; color: var(--success-text) !important; }
.alert-warning    { background: var(--warning-soft) !important; color: var(--warning-text) !important; }
.alert-danger,
.alert.bg-danger  { background: var(--danger-soft) !important; color: var(--danger-text) !important; border: 1px solid transparent !important; }
.alert.bg-danger.text-white { color: var(--danger-text) !important; }
.alert-secondary  { background: var(--bg-soft) !important; color: var(--text-soft) !important; border-color: var(--border) !important; }
.alert-secondary::before { background: var(--text-faint); }

/* allow alerts that are info boxes (no dot) */
.alert.alert-plain::before { display: none; }

.alert strong { color: inherit; }

/* ---------- Badges ----------------------------------------- */
.badge {
    background: var(--bg-soft);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.7rem;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    text-transform: none;
    letter-spacing: 0;
}

/* ---------- Modal ------------------------------------------ */
.modal-content {
    background: var(--bg) !important;
    color: var(--text);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}
.modal-header {
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 18px !important;
}
.modal-title { font-size: 1rem !important; font-weight: 600; }
.modal-body { padding: 18px !important; }
.btn-close {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    opacity: 1;
    position: relative;
}
.btn-close::before,
.btn-close::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 1.5px;
    background: var(--text);
    transform-origin: center;
}
.btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.btn-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close:hover { background: var(--bg-soft); }

/* ---------- Dropdown --------------------------------------- */
.dropdown-menu {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    padding: 6px !important;
    box-shadow: var(--shadow) !important;
    min-width: 200px;
}
.dropdown-item {
    color: var(--text) !important;
    font-size: 0.88rem;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: background 0.1s;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-soft) !important; color: var(--text) !important; }
.dropdown-item.danger { color: var(--danger-text); }
.dropdown-item button,
button.dropdown-item { width: 100%; text-align: left; background: transparent; border: 0; }

/* ---------- Pagination ------------------------------------- */
.pagination { gap: 4px; padding: 10px 0 0; }
.page-item .page-link {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-soft) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 0.88rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.page-item .page-link:hover { background: var(--bg-soft) !important; color: var(--text) !important; }
.page-item .page-link.bg-dark.text-white {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

/* ---------- Footer ----------------------------------------- */
footer {
    margin-top: 32px;
    padding: 28px 0 40px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.85rem;
}
footer a { color: var(--text-soft) !important; margin-right: 14px; display: inline-block; padding: 4px 0; }
footer a:hover { color: var(--accent) !important; }
footer img { border-radius: 8px; max-height: 32px; vertical-align: middle; opacity: 0.85; transition: opacity 0.15s; }
footer img:hover { opacity: 1; }
footer .lang-switcher { display: inline-flex; gap: 4px; margin-top: 10px; }
footer .lang-switcher .btn { padding: 4px 10px !important; font-size: 0.72rem !important; border-radius: 6px !important; }

/* ---------- Hero / index search cards ---------------------- */
.search-input-wrap { position: relative; margin-bottom: 8px; }
.search-input-wrap input.form-control {
    padding-left: 34px !important;
    background: var(--bg-soft) !important;
    border-color: transparent !important;
}
.search-input-wrap input.form-control:focus {
    background: var(--bg) !important;
    border-color: var(--accent) !important;
}
.search-input-wrap::before {
    content: '';
    position: absolute;
    left: 12px; top: 50%;
    width: 12px; height: 12px;
    border: 1.5px solid var(--text-faint);
    border-radius: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.search-input-wrap::after {
    content: '';
    position: absolute;
    left: 22px; top: calc(50% + 4px);
    width: 6px; height: 1.5px;
    background: var(--text-faint);
    transform: rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
}

#directions-send,
#directions-receive { width: 100%; }
#directions-send tbody tr,
#directions-receive tbody tr { cursor: pointer; }
#directions-send tbody tr td,
#directions-receive tbody tr td { padding: 9px 14px !important; }
#directions-send tbody tr:hover td,
#directions-receive tbody tr:hover td { background: var(--bg-hover) !important; }

/* currency icon: wrap any <img> following our convention */
.table img,
.ccy-icon-wrap img,
.exchange-currency img {
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

/* ---------- QR / payment ----------------------------------- */
.qrcode { padding: 8px; background: #fff; border-radius: var(--radius); display: inline-block; }
[data-theme="dark"] .qrcode { background: #fff; }

/* progress bar (order countdown) */
.progress {
    background: var(--bg-soft) !important;
    border-radius: var(--radius-pill) !important;
    height: 8px !important;
    overflow: hidden;
}
.progress-bar { background: var(--danger) !important; }

/* ---------- Currency Icon Wrapper (for views) --------------- */
/* Used to show currency images as round chip with subtle bg.
   Markup convention: <span class="ccy"><img ...></span> */
.ccy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    margin-right: 8px;
    flex-shrink: 0;
    vertical-align: middle;
    box-sizing: content-box;
    line-height: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
}
.ccy img,
.ccy svg,
.ccy > * {
    width: 28px !important;
    height: 28px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    display: block !important;
    vertical-align: top;
    object-fit: contain;
    overflow: visible !important;
}
.ccy svg { width: 100% !important; height: 100% !important; }
/* Override any inherited table/img rules anywhere */
.table .ccy,
table .ccy,
.table .ccy img,
table .ccy img,
td .ccy,
td .ccy img {
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
}

/* Force td/cell containing .ccy to align middle so icon and text never drift */
td .ccy + *,
.top-card .head,
.exchange-currency,
.ccy-row {
    vertical-align: middle;
}
td:has(.ccy) { vertical-align: middle; }

/* ---------- Utilities -------------------------------------- */
.text-muted, .text-secondary { color: var(--text-muted) !important; }
.text-faint { color: var(--text-faint) !important; }
.bg-light { background: var(--bg-soft) !important; }
.border { border-color: var(--border) !important; }
.border-bottom { border-color: var(--border) !important; }
.rounded { border-radius: var(--radius) !important; }
.rounded-3 { border-radius: var(--radius-lg) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.text-dark { color: var(--text) !important; }
.text-white { color: #fff !important; }

/* meta strip used on index */
.metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 14px 0;
}
.metric {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.metric-label { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.metric-value { font-size: 1.15rem; font-weight: 600; color: var(--text); margin-top: 2px; font-feature-settings: 'tnum'; }
.metric-delta { font-size: 0.75rem; color: var(--success); margin-top: 2px; }
.metric-delta.neg { color: var(--danger); }

/* status pills */
.status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--bg-soft);
    color: var(--text-muted);
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-success { background: var(--success-soft); color: var(--success-text); }
.status-warning { background: var(--warning-soft); color: var(--warning-text); }
.status-danger  { background: var(--danger-soft);  color: var(--danger-text); }
.status-info    { background: var(--accent-soft);  color: var(--accent-text); }

/* numerals tabular */
.tnum, .table td, .metric-value { font-variant-numeric: tabular-nums; }

/* ---------- Layout helpers --------------------------------- */
.container > .my-3 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

/* row spacing tighter */
.row { --bs-gutter-x: 1rem; }

/* exchange page: send/receive sides */
.exchange-side {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}
.exchange-side .h5 { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }

/* big CTA */
.btn.cta {
    width: 100%;
    padding: 13px 18px !important;
    font-size: 0.95rem !important;
    border-radius: var(--radius-lg) !important;
}

/* ---------- Mobile ----------------------------------------- */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        background: var(--brand-navy-deep);
        border-radius: var(--radius);
        margin-top: 10px;
        padding: 10px;
    }
    .navbar-nav .nav-link { padding: 11px 12px !important; }
    .nav-tools { margin: 8px 0 4px; padding: 10px 4px 0; border-top: 1px solid rgba(255,255,255,0.1); }
}
@media (max-width: 575.98px) {
    .card-body { padding: 14px !important; }
    .card-header { padding: 12px 14px !important; }
    .btn { padding: 8px 14px !important; }
    h1, .h1 { font-size: 1.4rem; }
    h2, .h2 { font-size: 1.15rem; }
}

/* ---------- jQuery main.js classes (AJAX, validation, filter) ---------- */

/* form validation: invalid input -- highlighted by jQuery on ajax 400 */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px var(--danger-soft) !important;
}
.form-response {
    font-size: 0.82rem;
    margin-top: 4px;
}
div.form-response.text-danger {
    color: var(--danger-text) !important;
}

/* AJAX alert that jQuery prepends to form (formAlert function) */
.alert.bg-success,
.alert.form-response.bg-success { background: var(--success-soft) !important; color: var(--success-text) !important; border: 0 !important; }
.alert.bg-success::before { background: var(--success); }
.alert.bg-danger,
.alert.form-response.bg-danger { background: var(--danger-soft) !important; color: var(--danger-text) !important; border: 0 !important; }
.alert.bg-danger::before { background: var(--danger); }
.alert.bg-warning { background: var(--warning-soft) !important; color: var(--warning-text) !important; border: 0 !important; }
.alert.bg-warning::before { background: var(--warning); }
.alert.bg-info    { background: var(--accent-soft) !important; color: var(--accent-text) !important; border: 0 !important; }
.alert.bg-info::before { background: var(--accent); }
/* override .text-white when used on coloured alerts */
.alert.bg-success.text-white,
.alert.bg-danger.text-white,
.alert.bg-warning.text-white,
.alert.bg-info.text-white { color: inherit !important; }

/* hidden by jQuery when selecting send currency: hide non-matching receive rows */
tr.filtered { display: none !important; }

/* highlighted send currency row */
.table-secondary > *,
tr.table-secondary > * {
    background-color: var(--accent-soft) !important;
    color: var(--accent-text) !important;
}
[data-theme="dark"] .table-secondary > *,
[data-theme="dark"] tr.table-secondary > * {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: var(--accent-text) !important;
}

/* QR code generated as inline SVG by jQuery (QRCode lib) */
.qrcode svg {
    display: block;
    width: 128px;
    height: 128px;
}
.qrcode svg path,
.qrcode svg rect { fill: #000; }

/* ============================================================
   PREMIUM COMPONENTS · Layer 2
   ============================================================ */

/* ---------- Hero (used on index.php) ----------------------- */
.hero {
    background: linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 90% 0%, rgba(37, 99, 235, 0.08), transparent 50%),
      radial-gradient(circle at 0% 100%, rgba(37, 99, 235, 0.05), transparent 50%);
    pointer-events: none;
}
[data-theme="dark"] .hero::before {
    background:
      radial-gradient(circle at 90% 0%, rgba(59, 130, 246, 0.12), transparent 50%),
      radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.08), transparent 50%);
}
.hero > * { position: relative; z-index: 1; }
.hero-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    color: var(--text);
}
.hero-title .accent { color: var(--accent); }
.hero-sub {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 0 18px;
    line-height: 1.55;
}
.hero-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 22px;
}
.hero-kpi {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.hero-kpi-l { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.hero-kpi-v { font-size: 1.35rem; font-weight: 600; color: var(--text); margin-top: 4px; font-feature-settings: 'tnum'; letter-spacing: -0.015em; }
.hero-kpi-d { font-size: 0.78rem; color: var(--success); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.hero-kpi-d.neg { color: var(--danger); }
.hero-kpi-d::before { content: '↑'; font-weight: 700; }
.hero-kpi-d.neg::before { content: '↓'; }
.hero-kpi-d.flat::before { content: '•'; color: var(--text-faint); }

/* ---------- Step cards (3 шага обмена) --------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.step {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
}
.step:hover { border-color: var(--accent); transform: translateY(-2px); }
.step-num {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.95rem;
    margin-bottom: 12px;
    font-feature-settings: 'tnum';
}
.step-title { font-size: 1rem; font-weight: 600; margin: 0 0 4px; color: var(--text); }
.step-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* ---------- Feature cards (доверие/безопасность/24-7) ------ */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.feature {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: border-color 0.15s, background 0.15s;
}
.feature:hover { border-color: var(--accent); background: var(--bg-hover); }
.feature-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 3px; color: var(--text); }
.feature-desc { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ---------- Reviews tile -------------------------------- */
.review-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    height: 100%;
    transition: border-color 0.15s;
}
.review-card:hover { border-color: var(--border-strong); }
.review-author {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.review-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase;
    flex-shrink: 0;
}
.review-name { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.review-date { font-size: 0.72rem; color: var(--text-faint); margin-top: 1px; }
.review-text { font-size: 0.85rem; color: var(--text-soft); line-height: 1.55; margin: 0; }

/* ---------- Currency lists hover (index) ------------------- */
#directions-send tbody tr,
#directions-receive tbody tr {
    transition: background 0.1s;
}
#directions-send tbody tr.table-secondary > * {
    border-left: 2px solid var(--accent);
}

/* ---------- Footer (lighter slate 4 cols) ----------------- */
.site-footer,
.site-footer * { color: #ffffff !important; }
.site-footer {
    margin-top: 48px;
    background: #2a3e5e !important;          /* lighter than --brand-navy */
    padding: 48px 0 28px;
    position: relative;
}
.site-footer a { color: #ffffff !important; text-decoration: none; }
.site-footer a:hover { color: #ffd60a !important; }   /* brand-yellow on hover */
[data-theme="dark"] .site-footer { background: #1d2c44 !important; }
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.site-footer > .container,
.site-footer .container { max-width: 1200px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
    margin-bottom: 28px;
}
@media (max-width: 991.98px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 575.98px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }

.footer-col h6 {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.footer-col h6:not(:first-child) { margin-top: 22px; }

.footer-col a {
    display: block;
    font-size: 0.92rem;
    color: #ffffff;
    padding: 6px 0;
    text-decoration: none;
    transition: color 0.15s, padding 0.15s;
}
.footer-col a:hover { color: var(--brand-yellow); padding-left: 4px; }

.footer-col p {
    font-size: 0.88rem;
    color: #ffffff;
    line-height: 1.55;
    margin: 0;
}

/* Social row -- circular icons */
.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-social a {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: transform 0.15s, opacity 0.15s;
}
.footer-social a:hover { transform: translateY(-2px); padding: 0; }
.footer-social a svg { width: 22px; height: 22px; fill: #fff; }
.footer-social .so-tg  { background: linear-gradient(135deg, #2AABEE, #229ED9); }
.footer-social .so-ig  { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.footer-social .so-tw  { background: #1DA1F2; }
.footer-social .so-fb  { background: #1877F2; }
.footer-social .so-yt  { background: #FF0000; }
.footer-social .so-bc  { background: #29B574; }  /* BestChange */
.footer-social .so-tt    { background: #000000; }  /* TikTok */
.footer-social .so-mywot {
    background: #ffffff;
    overflow: hidden;
}
.footer-social .so-mywot img {
    width: 42px; height: 42px;
    display: block;
    object-fit: contain;
    border-radius: 12px;
}
.footer-social .so-trust { background: #00b67a; }  /* Trustpilot */
.footer-social .so-trust svg { fill: #fff; }

.footer-social-desc { font-size: 0.86rem; color: #ffffff; line-height: 1.55; max-width: 320px; margin: 0; }

/* Contact rows */
.footer-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 0.92rem;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.15s, padding 0.15s;
}
.footer-contact:hover { color: var(--brand-yellow); padding-left: 4px; }
.footer-contact .ico {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--brand-yellow);
    opacity: 0.85;
}

/* Working hours block */
.footer-hours .row1 { color: #ffffff; font-size: 0.92rem; margin: 4px 0; font-weight: 500; }
.footer-hours .row2 {
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}

/* Footer brand-logo (matches header logo) */
.footer-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    color: #fff !important;
    margin-bottom: 18px;
    padding: 0 !important;
    transition: opacity 0.15s;
}
.footer-brand-logo:hover { opacity: 0.85; }
.footer-brand-logo .brand-mark { width: 36px; height: 36px; flex-shrink: 0; }
.footer-brand-logo .brand-text {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
}
/* legacy */
.footer-brand-name {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-bottom {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.18);
    flex-wrap: wrap;
    color: #ffffff;
    font-size: 0.82rem;
    text-align: center;
}

footer img.partner-img { max-height: 32px; border-radius: 6px; opacity: 0.85; transition: opacity 0.15s; background: rgba(255,255,255,0.06); padding: 4px 6px; }
footer img.partner-img:hover { opacity: 1; }

/* Monitoring banners row */
.footer-monitors {
    padding: 18px 0 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-monitors-h {
    display: block;
    font-size: 0.78rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    font-weight: 600;
}
.footer-monitors-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.footer-monitors-row a {
    padding: 0;
    line-height: 0;
    border-radius: 5px;
    overflow: hidden;
    opacity: 0.92;
    transition: opacity 0.15s, transform 0.15s;
}
.footer-monitors-row a:hover { opacity: 1; transform: translateY(-1px); }
.footer-monitors-row img { display: block; height: 30px; width: auto; max-width: 160px; }

/* ---------- User cabinet sidebar --------------------------- */
.cabinet {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    align-items: flex-start;
}
@media (max-width: 767.98px) {
    .cabinet { grid-template-columns: 1fr; }
}
.cabinet-side {
    position: sticky;
    top: 80px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
}
@media (max-width: 767.98px) { .cabinet-side { position: static; } }
.cabinet-side a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-soft);
    transition: background 0.15s, color 0.15s;
}
.cabinet-side a:hover { background: var(--bg-soft); color: var(--text); }
.cabinet-side a.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.cabinet-side a .icon { width: 16px; height: 16px; flex-shrink: 0; }
.cabinet-side a.danger { color: var(--danger-text); }
.cabinet-side a.danger:hover { background: var(--danger-soft); }
.cabinet-side hr { border: 0; border-top: 1px solid var(--border-soft); margin: 6px 0; }

/* Logout button — pure <button>, styled to match the cabinet links */
.cabinet-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.88rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--danger-text);
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.cabinet-logout-btn:hover { background: var(--danger-soft); color: var(--danger-text); }
.cabinet-logout-btn .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Direction arrow card (visualize send → receive) -- */
.dir-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-faint);
    margin: 0 4px;
    font-size: 14px;
}

/* ---------- Top directions grid (homepage) ---------------- */
.top-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.top-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.top-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); box-shadow: 0 8px 24px rgba(15,23,42,0.06); }
.top-card .head { display: flex; align-items: center; gap: 10px; }
.top-card .head .ccy { width: 32px; height: 32px; }
.top-card .head .ccy img { width: 22px !important; height: 22px !important; }
.top-card .head .arrow { color: var(--text-faint); font-size: 14px; }
.top-card .head .name { font-weight: 500; font-size: 0.85rem; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-card .rate {
    font-size: 1rem; font-weight: 600;
    color: var(--text);
    font-feature-settings: 'tnum';
    background: var(--bg-soft);
    padding: 8px 10px;
    border-radius: 8px;
    text-align: center;
}
.top-card .meta-row { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-muted); }
.top-card .go {
    background: var(--accent);
    color: #fff !important;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s;
}
.top-card .go:hover { background: var(--accent-hover); }

/* ---------- Outline cards used on rates page --------------- */
.rate-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: border-color 0.15s, transform 0.15s;
}
.rate-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.rate-card .pair { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 500; font-size: 0.9rem; }
.rate-card .rate { font-size: 1.05rem; font-weight: 600; color: var(--text); font-feature-settings: 'tnum'; }
.rate-card .meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }

/* ---------- Reserve progress bars -------------------------- */
.reserve-bar {
    height: 4px;
    background: var(--bg-soft);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}
.reserve-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ---------- Order status banner (premium) ------------------ */
.order-status-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    border: 1px solid transparent;
    margin-bottom: 14px;
}
.order-status-banner .icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.order-status-banner .text { flex: 1; }
.order-status-banner .title { font-weight: 600; font-size: 0.95rem; color: var(--text); margin: 0 0 2px; }
.order-status-banner .desc { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.order-status-banner.success { background: var(--success-soft); }
.order-status-banner.success .icon { background: var(--success); }
.order-status-banner.warning { background: var(--warning-soft); }
.order-status-banner.warning .icon { background: var(--warning); }
.order-status-banner.danger  { background: var(--danger-soft); }
.order-status-banner.danger  .icon { background: var(--danger); }

/* ---------- Big button CTA --------------------------------- */
.btn-cta {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 14px 22px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-lg) !important;
    transition: transform 0.1s, box-shadow 0.2s !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35) !important; }
.btn-cta:active { transform: translateY(0); }

/* ---------- Section heading -------------------------------- */
.section-h {
    display: flex; align-items: center; justify-content: space-between;
    margin: 24px 0 12px;
}
.section-h h2 { font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--text); }
.section-h .more { font-size: 0.82rem; color: var(--accent); }

/* ---------- Avatar circle --------------------------------- */
.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* ---------- Empty state ------------------------------------ */
.empty {
    text-align: center;
    padding: 36px 18px;
    color: var(--text-muted);
}
.empty .empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-faint);
    display: flex; align-items: center; justify-content: center;
}
.empty .empty-icon svg { width: 26px; height: 26px; }
.empty-title { font-weight: 500; color: var(--text-soft); margin-bottom: 4px; }

/* ---------- Article body styling --------------------------- */
.article-body { font-size: 0.95rem; line-height: 1.7; color: var(--text-soft); }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { color: var(--text); margin-top: 1.2em; margin-bottom: 0.5em; }
.article-body h2 { font-size: 1.3rem; }
.article-body h3 { font-size: 1.1rem; }
.article-body p { margin: 0 0 1em; }
.article-body ul, .article-body ol { padding-left: 1.4em; margin: 0 0 1em; }
.article-body li { margin: 0.3em 0; }
.article-body a { color: var(--accent); }
.article-body a:hover { color: var(--accent-hover); text-decoration: underline; }
.article-body blockquote {
    border-left: 3px solid var(--accent);
    background: var(--bg-soft);
    padding: 10px 14px;
    margin: 14px 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--text-soft);
}
.article-body code {
    background: var(--bg-soft);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.88em;
    color: var(--accent-text);
}
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 10px 0; }
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 0.9rem;
}
.article-body th, .article-body td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
}
.article-body th { color: var(--text-muted); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Smooth fade-in for page main content ---------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
main > .my-3 { animation: fadeUp 0.35s ease; }

/* ============================================================
   ECA$H EXPERT BRAND COMPONENTS · Layer 3
   ============================================================ */

/* ---------- Promo banner (rich Telegram giveaway) -------- */
.promo {
    background: linear-gradient(135deg, var(--brand-navy) 0%, #2c4a7a 60%, #1d3556 100%);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(255,255,255,0.06);
    min-height: 110px;
}
.promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 88% 18%, rgba(245,179,0,0.22), transparent 28%),
      radial-gradient(circle at 70% 90%, rgba(59,130,246,0.20), transparent 28%),
      radial-gradient(circle at 95% 70%, rgba(34,158,217,0.18), transparent 24%);
    pointer-events: none;
}
.promo::after {
    /* Decorative dots pattern in background */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
    background-size: 22px 22px;
    pointer-events: none;
    opacity: 0.5;
    mask-image: linear-gradient(90deg, transparent 50%, #000);
    -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000);
}
.promo > * { position: relative; z-index: 1; }
.promo-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #229ED9, #1d8ab8);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(34,158,217,0.40);
    flex-shrink: 0;
}
.promo-icon svg { width: 34px; height: 34px; fill: #fff; }
.promo-text { min-width: 0; }
.promo-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand-yellow);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.promo-eyebrow::before { content: '★'; font-size: 11px; }
.promo-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 6px; color: #fff; line-height: 1.2; letter-spacing: -0.01em; }
.promo-sub { font-size: 0.88rem; color: rgba(255,255,255,0.72); margin: 0; line-height: 1.45; }
.promo-actions {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    flex-shrink: 0;
}
.promo-prize {
    background: rgba(245,179,0,0.18);
    color: var(--brand-yellow);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid rgba(245,179,0,0.30);
    white-space: nowrap;
}
.promo-cta {
    background: var(--success);
    color: #fff !important;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(16,185,129,0.30);
    white-space: nowrap;
}
.promo-cta:hover { background: var(--success-hover); color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,185,129,0.40); }
.promo-cta::after { content: '→'; font-weight: 700; }
@media (max-width: 767.98px) {
    .promo { grid-template-columns: 1fr; gap: 12px; padding: 18px; min-height: auto; }
    .promo-icon { width: 48px; height: 48px; border-radius: 12px; }
    .promo-icon svg { width: 26px; height: 26px; }
    .promo-actions { align-items: stretch; }
    .promo-cta { justify-content: center; }
}

/* ---------- AML compliance notice (simple fintech) -------- */
.aml-banner {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.aml-banner .aml-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--success-soft);
    color: var(--success);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: visible;
    padding: 12px;
    box-sizing: border-box;
}
.aml-banner .aml-icon svg {
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
}
.aml-banner .aml-content { flex: 1; min-width: 0; }
.aml-banner .aml-desc {
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.55;
    margin: 0;
}
.aml-banner .aml-cta {
    flex-shrink: 0;
    background: var(--success);
    color: #fff !important;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
    white-space: nowrap;
}
.aml-banner .aml-cta:hover { background: var(--success-hover); color: #fff !important; transform: translateY(-1px); }

@media (max-width: 767.98px) {
    .aml-banner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
    .aml-banner .aml-icon { width: 44px; height: 44px; border-radius: 10px; }
    .aml-banner .aml-icon svg { width: 24px; height: 24px; }
    .aml-banner .aml-cta { width: 100%; text-align: center; }
}

/* ---------- Currency category pills (Крипто/Стейбли/...) -- */
.ccy-cats {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 10px;
}
.ccy-cat {
    background: var(--bg-soft);
    color: var(--text-soft);
    border: 1px solid transparent;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.ccy-cat:hover { background: var(--bg-hover); color: var(--text); }
.ccy-cat.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* Hide rows filtered out by category — beats jQuery .show() */
tr.hidden-by-cat { display: none !important; }

/* ---------- Card heading like screenshot (large dark) ----- */
.card-heading-lg {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-navy);
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
[data-theme="dark"] .card-heading-lg { color: var(--text); }

/* ---------- Floating operator pill (vertical, right edge) - */
.float-operator {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #5BC096;          /* mint-green like screenshot */
    color: #ffffff;
    padding: 18px 10px;
    border-radius: 12px 0 0 12px;
    z-index: 999;
    cursor: pointer;
    box-shadow: -6px 4px 22px rgba(91, 192, 150, 0.30), 0 0 0 1px rgba(255,255,255,0.06) inset;
    transition: transform 0.18s, padding-left 0.15s, box-shadow 0.15s, background 0.15s;
    text-decoration: none !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    line-height: 1;
}
.float-operator:hover {
    background: #4FB48A;
    color: #ffffff;
    padding-left: 14px;
    box-shadow: -10px 4px 28px rgba(91, 192, 150, 0.40), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.float-operator.offline {
    background: #6b7280;
    box-shadow: -6px 4px 22px rgba(107,114,128,0.30), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.float-operator.offline:hover {
    background: #4b5563;
    box-shadow: -10px 4px 28px rgba(75,85,99,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset;
}

.float-operator .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    animation: pulse-w 2.2s ease-in-out infinite;
}
.float-operator .dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 4px; height: 4px;
    background: #ffffff;
    border-radius: 50%;
}
.float-operator.offline .dot { animation: none; opacity: 0.7; }

.float-operator .label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #ffffff;
    line-height: 1;
}

@keyframes pulse-w {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}
@media (max-width: 767.98px) { .float-operator { right: 8px; padding: 14px 8px; } }

/* ---------- Floating chat bubble ---------------------------- */
.float-chat {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 10px;
}
.float-chat .chat-msg {
    background: var(--bg-elev);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 14px 14px 4px 14px;
    box-shadow: var(--shadow);
    font-size: 0.85rem;
    max-width: 200px;
    border: 1px solid var(--border);
    line-height: 1.4;
}
.float-chat .chat-btn {
    background: var(--brand-navy);
    color: #fff;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    border: 0;
    transition: transform 0.15s, background 0.15s;
}
.float-chat .chat-btn:hover { background: var(--brand-navy-hover); transform: scale(1.05); }
.float-chat .chat-btn svg { width: 24px; height: 24px; fill: #fff; }
@media (max-width: 575.98px) {
    .float-chat { bottom: 14px; right: 14px; }
    .float-chat .chat-msg { display: none; }
    .float-chat .chat-btn { width: 48px; height: 48px; }
}

/* ---------- Adjust hero/headers to brand --------------- */
.hero { background: linear-gradient(135deg, #ffffff 0%, var(--bg-soft) 100%); }
[data-theme="dark"] .hero { background: linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-soft) 100%); }

/* large-list "Віддати / Ви отримуєте" cards on index */
.picker-card { padding: 20px; }
.picker-card .card-heading-lg { font-size: 1.5rem; }

/* dark theme overrides for navbar background already set via --brand-navy */

/* ============================================================
   PAGE HERO + CARDS · Layer 4 (covers doc, contact, news, auth)
   ============================================================ */

/* ---------- Page hero (intro for any text/doc page) -------- */
.page-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, #2c4470 100%);
    color: #fff;
    padding: 36px 28px;
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 92% 12%, rgba(245,179,0,0.18), transparent 28%),
      radial-gradient(circle at 8% 95%, rgba(59,130,246,0.18), transparent 30%);
    pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .crumb {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.page-hero .crumb a { color: rgba(255,255,255,0.85); text-decoration: none; }
.page-hero .crumb a:hover { color: #fff; }
.page-hero .crumb .sep { margin: 0 6px; opacity: 0.5; }
.page-hero h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 14px;
}
.page-hero .icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.page-hero .icon svg { width: 22px; height: 22px; color: var(--brand-yellow); }
.page-hero p { color: rgba(255,255,255,0.78); font-size: 0.95rem; max-width: 720px; margin: 0; line-height: 1.55; }

/* ---------- Document card (after hero) --------------------- */
.doc-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    margin-bottom: 18px;
}
@media (max-width: 575.98px) { .doc-card { padding: 18px 16px; } }

/* ---------- Contact channel cards -------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.contact-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.contact-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); background: var(--bg-hover); }
.contact-card .icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.contact-card .icon.tg { background: #229ED9; color: #fff; }
.contact-card .icon.email { background: var(--accent); color: #fff; }
.contact-card .icon.phone { background: var(--success); color: #fff; }
.contact-card .icon svg { width: 22px; height: 22px; }
.contact-card .label { font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.contact-card .value { font-weight: 500; font-size: 0.95rem; color: var(--text); }

/* ---------- Post preview (news / blog) --------------------- */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.post-preview {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
    color: var(--text);
    text-decoration: none;
    display: flex; flex-direction: column;
}
.post-preview:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text); }
.post-preview .img-wrap { aspect-ratio: 16 / 9; background: var(--bg-soft); overflow: hidden; }
.post-preview .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.post-preview .body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.post-preview .post-title { font-size: 1rem; font-weight: 600; margin: 0 0 6px; color: var(--text); line-height: 1.35; }
.post-preview .post-excerpt { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 10px; line-height: 1.55; flex: 1; }
.post-preview .post-meta { font-size: 0.72rem; color: var(--text-faint); }

/* ---------- Auth (login/register/reset) -------------------- */
.auth-wrap {
    max-width: 460px;
    margin: 24px auto;
}
.auth-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
}
.auth-card .auth-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.auth-card .auth-icon svg { width: 28px; height: 28px; }
.auth-card h1 {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 6px;
}
.auth-card .auth-sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 22px;
}
.auth-card .auth-foot {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.auth-card .auth-foot a { color: var(--accent); font-weight: 500; }

/* ---------- Reviews enriched ------------------------------- */
.review-stars {
    color: var(--brand-yellow);
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* ============================================================
   AML / KYC POLICY PAGE · Layer 5
   ============================================================ */

.aml-page {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: flex-start;
}
@media (max-width: 991.98px) { .aml-page { grid-template-columns: 1fr; } }

/* TOC sidebar (sticky) */
.aml-toc {
    position: sticky;
    top: 90px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 14px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.aml-toc-h {
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin: 0 8px 8px;
}
.aml-toc a {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-soft);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    line-height: 1.35;
}
.aml-toc a:hover { background: var(--bg-soft); color: var(--text); }
.aml-toc a.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}
.aml-toc a .num {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
    font-weight: 600;
    width: 18px;
    text-align: right;
}
.aml-toc a.active .num { color: var(--accent); }
@media (max-width: 991.98px) { .aml-toc { position: static; max-height: none; } }

/* AML body */
.aml-body section {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 16px;
    scroll-margin-top: 90px;
}
@media (max-width: 575.98px) { .aml-body section { padding: 18px 16px; } }
.aml-body .sec-h {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 14px;
}
.aml-body .sec-num {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.aml-body .sec-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.aml-body p {
    color: var(--text-soft);
    line-height: 1.65;
    margin: 0 0 12px;
    font-size: 0.92rem;
}
.aml-body strong { color: var(--text); font-weight: 600; }
.aml-body ul { padding-left: 1.3em; margin: 8px 0 14px; }
.aml-body ul li {
    color: var(--text-soft);
    line-height: 1.6;
    margin: 4px 0;
    font-size: 0.9rem;
    position: relative;
}
.aml-body ul li::marker { color: var(--accent); }

/* Risk score scale -- 4 cards */
.risk-scale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}
.risk-cell {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    border-left-width: 4px;
    border-left-style: solid;
}
.risk-cell.r-low      { border-left-color: #10b981; }
.risk-cell.r-medium   { border-left-color: #f59e0b; }
.risk-cell.r-high     { border-left-color: #f97316; }
.risk-cell.r-critical { border-left-color: #ef4444; }
.risk-cell .range {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.risk-cell .label { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; }

/* Risk Labels -- chip cards */
.risk-labels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 12px 0 16px;
}
.risk-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.risk-label .dot {
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-top: 6px;
}
.risk-label.l-low .dot      { background: #10b981; }
.risk-label.l-medium .dot   { background: #f59e0b; }
.risk-label.l-high .dot     { background: #f97316; }
.risk-label.l-critical .dot { background: #ef4444; }
.risk-label .name { font-weight: 600; color: var(--text); font-size: 0.88rem; line-height: 1.2; }
.risk-label .desc { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; line-height: 1.4; }

/* Risk categories grid */
.risk-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 14px;
}
.risk-cat {
    background: var(--danger-soft);
    color: var(--danger-text);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid rgba(239, 68, 68, 0.18);
}

/* Callouts (info / warning / etc.) */
.aml-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    margin: 10px 0 14px;
    font-size: 0.88rem;
    line-height: 1.55;
}
.aml-callout svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.aml-callout.warning { background: var(--warning-soft); color: var(--warning-text); }
.aml-callout.info    { background: var(--accent-soft);  color: var(--accent-text); }
.aml-callout.danger  { background: var(--danger-soft);  color: var(--danger-text); }
.aml-callout.success { background: var(--success-soft); color: var(--success-text); }

/* Sub-clauses (used in Agreement section 5) */
.aml-body .sub-clause {
    background: var(--bg-soft);
    border-left: 3px solid var(--border-strong);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 8px 0;
}
.aml-body .sub-clause .num {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 5px;
    margin-right: 8px;
    vertical-align: 2px;
}
.aml-body .sub-clause p {
    display: inline;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}
.aml-body .sub-clause.warn { border-left-color: var(--warning); }
.aml-body .sub-clause.danger { border-left-color: var(--danger); }
.aml-body .sub-group-h {
    font-size: 0.78rem;
    color: var(--text-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 8px;
}

/* High-risk platforms long list (legacy) */
.aml-platforms {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 8px 0 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
}
.aml-platforms .plt {
    display: inline-block;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-soft);
    padding: 2px 8px;
    border-radius: 6px;
    margin: 2px 3px;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* ----- NEW: prominent prohibited platforms block (grouped) ----- */
.aml-platforms-block {
    position: relative;
    margin: 18px 0 22px;
    padding: 22px 22px 18px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(220, 38, 38, 0.06) 0%, rgba(220, 38, 38, 0.02) 60%, transparent 100%),
        var(--bg-elev);
    border: 1px solid rgba(220, 38, 38, 0.28);
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -16px rgba(220, 38, 38, 0.35);
    overflow: hidden;
}
.aml-platforms-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 50%, #7f1d1d 100%);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.aml-platforms-block .apb-header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed rgba(220, 38, 38, 0.25);
}
.aml-platforms-block .apb-icon {
    flex: 0 0 44px;
    height: 44px;
    width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(220, 38, 38, 0.65);
}
.aml-platforms-block .apb-icon svg {
    width: 22px; height: 22px;
}
.aml-platforms-block .apb-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.aml-platforms-block .apb-sub {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-soft);
}
.aml-platforms-block .apb-sub strong {
    color: #dc2626;
    font-weight: 700;
}
.aml-platforms-block .apb-group {
    margin: 12px 0 10px;
}
.aml-platforms-block .apb-group-h {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.aml-platforms-block .apb-group-h::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.aml-platforms-block .apb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 4px;
}
.aml-platforms-block .apb-chip {
    display: inline-flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-soft);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
    transition: all 0.15s ease;
    position: relative;
}
.aml-platforms-block .apb-chip::before {
    content: '✕';
    color: #dc2626;
    font-size: 0.65rem;
    margin-right: 6px;
    font-weight: 700;
    opacity: 0.7;
}
.aml-platforms-block .apb-chip:hover {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--text);
}
@media (max-width: 640px) {
    .aml-platforms-block { padding: 16px 14px 14px; }
    .aml-platforms-block .apb-header { flex-direction: column; gap: 10px; }
    .aml-platforms-block .apb-title { font-size: 0.98rem; }
    .aml-platforms-block .apb-sub { font-size: 0.82rem; }
}
[data-theme="dark"] .aml-platforms-block {
    background:
        linear-gradient(180deg, rgba(248, 113, 113, 0.08) 0%, rgba(248, 113, 113, 0.03) 60%, transparent 100%),
        var(--bg-elev);
    border-color: rgba(248, 113, 113, 0.32);
}
[data-theme="dark"] .aml-platforms-block .apb-sub strong { color: #f87171; }
[data-theme="dark"] .aml-platforms-block .apb-chip::before { color: #f87171; }
[data-theme="dark"] .aml-platforms-block .apb-group-h::before {
    background: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
[data-theme="dark"] .aml-platforms-block .apb-chip:hover {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.35);
}

/* Bullet list with checkmark style */
.aml-checks { padding-left: 0; list-style: none; margin: 8px 0 14px; }
.aml-checks li {
    position: relative;
    padding-left: 24px;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 6px 0;
}
.aml-checks li::before {
    content: '';
    position: absolute;
    left: 0; top: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2.5 6 5 8.5 9.5 4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
}

/* AML page hero adjustments */
.aml-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, #2c4470 60%, #1d3556 100%);
    color: #fff;
    padding: 32px 32px 28px;
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.aml-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 90% 12%, rgba(245,179,0,0.18), transparent 28%),
      radial-gradient(circle at 8% 95%, rgba(59,130,246,0.20), transparent 32%);
    pointer-events: none;
}
.aml-hero > * { position: relative; z-index: 1; }
.aml-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand-yellow);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.aml-hero .eyebrow::before {
    content: '';
    width: 18px; height: 1.5px;
    background: var(--brand-yellow);
    display: inline-block;
}
.aml-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.aml-hero .lead {
    color: rgba(255,255,255,0.78);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 0 14px;
}
.aml-hero .meta-strip {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
}
.aml-hero .meta-pill {
    background: rgba(255,255,255,0.10);
    color: #fff;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.15);
}
.aml-hero .meta-pill.brand { background: var(--brand-yellow); color: #1a1a1a; border-color: var(--brand-yellow); }

/* ============================================================
   AFFILIATE LANDING · Layer 6
   ============================================================ */

.aff-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, #2c4470 60%, #1d3556 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 48px 36px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.aff-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 88% 18%, rgba(245,179,0,0.20), transparent 30%),
      radial-gradient(circle at 8% 95%, rgba(96,165,250,0.18), transparent 32%),
      radial-gradient(circle at 70% 85%, rgba(16,185,129,0.10), transparent 28%);
    pointer-events: none;
}
.aff-hero > * { position: relative; z-index: 1; }
.aff-hero .grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 36px;
    align-items: center;
}
@media (max-width: 991.98px) { .aff-hero .grid { grid-template-columns: 1fr; gap: 22px; } .aff-hero { padding: 30px 22px; } }
.aff-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 600;
    color: var(--brand-yellow);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.aff-hero .eyebrow::before {
    content: '';
    width: 22px; height: 1.5px;
    background: var(--brand-yellow);
}
.aff-hero h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 14px;
    color: #fff;
    letter-spacing: -0.025em;
}
.aff-hero h1 .accent { color: var(--brand-yellow); }
.aff-hero p.lead {
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 0 18px;
}
.aff-hero .cta-row {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.aff-hero .cta-row .btn-cta {
    background: var(--brand-yellow) !important;
    color: var(--brand-navy) !important;
    box-shadow: 0 8px 24px rgba(245,179,0,0.30) !important;
    border: 0 !important;
}
.aff-hero .cta-row .btn-cta:hover { box-shadow: 0 12px 30px rgba(245,179,0,0.45) !important; }
.aff-hero .cta-row .btn-ghost {
    background: rgba(255,255,255,0.10);
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    padding: 14px 22px !important;
    border-radius: var(--radius-lg) !important;
    font-weight: 500 !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.aff-hero .cta-row .btn-ghost:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.30) !important; }

/* Hero stats badge */
.aff-hero-stats {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg);
    padding: 22px;
    backdrop-filter: blur(8px);
}
.aff-hero-stats .row {
    display: flex; align-items: baseline; gap: 8px; margin: 6px 0;
}
.aff-hero-stats .big {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--brand-yellow);
    letter-spacing: -0.03em;
    line-height: 1;
    font-feature-settings: 'tnum';
}
.aff-hero-stats .lbl { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.aff-hero-stats .small { color: rgba(255,255,255,0.7); font-size: 0.84rem; margin-top: 12px; line-height: 1.5; }

/* Benefits grid */
.aff-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.aff-benefit {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    animation: aff-up 0.5s ease backwards;
}
.aff-benefit:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 12px 32px rgba(15,23,42,0.08);
}
.aff-benefit .icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.aff-benefit .icon svg { width: 22px; height: 22px; }
.aff-benefit h3 { font-size: 1rem; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.aff-benefit p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
@keyframes aff-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.aff-benefit:nth-child(1) { animation-delay: 0.05s; }
.aff-benefit:nth-child(2) { animation-delay: 0.10s; }
.aff-benefit:nth-child(3) { animation-delay: 0.15s; }
.aff-benefit:nth-child(4) { animation-delay: 0.20s; }

/* Steps row */
.aff-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
    counter-reset: aff-step;
}
.aff-step {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: transform 0.15s, border-color 0.15s;
}
.aff-step:hover { transform: translateY(-3px); border-color: var(--accent); }
.aff-step::before {
    counter-increment: aff-step;
    content: counter(aff-step);
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 6px 14px rgba(59,130,246,0.30);
    margin-bottom: 12px;
}
.aff-step h3 { font-size: 1rem; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.aff-step p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Reward levels table */
.aff-levels {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 22px;
}
.aff-levels-h {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
}
.aff-levels-h .icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.aff-levels-h .icon svg { width: 18px; height: 18px; }
.aff-level-rows { padding: 4px 0; }
.aff-level {
    display: grid;
    grid-template-columns: 60px 1fr 1fr 80px;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    transition: background 0.12s;
    border-bottom: 1px solid var(--border-soft);
}
.aff-level:last-child { border-bottom: 0; }
.aff-level:hover { background: var(--bg-soft); }
.aff-level-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-feature-settings: 'tnum';
}
.aff-level-vol .lbl { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.aff-level-vol .val { font-weight: 600; color: var(--text); font-feature-settings: 'tnum'; }
.aff-level-bar {
    height: 8px;
    background: var(--bg-soft);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.aff-level-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--brand-yellow));
    border-radius: 999px;
    transition: width 0.6s ease;
}
.aff-level-pct {
    text-align: right;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    font-feature-settings: 'tnum';
}
@media (max-width: 575.98px) {
    .aff-level { grid-template-columns: 40px 1fr 60px; gap: 10px; padding: 12px 14px; }
    .aff-level-bar { display: none; }
}

/* Calculator */
.aff-calc {
    background: linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px;
    margin-bottom: 22px;
}
.aff-calc h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.aff-calc .sub { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 18px; }
.aff-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
@media (max-width: 575.98px) { .aff-calc-grid { grid-template-columns: 1fr; } }
.aff-calc-input label { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; }
.aff-calc-input input[type="range"] { width: 100%; }
.aff-calc-input .v {
    font-size: 1.4rem; font-weight: 700; color: var(--text);
    font-feature-settings: 'tnum';
    margin-bottom: 4px;
}
.aff-calc-out {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
}
.aff-calc-out .lbl { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.aff-calc-out .v {
    font-size: 2rem; font-weight: 700;
    color: var(--success);
    font-feature-settings: 'tnum';
    letter-spacing: -0.02em;
    margin: 6px 0;
}
.aff-calc-out .hint { font-size: 0.76rem; color: var(--text-faint); }

/* Final CTA banner */
.aff-final {
    background: linear-gradient(135deg, var(--accent) 0%, #1e40af 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.aff-final::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(245,179,0,0.25), transparent 50%);
    pointer-events: none;
}
.aff-final > * { position: relative; z-index: 1; }
.aff-final h2 { color: #fff; font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; }
.aff-final p { color: rgba(255,255,255,0.85); margin-bottom: 18px; font-size: 0.95rem; }
.aff-final .btn-cta {
    background: var(--brand-yellow) !important;
    color: var(--brand-navy) !important;
    border: 0 !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    display: inline-block;
}

/* ============================================================
   ABOUT / FAQ / CONTACT pages · Layer 7
   ============================================================ */

/* Hero (shared by about, contact, faq) */
.lp-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, #2c4470 60%, #1d3556 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 44px 32px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.lp-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 88% 18%, rgba(245,179,0,0.18), transparent 28%),
      radial-gradient(circle at 8% 95%, rgba(96,165,250,0.20), transparent 32%);
    pointer-events: none;
}
.lp-hero > * { position: relative; z-index: 1; }
.lp-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 600;
    color: var(--brand-yellow);
    letter-spacing: 0.10em; text-transform: uppercase;
    margin-bottom: 12px;
}
.lp-hero .eyebrow::before {
    content: ''; width: 22px; height: 1.5px;
    background: var(--brand-yellow);
}
.lp-hero h1 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 12px;
    color: #fff;
    letter-spacing: -0.02em;
}
.lp-hero h1 .accent { color: var(--brand-yellow); }
.lp-hero p.lead {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 680px;
    margin: 0 0 18px;
}

/* Stat strip */
.lp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.lp-stat {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius);
    padding: 14px 16px;
    backdrop-filter: blur(8px);
    transition: background 0.18s, transform 0.18s;
}
.lp-stat:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.lp-stat .v { font-size: 1.6rem; font-weight: 700; color: var(--brand-yellow); letter-spacing: -0.02em; line-height: 1; font-feature-settings: 'tnum'; }
.lp-stat .l { font-size: 0.78rem; color: rgba(255,255,255,0.78); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Mission / values / generic cards (fade-up animation) */
.lp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.lp-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
    animation: lp-up 0.55s ease backwards;
}
.lp-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 12px 32px rgba(15,23,42,0.08); }
.lp-card .ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.lp-card .ico svg { width: 22px; height: 22px; }
.lp-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 6px; color: var(--text); }
.lp-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
@keyframes lp-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lp-cards > .lp-card:nth-child(1) { animation-delay: 0.05s; }
.lp-cards > .lp-card:nth-child(2) { animation-delay: 0.10s; }
.lp-cards > .lp-card:nth-child(3) { animation-delay: 0.15s; }
.lp-cards > .lp-card:nth-child(4) { animation-delay: 0.20s; }
.lp-cards > .lp-card:nth-child(5) { animation-delay: 0.25s; }
.lp-cards > .lp-card:nth-child(6) { animation-delay: 0.30s; }

/* Two-column compare (mission/values) */
.lp-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}
@media (max-width: 767.98px) { .lp-two { grid-template-columns: 1fr; } }
.lp-two .lp-card { animation-delay: 0; }

/* FAQ accordion */
.faq-list {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 22px;
}
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    color: var(--text);
    font-size: 0.95rem;
    transition: background 0.12s, color 0.12s;
}
.faq-q:hover { background: var(--bg-soft); color: var(--accent); }
.faq-q .chev {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s;
}
.faq-q .chev::before {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
}
.faq-item[open] .faq-q .chev { transform: rotate(180deg); background: var(--accent); color: #fff; }
.faq-a {
    padding: 0 22px 18px;
    color: var(--text-soft);
    line-height: 1.65;
    font-size: 0.92rem;
    animation: faq-fade 0.25s ease;
}
@keyframes faq-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.faq-cats {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px;
}
.faq-cat {
    background: var(--bg-soft);
    color: var(--text-soft);
    border: 1px solid transparent;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.faq-cat.active, .faq-cat:hover {
    background: var(--accent);
    color: #fff;
}

/* Contact channels with hover-pulse */
.lp-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.lp-channel {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.lp-channel:hover { transform: translateY(-4px); color: var(--text); }
.lp-channel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 10%, currentColor, transparent 35%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.lp-channel:hover::after { opacity: 0.05; }
.lp-channel .ico-big {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.lp-channel .ico-big svg { width: 26px; height: 26px; }
.lp-channel.tg .ico-big { background: linear-gradient(135deg, #2AABEE, #229ED9); box-shadow: 0 6px 18px rgba(34,158,217,0.35); }
.lp-channel.email .ico-big { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow: 0 6px 18px rgba(59,130,246,0.30); }
.lp-channel.phone .ico-big { background: linear-gradient(135deg, var(--success), #059669); box-shadow: 0 6px 18px rgba(16,185,129,0.30); }
.lp-channel.chat .ico-big { background: linear-gradient(135deg, var(--brand-yellow), #d99500); color: var(--brand-navy); box-shadow: 0 6px 18px rgba(245,179,0,0.30); }
.lp-channel .label { font-size: 0.74rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.lp-channel .value { font-size: 1rem; font-weight: 600; color: var(--text); }
.lp-channel .hint { font-size: 0.82rem; color: var(--text-muted); }

/* ---------- ORDER STATUS PAGE (premium) ------------------ */
.order-hero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, #2c4470 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 24px 24px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.order-hero.success { background: linear-gradient(135deg, #065f46 0%, #10b981 100%); }
.order-hero.warning { background: linear-gradient(135deg, #78350f 0%, #f59e0b 100%); }
.order-hero.info    { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.order-hero.danger  { background: linear-gradient(135deg, #7f1d1d 0%, #ef4444 100%); }

/* Extra-compact hero for terminal status pages — paid / completed / canceled /
   suspended. The .warning variant ("waiting for payment") uses the default
   (already-compact) sizing. */
.order-hero:not(.warning) {
    padding: 18px 18px;
}
.order-hero:not(.warning) .big-icon {
    width: 52px; height: 52px;
    margin: 0 auto 10px;
}
.order-hero:not(.warning) .big-icon::after {
    width: 52px; height: 52px;
}
.order-hero:not(.warning) .big-icon svg {
    width: 26px; height: 26px;
}
.order-hero:not(.warning) h1 {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    margin-bottom: 4px;
}
.order-hero:not(.warning) .desc {
    font-size: 0.83rem;
    line-height: 1.4;
}
.order-hero:not(.warning) .order-mini-flow {
    margin: 10px auto 4px;
}
.order-hero:not(.warning) .order-id,
.order-hero:not(.warning) .order-actions {
    margin-top: 8px;
}
.order-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 90% 12%, rgba(255,255,255,0.18), transparent 28%),
      radial-gradient(circle at 8% 95%, rgba(255,255,255,0.10), transparent 32%);
    pointer-events: none;
}
.order-hero > * { position: relative; z-index: 1; }
.order-hero .big-icon {
    width: 64px; height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    animation: order-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.order-hero .big-icon svg { width: 32px; height: 32px; stroke-width: 2.5; }
@keyframes order-pop {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.order-hero .big-icon::after {
    content: '';
    position: absolute;
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    animation: order-ring 2s ease-out infinite;
    pointer-events: none;
}
@keyframes order-ring {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}
.order-hero h1 {
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    animation: lp-up 0.5s 0.1s ease backwards;
}
.order-hero .desc {
    color: rgba(255,255,255,0.85);
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto;
    animation: lp-up 0.5s 0.2s ease backwards;
}
.order-hero .order-id {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-top: 10px;
    letter-spacing: 0.04em;
    animation: lp-up 0.5s 0.3s ease backwards;
}

.order-summary {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 18px;
    animation: lp-up 0.5s 0.35s ease backwards;
}
.order-summary .pair {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 18px;
}
.order-summary .pair .side { text-align: center; flex: 1; }
.order-summary .pair .side .lbl {
    font-size: 0.72rem; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.order-summary .pair .side .val {
    font-size: 1.3rem; font-weight: 700; color: var(--text);
    font-feature-settings: 'tnum'; letter-spacing: -0.02em;
}
.order-summary .pair .side .ccy-name { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }
.order-summary .pair .arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

/* (dead .order-progress / .order-step block removed — superseded by
   .order-stepper / .order-step-dot / .order-step-line / .order-step-active
   defined in the order-page section further down) */

/* ---------- Post-payment info list ------------------------ */
.pay-info {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-bottom: 18px;
    animation: lp-up 0.5s 0.4s ease backwards;
    overflow: hidden;
    position: relative;
}
.pay-info::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--success), var(--accent));
}
.pay-info h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pay-info h3 .ico {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--success-soft);
    color: var(--success);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pay-info h3 .ico svg { width: 18px; height: 18px; }
.pay-info-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pay-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border-radius: var(--radius);
    transition: background 0.15s, transform 0.15s;
}
.pay-info-list li:hover { background: var(--bg-hover); transform: translateX(2px); }
.pay-info-list .em {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.pay-info-list .txt {
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.pay-info-list .txt strong { color: var(--text); font-weight: 600; }
.pay-info-final {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--accent-soft);
    border-radius: var(--radius);
    color: var(--accent-text);
    font-size: 0.92rem;
    text-align: center;
    font-weight: 500;
}
.pay-info-final .em { font-size: 1.2rem; vertical-align: -2px; margin-right: 4px; }

/* ====================================================================
   PAYOUT CARD — compact merged header with live timer + flow strip
   ==================================================================== */
.payout-card {
    background:
        radial-gradient(900px 200px at 50% -20%, rgba(59, 130, 246, 0.10), transparent 60%),
        var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px 16px;
    margin-bottom: 18px;
    overflow: hidden;
    position: relative;
    animation: lp-up 0.5s 0.4s ease backwards;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -36px rgba(59, 130, 246, 0.30);
}
.payout-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--success) 0%, var(--accent) 100%);
}

/* ----- Compact merged header ----- */
.payout-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.payout-icon-wrap {
    flex-shrink: 0;
    position: relative;
    width: 56px; height: 56px;
}
.payout-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.06));
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: var(--accent);
    box-shadow: 0 6px 18px -8px rgba(59, 130, 246, 0.45);
    position: relative;
}
.payout-icon::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 18px;
    border: 2px solid rgba(59, 130, 246, 0.32);
    animation: pf-ring 2s ease-out infinite;
    pointer-events: none;
}
@keyframes pf-ring {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.35); opacity: 0; }
}
.payout-icon svg { width: 26px; height: 26px; }
.pf-spin {
    animation: pf-spin 4.5s linear infinite;
    transform-origin: 50% 50%;
}
@keyframes pf-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

.payout-info { flex: 1; min-width: 0; }

/* Top meta row: badge + timer */
.payout-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.payout-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--success-soft);
    color: var(--success);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.payout-pill .pp-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    animation: payout-blink 1.6s ease-in-out infinite;
}
@keyframes payout-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}
.payout-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text-soft);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    line-height: 1;
}
.payout-timer svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.payout-timer .t-lbl { color: var(--text-muted); }
.payout-timer .t-val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text);
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}

.payout-h {
    font-size: clamp(1rem, 2vw, 1.18rem);
    font-weight: 700;
    color: var(--text);
    margin: 4px 0 4px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.payout-sub {
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0;
}

/* ----- Compact horizontal flow strip ----- */
.payout-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: var(--bg-soft);
    border-radius: var(--radius);
    margin-bottom: 14px;
    border: 1px dashed var(--border);
}
.ps-node {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}
.ps-node .ps-icon {
    width: 26px; height: 26px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-faint);
    flex-shrink: 0;
}
.ps-node .ps-icon svg { width: 14px; height: 14px; }
.ps-node.ps-done {
    color: var(--success);
}
.ps-node.ps-done .ps-icon {
    background: var(--success-soft);
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--success);
}
.ps-node.ps-active {
    color: var(--accent);
}
.ps-node.ps-active .ps-icon {
    background: var(--accent-soft);
    border-color: rgba(59, 130, 246, 0.4);
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

/* Animated dotted line between nodes */
.ps-line {
    flex: 1;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 24px;
}
.ps-line span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.25;
    animation: ps-line-dot 1.6s ease-in-out infinite;
}
.ps-line span:nth-child(1) { animation-delay: 0s; }
.ps-line span:nth-child(2) { animation-delay: 0.2s; }
.ps-line span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ps-line-dot {
    0%, 100% { opacity: 0.2; transform: scale(0.7); }
    40%      { opacity: 1;   transform: scale(1.3); }
}

/* Items */
.payout-items-h {
    font-size: 0.72rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    margin-bottom: 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.payout-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.payout-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border-radius: var(--radius);
    transition: background 0.15s ease, transform 0.15s ease;
}
.payout-list li:hover { background: var(--bg-hover); transform: translateX(2px); }
.payout-list .em {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.payout-list .txt {
    font-size: 0.86rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.payout-list .txt strong { color: var(--text); font-weight: 600; }

/* Final hope message */
.payout-final {
    margin-top: 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--success-soft), var(--accent-soft));
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
}
.payout-final .em { font-size: 1.2rem; line-height: 1; }

/* Mobile */
@media (max-width: 640px) {
    .payout-card { padding: 16px 14px 14px; }
    .payout-head { gap: 12px; }
    .payout-icon-wrap, .payout-icon { width: 48px; height: 48px; }
    .payout-icon svg { width: 22px; height: 22px; }
    .payout-h { font-size: 1rem; }
    .payout-sub { font-size: 0.82rem; }
    .payout-strip { padding: 10px 8px; gap: 4px; flex-wrap: wrap; justify-content: center; }
    .ps-node .ps-lbl { display: none; }
    .ps-node.ps-active .ps-lbl { display: inline; }
    .ps-line { min-width: 12px; }
    .payout-timer { font-size: 0.74rem; }
}
@media (max-width: 380px) {
    .payout-meta { gap: 6px; }
    .payout-pill { font-size: 0.68rem; padding: 3px 8px; }
}

/* ---------- "Why us" 5-column row on desktop -------------- */
.why-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.why-card { padding: 18px 14px; text-align: center; }
.why-card h3 { font-size: 0.95rem; }
.why-card p  { font-size: 0.84rem; }
@media (max-width: 1199.98px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px)  { .why-grid { grid-template-columns: 1fr; } }

/* ---------- No-FOUC -- prevent flash for theme change ------ */
html.theme-loading * { transition: none !important; }

/* ---------- Print ------------------------------------------ */
/* ====================================================================
   ORDER DETAILS — modern card with hero pair + key/value rows
   ==================================================================== */
.od-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 36px -28px rgba(0,0,0,0.25);
}
.od-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
}
.od-head-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}
.od-head-icon svg { width: 18px; height: 18px; }
.od-head-text {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* Hero pair: send → receive */
.od-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 22px 20px;
    border-bottom: 1px dashed var(--border);
    background:
        radial-gradient(800px 200px at 0% 0%, rgba(59, 130, 246, 0.06), transparent 60%),
        radial-gradient(800px 200px at 100% 100%, rgba(34, 197, 94, 0.06), transparent 60%);
}
.od-pair-side { min-width: 0; }
.od-from { text-align: left; }
.od-to   { text-align: right; }
.od-pair-lbl {
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    margin-bottom: 8px;
}
.od-pair-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.od-to .od-pair-row { justify-content: flex-end; }
.od-pair .od-ccy {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.od-pair .od-ccy img {
    width: 22px; height: 22px;
    object-fit: contain;
    border-radius: 0 !important;
}
.od-ccy-name {
    font-size: 0.88rem;
    color: var(--text-soft);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.od-pair-val {
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    font-weight: 700;
    color: var(--text);
    font-feature-settings: 'tnum';
    letter-spacing: -0.02em;
    line-height: 1.1;
    word-break: break-all;
}
.od-pair-val-success { color: var(--success); }
.od-pair-arrow {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.od-pair-arrow svg { width: 18px; height: 18px; }

/* Key / value rows */
.od-rows { padding: 12px 12px 14px; }
.od-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    transition: background 0.15s ease;
}
.od-row + .od-row { margin-top: 2px; }
.od-row:hover { background: var(--bg-soft); }
.od-key {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 500;
}
.od-key-ico {
    width: 26px; height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
}
.od-key-ico svg { width: 14px; height: 14px; }
.od-key-ico-bonus {
    background: var(--success-soft);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--success);
}
.od-val {
    font-size: 0.92rem;
    color: var(--text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.od-val.tnum { font-feature-settings: 'tnum'; }
.od-val-success { color: var(--success); }
.od-val-mono {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    word-break: break-all;
    color: var(--text-soft);
    background: var(--bg-soft);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: inline-block;
}

/* Backwards-compat: also style any rows from te_component('orderInfo') */
.od-rows tr {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
}
.od-rows tr td:first-child {
    color: var(--text-muted);
    font-size: 0.86rem;
}
.od-rows tr td:last-child {
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
    text-align: right;
}

@media (max-width: 640px) {
    .od-pair {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: left;
        padding: 18px 14px;
    }
    .od-to { text-align: left; }
    .od-to .od-pair-row { justify-content: flex-start; }
    .od-pair-arrow {
        margin: 4px 0;
        width: 32px; height: 32px;
        transform: rotate(90deg);
    }
    .od-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 12px;
    }
    .od-val { text-align: left; }
}

/* ====================================================================
   REVIEW CTA — completed order: BestChange + Obmify buttons
   ==================================================================== */
.review-cta {
    position: relative;
    margin: 18px 0 6px;
    padding: 22px 24px 18px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(900px 250px at 0% 0%,   rgba(34, 197, 94, 0.10), transparent 55%),
        radial-gradient(900px 250px at 100% 100%, rgba(245, 179, 0, 0.10), transparent 55%),
        var(--bg-elev);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 48px -32px rgba(34, 197, 94, 0.30);
    animation: lp-up 0.6s 0.5s ease backwards;
}
.review-cta::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--success) 0%, var(--brand-yellow, #f5b300) 100%);
}

/* Floating sparkles */
.rcta-spark {
    position: absolute;
    color: var(--brand-yellow, #f5b300);
    opacity: 0.5;
    font-size: 18px;
    pointer-events: none;
    animation: rcta-spark 3s ease-in-out infinite;
}
.rcta-spark.s1 { top: 14px;  right: 22px; font-size: 22px; animation-delay: 0s;   }
.rcta-spark.s2 { top: 60px;  right: 60px; font-size: 14px; animation-delay: 0.6s; }
.rcta-spark.s3 { top: 30px;  right: 90px; font-size: 16px; animation-delay: 1.2s; }
@keyframes rcta-spark {
    0%, 100% { opacity: 0.25; transform: scale(0.85) rotate(0deg);  }
    50%      { opacity: 0.85; transform: scale(1.15) rotate(10deg); }
}

/* Header */
.rcta-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.rcta-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f5b300 60%, #d97706 100%);
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(245, 179, 0, 0.55);
    animation: rcta-bounce 2.4s ease-in-out infinite;
}
.rcta-icon svg { width: 24px; height: 24px; }
@keyframes rcta-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-3px) rotate(-6deg); }
}
.rcta-text h3 {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.rcta-text p {
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0;
}

/* Buttons grid */
.rcta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}
.rcta-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none !important;
    color: var(--text);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}
.rcta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.08) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.rcta-btn:hover {
    transform: translateY(-3px);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 18px 40px -14px rgba(0,0,0,0.25);
}
.rcta-btn:hover::before { opacity: 1; }
.rcta-btn:hover .rcta-arrow svg { transform: translate(3px, -3px); }

/* BestChange — green */
.rcta-bc:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}
.rcta-bc .rcta-logo {
    background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.06) 100%);
    color: #16a34a;
    border-color: rgba(34,197,94,0.35);
}
.rcta-bc:hover .rcta-logo {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
.rcta-bc:hover .rcta-sub { color: rgba(255,255,255,0.85); }

/* Obmify — blue */
.rcta-ob:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}
.rcta-ob .rcta-logo {
    background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(59,130,246,0.06) 100%);
    color: var(--accent);
    border-color: rgba(59,130,246,0.35);
}
.rcta-ob:hover .rcta-logo {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
.rcta-ob:hover .rcta-sub { color: rgba(255,255,255,0.85); }

.rcta-logo {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid;
    transition: all 0.25s ease;
}
.rcta-logo svg { width: 22px; height: 22px; }

.rcta-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rcta-title {
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.rcta-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    transition: color 0.2s ease;
}
.rcta-arrow {
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.25s ease;
}
.rcta-arrow svg {
    width: 18px; height: 18px;
    transition: transform 0.3s ease;
}
.rcta-btn:hover .rcta-arrow { opacity: 1; }

/* Foot bonus row */
.rcta-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--success-soft) 0%, rgba(245,179,0,0.10) 100%);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.45;
    position: relative;
    z-index: 1;
}
.rcta-gift {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    animation: rcta-bounce 2s ease-in-out infinite;
}

/* Mobile */
@media (max-width: 640px) {
    .review-cta { padding: 18px 16px 14px; }
    .rcta-head { gap: 12px; }
    .rcta-icon { width: 42px; height: 42px; }
    .rcta-icon svg { width: 22px; height: 22px; }
    .rcta-spark.s3 { display: none; }
    .rcta-btn { padding: 12px 14px; gap: 12px; }
    .rcta-logo { width: 38px; height: 38px; }
    .rcta-title { font-size: 0.88rem; }
    .rcta-sub { font-size: 0.72rem; }
}

/* Compact send→receive line — replaces the bulky .od-pair block,
   since hero already has the prominent mini-flow with amounts */
.od-pair-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px dashed var(--border);
    background: var(--bg-soft);
    font-size: 0.9rem;
}
.od-pair-compact-side {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 600;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}
.od-pair-compact-side .od-ccy-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.od-pair-compact-arrow {
    color: var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
}

/* Compact rows — tighter padding/icons (was 10×12 / 26×26) */
.od-rows { padding: 8px 8px 10px; }
.od-row {
    grid-template-columns: minmax(120px, 1fr) 2fr;
    gap: 10px;
    padding: 7px 10px;
}
.od-key { font-size: 0.82rem; gap: 7px; }
.od-key-ico {
    width: 22px; height: 22px;
    border-radius: 7px;
}
.od-key-ico svg { width: 12px; height: 12px; }
.od-val { font-size: 0.88rem; }
.od-val-mono {
    font-size: 0.74rem;
    padding: 5px 8px;
}
/* Long transaction hashes — break safely + cap visible width */
.od-row-hash .od-val-mono {
    word-break: break-all;
    max-width: 100%;
    line-height: 1.4;
}

/* ====================================================================
   ORDER DETAILS — user requisites as proper card grid
   (card number, email, FIO, messenger contact, IBAN, etc.)
   ==================================================================== */
.od-reqs-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 12px;
    border-top: 1px dashed var(--border);
    margin-top: 4px;
}
.od-reqs-h-bar {
    width: 3px;
    height: 18px;
    background: linear-gradient(180deg, var(--accent), var(--success));
    border-radius: 2px;
    flex-shrink: 0;
}
.od-reqs-h-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    flex: 1;
    min-width: 0;
}
.od-reqs-h-count {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    line-height: 1;
    min-width: 22px;
    text-align: center;
    font-feature-settings: 'tnum';
}
.od-reqs-h svg {
    flex-shrink: 0;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px;
    max-height: 16px;
    display: inline-block;
}

.od-reqs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    padding: 0 14px 16px;
}
.od-req {
    background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}
.od-req::before {
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    background: linear-gradient(180deg, var(--accent), transparent);
    border-radius: 0 3px 3px 0;
    opacity: 0.4;
    transition: opacity 0.18s ease;
}
.od-req:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(59, 130, 246, 0.45);
}
.od-req:hover::before { opacity: 1; }
.od-req-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.od-req-ico {
    width: 26px; height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--accent-soft);
    border: 1px solid rgba(59, 130, 246, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.od-req-ico { overflow: hidden; }
.od-req-ico svg,
.od-reqs .od-req svg,
.od-reqs svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px;
    max-height: 14px;
    flex-shrink: 0;
    display: block;
}
.od-req-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.od-req-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
    /* no left indent — read naturally as a clean stack */
}
.od-req-value a {
    color: var(--accent);
    text-decoration: none;
    word-break: break-all;
    overflow-wrap: anywhere;
}
.od-req-value a:hover { text-decoration: underline; }
.od-req-value-mono {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 7px 10px;
    word-break: break-all;
    letter-spacing: -0.01em;
    color: var(--text);
    align-self: flex-start;
    max-width: 100%;
}

/* Long, single-token labels (e.g. "Контакт для связи в мессенджерах: Telegram, Viber, WhatsApp")
   should wrap instead of being truncated with ellipsis */
.od-req-label { white-space: normal; }

/* Copy-to-clipboard button on requisite cards */
.od-req-copy {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.od-req:hover .od-req-copy,
.od-req-copy:focus-visible { opacity: 1; }
.od-req-copy:hover {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: rgba(59, 130, 246, 0.35);
}
.od-req-copy.copied {
    color: var(--success);
    background: var(--success-soft);
    border-color: rgba(34, 197, 94, 0.35);
    opacity: 1;
}
.od-req-copy.copied svg:first-of-type { display: none; }
.od-req-copy.copied .od-req-copy-ok { display: block !important; }
.od-req-copy svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px;
    max-height: 14px;
    pointer-events: none;
}

@media (max-width: 480px) {
    .od-reqs { grid-template-columns: 1fr; padding: 0 12px 14px; gap: 8px; }
    .od-reqs-h { padding: 14px 14px 8px; }
    .od-req { padding: 10px 12px 12px 14px; }
    .od-req-copy { opacity: 1; }
}

/* ====================================================================
   PREMIUM "ADDITIONAL SERVICES" PERKS — gold accents, 3D-feel icons
   (express/receipt/single/third-party/support etc.)
   ==================================================================== */
.od-perks {
    margin: 0 14px 16px;
    padding: 16px 18px 14px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(900px 220px at 0% 0%,   rgba(245, 179, 0, 0.10), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(217, 119, 6, 0.06), transparent 60%),
        var(--bg-elev);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -22px rgba(245, 179, 0, 0.25);
}
.od-perks::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #fbbf24 0%, #f5b300 50%, #d97706 100%);
}

.od-perks-h {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}
.od-perks-h-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f5b300 55%, #d97706 100%);
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(245, 179, 0, 0.55);
}
.od-perks-h-icon svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px;
    max-height: 18px;
}
.od-perks-h-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.od-perks-h-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.od-perks-h-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.3;
}
.od-perks-h-count {
    flex-shrink: 0;
    background: linear-gradient(135deg, #fbbf24 0%, #f5b300 100%);
    color: #1a2238;
    font-weight: 800;
    font-size: 0.74rem;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    line-height: 1;
    min-width: 26px;
    text-align: center;
    box-shadow: 0 4px 12px -6px rgba(245, 179, 0, 0.55);
    font-feature-settings: 'tnum';
}

.od-perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.od-perk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    position: relative;
    min-width: 0;
}
.od-perk:hover {
    border-color: rgba(245, 179, 0, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -12px rgba(245, 179, 0, 0.45);
    background: var(--bg-elev);
}
.od-perk-ico {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f5b300 50%, #d97706 100%);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(245, 179, 0, 0.55), 0 1px 0 rgba(255,255,255,0.2) inset;
    overflow: hidden;
}
.od-perk-ico svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
    display: block;
}
.od-perk-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.od-perk-name {
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.od-perk-fee {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.od-perk-check {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.3);
    overflow: hidden;
}
.od-perk-check svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px;
    max-height: 14px;
}

@media (max-width: 480px) {
    .od-perks { margin: 0 12px 14px; padding: 14px 14px 12px; }
    .od-perks-grid { grid-template-columns: 1fr; gap: 8px; }
    .od-perk { padding: 10px 12px; gap: 10px; }
    .od-perk-ico { width: 38px; height: 38px; border-radius: 10px; }
    .od-perks-h-title { font-size: 0.9rem; }
    .od-perks-h-sub { font-size: 0.74rem; }
}

/* ====================================================================
   EXCHANGE — direction-aware processing time notice (animated)
   ==================================================================== */
.ex-eta {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    margin: 0 0 14px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(800px 200px at 0% 0%,   rgba(59, 130, 246, 0.10), transparent 60%),
        radial-gradient(800px 200px at 100% 100%, rgba(34, 197, 94, 0.06), transparent 60%),
        var(--bg-elev);
    border: 1px solid var(--border);
    overflow: hidden;
    animation: ex-eta-in 0.5s ease backwards;
}
.ex-eta::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--success) 100%);
}
.ex-eta-paypal::before {
    background: linear-gradient(180deg, var(--warning, #f59e0b) 0%, var(--accent) 100%);
}
.ex-rate-lock::before {
    background: linear-gradient(180deg, var(--success) 0%, #14b8a6 100%);
}
/* Confirmations variant — amber theme to distinguish from the blue ETA card */
.ex-eta-conf::before {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}
.ex-eta-conf {
    background:
        radial-gradient(800px 200px at 0% 0%,   rgba(245, 158, 11, 0.10), transparent 60%),
        radial-gradient(800px 200px at 100% 100%, rgba(59, 130, 246, 0.05), transparent 60%),
        var(--bg-elev);
}
.ex-eta-conf .ex-eta-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);
    box-shadow: 0 8px 20px -8px rgba(245, 158, 11, 0.55);
}
.ex-eta-conf .ex-eta-icon svg { animation: ex-rate-lock-wiggle 4s ease-in-out infinite; }
.ex-eta-conf .ex-eta-pulse { border-color: rgba(245, 158, 11, 0.45); }
.ex-eta-conf .ex-eta-badge {
    background: rgba(245, 158, 11, 0.14);
    color: var(--warning-text, #92400e);
    border-color: rgba(245, 158, 11, 0.3);
}
.ex-eta-conf .ex-eta-dot {
    background: var(--warning, #f59e0b);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.ex-eta-conf .ex-eta-main strong { color: var(--warning-text, #92400e); }

[data-theme="dark"] .ex-eta-conf {
    background:
        radial-gradient(800px 200px at 0% 0%,   rgba(245, 158, 11, 0.16), transparent 60%),
        radial-gradient(800px 200px at 100% 100%, rgba(96, 165, 250, 0.07), transparent 60%),
        var(--bg-elev);
}
[data-theme="dark"] .ex-eta-conf .ex-eta-main strong { color: #fcd34d; }
.ex-rate-lock {
    background:
        radial-gradient(800px 200px at 0% 0%,   rgba(34, 197, 94, 0.10), transparent 60%),
        radial-gradient(800px 200px at 100% 100%, rgba(20, 184, 166, 0.06), transparent 60%),
        var(--bg-elev);
}
.ex-rate-lock .ex-eta-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 60%, #15803d 100%);
    box-shadow: 0 8px 20px -8px rgba(34, 197, 94, 0.55);
}
.ex-rate-lock .ex-eta-icon svg {
    /* lock icon — gentle close/open wiggle */
    animation: ex-rate-lock-wiggle 4s ease-in-out infinite;
}
@keyframes ex-rate-lock-wiggle {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.ex-rate-lock .ex-eta-pulse { border-color: rgba(34, 197, 94, 0.45); }
.ex-rate-lock .ex-eta-badge {
    background: var(--success-soft);
    color: var(--success-text);
    border-color: rgba(34, 197, 94, 0.3);
}
.ex-rate-lock .ex-eta-dot {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.ex-rate-lock .ex-eta-main strong { color: var(--success-text); }
@keyframes ex-eta-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ex-eta-icon {
    flex-shrink: 0;
    position: relative;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.55);
    overflow: visible;
}
.ex-eta-paypal .ex-eta-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);
    box-shadow: 0 8px 20px -8px rgba(245, 158, 11, 0.55);
}
.ex-eta-icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
    display: block;
    animation: ex-eta-tick 4s linear infinite;
    transform-origin: 50% 50%;
}
.ex-eta-paypal .ex-eta-icon svg { animation: ex-eta-wobble 4s ease-in-out infinite; }
@keyframes ex-eta-tick {
    0%, 100% { transform: rotate(0); }
    50%      { transform: rotate(360deg); }
}
@keyframes ex-eta-wobble {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}

.ex-eta-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    border: 2px solid rgba(59, 130, 246, 0.45);
    animation: ex-eta-pulse 2.2s ease-out infinite;
    pointer-events: none;
}
.ex-eta-pulse-2 { animation-delay: 1.1s; }
.ex-eta-paypal .ex-eta-pulse { border-color: rgba(245, 158, 11, 0.45); }
@keyframes ex-eta-pulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    100% { transform: scale(1.45); opacity: 0;   }
}

.ex-eta-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 1px;
}
.ex-eta-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    background: var(--accent-soft);
    color: var(--accent-text);
    border: 1px solid rgba(59, 130, 246, 0.25);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1;
}
.ex-eta-paypal .ex-eta-badge {
    background: rgba(245, 158, 11, 0.14);
    color: var(--warning-text, #92400e);
    border-color: rgba(245, 158, 11, 0.3);
}
.ex-eta-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    animation: ex-eta-blink 1.6s ease-in-out infinite;
}
.ex-eta-paypal .ex-eta-dot {
    background: var(--warning, #f59e0b);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
@keyframes ex-eta-blink {
    0%, 100% { opacity: 1;    transform: scale(1);   }
    50%      { opacity: 0.55; transform: scale(0.8); }
}

.ex-eta-main {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin-top: 4px;
}
.ex-eta-main strong { color: var(--accent-text); font-weight: 800; }
.ex-eta-paypal .ex-eta-main strong { color: var(--warning-text, #92400e); }
.ex-eta-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.ex-eta-note strong { color: var(--text-soft); font-weight: 700; }

/* Subtle shimmer sweep across the card every 6 seconds */
.ex-eta-shimmer {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%);
    pointer-events: none;
    animation: ex-eta-shimmer 6s ease-in-out infinite;
}
@keyframes ex-eta-shimmer {
    0%       { transform: translateX(0);   }
    25%      { transform: translateX(300%);}
    25.01%   { transform: translateX(-100%); }
    100%     { transform: translateX(-100%); }
}

@media (max-width: 480px) {
    .ex-eta { padding: 12px 14px; gap: 12px; }
    .ex-eta-icon { width: 38px; height: 38px; border-radius: 11px; }
    .ex-eta-icon svg { width: 18px !important; height: 18px !important; }
    .ex-eta-main { font-size: 0.88rem; }
    .ex-eta-note { font-size: 0.78rem; }
}

/* ====================================================================
   IBAN MINI-NOTICE — compact one-line pill for IBAN validation
   (block / warn variants). Sits right under the IBAN input.
   ==================================================================== */
.iban-mini-notice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    max-width: 100%;
}
.iban-mini-notice b { font-weight: 800; }
.iban-mini-ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}
.iban-mini-ico svg {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px;
    max-height: 12px;
}
.iban-mini-notice-block {
    background: rgba(239, 68, 68, 0.10);
    color: var(--danger-text, #991b1b);
    border: 1px solid rgba(239, 68, 68, 0.28);
}
.iban-mini-notice-block .iban-mini-ico {
    background: var(--danger, #ef4444);
    color: #fff;
}
.iban-mini-notice-warn {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning-text, #92400e);
    border: 1px solid rgba(245, 158, 11, 0.30);
}
.iban-mini-notice-warn .iban-mini-ico {
    background: var(--warning, #f59e0b);
    color: #fff;
}

[data-theme="dark"] .iban-mini-notice-block {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}
[data-theme="dark"] .iban-mini-notice-warn {
    background: rgba(245, 158, 11, 0.20);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
}

/* ====================================================================
   E-MAIL FIELD HINT — explains why e-mail must be correct,
   shown right under the input
   ==================================================================== */
.ex-email-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text-soft);
    line-height: 1.45;
}
.ex-email-hint-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev);
    color: var(--accent);
    border: 1px solid rgba(59, 130, 246, 0.25);
    margin-top: 1px;
    overflow: hidden;
}
.ex-email-hint-icon svg { width: 14px !important; height: 14px !important; }
.ex-email-hint-body { flex: 1; min-width: 0; }
.ex-email-hint-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1.3;
}
.ex-email-hint-list {
    margin: 0;
    padding-left: 14px;
    list-style: disc;
}
.ex-email-hint-list li {
    margin-bottom: 3px;
    line-height: 1.45;
}
.ex-email-hint-list li:last-child { margin-bottom: 0; }
.ex-email-hint-list strong { color: var(--text); font-weight: 700; }

[data-theme="dark"] .ex-email-hint {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.3);
}
[data-theme="dark"] .ex-email-hint-icon {
    background: var(--bg);
    border-color: rgba(96, 165, 250, 0.4);
    color: #93c5fd;
}

@media (max-width: 575.98px) {
    .ex-email-hint { padding: 9px 11px; gap: 8px; font-size: 0.78rem; }
    .ex-email-hint-icon { width: 20px; height: 20px; }
    .ex-email-hint-icon svg { width: 12px !important; height: 12px !important; }
    .ex-email-hint-title { font-size: 0.74rem; }
}

/* ====================================================================
   VERIFICATION-REQUIRED NOTICE — premium card replacing the bootstrap
   alert for "Direction available only for verified users"
   ==================================================================== */
.ex-verify {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(900px 220px at 0% 0%, rgba(245, 158, 11, 0.10), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(96, 165, 250, 0.06), transparent 60%),
        var(--bg-elev);
    border: 1px solid var(--border);
    overflow: hidden;
    animation: ex-eta-in 0.5s ease backwards;
}
.ex-verify::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--warning, #f59e0b) 0%, var(--accent) 100%);
}

.ex-verify-icon {
    flex-shrink: 0;
    position: relative;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(245, 158, 11, 0.55);
    overflow: visible;
}
.ex-verify-icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px;
    max-height: 22px;
    display: block;
    animation: ex-rate-lock-wiggle 4s ease-in-out infinite;
}
.ex-verify-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    border: 2px solid rgba(245, 158, 11, 0.45);
    animation: ex-eta-pulse 2.2s ease-out infinite;
    pointer-events: none;
}
.ex-verify-pulse-2 { animation-delay: 1.1s; }

.ex-verify-body { flex: 1; min-width: 0; padding-top: 1px; }
.ex-verify-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ex-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-text, #92400e);
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    line-height: 1;
}
.ex-verify-badge svg { color: var(--warning, #f59e0b); flex-shrink: 0; }
.ex-verify-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.ex-verify-desc {
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.5;
    margin-bottom: 10px;
}

.ex-verify-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: var(--radius);
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -10px rgba(245, 158, 11, 0.55), 0 1px 0 rgba(255,255,255,0.15) inset;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ex-verify-cta:hover {
    transform: translateY(-1px);
    color: #fff !important;
    box-shadow: 0 12px 26px -10px rgba(245, 158, 11, 0.65), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.ex-verify-cta svg { width: 14px !important; height: 14px !important; }

.ex-verify-shimmer {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%);
    pointer-events: none;
    animation: ex-eta-shimmer 6s ease-in-out infinite;
}

[data-theme="dark"] .ex-verify {
    background:
        radial-gradient(900px 220px at 0% 0%, rgba(245, 158, 11, 0.14), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(96, 165, 250, 0.07), transparent 60%),
        var(--bg-elev);
}
[data-theme="dark"] .ex-verify-badge {
    background: rgba(245, 158, 11, 0.22);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
}

@media (max-width: 575.98px) {
    .ex-verify { padding: 12px 14px; gap: 12px; }
    .ex-verify-icon { width: 38px; height: 38px; border-radius: 11px; }
    .ex-verify-icon svg { width: 18px !important; height: 18px !important; }
    .ex-verify-title { font-size: 0.92rem; }
    .ex-verify-desc { font-size: 0.82rem; }
    .ex-verify-cta { width: 100%; justify-content: center; }
}

/* ====================================================================
   AML-RISK WARNING — under ETA when paying with crypto, lists
   services that auto-trigger AML flags on receipt
   ==================================================================== */
.ex-aml-warn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(900px 220px at 0% 0%, rgba(239, 68, 68, 0.10), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(245, 158, 11, 0.06), transparent 60%),
        var(--bg-elev);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.ex-aml-warn::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--danger) 0%, var(--warning, #f59e0b) 100%);
}

.ex-aml-warn-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #b91c1c 100%);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(239, 68, 68, 0.55);
    overflow: hidden;
    animation: ex-aml-warn-pulse 2.4s ease-in-out infinite;
}
.ex-aml-warn-icon svg { width: 20px !important; height: 20px !important; max-width: 20px; max-height: 20px; }
@keyframes ex-aml-warn-pulse {
    0%, 100% { box-shadow: 0 8px 20px -8px rgba(239, 68, 68, 0.55); }
    50%      { box-shadow: 0 10px 24px -6px rgba(239, 68, 68, 0.7); }
}

.ex-aml-warn-body { flex: 1; min-width: 0; }
.ex-aml-warn-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ex-aml-warn-badge {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger-text, #991b1b);
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    line-height: 1;
}
.ex-aml-warn-title {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.ex-aml-warn-desc {
    font-size: 0.86rem;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0 0 10px;
}
.ex-aml-warn-desc strong { color: var(--text); font-weight: 700; }

.ex-aml-warn-services {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
.ex-aml-warn-svc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.ex-aml-warn-svc:hover {
    background: rgba(239, 68, 68, 0.13);
    border-color: rgba(239, 68, 68, 0.4);
}
.ex-aml-warn-svc svg {
    color: var(--danger);
    flex-shrink: 0;
    width: 10px !important;
    height: 10px !important;
}
.ex-aml-warn-svc-name { font-weight: 700; }
.ex-aml-warn-svc-tag {
    font-size: 0.66rem;
    color: var(--text-muted);
    font-weight: 500;
    /* Visible bullet separator between name and tag */
    display: inline-flex;
    align-items: center;
}
.ex-aml-warn-svc-tag::before {
    content: '·';
    color: var(--danger);
    font-weight: 800;
    opacity: 0.55;
    margin-right: 5px;
    font-size: 0.85rem;
    line-height: 0;
}

.ex-aml-warn-tip {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 8px 11px;
    background: var(--success-soft);
    border-left: 2px solid var(--success);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--success-text);
    line-height: 1.45;
}
.ex-aml-warn-tip svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }

[data-theme="dark"] .ex-aml-warn {
    background:
        radial-gradient(900px 220px at 0% 0%, rgba(239, 68, 68, 0.16), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(245, 158, 11, 0.08), transparent 60%),
        var(--bg-elev);
}
[data-theme="dark"] .ex-aml-warn-badge {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}
[data-theme="dark"] .ex-aml-warn-svc {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
}
[data-theme="dark"] .ex-aml-warn-tip {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

@media (max-width: 575.98px) {
    .ex-aml-warn { padding: 12px 14px; gap: 10px; }
    .ex-aml-warn-icon { width: 34px; height: 34px; }
    .ex-aml-warn-icon svg { width: 17px !important; height: 17px !important; }
    .ex-aml-warn-title { font-size: 0.92rem; }
    .ex-aml-warn-desc { font-size: 0.82rem; }
    .ex-aml-warn-svc { font-size: 0.74rem; padding: 4px 9px 4px 7px; }
    .ex-aml-warn-svc-tag { font-size: 0.64rem; }
    .ex-aml-warn-tip { font-size: 0.78rem; }
}

/* ====================================================================
   EXCHANGE FORM — additional services as business cards + live summary
   ==================================================================== */
.ex-perks {
    margin: 14px 0 12px;
    padding: 14px 16px 12px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(900px 220px at 0% 0%,   rgba(245, 179, 0, 0.08), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(217, 119, 6, 0.05), transparent 60%),
        var(--bg-elev);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.ex-perks::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #fbbf24, #d97706);
}
.ex-perks-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border);
}
.ex-perks-h-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f5b300 55%, #d97706 100%);
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(245, 179, 0, 0.55);
    overflow: hidden;
}
.ex-perks-h-icon svg { width: 15px !important; height: 15px !important; max-width: 15px; max-height: 15px; }
.ex-perks-h-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ex-perks-h-title { font-size: 0.9rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; line-height: 1.25; }
.ex-perks-h-sub   { font-size: 0.74rem; color: var(--text-muted); line-height: 1.3; }

.ex-perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.ex-perk {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    margin: 0;
    position: relative;
    min-width: 0;
}
.ex-perk:hover {
    border-color: rgba(245, 179, 0, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px rgba(245, 179, 0, 0.4);
    background: var(--bg-elev);
}
.ex-perk-input { position: absolute; opacity: 0; pointer-events: none; }
.ex-perk-ico {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}
.ex-perk-ico svg { width: 15px !important; height: 15px !important; max-width: 15px; max-height: 15px; }
.ex-perk-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    line-height: 1.2;
}
.ex-perk-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ex-perk-fee {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
    /* commission renders inline under the name — no pill, no border */
    background: transparent;
    border: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.18s ease;
}
.ex-perk-check {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev);
    border: 1.5px solid var(--border);
    color: transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}
.ex-perk-check svg { width: 11px !important; height: 11px !important; }

/* Checked state — premium gold */
.ex-perk:has(.ex-perk-input:checked) {
    background: linear-gradient(135deg, rgba(245, 179, 0, 0.10), rgba(217, 119, 6, 0.05));
    border-color: rgba(245, 179, 0, 0.6);
    box-shadow: 0 6px 22px -10px rgba(245, 179, 0, 0.45);
}
.ex-perk:has(.ex-perk-input:checked) .ex-perk-ico {
    background: linear-gradient(135deg, #fbbf24 0%, #f5b300 55%, #d97706 100%);
    border-color: transparent;
    color: #fff;
}
.ex-perk:has(.ex-perk-input:checked) .ex-perk-fee {
    color: #92400e;
    font-weight: 700;
}
[data-theme="dark"] .ex-perk:has(.ex-perk-input:checked) .ex-perk-fee {
    color: #fcd34d;
}
.ex-perk:has(.ex-perk-input:checked) .ex-perk-check {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    border-color: transparent;
    color: #fff;
}

/* Live summary panel */
.ex-summary {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ex-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.86rem;
    color: var(--text-muted);
}
.ex-summary-value {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    text-align: right;
    font-feature-settings: 'tnum';
}
.ex-summary-fee { color: var(--warning-text); }
.ex-summary-total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 0.95rem;
}
.ex-summary-total .ex-summary-label {
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}
.ex-summary-total .ex-summary-value {
    font-size: 1.1rem;
    color: var(--success);
    font-weight: 800;
}

@media (max-width: 575.98px) {
    .ex-perks { padding: 12px 12px 10px; margin: 12px 0 10px; }
    .ex-perks-grid { grid-template-columns: 1fr; gap: 6px; }
    .ex-perk { padding: 8px 10px; gap: 9px; }
    .ex-perk-ico { width: 28px; height: 28px; border-radius: 7px; }
    .ex-perk-ico svg { width: 14px !important; height: 14px !important; }
    .ex-perk-name { font-size: 0.86rem; }
    .ex-perk-fee { font-size: 0.74rem; }
    .ex-perk-check { width: 22px; height: 22px; }
    .ex-summary-row { font-size: 0.82rem; }
    .ex-summary-total .ex-summary-value { font-size: 1rem; }
}

/* Dark-theme tweaks for ex-perk cards (gold accents stay readable) */
[data-theme="dark"] .ex-perk { background: var(--bg-soft); }
[data-theme="dark"] .ex-perk:hover { background: var(--bg-hover); }
[data-theme="dark"] .ex-perk:has(.ex-perk-input:checked) {
    background: linear-gradient(135deg, rgba(245, 179, 0, 0.18), rgba(217, 119, 6, 0.08));
}
[data-theme="dark"] .ex-perks {
    background:
        radial-gradient(900px 220px at 0% 0%, rgba(245, 179, 0, 0.10), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(217, 119, 6, 0.06), transparent 60%),
        var(--bg-elev);
}

/* ====================================================================
   AML CHECK — pre-payment notice + radio choice + confirm checkboxes
   ==================================================================== */
.aml-check {
    margin: 18px 0 12px;
    padding: 18px 20px 16px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(900px 220px at 0% 0%, rgba(245, 179, 0, 0.08), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(59, 130, 246, 0.05), transparent 60%),
        var(--bg-elev);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.aml-check::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--warning, #f59e0b) 0%, var(--accent) 100%);
}

.aml-check-h {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.aml-check-h-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%);
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(245, 158, 11, 0.55);
    overflow: hidden;
}
.aml-check-h-icon svg { width: 18px !important; height: 18px !important; }
.aml-check-h-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.aml-check-h-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning-text, #92400e);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    line-height: 1;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.aml-check-h-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.aml-check-desc {
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 0 0 14px;
}

.aml-check-how {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    margin: 0 0 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.aml-check-steps {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aml-check-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.5;
    background: var(--bg-soft);
    padding: 10px 12px;
    border-radius: var(--radius);
}
.aml-check-steps li strong { color: var(--text); font-weight: 700; }
.aml-step-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 1px;
    box-shadow: 0 4px 10px -4px rgba(59, 130, 246, 0.5);
}

.aml-check-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: var(--radius);
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 10px;
    box-shadow: 0 8px 22px -10px rgba(22, 163, 74, 0.55), 0 1px 0 rgba(255,255,255,0.15) inset;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.aml-check-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(22, 163, 74, 0.65), 0 1px 0 rgba(255,255,255,0.18) inset;
    color: #fff !important;
}
.aml-cta-icon, .aml-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aml-cta-icon svg, .aml-cta-arrow svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px;
    max-height: 16px;
}
.aml-cta-arrow svg { width: 14px !important; height: 14px !important; }

.aml-check-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0 0 14px;
    padding: 8px 11px;
    background: var(--bg-soft);
    border-radius: var(--radius);
    border-left: 2px solid var(--accent);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.aml-check-note svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }

.aml-check-choose {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    margin: 0 0 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.aml-radio-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
.aml-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    margin: 0;
    position: relative;
    min-width: 0;
}
.aml-radio:hover {
    transform: translateY(-1px);
}
.aml-radio-input { position: absolute; opacity: 0; pointer-events: none; }
.aml-radio-mark {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev);
    border: 1.5px solid var(--border);
    color: transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}
.aml-radio-mark svg { width: 14px !important; height: 14px !important; }
.aml-radio-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aml-radio-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.aml-radio-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.aml-radio:has(.aml-radio-input:checked) {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.10), rgba(22, 163, 74, 0.04));
    border-color: rgba(22, 163, 74, 0.5);
    box-shadow: 0 6px 22px -10px rgba(22, 163, 74, 0.35);
}
.aml-radio-done:has(.aml-radio-input:checked) .aml-radio-mark {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    border-color: transparent;
    color: #fff;
}
.aml-radio-skip:has(.aml-radio-input:checked) {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(217, 119, 6, 0.04));
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 6px 22px -10px rgba(245, 158, 11, 0.4);
}
.aml-radio-skip:has(.aml-radio-input:checked) .aml-radio-mark {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    border-color: transparent;
    color: #fff;
}

/* Premium confirm checkboxes (agreement, RF, no-save) */
.aml-confirms {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 6px;
}
.aml-confirm {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    margin: 0;
}
.aml-confirm:hover { border-color: var(--accent); }
.aml-confirm-input { position: absolute; opacity: 0; pointer-events: none; }
.aml-confirm-mark {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev);
    border: 1.5px solid var(--border-strong, var(--border));
    color: transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    margin-top: 1px;
    overflow: hidden;
}
.aml-confirm-mark svg { width: 12px !important; height: 12px !important; }
.aml-confirm-text {
    flex: 1;
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.5;
    word-break: break-word;
}
.aml-confirm-text a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.aml-confirm-text a:hover { text-decoration: underline; }

.aml-confirm:has(.aml-confirm-input:checked) {
    background: var(--accent-soft);
    border-color: rgba(59, 130, 246, 0.4);
}
.aml-confirm:has(.aml-confirm-input:checked) .aml-confirm-mark {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-color: transparent;
    color: #fff;
}

@media (max-width: 480px) {
    .aml-check { padding: 14px 16px 12px; }
    .aml-check-h-title { font-size: 0.95rem; }
    .aml-check-cta { width: 100%; justify-content: center; }
    .aml-check-cta .aml-cta-arrow { margin-left: auto; }
    .aml-radio-pair { grid-template-columns: 1fr; }
    .aml-radio { padding: 10px 12px; }
    .aml-confirm { padding: 10px 12px; }
}

/* ====================================================================
   FORM VALIDATION — visual marker for first invalid field + toast
   ==================================================================== */
.is-invalid-marked {
    border-color: var(--danger) !important;
    box-shadow:
        0 0 0 4px rgba(239, 68, 68, 0.22),
        0 12px 28px -10px rgba(239, 68, 68, 0.55) !important;
    animation: invalid-shake 0.45s ease-in-out, invalid-pulse 1.6s ease-in-out 0.45s 3;
    scroll-margin-top: 100px;
    scroll-margin-bottom: 100px;
    position: relative;
    z-index: 2;
}
.aml-radio.is-invalid-marked,
.aml-confirm.is-invalid-marked,
.ex-perk.is-invalid-marked {
    background: rgba(239, 68, 68, 0.08) !important;
}
.aml-confirm.is-invalid-marked .aml-confirm-mark,
.aml-radio.is-invalid-marked .aml-radio-mark,
.ex-perk.is-invalid-marked .ex-perk-check {
    border-color: var(--danger) !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: var(--danger) !important;
}
@keyframes invalid-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
@keyframes invalid-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22), 0 12px 28px -10px rgba(239, 68, 68, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.10), 0 14px 32px -10px rgba(239, 68, 68, 0.45); }
}

/* Floating toast at the bottom of the screen */
.form-validation-toast {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(20px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 16px 36px -10px rgba(239, 68, 68, 0.55), 0 0 0 1px rgba(255,255,255,0.08) inset;
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    text-align: center;
}
.form-validation-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.form-validation-toast svg { color: #fff; flex-shrink: 0; width: 16px !important; height: 16px !important; }
@media (max-width: 480px) {
    .form-validation-toast {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        font-size: 0.85rem;
        padding: 10px 16px;
    }
}

/* Picker scroll cap so the currency list stays compact (was inline 420px,
   removed during mobile pass — needs to be back as base behaviour) */
.picker-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 991.98px) { .picker-scroll { max-height: 380px; } }
@media (max-width: 575.98px) { .picker-scroll { max-height: 360px; } }
@media (max-width: 380px)    { .picker-scroll { max-height: 320px; } }

/* Picker rows — icons must not be clipped, ever.
   Force vertical-middle alignment, generous row padding, and pin the currency
   icon to a safe 24×24 square that comfortably fits the table cell. */
.picker-scroll .table > tbody > tr > td,
#directions-send tbody > tr > td,
#directions-receive tbody > tr > td {
    vertical-align: middle !important;
    overflow: visible !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
#directions-send .ccy,
#directions-receive .ccy,
.picker-scroll .ccy {
    overflow: visible !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important;
}
#directions-send .ccy img,
#directions-receive .ccy img,
.picker-scroll .ccy img,
#directions-send .ccy svg,
#directions-receive .ccy svg,
.picker-scroll .ccy svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ============================================================
   ============= MOBILE OPTIMIZATION (full pass) ===============
   IMPORTANT: do NOT add a global `svg { max-width: 100% }` —
   icon SVGs without explicit width/height attrs will explode
   to container width and break every icon-button on the page.
   Only article-body imagery gets safety rules.
   ============================================================ */

/* CMS image safety (scoped, not global SVG) */
img, video { max-width: 100%; height: auto; }

/* Container respects iPhone safe-area side insets */
@supports (padding: max(0px)) {
    .container {
        padding-left:  max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* Tablet & large phone */
@media (max-width: 991.98px) {
    .card { border-radius: 12px !important; }
    .hero { padding: 18px 16px !important; }
    .hero-kpis { gap: 8px !important; }
}

/* Phone */
@media (max-width: 767.98px) {
    .container { padding-left: 12px; padding-right: 12px; }
    @supports (padding: max(0px)) {
        .container {
            padding-left:  max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
        }
    }

    /* Touch targets ≥ 44px */
    .btn, .btn.btn-sm, .nav-link, .dropdown-item, .page-link,
    .ccy-cat, .cabinet-side a, .nt-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn { padding: 10px 18px; }
    .btn.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
    .ccy-cat { padding: 8px 14px; font-size: 0.84rem; }
    .dropdown-item { padding: 12px 14px; }
    .page-link { padding: 10px 14px; min-width: 44px; }
    .footer-col a { padding: 10px 0; min-height: 36px; display: inline-flex; align-items: center; }
    .btn-close { width: 36px; height: 36px; padding: 8px; }

    /* Inputs ≥ 16px to suppress iOS zoom on focus */
    .form-control, .form-select, textarea.form-control, input.form-control,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="tel"], input[type="number"], input[type="url"] {
        font-size: 16px !important;
        min-height: 44px;
    }
    .form-check-label { font-size: 0.95rem; }
    .input-group-text { font-size: 0.95rem; }

    /* Card / section padding shrinkage */
    .lp-card, .why-card, .review-card, .aff-card, .aml-banner, .promo,
    .pay-info, .top-card, .post-preview .body, .aff-calc, .aff-hero {
        padding: 16px !important;
    }

    .section-h h2 { font-size: 1.15rem; }
    .section-h .more { font-size: 0.84rem; }
    .promo, .aml-banner { padding: 16px !important; gap: 12px; }
    .promo-title { font-size: 1.1rem; }
    .promo-sub { font-size: 0.88rem; }
    .picker-card .ccy-cats { gap: 6px; padding: 0 0 10px; }
    .picker-card .card-heading-lg { font-size: 1.05rem; }
}

/* Small phone */
@media (max-width: 575.98px) {
    html, body { font-size: 14.5px; }
    .picker-scroll { max-height: 360px !important; }
    .ccy-cats { gap: 4px; }
    .ccy-cat { padding: 8px 12px; font-size: 0.82rem; }
    .top-card { padding: 14px !important; }
    .top-card .head { gap: 6px; }
    .top-card .rate { font-size: 0.95rem; }
    .top-card .meta-row { font-size: 0.78rem; gap: 6px; }
    .order-hero { padding: 16px 14px !important; }
    .order-hero h1 { font-size: 1.1rem; }
    .order-hero .desc { font-size: 0.82rem; line-height: 1.4; }
    .order-hero .big-icon { width: 48px; height: 48px; margin-bottom: 8px; }
    .order-hero .big-icon::after { width: 48px; height: 48px; }
    .order-hero .big-icon svg { width: 24px; height: 24px; }
    .order-hero .order-id { font-size: 0.75rem; padding: 4px 10px; }
    .od-head { padding: 14px 14px; }
    .od-head-text { font-size: 0.92rem; }
    .od-head-icon { width: 32px; height: 32px; border-radius: 9px; }
    .od-head-icon svg { width: 16px; height: 16px; }
    .od-rows { padding: 10px 8px 12px; }
    .review-card { padding: 14px !important; }
    .review-author { gap: 10px; }
    .review-avatar { width: 36px; height: 36px; font-size: 0.85rem; }
    .posts-grid { gap: 12px; }
    .post-preview .img-wrap { aspect-ratio: 16/10; }
    .post-title { font-size: 0.98rem; }
    .post-excerpt { font-size: 0.82rem; }
    footer { padding: 22px 0 32px !important; }
    .footer-col h4 { font-size: 0.82rem; }
    .footer-col a { font-size: 0.88rem; }
    .footer-bottom { font-size: 0.75rem; padding-top: 14px; }
    .modal-dialog { margin: 8px; }
    .modal-content { border-radius: 14px !important; }
    .modal-body { padding: 14px !important; }
    .modal-header { padding: 12px 14px !important; }
    .table > * > * { padding: 10px 10px !important; font-size: 0.88rem; }
    .pagination { gap: 4px; flex-wrap: wrap; justify-content: center; }
}

/* Tiny phone */
@media (max-width: 380px) {
    .container { padding-left: 10px; padding-right: 10px; }
    @supports (padding: max(0px)) {
        .container {
            padding-left:  max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right));
        }
    }
    .btn { padding: 10px 14px; font-size: 0.85rem; }
    .ccy-cat { padding: 7px 10px; font-size: 0.78rem; }
    .picker-scroll { max-height: 320px !important; }
    .order-hero h1 { font-size: 1.02rem; }
    .order-hero .big-icon { width: 44px; height: 44px; }
    .order-hero .big-icon::after { width: 44px; height: 44px; }
    .order-hero .big-icon svg { width: 22px; height: 22px; }
    .top-card .head { flex-wrap: wrap; }
    .nav-tools { gap: 4px !important; }
    .nt-btn { padding: 0 8px !important; }
    .footer-monitors-row img { height: 24px !important; }
    .lang-switcher .ls-current { padding: 6px 8px !important; }
}

/* Floating buttons: respect notch + don't stack on top of each other */
@media (max-width: 767.98px) {
    .float-chat, .float-operator, .binotel-button, [class*="binotel"] {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .float-chat { right: calc(14px + env(safe-area-inset-right, 0px)) !important; }
    /* On mobile, hide the operator-status widget completely — it overlaps
       page content and competes with the chat / Binotel buttons. The contact
       link is still reachable from the menu / footer. */
    .float-operator { display: none !important; }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* iOS tap highlight */
a, button, .btn, .ccy-cat, .top-card, .post-preview, tr, [role="button"] {
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.18);
}

/* Prevent body horizontal scroll completely */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Auto-detected Turkish bank name field — subtle green hint */
input.is-bank-autofilled {
    border-color: rgba(34, 197, 94, 0.45) !important;
    background-image: linear-gradient(135deg, rgba(34, 197, 94, 0.04), transparent 50%);
}

/* Smooth in-page anchor / programmatic scrolling */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Brief highlight pulse on the payment card after auto-scroll-to-pay */
.pay-flash {
    animation: pay-flash-anim 1.6s ease-out;
}
@keyframes pay-flash-anim {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
    50%  { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* ====================================================================
   DARK-THEME POLISH — refinements for all custom components
   (od-req cards, AML, ETA, perks, validation marks, toast, etc.)
   ==================================================================== */
[data-theme="dark"] .od-req,
[data-theme="dark"] .aml-radio,
[data-theme="dark"] .aml-confirm {
    background: var(--bg-soft);
}
[data-theme="dark"] .od-req:hover,
[data-theme="dark"] .aml-radio:hover,
[data-theme="dark"] .aml-confirm:hover {
    background: var(--bg-hover);
}
[data-theme="dark"] .od-req-value-mono {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="dark"] .od-req-copy {
    background: var(--bg);
    color: var(--text-muted);
}
[data-theme="dark"] .od-req-copy:hover {
    background: rgba(96, 165, 250, 0.18);
    color: var(--accent);
}

/* ETA + rate-lock cards in dark */
[data-theme="dark"] .ex-eta {
    background:
        radial-gradient(800px 200px at 0% 0%,   rgba(96, 165, 250, 0.12), transparent 60%),
        radial-gradient(800px 200px at 100% 100%, rgba(34, 197, 94, 0.07), transparent 60%),
        var(--bg-elev);
}
[data-theme="dark"] .ex-eta-paypal {
    background:
        radial-gradient(800px 200px at 0% 0%,   rgba(245, 158, 11, 0.14), transparent 60%),
        radial-gradient(800px 200px at 100% 100%, rgba(96, 165, 250, 0.07), transparent 60%),
        var(--bg-elev);
}
[data-theme="dark"] .ex-rate-lock {
    background:
        radial-gradient(800px 200px at 0% 0%,   rgba(34, 197, 94, 0.14), transparent 60%),
        radial-gradient(800px 200px at 100% 100%, rgba(20, 184, 166, 0.07), transparent 60%),
        var(--bg-elev);
}
[data-theme="dark"] .ex-eta-main strong { color: #93c5fd; }
[data-theme="dark"] .ex-eta-paypal .ex-eta-main strong { color: #fcd34d; }
[data-theme="dark"] .ex-rate-lock .ex-eta-main strong { color: #6ee7b7; }
[data-theme="dark"] .ex-eta-shimmer {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
}

/* AML check card in dark */
[data-theme="dark"] .aml-check {
    background:
        radial-gradient(900px 220px at 0% 0%, rgba(245, 158, 11, 0.12), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(96, 165, 250, 0.07), transparent 60%),
        var(--bg-elev);
}
[data-theme="dark"] .aml-check-h-badge {
    background: rgba(245, 158, 11, 0.22);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
}
[data-theme="dark"] .aml-check-note {
    background: var(--bg-soft);
    border-left-color: var(--accent);
}
[data-theme="dark"] .aml-check-steps li { background: var(--bg-soft); }
[data-theme="dark"] .aml-step-num { color: #fff; }

/* Premium perks (order page) in dark */
[data-theme="dark"] .od-perks {
    background:
        radial-gradient(900px 220px at 0% 0%,   rgba(245, 179, 0, 0.14), transparent 60%),
        radial-gradient(900px 220px at 100% 100%, rgba(217, 119, 6, 0.08), transparent 60%),
        var(--bg-elev);
}
[data-theme="dark"] .od-perk { background: var(--bg-soft); }
[data-theme="dark"] .od-perk:hover { background: var(--bg-hover); }
[data-theme="dark"] .od-perks-h-count { color: #1a2238; }

/* AML radios in dark */
[data-theme="dark"] .aml-radio:has(.aml-radio-input:checked) {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.08));
}
[data-theme="dark"] .aml-radio-skip:has(.aml-radio-input:checked) {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.08));
}
[data-theme="dark"] .aml-confirm:has(.aml-confirm-input:checked) {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.45);
}

/* Validation marker stays bright red on dark — already uses var(--danger) */
[data-theme="dark"] .is-invalid-marked {
    box-shadow:
        0 0 0 4px rgba(239, 68, 68, 0.30),
        0 12px 28px -10px rgba(239, 68, 68, 0.65) !important;
}
[data-theme="dark"] .form-validation-toast {
    box-shadow: 0 16px 36px -10px rgba(239, 68, 68, 0.65), 0 0 0 1px rgba(255,255,255,0.1) inset;
}

/* Live exchange summary in dark */
[data-theme="dark"] .ex-summary { background: var(--bg-soft); }
[data-theme="dark"] .ex-summary-fee { color: #fcd34d; }
[data-theme="dark"] .ex-summary-total .ex-summary-value { color: #6ee7b7; }

/* Mobile polish — extra cushion on small phones for premium blocks */
@media (max-width: 480px) {
    .od-perks { margin-left: 0; margin-right: 0; }
    .aml-check { padding: 12px 14px 10px; }
    .ex-eta { padding: 10px 12px; gap: 10px; }
    .ex-eta-icon { width: 36px; height: 36px; }
    .ex-eta-main { font-size: 0.86rem; }
    .ex-eta-note { font-size: 0.76rem; }
    .ex-summary { padding: 10px 12px; }
    .ex-summary-total .ex-summary-value { font-size: 0.95rem; }
}

/* ====================================================================
   HERO-EMBEDDED PAYMENT PANEL — frosted glass card with the entire
   merchant.php component inside, sits at the bottom of .order-hero
   when status === created. No more right-column.
   ==================================================================== */
.order-hero-pay {
    width: 100%;
    max-width: 760px;
    margin: 18px auto 0;
    text-align: left;
}
.order-hero-pay-inner {
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    border-radius: var(--radius-lg);
    padding: 18px 20px 16px;
    box-shadow:
        0 18px 48px -16px rgba(15, 23, 42, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
}

/* On tablet+ desktop the inner panel becomes a 2-column grid:
   Left column → amount + QR + deeplink (visual focus)
   Right column → address, detail/tag, txn-hash, toolbar (info + actions)
   Memo warning and cancel button span both columns. */
@media (min-width: 768px) {
    .order-hero-pay-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 20px;
        row-gap: 0;
        align-items: start;
    }
    .order-hero-pay-inner > .md-memo-alert,
    .order-hero-pay-inner > .md-info,
    .order-hero-pay-inner > .sticky-cta {
        grid-column: 1 / -1;
    }
    .order-hero-pay-inner > .md-amount,
    .order-hero-pay-inner > .md-qr-wrap,
    .order-hero-pay-inner > .md-deeplink {
        grid-column: 1;
    }
    .order-hero-pay-inner > .md-fields,
    .order-hero-pay-inner > .md-txn-disclose,
    .order-hero-pay-inner > .md-toolbar {
        grid-column: 2;
        align-self: start;
    }
    /* Slightly smaller QR in 2-col layout — leaves room for content */
    .order-hero-pay-inner .md-qr-wrap .qrcode { width: 180px; height: 180px; }
    .order-hero-pay-inner .md-qr-wrap .qrcode svg { max-width: 180px; max-height: 180px; }
    /* Cancel form — sit close after fields without huge gap */
    .order-hero-pay-inner > .sticky-cta { margin-top: 6px; }
}
[data-theme="dark"] .order-hero-pay-inner {
    background: rgba(29, 44, 68, 0.96);
    color: var(--text);
    box-shadow:
        0 18px 48px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

/* Cancel button inside the hero pay-panel — adapt to white background */
.order-hero-pay .btn-outline-dark {
    border-color: var(--border-strong, var(--border)) !important;
    color: var(--text) !important;
    background: transparent !important;
}
.order-hero-pay .btn-outline-dark:hover {
    background: var(--bg-soft) !important;
}

/* Standalone timer card embedded under the pay-panel */
.order-hero-pay-timer {
    margin: 12px auto 0;
    max-width: 540px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.25);
    text-align: left;
}
[data-theme="dark"] .order-hero-pay-timer {
    background: rgba(29, 44, 68, 0.92);
    color: var(--text);
}
.order-hero-pay-timer .text-dark { color: var(--text) !important; }

/* Make sure components inside the pay-panel use sane bg colors
   (they were designed for var(--bg-elev) cards — still works on white) */
.order-hero-pay-inner .md-info,
.order-hero-pay-inner .md-amount,
.order-hero-pay-inner .od-req {
    /* keep their own backgrounds — they look fine on white */
}
.order-hero-pay-inner .md-toolbar-btn { background: var(--bg-soft); }

@media (max-width: 991.98px) {
    .order-hero-pay { max-width: 100%; }
    .order-hero-pay-inner { padding: 14px 14px 12px; }
}
@media (max-width: 480px) {
    .order-hero-pay-inner { padding: 12px 12px 10px; }
}

/* ====================================================================
   ORDER PAGE — mini exchange flow in hero, action toolbar, copy-id,
   3-step progress stepper, auto-refresh bar, Telegram hint, repeat CTA
   ==================================================================== */

/* Mini flow visualization inside .order-hero — BIG, prominent, the
   primary "what is this order" visual. Sits on a translucent panel and
   uses oversized amounts so the hero matches the visual weight of the
   details card below. */
.order-mini-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 18px auto 10px;
    padding: 0;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-lg);
    color: #fff;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.order-mini-flow .ccy {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: 50% !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.order-mini-flow .ccy img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
}
.order-mini-flow .omf-side {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    flex: 1 1 0;
    min-width: 0;
}
.order-mini-flow .omf-amt {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: clamp(0.95rem, 2.2vw, 1.25rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: #fff;
    /* Allow the amount to wrap if it would otherwise overflow — never clip
       it to "...", because the user needs to read the full sum at a glance. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}
.order-mini-flow .omf-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.10);
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    opacity: 1;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .order-mini-flow {
        flex-direction: column;
        width: 100%;
    }
    .order-mini-flow .ccy { width: 28px !important; height: 28px !important; }
    .order-mini-flow .ccy img { width: 28px !important; height: 28px !important; }
    .order-mini-flow .omf-side {
        padding: 10px 14px;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }
    .order-mini-flow .omf-arrow {
        padding: 2px 0;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
        font-size: 1rem;
        width: 100%;
    }
    /* Mobile: keep a comfortable, readable size that always fits within
       the column width. Allow wrap so long sums never get cut off. */
    .order-mini-flow .omf-amt {
        font-size: 1rem;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.25;
    }
}

/* Clickable / copy-able order ID badge */
.order-hero .order-id.order-id-copy {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 6px 12px;
    white-space: nowrap;
    line-height: 1.2;
    font-size: 0.85rem;
    max-width: 100%;
}
.order-hero .order-id.order-id-copy > span {
    white-space: nowrap;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.order-hero .order-id.order-id-copy:hover {
    background: rgba(255, 255, 255, 0.24);
}
.order-id-copy-icon { opacity: 0.7; flex-shrink: 0; }
.order-hero .order-id.order-id-copy svg { color: #fff; flex-shrink: 0; }

/* Action toolbar (share + print) */
.order-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.order-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.order-action:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); color: #fff; }
.order-action svg { color: rgba(255, 255, 255, 0.92); flex-shrink: 0; }

/* 3-step progress stepper */
.order-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    animation: lp-up 0.5s 0.42s ease backwards;
}
.order-step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.order-step-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.order-step-dot svg { width: 13px !important; height: 13px !important; }
.order-step-label {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
}
.order-step-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
    min-width: 16px;
}
.order-step-line-done { background: var(--success); }

.order-step-done .order-step-dot { background: var(--success); color: #fff; }
.order-step-done .order-step-label { color: var(--text); }
.order-step-active .order-step-dot {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
    animation: order-step-pulse 1.6s ease-in-out infinite;
}
.order-step-active .order-step-label { color: var(--accent-text); }
.order-step-warn .order-step-dot {
    background: var(--warning, #f59e0b);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
    animation: order-step-pulse 1.6s ease-in-out infinite;
}
.order-step-warn .order-step-label { color: var(--warning-text, #92400e); }
.order-step-wait .order-step-dot {
    background: var(--bg-soft);
    color: var(--text-faint);
    border: 1px solid var(--border);
}
.order-step-wait .order-step-label { color: var(--text-muted); }
@keyframes order-step-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

@media (max-width: 480px) {
    .order-stepper { padding: 12px; gap: 6px; }
    .order-step-dot { width: 24px; height: 24px; }
    .order-step-label { font-size: 0.72rem; }
    .order-step-line { min-width: 8px; }
}

/* Auto-refresh indicator — thin progress bar, restarts every 60 sec */
.order-refresh-bar {
    height: 2px;
    background: var(--bg-soft);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 0 14px;
}
.order-refresh-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    animation: order-refresh-fill 60s linear forwards;
    transform-origin: left center;
}
@keyframes order-refresh-fill {
    from { width: 0%; }
    to   { width: 100%; }
}

/* Telegram-bot hint card on awaiting-payment / paid statuses */
.order-tg-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    text-decoration: none !important;
    color: inherit !important;
    background:
        radial-gradient(800px 200px at 0% 0%, rgba(59, 130, 246, 0.10), transparent 60%),
        var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
    position: relative;
}
.order-tg-hint::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #0098EA, #006fa3);
}
.order-tg-hint:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 152, 234, 0.4);
    box-shadow: 0 8px 22px -10px rgba(0, 152, 234, 0.45);
}
.order-tg-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0098EA 0%, #006fa3 100%);
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(0, 152, 234, 0.55);
}
.order-tg-icon svg { width: 20px !important; height: 20px !important; }
.order-tg-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.order-tg-title { font-size: 0.95rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.order-tg-sub   { font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }
.order-tg-cta {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.85rem;
}
@media (max-width: 480px) {
    .order-tg-hint { padding: 10px 12px; gap: 10px; }
    .order-tg-icon { width: 36px; height: 36px; }
    .order-tg-icon svg { width: 18px !important; height: 18px !important; }
    .order-tg-title { font-size: 0.88rem; }
    .order-tg-sub { font-size: 0.76rem; }
    .order-tg-cta { display: none; }
}

/* Repeat-same-exchange CTA on completed orders */
.order-repeat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    text-decoration: none !important;
    color: var(--text) !important;
    background: linear-gradient(135deg, var(--accent-soft), rgba(34, 197, 94, 0.06));
    border: 1px solid rgba(59, 130, 246, 0.30);
    border-radius: var(--radius-lg);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.order-repeat:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 8px 22px -10px rgba(59, 130, 246, 0.45);
    color: var(--text) !important;
}
.order-repeat-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(59, 130, 246, 0.55);
}
.order-repeat-icon svg { width: 18px !important; height: 18px !important; }
.order-repeat-text { flex: 1; font-weight: 700; font-size: 0.95rem; color: var(--text); }
.order-repeat-arrow { color: var(--accent); font-size: 1.2rem; font-weight: 700; }

/* Print styles — hide chrome, keep order data */
@media print {
    .navbar, footer, .btn, .modal,
    .float-chat, .float-operator, [class*="binotel"],
    .order-actions, .order-tg-hint, .order-repeat,
    .review-cta, .ecash-toast, .order-refresh-bar,
    .sticky-cta { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .order-hero { background: #f5f7fa !important; color: #1a2238 !important; padding: 18px 16px !important; }
    .order-hero h1, .order-hero .desc, .order-hero .order-id { color: #1a2238 !important; }
    .od-card, .ex-eta, .ex-eta-mini { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ====================================================================
   ETA MINI — compact one-line variants for the payment card
   (network confirmations + estimated crediting time, side-by-side)
   ==================================================================== */
.ex-eta-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--bg-soft);
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text);
    overflow: hidden;
}
.ex-eta-mini-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.ex-eta-mini-icon svg { width: 14px !important; height: 14px !important; max-width: 14px; max-height: 14px; }
.ex-eta-mini-text {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ex-eta-mini-pill {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    color: var(--text);
    white-space: nowrap;
    line-height: 1.15;
}

.ex-eta-conf-mini { border-left-color: var(--warning, #f59e0b); }
.ex-eta-conf-mini .ex-eta-mini-icon { background: linear-gradient(135deg, #fbbf24, #d97706); }
.ex-eta-conf-mini .ex-eta-mini-pill { color: var(--warning-text, #92400e); border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.10); }

.ex-rate-lock-mini { border-left-color: var(--success); }
.ex-rate-lock-mini .ex-eta-mini-icon { background: linear-gradient(135deg, #22c55e, #15803d); }
.ex-rate-lock-mini .ex-eta-mini-pill { color: var(--success-text); border-color: rgba(34, 197, 94, 0.3); background: var(--success-soft); }

[data-theme="dark"] .ex-eta-mini { background: var(--bg); }
[data-theme="dark"] .ex-eta-conf-mini .ex-eta-mini-pill { color: #fcd34d; background: rgba(245, 158, 11, 0.18); }
[data-theme="dark"] .ex-rate-lock-mini .ex-eta-mini-pill { color: #6ee7b7; }

/* ====================================================================
   MERCHANT (payment requisites) — info banners + QR + copy-able fields
   ==================================================================== */
.md-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin: 14px 0 14px;
    border-radius: var(--radius);
    font-size: 0.86rem;
    line-height: 1.5;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    color: var(--text);
    clear: both;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
}
.md-info > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Toolbar sits ABOVE warning callout — give it explicit gap below */
.md-toolbar + .md-info,
.md-fields + .md-info,
.md-txn-disclose + .md-info {
    margin-top: 16px;
}
.md-info-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--accent);
}
.md-info-icon svg { width: 14px !important; height: 14px !important; flex-shrink: 0; }
.md-info-cash    { background: var(--success-soft); color: var(--success-text); border-left-color: var(--success); }
.md-info-cash    .md-info-icon { color: var(--success); }
.md-info-warning { background: var(--warning-soft, rgba(245, 158, 11, 0.10)); color: var(--warning-text, #92400e); border-left-color: var(--warning, #f59e0b); }
.md-info-warning .md-info-icon { color: var(--warning, #f59e0b); }
.md-info-danger  { background: var(--danger-soft); color: var(--danger-text); border-left-color: var(--danger); }
.md-info-danger  .md-info-icon { color: var(--danger); }
[data-theme="dark"] .md-info { background: var(--bg-soft); color: var(--text); }

.md-balance {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.86rem;
}
.md-balance-row { display: flex; justify-content: space-between; gap: 12px; }
.md-balance-label { color: var(--text-muted); }
.md-balance-value { font-weight: 700; color: var(--text); font-family: var(--font-mono); }

/* BIG amount block — primary highlight in payment card */
.md-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, var(--accent-soft), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--radius-lg);
    text-align: center;
}
.md-amount-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.md-amount-row {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.md-amount-value {
    font-family: var(--font-mono);
    font-size: clamp(1.4rem, 4vw, 1.85rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.01em;
    word-break: break-all;
}
.md-amount-ccy {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.md-amount-copy {
    position: static;
    width: 28px; height: 28px;
    align-self: center;
    opacity: 1;
    margin-left: 4px;
}
[data-theme="dark"] .md-amount {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(34, 197, 94, 0.08));
    border-color: rgba(96, 165, 250, 0.35);
}

/* QR code wrapper — bigger, centered, with caption */
.md-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 auto 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: fit-content;
    max-width: 100%;
    box-shadow: 0 4px 14px -8px rgba(15, 23, 42, 0.15);
}
.md-qr-wrap .qrcode {
    background: #fff;
    padding: 0;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.md-qr-wrap .qrcode svg { width: 100% !important; height: 100% !important; max-width: 200px; max-height: 200px; }
.md-qr-caption {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    font-weight: 600;
}
[data-theme="dark"] .md-qr-wrap { background: #fff; }
@media (max-width: 480px) {
    .md-qr-wrap { padding: 12px; }
    .md-qr-wrap .qrcode { width: 180px; height: 180px; }
    .md-qr-wrap .qrcode svg { max-width: 180px; max-height: 180px; }
}

.md-fields { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.md-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 480px) {
    .md-fields-row { grid-template-columns: 1fr; }
}
.md-merchant-field { display: flex; flex-direction: column; gap: 6px; }
.md-merchant-field .od-req-value-mono { word-break: break-all; }

/* MEMO / TAG warning — critical alert above the amount */
.md-memo-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(245, 158, 11, 0.06));
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius);
    animation: md-memo-pulse 2.4s ease-in-out infinite;
}
@keyframes md-memo-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
.md-memo-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
}
.md-memo-icon svg { width: 18px !important; height: 18px !important; }
.md-memo-body { flex: 1; min-width: 0; }
.md-memo-title {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--danger-text);
    margin-bottom: 4px;
}
.md-memo-desc { font-size: 0.84rem; color: var(--text); line-height: 1.45; }
[data-theme="dark"] .md-memo-alert { background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(245, 158, 11, 0.10)); }
[data-theme="dark"] .md-memo-title { color: #fca5a5; }

/* "Exact amount" caption inside .md-amount block */
.md-amount-exact {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(59, 130, 246, 0.25);
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-muted);
    font-weight: 500;
}
.md-amount-exact strong { color: var(--accent-text); font-weight: 800; }
[data-theme="dark"] .md-amount-exact strong { color: #93c5fd; }

/* Auto-detected network badge near the address */
.md-chain-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    line-height: 1.2;
    border: 1px solid;
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: rgba(59, 130, 246, 0.3);
}
.md-chain-trc20 { background: rgba(255, 6, 10, 0.10);   color: #b91c1c; border-color: rgba(255, 6, 10, 0.3); }
.md-chain-erc20 { background: rgba(98, 126, 234, 0.10); color: #1e3a8a; border-color: rgba(98, 126, 234, 0.3); }
.md-chain-btc   { background: rgba(247, 147, 26, 0.10); color: #92400e; border-color: rgba(247, 147, 26, 0.3); }
.md-chain-ton   { background: rgba(0, 152, 234, 0.10);  color: #075985; border-color: rgba(0, 152, 234, 0.3); }
.md-chain-xmr   { background: rgba(255, 102, 0, 0.10);  color: #7c2d12; border-color: rgba(255, 102, 0, 0.3); }
.md-address-field .od-req-head { display: flex; align-items: center; gap: 8px; }

/* Address masking — by default show first6…last6, expand on click */
.md-address-value.is-masked:not(.is-revealed)::before {
    content: attr(data-masked);
    font-family: var(--font-mono);
    color: var(--text);
    cursor: pointer;
}
.md-address-value.is-masked:not(.is-revealed) {
    color: transparent;
    cursor: pointer;
    position: relative;
    user-select: none;
    word-break: keep-all;
    white-space: nowrap;
}
.md-address-value.is-revealed { word-break: break-all; }

/* Wallet deeplink button — opens MetaMask / Trust / Tonkeeper / etc */
.md-deeplink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff !important;
    text-decoration: none !important;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -10px rgba(59, 130, 246, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.md-deeplink:hover {
    transform: translateY(-1px);
    color: #fff !important;
    box-shadow: 0 12px 26px -10px rgba(59, 130, 246, 0.65);
}
.md-deeplink-icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.md-deeplink-icon svg { width: 16px !important; height: 16px !important; }
.md-deeplink-text { flex: 1; }
.md-deeplink-arrow { opacity: 0.85; font-size: 1.1rem; flex-shrink: 0; }

/* "Already sent transaction?" disclosure + txn-hash field */
.md-txn-disclose {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
}
.md-txn-disclose summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 2px 0;
    list-style: none;
}
.md-txn-disclose summary::-webkit-details-marker { display: none; }
.md-txn-disclose summary::before {
    content: '+';
    display: inline-block;
    width: 16px;
    color: var(--accent);
    font-weight: 800;
}
.md-txn-disclose[open] summary::before { content: '−'; }
.md-txn-body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.md-txn-label { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.md-txn-input { font-family: var(--font-mono); font-size: 0.82rem; }
.md-txn-save {
    align-self: flex-start;
    padding: 7px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.md-txn-save:hover { border-color: var(--accent); color: var(--accent); }

/* ====================================================================
   REFUND / PAYMENT-ISSUE TRIGGER + MODAL
   Replaces the old "Already sent transaction?" disclose. Opens a formal
   modal with refund instructions and a pre-built support email.
   ==================================================================== */
.md-refund-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 12px 0 8px;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
    border: 1px dashed rgba(245, 158, 11, 0.55);
    border-radius: var(--radius);
    color: var(--warning-text, #92400e);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.md-refund-trigger:hover {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.85);
    transform: translateY(-1px);
}
.md-refund-trigger-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning, #f59e0b);
}
.md-refund-trigger > span:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}
.md-refund-trigger-arrow {
    opacity: 0.7;
    font-weight: 800;
    flex-shrink: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.md-refund-trigger:hover .md-refund-trigger-arrow {
    transform: translateX(3px);
    opacity: 1;
}
[data-theme="dark"] .md-refund-trigger {
    color: #fcd34d;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.02));
}

/* --- Modal --- */
.md-refund-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: md-refund-fade 0.18s ease;
}
.md-refund-modal[hidden] { display: none; }
@keyframes md-refund-fade { from { opacity: 0 } to { opacity: 1 } }
.md-refund-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.md-refund-dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--bg, #fff);
    color: var(--text);
    border-radius: 16px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
    animation: md-refund-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes md-refund-pop {
    from { transform: translateY(8px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1);     opacity: 1; }
}
.md-refund-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    z-index: 5;
    padding: 0;
    line-height: 0;
}
.md-refund-close:hover { color: var(--danger, #ef4444); transform: rotate(90deg); }
.md-refund-close svg { pointer-events: none; }

.md-refund-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 22px 12px 22px;
    border-bottom: 1px solid var(--border);
}
.md-refund-icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
    color: var(--warning, #f59e0b);
    display: inline-flex; align-items: center; justify-content: center;
}
.md-refund-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.md-refund-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.md-refund-lead {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text);
}
.md-refund-lead strong { color: var(--warning-text, #92400e); }
[data-theme="dark"] .md-refund-lead strong { color: #fcd34d; }

.md-refund-mail {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}
.md-refund-mail-label {
    font-size: 0.74rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.md-refund-mail-link {
    flex: 1;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    word-break: break-all;
}
.md-refund-mail-link:hover { text-decoration: underline; }

.md-refund-req {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.md-refund-req-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.md-refund-req-list {
    margin: 0;
    padding-left: 22px;
    font-size: 0.88rem;
    line-height: 1.5;
}
.md-refund-req-list li { margin-bottom: 4px; }
.md-refund-req-list li:last-child { margin-bottom: 0; }

.md-refund-terms {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    padding: 10px 14px;
}
.md-refund-terms summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    list-style: none;
    padding: 2px 0;
}
.md-refund-terms summary::-webkit-details-marker { display: none; }
.md-refund-terms summary::before {
    content: '+';
    display: inline-block;
    width: 18px;
    color: var(--accent);
    font-weight: 800;
}
.md-refund-terms[open] summary::before { content: '−'; }
.md-refund-terms-list {
    margin: 10px 0 0;
    padding-left: 22px;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.md-refund-terms-list li { margin-bottom: 6px; }
.md-refund-terms-list li:last-child { margin-bottom: 0; }

.md-refund-body { padding-bottom: 22px; }

@media (max-width: 575.98px) {
    .md-refund-modal { padding: 8px; }
    .md-refund-dialog { border-radius: 14px; }
    .md-refund-head { padding: 18px 16px 10px 16px; }
    .md-refund-title { font-size: 1.02rem; }
    .md-refund-body { padding: 14px 16px 18px; gap: 12px; }
}

/* When the order page wraps the merchant block in body.modal-open, prevent
   the underlying page from scrolling while modal is shown. */
body.md-refund-open { overflow: hidden; }

/* Footer toolbar — support + download */
.md-toolbar {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
    clear: both;
    position: relative;
    z-index: 0;
}
.md-toolbar-btn {
    flex: 1;
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.md-toolbar-btn:hover {
    border-color: var(--accent);
    color: var(--accent) !important;
    background: var(--bg-elev);
}
.md-toolbar-btn svg { color: currentColor; flex-shrink: 0; }
.md-toolbar-help svg { color: var(--success); }
.md-toolbar-help:hover svg { color: var(--success); }

/* Countdown coloring — green > 5min, amber 2-5min, red < 2min */
#order-countdown.countdown-warn .progress-bar { background: var(--warning, #f59e0b) !important; }
#order-countdown.countdown-warn .text-muted strong { color: var(--warning-text, #92400e) !important; }
#order-countdown.countdown-danger { animation: countdown-flash 1.4s ease-in-out infinite; }
#order-countdown.countdown-danger .progress-bar { background: var(--danger) !important; }
#order-countdown.countdown-danger .text-muted strong { color: var(--danger) !important; font-weight: 800; }
@keyframes countdown-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.18); border-radius: var(--radius-lg); }
}

.md-pay-btn {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    box-shadow: 0 8px 22px -10px rgba(22, 163, 74, 0.55) !important;
}

/* Spinner inside submit buttons during AJAX */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    vertical-align: -2px;
}
.btn.is-loading { pointer-events: none; }
.btn.btn-outline-dark .btn-spinner,
.btn.btn-secondary .btn-spinner { border-color: rgba(15, 23, 42, 0.25); border-top-color: var(--text); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ====================================================================
   USER ORDERS — card list (replaces the old <table>)
   ==================================================================== */
.uo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.uo-stat {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.uo-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-muted);
}
.uo-stat-value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    font-family: var(--font-mono);
}

.uo-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.uo-card {
    display: block;
    text-decoration: none !important;
    color: var(--text);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}
.uo-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
}
.uo-card-warning::before { background: var(--warning, #f59e0b); }
.uo-card-info::before    { background: var(--accent); }
.uo-card-success::before { background: var(--success); }
.uo-card-danger::before  { background: var(--danger); }
.uo-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(59, 130, 246, 0.35);
    color: var(--text);
}

.uo-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.uo-card-id {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}
.uo-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}
.uo-card-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px currentColor;
    opacity: 0.18;
}
.uo-card-status-warning { background: var(--warning-soft, rgba(245,158,11,0.15)); color: var(--warning-text, #92400e); }
.uo-card-status-info    { background: var(--accent-soft); color: var(--accent-text); }
.uo-card-status-success { background: var(--success-soft); color: var(--success-text); }
.uo-card-status-danger  { background: var(--danger-soft); color: var(--danger-text); }
.uo-card-status-warning .uo-card-status-dot { background: var(--warning, #f59e0b); }
.uo-card-status-info    .uo-card-status-dot { background: var(--accent); }
.uo-card-status-success .uo-card-status-dot { background: var(--success); }
.uo-card-status-danger  .uo-card-status-dot { background: var(--danger); }

.uo-card-pair {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.uo-card-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.uo-card-side .ccy { flex-shrink: 0; }
.uo-card-side-text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.uo-card-side-amount { font-size: 0.95rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uo-card-side-name   { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uo-card-side-receive { justify-content: flex-end; text-align: right; }
.uo-card-side-receive .uo-card-side-text { align-items: flex-end; }
.uo-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 700;
}

.uo-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 0.8rem;
}
.uo-card-date { color: var(--text-muted); }
.uo-card-link { color: var(--accent); font-weight: 600; }

@media (max-width: 480px) {
    .uo-card { padding: 12px 14px; }
    .uo-card-pair { grid-template-columns: 1fr; gap: 6px; }
    .uo-card-arrow { transform: rotate(90deg); margin: 0 auto; }
    .uo-card-side-receive { justify-content: flex-start; text-align: left; }
    .uo-card-side-receive .uo-card-side-text { align-items: flex-start; }
    .uo-card-foot { flex-direction: column; gap: 4px; align-items: flex-start; }
}

/* ====================================================================
   RICH EMPTY STATE — illustrated + CTA, replaces dull "Записей нет"
   ==================================================================== */
.empty-rich {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    gap: 14px;
}
.empty-rich-art {
    width: 120px; height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.empty-rich-art svg { width: 120px; height: 120px; max-width: 120px; max-height: 120px; }
.empty-rich-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.empty-rich-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
    max-width: 360px;
}
.empty-rich-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff !important;
    text-decoration: none !important;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 8px 20px -10px rgba(59, 130, 246, 0.55);
}
.empty-rich-cta:hover {
    transform: translateY(-1px);
    color: #fff !important;
    box-shadow: 0 12px 26px -10px rgba(59, 130, 246, 0.65);
}

/* ====================================================================
   GLOBAL TOAST — window.ecashToast(text, type)
   ==================================================================== */
.ecash-toast {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(20px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    color: #fff;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255,255,255,0.08) inset;
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
.ecash-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ecash-toast svg { color: #fff; flex-shrink: 0; }
.ecash-toast-info    { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); }
.ecash-toast-success { background: linear-gradient(135deg, #16a34a, #15803d); }
.ecash-toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1a2238; }
.ecash-toast-warning svg { color: #1a2238; }
.ecash-toast-danger  { background: linear-gradient(135deg, #ef4444, #dc2626); }
@media (max-width: 480px) {
    .ecash-toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); font-size: 0.85rem; padding: 10px 16px; }
}

/* ====================================================================
   STICKY BOTTOM CTA — pinned action bar on mobile order pages
   (Bootstrap helper — no markup change needed; just opt-in via class)
   ==================================================================== */
@media (max-width: 575.98px) {
    .sticky-cta {
        position: sticky;
        bottom: 0;
        z-index: 100;
        background: var(--bg-elev);
        margin: 0 -12px -12px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.06);
    }
}

/* ====================================================================
   FEATURED PROMO — "10 TRX за отзыв" block on /promotion page
   ==================================================================== */
.promo-feature {
    margin: 14px 0 22px;
    padding: 22px 24px 18px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(900px 280px at 0% 0%, rgba(245, 179, 0, 0.14), transparent 60%),
        radial-gradient(900px 280px at 100% 100%, rgba(34, 197, 94, 0.10), transparent 60%),
        var(--bg-elev);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 48px -32px rgba(245, 179, 0, 0.30);
    animation: lp-up 0.5s 0.1s ease backwards;
}
.promo-feature::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #fbbf24 0%, #f5b300 50%, #d97706 100%);
}

.promo-feature-head { text-align: center; margin-bottom: 18px; }
.promo-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #fbbf24 0%, #f5b300 100%);
    color: #1a2238;
    border-radius: var(--radius-pill);
    padding: 5px 14px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 10px;
    box-shadow: 0 6px 18px -8px rgba(245, 179, 0, 0.55);
}
.promo-feature-gift { font-size: 1rem; line-height: 1; }
.promo-feature-title {
    font-size: clamp(1.4rem, 2.8vw, 1.85rem);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.promo-feature-title .accent { color: var(--brand-yellow, #f5b300); }
.promo-feature-sub {
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    max-width: 540px;
    margin: 0 auto;
}

.promo-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 18px;
    margin: 18px 0;
    align-items: stretch;
}
.promo-feature-grid > * {
    display: flex;
    flex-direction: column;
}
.promo-feature-list { flex: 1; }
.promo-feature-actions { flex: 1; justify-content: space-between; }
@media (max-width: 760px) {
    .promo-feature-grid { grid-template-columns: 1fr; align-items: start; }
}

.promo-feature-stepshead {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.promo-feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: none;
}
.promo-feature-list li::marker { content: ''; }
.promo-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.5;
}
.promo-feature-list li strong { color: var(--text); font-weight: 700; }
.promo-feature-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 1px;
    box-shadow: 0 4px 10px -4px rgba(245, 179, 0, 0.55);
}

.promo-feature-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Distribute 3 buttons over the full column height so they line up
       roughly with the 4 steps on the left (column heights now match). */
    justify-content: space-between !important;
    min-height: 100%;
}
.promo-feature-actions > .promo-feature-btn { flex: 1 1 0; }
@media (max-width: 760px) {
    .promo-feature-actions {
        gap: 10px;
        justify-content: flex-start !important;
        min-height: 0;
    }
    .promo-feature-actions > .promo-feature-btn { flex: 0 0 auto; }
}
.promo-feature-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-elev);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none !important;
    color: var(--text) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-height: 64px;        /* uniform height for all 3 buttons */
    box-sizing: border-box;
}
.promo-feature-btn-body {
    line-height: 1.25;
    overflow: hidden;
}
.promo-feature-btn-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.promo-feature-btn-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.promo-feature-btn:hover {
    transform: translateY(-1px);
    color: var(--text) !important;
    border-color: transparent;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.22);
}
.promo-feature-btn-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.promo-feature-btn-icon svg { width: 18px !important; height: 18px !important; }
.promo-feature-btn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo-feature-btn-title { font-weight: 700; font-size: 0.92rem; line-height: 1.25; color: var(--text); }
.promo-feature-btn-sub   { font-size: 0.74rem; color: var(--text-muted); }
.promo-feature-btn-arrow { color: var(--text-faint); font-size: 1.1rem; flex-shrink: 0; }

.promo-feature-btn-primary .promo-feature-btn-icon {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 6px 16px -6px rgba(22, 163, 74, 0.55);
}
.promo-feature-btn-primary:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff !important;
}
.promo-feature-btn-primary:hover .promo-feature-btn-title,
.promo-feature-btn-primary:hover .promo-feature-btn-sub,
.promo-feature-btn-primary:hover .promo-feature-btn-arrow { color: rgba(255,255,255,0.95); }

.promo-feature-btn-channel .promo-feature-btn-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 6px 16px -6px rgba(245, 158, 11, 0.55);
    color: #1a2238;
}
.promo-feature-btn-channel:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #1a2238 !important;
}
.promo-feature-btn-channel:hover .promo-feature-btn-title,
.promo-feature-btn-channel:hover .promo-feature-btn-arrow { color: #1a2238; }
.promo-feature-btn-channel:hover .promo-feature-btn-sub { color: rgba(26, 34, 56, 0.7); }

.promo-feature-btn-tg .promo-feature-btn-icon {
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    box-shadow: 0 6px 16px -6px rgba(42, 171, 238, 0.55);
}
.promo-feature-btn-tg:hover {
    background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
    color: #fff !important;
}
.promo-feature-btn-tg:hover .promo-feature-btn-title,
.promo-feature-btn-tg:hover .promo-feature-btn-sub,
.promo-feature-btn-tg:hover .promo-feature-btn-arrow { color: rgba(255,255,255,0.95); }

.promo-feature-rules {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning, #f59e0b);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 14px 0;
}
.promo-feature-ruleshead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--warning-text, #92400e);
    margin-bottom: 8px;
}
.promo-feature-ruleslist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.promo-feature-ruleslist li {
    position: relative;
    padding-left: 14px;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
}
.promo-feature-ruleslist li::before {
    content: '•';
    position: absolute;
    left: 2px;
    color: var(--warning, #f59e0b);
    font-weight: 800;
}
.promo-feature-ruleslist li strong { color: var(--text); font-weight: 700; }

.promo-feature-thanks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--success-soft);
    color: var(--success-text);
    border-radius: var(--radius);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: center;
}
.promo-feature-thanks strong { color: var(--success-text); font-weight: 800; }

[data-theme="dark"] .promo-feature {
    background:
        radial-gradient(900px 280px at 0% 0%, rgba(245, 179, 0, 0.18), transparent 60%),
        radial-gradient(900px 280px at 100% 100%, rgba(34, 197, 94, 0.14), transparent 60%),
        var(--bg-elev);
}
[data-theme="dark"] .promo-feature-rules {
    border-left-color: var(--warning, #f59e0b);
}
[data-theme="dark"] .promo-feature-ruleshead { color: #fcd34d; }
[data-theme="dark"] .promo-feature-thanks { background: rgba(34, 197, 94, 0.16); color: #6ee7b7; }
[data-theme="dark"] .promo-feature-thanks strong { color: #86efac; }

@media (max-width: 480px) {
    .promo-feature { padding: 18px 16px 14px; }
    .promo-feature-list li { font-size: 0.86rem; }
    .promo-feature-btn-icon { width: 34px; height: 34px; }
    .promo-feature-btn-title { font-size: 0.86rem; }
}

/* Updated review-cta promo link on completed orders — was a plain
   "you may receive a cashback…" text, now an interactive link card */
.rcta-promo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-top: 14px;
    background: linear-gradient(135deg, var(--success-soft) 0%, rgba(245, 179, 0, 0.10) 100%);
    border: 1px solid rgba(245, 179, 0, 0.30);
    border-radius: var(--radius);
    text-decoration: none !important;
    color: var(--text) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rcta-promo-link:hover {
    transform: translateY(-1px);
    border-color: var(--brand-yellow, #f5b300);
    color: var(--text) !important;
    box-shadow: 0 12px 28px -10px rgba(245, 179, 0, 0.45);
}
.rcta-promo-link .rcta-gift { font-size: 1.5rem; line-height: 1; flex-shrink: 0; animation: rcta-bounce 2s ease-in-out infinite; }
.rcta-promo-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rcta-promo-title { font-size: 0.95rem; font-weight: 800; color: var(--text); line-height: 1.25; }
.rcta-promo-sub   { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
.rcta-promo-cta   { flex-shrink: 0; color: var(--warning-text, #92400e); font-weight: 700; font-size: 0.86rem; }

[data-theme="dark"] .rcta-promo-link {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(245, 179, 0, 0.10));
    border-color: rgba(245, 179, 0, 0.4);
}
[data-theme="dark"] .rcta-promo-cta { color: #fcd34d; }

@media (max-width: 480px) {
    .rcta-promo-link { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
    .rcta-promo-cta { width: 100%; }
}

@media print {
    .navbar, footer, .btn, .modal { display: none !important; }
    body { background: #fff; color: #000; }
    .card { border: 1px solid #ddd !important; box-shadow: none !important; }
}

/* ===== MIA notice hint (variant A · info) — usdttrc20-cardmdl ===== */
/* Появляется только если slug направления заканчивается на -cardmdl. */
/* Зеркалит .ex-email-hint, чтобы стилистически попадать в существующий info-блок. */
.mia-hint {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--text-soft);
    line-height: 1.45;
    animation: mia-hint-in 0.35s ease backwards;
}
@keyframes mia-hint-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mia-hint-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev);
    color: var(--accent);
    border: 1px solid rgba(59, 130, 246, 0.28);
    margin-top: 1px;
    overflow: hidden;
}
.mia-hint-icon svg { width: 14px !important; height: 14px !important; display: block; }
.mia-hint-text { flex: 1; min-width: 0; }
.mia-hint-text strong { color: var(--text); font-weight: 700; }

[data-theme="dark"] .mia-hint {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.3);
}
[data-theme="dark"] .mia-hint-icon {
    background: var(--bg);
    border-color: rgba(96, 165, 250, 0.4);
    color: #93c5fd;
}