@font-face {
    font-family: 'Noto Sans';
    src: url('/assets/fonts/NotoSans-VariableFont_wdth,wght.ttf') format('woff2'),
    url('/fonts/noto-sans-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('/assets/fonts/Nunito-VariableFont_wght.ttf') format('woff2'),
    url('/fonts/nunito-400.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('/assets/fonts/Nunito-VariableFont_wght.ttf') format('woff2'),
    url('/fonts/nunito-500.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('/assets/fonts/Nunito-VariableFont_wght.ttf') format('woff2'),
    url('/fonts/nunito-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Catamaran';
    src: url('/assets/fonts/Catamaran-VariableFont_wght.ttf') format('woff2'),
    url('/fonts/catamaran-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Trading Platform Dark Theme - Fin-Tech Style */

/* Inspired by professional trading platforms */

:root {
    /* === Background Colors === */
    --trading-bg-primary: #0b0e11;
    --trading-bg-secondary: #181a20;
    --trading-bg-tertiary: #1e2329;
    --trading-bg-elevated: #2b3139;
    --trading-bg-hover: #363c46;
    --trading-bg-input: #2b3139;

    /* === Text Colors === */
    --trading-text-primary: #eaecef;
    --trading-text-secondary: #848e9c;
    --trading-text-tertiary: #5e6673;
    --trading-text-disabled: #474d57;

    /* === Accent Colors === */
    --trading-accent-primary: #f0b90b;
    --trading-accent-secondary: #c99400;
    --trading-accent-hover: #ffe45c;

    /* === Semantic Colors === */
    --trading-buy: #0ecb81;
    --trading-buy-hover: #2ed191;
    --trading-buy-bg: rgba(14, 203, 129, 0.1);
    --trading-sell: #f6465d;
    --trading-sell-hover: #ff6b7d;
    --trading-sell-bg: rgba(246, 70, 93, 0.1);
    --trading-profit: #0ecb81;
    --trading-loss: #f6465d;

    /* === Border Colors === */
    --trading-border-primary: #2b3139;
    --trading-border-secondary: #363c46;
    --trading-border-active: #474d57;

    /* === Shadow === */
    --trading-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --trading-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --trading-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* === Spacing === */
    --trading-space-xs: 8px;
    --trading-space-sm: 8px;
    --trading-space-md: 12px;
    --trading-space-lg: 16px;
    --trading-space-xl: 24px;

    /* === Border Radius === */
    --trading-radius-sm: 4px;
    --trading-radius-md: 6px;
    --trading-radius-lg: 8px;

    /* === Typography === */
    --trading-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --trading-font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Courier New', monospace;
    --trading-font-size-xs: 11px;
    --trading-font-size-sm: 12px;
    --trading-font-size-md: 14px;
    --trading-font-size-lg: 16px;
    --trading-font-size-xl: 20px;
    --trading-font-size-xxl: 24px;
    --trading-line-height: 1.5;

    /* === Transitions === */
    --trading-transition-fast: 0.1s ease;
    --trading-transition-normal: 0.2s ease;
    --trading-transition-slow: 0.3s ease;

    /* === Z-Index Scale === */
    --trading-z-dropdown: 100;
    --trading-z-sticky: 200;
    --trading-z-modal: 300;
    --trading-z-tooltip: 400;
}

/* === Light Theme Variables === */

.trading-page-light {
    /* === Background Colors === */
    --trading-bg-primary: #f8f9fa;
    --trading-bg-secondary: #ffffff;
    --trading-bg-tertiary: #f5f5f5;
    --trading-bg-elevated: #eeeeee;
    --trading-bg-hover: #e0e0e0;
    --trading-bg-input: #ffffff;

    /* === Text Colors === */
    --trading-text-primary: #1a1a1a;
    --trading-text-secondary: #666666;
    --trading-text-tertiary: #999999;
    --trading-text-disabled: #cccccc;

    /* === Accent Colors === */
    --trading-accent-primary: #7b68ee;
    --trading-accent-secondary: #6254c4;
    --trading-accent-hover: #9d8ff2;

    /* === Semantic Colors === */
    --trading-buy: #26a69a;
    --trading-buy-hover: #2bbbad;
    --trading-buy-bg: rgba(38, 166, 154, 0.1);
    --trading-sell: #ef5350;
    --trading-sell-hover: #f44336;
    --trading-sell-bg: rgba(239, 83, 80, 0.1);
    --trading-profit: #26a69a;
    --trading-loss: #ef5350;

    /* === Border Colors === */
    --trading-border-primary: #e0e0e0;
    --trading-border-secondary: #d0d0d0;
    --trading-border-active: #bdbdbd;

    /* === Shadow === */
    --trading-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --trading-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --trading-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

:root {
    --brand-primary: #7b68ee;
    --text-heading: #0b0b31;
    --text-body: #5f5f5f;
    --text-dark: #333333;
    --text-muted: #696997;
    --color-warning: #ff561d;
    --color-orange: #FF9800;
    --border-subtle: #eeeeee;
    --bg-hover: #ececec;
    --bg-page: #f8f9fa;
    --text-light-secondary: #707a8a;
    --input-border: #3d4450;
}

body {
    padding: 0;
    margin: 0;
    background-color: #f8fafc;
    font-size: 15px;
    font-family: 'Nunito', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

button {
    outline: 0;
}

dl, ol, ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
}

.d-table {
    width: 100%;
    height: 100%;
}

.d-table-cell {
    vertical-align: middle;
}

.ptb-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-70 {
    padding-bottom: 70px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-70 {
    padding-top: 70px;
}

.pt-100 {
    padding-top: 100px;
}

.bg-grey {
    background-color: #fafbfc;
}

.section-padding {
    padding: 100px 0;
}

a {
    text-decoration: none;
    transition: 0.4s;
    outline: 0;
    color: var(--text-heading);
}

a:hover {
    text-decoration: none;
    color: var(--brand-primary);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    line-height: 1.2;
    font-family: 'Nunito', sans-serif;
}

p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-body);
    margin-bottom: 15px;
    font-weight: 400;
    letter-spacing: 0.3px;
    font-family: 'Nunito', sans-serif;
}

p:last-child {
    margin-bottom: 0;
}

.default-btn,
.default-btn-one {
    border: none;
    position: relative;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    transition: 0.4s;
    border-radius: 3px;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 40px;
    box-shadow: 0 7px 25px rgba(123, 104, 238, 0.25);
    cursor: pointer;
}

.default-btn {
    color: #ffffff;
    background-color: var(--brand-primary);
}

.default-btn-one {
    color: var(--brand-primary);
    background-color: #ffffff;
}

.default-btn-one::before,
.default-btn::before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #3e57d0;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: -1;
}

.default-btn.active {
    background-color: #3e57d0;
}

.default-btn:hover, .default-btn:focus {
    color: #ffffff;
}

.default-btn-one:hover::before,
.default-btn-one:focus::before,
.default-btn:hover::before,
.default-btn:focus::before {
    width: 225%;
    height: 562.5px;
}

.default-btn-one:hover, .default-btn-one:focus {
    color: var(--brand-primary);
}

.btn-white {
    color: var(--brand-primary);
    background-color: #ffffff;
}

.default-btn-sm {
    margin-top: 0;
    padding: 6px 15px;
}

.default-btn-xs {
    font-size: 10px;
    margin-top: 0;
    padding: 4px 10px;
}

.default-btn-one + .default-btn-one,
.default-btn-one + .default-btn,
.default-btn + .default-btn-one,
.default-btn-sm + .default-btn-sm {
    margin-left: 6px;
}

.default-btn:not(disabled),
.default-btn-one:not(disabled) {
    opacity: 1;
}

.default-btn:disabled,
.default-btn-one:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.default-btn-one:hover, .default-btn-one:focus {
    color: #ffffff;
}

.default-btn-one:hover span, .default-btn-one:focus span {
    width: 225%;
    height: 562.5px;
}

.section-title {
    text-align: center;
    margin-bottom: 65px;
    line-height: 1.5;
}

.section-title h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-orange);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.section-title h2 {
    font-size: 40px;
    color: var(--text-heading);
    margin: 10px 0 0 0;
    font-weight: 800;
}

.color-text {
    color: var(--brand-primary);
}

.valign {
    display: flex;
    align-items: center;
}

/* [ Start Overlay ] */

[data-overlay-dark],
[data-overlay-light] {
    position: relative;
}

[data-overlay-dark] .container,
[data-overlay-light] .container {
    position: relative;
    z-index: 2;
}

[data-overlay-dark]:before,
[data-overlay-light]:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-overlay-dark]:before {
    background: #02050b;
}

[data-overlay-light]:before {
    background: #fff;
}

[data-overlay-dark] h1,
[data-overlay-dark] h2,
[data-overlay-dark] h3,
[data-overlay-dark] h4,
[data-overlay-dark] h5,
[data-overlay-dark] h6,
[data-overlay-dark] span,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark span,
.bg-color h1,
.bg-color h2,
.bg-color h3,
.bg-color h4,
.bg-color h5,
.bg-color h6,
.bg-color span {
    color: #fff;
}

[data-overlay-dark] p,
.bg-dark p,
.bg-color p {
    color: #dad6d6;
}

[data-overlay-dark="0"]:before,
[data-overlay-light="0"]:before {
    opacity: 0;
}

[data-overlay-dark="1"]:before,
[data-overlay-light="1"]:before {
    opacity: .1;
}

[data-overlay-dark="2"]:before,
[data-overlay-light="2"]:before {
    opacity: .2;
}

[data-overlay-dark="3"]:before,
[data-overlay-light="3"]:before {
    opacity: .3;
}

[data-overlay-dark="4"]:before,
[data-overlay-light="4"]:before {
    opacity: .4;
}

[data-overlay-dark="5"]:before,
[data-overlay-light="5"]:before {
    opacity: .5;
}

[data-overlay-dark="6"]:before,
[data-overlay-light="6"]:before {
    opacity: .6;
}

[data-overlay-dark="7"]:before,
[data-overlay-light="7"]:before {
    opacity: .7;
}

[data-overlay-dark="8"]:before,
[data-overlay-light="8"]:before {
    opacity: .8;
}

[data-overlay-dark="9"]:before,
[data-overlay-light="9"]:before,
[data-overlay-color="9"]:before {
    opacity: .9;
}

[data-overlay-dark="10"]:before,
[data-overlay-light="10"]:before {
    opacity: 1;
}

/* [ End Overlay ] */

/*****************************************
 ** - 00 -  Go Top CSS
 ******************************************/

.go-top {
    position: fixed;
    cursor: pointer;
    top: 0;
    right: 15px;
    color: #ffffff;
    background-color: var(--brand-primary);
    z-index: 4;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    opacity: 0;
    visibility: hidden;
    transition: .9s;
    border-radius: 50%;
}

.go-top.active {
    top: 98%;
    transform: translateY(-98%);
    opacity: 1;
    visibility: visible;
}

.go-top i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: 0.4s;
}

.go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%;
}

.go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--text-heading);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    border-radius: 50%;
}

.go-top:hover, .go-top:focus {
    color: #ffffff;
}

.go-top:hover::before, .go-top:focus::before {
    opacity: 1;
    visibility: visible;
}

.go-top:hover i:first-child, .go-top:focus i:first-child {
    opacity: 0;
    top: 0;
    visibility: hidden;
}

.go-top:hover i:last-child, .go-top:focus i:last-child {
    opacity: 1;
    visibility: visible;
    top: 50%;
}

/**************************************
 ** - 02 - Preloader Area CSS
 **************************************/

.preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: transparent;
    top: 0;
    left: 0;
}

.preloader .loader {
    position: absolute;
    top: 43%;
    left: 0;
    right: 0;
    transform: translateY(-43%);
    text-align: center;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    transition: 0.4s;
}

.preloader .loader .box {
    width: 100%;
    height: 100%;
    background-image: url('../img/favicon.png');
    background-size: cover;
    animation: animate .5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
}

.preloader .loader .shadow {
    width: 100%;
    height: 5px;
    background: #000000;
    opacity: 0.1;
    position: absolute;
    top: 59px;
    left: 0;
    border-radius: 50%;
    animation: shadow .5s linear infinite;
}

.preloader::before, .preloader::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    height: 100%;
    z-index: -1;
    background: var(--brand-primary);
    transition: .9s;
}

.preloader::after {
    left: auto;
    right: 0;
}

.preloader.preloader-deactivate {
    visibility: hidden;
}

.preloader.preloader-deactivate::after, .preloader.preloader-deactivate::before {
    width: 0;
}

.preloader.preloader-deactivate .loader {
    opacity: 0;
    visibility: hidden;
}

@keyframes loader {
    0% {
        left: -100px;
    }

    100% {
        left: 110%;
    }
}

@keyframes animate {
    17% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

    100% {
        transform: translateY(0) rotate(90deg);
    }
}

@keyframes shadow {
    50% {
        transform: scale(1.2, 1);
    }
}

/**************************************
 ** - 03 - Navbar Area CSS
 **************************************/

.gringo-responsive-nav {
    display: none;
}

.gringo-nav {
    background-color: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 0;
    padding-left: 0;
}

.gringo-nav .navbar {
    padding-right: 0;
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
}

.gringo-nav .navbar ul {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
}

.gringo-nav .navbar .navbar-nav {
    margin-left: 20px;
}

.gringo-nav .navbar .navbar-nav .nav-item {
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
}

.gringo-nav .navbar .navbar-nav .nav-item a {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-transform: capitalize;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 15px;
    margin-right: 15px;
}

.gringo-nav .navbar .navbar-nav .nav-item a:hover, .gringo-nav .navbar .navbar-nav .nav-item a:focus, .gringo-nav .navbar .navbar-nav .nav-item a.active {
    color: var(--brand-primary);
}

.gringo-nav .navbar .navbar-nav .nav-item a i {
    position: relative;
    top: -1px;
    margin-left: 1px;
}

.gringo-nav .navbar .navbar-nav .nav-item:last-child a {
    margin-right: 0;
}

.gringo-nav .navbar .navbar-nav .nav-item:first-child a {
    margin-left: 0;
}

.gringo-nav .navbar .navbar-nav .nav-item:hover a, .gringo-nav .navbar .navbar-nav .nav-item:focus a, .gringo-nav .navbar .navbar-nav .nav-item.active a {
    color: var(--brand-primary);
}

.gringo-nav .navbar .navbar-nav .nav-item .dropdown-menu {
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    position: absolute;
    border: none;
    top: 80px;
    width: 230px;
    z-index: 99;
    display: block;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transition: all 0.3s ease-in-out;
    padding: 0px;
}

.gringo-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
    padding: 0;
    border-bottom: 1px solid #f1f1f1;
}

.gringo-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child {
    border-bottom: 0px solid transparent;
}

.gringo-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
    text-transform: capitalize;
    padding: 10px 15px;
    margin: 0;
    position: relative;
    color: var(--text-heading);
    font-size: 15.5px;
    font-weight: 500;
}

.gringo-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .gringo-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .gringo-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
    color: var(--brand-primary);
    background: #f9f9f9;
}

.gringo-nav .navbar .navbar-nav .nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
    transition: 0.4s;
}

.gringo-nav .navbar .other-option {
    margin-left: 0;
}

.gringo-nav .navbar .other-option .default-btn.seo-btn {
    padding: 10px 25px;
    font-size: 15px;
    background-color: transparent;
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
}

.gringo-nav .navbar .other-option .default-btn.seo-btn:hover {
    background-color: var(--brand-primary);
    color: #ffffff;
}

.gringo-nav .black-logo {
    display: block;
}

.navbar-area {
    background-color: transparent;
    transition: 0.4s;
    position: absolute;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.navbar-area.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
    background: #ffffff !important;
    animation: 500ms ease-in-out 0s normal fadeInDown;
    transition: 0.4s;
}

.navbar-area:not(.is-sticky) .gh-icon-white,
.navbar-area:not(.is-sticky) .white-logo {
    display: block;
}

.navbar-area:not(.is-sticky) .gh-icon-black,
.navbar-area:not(.is-sticky) .black-logo {
    display: none;
}

.navbar-area.is-sticky .gh-icon-white,
.navbar-area.is-sticky .white-logo {
    display: none;
}

.navbar-area.is-sticky .gh-icon-black,
.navbar-area.is-sticky .black-logo {
    display: block;
}

@media only screen and (max-width: 991px) {
    .navbar-area .gh-icon-black {
        display: none !important;
    }
}

.navbar-area.is-sticky .navbar-nav .nav-item a {
    color: #505050;
}

.navbar-area.is-sticky .navbar-nav .nav-item a:hover, .navbar-area.is-sticky .navbar-nav .nav-item a:focus, .navbar-area.is-sticky .navbar-nav .nav-item a.active {
    color: var(--brand-primary);
}

.navbar-area.is-sticky .gringo-nav .mean-menu .white-logo,
.navbar-area.is-sticky .gringo-nav .navbar-brand .white-logo {
    display: none;
}

.navbar-area.is-sticky .gringo-nav .mean-menu .black-logo,
.navbar-area.is-sticky .gringo-nav .navbar-brand .black-logo {
    display: block;
}

