@import url('dash-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap');

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

.logoWidth {
    width: 220px;
    padding: 10px;
}

/* UltimateFunded wordmark (_LogoPartial) — website header ".brand":
   Space Grotesk 700, "Funding" in the site accent */
.logoText {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.logoText b {
    font-weight: 700;
    color: #21e6a8;
}

.dft-logo {
    width: 34px;
    height: 34px;
    flex: none;
}

/* Footer brand name (_FooterPartial) — same wordmark as the logo */
.footer-brand {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #e9eef6 !important;
}

.footer-brand b {
    font-weight: 700;
    color: #21e6a8;
}

@keyframes typing {
    from {
        width: 0;
    }
}

body {
    font-family: 'Poppins', sans-serif;
    color: #e5e5e5;
    position: relative;
    min-height: 100vh;
    background-image: radial-gradient(ellipse at 15% 15%, rgba(16, 32, 100, 0.75) 0%, transparent 50%), radial-gradient(ellipse at 85% 10%, rgba(10, 42, 110, 0.60) 0%, transparent 48%), radial-gradient(ellipse at 70% 75%, rgba(26, 14, 92, 0.65) 0%, transparent 52%), radial-gradient(ellipse at 10% 80%, rgba(18, 10, 74, 0.55) 0%, transparent 45%), radial-gradient(ellipse at 92% 50%, rgba(10, 40, 80, 0.50) 0%, transparent 40%), radial-gradient(ellipse at 45% 50%, rgba(10, 20, 58, 0.92) 0%, transparent 70%);
    background-attachment: fixed;
    background-size: cover;
}

#loader {
    position: absolute;
    height: 100%;
    top: 20%;
    width: 100%;
    z-index: 100;
}

#loaderSmall {
    width: 100%;
    z-index: 100;
    height: 305px;
    position: relative;
    top: 25%;
}

    #loader svg, #loaderSmall svg {
        width: 100%;
    }

/* Style for the loader */
.btnLoader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Style for the spinner */
.spinner {
    border: 3px solid #fff;
    border-left: 3px solid #2962ff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.padLR {
    padding: 0 80px !important;
}


.themeTextColor {
    font-weight: 600;
    color: #14b4e6 !important;
}

.themeBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 170px;
    color: #fff;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: .75rem;
    border-color: rgba(255,255,255,.08);
    transition: all .25s ease;
    background: linear-gradient(135deg, #14b4e6 0%, #2962ff 100%);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 .5rem 1rem rgba(20,180,230,.25);
}

    .themeBtn:hover:not(:disabled) {
        border-color: rgba(255,255,255,.12) !important;
        background: linear-gradient(135deg, #29c4f2 0%, #3A7DFD 100%) !important;
        color: #fff !important;
        box-shadow: 0 .75rem 1.5rem rgba(20,180,230,.28) !important;
        transform: translateY(-2px) !important;
    }

    .themeBtn:focus, .themeBtn.focus {
        color: #fff;
        border-color: rgba(255,255,255,.16);
        background: linear-gradient(135deg, #29c4f2 0%, #3A7DFD 100%);
        box-shadow: 0 0 0 .2rem rgba(20,180,230,.18) !important;
        transform: translateY(0);
    }

    .themeBtn:active, .themeBtn.active {
        color: #fff !important;
        background: linear-gradient(135deg, #149dc9 0%, #1f56e3 100%) !important;
        border-color: rgba(255,255,255,.08) !important;
        transform: translateY(0) !important;
    }

        .themeBtn:active:focus, .themeBtn.active:focus {
            box-shadow: 0 0 0 .2rem rgba(20,180,230,.18) !important;
        }

    .themeBtn:disabled {
        opacity: 0.68;
        cursor: not-allowed;
        pointer-events: none;
        box-shadow: none !important;
    }

/* -- Proof upload button loading state ----------------------- */
.proof-upload-btn .proof-btn-spinner {
    vertical-align: middle;
}

.proof-upload-btn .proof-btn-icon {
    font-size: 1rem;
    vertical-align: middle;
}

.fs24 {
    font-size: 24px;
}



button[type=submit] {
    position: relative;
}

.btn-secondary {
    color: #fff !important;
    border-radius: 10px;
}


.btmSpacingM {
    margin-bottom: 40px;
}

.btmSpacingL {
    margin-bottom: 60px;
}

.btmSpacingSection {
    margin-bottom: 120px;
}

.mb150 {
    margin-bottom: 150px;
}

.topMinus50 {
    top: -50px;
    z-index: 0;
}

.mt-100 {
    margin-top: 100px;
}

.w95 {
    width: 95% !important;
}

.mtop120 {
    margin-top: 120px;
}

.flexCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexBetween {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #e5e5e5 !important;
}

.dataTables_wrapper .dataTables_filter {
    padding-bottom: 20px;
}

.dataTables_wrapper .dataTables_processing {
    height: 65px;
    background: linear-gradient(to right, rgb(255 255 255 / 0%) 0%, rgb(41 98 255 / 75%) 25%, rgb(41 98 255 / 71%) 75%, rgb(255 255 255 / 0%) 100%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_length select {
    background: linear-gradient(to bottom, #1485e6 0%, #002b99 100%);
    color: #fff !important;
    border: 1px solid #1485e6;
}


.page-item.active .page-link {
    background-color: #2a62ff;
    border-color: #2a62ff;
}


.order-1 h6 {
    color: #cbcbe2;
}

.dashAccDetails ul li {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    padding-bottom: 7px;
}

.selectAccount h4, .selectAccount h5 {
    color: #ffffffde;
}

.selectAccount h5 {
    padding-bottom: 8px;
}

.selectAccount .card-title {
    border-radius: 0.5rem;
}

.selectAccount .title {
    background: #1a1c2c;
    border: 9px solid #656565a6;
}

.selectAccount .card {
    background: linear-gradient(#1B224F,#0e153e,#030937);
}


.selectAccount ul {
    padding: 15px 33px;
    position: relative;
    z-index: 2;
}


.accDetails .card {
    height: 110%;
}

.selectAccount .btn {
    z-index: 2;
}


.selectAccount ul li {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.9rem;
    font-size: 18px;
}

    .selectAccount ul li .accValue {
        font-weight: 500;
        color: #ffffffde;
    }

.accDetails .card-title h4 {
    color: #ffffffba;
}

.accDetails ul li {
    color: #ffffffba;
    font-weight: normal;
}

.passwordDiv {
    display: flex;
    align-items: center;
    width: 100%;
}


.dashPassPos {
    right: 50px;
}

.inputboxToText {
    color: #ffffffba;
    border: none;
    outline: none;
    background-color: transparent;
    -webkit-appearance: none;
    padding: 0px;
    box-sizing: unset;
    text-align: left;
    width: inherit;
}

.inputPasswordPad {
    padding: 1.5rem 0;
}

.copy-icon {
    cursor: pointer;
}

.selectAccount li small {
    font-size: 60%;
}

.order-2 .card-body li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.topup p.card-text {
    font-size: 16px;
    line-height: 34px;
    font-weight: 500;
    padding-bottom: 7%;
}


.topup ul {
    padding: 0 0px;
}

    .topup ul li {
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        line-height: 34px;
        font-weight: 500;
    }

.download i {
    font-size: 150px;
}

.download .col-md-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fefeff1a;
}

/* -- Download Page --
   Themed onto the shared --dash-* tokens from home-dashboard.css (linked on
   this page) so it matches the rest of the AI-trading dashboard rather than
   its own disconnected navy/blue palette. .dl-card elements also carry the
   Bootstrap .card class in the markup, so background/border/radius/shadow/
   hover-lift/corner-brackets come from .dashboard-modern .card for free —
   this block only supplies the layout and platform-specific bits .card
   doesn't know about. */
.dl-header {
    text-align: center;
    padding: 10px 0 0;
}

.dl-header-icon {
    font-size: 3rem;
    color: var(--dash-accent);
    margin-bottom: 10px;
    line-height: 1;
    filter: drop-shadow(0 0 18px rgba(var(--dash-accent-rgb), 0.5));
}

.dl-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--dash-text-bright);
    margin-bottom: 8px;
}

.dl-subtitle {
    color: var(--dash-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.dl-card {
    padding: 36px 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

/* Glowing ring badge — a crisp bright ring on a near-black disc with a soft
   outer bloom, plus a fainter pulsing ring orbiting outside it (reusing the
   ring-pulse keyframe already defined for the hero illustrations/podium). */
.dl-icon-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    font-size: 3.4rem;
    flex-shrink: 0;
    background: radial-gradient(circle at 50% 40%, rgba(var(--dash-accent-rgb), 0.18) 0%, rgba(4, 7, 14, 0.95) 72%);
    border: 2px solid rgba(var(--dash-accent-soft-rgb), 0.75);
    box-shadow:
        0 0 0 1px rgba(var(--dash-accent-rgb), 0.15),
        0 0 22px 2px rgba(var(--dash-accent-rgb), 0.45),
        inset 0 0 16px rgba(var(--dash-accent-rgb), 0.25);
}

.dl-icon-wrap::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(var(--dash-accent-rgb), 0.30);
    animation: urRing 3.2s ease-in-out infinite;
    pointer-events: none;
}

/* Boxicons sets `.bx { font-size: 1.15rem }` straight on the <i>, so the glyph
   never inherits the wrapper's size — it has to be targeted directly for the
   icon to actually fill the ring. */
.dl-icon-wrap i {
    font-size: 3.4rem;
    line-height: 1;
}

/* Platform glyphs keep their brand colour (recognisable at a glance); only
   the ring behind them is the shared theme accent, via .dl-icon-wrap above. */
.dl-windows { color: #0078d4; }
.dl-ios { color: #d8d8e2; }
.dl-android { color: #3ddc84; }
.dl-web { color: var(--dash-accent-2); }
.dl-mac { color: #d8d8e2; }

.dl-body {
    flex: 1;
}

.dl-card-title {
    color: var(--dash-text-bright);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.dl-card-text {
    color: var(--dash-text-muted);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 22px;
}

.dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 28px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 500;
    background: var(--dash-gradient);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(var(--dash-accent-rgb), 0.35);
    transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    margin-top: auto;
}

    .dl-btn:hover {
        opacity: 0.92;
        transform: translateY(-1px);
        box-shadow: 0 6px 22px rgba(var(--dash-accent-rgb), 0.5), 0 0 20px -4px rgba(var(--dash-accent-3-rgb), 0.5);
    }

.dl-btn-accent {
    background: var(--dash-gradient-cyan);
    box-shadow: 0 4px 16px rgba(var(--dash-accent-2-rgb), 0.35);
}

    .dl-btn-accent:hover {
        box-shadow: 0 6px 22px rgba(var(--dash-accent-2-rgb), 0.5);
    }

.btn-sm {
    border-radius: 5px;
    padding: 4px 20px
}

.tradingOverview ul {
    padding: 0px;
}

.tradingOverview .pagination {
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
    cursor: pointer;
}

.infos {
    margin-top: 20px;
    display: flex;
    justify-content: end;
}

.tradingOverview .pagination li a {
    padding: 4px 12px;
    border-radius: 4px;
}


.tradingOverview li {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.menuStartNew {
    position: absolute;
    bottom: 0px;
}

.closedTrades .search-field {
    display: none;
}

.closedTrades .actionBar {
    display: none;
}


.certificate .bx-check-circle {
    color: green;
}

.certificate .bx-x-circle {
    color: red;
}

.certificate p.card-text {
    color: #a3a4cc;
}

.dataTables_filter {
    float: right;
}


#inviteTransList_filter {
    margin-bottom: 25px;
}
    /* Adjust the search input style */
    #inviteTransList_filter input[type="search"] {
        padding: 5px; /* Adjust the padding as needed */
        border-radius: 4px; /* Add border-radius for rounded corners */
        border: 1px solid #ccc; /* Add border for visual separation */
        outline: none; /* Remove outline */
        transition: border-color 0.2s; /* Add a transition effect */
        width: 125px;
    }

        /* Style the search input when focused */
        #inviteTransList_filter input[type="search"]:focus {
            border-color: #007bff; /* Change border color on focus */
        }

#inviteTransList_info {
    margin-top: 16px;
}

#inviteRegList_info {
    margin-top: 16px;
}

#inviteRegList_paginate {
    margin-top: 16px;
}

#inviteTransList_paginate {
    margin-top: 16px;
}
/*svg animated*/
svg#freepik_stories-product-quality:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-product-quality.animated #freepik--background-complete--inject-12 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight;
    animation-delay: 0s;
}

svg#freepik_stories-product-quality.animated #freepik--Stars--inject-12 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;
    animation-delay: 0s;
}

svg#freepik_stories-product-quality.animated #freepik--speech-bubble--inject-12 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) fadeIn;
    animation-delay: 0s;
}

svg#freepik_stories-product-quality.animated #freepik--Clipboard--inject-12 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;
    animation-delay: 0s;
}

svg#freepik_stories-product-quality.animated #freepik--Character--inject-12 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp,1.5s Infinite linear floating;
    animation-delay: 0s,1s;
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: inherit;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


svg#freepik_stories-digital-transformation:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-digital-transformation.animated #freepik--background-complete--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;
    animation-delay: 0s;
}

svg#freepik_stories-digital-transformation.animated #freepik--Table--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;
    animation-delay: 0s;
}

svg#freepik_stories-digital-transformation.animated #freepik--Device--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;
    animation-delay: 0s;
}

svg#freepik_stories-digital-transformation.animated #freepik--Character--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;
    animation-delay: 0s;
}

svg#freepik_stories-digital-transformation.animated #freepik--Arrows--inject-1 {
    animation: 1.5s Infinite linear floating;
    animation-delay: 1.5s;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: inherit;
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

svg#freepik_stories-select:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-select.animated #freepik--background-simple--inject-1--inject-5 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) fadeIn;
    animation-delay: 0s;
}

