/* ==========================================================================
   TRADME — MODERN FINTECH DESIGN SYSTEM (override layer)
   Author: redesign pass for goalconversion theme
   Loaded LAST in <head> so it intentionally overrides legacy styles.
   It only changes the VISUAL layer (color, glass, shadow, type, spacing,
   radius). It never changes fixed-header / sidebar / content GEOMETRY,
   so no PHP logic, form, table, AJAX or MLM markup is affected.
   --------------------------------------------------------------------------
   Signature: money is rendered in a tabular monospace face so figures align
   like a real trading terminal; stat cards carry a colour-coded accent rail.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------ */
:root {
    --tm-primary:    #2563EB;
    --tm-primary-600:#1D4ED8;
    --tm-cyan:       #06B6D4;
    --tm-navy:       #0F172A;
    --tm-dark:       #020617;
    --tm-success:    #10B981;
    --tm-warning:    #F59E0B;
    --tm-danger:     #EF4444;
    --tm-bg:         #F8FAFC;
    --tm-card:       #FFFFFF;
    --tm-text:       #0F172A;
    --tm-text-2:     #64748B;
    --tm-border:     #E2E8F0;

    /* dashboard (dark terminal) surfaces */
    --tm-d-bg-1:     #0B1220;
    --tm-d-bg-2:     #060B16;
    --tm-d-surface:  rgba(255,255,255,.04);
    --tm-d-surface-2:rgba(255,255,255,.06);
    --tm-d-border:   rgba(148,163,184,.18);
    --tm-d-text:     #E2E8F0;
    --tm-d-text-2:   #94A3B8;

    --tm-grad:       linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
    --tm-grad-soft:  linear-gradient(135deg, rgba(37,99,235,.16), rgba(6,182,212,.16));

    --tm-radius:     16px;
    --tm-radius-sm:  12px;
    --tm-radius-xs:  10px;
    --tm-shadow:     0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.08);
    --tm-shadow-lg:  0 12px 40px rgba(15,23,42,.16);
    --tm-shadow-d:   0 10px 30px rgba(0,0,0,.45);

    --tm-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tm-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
}