@media only screen and (max-width: 991px) {
    .navbar-area {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .navbar-area.is-sticky {
        border-bottom: none;
        box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
        padding-top: 20px;
        padding-bottom: 20px;
        z-index: 1049;
    }

    .navbar-area.is-sticky .logo .white-logo {
        display: none;
    }

    .navbar-area.is-sticky .logo .black-logo {
        display: block;
    }

    .gringo-responsive-nav {
        display: block;
    }

    .gringo-responsive-nav .gringo-responsive-menu {
        position: relative;
    }

    .gringo-responsive-nav .gringo-responsive-menu.mean-container .mean-nav ul {
        font-size: 15px;
    }

    .gringo-responsive-nav .gringo-responsive-menu.mean-container .mean-nav ul li a {
        font-size: 15px;
    }

    .gringo-responsive-nav .gringo-responsive-menu.mean-container .mean-nav ul li a.active {
        color: var(--brand-primary);
    }

    .gringo-responsive-nav .gringo-responsive-menu.mean-container .mean-nav ul li li a {
        font-size: 15px;
    }

    .gringo-responsive-nav .gringo-responsive-menu.mean-container .navbar-nav {
        overflow-y: scroll;
        height: auto;
        box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
    }

    .gringo-responsive-nav .gringo-responsive-menu.mean-container .others-options {
        display: none;
    }

    .gringo-responsive-nav .mean-container a.meanmenu-reveal {
        color: var(--text-heading);
    }

    .gringo-responsive-nav .mean-container a.meanmenu-reveal span {
        background: var(--text-heading);
    }

    .gringo-responsive-nav .logo {
        position: relative;
        width: 50%;
        z-index: 999;
    }

    .gringo-responsive-nav .logo .white-logo {
        display: block;
    }

    .gringo-responsive-nav .logo .black-logo {
        display: block;
    }

    .gringo-nav {
        display: none;
    }
}

/* ===========================================
   Nav Menu - Binance-style Navigation
   =========================================== */

/* Main nav layout */

.gringo-nav .navbar .collapse {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.nav-menu-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-menu-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

/* Text links */

.nav-menu-link {
    font-size: 14px;
    font-weight: 500;
    color: #1e2329;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.nav-menu-link:hover,
.nav-menu-link:focus {
    color: var(--brand-primary);
    background: rgba(123, 104, 238, 0.06);
    text-decoration: none;
}

/* When navbar is not sticky (transparent bg, white text) */

.navbar-area:not(.is-sticky) .nav-menu-link {
    color: #fff;
}

.navbar-area:not(.is-sticky) .nav-menu-link:hover,
.navbar-area:not(.is-sticky) .nav-menu-link:focus {
    color: var(--brand-primary);
    background: rgba(255, 255, 255, 0.1);
}

.navbar-area:not(.is-sticky) .nav-menu-icon {
    color: #fff;
}

/* Icon buttons (globe, currency, user) */

.nav-menu-icon {
    font-size: 14px;
    font-weight: 500;
    color: #1e2329;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.nav-menu-icon:hover,
.nav-menu-icon:focus {
    color: var(--brand-primary);
    background: rgba(123, 104, 238, 0.06);
    text-decoration: none;
}

.nav-menu-icon i.fa-globe,
.nav-menu-icon i.fa-user-circle {
    font-size: 18px;
}

/* Chevron */

.nav-menu-chevron {
    font-size: 9px;
    margin-left: 2px;
    transition: transform 0.2s;
}

/* Dropdown */

.nav-menu-dropdown {
    position: relative;
    display: inline-flex;
}

.nav-menu-dropdown__panel {
    position: absolute;
    top: 100%;
    left: 0;
    /* Default panel (Trading menu) — wide enough for the longest
       label in the menu without wrapping. Both __panel and
       __panel--right keep the same width for consistency. */
    min-width: 280px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 4px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 100;
}

.nav-menu-dropdown__panel--right {
    left: auto;
    right: 0;
    /* Matches __panel above. Originally 220px which was too narrow
       for "Скачать на iOS [Soon]" / "Персональная информация";
       white-space: nowrap on __title forces single-line, the panel
       auto-grows past min-width if needed. */
    min-width: 280px;
}

.nav-menu-dropdown:hover .nav-menu-dropdown__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu-dropdown:hover .nav-menu-chevron {
    transform: rotate(180deg);
}

/* Dropdown items */

.nav-menu-dropdown__item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

.nav-menu-dropdown__item:hover {
    background: var(--bg-page);
    text-decoration: none;
}

.nav-menu-dropdown__item + .nav-menu-dropdown__item {
    border-top: 1px solid #f1f1f1;
}

.nav-menu-dropdown__title {
    font-size: 14px;
    font-weight: 600;
    color: #1e2329;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Long labels (e.g. "Персональная информация", "Download for iOS")
       used to wrap onto a second line when the panel's min-width was
       too tight. Forcing nowrap + letting the panel grow to fit content
       guarantees single-line items regardless of locale word lengths. */
    white-space: nowrap;
}

.nav-menu-dropdown__title > i {
    width: 16px;
    text-align: center;
    font-size: 14px;
    color: #707a8a;
}

.nav-menu-dropdown__item:hover .nav-menu-dropdown__title > i {
    color: var(--brand-primary);
}

.nav-menu-dropdown__item:hover .nav-menu-dropdown__title {
    color: var(--brand-primary);
}

.nav-menu-dropdown__desc {
    font-size: 12px;
    color: #999;
    font-weight: 400;
    margin-top: 3px;
}

.nav-menu-dropdown__item--disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Coming soon badge */

.badge-coming-soon {
    display: inline-block;
    background: var(--brand-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.2;
    vertical-align: middle;
    /* Keep the badge sized to its own text inside flex parents. */
    flex: 0 0 auto;
    width: auto;
    align-self: center;
}

/* Hide old navbar-nav when new menu is present */

.nav-menu-links ~ .navbar-nav {
    display: none;
}

/* Responsive: hide nav-menu on mobile, show drawer toggle */

@media only screen and (max-width: 991px) {
    .nav-menu-links,
    .nav-menu-right {
        display: none !important;
    }
}

/**************************************
 ** - 04 - 04.1 - Home + Slider Area CSS
 **************************************/

.home-area {
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 800px;
    background: linear-gradient(to bottom, #370b6f, #00429b, #006dba, #0095ce, #2dbcdc);
}

.main-banner-content h1 {
    font-size: 55px;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.main-banner-content p {
    color: #ffffff;
    font-size: 16px;
    margin: 0 0 0 0;
}

.main-banner-content .banner-btn {
    margin-top: 25px;
}

.home-area .banner-image {
    text-align: center;
    padding-top: 50px;
}

.home-area .creative-shape {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

/**************************************
 ** - 04.1 - Home Slider Section CSS
 **************************************/

.slider {
    position: relative;
}

.slider.fixed-slider {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.slider .swiper-slide-active {
    z-index: 3;
}

.slider .parallax-slider {
    position: relative;
}

.slider .parallax-slider .swiper-slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 50px;
}

.slider .parallax-slider .swiper-slide .bg-img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
}

.slider .parallax-slider .swiper-slide-active .caption h1 {
    opacity: 1;
    animation: fadeInLeft .8s;
    animation-delay: .3s;
}

.slider .parallax-slider .caption {
    text-align: left;
    padding-top: 70px;
}

.slider .parallax-slider .caption h1 {
    font-size: 55px;
    font-weight: 800;
    color: #fff;
    opacity: 1;
    visibility: visible;
    line-height: normal;
}

.slider .parallax-slider .caption p {
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    opacity: 1;
}

.slider .parallax-slider .swiper-slide-active .caption p {
    color: #fff;
    font-weight: 500;
    opacity: 1;
    animation: fadeInRight .8s;
}

.slider .parallax-slider .swiper-slide-active .caption .home-slider-btn {
    position: relative;
    opacity: 1;
    animation: fadeInLeft 1s;
    transition: all .4s;
}

.slider .control-text {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 100%;
    height: auto;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.slider .control-text .swiper-nav-ctrl {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-left: 15px;
    margin-right: 15px;
    position: static;
    width: auto;
    height: auto;
    display: inline-block;
    background: transparent;
    padding: 5px 10px;
    border-radius: 3px;
}

.slider .control-text .swiper-nav-ctrl:after {
    font-size: 20px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    display: block;
    text-align: center;
    background: rgb(0, 0, 0, 0.3);
}

.slider .swiper-pagination-bullets {
    bottom: 20px;
}

.slider .swiper-pagination-bullet {
    background: #fff;
    opacity: .4;
}

.slider .swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1;
}

/**************************************
 ** - 05 - Services Section CSS
 *************************************/

.services-section.section-padding {
    padding-top: 65px;
}

.services-section .section-title {
    margin-bottom: 35px;
}

.wallet-balance-info,
.single-services-item {
    position: relative;
    z-index: 1;
    display: block;
    padding: 35px 30px;
    text-align: left;
    border-radius: 3px;
    background-color: #ffffff;
    margin-top: 30px;
    box-shadow: 5px 7px 15px 2px rgba(82, 90, 101, 0.12);
    transition: all 500ms ease-out;
    will-change: transform;
}

.services-icon {
    display: inline-block;
    margin-bottom: 20px;
    transition: 0.5s;
}

.services-icon i {
    color: var(--color-warning);
    font-size: 55px;
    will-change: transform;
    transition: 0.5s;
}

.single-services-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
    transition: all 400ms ease-out;
}

@media (min-width: 768px) and (max-width: 991px) {
    .single-services-item h3 {
        font-size: 16px;
    }

    .single-services-item h2 {
        font-size: 1rem;
    }

    .single-services-item small {
        font-size: 0.8rem;
    }

    .single-services-item .balance-amount {
        font-size: .6rem;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .single-services-item h2 {
        font-size: 1.5rem;
    }
}

.single-services-item h3 a {
    display: inline-block;
}

.single-services-item p {
    font-size: 15px;
    margin-top: 15px;
    margin-bottom: 0;
    transition: all 400ms ease-out;
    will-change: transform;
}

.single-services-item .services-btn-link {
    margin-top: 16px;
}

.single-services-item .services-btn-link .services-link {
    display: inline-block;
    font-size: 16px;
    color: var(--color-warning);
    letter-spacing: 0.5px;
    font-weight: 700;
    transition: all 400ms ease-out;
    text-decoration: underline;
    font-family: 'Dosis', sans-serif;
}

.single-services-item:hover {
    transform: translateY(-10px);
}

.single-services-item:hover .services-icon i {
    transform: rotateY(180deg);
}

/**************************************
 ** - 06 - About Section CSS
 **************************************/

.about-area {
    position: relative;
    z-index: 1;
}

.about-content h6 {
    color: var(--brand-primary);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-content h2 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 20px;
}

.about-content-text p {
    margin-bottom: 15px;
}

.about-content-text .button {
    margin-top: 10px;
}

.about-area .skills {
    margin-top: 30px;
}

.about-area .skills .skill-item {
    margin-bottom: 25px;
}

.about-area .skills .skill-item:last-child {
    margin-bottom: 0px;
}

.about-area .skills .skill-item h6 {
    position: relative;
    z-index: 4;
    font-size: 15px;
    letter-spacing: 0.7px;
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 10px;
}

.about-area .skills .skill-item h6 em {
    float: right;
    font-size: 15px;
    font-style: normal;
}

.about-area .skills .skill-item .skill-progress {
    position: relative;
    height: 5px;
    border-radius: 5px;
    background: #f1f1fa;
}

.about-area .skills .skill-item .skill-progress .progres {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 10%;
    background-color: var(--brand-primary);
    transition: all 1.5s;
}

.about-btn-box {
    margin-top: 35px;
    display: inline-block;
}

.about-image {
    position: relative;
    text-align: center;
    margin-left: 0px;
}

.about-image img {
    border-radius: 3px;
}

.about-image .years-design {
    position: absolute;
    left: -75px;
    bottom: 25px;
    text-align: left;
    padding: 20px 40px 20px 40px;
    background: #ffffff;
    border-bottom: 2px solid var(--color-orange);
    box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1);
}

.about-image .years-design h2 {
    font-size: 70px;
    font-weight: 700;
    background: url('../img/slider-2.jpg') no-repeat;
    background-position: 47% 53%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}

.about-image .years-design h5 {
    color: var(--color-orange);
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    text-transform: uppercase;
}

/**************************************
 ** - 07 - Overview Section CSS
 **************************************/

.overview-content h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-orange);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.overview-content h2 {
    font-size: 38px;
    color: var(--text-heading);
    margin: 8px 0 15px 0;
}

.overview-content p {
    margin: 0 0 0 0;
}

.overview-content .features-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 16px;
    margin-left: -10px;
    margin-right: -10px;
}

.overview-content .features-list li {
    flex: 0 0 50%;
    max-width: 50%;
    margin-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.overview-content .features-list li span {
    display: block;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 15px 15px;
    z-index: 1;
    position: relative;
    transition: 0.4s;
    color: var(--text-heading);
    border-left: 2px solid var(--brand-primary);
    font-weight: 600;
    font-size: 14px;
    box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1);
}

.overview-content .features-list li span::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background-color: var(--brand-primary);
    z-index: -1;
    transition: 0.4s;
}

.overview-content .features-list li span:hover {
    color: #ffffff;
}

.overview-content .features-list li span:hover::before {
    width: 100%;
}

.overview-image {
    text-align: center;
}

.fullwidth-page {
    position: relative;
    min-height: calc(100vh - 97px);
    display: flex;
    align-items: stretch;
    background: url(../img/banner-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/**************************************
 ** - 08 - Counter Section CSS
 *************************************/

.counter-area {
    text-align: center;
    position: relative;
    color: #fff;
    text-align: center;
    background: url(../img/banner-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
}

.counter-area::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    opacity: .6;
    background: #03030c;
}

.counter-area .section-title h5 {
    color: #ffffff;
}

.counter-area .section-title h2 {
    color: #fff;
}

.counter-contents h2 {
    color: #fff;
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 5px;
    word-spacing: -10px;
}

.counter-contents h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

/**************************************
 ** - 12 - Hire Section CSS
 **************************************/

.hire-section {
    position: relative;
    z-index: 1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding: 70px 0;
}

.hire-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.hire-content h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-orange);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hire-content h2 {
    font-size: 38px;
    margin: 0;
    font-weight: 700;
}

.hire-content p {
    font-size: 18px;
    margin: 20px 0 0 0;
}

.hire-content .hire-btn {
    margin-top: 20px;
}

.hire-content .hire-btn .default-btn {
    margin-right: 15px;
}

/**************************************
 ** - 18 - Pricing Page Area CSS
 **************************************/

.single-pricing-content {
    padding: 30px 30px;
    background: #ffffff;
    text-align: left;
    border-radius: 3px;
    box-shadow: -1px 3px 20px 0px rgb(82 90 101 / 10%);
    transition: all 0.4s ease 0s;
    margin-bottom: 30px;
}

.single-pricing-content:hover {
    box-shadow: 0 7px 25px rgba(31, 45, 61, 0.1);
    transform: translateY(-10px);
}

.price-tag {
    position: relative;
}

.price-tag h3 {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 0 0 25px 25px;
    background: #28a745;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    top: -30px;
    left: -20px;
    text-align: center;
}

.price-heading {
    margin-bottom: 20px;
    text-align: center;
}

.price-heading .price-usd h2 {
    font-size: 50px;
    font-weight: 900;
    color: #6f64e7;
    padding: 15px 0;
}

.price-heading .price-usd h3 {
    font-size: 30px;
    font-weight: 900;
    color: #6f64e7;
    padding: 15px 0;
}

.price-heading .price-usd .price-small-text {
    font-size: 15px;
    display: block;
    font-weight: 500;
    color: #3e3e3e;
    margin-top: -8px;
}

.price-body ul li {
    display: block;
    border-top: 1px dashed;
    padding: 10px 0;
    border-color: #dfe4e8;
}

.verification-bonus {
    font-weight: bolder;
    font-size: 24px;
    letter-spacing: 0.3px;
    color: var(--text-body);
}

.verification-bonus-title {
    letter-spacing: 0.3px;
    color: var(--text-body);
}

.verification-item + .verification-item {
    margin-top: 25px;
}

.verification-bonus i {
    color: var(--color-warning);
    font-size: 18px;
}

.single-pricing-content .price-body {
    padding-left: 20px;
}

.price-body ul li:last-child {
    padding-bottom: 0;
}

.price-body ul li i {
    margin-right: 5px;
    width: 15px;
}

.price-body .offer-list-none {
    color: #b7b7b7;
}

.single-pricing-content .price-btn {
    margin-top: 25px;
    text-align: center;
}

.single-pricing-content .price-btn .price-btn-one {
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    display: inline-block;
    background-color: var(--brand-primary);
    color: #ffffff;
    border-radius: 3px;
    border: 2px solid var(--brand-primary);
    transition: 0.4s;
}

.single-pricing-content .price-btn .price-btn-one:hover {
    background-color: transparent;
    color: var(--brand-primary);
}

/**************************************
 ** - 22 - Contact Page Section CSS
 **************************************/

.contact-section {
}

.settings-form .form-group,
.contact-form .form-group {
    margin-bottom: 30px;
}

.settings-form form .custom-select:after,
.contact-form form .custom-select:after {
    border: 0;
}

.settings-form form .form-control,
.contact-form form .form-control {
    background-color: #ffffff;
    border: none;
    height: 55px;
    font-size: 15px;
    border-left: 3px solid var(--brand-primary);
    box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.15);
}

.form-control + span {
    position: relative;
}

.form-control + span::after {
    content: "Все";
    position: absolute;
    top: 16px;
    left: calc(100% - 35px);
    pointer-events: all;
    cursor: pointer;
    font-weight: bold;
    color: var(--color-warning);
    z-index: 999;
}

.settings-form form .form-control.form-control-sm,
.contact-form form .form-control.form-control-sm {
    height: 35px;
}

.contact-form form .input-group-text,
.contact-form form .custom-select {
    background-color: #ffffff;
    height: 55px;
    line-height: 42px;
    font-size: 15px;
    box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.15);
}

input + .input-group-append .custom-select {
    box-shadow: 10px 0px 30px 0px rgba(148, 146, 245, 0.15);
}

.settings-form form .form-control:focus,
.contact-form form .form-control:focus {
    border-left: 3px solid var(--brand-primary);
    box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.5);
}

.settings-form form textarea.form-control,
.contact-form form textarea.form-control {
    height: auto;
    padding-top: 15px;
    line-height: initial;
}

.settings-form form .btn,
.contact-form form .btn {
    margin-top: 8px;
    box-shadow: 0px 5px 28.5px 1.5px rgba(149, 152, 200, 0.2);
}

.settings-form form .help-block ul,
.contact-form form .help-block ul {
    padding-left: 0;
    list-style-type: none;
    margin-top: 5px;
    margin-bottom: 0;
}

.settings-form form .help-block ul li,
.contact-form form .help-block ul li {
    color: red;
    font-weight: 400;
}

.contact-info-wrapper {
    padding: 100px 0;
}

.contact-info-wrapper .section-title {
    text-align: center;
    margin-bottom: 45px;
}

.contact-info-content {
    background: #fff;
    margin-top: 30px;
    padding: 25px 20px;
    text-align: center;
    border-radius: 5px;
    border-top: 3px solid var(--brand-primary);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
}

.contact-info-content h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.contact-info-content a {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: block;
    line-height: 1.5;
}

.contact-info-content p {
    font-size: 15px;
    margin-bottom: 12px;
}

.contact-section .form-message.success {
    background: #03b103;
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
}

.contact-section .form-message.error {
    background: #ff4d15;
    color: #fff;
    padding: 10px 15px;
    border-radius: 3px;
}

/*****************************************
 ** - 28 - All Page Footer Section CSS
 ******************************************/

.footer-subscribe-wrapper {
    position: relative;
    z-index: 1;
    background-color: #1c1c23;
}

.footer-heading {
    margin-bottom: 25px;
}

.footer-heading h3 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    margin: 0 0 0 0;
    position: relative;
    border-bottom: 1px solid #777;
    padding-bottom: 10px;
}