svg#freepik_stories-select.animated #freepik--Desk--inject-1--inject-5 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideRight;
    animation-delay: 0s;
}

svg#freepik_stories-select.animated #freepik--Plants--inject-1--inject-5 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;
    animation-delay: 0s;
}

svg#freepik_stories-select.animated #freepik--Frames--inject-1--inject-5 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;
    animation-delay: 0s;
}

svg#freepik_stories-select.animated #freepik--Device--inject-1--inject-5 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft,1.5s Infinite linear floating;
    animation-delay: 0s,1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

svg#freepik_stories-product-quality:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-product-quality.animated #freepik--Clipboard--inject-31 {
    animation: 1.5s Infinite linear floating;
    animation-delay: 0s;
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

svg#freepik_stories-business-failure:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-business-failure.animated #freepik--background-complete--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;
    animation-delay: 0s;
}

svg#freepik_stories-business-failure.animated #freepik--Floor--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;
    animation-delay: 0s;
}

svg#freepik_stories-business-failure.animated #freepik--Bars--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft,1.5s Infinite linear floating;
    animation-delay: 0s,1s;
}

svg#freepik_stories-business-failure.animated #freepik--Sheets--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;
    animation-delay: 0s;
}

svg#freepik_stories-business-failure.animated #freepik--speech-bubble--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;
    animation-delay: 0s;
}

svg#freepik_stories-business-failure.animated #freepik--Character--inject-1 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lightSpeedRight,1.5s Infinite linear wind;
    animation-delay: 0s,1s;
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lightSpeedRight {
    from {
        transform: translate3d(50%, 0, 0) skewX(-20deg);
        opacity: 0;
    }

    60% {
        transform: skewX(10deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-2deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wind {
    0% {
        transform: rotate( 0deg );
    }

    25% {
        transform: rotate( 1deg );
    }

    75% {
        transform: rotate( -1deg );
    }
}

.file-input {
    position: absolute;
    left: calc(50% - 160px);
    top: 0px;
}

    .file-input .custom-file-input {
        padding-top: 150px;
        padding-bottom: 150px;
        margin-top: -150px;
        display: block;
        position: absolute;
        color: #FFEB3B;
    }

    .file-input i {
        font-size: 80px;
        margin-left: 100px;
        position: relative;
        color: #FFEB3B;
    }

/* -- KYC Proof Upload Zones ---------------------------- */
.proof-step-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.proof-upload-inner {
    position: relative;
    border: 2px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    min-height: 220px;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease;
}

    .proof-upload-inner:hover {
        border-color: rgba(41, 98, 255, 0.6);
        background: rgba(41, 98, 255, 0.06);
    }

    .proof-upload-inner .proof-preview {
        display: block;
        width: 100%;
        height: 220px;
        object-fit: contain;
        opacity: 0.35;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .proof-upload-inner:hover .proof-preview {
        opacity: 0.2;
    }

    .proof-upload-inner .proof-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        pointer-events: none;
    }

    .proof-upload-inner .proof-file-input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }

/*Trading plans*/
.eight-card-title {
    text-align: center;
    color: #fff;
    border-bottom: 2px solid #fff;
    line-height: 60px !important;
}

.card-eight-one {
    background-color: #1B224F !important;
    border: 2px solid #719ad1 !important;
    border-radius: 12px !important;
    width: 32rem !important;
    padding: 0px 5px 10px 5px !important;
    position: relative;
}

.platform {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.card-eight-align-one {
    padding-left: 10px;
    padding-right: 10px;
}

.eight-card-title-one {
    color: #fff;
    font-size: 1.25rem;
    line-height: 40px;
}

.active-state {
    opacity: 1;
    background-color: #1945ba !important;
}

.inactive-state {
    background-color: transparent !important;
    border: 2px solid #1945ba !important;
    opacity: 0.7;
}

.eight-btn-three-align {
    margin-top: 20px;
}

.eight-btn-three {
    background-color: #1945ba !important;
    border: 2px solid #1945ba !important;
    border-radius: 30px !important;
    color: #fff !important;
    font-size: 10px !important;
}

.card-eight-align-two {
    padding-left: 10px;
    padding-right: 10px;
}

.card-eight-align-three {
    padding-left: 10px;
    padding-right: 10px;
}

.eight-card-title-two {
    color: #fff;
    font-size: 1.25rem;
    line-height: 58px;
    margin-bottom: 0px;
}

.curren-btn {
    border: 2px solid #1945ba !important;
    color: #fff !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    padding: 3px 10px 3px 10px !important;
}

.eight-card-title-three {
    color: #fff;
    font-size: 1.25rem;
    line-height: 40px;
}

.active-state2 {
    opacity: 1;
    background-color: #1945ba !important;
}

.inactive-state2 {
    background-color: transparent !important;
    border: 2px solid #1945ba !important;
    opacity: 0.7;
}

.bal-btn-one {
    color: #fff !important;
    border: 2px solid #fff !important;
    font-size: 12px !important;
    border-radius: 30px !important;
    padding: 3px 10px 3px 10px !important;
    margin-top: 15px;
}

.card-eight-two {
    background-color: #1B224F !important;
    border: 2px solid #719ad1 !important;
    border-radius: 12px !important;
    padding: 20px 5px 10px 5px !important;
    width: 32rem !important;
}

    .card-eight-two .col-lg-2 {
        padding: 0px;
    }

.hr-line {
    border-bottom: 2px solid #fff;
    padding-top: 17px;
}

.card-eight-text-one {
    color: #fff;
    margin-left: -10px;
}

.card-eight-text-two {
    color: #fff;
}

.card-eight-text-three {
    color: #fff;
    margin-left: 9px;
}

.sec-eight-table tr td {
    color: #fff;
    font-size: 13px !important;
    padding-right: 0px;
    padding-bottom: 15px;
}

.sec-eight {
    margin-top: 100px;
}

.eight-btn-one {
    background-color: #1945ba !important;
    border: 2px solid #1945ba !important;
    border-radius: 30px !important;
    color: #fff !important;
    font-size: 10px !important;
}

.eight-btn-two {
    background-color: #1945ba !important;
    border: 2px solid #1945ba !important;
    border-radius: 30px !important;
    color: #fff !important;
    font-size: 10px !important;
}

.phase-table-btn {
    background-color: #1945ba !important;
    border: 1px solid #1945ba !important;
    color: #fff !important;
    font-size: 14px !important;
    width: 95%;
}

@media (min-width: 992px) {
    .nr-pad {
        padding: 5px !important;
    }

    .m-top {
        margin-top: -56px !important;
    }
}

.icon-cop {
    display: none;
}

@media (max-width: 540px) {

    .platform {
        position: unset;
    }
    /*    leaderboaer */
    .first-prize {
        position: absolute;
        bottom: 60px !important;
        width: 50px !important;
    }

    .bg-tab-1 {
        background-color: #1B224F;
        padding: 0px 20px 0px 20px;
        border-radius: 30px;
    }

    .rupesw {
        color: #fff;
        margin-bottom: 0px;
        margin-top: 20px;
    }

    .rup-s {
        text-align: center;
    }

    .imgss {
        width: 50px;
        margin-top: 10px;
    }

    .nams {
        margin-left: 50px;
    }

    .val-num {
        margin-bottom: -23px;
    }

    .bg-tab {
        display: none;
    }

    .bg-tab-1 {
        display: block !important;
    }

    .leader-board-2 {
        padding: 8px 20px !important;
    }

    .gr-btns {
        margin-top: -32px !important;
        display: flex;
        justify-content: center;
    }

    .le-board {
        text-align: center !important;
    }

    .hold-three-card {
        display: flex;
        justify-content: center;
        margin-bottom: 15% !important;
        margin-top: 10% !important;
    }

    .leader-board {
        font-size: 13px !important;
    }

    .subscri {
        display: none !important;
    }

    .sam-crd {
        width: 9rem !important;
        background-color: #3C50D0;
        height: 12rem !important;
        border-radius: 30px 30px 7px 7px;
    }

    .sam-23 {
        width: 7rem !important;
        background-color: #354398;
        height: 9.6rem !important;
        margin-top: 37px !important;
        border-radius: 0px 20px 20px 0px;
    }

    .rank-list-name {
        text-align: center;
        margin-top: 0px !important;
    }

    .Adhi-card {
        width: 7rem !important;
        background-color: #2E3B86;
        border-radius: 20px 0px 0px 20px;
        margin-top: 37px !important;
        height: 9.6rem !important;
    }

    .human-prize {
        width: 50% !important;
    }

    .awards-1 {
        display: flex;
        justify-content: center;
        top: 10%;
        margin-top: -65px !important;
    }

    .rank-list-name-2 p {
        font-size: 17px !important;
    }

    .rank-list-name-2 h2 {
        color: #FFCC3E;
        font-size: 17px !important;
    }

    .sam-crd h4 {
        font-size: 13px !important;
    }

    .human-prize-1 {
        width: 50% !important;
    }

    .rank-list-name-3 h5 {
        font-size: 12px;
    }

    .rank-list-name-3 h3 {
        color: #07C55A;
        line-height: 15px !important;
        font-size: 15px !important;
    }

    .rank-list-name-3 p {
        font-size: 18px !important;
    }

    .rank-list-name h5 {
        font-size: 12px !important;
    }

    .rank-list-name h3 {
        color: #FF00FF;
        font-size: 14px !important;
    }

    .rank-list-name p {
        font-size: 18px !important;
    }

    .awards {
        display: flex;
        justify-content: center;
        top: 10%;
        margin-top: -25px !important;
    }
    /*    leaderboaer
*/ .icon-cop {
        display: block !important;
        padding: 10px !important;
    }

    .staus-col {
        justify-content: center !important;
    }

    .staus-div {
        padding: 10px 10px !important;
    }

    .copy-icos {
        display: block !important;
        padding: 10px !important;
    }

    .aff-table-align {
        display: block !important;
    }

    .top-change {
        margin-bottom: 10px !important;
    }

    .news-amount {
        display: none;
    }

    .sec-eight-table tr td {
        color: #fff;
        font-size: 11px !important;
        padding-right: 0px;
        padding-bottom: 15px;
    }

    .icon-move {
        margin-left: -20px !important;
    }

    #multiAcc .dropdown-menu {
        width: 100% !important;
    }

    #multiAcc .btn-secondary {
        font-size: 14px;
        font-weight: 600;
        background-color: #1f2a47 !important;
        border-radius: 3px;
        border: none;
        box-shadow: 0 0.5px 2px 1px rgb(211 250 255 / 68%);
        color: #fff !important;
        /*padding: 8px 0px !important;*/
    }

    .card-eight-two-align {
        display: block !important;
    }

    .card-eight-one {
        width: 100% !important;
    }

    .card-eight-two {
        width: 100% !important;
        margin-top: 30px;
    }

    .card-eight-text-one {
        font-size: 13px;
        color: #fff;
        position: relative;
        left: 100%;
    }

    .card-eight-text-two {
        color: #fff;
        position: relative;
        font-size: 13px;
        left: 7%;
    }

    .phase-table-btn {
        font-size: 14px !important;
        border-radius: 30px !important;
    }

    .card-eight-text-three {
        color: #fff;
        font-size: 13px;
        position: relative;
        right: -100%;
    }

    .new {
        left: 31% !important;
    }

    .new-2 {
        left: 10% !important;
    }

    .new-3 {
        right: 13% !important;
    }

    .new-4 {
        right: 0% !important;
    }
    /*
    .trading-plans-cont {
        padding: 0 !important;
    }*/
}

.inactive-state {
    background-color: transparent !important;
    border: 2px solid #1945ba !important;
    opacity: 0.7;
}

.active-state {
    opacity: 1;
    background-color: #1945ba !important;
}

.inactive-state2 {
    background-color: transparent !important;
    border: 2px solid #1945ba !important;
    opacity: 0.7;
}

.active-state2 {
    opacity: 1;
    background-color: #1945ba !important;
}

.hide-200 {
    display: none !important;
}

@media (min-width: 992px) {
    #sm-100 {
        display: none !important;
    }

    .clonen {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .mob-dnone {
        display: none;
    }
}

@media (min-width: 600px) {
    .desk-dnone {
        display: none;
    }
}


/*mutiAccountSelect*/
@media(min-width:992px) {

    #nav-select-mob {
        display: none !important;
    }

    .nav-select-mobs {
        display: none !important;
    }
}
/*/ Media Query for low resolution Tablets, Ipads /*/
@media (min-width: 541px) and (max-width: 980px) {

    #nav-select-mob {
        display: none !important;
    }

    .nav-select-mobs {
        display: none !important;
    }
}

@media(max-width:540px) {

    /*    .copy-1 {
        display: none !important;
    }*/

    .nav-select-lp {
        display: none !important;
    }

    .nav-select-mobs {
        display: block !important;
    }

    .si-heading {
        font-size: 100% !important;
    }

    .certificate p.card-text {
        color: #a3a4cc;
        margin-top: 20px;
    }

    .dashPassPos {
        right: 0px !important;
    }

    #nav-select-pc {
        display: none !important;
    }

        /*#nav-select-mob .dropdown-menu {
        width: 75% !important;*/
        /*        width: 200px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;*/
        /*}*/

        #nav-select-pc .btn-secondary, #nav-select-mob .btn-secondary {
            box-shadow: 0 -0.3px 2px 1px rgb(165 166 255) !important;
            width: 40% !important;
            margin-top: 10px !important;
            margin-bottom: 10px !important;
        }

    #multiAcc .btn-secondary {
        font-size: 14px;
        font-weight: 600;
        background-color: #35365f !important;
        border-radius: 3px;
        border: none;
        box-shadow: 0 0.5px 2px 1px rgb(211 250 255 / 68%);
        color: #fff !important;
        padding: 8px 0px !important;
    }
}