/* ---- Base typography ---------------------------------------------------- */
body,
body.home,
.cp_navi_main_wrapper,
.l-main,
.footer_main_wrapper {
    font-family: var(--tm-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body { background: var(--tm-bg); color: var(--tm-text); }

h1, h2, h3, h4, h5, h6,
.page_header h1, .sv_heading_wraper h3 {
    font-family: var(--tm-font);
    letter-spacing: -0.02em;
}

/* tabular money figures — the financial signature */
.invest_table td,
.userdescc dd,
.no_badge,
.timer,
.crm_customer_table_inner_Wrapper td,
.width_table1 {
    font-variant-numeric: tabular-nums;
}

/* ---- Selection & scrollbar --------------------------------------------- */
::selection { background: rgba(37,99,235,.22); }
.l-main::-webkit-scrollbar,
body::-webkit-scrollbar { width: 10px; height: 10px; }
.l-main::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 8px; }

/* ==========================================================================
   1. TOP NAVBAR  (public + dashboard) — glassmorphism, kept same height
   ========================================================================== */
.cp_navi_main_wrapper.inner_header_wrapper.dashboard_header_middle.float_left,
.cp_navi_main_wrapper.inner_header_wrapper {
    background: rgba(11,18,32,.72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(148,163,184,.16);
    box-shadow: 0 8px 30px rgba(2,6,23,.28);
    transition: background .3s ease, box-shadow .3s ease;
}
/* when user scrolls (class added by tradme-modern.js) */
.cp_navi_main_wrapper.tm-scrolled {
    background: rgba(7,11,22,.9) !important;
    box-shadow: 0 10px 34px rgba(2,6,23,.45);
}

.cp_logo_wrapper img { filter: brightness(1.06); }

/* desktop menu links */
.main_top_wrapper .mainmenu ul li a,
.main_nav_ul > li > a.gc_main_navigation {
    color: #CBD5E1 !important;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .01em;
    border-radius: 8px;
    transition: color .2s ease, background .2s ease;
}
.main_top_wrapper .mainmenu ul li:hover .gc_main_navigation,
.main_top_wrapper .mainmenu ul li.active > .gc_main_navigation,
.main_nav_ul > li > a.gc_main_navigation.active_class,
.active_class {
    color: #fff !important;
}
.main_nav_ul > li > a.gc_main_navigation::after {
    content: "";
    display: block;
    height: 2px; width: 0;
    margin-top: 6px;
    border-radius: 2px;
    background: var(--tm-grad);
    transition: width .25s ease;
}
.main_nav_ul > li:hover > a.gc_main_navigation::after,
.main_nav_ul > li > a.active_class::after { width: 100%; }

/* dropdown menus in navbar */
.navi_2_dropdown,
.navi_2_dropdown .dropdown-menu-right {
    background: rgba(11,18,32,.96) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius-sm) !important;
    box-shadow: var(--tm-shadow-d) !important;
    overflow: hidden;
    padding: 8px !important;
}
.navi_2_dropdown li a { color: #CBD5E1 !important; border-radius: 8px; transition: all .18s ease; }
.navi_2_dropdown li a:hover { background: var(--tm-grad-soft) !important; color: #fff !important; }

/* header login / register buttons */
.login_register_buttons .btn { margin-left: 8px; }

/* ==========================================================================
   2. BUTTONS — premium gradient + ghost, focus rings
   ========================================================================== */
.btn,
.about_btn a,
.login_btn .btn,
input[type="submit"],
button[type="submit"] {
    font-family: var(--tm-font);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 12px !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    border: none;
}
.btn.btn-primary,
a.btn.btn-primary,
input[type="submit"],
button[type="submit"],
button[name="submit_deposit"],
.login_btn .btn-primary {
    background: var(--tm-grad) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(37,99,235,.32) !important;
    padding: 12px 26px;
}
.btn.btn-primary:hover,
a.btn.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
button[name="submit_deposit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(37,99,235,.42) !important;
    filter: saturate(1.08);
}
.btn.btn-primary:active,
a.btn.btn-primary:active { transform: translateY(0); }

.btn.btn-secondary,
a.btn.btn-secondary {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border: 1px solid rgba(148,163,184,.34) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding: 12px 24px;
}
.btn.btn-secondary:hover,
a.btn.btn-secondary:hover {
    background: rgba(255,255,255,.16) !important;
    transform: translateY(-2px);
}

/* visible keyboard focus for accessibility */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(37,99,235,.45);
    outline-offset: 2px;
}

/* ==========================================================================
   3. PUBLIC PAGE HEADER / BREADCRUMB — keep fixed geometry, restyle colour
   ========================================================================== */
.page_title_section,
.page_title_section.dashboard_title {
    background: linear-gradient(120deg, #0B1220 0%, #122142 55%, #0B2742 100%) !important;
    border-bottom: 1px solid rgba(148,163,184,.16);
}
.page_title_section::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(620px 200px at 12% -40%, rgba(37,99,235,.35), transparent 60%),
        radial-gradient(520px 200px at 90% 140%, rgba(6,182,212,.28), transparent 60%);
    pointer-events: none;
}
.page_header h1 { color: #fff !important; font-weight: 700; letter-spacing: -.02em; }
.page_header .sub_title li,
.page_header .sub_title a { color: #CBD5E1 !important; }
.page_header .sub_title a:hover { color: #fff !important; }

/* ==========================================================================
   4. DASHBOARD SHELL — deep navy "trading terminal" surface
   ========================================================================== */
.l-main,
.l-main.bg-purple,
.bg-purple,
.last_transaction_wrapper.bg-purple {
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(37,99,235,.16), transparent 55%),
        radial-gradient(820px 520px at -10% 0%, rgba(6,182,212,.12), transparent 55%),
        linear-gradient(180deg, var(--tm-d-bg-1) 0%, var(--tm-d-bg-2) 100%) !important;
}
.clr-white,
.l-main.clr-white,
.l-main .clr-white { color: var(--tm-d-text) !important; }

/* ---- Left sidebar — frosted dark rail ---------------------------------- */
.l-sidebar {
    background: linear-gradient(180deg, #0B1220 0%, #070C16 100%) !important;
    border-right: 1px solid var(--tm-d-border);
    box-shadow: 6px 0 30px rgba(2,6,23,.35);
}
.c-menu > ul {
    margin: 4px 12px !important;
    border-radius: 12px;
    transition: background .2s ease;
}
.c-menu > ul:hover { background: var(--tm-d-surface); }
.c-menu > ul .c-menu__item { color: var(--tm-d-text-2) !important; }
.c-menu-item__title {
    color: var(--tm-d-text-2) !important;
    font-weight: 500;
    font-size: 14.5px;
    text-transform: capitalize;
    transition: color .2s ease;
}
.c-menu > ul:hover .c-menu-item__title { color: #fff !important; }
.crm_navi_icon i,
.c-menu__item__inner i {
    color: var(--tm-cyan) !important;
    transition: transform .2s ease;
}
.c-menu > ul:hover .crm_navi_icon i { transform: scale(1.12); }
.c-menu > ul .c-menu__item.is-active .c-menu__item__inner i {
    background: var(--tm-grad) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
}

/* ==========================================================================
   5. USER INFO PANEL (account_top_information)
   ========================================================================== */
.account_top_information {
    background: linear-gradient(120deg, rgba(37,99,235,.22), rgba(6,182,212,.16)) !important;
    border: 1px solid var(--tm-d-border);
    border-radius: var(--tm-radius) !important;
    box-shadow: var(--tm-shadow-d);
    overflow: hidden;
    position: relative;
}
.account_top_information::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(600px 240px at 90% -30%, rgba(6,182,212,.30), transparent 60%);
    pointer-events: none;
}
.account_overlay { background: transparent !important; }
.useriimg img {
    border: 3px solid rgba(255,255,255,.7);
    box-shadow: 0 8px 24px rgba(2,6,23,.4);
    border-radius: 16px;
}
.userdet h3 { color: #fff !important; font-weight: 700; }
.userdescc dt { color: rgba(255,255,255,.7) !important; font-weight: 500; }
.userdescc dd { color: #fff !important; font-weight: 600; font-family: var(--tm-mono); }

/* ==========================================================================
   6. STAT / INVESTMENT CARDS — glass, equal height, colour-coded rail
   ========================================================================== */
.l-main .investment_box_wrapper,
.l-main .investment_box_wrapper.box-style-1,
.l-main .box-style-1 {
    background: var(--tm-d-surface) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    padding: 26px 28px !important;
    /*height: 100%;*/
    box-shadow: 0 8px 26px rgba(2,6,23,.30);
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.l-main .investment_box_wrapper::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--tm-grad);
    opacity: .9;
}
.l-main .investment_box_wrapper:hover {
    transform: translateY(-6px);
    border-color: rgba(37,99,235,.55) !important;
    box-shadow: 0 18px 44px rgba(2,6,23,.5);
}
.l-main .investment_icon_wrapper i {
    color: var(--tm-cyan) !important;
    font-size: 26px;
    background: rgba(6,182,212,.12);
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(6,182,212,.28);
}
.l-main .investment_icon_wrapper h1 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: -.01em;
}
.invest_table td { color: var(--tm-d-text) !important; padding: 7px 0; font-size: 14.5px; }
.invest_table td.invest_td1:first-child { color: var(--tm-d-text-2) !important; }
.invest_table td:last-child { font-family: var(--tm-mono); font-weight: 600; color: #fff !important; }

/* make column cards equal height regardless of content */
.account_wrapper .row { display: flex; flex-wrap: wrap; }
.account_wrapper .row > [class*="col-"] { display: flex; }
.account_wrapper .row > [class*="col-"] > .investment_box_wrapper { width: 100%; }

/* section headings inside dashboard */
.l-main .sv_heading_wraper h3,
.l-main .sv_heading_wraper h3.clr-white {
    color: #fff !important;
    font-weight: 700;
    font-size: 22px;
    position: relative;
    padding-left: 14px;
}
.l-main .sv_heading_wraper h3::before {
    content: "";
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px; border-radius: 4px;
    background: var(--tm-grad);
}

/* ==========================================================================
   7. TABLES — modern, sticky header, hover rows, status badges
   ========================================================================== */
.crm_customer_table_main_wrapper {
    background: var(--tm-d-surface) !important;
    border: 1px solid var(--tm-d-border);
    border-radius: var(--tm-radius) !important;
    box-shadow: 0 8px 26px rgba(2,6,23,.30);
    padding: 8px;
    overflow: hidden;
}
.table-responsive { border-radius: var(--tm-radius-sm); }
.myTable.table,
.crm_customer_table_inner_Wrapper,
table.datatables {
    color: var(--tm-d-text) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100%;
}
.myTable.table thead th,
table.datatables thead th {
    position: sticky; top: 0;
    background: rgba(11,18,32,.96) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--tm-d-border) !important;
    padding: 14px 16px !important;
    z-index: 2;
}
.myTable.table tbody td,
table.datatables tbody td {
    padding: 13px 16px !important;
    border-bottom: 1px solid rgba(148,163,184,.10) !important;
    font-size: 14px;
}
.myTable.table tbody tr,
table.datatables tbody tr { transition: background .15s ease; }
.myTable.table tbody tr:hover,
table.datatables tbody tr:hover { background: rgba(37,99,235,.10) !important; }
.t-white, .t-white td, .t-white th { color: var(--tm-d-text) !important; }

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--tm-d-border) !important;
    color: var(--tm-d-text) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    color: var(--tm-d-text-2) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--tm-grad) !important;
    border: none !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--tm-d-text-2) !important; }

/* status badges */
.no_badge {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    background: rgba(37,99,235,.16);
    color: #93C5FD;
    border: 1px solid rgba(37,99,235,.30);
}
.no_badge.purple { background: rgba(6,182,212,.16); color: #67E8F9; border-color: rgba(6,182,212,.32); }
/* semantic status colouring by text — applied via JS where text matches */
.tm-badge-approved, .badge-approved { background: rgba(16,185,129,.16) !important; color: #6EE7B7 !important; border-color: rgba(16,185,129,.34) !important; }
.tm-badge-pending,  .badge-pending  { background: rgba(245,158,11,.16) !important; color: #FCD34D !important; border-color: rgba(245,158,11,.34) !important; }
.tm-badge-rejected, .badge-rejected { background: rgba(239,68,68,.16)  !important; color: #FCA5A5 !important; border-color: rgba(239,68,68,.34)  !important; }

/* ==========================================================================
   8. FORMS — premium inputs, focus states (deposit/withdraw/login/profile)
   ========================================================================== */
.change_password_wrapper,
.change_password_wrapper.box-bg,
.payment_transfer_Wrapper {
    background: var(--tm-d-surface) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: 0 8px 26px rgba(2,6,23,.30);
    padding: 28px !important;
}
.form-group { margin-bottom: 18px; }
.form-group label,
.form-group > label { color: var(--tm-d-text) !important; font-weight: 500; font-size: 14px; margin-bottom: 7px; }

.form-control,
.form-control.require,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
select.form-control,
textarea.form-control {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--tm-d-border) !important;
    color: var(--tm-d-text) !important;
    border-radius: 12px !important;
    padding: 13px 16px !important;
    height: auto !important;
    font-size: 15px;
    font-family: var(--tm-font);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: none !important;
}
.form-control::placeholder { color: rgba(148,163,184,.7); }
.form-control:focus,
.form-control.require:focus {
    background: rgba(255,255,255,.08) !important;
    border-color: var(--tm-primary) !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.18) !important;
    outline: none;
}
.form-control[readonly] { background: rgba(255,255,255,.03) !important; color: var(--tm-d-text-2) !important; }

/* nice-select / dropify themed */
.nice-select {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--tm-d-border) !important;
    color: var(--tm-d-text) !important;
    border-radius: 12px !important;
    height: auto; line-height: 26px; padding: 12px 16px;
}
.nice-select .list { background: #0B1220 !important; border: 1px solid var(--tm-d-border) !important; border-radius: 12px !important; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background: rgba(37,99,235,.18) !important; }
.dropify-wrapper {
    background: rgba(255,255,255,.04) !important;
    border: 1.5px dashed var(--tm-d-border) !important;
    border-radius: 12px !important;
    color: var(--tm-d-text-2) !important;
}

/* checkboxes */
.control--checkbox .control__indicator { border-radius: 6px; }

/* alerts */
.alert { border-radius: 12px !important; border: 1px solid transparent; font-size: 14.5px; padding: 13px 16px; }
.alert-warning { background: rgba(245,158,11,.14) !important; color: #FCD34D !important; border-color: rgba(245,158,11,.32) !important; }
.alert-success { background: rgba(16,185,129,.14) !important; color: #6EE7B7 !important; border-color: rgba(16,185,129,.32) !important; }
.alert-danger  { background: rgba(239,68,68,.14)  !important; color: #FCA5A5 !important; border-color: rgba(239,68,68,.32)  !important; }
.alert-info    { background: rgba(37,99,235,.14)  !important; color: #93C5FD !important; border-color: rgba(37,99,235,.32)  !important; }

/* ==========================================================================
   9. LOGIN / REGISTER — premium centred card
   ========================================================================== */
.login_wrapper {
    background:
        radial-gradient(800px 420px at 110% -10%, rgba(37,99,235,.18), transparent 55%),
        radial-gradient(720px 460px at -10% 110%, rgba(6,182,212,.14), transparent 55%),
        linear-gradient(180deg, var(--tm-d-bg-1), var(--tm-d-bg-2)) !important;
}

.login_top_box {
    background: var(--tm-d-surface) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: var(--tm-shadow-d);
}
.login_form_wrapper .sv_heading_wraper h3,
.heading_wrapper_dark h3 { color: #fff !important; }
.login_remember_box,
.login_remember_box label { color: var(--tm-d-text-2) !important; }
.icon_form .form-control { padding-left: 16px !important; }

/* ==========================================================================
   10. FOOTER — dark, refined
   ========================================================================== */
.footer_main_wrapper {
    background: linear-gradient(180deg, #070C16 0%, #04070F 100%) !important;
    border-top: 1px solid var(--tm-d-border);
}
.footer_main_wrapper p,
.wrapper_second_useful ul li a,
.wrapper_second_useful_2 ul li,
.copyright p { color: var(--tm-d-text-2) !important; }
.wrapper_second_useful h4 { color: #fff !important; font-weight: 700; }
.wrapper_second_useful ul li a:hover { color: #fff !important; }
.wrapper_second_useful ul li a i,
.wrapper_second_useful_2 ul li i { color: var(--tm-cyan) !important; }
.ft_about_icon i { color: var(--tm-cyan) !important; }
.ft_abt_text_wrapper .timer { color: #fff !important; font-family: var(--tm-mono); font-weight: 700; }
.ft_abt_text_wrapper h4 { color: var(--tm-d-text-2) !important; }
.copyright_wrapper { border-top: 1px solid var(--tm-d-border); }

/* ==========================================================================
   11. MOTION — subtle, respects reduced-motion
   ========================================================================== */
@keyframes tmFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.tm-reveal { opacity: 0; }
.tm-reveal.tm-in { animation: tmFadeUp .6s cubic-bezier(.22,.61,.36,1) forwards; }

#return-to-top {
    background: var(--tm-grad) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(37,99,235,.4) !important;
    transition: transform .2s ease;
}
#return-to-top:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .tm-reveal { opacity: 1 !important; }
}

/* ==========================================================================
   12. RESPONSIVE — nothing overflows, tables scroll, cards stack
   ========================================================================== */
img, svg, video { max-width: 100%; height: auto; }
.l-main, .account_wrapper, .crm_customer_table_main_wrapper { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; overflow-x: auto; }

@media (max-width: 1199px) {
    .investment_box_wrapper { padding: 22px !important; }
}
@media (max-width: 991px) {
    .account_top_information { border-radius: var(--tm-radius-sm) !important; }
    .investment_icon_wrapper i { width: 46px; height: 46px; font-size: 22px; }
    .sv_heading_wraper h3 { font-size: 20px; }
}
@media (max-width: 767px) {
    .page_header h1 { font-size: 26px !important; line-height: 32px !important; }
    .investment_box_wrapper { padding: 20px !important; }
    .userdescc dd { word-break: break-word; }
    .change_password_wrapper, .change_password_wrapper.box-bg, .payment_transfer_Wrapper { padding: 20px !important; }
    .myTable.table thead th, .myTable.table tbody td { padding: 11px 12px !important; font-size: 13px; }
}
@media (max-width: 575px) {
    .page_header h1 { font-size: 23px !important; }
    .btn.btn-primary, a.btn.btn-primary { padding: 11px 20px; }
    .account_top_information { padding: 18px !important; }
}

/* ==========================================================================
   13. CONSISTENCY PASS — make EVERY dashboard page match (added after review
   of live screenshots: broken icons, light MLM widgets, low-contrast tables)
   ========================================================================== */

/* sidebar Font Awesome icons — uniform size & active pill */
.l-sidebar .c-menu__item__inner i.fas,
.l-sidebar .crm_navi_icon i.fas {
    color: var(--tm-cyan) !important;
    font-size: 17px !important;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(6,182,212,.10);
    border: 1px solid rgba(6,182,212,.22);
    border-radius: 11px;
    transition: all .2s ease;
}
.c-menu > ul:hover .crm_navi_icon i.fas {
    background: var(--tm-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* section wrappers that were purple/transparent -> transparent on navy */
.last_transaction_wrapper,
.last_transaction_wrapper.float_left,
.last_transaction_wrapper.bg-purple {
    background: transparent !important;
}

/* ---- Profile / Referral summary boxes (.view_profile_wrapper.box-bg) ---- */
.view_profile_wrapper,
.view_profile_wrapper.box-bg,
.view_profile_wrapper_top {
    background: var(--tm-d-surface) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: 0 8px 26px rgba(2,6,23,.30);
    padding: 26px !important;
}
.profile_list .detail_left_part,
.referal_list .detail_left_part,
.detail_left_part { color: var(--tm-d-text-2) !important; font-weight: 500; }
.profile_list .detail_right_part,
.referal_list .detail_right_part,
.detail_right_part { color: #fff !important; font-weight: 600; }
.profile_list li,
.referal_list li { border-bottom: 1px solid rgba(148,163,184,.10); }

/* ---- Dashboard MLM widgets (override the light inline <style>) ---------- */
.user-mlm-info {
    background: transparent !important;
    padding: 0 !important;
    margin: 8px 0 !important;
    border: none !important;
}
.user-mlm-info > h3,
.user-mlm-info h4,
.direct-referrals h4,
.referral-links h4 { color: #fff !important; font-weight: 700; }

.mlm-stats { gap: 18px !important; margin: 16px 0 !important; }
.mlm-stats .stat-item,
.stat-item {
    background: var(--tm-d-surface) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 20px 22px !important;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease;
}
.mlm-stats .stat-item::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--tm-grad);
}
.mlm-stats .stat-item:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.5) !important; }
.stat-item label { color: var(--tm-d-text-2) !important; font-weight: 600 !important; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.stat-item span { color: #fff !important; font-family: var(--tm-mono); font-size: 26px; font-weight: 700; display: block; margin-top: 6px; }

/* referral link copy rows */
.referral-links { margin: 22px 0 !important; }
.link-item {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--tm-d-surface) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 16px 18px !important;
    margin: 12px 0 !important;
}
.link-item label { color: var(--tm-d-text-2) !important; font-weight: 600; min-width: 86px; margin: 0; }
.mlm-copy-btn {
    background: var(--tm-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 6px 16px rgba(37,99,235,.30);
}
.mlm-copy-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,99,235,.42); }
.mlm-copy-status { color: var(--tm-success) !important; font-weight: 600; font-size: 13px; }

/* network downline slots */
.direct-referrals { margin-top: 22px !important; }
.referral-slots { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 18px; }
.referral-slots .slot,
.referral-slots > div {
    background: var(--tm-d-surface) !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 18px 20px !important;
}
.referral-slots h5 { color: #fff !important; font-weight: 700; margin-bottom: 10px; }
.mlm-tree-list, .mlm-tree-list li { color: var(--tm-d-text) !important; }
.mlm-tree-list li { padding: 6px 0; border-bottom: 1px dashed rgba(148,163,184,.14); }

/* ---- Table contrast hardening (referral / earning tables were faint) --- */
.crm_customer_table_inner_Wrapper,
.crm_customer_table_inner_Wrapper td,
.crm_customer_table_inner_Wrapper th,
.width_table1,
table.datatables td, table.datatables th,
.myTable.table td, .myTable.table th { color: var(--tm-d-text) !important; }
.crm_customer_table_inner_Wrapper thead th,
table.datatables thead th { color: #fff !important; }
.crm_customer_table_inner_Wrapper tbody tr:hover { background: rgba(37,99,235,.10) !important; }

/* ---- Faint helper / note text (daily-earning rate note, small print) --- */
.l-main small,
.l-main .text-muted,
.l-main p.note,
.account_wrapper small { color: var(--tm-d-text-2) !important; }
.l-main small b, .l-main small strong { color: var(--tm-cyan) !important; }

/* "Activate Today's Earning" style button stays vivid but on-theme */
.l-main .btn.btn-danger,
.l-main a.btn-danger,
.l-main button.btn-danger {
    background: linear-gradient(135deg,#F59E0B,#EF4444) !important;
    border: none !important; color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(239,68,68,.30) !important;
}

/* "No earnings yet." / empty states */
.l-main .no-data, .l-main td[colspan] { color: var(--tm-d-text-2) !important; }

/* Edit Profile button (was black pill) -> gradient */
.view_profile_wrapper .btn,
.edit_profile_btn a,
a.edit_profile_btn { background: var(--tm-grad) !important; color: #fff !important; border-radius: 12px !important; }

/* ==========================================================================
   14. NAVBAR DROPDOWN FIX (was see-through) + PUBLIC "ROYAL" WHITE THEME
       + LOGIN/REGISTER blue panel. Added after live review of screenshots.
   ========================================================================== */

/* ---- 14a. Dropdown: force SOLID opaque panel + high z-index ------------- */
.cp_navigation_wrapper .navi_2_dropdown,
.mainmenu ul li .navi_2_dropdown,
.navi_2_dropdown {
    background: #0B1220 !important;
    background-color: #0B1220 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(2,6,23,.7) !important;
    z-index: 99999 !important;
    padding: 10px !important;
    overflow: visible;
}
.navi_2_dropdown:after,
.navi_2_dropdown:before { display: none !important; }

.mainmenu ul li .dropdown-menu-right,
.navi_2_dropdown .dropdown-menu-right {
    background: #0B1220 !important;
    background-color: #0B1220 !important;
    border: 1px solid var(--tm-d-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 60px rgba(2,6,23,.7) !important;
    z-index: 100000 !important;
    padding: 8px !important;
    margin-left: 6px;
}
.navi_2_dropdown li,
.dropdown-menu-right li { padding-left: 0 !important; }
.navi_2_dropdown li a,
.dropdown-menu-right li a {
    color: #CBD5E1 !important;
    border-radius: 9px !important;
    padding: 10px 14px !important;
    display: block;
    transition: background .18s ease, color .18s ease;
}
.navi_2_dropdown li a:hover,
.navi_2_dropdown .parent > a:hover,
.dropdown-menu-right li a:hover {
    background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(6,182,212,.22)) !important;
    color: #fff !important;
}
.navi_2_dropdown li a i,
.dropdown-menu-right li a i { color: var(--tm-cyan) !important; }
/* keep the desktop dropdown above page content */
.mainmenu, .cp_navigation_wrapper { position: relative; z-index: 9999; }

/* ---- 14b. LOGIN / REGISTER side panel: purple -> brand blue ------------- */
.login_banner_wrapper {
    background: linear-gradient(150deg, #2563EB 0%, #1D4ED8 45%, #06B6D4 100%) !important;
}
.login_banner_wrapper * { color: #fff !important; }

/* ==========================================================================
   15. PUBLIC MARKETING PAGES — clean white + blue (royal), readable text
   (home / about / contact). Dashboard stays dark; these are OUTSIDE .l-main)
   ========================================================================== */

/* light section base text colour so nothing is invisible */
.bg-light,
.our_services_wrapper,
.contact_section,
.about_main_wrapper,
.our_services_wrapper.bg-light { color: var(--tm-text); }

/* headings on light sections -> navy (were white = invisible) */
.bg-light .heading_wrapper_dark h3,
.our_services_wrapper .heading_wrapper_dark h3,
.our_services_wrapper .sv_heading_wraper h3,
.contact_section .sv_heading_wraper h3,
.contact_section .heading_wrapper_dark h3 { color: var(--tm-navy) !important; }
/* eyebrow (get in touch / services / features) stays brand blue */
.our_services_wrapper .heading_wrapper_dark h4,
.contact_section .heading_wrapper_dark h4,
.bg-light .heading_wrapper_dark h4 { color: var(--tm-primary) !important; letter-spacing: .14em; }
/* underline accent under section titles -> brand gradient */
.heading_wrapper_dark h3:after { background: var(--tm-grad) !important; }

/* public service / feature / mission cards -> premium white card */
.service_box,
.feature_box,
.our_services_wrapper .investment_box_wrapper {
    background: #FFFFFF !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 30px rgba(15,23,42,.08) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.service_box:hover,
.feature_box:hover,
.our_services_wrapper .investment_box_wrapper:hover {
    transform: translateY(-6px);
    border-color: rgba(37,99,235,.45) !important;
    box-shadow: 0 18px 44px rgba(15,23,42,.14) !important;
}
/* card titles & text -> dark navy / slate (were white) */
.our_services_wrapper .investment_content_wrapper h1,
.our_services_wrapper .investment_content_wrapper h1 a,
.service_box .investment_content_wrapper h1 a,
.feature_box .investment_content_wrapper h1 a { color: var(--tm-navy) !important; }
.our_services_wrapper .investment_content_wrapper h1 a:after { background: var(--tm-grad) !important; }
.our_services_wrapper .investment_content_wrapper p,
.service_box p, .feature_box p { color: var(--tm-text-2) !important; }
/* card icons -> brand blue */
.service_box i, .feature_box i,
.our_services_wrapper .investment_icon_circle i,
.our_services_wrapper .investment_box_wrapper i { color: var(--tm-primary) !important; }

/* "OUR STORY" / about story card on white */
.about_main_wrapper, .about_story_wrapper { color: var(--tm-text); }
.about_main_wrapper h3, .about_story_wrapper h3 { color: var(--tm-navy) !important; }

/* ---- Contact form (light page): visible white inputs, dark text -------- */
.contact_section .form-control,
.contact_section input[type="text"],
.contact_section input[type="email"],
.contact_section input[type="tel"],
.contact_section textarea,
.wpcf7 .form-control,
.wpcf7-form input.wpcf7-form-control:not([type="submit"]),
.wpcf7-form textarea {
    background: #FFFFFF !important;
    border: 1px solid var(--tm-border) !important;
    color: var(--tm-text) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
}
.contact_section .form-control::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: #94A3B8 !important; }
.contact_section .form-control:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: var(--tm-primary) !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.15) !important;
}
.wpcf7-submit, .contact_section .btn {
    background: var(--tm-grad) !important; color: #fff !important;
    border: none !important; border-radius: 12px !important;
    padding: 12px 30px !important; box-shadow: 0 8px 20px rgba(37,99,235,.32) !important;
}

/* broken/empty reward images on My Rank -> graceful gradient placeholder */
.l-main img[alt]:not([src]),
.l-main img[src=""] {
    background: var(--tm-grad);
    border-radius: 12px;
}

/* About counter circles keep their colour but numbers readable */
.counter_cntnt_box h1, .counter_cntnt_box h2, .counter_cntnt_box .timer { color: #fff !important; }

/* ==========================================================================
   16. DROPDOWN HOVER BEHAVIOR FIX — first-level "Dashboard" menu AND its
       nested flyouts (My Account/Finance/Reports/Referrals -> sub-items)
       now reliably open on hover. Legacy only toggled display, but items
       were hidden via opacity/visibility, so they never appeared.
   ========================================================================== */

/* the parent <li> must be positioned so the flyout anchors to it */
.cp_navigation_wrapper .mainmenu ul li.has-mega { position: relative; }
.cp_navigation_wrapper .navi_2_dropdown li.parent { position: relative; }

/* ---- First level: the Dashboard dropdown panel --------------------------- */
.cp_navigation_wrapper .navi_2_dropdown {
    display: block !important;            /* visibility handled by opacity below */
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    min-width: 230px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease, top .22s ease;
}
.cp_navigation_wrapper .mainmenu ul li.has-mega:hover > .navi_2_dropdown,
.cp_navigation_wrapper .mainmenu ul li:hover > .navi_2_dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    top: 100% !important;
}

/* ---- Second level: flyout sub-menus (open to the right) ------------------ */
.cp_navigation_wrapper .navi_2_dropdown li.parent > .dropdown-menu-right,
.cp_navigation_wrapper .mainmenu ul li .dropdown-menu-right {
    display: block !important;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 0 !important;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.cp_navigation_wrapper .navi_2_dropdown li.parent:hover > .dropdown-menu-right,
.cp_navigation_wrapper .mainmenu ul li.parent:hover > .dropdown-menu-right {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* small invisible bridge so the pointer can cross the gap into the panel */
.cp_navigation_wrapper .mainmenu ul li.has-mega:hover > .navi_2_dropdown::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -16px; height: 16px;
}
/* caret on the Dashboard link rotates when open (nice touch) */
.cp_navigation_wrapper .mainmenu ul li.has-mega:hover > a .fa-caret-down {
    transform: rotate(180deg);
    transition: transform .2s ease;
}

/* ==========================================================================
   17. ICON FIX — theme bundles Font Awesome 5 (not 6). Ensure sidebar icons
       use the FA5 font, and provide glyph fallbacks for any FA6-only names
       so icons render even if only this CSS file is updated.
   ========================================================================== */

/* force the FA5 Free solid font on all sidebar / dashboard <i> icons */
.l-sidebar i,
.l-sidebar .crm_navi_icon i,
.l-sidebar .c-menu__item__inner i,
.c-menu i {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
}

/* FA6-only names -> FA5 glyph fallbacks (so old markup still shows an icon) */
.fa-gauge-high:before          { content: "\f3fd" !important; } /* tachometer-alt */
.fa-circle-dollar-to-slot:before { content: "\f53a" !important; } /* money-bill-wave */
.fa-money-bill-transfer:before { content: "\f53d" !important; } /* money-check-alt */
.fa-rectangle-list:before      { content: "\f46d" !important; } /* clipboard-list */
.fa-clock-rotate-left:before   { content: "\f1da" !important; } /* history */
.fa-shield-halved:before       { content: "\f3ed" !important; } /* shield-alt */
.fa-arrow-right-arrow-left:before { content: "\f362" !important; } /* exchange-alt */
.fa-table-cells-large:before   { content: "\f009" !important; } /* th-large */
.fa-money-bill-trend-up:before { content: "\f53a" !important; } /* money-bill-wave */
.fa-circle-user:before         { content: "\f2bd" !important; } /* user-circle */