.single-footer-widget .footer-social {
    padding-left: 0;
    margin-bottom: 0;
    margin-top: 20px;
}

.single-footer-widget .footer-social li {
    display: inline-block;
    margin-right: 10px;
}

.single-footer-widget .footer-social li:last-child {
    margin-right: 0;
}

.single-footer-widget .footer-social i {
    display: inline-block;
    height: 35px;
    width: 35px;
    line-height: 35px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 50px;
    color: var(--brand-primary);
    transition: 0.4s;
    text-align: center;
}

.single-footer-widget .footer-social i::before {
    font-size: 15px;
}

.single-footer-widget .footer-social i:hover {
    background-color: var(--brand-primary);
    color: #ffffff;
    border: 1px solid var(--brand-primary);
}

.single-footer-widget p {
    font-size: 15px;
    color: var(--bg-hover);
    font-weight: 400;
}

.single-footer-widget .footer-heading {
    margin-bottom: 25px;
}

.single-footer-widget .footer-heading h3 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
    margin: 0 0 0 0;
}

.single-footer-widget .footer-quick-links {
    padding-left: 0;
    margin-bottom: 0;
}

.single-footer-widget .footer-quick-links li {
    list-style-type: none;
    padding-bottom: 18px;
}

.single-footer-widget .footer-quick-links li:last-child {
    padding-bottom: 0;
}

.single-footer-widget .footer-quick-links li a {
    display: inline-block;
    color: var(--bg-hover);
    font-size: 15px;
    font-weight: 400;
}

.single-footer-widget .footer-quick-links li a:hover {
    color: var(--brand-primary);
    text-decoration: underline;
    transition: 0.4s;
}

.single-footer-widget .footer-info-contact {
    position: relative;
    padding-left: 35px;
    margin-bottom: 16px;
}

.single-footer-widget .footer-info-contact:last-child {
    margin-bottom: 0;
}

.single-footer-widget .footer-info-contact i {
    color: #ffffff;
    position: absolute;
    left: 0;
    top: 0px;
}

.single-footer-widget .footer-info-contact i::before {
    font-size: 20px;
}

.single-footer-widget .footer-info-contact h3 {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.single-footer-widget .footer-info-contact span {
    font-size: 15px;
    color: var(--bg-hover);
    font-weight: 400;
}

.single-footer-widget .footer-info-contact span a {
    font-size: 15px;
    color: var(--bg-hover);
    font-weight: 400;
    transition: 0.4s;
}

.single-footer-widget .footer-info-contact span a:hover {
    color: var(--brand-primary);
}

/*****************************************
 ** - 29 - Page Copyright Section CSS
 ******************************************/

.copyright-area {
    background-color: #212129;
    padding: 35px 0;
}

.copyright-area p {
    color: var(--bg-hover);
    font-size: 15px;
}

.copyright-area p a {
    color: var(--bg-hover);
    display: inline-block;
    font-weight: 600;
}

.copyright-area p a:hover {
    color: var(--brand-primary);
}

.copyright-area ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style-type: none;
    text-align: right;
}

.copyright-area ul li {
    display: inline-block;
    color: var(--bg-hover);
    font-size: 15px;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}

.copyright-area ul li a {
    display: inline-block;
    color: var(--bg-hover);
}

.copyright-area ul li a:hover {
    color: var(--brand-primary);
}

.copyright-area ul li::before {
    content: '';
    position: absolute;
    top: 5px;
    right: -13px;
    width: 1px;
    height: 14px;
    background-color: #ffffff;
}

.copyright-area ul li:last-child {
    margin-right: 0;
}

.copyright-area ul li:last-child::before {
    display: none;
}

.copyright-area ul li:first-child {
    margin-left: 0;
}

.registration-section-title {
    text-align: center;
    line-height: 1.5;
}

.registration-section-title h2 {
    font-size: 40px;
    color: var(--text-heading);
    margin: 10px 0 0 0;
    font-weight: 800;
}

.input-group .input-group-text {
    background-color: #ffffff;
    border: 0;
    color: var(--brand-primary);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.text-7b68ee {
    color: var(--brand-primary);
}

.text-ff561d {
    color: var(--color-warning);
}

.dropdown-wallets-menu a {
    font-size: 14px;
    font-weight: 500;
    color: #212529;
    letter-spacing: normal;
}

.custom-select {
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    font-size: 14px;
    font-weight: 400;
    height: 42px;
    line-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
    width: 100px;
}

.custom-select:disabled {
    background-color: #e9ecef;
}

a.page-numbers.disabled {
    opacity: .6;
    pointer-events: none;
}

#clipboard-wallet-number {
    cursor: pointer;
}

.modal-header h5 {
    font-weight: 500;
}

.wallet-balance {
    color: var(--color-warning);
    cursor: pointer;
    font-weight: 700;
}

.crypto-coin-item {
    justify-content: center;
    border: #CCCCCC 1px solid;
    margin: 5px;
    padding: 15px 10px;
    border-radius: 8px;
}

.crypto-coin-item:hover {
    background-color: #f5f5f5;
}

.crypto-coin-item a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.existing-wallet {
    background-color: var(--bg-page);
    cursor: not-allowed;
}

.existing-wallet > * {
    opacity: .65;
}