@media (min-width:1900px) {
    .dashPassPos {
        right: 0px !important;
    }
}

@media (min-width:1500px) and (max-width:1890px) {
    .dashPassPos {
        right: 0px !important;
    }
}

@media (min-width:1400px) and (max-width:1490px) {
    .dashPassPos {
        right: 5px !important;
    }
}

#multiAcc .btn-secondary {
    font-size: 14px;
    font-weight: 600;
    background-color: #1b224f !important;
    border: none;
    box-shadow: inset 0px 0px 4px 1px rgb(143 90 227 / 68%);
    color: #fff !important;
    padding: 8px 25px;
}

#multiAcc .dropdown-menu {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    animation: dropdownAnimation .1s;
    background-color: #1b2146;
}

#multiAcc .dropdown-item.selected {
    background-color: #35365f !important;
    color: #14b4e6 !important;
    font-size: 13px;
}

#multiAcc .dropdown-item {
    color: #9fa0c7 !important;
    font-weight: 600;
    font-size: 13px;
}

    #multiAcc .dropdown-item:hover, #multiAcc .dropdown-item:focus {
        color: var(--bs-dropdown-link-hover-color);
        background-color: var(--bs-dropdown-link-hover-bg);
        transition: .5s;
    }

.acc-borders {
    border-bottom: 1px solid #444564 !important;
    border-top: 1px solid #444564 !important;
}

.dd-space-up {
    margin-bottom: 5px !important;
}

.dd-space-down {
    margin-top: 5px !important;
}
/*mutiAccountSelect*/


/*ChartImageAnimation*/
#freepik_stories-metrics {
    height: 315px;
    width: 100%;
}

svg#freepik_stories-metrics:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-metrics.animated #freepik--background-simple--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lightSpeedRight;
    animation-delay: 0s;
}

svg#freepik_stories-metrics.animated #freepik--Shadow--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideDown;
    animation-delay: 0s;
}

svg#freepik_stories-metrics.animated #freepik--Floor--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;
    animation-delay: 0s;
}

svg#freepik_stories-metrics.animated #freepik--Chair--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lightSpeedRight;
    animation-delay: 0s;
}

svg#freepik_stories-metrics.animated #freepik--Furniture--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;
    animation-delay: 0s;
}

svg#freepik_stories-metrics.animated #freepik--Character--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;
    animation-delay: 0s;
}

svg#freepik_stories-metrics.animated #freepik--chart-4--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) lightSpeedLeft;
    animation-delay: 0s;
}

svg#freepik_stories-metrics.animated #freepik--chart-3--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomOut;
    animation-delay: 0s;
}

svg#freepik_stories-metrics.animated #freepik--chart-2--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) zoomIn,1.5s Infinite linear floating;
    animation-delay: 0s,1s;
}

svg#freepik_stories-metrics.animated #freepik--chart-1--inject-4 {
    animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp,1.5s Infinite linear floating;
    animation-delay: 0s,1s;
}

@keyframes lightSpeedRight {
    from {
        transform: translate3d(50%, 0, 0) skewX(-20deg);
        opacity: 0;
    }

    60% {
        transform: skewX(10deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-2deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: inherit;
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes lightSpeedLeft {
    from {
        transform: translate3d(-50%, 0, 0) skewX(20deg);
        opacity: 0;
    }

    60% {
        transform: skewX(-10deg);
        opacity: 1;
    }

    80% {
        transform: skewX(2deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
/*ChartImageAnimation*/

.chart-align {
    align-content: center;
    height: 460px;
    margin-bottom: 25px;
}

.pass-input-size {
    width: 85px;
}

.pass-input-span {
    display: flex;
    align-items: center !important;
}

@media(max-width:540px) {
    #basic-addon2.input-group-text i {
        font-size: 18px !important;
    }

    .copy-text {
        display: none !important;
    }

    .inputboxToText {
        text-align: right;
    }

    .inputPasswordPad {
        padding: 1.5rem;
    }

    .mob-acc-details {
        display: flex;
        padding-top: 2px;
        align-items: center;
        justify-content: space-between;
    }

    .mob-acc-head {
        margin-right: 15px;
    }

    .acc-details-space {
        padding-top: 15px !important;
    }

    #multiAcc .dropdown-item {
        text-align: center;
    }

    .profit-box-align {
        text-align: center;
        width: 100%;
        display: block !important;
    }

    .flex-row {
        flex-direction: row !important;
    }

    .widget-align {
        margin-top: 30px;
    }
}

.withPayments .bxs-badge-check {
    color: #14e66a !important;
    font-weight: 600;
    font-size: 27px;
    position: absolute;
    top: 0;
    right: 0;
}

#withdrawModel .bx-check-circle {
    color: yellowgreen;
}

.plan-img {
    height: 97px;
}

    .plan-img.selected {
        background: #fff;
        border-radius: 11px;
        box-shadow: 0px 0px 14px 10px rgb(255 255 255 / 10%);
    }

#customFile input[type="file"] {
    display: none;
}


.profit-box-align {
    display: flex;
    align-items: end;
}

.box-paddings {
    padding-right: 10%;
    padding-left: 10%;
}

.box-paddings-lg {
    padding-right: 5%;
    padding-left: 5%;
}








/*affiliate*/

.aff {
    color: #2962ff !important;
    background-color: #fff !important;
    padding: 5px 20px 5px 20px;
    border-radius: 7px;
    font-weight: 700;
}

.bg-footer-themes {
    border-radius: 5px;
    color: #fff !important;
    opacity: .7;
}


.link-col {
    color: #2962ff !important;
    text-decoration: underline !important;
    font-size: 12px !important;
}

.si-heading {
    font-size: 11px;
    color: #fff !important;
    opacity: .8 !important;
}

.mor-lin {
    height: 50px !important;
}

#inp .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -8px;
    /*    border-top-left-radius: 0;
    border-bottom-left-radius: 0;*/
    background-color: #2962ff !important;
    color: #fff !important;
    z-index: 1 !important;
    border-radius: 7px !important;
    padding: 0px 35px 0px 35px;
    cursor: pointer;
}

#inp .input-group > .form-control, .input-group > .form-select, .input-group > .form-floating {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 50px !important;
    pointer-events: none;
    border: 0px !important;
    background-color: #445061;
}

.bg-nxt {
    padding: 25px 0px 12px 0px !important;
}

#inp input::placeholder {
    color: #fff !important;
    text-decoration: underline !important;
}

.bgs {
    background-color: #232333 !important;
}

.copy-icos {
    display: none;
}


.ul-design {
    padding-left: 20px !important;
}

    .ul-design li {
        padding-bottom: 10px;
    }

.a-design {
    text-decoration: underline;
}

.a-design-new {
    text-decoration: underline;
    font-size: 13px;
    text-align: center;
}

.img-size-sm {
    height: 75px !important;
    margin-bottom: 5px
}

.img-size-lg {
    height: 100px !important;
}

.align-items-center.flex-column {
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.circle {
    width: 75px;
    height: 75px;
    background-color: #2a62ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.progress-container {
    width: 75px;
    height: 75px;
    position: relative;
}

.progress-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: transparent;
    border: 3px solid #f1f1f1; /* Gray border */
    position: relative;
}

.progress-fill {
    width: 75px;
    height: 75px;
    position: absolute;
    left: -3px;
    top: -3px;
    border-radius: 50%;
    background-color: transparent; /* Start with transparent background */
    border: 3px solid #14b4e6; /* Progress color */
    clip: rect(0, var(--percentage), 75px, 0); /* Clip the circle to create progress effect */
    transform: rotate(0deg); /* Start with 0 degree rotation */
    transform-origin: center;
    animation: progress-animation 2s forwards; /* Animation for progress */
    z-index: 2;
}

.progress-text {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* Text color */
    z-index: 3; /* Ensure text is on top */
    font-size: 16px;
}

@keyframes progress-animation {
    to {
        transform: rotate(calc(360deg * 0.8)); /* Fill the circle to 80% in the border (360deg * 0.8) */
    }
}

#TermModal .modal-title {
    color: #2962ff !important;
}

.staus-div {
    background-color: #171d37;
    padding: 10px 10px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    max-width: 275px;
}

.staus-col {
    display: flex;
    justify-content: end;
}

.ul-design-new {
    padding-left: 0px !important;
}

@media (max-width: 540px) {
    #accordionOne .file-input i, #accordionTwo .file-input i {
        margin-top: 60px !important;
        margin-left: 0px !important;
        position: unset !important;
    }

    #accordionOne .file-input .custom-file-input, #accordionTwo .file-input .custom-file-input {
        position: relative !important;
        left: 17% !important;
        top: 10px !important;
    }
}

/*affiliate*/


.admin-dash h2 {
    margin-top: 0.75rem;
    font-weight: 600;
}



.admin-dash .rounded {
    padding: 6px 8px;
}

.admin-dash h6 {
    margin-bottom: 0.75rem;
}

.admin-dash .summary i {
    font-size: 27px;
}

.admin-dash .summary h4 {
    margin-top: 0.75rem;
}

.admin-dash .summary .card-body {
    padding: 2rem;
}

.admin-dash h4 {
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 1.5rem;
}

.admin-dash .userDetails h4, .admin-dash .totalUsers i, .admin-dash .totalUsers h2 {
    color: #4BFFBE !important;
}

.admin-dash .totalUsers .rounded {
    background: #26394c;
}

.admin-dash .accountDetails h4, .admin-dash .totalAccounts i, .admin-dash .totalAccounts h2 {
    color: #FCFF76;
}

.admin-dash .totalAccounts .rounded {
    background: #4c4b269e;
}

.admin-dash .transactionDetails h4, .admin-dash .totalAmount i, .admin-dash .totalAmount h2 {
    color: #71dd37;
}

.admin-dash .totalAmount .rounded {
    background: #20401d;
}

.admin-dash .planDetails h4 {
    color: #14b4e6;
}

.highcharts-legend-item text {
    color: white !important;
    fill: white !important;
}

@media (max-width: 540px) {
    .mob-pt-0 {
        padding-top: 0px !important;
    }

    .mob-pb-0 {
        padding-bottom: 0px !important;
    }
}

/*leader*/
.leader-board {
    font-size: 15px;
    font-weight: 400;
    background-color: #232957 !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #888888;
    box-shadow: none !important;
    color: #fff !important;
    padding: 8px 20px;
    cursor: pointer;
}

.leader-board-1 {
    font-size: 15px;
    font-weight: 400;
    background-color: #232957 !important;
    border-radius: 9px 0px 0px 9px;
    border: 1px solid #888888;
    box-shadow: none !important;
    color: #fff !important;
    padding: 8px 18px;
    cursor: pointer;
}

.leader-board-2 {
    font-size: 15px;
    font-weight: 400;
    background-color: #232957 !important;
    /*border-radius: 0px 9px 9px 0px;*/
    border-radius: 9px;
    border: 1px solid #888888;
    box-shadow: none !important;
    color: #fff !important;
    padding: 8px 30px;
    cursor: pointer;
}

.new-leader {
    border-radius: 8px 0px 0px 8px !important;
}

.new-leader-1 {
    border-radius: 0px 8px 8px 0px !important;
}

.non-radius {
    border-radius: 0px !important;
}

.rank-head th {
    color: #FFFFFF !important;
    font-size: 19px;
    text-transform: capitalize;
    border-bottom: none;
}

    .rank-head th:nth-child(1) {
        width: 150px;
    }

.rank-head td {
    border-bottom: none;
}

.ranksection td {
    font-size: 17px;
    font-weight: 500;
}

    .ranksection td img {
        border-radius: 50% !important;
        margin-right: 6px;
        width: 30px;
        height: 30px;
    }

.ranksection th {
    font-size: 17px;
    font-weight: 500;
    line-height: 42px;
    padding-left: 33px;
}

.bg-tab {
    background-color: #1B224F;
    padding: 0px 20px 0px 20px;
    border-radius: 30px;
}


.ranksection tr {
    background-color: #232957;
}

.prof {
    color: #5FFF00;
}

.draw {
    color: #F50D1B;
}

#space-tabel {
    border-spacing: 0px 15px;
    border-collapse: separate;
}

.three-crd {
    background-color: black;
    width: 21rem;
}

.hold-three-card {
    display: flex;
    justify-content: center;
    margin-bottom: 4%;
    margin-top: 20%;
}

    .hold-three-card .card-body .card-text {
        color: #EDF8D5;
    }

.awards {
    display: flex;
    justify-content: center;
    top: 10%;
    margin-top: -68px;
}

.human-prize {
    width: 30%;
    border-radius: 50%;
}

.sec-prize {
    border: 4px solid #981CEB;
}

.third-prize {
    border: 4px solid #00D95F;
}

.rank-list-name {
    text-align: center;
}

    .rank-list-name h3 {
        color: #FF00FF;
        /* padding: 0px; */
        font-weight: 700;
    }

    .rank-list-name p {
        font-size: 26px;
        margin-top: -10px;
    }

.rank-list-name-1 {
    text-align: center;
}

    .rank-list-name-1 h3 {
        color: #07C55A;
    }

.rank-list-name-2 {
    padding-top: 4.5rem;
}

    .rank-list-name-2 h2 {
        color: #ffed4d;
        font-weight: 700;
    }

    .rank-list-name-2 p {
        font-size: 26px;
        margin-top: -10px;
    }

.rank-list-name-3 p {
    font-size: 26px;
    margin-top: -12px;
}

.sam-crd {
    width: 19rem;
    background-color: #3C50D0;
    height: 17rem;
    border-radius: 30px 30px 0px 0px;
}

/*.human-prize-1 {
    width: 42%;
}*/
.human-prize-1 {
    width: 38%;
    border-radius: 50%;
    border: 7px solid #FFED4D;
}