.existing-wallet a {
    pointer-events: none;
    cursor: not-allowed;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.alert-success-gh {
    color: #ffffff;
    background-color: var(--brand-primary);
    border-color: #c3e6cb;
}

.gh-user {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTAwMCIgem9vbUFuZFBhbj0ibWFnbmlmeSIgdmlld0JveD0iMCAwIDc1MCA3NDkuOTk5OTk1IiBoZWlnaHQ9IjEwMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHZlcnNpb249IjEuMCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJmZDBhYmM2ZGE0Ij48cGF0aCBkPSJNIDI3NSAxMjkuODUxNTYyIEwgNDc1IDEyOS44NTE1NjIgTCA0NzUgMzY2IEwgMjc1IDM2NiBaIE0gMjc1IDEyOS44NTE1NjIgIiBjbGlwLXJ1bGU9Im5vbnplcm8iLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iNzU4Zjk3OWU1YiI+PHBhdGggZD0iTSAxNzUuMDQyOTY5IDQyMCBMIDU3NC43OTI5NjkgNDIwIEwgNTc0Ljc5Mjk2OSA1OTQuODUxNTYyIEwgMTc1LjA0Mjk2OSA1OTQuODUxNTYyIFogTSAxNzUuMDQyOTY5IDQyMCAiIGNsaXAtcnVsZT0ibm9uemVybyIvPjwvY2xpcFBhdGg+PC9kZWZzPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0gMzc1IDc1MCBDIDE2Ny44MjQyMTkgNzUwIDAgNTgxLjAxOTUzMSAwIDM3NSBDIDAgMTY4Ljk4MDQ2OSAxNjcuODI0MjE5IDAgMzc1IDAgQyA1ODIuMTc1NzgxIDAgNzUwIDE2Ny44MjQyMTkgNzUwIDM3NSBDIDc1MCA1ODIuMTc1NzgxIDU4MS4wMTk1MzEgNzUwIDM3NSA3NTAgWiBNIDM3NSAyMy4xNDg0MzggQyAxODAuNTU0Njg4IDIzLjE0ODQzOCAyMy4xNDg0MzggMTgwLjU1NDY4OCAyMy4xNDg0MzggMzc1IEMgMjMuMTQ4NDM4IDU2OS40NDUzMTIgMTgwLjU1NDY4OCA3MjYuODUxNTYyIDM3NSA3MjYuODUxNTYyIEMgNTY5LjQ0NTMxMiA3MjYuODUxNTYyIDcyNi44NTE1NjIgNTY5LjQ0NTMxMiA3MjYuODUxNTYyIDM3NSBDIDcyNi44NTE1NjIgMTgwLjU1NDY4OCA1NjguMjg1MTU2IDIzLjE0ODQzOCAzNzUgMjMuMTQ4NDM4IFogTSAzNzUgMjMuMTQ4NDM4ICIgZmlsbC1vcGFjaXR5PSIxIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48ZyBjbGlwLXBhdGg9InVybCgjZmQwYWJjNmRhNCkiPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0gNDc0Ljc4MTI1IDI0Ny45MTc5NjkgQyA0NzQuNzgxMjUgMjQ5Ljg0NzY1NiA0NzQuNzM4MjgxIDI1MS43ODEyNSA0NzQuNjYwMTU2IDI1My43MTA5MzggQyA0NzQuNTc4MTI1IDI1NS42NDA2MjUgNDc0LjQ2MDkzOCAyNTcuNTY2NDA2IDQ3NC4zMDA3ODEgMjU5LjQ4ODI4MSBDIDQ3NC4xNDA2MjUgMjYxLjQxMDE1NiA0NzMuOTM3NSAyNjMuMzI4MTI1IDQ3My42OTkyMTkgMjY1LjI0MjE4OCBDIDQ3My40NjA5MzggMjY3LjE1MjM0NCA0NzMuMTc5Njg4IDI2OS4wNTQ2ODggNDcyLjg1OTM3NSAyNzAuOTQ5MjE5IEMgNDcyLjU0Mjk2OSAyNzIuODQzNzUgNDcyLjE4MzU5NCAyNzQuNzMwNDY5IDQ3MS43ODkwNjIgMjc2LjYwNTQ2OSBDIDQ3MS4zOTA2MjUgMjc4LjQ4MDQ2OSA0NzAuOTUzMTI1IDI4MC4zMzk4NDQgNDcwLjQ4MDQ2OSAyODIuMTg3NSBDIDQ3MC4wMDM5MDYgMjg0LjAzOTA2MiA0NjkuNDkyMTg4IDI4NS44NzEwOTQgNDY4Ljk0MTQwNiAyODcuNjkxNDA2IEMgNDY4LjM5MDYyNSAyODkuNTExNzE5IDQ2Ny44MDQ2ODggMjkxLjMxMjUgNDY3LjE3OTY4OCAyOTMuMDk3NjU2IEMgNDY2LjU1NDY4OCAyOTQuODgyODEyIDQ2NS44OTA2MjUgMjk2LjY0ODQzOCA0NjUuMTkxNDA2IDI5OC4zOTQ1MzEgQyA0NjQuNDkyMTg4IDMwMC4xNDQ1MzEgNDYzLjc1NzgxMiAzMDEuODY3MTg4IDQ2Mi45ODgyODEgMzAzLjU3NDIxOSBDIDQ2Mi4yMTg3NSAzMDUuMjc3MzQ0IDQ2MS40MTQwNjIgMzA2Ljk1NzAzMSA0NjAuNTcwMzEyIDMwOC42MTMyODEgQyA0NTkuNzMwNDY5IDMxMC4yNzM0MzggNDU4Ljg1OTM3NSAzMTEuOTAyMzQ0IDQ1Ny45NDkyMTkgMzEzLjUxMTcxOSBDIDQ1Ny4wNDI5NjkgMzE1LjExNzE4OCA0NTYuMTAxNTYyIDMxNi42OTUzMTIgNDU1LjEyODkwNiAzMTguMjUgQyA0NTQuMTUyMzQ0IDMxOS44MDA3ODEgNDUzLjE0ODQzOCAzMjEuMzI0MjE5IDQ1Mi4xMTMyODEgMzIyLjgxNjQwNiBDIDQ1MS4wNzQyMTkgMzI0LjMxMjUgNDUwLjAwNzgxMiAzMjUuNzczNDM4IDQ0OC45MTAxNTYgMzI3LjIwNzAzMSBDIDQ0Ny44MTI1IDMyOC42MzY3MTkgNDQ2LjY4NzUgMzMwLjAzNTE1NiA0NDUuNTMxMjUgMzMxLjQwMjM0NCBDIDQ0NC4zNzUgMzMyLjc2OTUzMSA0NDMuMTkxNDA2IDMzNC4xMDE1NjIgNDQxLjk4MDQ2OSAzMzUuMzk4NDM4IEMgNDQwLjc2OTUzMSAzMzYuNjk1MzEyIDQzOS41MzEyNSAzMzcuOTU3MDMxIDQzOC4yNjk1MzEgMzM5LjE4MzU5NCBDIDQzNy4wMDM5MDYgMzQwLjQxMDE1NiA0MzUuNzE4NzUgMzQxLjU5NzY1NiA0MzQuNDA2MjUgMzQyLjc1IEMgNDMzLjA5Mzc1IDM0My44OTg0MzggNDMxLjc1NzgxMiAzNDUuMDExNzE5IDQzMC4zOTg0MzggMzQ2LjA4NTkzOCBDIDQyOS4wMzkwNjIgMzQ3LjE2MDE1NiA0MjcuNjYwMTU2IDM0OC4xOTE0MDYgNDI2LjI1NzgxMiAzNDkuMTgzNTk0IEMgNDI0Ljg1NTQ2OSAzNTAuMTc5Njg4IDQyMy40MzM1OTQgMzUxLjEzMjgxMiA0MjEuOTkyMTg4IDM1Mi4wNDI5NjkgQyA0MjAuNTUwNzgxIDM1Mi45NTMxMjUgNDE5LjA4OTg0NCAzNTMuODIwMzEyIDQxNy42MTMyODEgMzU0LjY0ODQzOCBDIDQxNi4xMzY3MTkgMzU1LjQ3MjY1NiA0MTQuNjQwNjI1IDM1Ni4yNTc4MTIgNDEzLjEzMjgxMiAzNTYuOTk2MDk0IEMgNDExLjYyMTA5NCAzNTcuNzM0Mzc1IDQxMC4wOTc2NTYgMzU4LjQyOTY4OCA0MDguNTU4NTk0IDM1OS4wODIwMzEgQyA0MDcuMDE5NTMxIDM1OS43MzA0NjkgNDA1LjQ2ODc1IDM2MC4zMzk4NDQgNDAzLjkwNjI1IDM2MC44OTg0MzggQyA0MDIuMzM5ODQ0IDM2MS40NjA5MzggNDAwLjc2NTYyNSAzNjEuOTc2NTYyIDM5OS4xNzk2ODggMzYyLjQ0NTMxMiBDIDM5Ny41OTM3NSAzNjIuOTE0MDYyIDM5NiAzNjMuMzM1OTM4IDM5NC4zOTg0MzggMzYzLjcxNDg0NCBDIDM5Mi43OTY4NzUgMzY0LjA4OTg0NCAzOTEuMTg3NSAzNjQuNDIxODc1IDM4OS41NzAzMTIgMzY0LjcwMzEyNSBDIDM4Ny45NTMxMjUgMzY0Ljk4ODI4MSAzODYuMzMyMDMxIDM2NS4yMjY1NjIgMzg0LjcwMzEyNSAzNjUuNDE0MDYyIEMgMzgzLjA3ODEyNSAzNjUuNjA1NDY5IDM4MS40NDkyMTkgMzY1Ljc0NjA5NCAzNzkuODE2NDA2IDM2NS44Mzk4NDQgQyAzNzguMTgzNTk0IDM2NS45Mzc1IDM3Ni41NTA3ODEgMzY1Ljk4NDM3NSAzNzQuOTE3OTY5IDM2NS45ODQzNzUgQyAzNzMuMjgxMjUgMzY1Ljk4NDM3NSAzNzEuNjQ4NDM4IDM2NS45Mzc1IDM3MC4wMTU2MjUgMzY1LjgzOTg0NCBDIDM2OC4zODI4MTIgMzY1Ljc0NjA5NCAzNjYuNzUzOTA2IDM2NS42MDU0NjkgMzY1LjEyODkwNiAzNjUuNDE0MDYyIEMgMzYzLjUgMzY1LjIyNjU2MiAzNjEuODc4OTA2IDM2NC45ODgyODEgMzYwLjI2MTcxOSAzNjQuNzAzMTI1IEMgMzU4LjY0NDUzMSAzNjQuNDIxODc1IDM1Ny4wMzUxNTYgMzY0LjA4OTg0NCAzNTUuNDMzNTk0IDM2My43MTQ4NDQgQyAzNTMuODMyMDMxIDM2My4zMzU5MzggMzUyLjIzODI4MSAzNjIuOTE0MDYyIDM1MC42NTIzNDQgMzYyLjQ0NTMxMiBDIDM0OS4wNjY0MDYgMzYxLjk3NjU2MiAzNDcuNDkyMTg4IDM2MS40NjA5MzggMzQ1LjkyNTc4MSAzNjAuODk4NDM4IEMgMzQ0LjM2MzI4MSAzNjAuMzM5ODQ0IDM0Mi44MTI1IDM1OS43MzA0NjkgMzQxLjI3MzQzOCAzNTkuMDgyMDMxIEMgMzM5LjczNDM3NSAzNTguNDI5Njg4IDMzOC4yMTA5MzggMzU3LjczNDM3NSAzMzYuNjk5MjE5IDM1Ni45OTYwOTQgQyAzMzUuMTkxNDA2IDM1Ni4yNTc4MTIgMzMzLjY5NTMxMiAzNTUuNDcyNjU2IDMzMi4yMTg3NSAzNTQuNjQ4NDM4IEMgMzMwLjc0MjE4OCAzNTMuODIwMzEyIDMyOS4yODEyNSAzNTIuOTUzMTI1IDMyNy44Mzk4NDQgMzUyLjA0Mjk2OSBDIDMyNi4zOTg0MzggMzUxLjEzMjgxMiAzMjQuOTc2NTYyIDM1MC4xNzk2ODggMzIzLjU3NDIxOSAzNDkuMTgzNTk0IEMgMzIyLjE3NTc4MSAzNDguMTkxNDA2IDMyMC43OTI5NjkgMzQ3LjE2MDE1NiAzMTkuNDMzNTk0IDM0Ni4wODU5MzggQyAzMTguMDc0MjE5IDM0NS4wMTE3MTkgMzE2LjczODI4MSAzNDMuODk4NDM4IDMxNS40MjU3ODEgMzQyLjc1IEMgMzE0LjExMzI4MSAzNDEuNTk3NjU2IDMxMi44MjgxMjUgMzQwLjQxMDE1NiAzMTEuNTYyNSAzMzkuMTgzNTk0IEMgMzEwLjMwMDc4MSAzMzcuOTU3MDMxIDMwOS4wNjI1IDMzNi42OTUzMTIgMzA3Ljg1MTU2MiAzMzUuMzk4NDM4IEMgMzA2LjY0MDYyNSAzMzQuMTAxNTYyIDMwNS40NTcwMzEgMzMyLjc2OTUzMSAzMDQuMzAwNzgxIDMzMS40MDIzNDQgQyAzMDMuMTQ0NTMxIDMzMC4wMzUxNTYgMzAyLjAxOTUzMSAzMjguNjM2NzE5IDMwMC45MjE4NzUgMzI3LjIwNzAzMSBDIDI5OS44MjQyMTkgMzI1Ljc3MzQzOCAyOTguNzU3ODEyIDMyNC4zMTI1IDI5Ny43MTg3NSAzMjIuODE2NDA2IEMgMjk2LjY4MzU5NCAzMjEuMzI0MjE5IDI5NS42Nzk2ODggMzE5LjgwMDc4MSAyOTQuNzAzMTI1IDMxOC4yNSBDIDI5My43MzA0NjkgMzE2LjY5NTMxMiAyOTIuNzg5MDYyIDMxNS4xMTcxODggMjkxLjg4MjgxMiAzMTMuNTExNzE5IEMgMjkwLjk3MjY1NiAzMTEuOTAyMzQ0IDI5MC4xMDE1NjIgMzEwLjI3MzQzOCAyODkuMjYxNzE5IDMwOC42MTMyODEgQyAyODguNDE3OTY5IDMwNi45NTcwMzEgMjg3LjYxMzI4MSAzMDUuMjc3MzQ0IDI4Ni44NDM3NSAzMDMuNTc0MjE5IEMgMjg2LjA3NDIxOSAzMDEuODY3MTg4IDI4NS4zMzk4NDQgMzAwLjE0NDUzMSAyODQuNjQwNjI1IDI5OC4zOTQ1MzEgQyAyODMuOTQxNDA2IDI5Ni42NDg0MzggMjgzLjI4MTI1IDI5NC44ODI4MTIgMjgyLjY1MjM0NCAyOTMuMDk3NjU2IEMgMjgyLjAyNzM0NCAyOTEuMzEyNSAyODEuNDQxNDA2IDI4OS41MTE3MTkgMjgwLjg5MDYyNSAyODcuNjkxNDA2IEMgMjgwLjMzOTg0NCAyODUuODcxMDk0IDI3OS44MjgxMjUgMjg0LjAzOTA2MiAyNzkuMzUxNTYyIDI4Mi4xODc1IEMgMjc4Ljg3ODkwNiAyODAuMzM5ODQ0IDI3OC40NDE0MDYgMjc4LjQ4MDQ2OSAyNzguMDQ2ODc1IDI3Ni42MDU0NjkgQyAyNzcuNjQ4NDM4IDI3NC43MzA0NjkgMjc3LjI4OTA2MiAyNzIuODQzNzUgMjc2Ljk3MjY1NiAyNzAuOTQ5MjE5IEMgMjc2LjY1MjM0NCAyNjkuMDU0Njg4IDI3Ni4zNzEwOTQgMjY3LjE1MjM0NCAyNzYuMTMyODEyIDI2NS4yNDIxODggQyAyNzUuODk0NTMxIDI2My4zMjgxMjUgMjc1LjY5MTQwNiAyNjEuNDEwMTU2IDI3NS41MzEyNSAyNTkuNDg4MjgxIEMgMjc1LjM3MTA5NCAyNTcuNTY2NDA2IDI3NS4yNTM5MDYgMjU1LjY0MDYyNSAyNzUuMTcxODc1IDI1My43MTA5MzggQyAyNzUuMDkzNzUgMjUxLjc4MTI1IDI3NS4wNTA3ODEgMjQ5Ljg0NzY1NiAyNzUuMDUwNzgxIDI0Ny45MTc5NjkgQyAyNzUuMDUwNzgxIDI0NS45ODQzNzUgMjc1LjA5Mzc1IDI0NC4wNTQ2ODggMjc1LjE3MTg3NSAyNDIuMTI1IEMgMjc1LjI1MzkwNiAyNDAuMTk1MzEyIDI3NS4zNzEwOTQgMjM4LjI2NTYyNSAyNzUuNTMxMjUgMjM2LjM0Mzc1IEMgMjc1LjY5MTQwNiAyMzQuNDIxODc1IDI3NS44OTQ1MzEgMjMyLjUwMzkwNiAyNzYuMTMyODEyIDIzMC41OTM3NSBDIDI3Ni4zNzEwOTQgMjI4LjY3OTY4OCAyNzYuNjUyMzQ0IDIyNi43NzczNDQgMjc2Ljk3MjY1NiAyMjQuODgyODEyIEMgMjc3LjI4OTA2MiAyMjIuOTg4MjgxIDI3Ny42NDg0MzggMjIxLjEwMTU2MiAyNzguMDQ2ODc1IDIxOS4yMzA0NjkgQyAyNzguNDQxNDA2IDIxNy4zNTU0NjkgMjc4Ljg3ODkwNiAyMTUuNDkyMTg4IDI3OS4zNTE1NjIgMjEzLjY0NDUzMSBDIDI3OS44MjgxMjUgMjExLjc5Mjk2OSAyODAuMzM5ODQ0IDIwOS45NjA5MzggMjgwLjg5MDYyNSAyMDguMTQwNjI1IEMgMjgxLjQ0MTQwNiAyMDYuMzIwMzEyIDI4Mi4wMjczNDQgMjA0LjUxOTUzMSAyODIuNjUyMzQ0IDIwMi43MzQzNzUgQyAyODMuMjgxMjUgMjAwLjk0OTIxOSAyODMuOTQxNDA2IDE5OS4xODM1OTQgMjg0LjY0MDYyNSAxOTcuNDM3NSBDIDI4NS4zMzk4NDQgMTk1LjY5MTQwNiAyODYuMDc0MjE5IDE5My45NjQ4NDQgMjg2Ljg0Mzc1IDE5Mi4yNjE3MTkgQyAyODcuNjEzMjgxIDE5MC41NTQ2ODggMjg4LjQxNzk2OSAxODguODc1IDI4OS4yNjE3MTkgMTg3LjIxODc1IEMgMjkwLjEwMTU2MiAxODUuNTYyNSAyOTAuOTcyNjU2IDE4My45Mjk2ODggMjkxLjg4MjgxMiAxODIuMzI0MjE5IEMgMjkyLjc4OTA2MiAxODAuNzE0ODQ0IDI5My43MzA0NjkgMTc5LjEzNjcxOSAyOTQuNzAzMTI1IDE3Ny41ODU5MzggQyAyOTUuNjc5Njg4IDE3Ni4wMzEyNSAyOTYuNjgzNTk0IDE3NC41MDc4MTIgMjk3LjcxODc1IDE3My4wMTU2MjUgQyAyOTguNzU3ODEyIDE3MS41MjM0MzggMjk5LjgyNDIxOSAxNzAuMDU4NTk0IDMwMC45MjE4NzUgMTY4LjYyODkwNiBDIDMwMi4wMTk1MzEgMTY3LjE5NTMxMiAzMDMuMTQ0NTMxIDE2NS43OTY4NzUgMzA0LjMwMDc4MSAxNjQuNDI5Njg4IEMgMzA1LjQ1NzAzMSAxNjMuMDY2NDA2IDMwNi42NDA2MjUgMTYxLjczNDM3NSAzMDcuODUxNTYyIDE2MC40MzM1OTQgQyAzMDkuMDYyNSAxNTkuMTM2NzE5IDMxMC4zMDA3ODEgMTU3Ljg3NSAzMTEuNTYyNSAxNTYuNjQ4NDM4IEMgMzEyLjgyODEyNSAxNTUuNDI1NzgxIDMxNC4xMTMyODEgMTU0LjIzNDM3NSAzMTUuNDI1NzgxIDE1My4wODU5MzggQyAzMTYuNzM4MjgxIDE1MS45MzM1OTQgMzE4LjA3NDIxOSAxNTAuODIwMzEyIDMxOS40MzM1OTQgMTQ5Ljc0NjA5NCBDIDMyMC43OTI5NjkgMTQ4LjY3NTc4MSAzMjIuMTc1NzgxIDE0Ny42NDA2MjUgMzIzLjU3NDIxOSAxNDYuNjQ4NDM4IEMgMzI0Ljk3NjU2MiAxNDUuNjUyMzQ0IDMyNi4zOTg0MzggMTQ0LjcwMzEyNSAzMjcuODM5ODQ0IDE0My43OTI5NjkgQyAzMjkuMjgxMjUgMTQyLjg3ODkwNiAzMzAuNzQyMTg4IDE0Mi4wMTE3MTkgMzMyLjIxODc1IDE0MS4xODc1IEMgMzMzLjY5NTMxMiAxNDAuMzU5Mzc1IDMzNS4xOTE0MDYgMTM5LjU3ODEyNSAzMzYuNjk5MjE5IDEzOC44MzU5MzggQyAzMzguMjEwOTM4IDEzOC4wOTc2NTYgMzM5LjczNDM3NSAxMzcuNDAyMzQ0IDM0MS4yNzM0MzggMTM2Ljc1IEMgMzQyLjgxMjUgMTM2LjEwMTU2MiAzNDQuMzYzMjgxIDEzNS40OTYwOTQgMzQ1LjkyNTc4MSAxMzQuOTMzNTk0IEMgMzQ3LjQ5MjE4OCAxMzQuMzc1IDM0OS4wNjY0MDYgMTMzLjg1OTM3NSAzNTAuNjUyMzQ0IDEzMy4zODY3MTkgQyAzNTIuMjM4MjgxIDEzMi45MTc5NjkgMzUzLjgzMjAzMSAxMzIuNDk2MDk0IDM1NS40MzM1OTQgMTMyLjExNzE4OCBDIDM1Ny4wMzUxNTYgMTMxLjc0MjE4OCAzNTguNjQ0NTMxIDEzMS40MTAxNTYgMzYwLjI2MTcxOSAxMzEuMTI4OTA2IEMgMzYxLjg3ODkwNiAxMzAuODQzNzUgMzYzLjUgMTMwLjYwOTM3NSAzNjUuMTI4OTA2IDEzMC40MTc5NjkgQyAzNjYuNzUzOTA2IDEzMC4yMzA0NjkgMzY4LjM4MjgxMiAxMzAuMDg1OTM4IDM3MC4wMTU2MjUgMTI5Ljk5MjE4OCBDIDM3MS42NDg0MzggMTI5Ljg5ODQzOCAzNzMuMjgxMjUgMTI5Ljg1MTU2MiAzNzQuOTE3OTY5IDEyOS44NTE1NjIgQyAzNzYuNTUwNzgxIDEyOS44NTE1NjIgMzc4LjE4MzU5NCAxMjkuODk4NDM4IDM3OS44MTY0MDYgMTI5Ljk5MjE4OCBDIDM4MS40NDkyMTkgMTMwLjA4NTkzOCAzODMuMDc4MTI1IDEzMC4yMzA0NjkgMzg0LjcwMzEyNSAxMzAuNDE3OTY5IEMgMzg2LjMzMjAzMSAxMzAuNjA5Mzc1IDM4Ny45NTMxMjUgMTMwLjg0Mzc1IDM4OS41NzAzMTIgMTMxLjEyODkwNiBDIDM5MS4xODc1IDEzMS40MTAxNTYgMzkyLjc5Njg3NSAxMzEuNzQyMTg4IDM5NC4zOTg0MzggMTMyLjExNzE4OCBDIDM5NiAxMzIuNDk2MDk0IDM5Ny41OTM3NSAxMzIuOTE3OTY5IDM5OS4xNzk2ODggMTMzLjM4NjcxOSBDIDQwMC43NjU2MjUgMTMzLjg1OTM3NSA0MDIuMzM5ODQ0IDEzNC4zNzUgNDAzLjkwNjI1IDEzNC45MzM1OTQgQyA0MDUuNDY4NzUgMTM1LjQ5NjA5NCA0MDcuMDE5NTMxIDEzNi4xMDE1NjIgNDA4LjU1ODU5NCAxMzYuNzUgQyA0MTAuMDk3NjU2IDEzNy40MDIzNDQgNDExLjYyMTA5NCAxMzguMDk3NjU2IDQxMy4xMzI4MTIgMTM4LjgzNTkzOCBDIDQxNC42NDA2MjUgMTM5LjU3ODEyNSA0MTYuMTM2NzE5IDE0MC4zNTkzNzUgNDE3LjYxMzI4MSAxNDEuMTg3NSBDIDQxOS4wODk4NDQgMTQyLjAxMTcxOSA0MjAuNTUwNzgxIDE0Mi44Nzg5MDYgNDIxLjk5MjE4OCAxNDMuNzkyOTY5IEMgNDIzLjQzMzU5NCAxNDQuNzAzMTI1IDQyNC44NTU0NjkgMTQ1LjY1MjM0NCA0MjYuMjU3ODEyIDE0Ni42NDg0MzggQyA0MjcuNjYwMTU2IDE0Ny42NDA2MjUgNDI5LjAzOTA2MiAxNDguNjc1NzgxIDQzMC4zOTg0MzggMTQ5Ljc0NjA5NCBDIDQzMS43NTc4MTIgMTUwLjgyMDMxMiA0MzMuMDkzNzUgMTUxLjkzMzU5NCA0MzQuNDA2MjUgMTUzLjA4NTkzOCBDIDQzNS43MTg3NSAxNTQuMjM0Mzc1IDQzNy4wMDM5MDYgMTU1LjQyNTc4MSA0MzguMjY5NTMxIDE1Ni42NDg0MzggQyA0MzkuNTMxMjUgMTU3Ljg3NSA0NDAuNzY5NTMxIDE1OS4xMzY3MTkgNDQxLjk4MDQ2OSAxNjAuNDMzNTk0IEMgNDQzLjE5MTQwNiAxNjEuNzM0Mzc1IDQ0NC4zNzUgMTYzLjA2NjQwNiA0NDUuNTMxMjUgMTY0LjQyOTY4OCBDIDQ0Ni42ODc1IDE2NS43OTY4NzUgNDQ3LjgxMjUgMTY3LjE5NTMxMiA0NDguOTEwMTU2IDE2OC42Mjg5MDYgQyA0NTAuMDA3ODEyIDE3MC4wNTg1OTQgNDUxLjA3NDIxOSAxNzEuNTIzNDM4IDQ1Mi4xMTMyODEgMTczLjAxNTYyNSBDIDQ1My4xNDg0MzggMTc0LjUwNzgxMiA0NTQuMTUyMzQ0IDE3Ni4wMzEyNSA0NTUuMTI4OTA2IDE3Ny41ODU5MzggQyA0NTYuMTAxNTYyIDE3OS4xMzY3MTkgNDU3LjA0Mjk2OSAxODAuNzE0ODQ0IDQ1Ny45NDkyMTkgMTgyLjMyNDIxOSBDIDQ1OC44NTkzNzUgMTgzLjkyOTY4OCA0NTkuNzMwNDY5IDE4NS41NjI1IDQ2MC41NzAzMTIgMTg3LjIxODc1IEMgNDYxLjQxNDA2MiAxODguODc1IDQ2Mi4yMTg3NSAxOTAuNTU0Njg4IDQ2Mi45ODgyODEgMTkyLjI2MTcxOSBDIDQ2My43NTc4MTIgMTkzLjk2NDg0NCA0NjQuNDkyMTg4IDE5NS42OTE0MDYgNDY1LjE5MTQwNiAxOTcuNDM3NSBDIDQ2NS44OTA2MjUgMTk5LjE4MzU5NCA0NjYuNTU0Njg4IDIwMC45NDkyMTkgNDY3LjE3OTY4OCAyMDIuNzM0Mzc1IEMgNDY3LjgwNDY4OCAyMDQuNTE5NTMxIDQ2OC4zOTA2MjUgMjA2LjMyMDMxMiA0NjguOTQxNDA2IDIwOC4xNDA2MjUgQyA0NjkuNDkyMTg4IDIwOS45NjA5MzggNDcwLjAwMzkwNiAyMTEuNzkyOTY5IDQ3MC40ODA0NjkgMjEzLjY0NDUzMSBDIDQ3MC45NTMxMjUgMjE1LjQ5MjE4OCA0NzEuMzkwNjI1IDIxNy4zNTU0NjkgNDcxLjc4OTA2MiAyMTkuMjMwNDY5IEMgNDcyLjE4MzU5NCAyMjEuMTAxNTYyIDQ3Mi41NDI5NjkgMjIyLjk4ODI4MSA0NzIuODU5Mzc1IDIyNC44ODI4MTIgQyA0NzMuMTc5Njg4IDIyNi43NzczNDQgNDczLjQ2MDkzOCAyMjguNjc5Njg4IDQ3My42OTkyMTkgMjMwLjU5Mzc1IEMgNDczLjkzNzUgMjMyLjUwMzkwNiA0NzQuMTQwNjI1IDIzNC40MjE4NzUgNDc0LjMwMDc4MSAyMzYuMzQzNzUgQyA0NzQuNDYwOTM4IDIzOC4yNjU2MjUgNDc0LjU3ODEyNSAyNDAuMTk1MzEyIDQ3NC42NjAxNTYgMjQyLjEyNSBDIDQ3NC43MzgyODEgMjQ0LjA1NDY4OCA0NzQuNzgxMjUgMjQ1Ljk4NDM3NSA0NzQuNzgxMjUgMjQ3LjkxNzk2OSBaIE0gNDc0Ljc4MTI1IDI0Ny45MTc5NjkgIiBmaWxsLW9wYWNpdHk9IjEiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48ZyBjbGlwLXBhdGg9InVybCgjNzU4Zjk3OWU1YikiPjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0gMTc1LjE4NzUgNTY0LjE0NDUzMSBDIDE3NS4xODc1IDQ4NC43OTY4NzUgMjY0LjYwOTM3NSA0MjAuNDc2NTYyIDM3NC45MTc5NjkgNDIwLjQ3NjU2MiBDIDQ4NS4yMjI2NTYgNDIwLjQ3NjU2MiA1NzQuNjQ0NTMxIDQ4NC43OTY4NzUgNTc0LjY0NDUzMSA1NjQuMTQ0NTMxIEMgNTc0LjY0NDUzMSA1ODEuMTAxNTYyIDU2MC45MDIzNDQgNTk0Ljg1MTU2MiA1NDMuOTQ5MjE5IDU5NC44NTE1NjIgTCAyMDUuODgyODEyIDU5NC44NTE1NjIgQyAxODguOTI5Njg4IDU5NC44NTE1NjIgMTc1LjE4NzUgNTgxLjEwMTU2MiAxNzUuMTg3NSA1NjQuMTQ0NTMxIFogTSAxNzUuMTg3NSA1NjQuMTQ0NTMxICIgZmlsbC1vcGFjaXR5PSIxIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+');
}

.gh-icon-white {
    filter: brightness(0) invert(1);
}

.row-security i {
    font-size: 20px;
}

.security-option__title {
    padding-left: 15px;
}

.text-orange-gh {
    color: var(--color-warning);
}

.account-item {
    display: flex;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%);
    background-color: #ffffff;
    position: relative;
    transition: 0.4s;
}

.account-image {
    padding: 20px;
}

.account-image img {
    width: 80px;
}

.account-short-info {
    margin: 20px 20px 20px 0;
}

.account__edit-icon {
    font-size: 12px;
    margin-left: 4px;
    color: var(--brand-primary);
    cursor: pointer;
}

.text-hidden span {
    display: none;
}

.text-hidden:before {
    content: '*****';
}

.last-activity-date:hover {
    text-decoration: underline;
    filter: brightness(25%);
}

.disable-authentication-info ul {
    list-style: outside;
    font-size: 12px;
    padding-left: 16px;
}

.custom-file-label:active,
.custom-file-label {
    border: none;
    border-left: 3px solid var(--brand-primary);
    height: 55px;
    line-height: 40px;
    box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.15);
}

.custom-file-label::after {
    display: none;
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    top: -3px;
    z-index: 999;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.separator {
    position: relative;
    display: inline-block;
    min-width: 0;
    width: 2px;
    height: 22px;
    background-color: var(--color-warning);
    margin: 0px 2px 0 2px;
    top: 4px;
}

.language-switcher {
    position: relative;
}

.language-switcher:after {
    content: '';
    position: absolute;
    height: 80%;
    top: 2px;
    right: -7px;
    border-right: 2px solid var(--color-warning);
    background-color: var(--color-warning);
    cursor: auto;
}

nav .user-language,
nav .user-currency,
nav .user-settings {
    display: none;
}

@media only screen and (max-width: 767px) {
    nav .user-language,
    nav .user-currency,
    nav .user-settings {
        display: block;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    nav .user-language,
    nav .user-currency,
    nav .user-settings {
        display: block;
    }
}

.tradingview-widget-container, #tradingview_acf7d {
    min-height: 500px;
    height: 500px;
}

.change-language {
    position: relative;
}

.change-language::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 10px;
    width: 2px;
    background-color: #505050;
    height: 30px;
}

.bg-3e57d0 {
    background-color: var(--brand-primary);
}

.range {
    position: relative;
    margin-top: 20px;
}

.range__list {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: auto;
    overflow: hidden;
    margin-top: 5px;
}

.range__opt {
    cursor: pointer;
    font-size: 12px;
    color: #000000;
    width: 35px;
    padding: 5px;
    text-align: center;
    position: inherit;
}

.range__opt:first-of-type,
.range__opt:last-of-type {
    visibility: hidden;
}

.range__opt:nth-of-type(2) {
    right: 5px;
}

.range__opt:nth-of-type(4) {
    left: 5px;
}

.range__opt:before {
    content: "";
    display: block;
    width: 0;
    height: auto;
    font-size: 12px;
}

.range-wrap {
    width: 100%;
    position: relative;
}

.range-value {
    position: absolute;
    top: 35px;
}

.range-value span{
    width: 30px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #03a9f4;
    color: #fff;
    font-size: 12px;
    display: block;
    position: absolute;
    left: 50%;
    top: -70px;
    transform: translate(-50%, 0);
    border-radius: 6px;
}

.range-value span:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid #03a9f4;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 24px;
    left: 50%;
    margin-left: -5px;
    margin-top: -1px;
}

.gr-dropdown {
    position: relative;
}

.gr-dropdown button {
    height: 55px;
    background-color: #ffffff;
    border: 0px;
    box-shadow: 0 7px 25px rgb(123, 104, 238, 0.25);
    font-weight: bold;
    padding-left: 14px;
    padding-right: 10px;
}

.gr-dropdown .gr-dropdown-menu {
    display: none;
    position: absolute;
    top: 55px;
    border-radius: 2px;
    min-width: 16rem;
    z-index: 1100;
    background-color: #ffffff;
    transform: translate3d(-12rem, 0px, 0px);
    border: 1px solid #03a9f4;
    padding: 5px;
}

.list-group-coin {
    overflow-y: scroll;
    max-height: 360px;
}

.list-group-coin li {
    cursor: pointer;
}

.hardware-wallet-logo {
    height: 80px;
    max-height: 80px;
}

.transaction-history {
    font-size: 14px;
}

.error-message {
    color: red;
    font-size: 12px;
    margin-top: 4px;
}

.list-style-disc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: disc;
    padding-left: 1em;
    margin: 2em 1em;
    font-size: 14px;
}

/* Remove padding from contact info content on mobile devices */

@media only screen and (max-width: 767px) {
    .contact-info-content {
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* Fix Bootstrap row/col padding for deposit list on mobile */
    .contact-info-content .row {
        margin-left: 0;
        margin-right: 0;
    }

    .contact-info-content [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ===========================================
   Security Page - Mobile Responsive Styles
   =========================================== */

/* Base mobile styles (< 576px) */

@media only screen and (max-width: 575.98px) {
    /* Security rows - card-like appearance */
    .row-security {
        padding: 16px 0;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .row-security:last-child {
        border-bottom: none;
    }

    /* Icon styling */
    .row-security i {
        font-size: 24px;
        min-width: 32px;
        text-align: center;
    }

    /* Option title */
    .security-option__title {
        padding-left: 12px;
        flex: 1;
    }

    .security-option__title p {
        font-size: 15px;
        font-weight: 600;
    }

    .security-option__title small {
        font-size: 12px;
        display: block;
        margin-top: 2px;
    }

    /* Email display */
    .security-email {
        font-size: 13px;
        padding-top: 8px;
        word-break: break-all;
    }

    /* Action buttons container */
    .security-action {
        padding-top: 12px;
        text-align: left;
    }

    /* Touch-friendly buttons */
    .row-security .default-btn,
    .row-security .default-btn-one,
    .row-security .default-btn-sm {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Toggle switch - larger touch target */
    .row-security .custom-switch {
        transform: scale(1.2);
        transform-origin: right center;
    }

    /* Hide dividers on mobile - use border instead */
    .contact-info-content hr {
        display: none;
    }

    /* Section headers */
    .contact-info-content h5 {
        font-size: 16px;
        padding: 16px 0 8px;
        margin: 0;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-top: 1px solid #e9ecef;
    }

    .contact-info-content .row:first-child h5 {
        border-top: none;
        padding-top: 0;
    }

    /* Content container padding */
    .contact-info-content {
        padding: 16px;
        margin-top: 20px;
    }
}

/* Small tablets (576px - 767px) */

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
    .row-security .default-btn,
    .row-security .default-btn-one,
    .row-security .default-btn-sm {
        padding: 10px 16px;
        font-size: 13px;
    }

    .security-option__title small {
        font-size: 12px;
    }
}

/* Security Modals - Mobile Responsive */

@media only screen and (max-width: 575.98px) {
    /* Modal takes more width on mobile */
    #enableAuthenticationModal .modal-dialog,
    #disableAuthenticationModal .modal-dialog,
    #disableAuthenticationStep2Modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    /* Modal content padding */
    #enableAuthenticationModal .modal-body,
    #disableAuthenticationModal .modal-body,
    #disableAuthenticationStep2Modal .modal-body {
        padding: 20px 16px;
    }

    /* Full-width inputs */
    #enableAuthenticationModal input[name="auth_code"],
    #disableAuthenticationStep2Modal input[name="auth_code"] {
        width: 100%;
        font-size: 16px; /* Prevents iOS zoom */
        padding: 12px;
        text-align: center;
        letter-spacing: 4px;
    }

    /* Stack form elements */
    #enableAuthenticationModal .form-row,
    #disableAuthenticationStep2Modal .form-row {
        flex-direction: column;
    }

    #enableAuthenticationModal .form-row > .col-auto,
    #disableAuthenticationStep2Modal .form-row > .col-auto {
        width: 100%;
        margin-bottom: 12px;
    }

    #enableAuthenticationModal .form-row > .col-auto:last-child,
    #disableAuthenticationStep2Modal .form-row > .col-auto:last-child {
        margin-bottom: 0;
    }

    /* Full-width buttons in modal */
    #enableAuthenticationModal .default-btn,
    #enableAuthenticationModal .default-btn-one,
    #enableAuthenticationModal .default-btn-sm,
    #disableAuthenticationStep2Modal .default-btn,
    #disableAuthenticationStep2Modal .default-btn-one,
    #disableAuthenticationStep2Modal .default-btn-sm {
        width: 100%;
        padding: 14px 20px;
    }

    /* Modal footer buttons */
    .modal-footer {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .modal-footer .default-btn,
    .modal-footer .default-btn-one {
        width: 100%;
        margin: 0;
    }
}

/**************************************
 ** Mobile Drawer Menu
 **************************************/

/* Drawer Toggle Button */

.mobile-drawer-toggle {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1000;
    padding: 5px;
}

.mobile-drawer-toggle i {
    font-size: 22px;
    color: var(--trading-accent-primary);
}

/* Drawer Overlay */

.mobile-drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Drawer Container */

.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background-color: #ffffff;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.mobile-drawer.open {
    right: 0;
}

/* Drawer Header */

.mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #6c5ce7 100%);
    color: #ffffff;
}

.mobile-drawer__user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.mobile-drawer__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 24px;
}

.mobile-drawer__user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mobile-drawer__user-email {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-drawer__user-status {
    font-size: 12px;
    opacity: 0.9;
}

.mobile-drawer__user-status i {
    margin-right: 4px;
}

.mobile-drawer__close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mobile-drawer__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Drawer Content */

.mobile-drawer__content {
    padding: 8px 0;
}

.mobile-drawer__section {
    padding: 8px 0;
}

.mobile-drawer__section:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-drawer__section-title {
    padding: 8px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

.mobile-drawer__nav {
    display: flex;
    flex-direction: column;
}

.mobile-drawer__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.mobile-drawer__item:hover {
    background-color: var(--bg-page);
    color: var(--brand-primary);
    text-decoration: none;
}

.mobile-drawer__item.active {
    background-color: rgba(123, 104, 238, 0.1);
    color: var(--brand-primary);
}

.mobile-drawer__item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    opacity: 0.7;
}

.mobile-drawer__item.active i,
.mobile-drawer__item:hover i {
    opacity: 1;
}

/* Label span stretches to fill row; badges (.badge-coming-soon) must
   stay sized to content so e.g. "Soon" doesn't grab 50% of the row.
   :not(.badge-coming-soon) avoids the higher-specificity tug-of-war
   that a separate override would create. */

.mobile-drawer__item > span:not(.badge-coming-soon) {
    flex: 1;
}

.mobile-drawer__item-value {
    font-size: 13px;
    color: #666;
    font-weight: 600;
}

/* Drawer Footer */

.mobile-drawer__footer {
    padding: 16px;
    border-top: 1px solid #f0f0f0;
    margin-top: auto;
}

.mobile-drawer__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background-color: var(--bg-page);
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: #dc3545;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-drawer__logout:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
    text-decoration: none;
}

/* Mobile Drawer Expandable Sections */

.mobile-drawer__expandable {
    display: flex;
    flex-direction: column;
}

.mobile-drawer__toggle {
    position: relative;
}

.mobile-drawer__chevron {
    margin-left: auto;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.mobile-drawer__chevron.rotated {
    transform: rotate(180deg);
}

.mobile-drawer__submenu {
    display: none;
    flex-direction: column;
    background-color: var(--bg-page);
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.mobile-drawer__submenu.open {
    display: flex;
}

.mobile-drawer__subitem {
    padding: 12px 20px 12px 54px;
    color: #555;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

.mobile-drawer__subitem:last-child {
    border-bottom: none;
}

.mobile-drawer__subitem:hover,
.mobile-drawer__subitem.active {
    background-color: rgba(123, 104, 238, 0.1);
    color: var(--brand-primary);
}

/* Show drawer elements only on mobile */

@media only screen and (max-width: 991px) {
    .mobile-drawer-toggle {
        display: block;
        margin-right: 10px;
    }

    .mobile-drawer-overlay {
        display: block;
    }

    .mobile-drawer {
        display: flex;
        flex-direction: column;
    }
}

/* Dark theme support for trading pages */

.trading-page-dark .mobile-drawer-toggle i {
    color: #ffffff;
}

/* Adjust drawer for smaller screens */

@media only screen and (max-width: 480px) {
    .mobile-drawer {
        width: 100%;
        max-width: 100%;
    }

    .mobile-drawer__header {
        padding: 16px;
    }

    .mobile-drawer__avatar {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .mobile-drawer__user-email {
        font-size: 13px;
    }
}

/* Mobile drawer - disabled subitem */

.mobile-drawer__subitem--disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Top-level disabled item (e.g. iOS download placeholder under
   Bonus Program). Mirrors the subitem disabled state but keeps the
   item's own padding/layout from .mobile-drawer__item above. */

.mobile-drawer__item--disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 991px) {
    .table-wallets-list {
        border-collapse: separate;
        border-spacing: 0;
    }

    .table-wallets-list tr td:first-of-type,
    .table-wallets-list tr th:first-of-type {
        background-color: #ffffff;
        min-width: 120px;
        position: sticky;
        left: 0;
        z-index: 1000;
    }
}

.coin-info {
    display: flex;
    align-items: center;
}

.coin-logo {
    margin-right: 5px;
}

.coin-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.coin-code {
    font-weight: bold;
}

.coin-name {
    font-size: 14px;
}

/* === Legacy Card Styles (Light Theme) === */

.g-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 5px;
    border-top: 3px solid var(--brand-primary);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
}

.g-card + .g-card {
    margin-top: 20px;
}

.g-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, .03);
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.g-card-header > * {
    margin: 0;
}

.g-card-body {
    padding: 2px;
}

.g-card-footer {
    padding: 10px;
}

/* === Trading Theme Card Styles (Both Dark & Light) === */

.trading-page .g-card,
.trading-page-light .g-card {
    background-color: var(--trading-bg-secondary);
    border: 1px solid var(--trading-border-primary);
    border-top: 1px solid var(--trading-border-primary);
    border-radius: var(--trading-radius-md);
    box-shadow: var(--trading-shadow-sm);
    color: var(--trading-text-primary);
}

.trading-page .g-card + .g-card,
.trading-page-light .g-card + .g-card {
    margin-top: 0;
}

.trading-page .g-card-header,
.trading-page-light .g-card-header {
    background-color: transparent;
    padding-top: var(--trading-space-md);
    padding-right: var(--trading-space-lg);
    padding-bottom: var(--trading-space-md);
    padding-left: var(--trading-space-lg);
    border-bottom: 1px solid var(--trading-border-primary);
    color: var(--trading-text-primary);
}

.trading-page .trading-orders-panel .g-card-header,
.trading-page-light .trading-orders-panel .g-card-header {
    padding: 0;
    border-bottom: none;
}

.trading-page .g-card-header h5,
.trading-page .g-card-header .h5,
.trading-page .g-card-header span,
.trading-page .g-card-header a,
.trading-page-light .g-card-header h5,
.trading-page-light .g-card-header .h5,
.trading-page-light .g-card-header span,
.trading-page-light .g-card-header a {
    font-size: var(--trading-font-size-md);
    font-weight: 600;
    color: var(--trading-text-primary);
}

.trading-page .g-card-body,
.trading-page-light .g-card-body {
    padding: var(--trading-space-md);
    color: var(--trading-text-primary);
}

.trading-page .g-card-footer,
.trading-page-light .g-card-footer {
    padding: var(--trading-space-md) var(--trading-space-lg);
    border-top: 1px solid var(--trading-border-primary);
    color: var(--trading-text-primary);
}

.market-list {
    height: 300px;
    overflow: auto;
    --scroll-bg: transparent;
    --scroll-color: var(--brand-primary);
    --scroll-size: 6px;
    --scroll-pad: 1px;
}

.trading-page .market-list,
.trading-page-light .market-list {
    --scroll-color: var(--trading-bg-elevated);
}

.trading-page .market-list::-webkit-scrollbar,
.trading-page-light .market-list::-webkit-scrollbar {
    width: 6px;
}

.trading-page .market-list::-webkit-scrollbar-track,
.trading-page-light .market-list::-webkit-scrollbar-track {
    background: var(--trading-bg-secondary);
}

.trading-page .market-list::-webkit-scrollbar-thumb,
.trading-page-light .market-list::-webkit-scrollbar-thumb {
    background: var(--trading-bg-elevated);
    border-radius: 3px;
}

.trading-page .market-list::-webkit-scrollbar-thumb:hover,
.trading-page-light .market-list::-webkit-scrollbar-thumb:hover {
    background: var(--trading-border-active);
}

.symbol-list {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    font-size: 14px;
}

.trading-page .symbol-list,
.trading-page-light .symbol-list {
    row-gap: 0;
    font-size: var(--trading-font-size-sm);
}

.symbol-item {
    display: flex;
    width: 100%;
    background-color: #eeeeee;
    padding: 2px 5px;
    cursor: pointer;
}

.symbol-item:hover {
    background-color: var(--brand-primary);
    color: #ffffff;
}

.trading-page .symbol-item,
.trading-page-light .symbol-item {
    background-color: transparent;
    padding: var(--trading-space-sm) var(--trading-space-md) var(--trading-space-sm) 0;
    transition: var(--trading-transition-fast);
    border-radius: 0;
}

.trading-page .symbol-item:hover,
.trading-page-light .symbol-item:hover {
    background-color: var(--trading-bg-elevated);
    color: var(--trading-text-primary);
}

.trading-page .symbol-item.active,
.trading-page-light .symbol-item.active {
    background-color: var(--trading-bg-hover);
}

.symbol-item__col:nth-child(1) {
    flex: 0 0 25px;
}

.symbol-item__col:nth-child(2) {
    flex: 0 0 25%;
}

.symbol-item__col:nth-child(3) {
    flex: 0 0 40%;
}

.symbol-item__col:nth-child(4) {
    flex: 1;
}

.trading-page .symbol-item__col,
.trading-page-light .symbol-item__col {
    font-family: var(--trading-font-family);
    color: var(--trading-text-primary) !important;
}

.trading-page .symbol-item__col.text-success,
.trading-page-light .symbol-item__col.text-success,
.trading-page .symbol-item__col.price-up,
.trading-page-light .symbol-item__col.price-up {
    color: var(--trading-buy) !important;
}

.trading-page .symbol-item__col.text-danger,
.trading-page-light .symbol-item__col.text-danger,
.trading-page .symbol-item__col.price-down,
.trading-page-light .symbol-item__col.price-down {
    color: var(--trading-sell) !important;
}

.trading-page .symbol-item .star-active,
.trading-page-light .symbol-item .star-active {
    color: var(--trading-accent-primary) !important;
}

.trading-page .symbol-item .star-inactive,
.trading-page-light .symbol-item .star-inactive {
    color: var(--trading-text-tertiary) !important;
}

.trading-page .symbol-item .star-inactive:hover,
.trading-page-light .symbol-item .star-inactive:hover {
    color: var(--trading-text-secondary) !important;
}

.trading-page .symbol-item__symbol,
.trading-page-light .symbol-item__symbol {
    font-weight: 500;
}

.trading-page .symbol-item__price,
.trading-page-light .symbol-item__price {
    color: var(--trading-text-primary) !important;
}

.trading-page .symbol-item__change,
.trading-page-light .symbol-item__change {
    font-size: var(--trading-font-size-xs);
}

.show-favorites {
    cursor: pointer;
}

.g-form {
    display: block;
    width: 100%;
}

.g-textField {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin: 4px auto;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    gap: 8px;
    height: 40px;
    padding: 0 6px 0 12px;
}

.trading-page .g-textField,
.trading-page-light .g-textField {
    background-color: var(--trading-bg-input);
    border: 1px solid var(--trading-border-primary);
    border-radius: var(--trading-radius-sm);
    margin: var(--trading-space-sm) 0;
    padding: 0 var(--trading-space-md);
    transition: var(--trading-transition-fast);
}

.trading-page .g-textField:hover,
.trading-page-light .g-textField:hover {
    border-color: var(--trading-border-secondary);
}

.trading-page .g-textField:focus-within,
.trading-page-light .g-textField:focus-within {
    border-color: var(--trading-accent-primary);
}

.g-textField__input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    text-align: end;
    min-width: 0;
}