.awards-1 {
    display: flex;
    justify-content: center;
    top: 10%;
    margin-top: -90px;
    position: relative;
}

.first-prize {
    position: absolute;
    bottom: 100px;
}

.first-post {
    position: absolute;
    width: 90%;
    justify-content: center;
    display: flex;
    align-items: center;
    height: 90%;
}

.first-banner {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}

.copy-btn-promo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-sms {
    border-radius: 5px;
    padding: 10px 0px;
    width: 100% !important;
}

.rank-list-name-3 {
    text-align: center;
}

    .rank-list-name-3 h3 {
        color: #07C55A;
        /* line-height: 0px; */
        font-weight: 700;
    }

.sam-23 {
    width: 20rem;
    background-color: #354398;
    height: 11rem;
    margin-top: 38px;
    border-radius: 0px 20px 20px 0px;
}

.Adhi-card {
    width: 20rem;
    background-color: #2E3B86;
    border-radius: 20px 0px 0px 20px;
    height: 12rem;
    margin-top: 23px;
}

.bg-tab-1 {
    display: none;
}

.lineheight-sm {
    line-height: 1.4;
}



.remove-button {
    cursor: pointer !important;
}

.email-list {
    display: flex;
    flex-wrap: wrap;
}

.email-item {
    margin: 5px;
    padding: 5px;
    background-color: #1b224f;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

    .email-item span {
        margin-right: 5px;
    }

.remove-button {
    cursor: pointer;
}


/*inbox*/
.inboxshow {
    height: 600px;
    padding: 20px;
}

.in-title {
    font-size: 20px !important;
}

.in-main-title {
    height: 600px;
}

.in-main-post {
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list li {
    list-style-type: none !important;
}

.notification-container::-webkit-scrollbar {
    display: none !important;
    -ms-overflow-style: none !important; /* IE and Edge */
    scrollbar-width: none !important;
}



/* White → accent sweep, matching the dashboard's .dash-login-num heading.
   Was white → magenta, the one off-ramp hue left on these pages. */
.gradient-text {
    background: linear-gradient(to right, #fff, var(--dash-accent-tint));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}


.carousel-container {
    margin-bottom: 2.5rem;
}

.myChallenges .plus {
    font-size: 3rem;
}

.myChallenges .getFunded {
    width: 90%;
    margin: auto;
    background: #0d1420 !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px dashed rgba(var(--dash-accent-rgb), 0.35) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
    overflow: hidden !important;
}

    .myChallenges .getFunded:hover {
        transform: translateY(-4px) !important;
        border-color: rgba(var(--dash-accent-rgb), 0.65) !important;
        box-shadow: 0 16px 40px rgba(var(--dash-accent-rgb), 0.18) !important;
    }

.myChallenges .carousel-inner {
    position: unset;
}

.myChallenges .carousel-indicators {
    display: -webkit-inline-box;
    margin: 0;
    bottom: -1.5rem;
}

    .myChallenges .carousel-indicators li {
        background-color: rgba(var(--dash-accent-rgb), 0.45);
        border: 1px solid #1B224F;
        border-radius: 50%;
        width: 10px;
        height: 10px !important;
        margin: 0 3px;
    }

    .myChallenges .carousel-indicators .active {
        background-color: var(--dash-accent);
        width: 75px !important;
        border-radius: 37.5px; /* Half of the width */
    }



@media (min-width: 768px) {

    .carousel-container {
        margin-bottom: 1.5rem;
    }

    .myChallenges .carousel-indicators {
        display: none;
    }

    .myChallenges .carousel-inner {
        display: flex;
    }

    .myChallenges .carousel-item.active {
        width: 35% !important;
        margin-right: 2% !important;
    }

    .myChallenges .carousel-item {
        width: 35%;
        display: block;
        margin-right: 2% !important;
    }

    #myCarousel .carousel-item.active {
        width: 71% !important;
        margin-right: 2% !important;
    }
}

/* Slides 2 and 3 previously tinted their whole card violet and teal. On a
   blue-on-black theme that read as three unrelated colours in one carousel,
   so they now share the same flat panel and differ only in the direction of
   the accent edge's blue→cyan sweep. */
.myChallenges .carousel-item:nth-child(2) .card {
    background: #080c15 !important;
    border-color: var(--dash-border) !important;
}

    .myChallenges .carousel-item:nth-child(2) .card::before {
        background: linear-gradient(90deg, var(--dash-accent-2) 0%, var(--dash-accent) 50%, var(--dash-accent-2) 100%);
        background-size: 200% 100%;
    }

.myChallenges .carousel-item:nth-child(3) .card {
    background: #080c15 !important;
    border-color: var(--dash-border) !important;
}

    .myChallenges .carousel-item:nth-child(3) .card::before {
        background: linear-gradient(90deg, var(--dash-accent-soft) 0%, var(--dash-accent-2) 50%, var(--dash-accent-soft) 100%);
        background-size: 200% 100%;
    }

/* === MyChallenges Mobile UX === */
@keyframes challenges-fadeout-hint {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@media (max-width: 767px) {

    .myChallenges .carousel {
        overflow: visible;
        padding-bottom: 0.5rem;
    }

        /* Right-edge fade gradient � hints that more cards exist to the right */
        .myChallenges .carousel::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 1.8rem;
            width: 2.5rem;
            background: linear-gradient(to right, transparent, rgba(10, 20, 58, 0.82));
            pointer-events: none;
            z-index: 3;
            transition: opacity 0.35s ease;
        }

        .myChallenges .carousel.is-last-slide::after,
        .myChallenges .carousel.is-single-slide::after {
            opacity: 0;
        }

    /* Floating prev / next round buttons */
    .myChallenges .challenges-nav {
        position: absolute !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-70%) !important;
        width: 2rem !important;
        height: 2rem !important;
        border-radius: 50% !important;
        background-color: rgba(var(--dash-accent-rgb), 0.9) !important;
        opacity: 1 !important;
        z-index: 5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
        padding: 0 !important;
        border: none !important;
    }

    .myChallenges .carousel-control-prev.challenges-nav {
        left: -0.6rem !important;
    }

    .myChallenges .carousel-control-next.challenges-nav {
        right: -0.6rem !important;
    }

    .myChallenges .challenges-nav .carousel-control-prev-icon,
    .myChallenges .challenges-nav .carousel-control-next-icon {
        width: 0.85rem;
        height: 0.85rem;
    }

    /* Slide counter "1 / 3" */
    .myChallenges .challenges-slide-count {
        font-size: 0.75rem;
        color: var(--dash-accent-tint);
        text-align: center;
        margin-top: 0.2rem;
    }

    /* "Swipe for more" label � auto-fades after a few seconds */
    .myChallenges .challenges-swipe-hint {
        font-size: 0.7rem;
        color: var(--dash-text-muted);
        text-align: center;
        margin-top: 0.1rem;
        animation: challenges-fadeout-hint 0.8s ease-out 3.5s forwards;
    }
}

/* === MyChallenges � Glassmorphism === */

/* Flat near-black panel matching the dashboard / Trading Overview cards —
   was a translucent navy glass, which read bluer and lighter than the rest. */
.myChallenges .carousel-item .card {
    background: #080c15 !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--dash-accent-rgb), 0.10) !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

    /* Top accent edge. The magenta mid-stop is dropped so the shimmer stays
       inside the blue→cyan ramp like every other accent on the theme. */
    .myChallenges .carousel-item .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 18px 18px 0 0;
        background: linear-gradient(90deg, var(--dash-accent) 0%, var(--dash-accent-2) 50%, var(--dash-accent) 100%);
        background-size: 200% 100%;
        animation: mc-accent-shimmer 4s linear infinite;
    }

@keyframes mc-accent-shimmer {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.myChallenges .carousel-item:hover .card {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 48px rgba(var(--dash-accent-rgb), 0.22), 0 0 0 1px rgba(var(--dash-accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(var(--dash-accent-rgb), 0.22) !important;
}

.mc-page-subtitle {
    font-size: 0.83rem;
    color: var(--dash-text-muted);
    margin: 0;
}

.mc-phase-pill {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dash-accent-tint);
    background: rgba(var(--dash-accent-rgb), 0.14);
    border: 1px solid rgba(var(--dash-accent-rgb), 0.22);
    border-radius: 20px;
    padding: 2px 10px;
}

.mc-status-badge {
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em;
    border-radius: 6px !important;
    padding: 4px 8px !important;
}

.mc-plan-name {
    font-size: 0.75rem;
    color: var(--dash-text-muted);
    margin-bottom: 0;
}

.mc-divider {
    border-color: var(--dash-border);
    margin: 0.55rem 0;
}

.mc-stat-label {
    font-size: 0.78rem;
    color: var(--dash-text-muted);
}

    .mc-stat-label i {
        vertical-align: middle;
        margin-right: 3px;
        font-size: 0.95rem;
    }

.mc-stat-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dash-text-bright);
}

.mc-getfunded-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}



.lossDetails h6 {
    color: #cbcbe2;
}

.color-green {
    color: #71dd37;
}

.color-red {
    color: #f23645;
}

.certificate .progress-bar {
    background-color: #2962ff;
}

.certificate .color-blue {
    color: #2962ff;
    font-weight: 700;
}

.payment-page .form-check {
    padding: 0px;
}

    .payment-page .form-check .form-check-input {
        margin-left: 0px;
        margin-right: 0.5em;
    }

.payment-page .payment-option {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 15px;
}

.payment-option:hover {
    border-color: #007bff; /* Change border color on hover */
}

.payment-page .payment-option.selected {
    border-color: #007bff;
}

.payment-page .card-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.payment-page .text-right {
    text-align: right;
}

.payment-page .total-amount {
    font-size: 2rem;
    font-weight: 600;
    border-bottom: 2px solid #fff; /* Solid line below total amount */
    padding-bottom: 5px; /* Add some padding to visually separate the line */
}

.payment-page .btn-no-radius {
    border-radius: 0;
}

.payment-page .confirm-button {
    margin-top: 20px;
}

.payment-page .card-title {
    font-size: 1.5rem; /* Larger font size */
    font-weight: bold; /* Bold font weight */
}


.btn-edit-coupon {
    position: absolute;
    top: -15px;
    right: -15px;
    border: none;
    color: #28b518;
    border-radius: 50%;
    padding: .5rem 0.6rem 0.5rem 0.6rem;
}

    .btn-edit-coupon:hover {
        background-color: #f0f0f0; /* Button background color on hover */
    }

.float-right {
    float: right;
}

.close {
    margin-left: 5px;
    cursor: pointer;
}

.couponError {
    color: #dc3545; /* Red color */
    font-size: 14px;
    margin-top: 5px;
}

    .couponError i {
        margin-right: 5px;
    }

#couponCode, #couponBtn {
    padding: 5px 8px;
}

#couponBtn {
    border-radius: 0px 4px 4px 0px !important;
    background: #143594;
    border: 1px solid #444564;
}

    #couponBtn.btn-success {
        background-color: #71dd37 !important;
    }

.form-check-label i {
    color: #fff;
    font-size: 16px;
}

.notification-card {
    border-left: 5px solid #f1f9ff;
    background-color: #001177;
    padding: 20px;
    border-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

.notification-icon {
    font-size: 2rem;
    color: #f1f9ff;
    margin-right: 15px;
}

/* ---- Coupon Code Input Style ---- */
.coupon-label {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.coupon-wrapper {
    display: flex;
    width: 100%;
    background: #1b1f29;
    border: 1px solid #2a3140;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.3s;
}

    .coupon-wrapper:focus-within {
        border-color: #5a6bff;
        box-shadow: 0 0 8px rgba(90, 107, 255, 0.4);
    }

.coupon-input {
    flex: 1;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #ffffff;
    outline: none;
    font-size: 15px;
}

    .coupon-input::placeholder {
        color: #9aa3b8;
    }

.coupon-btn {
    background: #5a6bff;
    border: none;
    padding: 0 20px;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

    .coupon-btn:hover {
        background: #4d5aff;
    }

.couponError {
    color: #ff6b6b;
    font-size: 14px;
    margin-top: 6px;
}

    .couponError i {
        vertical-align: middle;
        margin-right: 4px;
    }
/* ---- Refund Information Table Style ---- */
.refund-row td {
    padding: 14px 12px;
    vertical-align: middle;
}

.refund-label {
    font-weight: 600;
    color: #ffffff;
    font-size: 15px;
}

.refund-value {
    color: #ffffff;
}

.refund-box {
    background: #1b1f29;
    border: 1px solid #2a3140;
    padding: 10px 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.refund-text {
    opacity: 0.8;
}

.refund-amount {
    font-weight: 700;
    font-size: 16px;
    color: #5a6bff;
}

/* ---- Base Reusable Card Style ---- */
.pay-card {
    display: block;
    cursor: pointer;
    border-radius: 12px;
    border: 1px solid #2d3546;
    background: #1b1f29;
    transition: 0.25s;
    padding: 12px;
}

    .pay-card:hover {
        border-color: #5a6bff;
    }

    .pay-card input[type="radio"] {
        display: none;
    }

        .pay-card input[type="radio"]:checked + .pay-content {
            background: linear-gradient(145deg, #2b3450, #1b2233);
            border-color: #5a6bff;
            box-shadow: 0 0 6px rgba(90, 107, 255, 0.4);
        }

/* ---- Content inside card ---- */
.pay-content {
    display: flex;
    align-items: center;
    font-size: 15px;
    padding: 10px;
    border-radius: 10px;
    color: #ffffff;
    border: 1px solid transparent;
    transition: 0.25s;
}

    .pay-content i {
        font-size: 16px;
        color: #5a6bff;
    }

/* ---- Disabled Card ---- */
.disabled-card {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.disabled-content {
    color: #b7b7b7 !important;
}

/* ---- "Soon" Badge ---- */
.soon-badge {
    color: #00d4b5;
    margin-left: 6px;
    font-weight: 600;
    font-size: 14px;
}

/* ---- Section Title ---- */
.payment-title {
    color: #ffffff;
    font-weight: 600;
}

.coupon-wrapper {
    display: flex;
}

.coupon-input {
    flex: 1;
}

.coupon-btn {
    min-width: 80px;
}

.coupon-summary {
    color: #fff;
    background-color: #1b1f29 !important
}

    .coupon-summary p {
        font-size: 0.85rem;
        margin-bottom: 0.3rem !important;
    }

.remaining-payment-txt b, .totAmount, #discount {
    font-weight: 600;
}

.couponError {
    font-size: 0.875rem;
}

/* Initial hidden state */
.fade-in-badge {
    opacity: 0;
    transform: translateY(10px);
}

    /* Fade-in animation */
    .fade-in-badge.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

/* Pulse glow effect */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 rgba(25, 135, 84, 0.0);
    }

    50% {
        box-shadow: 0 0 12px rgba(25, 135, 84, 0.35);
    }

    100% {
        box-shadow: 0 0 0 rgba(25, 135, 84, 0.0);
    }
}

.pulse-glow {
    animation: pulseGlow 1.2s ease-in-out 2;
}


/* Initial hidden state */
.fade-in-badge {
    opacity: 0;
    transform: translateY(10px);
}

    .fade-in-badge.show {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

/* Subtle pulse glow for expired */
@keyframes pulseGlowExpired {
    0% {
        box-shadow: 0 0 0 rgba(220, 53, 69, 0.0);
    }

    50% {
        box-shadow: 0 0 12px rgba(220, 53, 69, 0.35);
    }

    100% {
        box-shadow: 0 0 0 rgba(220, 53, 69, 0.0);
    }
}

.pulse-glow-expired {
    animation: pulseGlowExpired 1.2s ease-in-out 2;
}

.payment-option {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #dee2e6; /* default border */
}

    .payment-option:hover {
        box-shadow: 0 4px 12px rgba(13,110,253,0.3);
    }

    .payment-option.selected {
        border-color: #0d6efd !important; /* bootstrap primary color */
        box-shadow: 0 6px 20px rgba(13,110,253,0.3);
        background-color: transparent;
    }

.calendar-icon {
    padding: 10px;
    border: 1px solid;
    border-radius: 50%;
    background: #2822a5;
    color: #bffaa1;
}

.toggle-symbols.completed {
    color: #444564 !important;
    cursor: default;
}

.toggle-symbols.live {
    color: #c3f0b3 !important;
}

tr td:last-child {
    padding-right: 20px;
}

/* -- Invite Page Glassmorphism -- */
.invite-glass-card {
    background: #080c15;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--dash-border);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.25s, transform 0.25s;
}

.invite-gradient-text {
    background: linear-gradient(135deg, var(--dash-accent-2), var(--dash-accent-soft), var(--dash-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.invite-header-section h2 {
    font-weight: 700;
    font-size: 1.85rem;
    margin-bottom: 0;
}

.invite-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--dash-accent-rgb), 0.15);
    border: 1px solid rgba(var(--dash-accent-rgb), 0.35);
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #a5c0ff;
    letter-spacing: 0.4px;
}

    .invite-status-pill .invite-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dash-accent-2);
        box-shadow: 0 0 8px var(--dash-accent-2);
        animation: invitePulseDot 2s infinite;
    }

@keyframes invitePulseDot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(1.35);
    }
}

.invite-referral-card {
    padding: 1.75rem 2rem;
    position: relative;
    overflow: hidden;
}

    .invite-referral-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(var(--dash-accent-rgb), 0.07), rgba(20, 180, 230, 0.03));
        border-radius: 20px;
        pointer-events: none;
    }

.invite-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--dash-text-dim);
}

.invite-input-wrap {
    display: flex;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    overflow: hidden;
}

    .invite-input-wrap input {
        background: transparent !important;
        border: none !important;
        color: var(--dash-text-soft) !important;
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
        flex: 1;
        outline: none;
        box-shadow: none !important;
    }

.invite-copy-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--dash-accent), var(--dash-accent-2));
    color: #fff;
    border: none;
    padding: 0.8rem 1.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
    flex-shrink: 0;
}

    .invite-copy-btn:hover {
        background: linear-gradient(135deg, #1a4fd6, #0d9ac9);
        box-shadow: 0 0 20px rgba(var(--dash-accent-rgb), 0.4);
    }

    .invite-copy-btn.copied {
        background: linear-gradient(135deg, #10b981, #34d399) !important;
    }

.invite-metric-card {
    padding: 1.4rem 1.2rem;
    text-align: center;
    height: 100%;
}

    .invite-metric-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
    }

.invite-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.2rem;
}

.iicon-blue {
    background: rgba(var(--dash-accent-rgb), 0.18);
    color: var(--dash-accent-soft);
}

.iicon-teal {
    background: rgba(20, 180, 230, 0.18);
    color: var(--dash-accent-2);
}

.iicon-purple {
    background: rgba(139, 92, 246, 0.18);
    color: #b08aff;
}

.iicon-green {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

.iicon-orange {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

.iicon-pink {
    background: rgba(236, 72, 153, 0.18);
    color: #f472b6;
}

.invite-metric-value {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.invite-metric-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dash-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.invite-tier-card {
    padding: 1.6rem 1.5rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    .invite-tier-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    }

    .invite-tier-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 20px 20px 0 0;
    }

.itier-blue::after {
    background: linear-gradient(90deg, var(--dash-accent), var(--dash-accent-2));
}

.itier-gold::after {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.itier-teal::after {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.itier-purple::after {
    background: linear-gradient(90deg, #8b5cf6, #c084fc);
}

.invite-tier-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: 50px;
    margin-bottom: 0.7rem;
}

.ibadge-blue {
    background: rgba(var(--dash-accent-rgb), 0.18);
    color: #7aa3ff;
    border: 1px solid rgba(var(--dash-accent-rgb), 0.28);
}

.ibadge-gold {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.28);
}

.ibadge-teal {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.ibadge-purple {
    background: rgba(139, 92, 246, 0.18);
    color: #c084fc;
    border: 1px solid rgba(139, 92, 246, 0.28);
}

.invite-tier-card h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #dde8ff;
    margin-bottom: 0.45rem;
}

.invite-tier-card p {
    font-size: 0.82rem;
    color: #7a8daf;
    line-height: 1.55;
    margin-bottom: 1rem;
}

.invite-tier-link {
    font-size: 0.8rem;
    color: var(--dash-accent-soft);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

    .invite-tier-link:hover {
        color: var(--dash-accent-2);
    }

.invite-card-heading {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--dash-text-soft);
}

.invite-table-card {
    padding: 1.5rem;
}

.invite-payout-card {
    padding: 1.6rem 1.5rem;
}

.invite-payout-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.28);
    color: #34d399;
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
}

.invite-ring-container {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.invite-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--dash-text-soft);
    text-align: center;
    line-height: 1.2;
}

.invite-ref-count-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid rgba(var(--dash-accent-rgb), 0.35);
    background: rgba(var(--dash-accent-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dash-accent-soft);
    box-shadow: 0 0 18px rgba(var(--dash-accent-rgb), 0.2);
}

.invite-withdraw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--dash-accent), var(--dash-accent-2));
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 0.65rem 1.8rem;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.25s;
    text-decoration: none;
    cursor: pointer;
}

    .invite-withdraw-btn:hover {
        box-shadow: 0 8px 25px rgba(var(--dash-accent-rgb), 0.45);
        transform: translateY(-2px);
    }

.invite-glass-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    margin: 1.2rem 0;
}

.invite-terms-card {
    padding: 1.5rem;
}

.invite-terms-list {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

    .invite-terms-list li {
        padding: 0.55rem 0;
        border-bottom: 1px solid var(--dash-border);
        color: var(--dash-text-muted);
        font-size: 0.83rem;
        line-height: 1.6;
    }

        .invite-terms-list li:last-child {
            border-bottom: none;
        }

.invite-empty-card {
    max-width: 520px;
    margin: 80px auto;
    padding: 2.5rem 2rem;
    text-align: center;
}

.invite-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: rgba(var(--dash-accent-rgb), 0.15);
    border: 1px solid rgba(var(--dash-accent-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    font-size: 2rem;
    color: var(--dash-accent-soft);
}

.invite-update-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--dash-accent), var(--dash-accent-2));
    color: #fff !important;
    text-decoration: none;
    border-radius: 10px;
    padding: 0.65rem 1.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.25s;
}

    .invite-update-btn:hover {
        box-shadow: 0 8px 25px rgba(var(--dash-accent-rgb), 0.45);
        transform: translateY(-2px);
    }

#TermModal .modal-content {
    background: rgba(12, 17, 42, 0.94) !important;
    backdrop-filter: blur(24px);
    border: 1px solid var(--dash-border) !important;
    border-radius: 20px !important;
}

#TermModal .modal-header {
    border-bottom: 1px solid var(--dash-border) !important;
}

@media (max-width: 540px) {
    .invite-referral-card {
        padding: 1.25rem;
    }

    .invite-copy-btn {
        padding: 0.8rem 1rem;
        font-size: 0.8rem;
    }

    .invite-metric-value {
        font-size: 1.4rem;
    }
}
/* ═══════════════════════════════════════════════════
   Invite Share Panel  (isp-*)
   Referral Link bar + Coupon Ticket — unified block
═══════════════════════════════════════════════════ */

.isp-panel {
    display: flex;
    flex-direction: column;
}

/* ── Referral Link Card ── */
.isp-link-card {
    padding: 1.35rem 1.75rem;
    background: linear-gradient(135deg, rgba(var(--dash-accent-rgb),.09) 0%, rgba(20,180,230,.05) 100%);
    border: 1px solid rgba(var(--dash-accent-rgb),.25);
    border-bottom-color: rgba(var(--dash-accent-rgb),.1);
    border-radius: 20px 20px 0 0;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.isp-link-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--dash-accent), var(--dash-accent-2), var(--dash-accent-soft), var(--dash-accent-2), var(--dash-accent));
    background-size: 300% auto;
    animation: ispSlide 5s linear infinite;
}

.isp-link-inner {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
}

.isp-lmeta {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-shrink: 0;
}

.isp-icon-orb {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.isp-orb-blue {
    background: rgba(var(--dash-accent-rgb),.18);
    border: 1px solid rgba(var(--dash-accent-rgb),.3);
    color: var(--dash-accent-soft);
}

.isp-url-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(var(--dash-accent-rgb),.13);
    border-radius: 11px;
    overflow: hidden;
}

.isp-url-pfx {
    padding: 0 .8rem;
    color: #3a5090;
    font-size: 1rem;
    flex-shrink: 0;
}

.isp-url-bar input {
    background: transparent !important;
    border: none !important;
    color: #6f8ab7 !important;
    padding: .72rem .4rem .72rem 0;
    font-size: .84rem;
    flex: 1;
    min-width: 0;
    outline: none;
    box-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Coupon Code Ticket ── */
.isp-ticket {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, rgba(var(--dash-accent-rgb),.11) 0%, rgba(139,92,246,.07) 100%);
    border: 1px solid rgba(var(--dash-accent-rgb),.3);
    border-top: none;
    border-radius: 0 0 20px 20px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 36px rgba(0,0,0,.32);
}

.isp-ticket::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--dash-accent), var(--dash-accent-2), var(--dash-accent-soft), var(--dash-accent-2), var(--dash-accent));
    background-size: 300% auto;
    animation: ispSlide 5s linear infinite;
}

.isp-ticket-left {
    flex: 1;
    min-width: 0;
    padding: 1.55rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .28rem;
}

.isp-code-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.isp-code-inp {
    background: transparent !important;
    border: none !important;
    color: #c4b5fd !important;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    padding: .2rem 0 !important;
    outline: none;
    box-shadow: none !important;
    width: 100%;
    cursor: default;
    caret-color: transparent;
    position: relative;
    z-index: 1;
}

.isp-code-glow {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .18em;
    color: transparent;
    text-shadow: 0 0 28px rgba(196,181,253,.55), 0 0 60px rgba(139,92,246,.25);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
}

.isp-ticket-sep {
    flex-shrink: 0;
    width: 1px;
    margin: .8rem 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 6px,
        rgba(139,92,246,.3) 6px, rgba(139,92,246,.3) 10px
    );
}

.isp-ticket-right {
    padding: 1.55rem 1.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    flex-shrink: 0;
}

.isp-rate-badge {
    text-align: center;
    background: rgba(var(--dash-accent-rgb),.13);
    border: 1px solid rgba(var(--dash-accent-rgb),.25);
    border-radius: 16px;
    padding: .55rem 1.3rem;
    min-width: 92px;
}

.isp-rate-badge--custom {
    background: rgba(139,92,246,.16);
    border-color: rgba(139,92,246,.38);
}

.isp-rate-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #a78bfa, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.isp-rate-lbl {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: var(--dash-accent-soft);
    margin-top: .22rem;
}

/* ── Shared: labels, hints ── */
.isp-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--dash-text-dim);
    margin-bottom: 0;
}

.isp-hint {
    font-size: .73rem;
    color: #3d4f6e;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Buyer-discount callout under the coupon code */
.isp-save-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: .5rem;
    margin-bottom: 0;
    padding: .3rem .6rem;
    border: 1px solid rgba(139,92,246,.38);
    border-radius: 8px;
    background: rgba(139,92,246,.12);
    font-size: .73rem;
    line-height: 1.3;
    color: #c4b5fd;
}

.isp-save-note strong {
    font-weight: 700;
    color: #ddd6fe;
}

.isp-save-note i {
    font-size: .95rem;
    color: #a78bfa;
}

/* ── Coupon-code editor (affiliate renames their own code) ── */
.isp-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    padding: 0;
    border: none;
    background: none;
    color: #a78bfa;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .18s;
}

    .isp-edit-link:hover {
        color: #ddd6fe;
    }

    .isp-edit-link i {
        font-size: .85rem;
    }