.trading-page .g-textField__input,
.trading-page-light .g-textField__input {
    background: transparent;
    color: var(--trading-text-primary);
    font-family: var(--trading-font-family);
    font-size: var(--trading-font-size-md);
}

.trading-page .g-textField__input::-moz-placeholder, .trading-page-light .g-textField__input::-moz-placeholder {
    color: var(--trading-text-tertiary);
}

.trading-page .g-textField__input::placeholder,
.trading-page-light .g-textField__input::placeholder {
    color: var(--trading-text-tertiary);
}

.g-textField__prefix {
    flex: 0 0 auto;
    color: #797979;
}

.trading-page .g-textField__prefix,
.trading-page-light .g-textField__prefix {
    color: var(--trading-text-secondary) !important;
    font-size: var(--trading-font-size-sm);
}

.g-textField__suffix {
    flex: 0 0 auto;
    font-weight: bold;
}

.trading-page .g-textField__suffix,
.trading-page-light .g-textField__suffix {
    color: var(--trading-text-secondary) !important;
    font-size: var(--trading-font-size-sm);
    font-weight: 600;
}

.g-textField__suffix select {
    border: none;
    width: 100%;
    max-width: 60px;
}

.g-textField__suffix select:focus {
    outline: none;
    box-shadow: none;
    border-color: inherit;
}

.g-textField__suffix select option {
    text-align: right;
}

.quote-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    -moz-column-gap: 10px;
         column-gap: 10px;
}

.trading-page .quote-list,
.trading-page-light .quote-list {
    gap: 2px;
    background-color: var(--trading-bg-tertiary);
    padding: 2px;
    border-radius: var(--trading-radius-sm);
}

.trading-page .nav.nav-pills,
.trading-page-light .nav.nav-pills {
    gap: 2px;
    padding: 2px;
    border-radius: var(--trading-radius-sm);
}

.quote-item {
    position: relative;
    cursor: pointer;
}

.trading-page .quote-item,
.trading-page-light .quote-item,
.trading-page .nav-item,
.trading-page-light .nav-item {
    position: relative;
    cursor: pointer;
    margin: 2px;
}

.trading-page .quote-item,
.trading-page-light .quote-item {
    padding: var(--trading-space-sm) var(--trading-space-md);
    font-size: var(--trading-font-size-sm);
    font-weight: 500;
    color: var(--trading-text-secondary) !important;
    border-radius: var(--trading-radius-sm);
    transition: var(--trading-transition-fast);
}

.trading-page .nav-item .nav-link,
.trading-page-light .nav-item .nav-link {
    padding: var(--trading-space-sm) var(--trading-space-md);
    font-size: var(--trading-font-size-sm);
    font-weight: 500;
    color: var(--trading-text-secondary) !important;
    border-radius: var(--trading-radius-sm);
    transition: var(--trading-transition-fast);
    background: transparent;
}

.trading-page .quote-item:hover,
.trading-page-light .quote-item:hover,
.trading-page .nav-item .nav-link:hover,
.trading-page-light .nav-item .nav-link:hover {
    color: var(--trading-text-primary) !important;
}

.trading-page .quote-item a,
.trading-page-light .quote-item a {
    color: inherit !important;
}

.quote-item.active i,
.quote-item.active,
.quote-item.active a {
    color: var(--brand-primary);
}

.trading-page .quote-item.active,
.trading-page-light .quote-item.active,
.trading-page .quote-item.active a,
.trading-page-light .quote-item.active a,
.trading-page .quote-item a.active,
.trading-page-light .quote-item a.active,
.trading-page .nav-item .nav-link.active,
.trading-page-light .nav-item .nav-link.active {
    color: var(--trading-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.trading-page-light .quote-item.active,
.trading-page-light .quote-item.active a,
.trading-page-light .quote-item a.active,
.trading-page-light .nav-item .nav-link.active {
    background-color: rgba(0, 0, 0, 0.06);
}

.quote-item a.active:after,
.quote-item.active:after {
    content: "";
    position: absolute;
    height: 3px;
    width: 20px;
    margin: 0 auto;
    background-color: var(--brand-primary);
    bottom: -11px;
    left: 50%;
    transform: translate(-50%);
}

.trading-page .quote-item a.active:after,
.trading-page-light .quote-item a.active:after,
.trading-page .quote-item.active:after,
.trading-page-light .quote-item.active:after {
    display: none;
}

.quote-item.diff-4h {
    margin-left: auto;
    cursor: auto;
    font-weight: 700;
}

.disabled {
    opacity: .5;
    position: relative;
}

.disabled:before {
    bottom: 0;
    content: "";
    cursor: not-allowed;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
}

.card {
    position: relative;
    background: #fff;
    margin-top: 30px;
    text-align: center;
    border-radius: 5px;
    border-top: 3px solid var(--brand-primary);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
}

.card__header {
    padding: 15px;
    border-bottom: 1px solid var(--brand-primary);
}

.card__title {
    margin: 0;
}

.card__body {
    padding: 15px;
}

.card__footer {
    padding: 15px;
}

/* === Trading Page Tab Content === */

.trading-page .tab-content,
.trading-page-light .tab-content {
    color: var(--trading-text-primary);
}

.trading-page .tab-pane,
.trading-page-light .tab-pane {
    color: var(--trading-text-primary);
}

/* === Trading Page Tables === */

.trading-page table,
.trading-page .table,
.trading-page-light table,
.trading-page-light .table {
    color: var(--trading-text-primary);
}

.trading-page table th,
.trading-page .table th,
.trading-page-light table th,
.trading-page-light .table th {
    color: var(--trading-text-secondary);
    font-weight: 500;
    font-size: var(--trading-font-size-sm);
    border-color: var(--trading-border-primary);
    background-color: var(--trading-bg-tertiary);
}

.trading-page table td,
.trading-page .table td,
.trading-page-light table td,
.trading-page-light .table td {
    color: var(--trading-text-primary);
    font-size: var(--trading-font-size-sm);
    border-color: var(--trading-border-primary);
}

.trading-page table tbody tr:hover td,
.trading-page .table tbody tr:hover td,
.trading-page-light table tbody tr:hover td,
.trading-page-light .table tbody tr:hover td {
    background-color: var(--trading-bg-elevated);
}

/* === Trading Page Form Controls === */

.trading-page .form-control,
.trading-page-light .form-control {
    background-color: var(--trading-bg-input);
    border-color: var(--trading-border-primary);
    color: var(--trading-text-primary);
}

.trading-page .form-control:focus,
.trading-page-light .form-control:focus {
    background-color: var(--trading-bg-input);
    border-color: var(--trading-accent-primary);
    color: var(--trading-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(123, 104, 238, 0.15);
}

.trading-page .form-control::-moz-placeholder, .trading-page-light .form-control::-moz-placeholder {
    color: var(--trading-text-tertiary);
}

.trading-page .form-control::placeholder,
.trading-page-light .form-control::placeholder {
    color: var(--trading-text-tertiary);
}

/* === Trading Page Buttons Override === */

.trading-page .btn-primary,
.trading-page-light .btn-primary {
    background-color: var(--trading-accent-primary);
    border-color: var(--trading-accent-primary);
    color: #ffffff;
}

.trading-page .btn-primary:hover,
.trading-page-light .btn-primary:hover {
    background-color: var(--trading-accent-hover);
    border-color: var(--trading-accent-hover);
}

.trading-page .btn-success,
.trading-page .bg-success,
.trading-page-light .btn-success,
.trading-page-light .bg-success {
    background-color: var(--trading-buy) !important;
    border-color: var(--trading-buy) !important;
}

.trading-page .btn-danger,
.trading-page .bg-danger,
.trading-page-light .btn-danger,
.trading-page-light .bg-danger {
    background-color: var(--trading-sell) !important;
    border-color: var(--trading-sell) !important;
}

/* === Error Message Styling === */

.trading-page .error-message,
.trading-page-light .error-message {
    color: var(--trading-sell) !important;
    font-size: var(--trading-font-size-xs);
}

.crypto-logo {
    width: 24px;
    height: 24px;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.crypto-logo-sm {
    width: 16px;
    height: 16px;
    background-size: contain;
}

.crypto-logo-lg {
    width: 36px;
    height: 36px;
    background-size: 36px;
}

.crypto-aave {
    background-image: url('../img/crypto/aave.svg');
}

.crypto-ada {
    background-image: url('../img/crypto/ada.svg');
}

.crypto-algo {
    background-image: url('../img/crypto/algo.svg');
}

.crypto-amp {
    background-image: url('../img/crypto/amp.svg');
}

.crypto-ar {
    background-image: url('../img/crypto/ar.svg');
}

.crypto-atom {
    background-image: url('../img/crypto/atom.svg');
}

.crypto-avax {
    background-image: url('../img/crypto/avax.svg');
}

.crypto-axs {
    background-image: url('../img/crypto/axs.svg');
}

.crypto-bat {
    background-image: url('../img/crypto/bat.svg');
}

.crypto-bch {
    background-image: url('../img/crypto/bch.svg');
}

.crypto-bnb {
    background-image: url('../img/crypto/bnb.svg');
}

.crypto-bsv {
    background-image: url('../img/crypto/bsv.svg');
}

.crypto-btc {
    background-image: url('../img/crypto/btc.svg');
}

.crypto-btg {
    background-image: url('../img/crypto/btg.svg');
}

.crypto-btt {
    background-image: url('../img/crypto/btt.svg');
}

.crypto-busd {
    background-image: url('../img/crypto/busd.svg');
}

.crypto-cake {
    background-image: url('../img/crypto/cake.svg');
}

.crypto-cel {
    background-image: url('../img/crypto/cel.svg');
}

.crypto-celo {
    background-image: url('../img/crypto/celo.svg');
}

.crypto-comp {
    background-image: url('../img/crypto/comp.svg');
}

.crypto-crv {
    background-image: url('../img/crypto/crv.svg');
}

.crypto-dai {
    background-image: url('../img/crypto/dai.svg');
}

.crypto-dash {
    background-image: url('../img/crypto/dash.svg');
}

.crypto-dcr {
    background-image: url('../img/crypto/dcr.svg');
}

.crypto-doge {
    background-image: url('../img/crypto/doge.svg');
}

.crypto-dot {
    background-image: url('../img/crypto/dot.svg');
}

.crypto-egld {
    background-image: url('../img/crypto/egld.svg');
}

.crypto-enj {
    background-image: url('../img/crypto/enj.svg');
}

.crypto-eos {
    background-image: url('../img/crypto/eos.svg');
}

.crypto-etc {
    background-image: url('../img/crypto/etc.svg');
}

.crypto-eth {
    background-image: url('../img/crypto/eth.svg');
}

.crypto-fil {
    background-image: url('../img/crypto/fil.svg');
}

.crypto-flow {
    background-image: url('../img/crypto/flow.svg');
}

.crypto-ftm {
    background-image: url('../img/crypto/ftm.svg');
}

.crypto-ftt {
    background-image: url('../img/crypto/ftt.svg');
}

.crypto-lrc {
    background-image: url('../img/crypto/lrc.svg');
}

.crypto-ltc {
    background-image: url('../img/crypto/ltc.svg');
}

.crypto-qnt {
    background-image: url('../img/crypto/qnt.svg');
}

.crypto-trx {
    background-image: url('../img/crypto/trx.svg');
}

.crypto-usdt {
    background-image: url('../img/crypto/usdt.svg');
}

.crypto-xlm {
    background-image: url('../img/crypto/xlm.svg');
}

.crypto-xmr {
    background-image: url('../img/crypto/xmr.svg');
}

.crypto-xrp {
    background-image: url('../img/crypto/xrp.svg');
}

.crypto-grt {
    background-image: url('../img/crypto/grt.svg');
}

.crypto-hbar {
    background-image: url('../img/crypto/hbar.svg');
}

.crypto-hnt {
    background-image: url('../img/crypto/hnt.svg');
}

.crypto-hot {
    background-image: url('../img/crypto/hot.svg');
}

.crypto-ht {
    background-image: url('../img/crypto/ht.svg');
}

.crypto-icp {
    background-image: url('../img/crypto/icp.svg');
}

.crypto-icx {
    background-image: url('../img/crypto/icx.svg');
}

.crypto-iost {
    background-image: url('../img/crypto/iost.svg');
}

.crypto-klay {
    background-image: url('../img/crypto/klay.svg');
}

.crypto-ksm {
    background-image: url('../img/crypto/ksm.svg');
}

.crypto-leo {
    background-image: url('../img/crypto/leo.svg');
}

.crypto-link {
    background-image: url('../img/crypto/link.svg');
}

.crypto-luna {
    background-image: url('../img/crypto/luna.svg');
}

.crypto-mana {
    background-image: url('../img/crypto/mana.svg');
}

.crypto-matic {
    background-image: url('../img/crypto/matic.svg');
}

.crypto-miota {
    background-image: url('../img/crypto/miota.svg');
}

.crypto-mkr {
    background-image: url('../img/crypto/mkr.svg');
}

.crypto-near {
    background-image: url('../img/crypto/near.svg');
}

.crypto-neo {
    background-image: url('../img/crypto/neo.svg');
}

.crypto-okb {
    background-image: url('../img/crypto/okb.svg');
}

.crypto-omg {
    background-image: url('../img/crypto/omg.svg');
}

.crypto-one {
    background-image: url('../img/crypto/one.svg');
}

.crypto-qtum {
    background-image: url('../img/crypto/qtum.svg');
}

.crypto-ren {
    background-image: url('../img/crypto/ren.svg');
}

.crypto-rev {
    background-image: url('../img/crypto/rev.svg');
}

.crypto-rune {
    background-image: url('../img/crypto/rune.svg');
}

.crypto-rvn {
    background-image: url('../img/crypto/rvn.svg');
}

.crypto-shib {
    background-image: url('../img/crypto/shib.svg');
}

.crypto-snx {
    background-image: url('../img/crypto/snx.svg');
}

.crypto-sol {
    background-image: url('../img/crypto/sol.svg');
}

.crypto-srm {
    background-image: url('../img/crypto/srm.svg');
}

.crypto-stx {
    background-image: url('../img/crypto/stx.svg');
}

.crypto-sushi {
    background-image: url('../img/crypto/sushi.svg');
}

.crypto-tfuel {
    background-image: url('../img/crypto/tfuel.svg');
}

.crypto-theta {
    background-image: url('../img/crypto/theta.svg');
}

.crypto-tusd {
    background-image: url('../img/crypto/tusd.svg');
}

.crypto-uni {
    background-image: url('../img/crypto/uni.svg');
}

.crypto-usdc {
    background-image: url('../img/crypto/usdc.svg');
}

.crypto-vet {
    background-image: url('../img/crypto/vet.svg');
}

.crypto-waves {
    background-image: url('../img/crypto/waves.svg');
}

.crypto-wbtc {
    background-image: url('../img/crypto/wbtc.svg');
}

.crypto-xec {
    background-image: url('../img/crypto/xec.svg');
}

.crypto-xem {
    background-image: url('../img/crypto/xem.svg');
}

.crypto-xtz {
    background-image: url('../img/crypto/xtz.svg');
}

.crypto-yfi {
    background-image: url('../img/crypto/yfi.svg');
}

.crypto-zec {
    background-image: url('../img/crypto/zec.svg');
}

.crypto-zil {
    background-image: url('../img/crypto/zil.svg');
}

.crypto-sand {
    background-image: url('../img/crypto/sand.svg');
}

.crypto-iotx {
    background-image: url('../img/crypto/iotx.svg');
}

.crypto-nexo {
    background-image: url('../img/crypto/nexo.svg');
}

.crypto-kcs {
    background-image: url('../img/crypto/kcs.svg');
}

.crypto-lpt {
    background-image: url('../img/crypto/lpt.svg');
}

.crypto-scrt {
    background-image: url('../img/crypto/scrt.svg');
}

.crypto-tel {
    background-image: url('../img/crypto/tel.svg');
}

.crypto-bnt {
    background-image: url('../img/crypto/bnt.svg');
}

.crypto-zrx {
    background-image: url('../img/crypto/zrx.svg');
}

.crypto-sc {
    background-image: url('../img/crypto/sc.svg');
}

.crypto-uma {
    background-image: url('../img/crypto/uma.svg');
}

.crypto-waxp {
    background-image: url('../img/crypto/waxp.svg');
}

.crypto-usdp {
    background-image: url('../img/crypto/usdp.svg');
}

.crypto-ont {
    background-image: url('../img/crypto/ont.svg');
}

.crypto-dgb {
    background-image: url('../img/crypto/dgb.svg');
}

.crypto-ckb {
    background-image: url('../img/crypto/ckb.svg');
}

.crypto-xyo {
    background-image: url('../img/crypto/xyo.svg');
}

.crypto-1inch {
    background-image: url('../img/crypto/1inch.svg');
}

.crypto-trac {
    background-image: url('../img/crypto/trac.svg');
}

.crypto-nano {
    background-image: url('../img/crypto/nano.svg');
}

.crypto-gno {
    background-image: url('../img/crypto/gno.svg');
}

.crypto-fet {
    background-image: url('../img/crypto/fet.svg');
}

.crypto-dent {
    background-image: url('../img/crypto/dent.svg');
}

.crypto-bake {
    background-image: url('../img/crypto/bake.svg');
}

.crypto-nu {
    background-image: url('../img/crypto/nu.svg');
}

.crypto-ocean {
    background-image: url('../img/crypto/ocean.svg');
}

.crypto-kava {
    background-image: url('../img/crypto/kava.svg');
}

.crypto-rsr {
    background-image: url('../img/crypto/rsr.svg');
}

.crypto-xvg {
    background-image: url('../img/crypto/xvg.svg');
}

.crypto-storj {
    background-image: url('../img/crypto/storj.svg');
}

.crypto-glm {
    background-image: url('../img/crypto/glm.svg');
}

.crypto-alpha {
    background-image: url('../img/crypto/alpha.svg');
}

.crypto-poly {
    background-image: url('../img/crypto/poly.svg');
}

.crypto-inj {
    background-image: url('../img/crypto/inj.svg');
}

.crypto-ankr {
    background-image: url('../img/crypto/ankr.svg');
}

.crypto-vlx {
    background-image: url('../img/crypto/vlx.svg');
}

.crypto-crw {
    background-image: url('../img/crypto/crw.svg');
}

.crypto-fjt {
    background-image: url('../img/crypto/fjt.svg');
}

.crypto-lunc {
    background-image: url('../img/crypto/lunc.svg');
}

.crypto-twt {
    background-image: url('../img/crypto/twt.svg');
}

.crypto-dydx {
    background-image: url('../img/crypto/dydx.svg');
}

.crypto-xch {
    background-image: url('../img/crypto/xch.svg');
}

.crypto-chz {
    background-image: url('../img/crypto/chz.svg');
}

.crypto-agix {
    background-image: url('../img/crypto/agix.svg');
}

.crypto-cocos {
    background-image: url('../img/crypto/cocos.svg');
}

.crypto-blur {
    background-image: url('../img/crypto/blur.svg');
}

.crypto-arb {
    background-image: url('../img/crypto/arb.svg');
}

.crypto-weth {
    background-image: url('../img/crypto/weth.svg');
}

.crypto-ton {
    background-image: url('../img/crypto/ton.svg');
}

.crypto-strk {
    background-image: url('../img/crypto/strk.svg');
}

.icheck-custom > input:first-child:checked + label::before {
    background-color: #7b68ee !important;
    border-color: #7b68ee !important;
}

.side-sell {
    color: #ff0000;
}

.side-buy {
    color: limegreen;
}

.text-bold {
    font-weight: bold;
}

.card-header {
    padding: var(--trading-space-md) var(--trading-space-lg);
    border-bottom: 1px solid var(--trading-border-primary);
    text-align: left;
}

.card-title,
.card-header h5,
.card-header .card-title,
h5.card-title {
    margin: 0;
    padding: 0;
    font-size: var(--trading-font-size-md);
    font-weight: 600;
    color: var(--trading-text-primary);
    line-height: 1.2;
}

.card-margin .card__body * {
    font-size: 14px;
}

.v-b-tooltip {
    cursor: help;
}

.tooltip {
    font-size: 10px;
}

.progress-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 24px;
}

progress {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
    background-color: var(--trading-bg-tertiary);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    overflow: hidden;
}

progress::-webkit-progress-bar {
    background-color: var(--trading-bg-tertiary);
    border-radius: 12px;
}

progress::-webkit-progress-value {
    background: var(--brand-primary);
    border-radius: 8px;
    -webkit-transition: width 0.4s ease;
    transition: width 0.4s ease;
}

progress::-moz-progress-bar {
    background: var(--brand-primary);
    border-radius: 8px;
    -moz-transition: width 0.4s ease;
    transition: width 0.4s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #28a745;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.bonus-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
}

.bonus-stats {
    display: flex;
    gap: 10px;
}

.bonus-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
}

.bonus-label {
    font-size: 14px;
    color: #555;
    margin-bottom: 4px;
    font-weight: 500;
}

.bonus-value {
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.bonus-desc {
    padding: 8px;
    font-size: 12px;
}

.bonus-table {
    font-size: 12px;
}

.bonus-table th,
.bonus-table td {
    vertical-align: middle;
}

/* ============================================================
   Bonus info sidebar — "Mission card" redesign
   Three states share the same .g-card frame + ribbon in header:
     .bonus-sidebar-goal     : "Your goal" hero strip (active only)
     .bonus-sidebar-bar      : linear progress (turnover + time)
     .bonus-sidebar-kpi      : daily-target hint with pace colors
     .bonus-sidebar-pending  : ETA + preview (pending only)
     .bonus-sidebar-empty    : personalised pitch + CTA (no bonus)
     .bonus-sidebar-details  : collapsible <dl> with full params
   ============================================================ */

.bonus-sidebar {
    position: relative;
    padding: 16px 14px 14px;
}

/* --- header: title centered (status moved out into a ribbon) --- */

.bonus-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* --- status ribbon: lives in .g-card-header, sticks out 4px to the
       right of the card edge. Same .price-tag "tag sticking out of the
       card" pattern as /account/verification, mirrored right. --------- */

.bonus-sidebar-card-header {
    position: relative;
}

.bonus-sidebar-status {
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 14px;
    border-radius: 14px 0 0 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.bonus-sidebar-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.bonus-sidebar-status--active {
    background: #28a745;
}

.bonus-sidebar-status--pending {
    background: #ff561d;
}

.bonus-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading, #0b0b31);
    line-height: 1.2;
}

/* --- active "Mission card" — goal hero strip ---------------- */

.bonus-sidebar-goal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(123,104,238,0.08), rgba(123,104,238,0.02));
    border: 1px solid rgba(123,104,238,0.15);
    margin-bottom: 16px;
}

.bonus-sidebar-goal-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--brand-primary, #7b68ee);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.bonus-sidebar-goal-text {
    flex: 1;
    min-width: 0;
}

.bonus-sidebar-goal-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #696997);
    font-weight: 600;
    margin-bottom: 2px;
}

.bonus-sidebar-goal-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading, #0b0b31);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- linear progress bars (turnover + time) ----------------- */

.bonus-sidebar-bar {
    margin-bottom: 14px;
}

.bonus-sidebar-bar-track {
    height: 8px;
    background: #eef0f5;
    border-radius: 999px;
    overflow: hidden;
}

.bonus-sidebar-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 600ms ease-out;
}

.bonus-sidebar-bar-fill--turnover {
    background: linear-gradient(90deg, #7b68ee, #9a8bf2);
}

.bonus-sidebar-bar-fill--time {
    background: #c8c8da;
}

.bonus-sidebar-bar-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-heading, #0b0b31);
}

.bonus-sidebar-bar-current {
    color: var(--text-body, #5f5f5f);
}

.bonus-sidebar-bar-current i {
    margin-right: 4px;
    opacity: 0.7;
}

.bonus-sidebar-bar-pct {
    font-weight: 700;
    flex-shrink: 0;
}

.bonus-sidebar-bar-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted, #696997);
}

.bonus-sidebar-bar--time .bonus-sidebar-bar-pct {
    color: var(--text-muted, #696997);
    font-weight: 600;
}

/* --- KPI hint — pace-coloured actionable metric -------------
   The colour itself is the signal: ahead = green, on-track =
   primary, behind = amber, expired = danger, done = success. */

.bonus-sidebar-kpi {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    margin-top: 16px;
    margin-bottom: 4px;
    border: 1px solid transparent;
}

.bonus-sidebar-kpi-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
}

.bonus-sidebar-kpi-text {
    flex: 1;
    min-width: 0;
}