.isp-code-editor {
    align-self: flex-start;
    max-width: 100%;
    margin-top: .55rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(139,92,246,.3);
    border-radius: 12px;
    background: rgba(99,102,241,.08);
}

.isp-code-edit-lbl {
    display: block;
    margin-bottom: .4rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5a6d96;
}

.isp-code-edit-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.isp-code-edit-field {
    display: flex;
    align-items: center;
    background: rgba(10,14,26,.6);
    border: 1px solid rgba(99,102,241,.35);
    border-radius: 10px;
    padding: 0 .6rem;
}

    .isp-code-edit-field input {
        width: 190px;
        max-width: 100%;
        background: transparent !important;
        border: none !important;
        outline: none;
        box-shadow: none !important;
        color: #ddd6fe !important;
        font-family: 'Courier New', Courier, monospace;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: .45rem .1rem;
    }

.isp-btn-sm {
    padding: .45rem 1rem;
    font-size: .78rem;
    border-radius: 10px;
}

.isp-btn-ghost {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: transparent;
    color: #7a8daf;
    font-size: .78rem;
    font-weight: 600;
    padding: .45rem 1rem;
    cursor: pointer;
    transition: all .2s;
}

    .isp-btn-ghost:hover {
        color: #c8d6f0;
        border-color: rgba(255,255,255,.28);
    }

.isp-code-msg {
    margin: .5rem 0 0;
    font-size: .74rem;
    line-height: 1.35;
    color: #34d399;
}

    .isp-code-msg.is-error {
        color: #f87171;
    }

/* ── Shared: action buttons ── */
.isp-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 11px;
    padding: .66rem 1.45rem;
    font-size: .83rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all .22s;
}

.isp-btn-blue {
    background: linear-gradient(135deg, var(--dash-accent), var(--dash-accent-2));
}

    .isp-btn-blue:hover {
        box-shadow: 0 6px 24px rgba(var(--dash-accent-rgb),.45);
        transform: translateY(-2px);
    }

.isp-btn-purple {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

    .isp-btn-purple:hover {
        box-shadow: 0 6px 24px rgba(var(--dash-accent-rgb),.48);
        transform: translateY(-2px);
    }

/* ── Slide animation ── */
@keyframes ispSlide {
    from { background-position:  300% center; }
    to   { background-position: -300% center; }
}

/* ── Mobile breakpoint ── */
@media (max-width: 700px) {
    .isp-link-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .isp-ticket {
        flex-direction: column;
    }

    .isp-ticket-sep {
        width: auto;
        height: 1px;
        margin: 0 1.2rem;
        background: repeating-linear-gradient(
            to right,
            transparent 0px, transparent 6px,
            rgba(139,92,246,.28) 6px, rgba(139,92,246,.28) 10px
        );
    }

    .isp-ticket-right {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: .85rem;
    }

    .isp-code-inp,
    .isp-code-glow {
        font-size: 1.25rem !important;
        letter-spacing: .12em !important;
    }

    .isp-rate-num { font-size: 1.4rem; }
}

/* ═══════════════════════════════════════════════════
   /Invite Share Panel
═══════════════════════════════════════════════════ */

/* -- /Invite Page Glassmorphism -- */

/* ========================================
   Glassmorphism Sidebar & Navbar
   ======================================== */

/* --- Glassmorphism Sidebar --- */
#layout-menu.glass-sidebar {
    background: rgba(7, 11, 36, 0.62) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-right: 1px solid rgba(120, 100, 255, 0.18);
    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.40), inset -1px 0 0 rgba(120, 100, 255, 0.08);
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#layout-menu.glass-sidebar .menu-inner {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#layout-menu.glass-sidebar .menu-inner::-webkit-scrollbar {
    width: 4px;
}

#layout-menu.glass-sidebar .menu-inner::-webkit-scrollbar-track {
    background: transparent;
}

#layout-menu.glass-sidebar .menu-inner::-webkit-scrollbar-thumb {
    background: rgba(120, 100, 255, 0.35);
    border-radius: 4px;
}

.sidebar-csd {
    flex-shrink: 0;
    margin: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22) 0%, rgba(139, 92, 246, 0.15) 100%);
    border: 1px solid rgba(120, 100, 255, 0.25);
    text-align: center;
}

.sidebar-csd-title {
    color: rgba(190, 200, 255, 0.85);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.sidebar-csd-title span {
    color: #c7d2fe;
    font-weight: 600;
}

.sidebar-csd img {
    width: 80px;
    margin-bottom: 0.5rem;
}

.sidebar-csd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #3b82f6 100%);
    color: #fff !important;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.45);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    letter-spacing: 0.01em;
}

.sidebar-csd-btn:hover {
    box-shadow: 0 6px 26px rgba(99, 102, 241, 0.62);
    transform: translateY(-1px);
    color: #fff !important;
}

.glass-sidebar .menu-inner > .menu-item > .menu-link {
    border-radius: 10px;
    margin: 1px 10px;
    padding: 0.55rem 1rem;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    color: rgba(190, 200, 255, 0.75) !important;
}

    .glass-sidebar .menu-inner > .menu-item > .menu-link:hover {
        background: rgba(99, 102, 241, 0.18) !important;
        box-shadow: 0 2px 16px rgba(99, 102, 241, 0.12);
        color: #c7d2fe !important;
    }

.glass-sidebar .menu-inner > .menu-item.active > .menu-link {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.32) 0%, rgba(139, 92, 246, 0.22) 100%) !important;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.22), inset 0 0 0 1px rgba(165, 180, 252, 0.15);
    color: #fff !important;
}

.glass-sidebar .menu-inner > .menu-item > .menu-link .menu-icon {
    color: rgba(165, 180, 252, 0.65);
    transition: color 0.2s ease;
}

.glass-sidebar .menu-inner > .menu-item > .menu-link:hover .menu-icon,
.glass-sidebar .menu-inner > .menu-item.active > .menu-link .menu-icon {
    color: #fff;
}

.glass-sidebar .menu-inner-shadow {
    background: linear-gradient(to bottom, rgba(7, 11, 36, 0.60) 0%, transparent 100%);
}

/* --- Glassmorphism Navbar --- */
#layout-navbar.glass-navbar {
    background: linear-gradient(90deg, rgba(8, 12, 40, 0.82) 0%, rgba(10, 16, 52, 0.78) 100%) !important;
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(99, 102, 241, 0.18), 0 8px 32px rgba(0, 0, 0, 0.45);
    position: relative;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

/* Subtle gradient accent line at the bottom */
#layout-navbar.glass-navbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.45) 25%, rgba(139, 92, 246, 0.45) 50%, rgba(99, 102, 241, 0.45) 75%, transparent 100%);
}

/* ── Pill search bar ─────────────────────────────────────── */
.glass-navbar .glass-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(165, 180, 252, 0.16);
    border-radius: 50px;
    padding: 0.48rem 1.1rem;
    min-width: 230px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.glass-navbar .glass-search-wrap:focus-within {
    border-color: rgba(99, 102, 241, 0.52);
    background: rgba(99, 102, 241, 0.07);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 0 16px rgba(99, 102, 241, 0.12);
}

.glass-navbar .glass-search-ico {
    color: rgba(165, 180, 252, 0.55);
    font-size: 1.05rem;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.2s;
}

.glass-navbar .glass-search-wrap:focus-within .glass-search-ico {
    color: rgba(165, 180, 252, 0.85);
}

.glass-navbar .glass-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #c7d2fe;
    font-size: 0.875rem;
    width: 100%;
    padding: 0;
    letter-spacing: 0.01em;
}

.glass-navbar .glass-search-input::placeholder {
    color: rgba(165, 180, 252, 0.38);
}

.glass-navbar .dropdown-menu {
    background: rgba(10, 14, 48, 0.90) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(120, 100, 255, 0.22) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50) !important;
    border-radius: 14px !important;
}

.glass-navbar .dropdown-item {
    color: rgba(190, 200, 255, 0.82) !important;
    border-radius: 8px;
    margin: 2px 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

    .glass-navbar .dropdown-item:hover,
    .glass-navbar .dropdown-item:focus {
        background: rgba(99, 102, 241, 0.18) !important;
        color: #c7d2fe !important;
    }

.glass-navbar .dropdown-divider {
    border-color: rgba(165, 180, 252, 0.12) !important;
    margin: 4px 0;
}

/* Notification bell button */
.glass-navbar .glass-bell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.22);
    text-decoration: none;
    position: relative;
    transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

    .glass-navbar .glass-bell-btn:hover {
        background: rgba(99, 102, 241, 0.22);
        border-color: rgba(99, 102, 241, 0.45);
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    .glass-navbar .glass-bell-btn i {
        font-size: 1.3rem;
        color: #c4b5fd;
    }

.glass-navbar .glass-notify-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid rgba(8, 12, 40, 0.9);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
    line-height: 1;
    letter-spacing: -0.01em;
}

/* Menu toggle glass */
.glass-navbar .layout-menu-toggle .nav-link {
    color: rgba(165, 180, 252, 0.80) !important;
    transition: color 0.2s;
}

    .glass-navbar .layout-menu-toggle .nav-link:hover {
        color: #a5b4fc !important;
    }

/* Avatar online indicator border */
.glass-navbar .avatar-online:before {
    border-color: rgba(10, 14, 48, 0.95) !important;
}

/* User name & fw-semibold in navbar dropdown */
.glass-navbar .fw-semibold {
    color: #e0e7ff !important;
}

/* ========================================
   End Glassmorphism
   ======================================== */

/* -- KYC Glassmorphism --------------------------------------------------- */
.kyc-glass-card {
    background: rgba(14, 22, 60, 0.40) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    border-radius: 16px !important;
}

    .kyc-glass-card .card-header {
        background: rgba(255, 255, 255, 0.03) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .kyc-glass-card .card-body {
        background: transparent;
    }

.kyc-glass-inner {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .kyc-glass-inner:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.40) !important;
    }

    .kyc-glass-inner .card-header {
        background: rgba(255, 255, 255, 0.05) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px 12px 0 0 !important;
    }

.kyc-step-card {
    background: rgba(14, 22, 60, 0.50) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40) !important;
    border-radius: 14px !important;
}

.kyc-step-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 18px;
    transition: background 0.2s ease;
}

    .kyc-step-item:hover {
        background: rgba(255, 255, 255, 0.07);
    }