.bonus-sidebar-kpi-text strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.bonus-sidebar-kpi-text span {
    font-size: 12px;
    color: var(--text-body, #5f5f5f);
    line-height: 1.4;
}

.bonus-sidebar-kpi--ahead {
    background: rgba(40,167,69,0.08);
    border-color: rgba(40,167,69,0.18);
}

.bonus-sidebar-kpi--ahead .bonus-sidebar-kpi-icon { background: #28a745; }

.bonus-sidebar-kpi--ahead strong { color: #1e7e34; }

.bonus-sidebar-kpi--on-track {
    background: rgba(123,104,238,0.08);
    border-color: rgba(123,104,238,0.18);
}

.bonus-sidebar-kpi--on-track .bonus-sidebar-kpi-icon { background: var(--brand-primary, #7b68ee); }

.bonus-sidebar-kpi--on-track strong { color: var(--brand-primary, #7b68ee); }

.bonus-sidebar-kpi--behind {
    background: rgba(255,86,29,0.08);
    border-color: rgba(255,86,29,0.18);
}

.bonus-sidebar-kpi--behind .bonus-sidebar-kpi-icon { background: #ff561d; }

.bonus-sidebar-kpi--behind strong { color: #c44114; }

.bonus-sidebar-kpi--done {
    background: rgba(40,167,69,0.08);
    border-color: rgba(40,167,69,0.18);
}

.bonus-sidebar-kpi--done .bonus-sidebar-kpi-icon { background: #28a745; }

.bonus-sidebar-kpi--done strong { color: #1e7e34; }

.bonus-sidebar-kpi--expired {
    background: rgba(220,53,69,0.08);
    border-color: rgba(220,53,69,0.18);
}

.bonus-sidebar-kpi--expired .bonus-sidebar-kpi-icon { background: #dc3545; }

.bonus-sidebar-kpi--expired strong { color: #b21f2d; }

/* --- pending state — ETA + preview --------------------------- */

.bonus-sidebar-pending {
    text-align: center;
    padding: 8px 4px 4px;
}

.bonus-sidebar-pending-icon {
    font-size: 32px;
    color: #ff561d;
    opacity: 0.7;
    margin-bottom: 10px;
}

.bonus-sidebar-pending-headline {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading, #0b0b31);
    margin-bottom: 10px;
}

.bonus-sidebar-pending-amount {
    color: var(--text-muted, #696997);
    font-weight: 600;
}

.bonus-sidebar-pending-eta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255,86,29,0.10);
    color: #c44114;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
}

.bonus-sidebar-pending-eta i {
    font-size: 11px;
}

.bonus-sidebar-pending-body {
    font-size: 12px;
    color: var(--text-body, #5f5f5f);
    line-height: 1.5;
    margin: 0 6px;
}

/* --- collapsible details ------------------------------------- */

.bonus-sidebar-details-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f7f7fb;
    border: 1px solid #eef0f5;
    border-radius: 8px;
    color: var(--text-heading, #0b0b31);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.bonus-sidebar-details-toggle:hover {
    background: #eef0f5;
}

.bonus-sidebar-details-toggle[aria-expanded="true"] .bonus-sidebar-details-chevron {
    transform: rotate(180deg);
}

.bonus-sidebar-details-chevron {
    transition: transform 200ms ease;
    font-size: 11px;
    opacity: 0.6;
}

.bonus-sidebar-details {
    margin-top: 8px;
}

.bonus-sidebar-details-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    font-size: 12px;
}

.bonus-sidebar-details-list dt {
    color: var(--text-muted, #696997);
    font-weight: 400;
    margin: 0;
}

.bonus-sidebar-details-list dd {
    margin: 0;
    color: var(--text-heading, #0b0b31);
    font-weight: 600;
    text-align: right;
}

.bonus-sidebar-help {
    margin-top: 12px;
    padding: 10px;
    background: #f7f7fb;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--text-body, #5f5f5f);
    line-height: 1.5;
}

.bonus-sidebar-help i {
    color: var(--brand-primary, #7b68ee);
    margin-top: 2px;
    flex-shrink: 0;
}

/* --- empty state --------------------------------------------- */

.bonus-sidebar-empty {
    text-align: center;
    padding: 8px 4px 4px;
}

.bonus-sidebar-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(123, 104, 238, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary, #7b68ee);
    font-size: 22px;
}

.bonus-sidebar-empty-title,
.bonus-sidebar-empty-headline {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading, #0b0b31);
    margin-bottom: 6px;
}

.bonus-sidebar-empty-headline {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #696997);
    font-weight: 600;
    margin-bottom: 4px;
}

.bonus-sidebar-empty-amount {
    font-size: 24px;
    font-weight: 800;
    color: var(--brand-primary, #7b68ee);
    line-height: 1.1;
    margin-bottom: 8px;
}

.bonus-sidebar-empty-body {
    font-size: 12px;
    color: var(--text-body, #5f5f5f);
    line-height: 1.5;
    margin: 0 6px 14px;
}

.bonus-sidebar-empty-steps {
    list-style: none;
    counter-reset: bonus-step;
    padding: 0;
    margin: 0 0 16px;
    text-align: left;
}

.bonus-sidebar-empty-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: var(--text-body, #5f5f5f);
    line-height: 1.5;
    padding: 6px 4px;
}

.bonus-sidebar-empty-steps li span {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-primary, #7b68ee);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-sidebar-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--brand-primary, #7b68ee);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease, transform 150ms ease;
}

.bonus-sidebar-empty-cta:hover {
    background: #6a57d8;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.bonus-sidebar-empty-cta i {
    font-size: 11px;
}

/* --- mobile tweaks (sidebar drops below the form) ------------ */

@media (max-width: 991.98px) {
    .bonus-sidebar-empty-amount {
        font-size: 22px;
    }
}

/* Shared component styles */

/* ===========================================
   Settings Modal (Language / Currency)
   =========================================== */

#changeLanguageModal .modal-dialog {
    max-width: 480px;
}

.settings-modal {
    background: #ffffff;
    border-radius: 12px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.settings-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
}

.settings-modal .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--trading-text-primary);
    margin: 0;
}

.settings-modal .modal-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-light-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    font-size: 14px;
}

.settings-modal .modal-close-btn:hover {
    background: var(--bg-page);
    color: var(--trading-text-primary);
}

.settings-modal .modal-body {
    padding: 20px;
    background: #ffffff;
}

.settings-modal__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.settings-modal__option {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--trading-text-primary);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.settings-modal__option:hover {
    background: var(--bg-page);
    color: var(--trading-text-primary);
    text-decoration: none;
}

.settings-modal__option.is-active {
    background: rgba(123, 104, 238, 0.08);
    color: var(--brand-primary);
    font-weight: 600;
}

@media (max-width: 575px) {
    .settings-modal__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Settings Modal - Dark Theme */

.settings-modal--dark {
    background: var(--trading-bg-tertiary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.settings-modal--dark .modal-header {
    background: var(--trading-bg-tertiary);
    border-bottom-color: var(--trading-border-primary);
}

.settings-modal--dark .modal-body {
    background: var(--trading-bg-tertiary);
}

.settings-modal--dark .modal-title {
    color: var(--trading-text-primary);
}

.settings-modal--dark .modal-close-btn {
    color: var(--trading-text-secondary);
}

.settings-modal--dark .modal-close-btn:hover {
    background: var(--trading-bg-elevated);
    color: var(--trading-text-primary);
}

.settings-modal--dark .settings-modal__option {
    color: var(--trading-text-primary);
}

.settings-modal--dark .settings-modal__option:hover {
    background: var(--trading-bg-elevated);
    color: var(--trading-text-primary);
}

.settings-modal--dark .settings-modal__option.is-active {
    background: rgba(123, 104, 238, 0.15);
    color: var(--brand-primary);
}

/* ==========================================================================
   Modal Component Styles
   Shared styles for all modal dialogs
   ========================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal-container {
    background: var(--trading-bg-tertiary);
    border: 1px solid var(--trading-border-primary);
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-container--wide {
    max-width: 480px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--trading-border-primary);
    background: var(--trading-bg-secondary);
}

.modal-title {
    color: var(--trading-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    color: var(--trading-text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    transition: color 0.15s ease;
    border-radius: 4px;
}

.modal-close-btn:hover {
    color: var(--trading-text-primary);
    background: var(--trading-border-primary);
}

.modal-close-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--trading-border-primary);
    background: var(--trading-bg-secondary);
}

/* Restriction Message */

.modal-restriction {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(246, 70, 93, 0.15);
    border-top: 1px solid rgba(246, 70, 93, 0.3);
    color: var(--trading-sell);
    font-size: 13px;
    font-weight: 500;
}

.modal-restriction i {
    font-size: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   Light Theme
   ========================================================================== */

.theme-light .modal-container {
    background: #ffffff;
    border-color: var(--trading-border-primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.theme-light .modal-header {
    background: var(--bg-page);
    border-bottom-color: var(--trading-border-primary);
}

.theme-light .modal-title {
    color: var(--trading-text-primary);
}

.theme-light .modal-close-btn {
    color: var(--text-light-secondary);
}

.theme-light .modal-close-btn:hover {
    color: var(--trading-text-primary);
    background: var(--trading-border-primary);
}

.theme-light .modal-footer {
    background: var(--bg-page);
    border-top-color: var(--trading-border-primary);
}

.theme-light .modal-restriction {
    background: rgba(246, 70, 93, 0.08);
    border-top-color: rgba(246, 70, 93, 0.2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
    .modal-container {
        width: 95%;
        max-height: 95vh;
    }

    .modal-body {
        padding: 16px;
    }
}

/* ==========================================================================
   Button Component Styles
   Shared button styles for modals and forms
   ========================================================================== */

.btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-secondary {
    background: var(--trading-border-primary);
    color: var(--trading-text-primary);
}

.btn-secondary:hover {
    background: var(--input-border);
}

.btn-primary {
    background: var(--trading-accent-primary);
    color: var(--trading-bg-secondary);
}

.btn-primary:hover:not(:disabled) {
    background: #d4a50a;
}

.btn-primary:disabled,
.btn-primary.btn-disabled {
    background: var(--input-border);
    color: var(--trading-text-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ==========================================================================
   Light Theme
   ========================================================================== */

.theme-light .btn-secondary {
    background: var(--trading-border-primary);
    color: var(--trading-text-primary);
}

.theme-light .btn-secondary:hover {
    background: #d0d0d0;
}

.theme-light .btn-primary {
    background: #fcd535;
    color: var(--trading-text-primary);
}

.theme-light .btn-primary:hover:not(:disabled) {
    background: var(--trading-accent-primary);
}

.theme-light .btn-primary:disabled,
.theme-light .btn-primary.btn-disabled {
    background: var(--trading-border-primary);
    color: #999999;
}

/* ==========================================================================
   Form Component Styles
   Shared form styles for modals and inputs
   ========================================================================== */

/* Form Section */

.form-section {
    background: var(--trading-bg-secondary);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

/* Input Group */

.input-group {
    margin-bottom: 16px;
}

.input-group:last-child {
    margin-bottom: 0;
}

.input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.input-label {
    display: block;
    color: var(--trading-text-secondary);
    font-size: 12px;
    margin-bottom: 6px;
}

.input-label.text-right {
    text-align: right;
}

/* Input Wrapper */

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Input Field */

.input-field {
    width: 100%;
    flex: 1;
    background: var(--trading-border-primary);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--trading-text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.input-field--with-suffix {
    padding-right: 60px;
}

.input-field:focus {
    border-color: var(--trading-accent-primary);
}

.input-field.text-right {
    text-align: right;
}

.input-field[readonly] {
    background: var(--trading-bg-secondary);
    color: var(--trading-text-secondary);
    cursor: not-allowed;
}

/* Input Suffix (absolute overlay) */

.input-suffix {
    position: absolute;
    right: 14px;
    color: var(--trading-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

/* Input Append (adjacent addon block) */

.input-append {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: var(--trading-bg-secondary);
    border: 1px solid var(--trading-border-primary);
    border-left: none;
    border-radius: 0 6px 6px 0;
    color: var(--trading-text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    align-self: stretch;
}

.input-wrapper .input-field + .input-append {
    border-radius: 0 6px 6px 0;
}

.input-wrapper .input-field:has(+ .input-append) {
    border-radius: 6px 0 0 6px;
}

/* Input Row (for side-by-side inputs) */

.input-row {
    display: flex;
    gap: 12px;
}

.input-row .input-group {
    flex: 1;
    margin-bottom: 0;
}

/* Available Balance Link */

.available-balance {
    font-size: 12px;
    color: var(--trading-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.available-balance:hover strong {
    color: var(--trading-accent-primary);
}

.available-balance strong {
    color: var(--trading-text-primary);
}

/* Slider Section */

.slider-section {
    margin-top: 8px;
}

/* ==========================================================================
   Light Theme
   ========================================================================== */

.theme-light .form-section {
    background: var(--bg-page);
}

.theme-light .input-label {
    color: var(--text-light-secondary);
}

.theme-light .input-field {
    background: #ffffff;
    border-color: var(--trading-border-primary);
    color: var(--trading-text-primary);
}

.theme-light .input-field:focus {
    border-color: var(--trading-accent-secondary);
}

.theme-light .input-field[readonly] {
    background: var(--bg-page);
    color: var(--text-light-secondary);
}

.theme-light .input-suffix {
    color: var(--text-light-secondary);
}

.theme-light .input-append {
    background: #f0f1f2;
    border-color: #ffffff;
    color: var(--text-light-secondary);
}

.theme-light .available-balance {
    color: var(--text-light-secondary);
}

.theme-light .available-balance:hover strong {
    color: var(--trading-accent-secondary);
}

.theme-light .available-balance strong {
    color: var(--trading-text-primary);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
    .input-row {
        flex-direction: column;
        gap: 12px;
    }

    .input-label.text-right {
        text-align: left;
    }

    .input-field.text-right {
        text-align: left;
    }
}

/* ==========================================================================
   Utility Styles
   Shared utility classes for modals and components
   ========================================================================== */

/* Info Row */

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.info-row:not(:last-child) {
    border-bottom: 1px solid var(--trading-border-primary);
}

.info-label {
    color: var(--trading-text-secondary);
    font-size: 13px;
}

.info-value {
    color: var(--trading-text-primary);
    font-size: 13px;
    font-weight: 600;
}

/* Warning List */

.warning-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.warning-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--trading-bg-secondary);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--trading-text-secondary);
}

.warning-item i {
    color: var(--trading-accent-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.warning-item.danger {
    background: var(--trading-sell-bg);
    border: 1px solid rgba(246, 70, 93, 0.2);
}

.warning-item.danger i {
    color: var(--trading-sell);
}

/* Warning Message (inline) */

.warning-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--trading-sell-bg);
    border: 1px solid rgba(246, 70, 93, 0.3);
    border-radius: 6px;
    color: var(--trading-sell);
    font-size: 12px;
    margin-top: 12px;
}

/* Hint Message */

.hint-message {
    color: var(--trading-text-secondary);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 12px;
}

/* Alert Message */

.alert-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

.alert-message.success {
    background: var(--trading-buy-bg);
    border: 1px solid rgba(14, 203, 129, 0.3);
    color: var(--trading-buy);
}

.alert-message.danger {
    background: var(--trading-sell-bg);
    border: 1px solid rgba(246, 70, 93, 0.3);
    color: var(--trading-sell);
}

.alert-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 2px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.alert-close:hover {
    opacity: 1;
}

/* Text Colors */

.text-success {
    color: var(--trading-buy) !important;
}

.text-danger {
    color: var(--trading-sell) !important;
}

/* ==========================================================================
   Light Theme
   ========================================================================== */

.theme-light .info-row:not(:last-child) {
    border-bottom-color: var(--trading-border-primary);
}

.theme-light .info-label {
    color: var(--text-light-secondary);
}

.theme-light .info-value {
    color: var(--trading-text-primary);
}

.theme-light .warning-item {
    background: var(--bg-page);
    color: var(--text-light-secondary);
}

.theme-light .warning-item i {
    color: var(--trading-accent-secondary);
}

.theme-light .warning-item.danger {
    background: rgba(246, 70, 93, 0.05);
    border-color: rgba(246, 70, 93, 0.15);
}

.theme-light .hint-message {
    color: var(--text-light-secondary);
}

/* =================================================================
   Vue Toast Notification — theme-aware styles
   Uses trading CSS variables for dark/light theme support.

   NOTE: vue-toast-notification injects its own theme-default.css via
   JS bundle which loads AFTER our stylesheet. We use !important on
   all overridden properties to guarantee our styles win.
   ================================================================= */

/* ---- Toast variables (dark theme default) ---- */

:root {
    --toast-bg: rgba(24, 26, 32, 0.88);
    --toast-text: var(--trading-text-primary, #eaecef);
    --toast-shadow: var(--trading-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.5));
    --toast-close: var(--trading-text-tertiary, #5e6673);
    --toast-close-hover: var(--trading-text-primary, #eaecef);

    --toast-success-bg: rgba(14, 203, 129, 0.08);
    --toast-success-border: rgba(14, 203, 129, 0.3);
    --toast-success-color: #0ecb81;

    --toast-error-bg: rgba(246, 70, 93, 0.08);
    --toast-error-border: rgba(246, 70, 93, 0.3);
    --toast-error-color: #f6465d;

    --toast-warning-bg: rgba(240, 185, 11, 0.08);
    --toast-warning-border: rgba(240, 185, 11, 0.3);
    --toast-warning-color: #f0b90b;

    --toast-info-bg: rgba(23, 162, 184, 0.08);
    --toast-info-border: rgba(23, 162, 184, 0.3);
    --toast-info-color: #17a2b8;
}

/* ---- Light theme overrides ---- */

.trading-page-light {
    --toast-bg: rgba(255, 255, 255, 0.88);
    --toast-text: var(--trading-text-primary, #1a1a1a);
    --toast-shadow: var(--trading-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    --toast-close: var(--trading-text-tertiary, #999999);
    --toast-close-hover: var(--trading-text-primary, #1a1a1a);

    --toast-success-bg: rgba(38, 166, 154, 0.06);
    --toast-success-border: rgba(38, 166, 154, 0.25);
    --toast-success-color: #26a69a;

    --toast-error-bg: rgba(239, 83, 80, 0.06);
    --toast-error-border: rgba(239, 83, 80, 0.25);
    --toast-error-color: #ef5350;

    --toast-warning-bg: rgba(240, 185, 11, 0.06);
    --toast-warning-border: rgba(240, 185, 11, 0.25);
    --toast-warning-color: #c99400;

    --toast-info-bg: rgba(23, 162, 184, 0.06);
    --toast-info-border: rgba(23, 162, 184, 0.25);
    --toast-info-color: #17a2b8;
}

/* ---- layout / positioning ---- */

.v-toast {
    position: fixed !important;
    display: flex !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 2em !important;
    overflow: hidden !important;
    z-index: 10000 !important;
    pointer-events: none !important;
}

.v-toast.v-toast--top { flex-direction: column !important; }

.v-toast.v-toast--bottom { flex-direction: column-reverse !important; }

.v-toast.v-toast--custom-parent { position: absolute !important; }

/* ---- animations ---- */

@keyframes vToastFadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes vToastFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.v-toast--fade-in-down { animation-name: vToastFadeInDown !important; }

.v-toast--fade-in-up   { animation-name: vToastFadeInDown !important; }

.v-toast--fade-out     { animation-name: vToastFadeOut !important; }

/* ---- toast item ---- */

.v-toast__item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    animation-duration: 150ms !important;
    margin: .5em 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    overflow: hidden !important;
    min-width: 250px !important;
    max-width: 350px !important;
    min-height: auto !important;
    padding-right: 32px !important;

    background-color: var(--toast-bg) !important;
    color: var(--toast-text) !important;
    border-radius: var(--trading-radius-lg, 8px) !important;
    box-shadow: var(--toast-shadow) !important;
    font-size: 12px !important;
    opacity: 1 !important;
    border: 1px solid !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* alignment */

.v-toast__item.v-toast__item--top-right,
.v-toast__item.v-toast__item--bottom-right { align-self: flex-end !important; }

.v-toast__item.v-toast__item--top-left,
.v-toast__item.v-toast__item--bottom-left  { align-self: flex-start !important; }

.v-toast__item.v-toast__item--top,
.v-toast__item.v-toast__item--bottom       { align-self: center !important; }

/* ---- variant styles ---- */

.v-toast__item--success {
    background-color: color-mix(in srgb, var(--toast-bg) 92%, var(--toast-success-color)) !important;
    border-color: var(--toast-success-border) !important;
}

.v-toast__item--error {
    background-color: color-mix(in srgb, var(--toast-bg) 92%, var(--toast-error-color)) !important;
    border-color: var(--toast-error-border) !important;
}

.v-toast__item--warning {
    background-color: color-mix(in srgb, var(--toast-bg) 92%, var(--toast-warning-color)) !important;
    border-color: var(--toast-warning-border) !important;
    color: var(--toast-text) !important;
}

.v-toast__item--info {
    background-color: color-mix(in srgb, var(--toast-bg) 92%, var(--toast-info-color)) !important;
    border-color: var(--toast-info-border) !important;
}

.v-toast__item--default {
    background-color: var(--toast-bg) !important;
    border-color: var(--trading-border-primary, rgba(255,255,255,0.1)) !important;
}

/* ---- icon ---- */

.v-toast__icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin: 12px 14px 0 !important;
    flex-shrink: 0 !important;
}

.v-toast__item--success .v-toast__icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3e%3cpath fill='%230ecb81' d='M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329l-16 18a1.997 1.997 0 01-2.745.233l-10-8a2 2 0 012.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 012.99 2.659z'/%3e%3c/svg%3e") no-repeat center / contain !important;
}

.v-toast__item--error .v-toast__icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51.976 51.976'%3e%3cpath fill='%23f6465d' d='M44.373 7.603c-10.137-10.137-26.632-10.138-36.77 0-10.138 10.138-10.137 26.632 0 36.77s26.632 10.138 36.77 0c10.137-10.138 10.137-26.633 0-36.77zm-8.132 28.638a2 2 0 01-2.828 0l-7.425-7.425-7.778 7.778a2 2 0 11-2.828-2.828l7.778-7.778-7.425-7.425a2 2 0 112.828-2.828l7.425 7.425 7.071-7.071a2 2 0 112.828 2.828l-7.071 7.071 7.425 7.425a2 2 0 010 2.828z'/%3e%3c/svg%3e") no-repeat center / contain !important;
}

.v-toast__item--warning .v-toast__icon {
    background: url("data:image/svg+xml,%3csvg viewBox='0 0 52 52' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23f0b90b' d='M49.466 41.26L29.216 6.85c-.69-1.16-1.89-1.85-3.22-1.85-1.32 0-2.53.69-3.21 1.85L2.536 41.26c-.71 1.2-.72 2.64-.03 3.85.68 1.18 1.89 1.89 3.24 1.89h40.51c1.35 0 2.56-.71 3.23-1.89.7-1.21.69-2.65-.02-3.85zm-25.53-21.405h3.381v3.187l-.724 8.92H24.66l-.725-8.92v-3.187zm2.97 17.344a1.712 1.712 0 01-1.267.543c-.491 0-.914-.181-1.268-.543a1.788 1.788 0 01-.531-1.297c0-.502.176-.935.53-1.297a1.712 1.712 0 011.269-.544c.49 0 .914.181 1.268.544s.53.795.53 1.297c0 .503-.176.934-.53 1.297z'/%3e%3c/svg%3e") no-repeat center / contain !important;
}

.v-toast__item--info .v-toast__icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.999 45.999'%3e%3cpath fill='%2317a2b8' d='M39.264 6.736c-8.982-8.981-23.545-8.982-32.528 0-8.982 8.982-8.981 23.545 0 32.528 8.982 8.98 23.545 8.981 32.528 0 8.981-8.983 8.98-23.545 0-32.528zM25.999 33a3 3 0 11-6 0V21a3 3 0 116 0v12zm-3.053-17.128c-1.728 0-2.88-1.224-2.844-2.735-.036-1.584 1.116-2.771 2.879-2.771 1.764 0 2.88 1.188 2.917 2.771-.001 1.511-1.152 2.735-2.952 2.735z'/%3e%3c/svg%3e") no-repeat center / contain !important;
}

/* ---- text ---- */

.v-toast__text {
    margin: 0 !important;
    padding: 8px 14px 14px !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
    font-size: 12px !important;
    color: var(--toast-text) !important;
}

/* ---- close button (pseudo-element) ---- */

.v-toast__item::after {
    content: "\00d7";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: var(--toast-close);
    cursor: pointer;
    transition: color var(--trading-transition-fast, 0.1s ease);
}

.v-toast__item:hover::after {
    color: var(--toast-close-hover);
}

/* ---- responsive ---- */

@media screen and (max-width: 768px) {
    .v-toast {
        padding: 0 !important;
        position: fixed !important;
    }
    .v-toast__item {
        max-width: 100% !important;
        border-radius: 0 !important;
    }
}