.kyc-page-title {
    background: linear-gradient(135deg, #ffffff 0%, #a8c0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kyc-icon-ring {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ===== Trading Plans � Glassmorphism Redesign ===== */

/* Page heading */
.tp-page-title {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--dash-accent-soft), var(--dash-accent-3-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.tp-page-subtitle {
    color: var(--dash-text-muted);
    font-size: 0.875rem;
}

/* Glass cards */
.card-eight-one {
    background: #080c15 !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    width: 32rem !important;
    padding: 0 5px 10px 5px !important;
    position: relative;
}

.card-eight-two {
    background: #080c15 !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    padding: 20px 5px 10px 5px !important;
    width: 32rem !important;
}

/* Card top header bar */
.eight-card-title {
    text-align: center !important;
    color: #fff !important;
    border-bottom: 1px solid var(--dash-border) !important;
    line-height: 54px !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    background: #080c15 !important;
    border-radius: 20px 20px 0 0 !important;
    margin-bottom: 2px !important;
}

/* Section labels */
.eight-card-title-one,
.eight-card-title-two,
.eight-card-title-three {
    color: rgba(255, 255, 255, 0.42) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.6px !important;
    line-height: 2.6 !important;
}

/* Section dividers inside cards */
.card-eight-align-two,
.card-eight-align-three {
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.card-eight-one .px-2.pb-3,
.card-eight-two .p-3,
.card-eight-two .couponSection {
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Challenge type buttons */
.active-state {
    background: var(--dash-gradient) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.5) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

.inactive-state {
    background: #0d1420 !important;
    border: 1px solid var(--dash-border) !important;
    color: rgba(255, 255, 255, 0.62) !important;
    opacity: 1 !important;
    transition: all 0.22s !important;
}

    .inactive-state:hover {
        background: rgba(var(--dash-accent-rgb), 0.1) !important;
        border-color: rgba(var(--dash-accent-rgb), 0.45) !important;
        color: #fff !important;
    }

/* Balance amount buttons */
.active-state2 {
    background: var(--dash-gradient) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.5) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

.inactive-state2 {
    background: #0d1420 !important;
    border: 1px solid var(--dash-border) !important;
    color: rgba(255, 255, 255, 0.62) !important;
    opacity: 1 !important;
    transition: all 0.22s !important;
}

    .inactive-state2:hover {
        background: rgba(var(--dash-accent-rgb), 0.1) !important;
        border-color: rgba(var(--dash-accent-rgb), 0.45) !important;
        color: #fff !important;
    }

.bal-btn-one {
    background: #0d1420 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    font-size: 12px !important;
    border-radius: 30px !important;
    padding: 3px 14px !important;
    margin-top: 10px !important;
    transition: all 0.22s !important;
}

/* Currency button */
.curren-btn {
    background: #0d1420 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    padding: 3px 14px !important;
}

/* Details table */
.sec-eight-table thead tr {
    border-bottom: 1px solid var(--dash-border) !important;
}

    .sec-eight-table thead tr td {
        color: rgba(255, 255, 255, 0.42) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

.sec-eight-table tbody tr {
    border-bottom: 1px solid var(--dash-border) !important;
}

.sec-eight-table tr td {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 12px !important;
    padding-right: 0 !important;
    padding-bottom: 12px !important;
}

/* Pay / Platform / Payout radio cards */
.pay-card {
    background: #080c15 !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.22s !important;
}

    .pay-card:hover {
        border-color: rgba(var(--dash-accent-rgb), 0.7) !important;
        background: rgba(var(--dash-accent-rgb), 0.1) !important;
        box-shadow: 0 6px 20px rgba(var(--dash-accent-rgb), 0.35) !important;
        transform: translateY(-2px);
    }

    .pay-card input[type="radio"]:checked + .pay-content {
        background: linear-gradient(145deg, rgba(var(--dash-accent-rgb), 0.18), rgba(var(--dash-accent-3-rgb), 0.18)) !important;
        border-color: rgba(var(--dash-accent-rgb), 0.55) !important;
        box-shadow: 0 0 12px rgba(var(--dash-accent-rgb), 0.25) !important;
    }

.pay-content {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Coupon section */
.coupon-wrapper {
    background: #0d1420 !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow: hidden !important;
}

    .coupon-wrapper:focus-within {
        border-color: rgba(var(--dash-accent-rgb), 0.55) !important;
        box-shadow: 0 0 14px rgba(var(--dash-accent-rgb), 0.22) !important;
    }

.coupon-input {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
}

.coupon-btn {
    background: var(--dash-gradient) !important;
    border: none !important;
    font-weight: 600 !important;
    transition: opacity 0.2s !important;
}

    .coupon-btn:hover {
        opacity: 0.88 !important;
    }

.coupon-summary {
    background: #0d1420 !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #fff !important;
}

/* Section titles inside right card */
.payment-title {
    color: rgba(255, 255, 255, 0.42) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.6px !important;
}

/* Primary CTA � Pay Now */
.phase-table-btn {
    background: var(--dash-gradient) !important;
    border: none !important;
    color: #fff !important;
    font-size: 15px !important;
    width: 95% !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    box-shadow: 0 6px 28px rgba(37, 99, 235, 0.45) !important;
    transition: all 0.3s !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    display: block !important;
    margin: 0 auto 12px !important;
}

    .phase-table-btn:hover {
        box-shadow: 0 8px 36px rgba(37, 99, 235, 0.65) !important;
        transform: translateY(-2px) !important;
        color: #fff !important;
    }

    .phase-table-btn:active {
        transform: translateY(0) !important;
    }

@media (max-width: 992px) {
    .card-eight-one,
    .card-eight-two {
        width: 100% !important;
    }

    .tp-page-title {
        font-size: 1.6rem;
    }
}
/* ===== End Trading Plans Glassmorphism ===== */

/* ===================================================================
   Trading Plans — "challenge builder" layout pattern
   (segmented full-width step rows + split purchase / rules cards),
   themed with the site's own blue → purple accent (var(--dash-gradient))
   instead of an off-brand color, so it matches the rest of the app.
   Scoped under .tp-v2 so other pages sharing the same component
   classes (pay-card, phase-table-btn, active-state, ...) are untouched.
   =================================================================== */
.tp-v2 .tp-step-label {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    margin-bottom: 10px !important;
}

    .tp-v2 .tp-step-label i {
        color: var(--dash-accent-soft);
    }

/* Challenge type / account size — full-width segmented rows */
.tp-v2 .tp-type-btn,
.tp-v2 .tp-size-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 12px !important;
    padding: 12px 10px !important;
    font-size: 0.82rem !important;
    margin-top: 0 !important;
}

.tp-v2 .tp-size-btn {
    padding: 14px 8px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

/* Theme accent (blue → purple gradient) for the currently-selected type / size */
.tp-v2 .active-state,
.tp-v2 .active-state2 {
    background: var(--dash-gradient) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 18px rgba(var(--dash-accent-strong-rgb), 0.5) !important;
}

.tp-v2 .inactive-state:hover,
.tp-v2 .inactive-state2:hover {
    border-color: rgba(var(--dash-accent-rgb), 0.5) !important;
    background: rgba(var(--dash-accent-rgb), 0.1) !important;
}

.tp-v2 .curren-btn.active-state {
    display: inline-flex !important;
    width: auto !important;
    padding: 4px 16px !important;
}

/* Currency row */
.tp-v2 .tp-currency-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 0;
}

.tp-v2 .tp-mini-label {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

/* Purchase card — the featured, accent-bordered panel */
.tp-v2 .tp-purchase-card {
    background: #0b0d12 !important;
    border: 1px solid rgba(var(--dash-accent-rgb), 0.4) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--dash-accent-rgb), 0.10) !important;
    padding: 6px 6px 18px !important;
}

.tp-v2 .tp-purchase-section {
    padding: 16px 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 16px;
}

.tp-v2 .tp-price-block {
    padding: 18px 18px 4px;
    text-align: left;
}

.tp-v2 .tp-price-value {
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.tp-v2 .tp-price-caption {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 4px;
}

.tp-v2 .tp-cta {
    background: var(--dash-gradient) !important;
    box-shadow: 0 8px 26px rgba(var(--dash-accent-strong-rgb), 0.45) !important;
    width: calc(100% - 36px) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

    .tp-v2 .tp-cta:hover {
        box-shadow: 0 10px 32px rgba(var(--dash-accent-strong-rgb), 0.6) !important;
    }

    .tp-v2 .tp-cta .tp-cta-label i {
        vertical-align: middle;
    }

/* Rules card */
.tp-v2 .tp-rules-card {
    background: #0b0d12 !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5) !important;
    padding: 18px 20px !important;
}

.tp-v2 .tp-rules-title {
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid rgba(var(--dash-accent-rgb), 0.3) !important;
    padding-bottom: 14px !important;
    margin-bottom: 8px !important;
}

    .tp-v2 .tp-rules-title i {
        color: var(--dash-accent-soft);
    }

@media (max-width: 992px) {
    .tp-v2 .tp-purchase-card,
    .tp-v2 .tp-rules-card {
        margin-bottom: 1.25rem;
    }
}

/* ===== End Trading Plans Layout ===== */

/* ===== Promotion Page ===== */
.promo-page-header h4 {
    color: var(--dash-text-bright);
    font-weight: 600;
}

.promo-header-icon {
    font-size: 1.6rem;
    color: var(--dash-accent-2);
}

.promo-header-sub {
    color: var(--dash-text-muted);
    font-size: 0.9rem;
}

/* Flat near-black panel matching the Trading Overview / dashboard cards —
   was a navy gradient, which read distinctly bluer than the rest of the app. */
.promo-card {
    background: #080c15;
    border: 1px solid var(--dash-border) !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--dash-accent-rgb), 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .promo-card:hover {
        transform: translateY(-4px);
        border-color: var(--dash-border-strong) !important;
        box-shadow: 0 14px 44px rgba(0, 0, 0, 0.75), 0 0 36px -6px rgba(var(--dash-accent-rgb), 0.35) !important;
    }

.promo-card-img-wrap {
    position: relative;
    overflow: hidden;
}

.promo-card-img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.promo-card:hover .promo-card-img {
    transform: scale(1.04);
}

.promo-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--dash-gradient);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(var(--dash-accent-rgb), 0.45);
}

/* Nested one flat step above the card body, like the payout-cycle tiles */
.promo-code-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #0d1420;
    border: 1px dashed rgba(var(--dash-accent-rgb), 0.4);
    border-radius: 10px;
    padding: 12px 24px;
    width: 100%;
}

.promo-code-label {
    font-size: 0.7rem;
    color: var(--dash-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.promo-code-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dash-accent-2);
    letter-spacing: 3px;
}

.promo-copy-btn {
    background: var(--dash-gradient);
    color: #fff !important;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 20px;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(var(--dash-accent-rgb), 0.35);
}

    .promo-copy-btn:hover {
        background: var(--dash-gradient);
        box-shadow: 0 6px 24px rgba(var(--dash-accent-rgb), 0.55);
        transform: translateY(-1px);
        color: #fff !important;
    }

.promo-copy-btn--success {
    background: linear-gradient(135deg, #0d8a5e, #0ab973) !important;
    box-shadow: 0 6px 24px rgba(10, 185, 115, 0.4) !important;
}

.promo-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #0d8a5e, #0ab973);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 28px rgba(10, 185, 115, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
}

    .promo-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
/* ===== End Promotion Page ===== */

/* ===== Certificates Page ===== */

/* Page header */
.cert-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--dash-accent-soft), var(--dash-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.3;
}

.cert-page-subtitle {
    color: var(--dash-text-muted);
    font-size: 0.875rem;
}

.cert-header-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--dash-accent-rgb), 0.2), rgba(var(--dash-accent-2-rgb), 0.2));
    border: 1px solid rgba(var(--dash-accent-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--dash-accent-2);
    flex-shrink: 0;
}

.cert-header-icon-wrap.sm {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1.15rem;
}

/* -- Tab pills -- */
.cert-nav-pills {
    display: inline-flex;
    list-style: none;
    padding: 4px;
    margin: 0;
    gap: 3px;
    background: #0d1420;
    border: 1px solid var(--dash-border);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cert-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--dash-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.22s ease;
    white-space: nowrap;
}

    .cert-tab-btn:hover {
        color: var(--dash-text);
        background: #0d1420;
    }

    .cert-tab-btn.active {
        background: linear-gradient(135deg, var(--dash-accent-strong), var(--dash-accent-2));
        border-color: transparent;
        color: #fff;
        box-shadow: 0 4px 16px rgba(var(--dash-accent-rgb), 0.4);
        font-weight: 600;
    }

/* -- Glassmorphism base card -- */
/* Full-perimeter gradient border (blue → purple), matching the achievement
   certificate reference, instead of the old top-only shimmer strip. */
.cert-glass-card {
    background:
        linear-gradient(180deg, #0b0f1c 0%, #080c15 100%) padding-box,
        linear-gradient(135deg, var(--dash-accent) 0%, var(--dash-accent-3) 100%) border-box;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid transparent;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 28px rgba(var(--dash-accent-rgb), 0.18);
    overflow: hidden;
    position: relative;
}

    .cert-glass-card::before {
        content: '';
        position: absolute;
        left: -10%;
        bottom: -10%;
        width: 90px;
        height: 90px;
        background-image: radial-gradient(rgba(var(--dash-accent-rgb), 0.35) 1.5px, transparent 1.5px);
        background-size: 10px 10px;
        -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 0%, transparent 75%);
        mask-image: radial-gradient(circle at 0% 100%, #000 0%, transparent 75%);
        pointer-events: none;
    }

/* -- Card header -- */
.cert-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--dash-border);
    background: #0d1420;
}

.cert-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.cert-card-sub {
    font-size: 0.78rem;
    color: var(--dash-text-muted);
    margin-top: 2px;
}

.cert-header-icon {
    font-size: 1.4rem;
    color: var(--dash-accent-2);
}

.cert-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(var(--dash-success-rgb), 0.15);
    border: 1px solid rgba(var(--dash-success-rgb), 0.3);
    color: var(--dash-success);
    flex-shrink: 0;
}

/* -- Detail rows -- */
.cert-detail-list {
    padding: 0 24px;
}

.cert-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--dash-border);
}

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

.cert-detail-label {
    font-size: 0.82rem;
    color: var(--dash-text-muted);
}

    .cert-detail-label i {
        vertical-align: middle;
        margin-right: 5px;
        font-size: 0.95rem;
    }

.cert-detail-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
}

/* -- Card footer -- */
.cert-card-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--dash-border);
    background: #0d1420;
    text-align: center;
}

/* -- Info alert inside glass card -- */
.cert-info-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--dash-accent-2-rgb), 0.08);
    border: 1px solid rgba(var(--dash-accent-2-rgb), 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 16px 24px 4px;
    font-size: 0.875rem;
    color: var(--dash-text-soft);
}

    .cert-info-alert i {
        font-size: 1.1rem;
        color: var(--dash-accent-2);
        flex-shrink: 0;
    }

/* -- Empty-state card -- */
.cert-empty-card {
    background: #080c15;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--dash-border);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.cert-empty-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

    .cert-empty-icon-wrap.secondary {
        background: var(--dash-surface-hover);
        border: 1px solid var(--dash-border);
        color: var(--dash-text-muted);
    }

    .cert-empty-icon-wrap.info {
        background: rgba(var(--dash-accent-2-rgb), 0.12);
        border: 1px solid rgba(var(--dash-accent-2-rgb), 0.22);
        color: var(--dash-accent-2);
    }

    .cert-empty-icon-wrap.warning {
        background: rgba(var(--dash-warning-rgb), 0.12);
        border: 1px solid rgba(var(--dash-warning-rgb), 0.22);
        color: var(--dash-warning-soft);
    }

    .cert-empty-icon-wrap.primary {
        background: rgba(var(--dash-accent-rgb), 0.12);
        border: 1px solid rgba(var(--dash-accent-rgb), 0.22);
        color: var(--dash-accent-soft);
    }

.cert-empty-text {
    color: var(--dash-text-muted);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* -- Button variants -- */
.cert-warning-btn {
    background: linear-gradient(135deg, var(--dash-warning) 0%, var(--dash-warning) 100%) !important;
    box-shadow: 0 .5rem 1rem rgba(var(--dash-warning-rgb), .25) !important;
}

    .cert-warning-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--dash-warning-soft) 0%, var(--dash-warning) 100%) !important;
        box-shadow: 0 .75rem 1.5rem rgba(var(--dash-warning-rgb), .35) !important;
    }

.cert-outline-btn {
    background: transparent !important;
    border: 1px solid var(--dash-border-strong) !important;
    box-shadow: none !important;
    min-width: 160px;
}

    .cert-outline-btn:hover:not(:disabled) {
        background: var(--dash-surface-hover) !important;
        border-color: var(--dash-text-dim) !important;
        box-shadow: none !important;
        transform: translateY(-2px) !important;
    }

/* ===== End Certificates Page ===== */

/* ===== Inbox Page ===== */

.inbox-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    min-height: 70vh;
}

/* -- Left list panel -- */
.inbox-list-panel {
    width: 320px;
    flex-shrink: 0;
    background: linear-gradient(160deg, #1B224F, #0e153e);
    border: 1px solid rgba(41, 98, 255, 0.2);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.inbox-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
    color: #e5e5e5;
    letter-spacing: 0.3px;
}

.inbox-count-badge {
    background: #2962ff;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    line-height: 1.6;
}

.inbox-list-body {
    overflow-y: auto;
    max-height: 62vh;
    padding: 8px 0;
}

    .inbox-list-body::-webkit-scrollbar {
        width: 4px;
    }

    .inbox-list-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .inbox-list-body::-webkit-scrollbar-thumb {
        background: rgba(41, 98, 255, 0.35);
        border-radius: 4px;
    }

/* -- Individual inbox item -- */
.inbox-item {
    padding: 4px 10px;
    cursor: pointer;
}

.inbox-item-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    transition: background 0.18s, border-color 0.18s;
    border: 1px solid transparent;
}

    .inbox-item-inner:hover {
        background: rgba(41, 98, 255, 0.12);
        border-color: rgba(41, 98, 255, 0.25);
    }

.inbox-item.active .inbox-item-inner {
    background: rgba(41, 98, 255, 0.22);
    border-color: rgba(41, 98, 255, 0.5);
}

.inbox-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2962ff;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(41, 98, 255, 0.7);
}

.inbox-item.active .inbox-item-dot {
    background: #7c9eff;
}

.inbox-item-text {
    flex: 1;
    min-width: 0;
}

.inbox-item-subject {
    font-size: 0.83rem;
    font-weight: 500;
    color: #d8deff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-item.active .inbox-item-subject {
    color: #fff;
}

.inbox-item-preview {
    font-size: 0.75rem;
    color: #8a8fc0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-item-arrow {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    transition: color 0.18s;
}

.inbox-item.active .inbox-item-arrow,
.inbox-item-inner:hover .inbox-item-arrow {
    color: #2962ff;
}

/* -- Empty state (list panel) -- */
.inbox-empty-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

    .inbox-empty-list .inbox-empty-img {
        width: 100px;
        opacity: 0.75;
    }

.inbox-empty-text {
    margin-top: 10px;
    font-size: 0.82rem;
    color: #6b7299;
}

/* -- Right view panel -- */
.inbox-view-panel {
    flex: 1;
    background: linear-gradient(160deg, #1B224F, #0e153e);
    border: 1px solid rgba(41, 98, 255, 0.2);
    border-radius: 14px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inbox-view-header {
    padding: 18px 24px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inbox-view-subject-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inbox-view-icon {
    font-size: 1.25rem;
    color: #2962ff;
    flex-shrink: 0;
}

.inbox-view-subject {
    font-size: 0.95rem;
    color: #d8deff;
    font-weight: 500;
    min-height: 1.4rem;
}

.inbox-view-body {
    flex: 1;
    padding: 20px 24px;
}

.inbox-view-message {
    font-size: 0.85rem;
    color: #a0a4c8;
    margin-bottom: 16px;
}

.inbox-view-target-subject {
    font-size: 0.95rem;
    font-weight: 600;
    color: #d8deff;
    margin-bottom: 10px;
}

.inbox-view-target-content {
    font-size: 0.88rem;
    color: #a0a4c8;
    line-height: 1.7;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 16px 18px;
    min-height: 80px;
    white-space: pre-wrap;
}

/* -- No-data state (view panel) -- */
.inbox-no-selection {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

    .inbox-no-selection .inbox-nodata-img {
        width: 200px;
        opacity: 0.75;
    }

.inbox-nodata-text {
    margin-top: 14px;
    font-size: 0.85rem;
    color: #6b7299;
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .inbox-wrapper {
        flex-direction: column;
    }

    .inbox-list-panel {
        width: 100%;
    }

    .inbox-list-body {
        max-height: 40vh;
    }
}

/* ===== End Inbox Page ===== */

/* ===== KYC / IdProof Page ===== */
.kyc-glass-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(41, 98, 255, 0.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

    .kyc-glass-card .card-header {
        background: rgba(255, 255, 255, 0.03);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 16px 16px 0 0 !important;
    }

.kyc-step-card {
    background: rgba(41, 98, 255, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(41, 98, 255, 0.20) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.kyc-glass-inner {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

    .kyc-glass-inner .card-header {
        background: rgba(255, 255, 255, 0.03);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px 12px 0 0 !important;
    }

.kyc-icon-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.kyc-step-item {
    padding: 8px 4px;
}

.kyc-page-title {
    background: linear-gradient(90deg, #d8deff 0%, #7c9fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* ===== End KYC / IdProof Page ===== */

/* ===== TopUp Reset Page ===== */
/* Flat near-black panels matching the dashboard / Trading Overview cards —
   were translucent navy glass, which read bluer and lighter than the rest. */
.topup-glass-card {
    background: #080c15;
    border: 1px solid var(--dash-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--dash-accent-rgb), 0.10);
}

.topup-glass-modal {
    background: #080c15;
    border: 1px solid var(--dash-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(var(--dash-accent-rgb), 0.10);
}

/* Icon badge in the Renew / Reset card headers */
.topup-icon-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.topup-icon-badge.renew {
    background: var(--dash-gradient);
    color: #fff;
    box-shadow: 0 4px 16px rgba(var(--dash-accent-strong-rgb), 0.4);
}

.topup-icon-badge.reset {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    font-size: 1.2rem;
    background: rgba(var(--dash-accent-rgb), 0.15);
    color: var(--dash-accent);
}

/* Renew card illustration — bleeds to the card's full width */
.renew-card .renew-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    height: 260px;
    overflow: hidden;
}

    .renew-card .renew-illustration-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

/* Compact "RESET" pill button in the Reset card header */
.btn-reset-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(var(--dash-danger-rgb), 0.16);
    color: var(--dash-danger-soft);
    border: 1px solid rgba(var(--dash-danger-rgb), 0.35);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .btn-reset-pill:hover {
        background: var(--dash-danger);
        color: #fff;
        text-decoration: none;
    }

    .btn-reset-pill.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    .btn-reset-pill .spinner {
        width: 12px !important;
        height: 12px !important;
        border-width: 2px !important;
    }
/* ===== End TopUp Reset Page ===== */

table.dataTable tbody tr {
    background: unset;
}

/* ===== Sidebar Badge / Pulse Dot ===== */
.sidebar-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 2px 7px 2px 5px;
    white-space: nowrap;
}

.sidebar-pulse-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.sidebar-pulse-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    opacity: 0.5;
    animation: sidebar-pulse 1.6s ease-in-out infinite;
}

.sidebar-pulse-dot.dot-green  { background: #28c76f; }
.sidebar-pulse-dot.dot-green::after  { border: 2px solid #28c76f; }

.sidebar-pulse-dot.dot-orange { background: #ff9f43; }
.sidebar-pulse-dot.dot-orange::after { border: 2px solid #ff9f43; }

.sidebar-pulse-dot.dot-amber  { background: #ffcf5c; }
.sidebar-pulse-dot.dot-amber::after  { border: 2px solid #ffcf5c; }

.sidebar-pulse-dot.dot-blue   { background: #4e9eff; }
.sidebar-pulse-dot.dot-blue::after   { border: 2px solid #4e9eff; }

@keyframes sidebar-pulse {
    0%, 100% { transform: scale(1);   opacity: 0.5; }
    50%       { transform: scale(1.9); opacity: 0;   }
}
/* ===== End Sidebar Badge / Pulse Dot ===== */

/* ═══════════════════════════════════════════════════
   Collapsible Sidebar System
═══════════════════════════════════════════════════ */

/* ── Sidebar header: logo + toggle button (expanded) ── */
.sidebar-header-wrap {
    display: flex;
    align-items: center;
    padding-right: 0.75rem;
    flex-shrink: 0;
    min-height: 64px;
    overflow: hidden;
}

.sidebar-header-wrap > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Toggle button (always visible on xl+) ── */
.sidebar-toggle-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: rgba(165, 180, 252, 0.70);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    padding: 0;
    outline: none;
}

.sidebar-toggle-btn:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.50);
    color: #c7d2fe;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.25);
}

.sidebar-toggle-btn i {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Text-label smooth transition (always applied for animation) ── */
.glass-sidebar .menu-inner > .menu-item > .menu-link > div,
.glass-sidebar .menu-inner > .menu-item > .menu-link > .d-inline-flex {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
}

/* ── Active link: position context for indicator bar ── */
.glass-sidebar .menu-inner > .menu-item > .menu-link {
    position: relative;
}

/* Remove the template's right-side active indicator bar (theme-default-dark.css line 55) */
.layout-wrapper:not(.layout-horizontal) .glass-sidebar .menu-inner > .menu-item.active::before {
    display: none !important;
}

/* Left accent bar on active item */
.glass-sidebar .menu-inner > .menu-item.active > .menu-link::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 18%;
    height: 64%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.55);
}

/* ── Width & layout-page transitions (desktop only) ── */
@media (min-width: 1200px) {
    #layout-menu.glass-sidebar {
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .layout-page {
        transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    margin-left  0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Skip animation when restoring saved state on load */
    html.sidebar-no-transition #layout-menu.glass-sidebar,
    html.sidebar-no-transition .layout-page {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════
   Collapsed State — desktop ≥ 1200px only
   Icon rendering is handled entirely by the template's
   native .menu-collapsed class (core-dark.css):
     • hides text divs (opacity: 0)
     • centres icon via: margin-left:-2rem; width:5.25rem; text-align:center
   We only need to override the layout, logo, and CSD card.
══════════════════════════════════════════════════════ */
@media (min-width: 1200px) {

    /* 1. Push content area to match collapsed sidebar (5.25rem = 84px) */
    html.sidebar-collapsed .layout-page {
        padding-left: 5.25rem !important;
        margin-left: 0 !important;
    }

    /* ── Header: stack logo icon + toggle vertically, centred ── */
    html.sidebar-collapsed .sidebar-header-wrap {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0.55rem 0.25rem 0.3rem !important;
        gap: 0.3rem;
        min-height: auto;
    }

    html.sidebar-collapsed .sidebar-header-wrap > :first-child {
        flex: 0 0 auto !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Centre the app-brand wrapper */
    html.sidebar-collapsed .app-brand {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    html.sidebar-collapsed .app-brand-link {
        padding: 0.2rem 0 !important;
        gap: 0 !important;
        justify-content: center !important;
        display: flex !important;
    }

    /* Remove fixed logoWidth so it no longer overflows */
    html.sidebar-collapsed .app-brand-logo {
        width: auto !important;
        min-width: 0 !important;
        gap: 0 !important;
        justify-content: center !important;
    }

    /* Hide brand text (project-specific class from _LogoPartial) */
    html.sidebar-collapsed .logoText {
        display: none !important;
    }

    /* Hide &nbsp; and any non-image node between logo image and text */
    html.sidebar-collapsed .app-brand-logo > :not(img) {
        display: none !important;
    }

    /* Logo image: fixed square */
    html.sidebar-collapsed .dft-logo {
        width: 36px !important;
        height: 36px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Toggle button centred below logo */
    html.sidebar-collapsed .sidebar-toggle-btn {
        margin: 0 auto !important;
        width: 28px !important;
        height: 28px !important;
    }

    /* 2. CSD card — hide when in icon-only mode */
    html.sidebar-collapsed .glass-sidebar .sidebar-csd {
        display: none !important;
    }
}

/* ── JS-injected tooltip (position:fixed — never clipped by overflow) ── */
.sidebar-icon-tooltip {
    position: fixed;
    z-index: 10000;
    background: rgba(9, 13, 44, 0.96);
    border: 1px solid rgba(99, 102, 241, 0.38);
    color: #c7d2fe;
    padding: 0.38rem 0.9rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sidebar-icon-tooltip.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ═══════════════════════════════════════════════════
   End Collapsible Sidebar System
═══════════════════════════════════════════════════ */

/* ===== Withdraw pages =====
   Flat near-black panels matching the dashboard / Trading Overview cards.

   Scoped under .withdraw-page rather than defining a bare `.glass-card`
   globally: Billing defines its own .glass-card locally and IdProof uses the
   class without defining it, so a global rule would silently restyle IdProof
   and sit under Billing's local override. Scoping keeps this to the four
   withdraw views. */
.withdraw-page .glass-card {
    background: #080c15 !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--dash-accent-rgb), 0.10);
}

.withdraw-page .glass-card-inner {
    background: #0d1420;
    border: 1px solid var(--dash-border);
    border-radius: 10px;
}

.withdraw-page .glass-tile {
    background: #0d1420 !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 12px !important;
    transition: border-color .2s, background .2s;
}

    .withdraw-page .glass-tile:hover {
        border-color: var(--dash-border-strong) !important;
        background: var(--dash-surface-hover) !important;
    }

.withdraw-page .glass-modal {
    background: #080c15 !important;
    border: 1px solid var(--dash-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(var(--dash-accent-rgb), 0.10);
}

/* The request/affiliate views carried `text-dark`, which put near-black text
   on these near-black cards. Neutralised here so the shared text ramp applies. */
.withdraw-page .card.text-dark,
.withdraw-page .card.text-dark .card-title {
    color: var(--dash-text) !important;
}

/* ===== .btn-close-white fix =====
   The theme's base .btn-close icon (core-dark.css) is tinted #7071a4, not
   Bootstrap's stock black. Bootstrap's .btn-close-white "invert + grayscale
   + brightness(200%)" filter trick only produces white from that stock
   black — applied to #7071a4 it washes out to a nearly invisible pale
   shape, which is why close buttons across the app (modals, toasts,
   alerts) render as a blank box. Replacing the background image directly
   with a clean white X — instead of relying on the filter — fixes every
   .btn-close-white instance in one place. */
.btn-close-white {
    filter: none !important;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") center/0.8em auto no-repeat !important;
}