@charset "utf-8";

*{margin:0px; padding:0px;}


input[type=password]::-ms-reveal,
input[type=password]::-ms-clear
{
    display: none;
}
:root{
    --primary: #f48120;
    --bs-primary: #f48120;
 
}
.pagination{
   --bs-link-hover-color: #f48120;
    --bs-pagination-active-bg: #f48120;
    --bs-pagination-active-border-color: #f48120;
    --bs-pagination-color: #000;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #f48120;
  --bs-btn-border-color: #f48120;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #eb720d;
  --bs-btn-hover-border-color: #eb720d;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #eb720d;
  --bs-btn-active-border-color: #eb720d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #eb720d;
  --bs-btn-disabled-border-color: #eb720d;
}
.btn-outline-primary {
  --bs-btn-color: #f48120;
  --bs-btn-border-color: #f48120;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #eb720d;
  --bs-btn-hover-border-color: #eb720d;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #eb720d;
  --bs-btn-active-border-color: #eb720d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #eb720d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #eb720d;
  --bs-gradient: none;
}



html{overflow-x: hidden;}
body{overflow-x: hidden; min-height: 100vh; font-size: 14px; color: #000; background-color: #f9f9fb; font-family: "Poppins", sans-serif; font-weight: 400;}
a, a:active, a:focus, a:hover {outline: none; transition: all 0.5s ease; text-decoration: none;}
button, button:active, button:focus, button:hover {outline: none; box-shadow:none; transition: all 0.5s ease; text-decoration: none;}
.container{max-width: 1420px;}
.container-fluid{padding: 0px 20px;}

.btn-width-1{min-width: 120px;}
.btn-width-2{min-width: 150px;}
.btn-width-3{min-width: 180px;}

.fs-7{font-size: .8rem !important;}
.fs-8{font-size: .8rem !important;}
.pointer{cursor: pointer;}

.opacity-10{opacity: .10;}
.opacity-20{opacity: .20;}

.icon-200{width: 200px;}
.icon-150{width: 150px;}
.icon-140{width: 140px;}
.icon-130{width: 130px;}
.icon-110{width: 110px;}
.icon-120{width: 120px;}
.icon-100{width: 100px;}
.icon-90{width: 90px;}
.icon-80{width: 80px;}
.icon-70{width: 70px;}
.icon-60{width: 60px;}
.icon-50{width: 50px;}
.icon-40{width: 40px;}
.icon-30{width: 30px;}
.icon-35{width: 35px;}
.icon-25{width: 25px;}
.icon-20{width: 20px;}
.icon-15{width: 15px;}
.icon-10{width: 10px;}

.max-200{max-width: 200px;}
.max-300{max-width: 300px;}
.max-400{max-width: 400px;}
.max-500{max-width: 500px;}
.max-600{max-width: 600px;}
.max-600{max-width: 600px;}
.max-700{max-width: 700px;}
.max-800{max-width: 800px;}
.max-900{max-width: 900px;}
.max-1000{max-width: 1000px;}
.max-1100{max-width: 1100px;}
.max-1200{max-width: 1200px;}
.max-1300{max-width: 1300px;}

.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}

.leverate_box .container{max-width: 100%; padding: 0;}
.leverate_box .container .pt-4{padding-top: 0 !important;}
.leverate_box .container .pb-4{padding-bottom: 0 !important;}

.header_bg{position: absolute; left: 0; right: 0; top: 60px; z-index: -1; background: url(../img/back_light.png),radial-gradient(50% 50% at center top,#f38121 0%,#f9f9fb 100%); background-size: 100% 100%; height: 300px;}
.header_padding{padding-top: 65px;}
.header_logo{width: 180px;}

.welcome_box{min-height: calc(100vh - 250px);}
.box-link:hover{cursor: pointer; background: #f5f5f5}

.menu_link{padding: 0px; margin: 0px; list-style: inside;}
.menu_link li{margin-right: 25px;display: inline-block; position: relative;}
.menu_link li::before{background: #d6dae1; border-radius: 1px; content: ""; height: 16px; margin: auto;position: absolute;right: -14px;top: 6px; width: 2px;}
.menu_link li:last-child{margin-right: 0;}
.menu_link li:last-child::before{display: none;}
.menu_link li a{color: #8590a6; text-decoration: none;}
.menu_link li a:hover{color: rgba(var(--bs-primary-rgb))}

.top-header{border-bottom: 1px solid #cccccc40;}
footer{border-top: 1px solid #cccccc73;}

.slick-slide > div{padding: 15px 5px;}
.slick-prev::before, .slick-next::before{color: #000 !important; border: 1px solid #031c34; height: 40px; width: 40px; display: flex; border-radius: 5px; align-items: center; justify-content: center;}
.slick-prev {left: -40px !important;}

.card_height{min-height: 250px; box-shadow: rgb(230, 233, 246) 0px 6px 12px 0px; border-radius: 15px !important;}
.card_height .icon-60{margin: auto;}
.dropdown-item{cursor: pointer;}

.login-view{width: 100%;}
.form-label{font-weight: 600;}
.form-control::placeholder {opacity: .4;}

.form-control:focus{box-shadow: none;}
.form-control {padding: .675rem .75rem; font-size: 14px;}
.css-13cymwt-control{border: var(--bs-border-width) solid var(--bs-border-color) !important; min-height: 44px !important;}
.form-control:focus{border-color: #ccc;}
.form-select:focus{box-shadow: none;}
.form-select {padding: .675rem .75rem; font-size: 14px;}
.cursor-pointer{cursor: pointer;}

.eye_show_box{position: absolute; right: 16px; top: 12px; cursor: pointer;}
.theme_color{color: #f48120;}



.nav.nav-tabs{margin-bottom: 15px;}

.btn-toggle-nav li a{padding: 7px 15px; transition: unset; border-radius: 8px; overflow: hidden; position: relative; font-weight: 500; color: #505050; display: block;}
.btn-toggle-nav li a.active{background: #eeeef0; color: #000;}
.btn-toggle-nav li a:hover{background: #eeeef0; color: #000;}

.btn-toggle-nav li a::after{content: ""; opacity: 0; background-image: linear-gradient(to right, #142b23 0%, #f48120 51%, #142b23 100%);
  background-size: 200% 100%; width: 6px; position: absolute; left: -3px; top: 8px; bottom: 8px; border-radius: 16px;}
.btn-toggle-nav li a.active::after{opacity: 1;}
.btn-toggle-nav li a:hover::after{opacity: 1;}




.app_menu_list{ margin: 0;padding: 0; }
.app_menu_card .nav-item .nav-link{display: block;}
.app_menu_card .nav-item .nav-link{display: block; overflow: hidden; margin-bottom: 2px; margin-top: 2px; cursor: pointer; position: relative; color: #000 !important; width: 100%;  border-radius: 10px !important; padding: 7px 15px;}
.app_menu_card .nav-item .nav-link i {margin-right: 8px;font-size: 16px;}
.app_menu_card .nav-item .nav-link.active{background: #e5e4ec}
.app_menu_card .nav-item .nav-link:hover{background: #d1d3d747;}

.card-outer{background-color: #fafafc; padding: 20px 20px; border-radius: 15px;}

.arrow_list{list-style: none; padding: 0px; margin: 0px;}
.arrow_list li{ padding-right: 15px; font-weight: 600; padding-left: 30px; position: relative; margin-bottom: 10px;}
.arrow_list li::before{content: ""; filter: brightness(0) invert(0); background: url(../img/icon/check-mark.png) no-repeat; position: absolute; left: 0; top: 1px; height: 17px; width: 17px; background-size: contain;}
.arrow_list li:last-child{margin-bottom: 0;}

.card-header{background: transparent;}
.form-control.otp{margin: 0px 6px; width: 40px !important;}
.language-100 .btn{width: 100%;}
.inner_box_bg{ background: #f3812157; border-radius: 15px;}
.inner_box_bg .opacity-50{opacity: .9 !important;}

.login_box_width{outline: rgba(0, 0, 0, 0.05) solid 0.0625rem; z-index: 11; position: relative; max-width: 500px; background:#fff; box-shadow: rgba(0, 0, 0, 0.02) 0rem 1.625rem;   margin: auto;  border-radius: 30px; padding: 25px;}
.login_box_width.register_box_width{max-width: 650px;}

.login_header{background: #fff; border-bottom: 1px solid #e5ecf2; z-index: 11; position: fixed; left: 0; right: 0; top:0; padding: 13px 0px;}
.login_background{height: 100%; border-radius: 0px; left: 0;  right: 0; top: 0;  mask-image: linear-gradient(rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%), linear-gradient(to left, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%); mask-composite: intersect; width: 100%; position: absolute;}
.login_background img{width: 100%; height: 100%;}
.login_box{position: relative;}

.circle-icon{border-radius: 50px; background: rgba(143, 131, 229, 0.2); width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;}
.left-wallet-balance-bg{background: linear-gradient(105.4deg, rgba(0, 98, 255, 0.11) 0%, rgba(1, 188, 53, 0.04) 98.37%); border: 1px solid rgba(0, 98, 255, 0.16);}

.card {border-radius: 12px; box-shadow: rgb(230, 233, 246) 0px 2px 12px 0px; width: 100%; border: 1px solid #ccccccab;} 

.quick_action_box{background-image: linear-gradient(319.99deg, rgba(245, 167, 31, 0.79) 8.82%, rgb(247, 176, 84) 120.87%); border-radius: 10px;}
.quick_action_link{background: #ffffff38; cursor: pointer; padding: 10px 20px; border-radius: 5px;}
.quick_action_link h5{font-size: 14px;}

.gateway_tab{padding: 10px 15px; font-size: 17px; cursor: pointer; position: relative; border-radius: 10px; background: #cccccc96; border: 1px solid transparent;}
.gateway_tab.gateway_active::before{content: ""; height: 22px; width: 22px; position: absolute; right: -7px; top: -7px; background: url(../img/active-check.png) no-repeat; background-size: cover;}
.gateway_tab.gateway_active{border: 1px solid #f48120; background: #f481202b;}

.table > :not(caption) > * > * {padding: .7rem .7rem; border: none;}


.table > tbody {vertical-align: middle;}




.check_list{padding: 0px; margin: 0px; list-style: none;}
.check_list li{position: relative; font-size: 15px; padding-left: 35px; margin-bottom: 15px;}

.check_list li:last-child{margin-bottom: 0px;}
.btn.disabled {opacity: .4;}



.nav-tabs .nav-link {border: 1px solid #c4c4c4; font-weight: 500; color: #000; border-radius: 8px; padding: 8px 18px; min-width: 60px;}
.nav-tabs .nav-link:hover{border: 1px solid #f48120; background: transparent;}
.nav-tabs{padding-bottom: 10px;}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
 background-size: 200% 100%;
  transition: all .5s; color: #fff; 
  border: none;
  background: #f48120 ;
}
.action_dropdown{background: transparent; border: none; font-size: 20px;}

.tab1-style .nav-link{border-radius: 0px; position: relative; border: 2px solid transparent !important;}
.tab1-style .nav-link.active{color: #f48120;background: transparent;}
.tab1-style .nav-link.active::before{content: ""; background: #f48120; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;}
.tab1-style .nav-link.active:hover{color: #f48120;}
.tab1-style .nav-link:hover{border: 2px solid transparent !important;}
.tab1-style{margin-bottom: 10px !important;}

.nav-tabs:hover{background-position: 100% 0; color: #fff;}

.alert .form-check {padding-left: 0 !important;}

.check-width-50 .form-check-inline{width: 45%; margin-bottom: 15px;}
.form-check-input {width: 1.3em; height: 1.3em; margin-top: 2px; margin-right: 10px; border: var(--bs-border-width) solid #a7a8a8;}
.form-check {padding-left: 2em;}

.kycaccordion .accordion-button{font-weight: 600; padding: 0; background: transparent}
.accordion-button:focus{outline: none; box-shadow: none; box-shadow: none !important; background: transparent !important; border-radius: inherit;}
.accordion-item{margin-bottom: 15px; position: relative; padding: 18px; overflow: hidden; border: 1px solid #e7e7e7 !important; border-radius: 15px !important;}
.accordion-body{padding: 0;margin-top: 20px; border-top: 1px solid #cccccc4a; padding-top: 20px;}
.accordion-button:not(.collapsed){background: transparent; box-shadow: none;}
.identity_icon {width: 52px; color: #000; padding: 12px; height: 52px; margin-right: 16px; flex-shrink: 0; display: flex; justify-content: center;  align-items: center; border-radius: 50%; background-color: rgba(29, 29, 29, 0.04);}
.identity_icon img{width: 100%; filter: brightness(0) invert(0);}
.btn-light {border: 1px solid #d8d8d8; background: transparent;}


.front-back-box{border: 1px solid #4b556333; text-align: center; cursor: pointer; padding: 1.5rem; width: 180px; height: 180px; border-radius: 10px;}
.front-back-box:hover{background: #f5f0fe;}
.accordion-button:not(.collapsed) {color: var(--bs-accordion-btn-color);}
.ribbon-wrapper {position: absolute; top: -5px; right: 8px;}
.ribbon-wrapper .ribbon-section {border-radius: 10px; color: #fff; text-align: center; padding: 5px 0;  width: 120px; font-size: 10px; font-weight: 600;}
.ribbon-section.kyc-approved{background: #1E93064F; color: #1E9306}
.ribbon-section.kyc-pending{background: #bd9a2c6e; color: #bd9a2c;}
.ribbon-section.kyc-rejected{background: #BD10214D; color: #BD1021;}
.ribbon-section.kyc-not-Uploaded{background: #908e8e4d; color: #908e8e;}
.ribbon-section.recent-active{background-image: linear-gradient(to right, #142b23 0%, #f48120 51%, #142b23 100%);
  background-size: 200% 100%;}

.modal-title{font-size: 17px !important;}
.document-img-w{width: 50px;}

.avtar-circle {position: relative; width: 40px; height: 40px; border-radius: 50%; text-align: center;  font-size: 16px; font-weight: 500; display: flex; align-items: center; justify-content: center; transition: 0.3s;}
.avtar-circle:hover {background: #f5f0fe5c;}
.avtar-circle img{width: 100%; border-radius: inherit; height: 100%;}

.bell-circle {border: 1px solid rgba(0, 0, 0, 0.12); background: #f9f9f9; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center;}
.bell-circle:hover{color: #f48120;}


.notification_count{background: #f48120; color: #fff; border-radius: 50%; height: 17px; width: 17px; font-size: 10px; display: flex; align-items: center; justify-content: center; position: absolute; right: 3px; top: 8px;}

.Verification_bgbox{padding: 20px; border-radius: 10px; width: 410px;}
.Verification_bgbox.bg-danger{background: #fde8e9 !important;}
.Verification_bgbox.bg-success {background: #ddecd2 !important;}
.Verification_bgbox_icon{width: 65px;}

.offcanvas-header .btn-close {display: flex; opacity: 1; align-items: center; justify-content: center; z-index: 1000; border-radius: 100%; cursor: pointer;}
.offcanvas-header .btn-close:hover { transform: rotate(-90deg);}
.offcanvas-end{box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; border: none !important;}
.Notification_box{box-shadow: rgb(230, 233, 246) 0px 6px 12px 0px; background-color: rgba(255, 255, 255, 0.65); padding: 20px; border-radius: 30px;}



.dropdown-link{display: block; color: #000; padding: 11px 15px; margin-bottom: 3px; width: 100%; background: transparent; border: none; text-align: left; font-weight: 500;  font-size: 14px; }
.dropdown-link:hover{background:#e8e8e8; color: #f48120;}
.dropdown-link.active{background: #e8e8e8; color: #f48120;}


.paymentsetting_box{background:linear-gradient(270.03deg, rgb(230, 230, 230) 2.03%, rgba(79, 119, 84, 0.25) 97.04%); position: relative; padding: 20px; border-radius: 10px;}
.paymentsetting_box .table-crypto{width: 45px; height: 45px;}
.paymentsetting_box .wallet-btn{padding: 5px 12px; display: inline-block; font-size: 13px; background:rgba(29, 29, 29, 0.1);  border-radius: 20px; cursor: pointer;}
.paymentsetting_box .wallet-btn:hover{background: rgba(29, 29, 29, 0.17);}
.paymentsetting_box_btm{margin-top: 20px;}

.qr_code_box{border: 1px solid #4b556333; margin: auto; text-align: center; cursor: pointer; padding: 5px; width: 150px; height: 150px; border-radius: 10px;}
.qr_code_box:hover{background: #fff;}



.wallet_bg{background: linear-gradient(270.03deg, rgba(255, 186, 211, .25) 2.03%, rgba(186, 134, 253, .25) 97.04%); box-shadow: 0px 0px 6px 2px #ccc; border-radius: 20px;}

.wallet_border_box{border: 2px dashed #fff; padding: 15px 20px; border-radius: 20px; background: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #373ecc, #7441d9, #aa44e4, #7441d9); background-clip: padding-box,border-box; background-origin: padding-box,border-box;}
.wallet_border_box .wallet_address{cursor: pointer; color: #f48120a6;}
.wallet_border_box .wallet_address span{background-color: #fdfcfc; color: #f48120; border-radius: 50px; border: 1px solid #c7d4dd;width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; cursor: pointer; }


.pagination .page-link{padding: 3px 10px;}
.no-data-found-img{width: 100px;}


.app-icon{width: 60px;}
.dashboard-user{width: 45px; font-size: 20px; height: 45px; border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center;}
.dashboard-lien-box{padding: 30px 33px; z-index: 1; border-radius: 10px; background: linear-gradient(105.4deg, rgba(0, 98, 255, 0.11) 0%, rgba(1, 188, 53, 0.04) 98.37%); border: 1px solid rgba(0, 98, 255, 0.16); position: relative; overflow: hidden;}

.crypto-fiat-w{margin-right: 48px; flex: 1 1 0%;}
.crypto-fiat-arrow{border: 1px solid rgba(29, 29, 29, 0.12); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;}
.uid-lien{border-left: 1px solid #cccccc94;}

.not-found-img{width: 100%;}
.profile_img{width: 80px; height: 80px; margin: auto;  position: relative; font-size: 40px; background-image: linear-gradient(to right, #142b23 0%, #f48120 51%, #142b23 100%);
  background-size: 200% 100%; color: #fff;  border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center;}
.profile_img img{width: 100%; height: 100%; border-radius: inherit;}
.profile_img-edit{border: 1px solid rgba(29, 29, 29, 0.12); position: absolute; right: 0; top: 0; background: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;}

.loader-container {position: fixed; display: none; animation: fadeOut 2s ease 2s forwards; top: 0; left: 0; z-index: 9999; right: 0; bottom: 0; background: #0000007a; display: flex; align-items: center;justify-content: center;}
.loader-container .loader::before, .loader-container .loader::after { content: ''; height: 0px; width: 0px; background-color: white; position: absolute; -webkit-transition: height .5s; transition: height .5s;}
.loader-container .loader {border: 3px solid #f3f3f3;border-top: 3px solid #f48120; border-radius: 50%; width: 35px; height: 35px; animation: spin 2s linear infinite; margin: 0 auto; transition: all .5s ease-out; position: relative; display: flex; justify-content: center; align-items: center;}
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
label {font-weight: 500;}
.checkbox {opacity: 0; position: absolute;}
.checkbox-label { background-color: #ddd; width: 45px; height: 22px; border-radius: 50px; position: relative; padding: 5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;}
.checkbox-label .ball { background-color: #8b8b8b; width: 18px; height: 18px; position: absolute; left: 2px; top: 2px; border-radius: 50%; transition: transform 0.2s linear;}
.checkbox:checked + .checkbox-label .ball {transform: translateX(24px);}
.checkbox-label i{margin-right: 0 !important; font-size: 14px !important;}

.document_input{border: 2px dashed #A2A2A2; position: relative; cursor: pointer; background: #FFFFFF; padding: 20px; min-height: 10.93rem; border-radius: 10px;}
.document_input_text{position: absolute; padding-top: 16px; left: 0; right: 0; margin: auto; text-align: center;}
.document_input .img-uplaod-height{width: 70px;}


.img-2x { width: 2rem; height: 2rem;}
.page-title{font-size: 21px;}
.title-text{margin-bottom: 20px;}

thead tr th{background-color: #f3f4f5  !important;}
thead tr th strong {font-weight: 500;}
.modal-body .modal-body{padding: 0;}
.c_card_box{background: #f3812157; border: none;}

.c_card_box.card-add{border: 1px solid #f48120; cursor: pointer; background: linear-gradient(146deg,rgba(247,166,0,.05) 22.28%,rgba(247,166,0,0) 61.15%),#fff;}

.c_card_box.card-deposit{border: 1px solid #44d40f; cursor: pointer; background: linear-gradient(146deg,rgba(66, 247, 0, 0.14) 22.28%,rgba(247,166,0,0) 61.15%),#fff}
.c_card_box.card-withdraw{border: 1px solid #dc3545; cursor: pointer; background: linear-gradient(146deg,rgba(220, 53, 69, 0.1) 22.28%,rgba(247,166,0,0) 61.15%),#fff;}
.menu-open .collapse{display: block;}
.menu-open .menu-arrow::before {
  transform: rotate(90deg);
}

.table:last-child{margin-bottom: 0;}
.account-tab img{width: 100px; transition: all 0.5s ease;}
.account-tab{align-items: center;}

.account-tab.nav-tabs .nav-link{padding: 7px 10px; position: relative;}
.account-tab.nav-tabs .nav-link.active{background: #fff; border: 1px solid #f48120;}

.package-box{border-radius: 15px; padding: 15px; border: 1px solid #f48120;
 background: linear-gradient(180deg,#f481202e,#fff);
  border-radius: 15px;}

.pl-title{font-weight: 500; font-size: 20px; text-align: center; background: #f38121; border-radius: 10px; color: #fff; padding: 5px;}

.pl-container_text1 {margin-bottom: 10px; font-size: 13px; color: #3e3d3d; border: 1px solid #8a8989; padding: 5px 15px; border-radius: 5px;}
.pl-container_text1:last-child{margin-bottom: 0px;}

.play-app-store-icon{display: flex; gap:6px; flex-wrap: wrap; padding: 0; margin: 0;}
.play-app-store-icon li{display: block;}
.play-app-store-icon li a{display: block; border: 2px solid #acaaab; width: 100px; border-radius: 5px;}
.play-app-store-icon li a img{width: 100%; border-radius: inherit;}
.flex-1{flex: 1 1 0%;}

.slick-dots li{margin: 0 !important;}
.slick-dots {position: unset !important;}



.chat-msg-box-shadow{height: 322px; overflow-x: auto;}
.chatListM_bg {background: #fff; border: 1px solid rgba(29, 29, 29, 0.1); cursor: pointer; padding: 10px; border-radius: 10px; margin-bottom: 10px;}
.chatListM_bg.chatListM_bg_active{background: #e3e3e3;}


 .chat-messages { display: flex; flex-direction: column; padding: 5px; overflow-y: auto; gap: 2px; height: 100%;}
 .user-message {display: flex;justify-content: end;}
 .user-message-text {display: inline-block; width: fit-content;border-radius: 5px;padding: 0.5rem; background: #e1e1e133; max-width: 16rem;}
 .wallet-address {word-wrap: anywhere;}
 .bot-message {display: flex; justify-content: start;flex-direction: column; gap: 2px;}
 .bot-message-text { width: fit-content; border-radius: 5px; padding: 0.5rem; background: #e1e1e133; max-width: 16rem;}
 .chat-input { display: flex; padding: 3px; gap: 3px;}
 .chat-input-input {flex-grow: 1; flex-shrink: 1; border: 2px black; border-radius: 5px; padding: 5px;}
 .chat-input-button {background: #333336; color: white; padding: 8px 20px; cursor: pointer; border: 0;}
 .chat-input-button:hover {background: #333336;}
 .chatBox {height: 60vh; display: flex; overflow: auto;}
 .chatRaise { justify-content: flex-end; display: flex; margin: 5px;}
 .chatRaiseM {display: none; justify-content: flex-end; display: flex; margin: 5px;}
 .chatHead {display: none;}
 .chatListM {display: block; opacity: 1;}
 .chat_ticket_h{height: 60vh;}
 @media only screen and (max-width: 990px) {
   .chatListM { z-index: 1; position: absolute !important; display: block; background: #000;height: inherit; min-width: 200px !important;}
   .card-task .emoji-task {display: block; gap: 5px; font-size: 15px; align-items: baseline;}
   .banner_graph {height: 100%;}
   .chatMsgM {width: 100% !important;}
   .chatRaise {display: none !important;}
   .chatRaiseM {display: block !important;}
   .chatHead {display: flex !important; justify-content: space-between; align-items: center;}
 }

.skiptranslate iframe{
  display: none;
}

.goog-te-gadget .goog-te-combo {
  font-size: 14px;
  padding: 8px;
  border-radius: 5px;
  border-color: #aaa;
}

.goog-logo-link {
    display:none !important;
} 
    
.goog-te-gadget{
    color: transparent !important;
    margin-bottom: -20px;
}

.goog-te-gadget span{
    display: none !important;
}

/* =========================================================
   THEME 2 — PREMIUM POLISH LAYER
   CSS-only elevation for primitives (cards, buttons, forms,
   tables, tabs, pagination, modals, dropdowns). No JSX edits.
   ========================================================= */
:root{
  --t2-primary: #f48120;
  --t2-primary-700: #d96a0d;
  --t2-primary-soft: #fff1e3;
  --t2-primary-grad: linear-gradient(135deg, #f59a3a 0%, #f48120 55%, #e56a0a 100%);
  --t2-surface: #ffffff;
  --t2-surface-2: #f7f8fb;
  --t2-bg: #f5f7fb;
  --t2-text: #0f172a;
  --t2-text-2: #475569;
  --t2-text-3: #94a3b8;
  --t2-border: #e5e7eb;
  --t2-border-soft: #eef0f4;
  --t2-r-sm: 10px;
  --t2-r-md: 14px;
  --t2-r-lg: 18px;
  --t2-r-xl: 22px;
  --t2-sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --t2-sh-sm: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --t2-sh-md: 0 10px 24px -12px rgba(15,23,42,.12), 0 4px 12px -6px rgba(15,23,42,.08);
  --t2-sh-lg: 0 24px 48px -20px rgba(15,23,42,.18), 0 8px 20px -8px rgba(15,23,42,.10);
  --t2-sh-primary: 0 10px 24px -10px rgba(244,129,32,.5), 0 2px 6px -2px rgba(244,129,32,.35);
  --t2-sh-primary-sm: 0 6px 14px -8px rgba(244,129,32,.45);
  --t2-ease: cubic-bezier(.2,.8,.2,1);
  --t2-dur: .22s;
}

/* ---- Base ---- */
body{
  background: var(--t2-bg);
  color: var(--t2-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a, a:active, a:focus, a:hover{transition: color var(--t2-dur) var(--t2-ease);}

/* ---- Typography helpers ---- */
h1,h2,h3,h4,h5,h6{color: var(--t2-text); letter-spacing: -.01em;}
.page-title{font-weight: 700; color: var(--t2-text);}
.theme_color{color: var(--t2-primary);}

/* ---- Buttons ---- */
.btn{
  border-radius: var(--t2-r-sm);
  font-weight: 600;
  padding: .55rem 1.1rem;
  transition: transform var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease), background var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease), border-color var(--t2-dur) var(--t2-ease);
  letter-spacing: .01em;
}
.btn:focus, .btn:focus-visible{box-shadow: 0 0 0 3px rgba(244,129,32,.22) !important;}
.btn-primary{
  background: var(--t2-primary-grad) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--t2-sh-primary-sm);
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: var(--t2-sh-primary);
  color: #fff !important;
}
.btn-primary:active{transform: translateY(0);}
.btn-primary:disabled, .btn-primary.disabled{
  background: #e5e7eb !important;
  color: #9ca3af !important;
  box-shadow: none;
  opacity: 1;
}
.btn-outline-primary{
  background: transparent !important;
  color: var(--t2-primary) !important;
  border: 1.5px solid var(--t2-primary) !important;
  box-shadow: none;
}
.btn-outline-primary:hover{
  background: var(--t2-primary-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-1px);
  box-shadow: var(--t2-sh-primary-sm);
}
.btn-light{
  background: var(--t2-surface) !important;
  border: 1px solid var(--t2-border) !important;
  color: var(--t2-text) !important;
  box-shadow: var(--t2-sh-xs);
}
.btn-light:hover{
  background: var(--t2-surface-2) !important;
  border-color: color-mix(in srgb, var(--t2-primary) 30%, var(--t2-border)) !important;
  transform: translateY(-1px);
  box-shadow: var(--t2-sh-sm);
}
.btn-lg{padding: .7rem 1.5rem; font-size: 15px;}
.btn-sm{padding: .35rem .75rem; font-size: 12.5px;}

/* ---- Cards ---- */
.card{
  background: var(--t2-surface);
  border: 1px solid var(--t2-border-soft);
  border-radius: var(--t2-r-lg);
  box-shadow: var(--t2-sh-sm);
  transition: box-shadow var(--t2-dur) var(--t2-ease), border-color var(--t2-dur) var(--t2-ease);
}
.card:hover{box-shadow: var(--t2-sh-md);}
.card .card-header{
  background: transparent;
  border-bottom: 1px solid var(--t2-border-soft);
  padding: 14px 20px;
  font-weight: 600;
}
.card .card-body{padding: 20px;}
.card .card-footer{
  background: transparent;
  border-top: 1px solid var(--t2-border-soft);
  padding: 14px 20px;
}
.card_height{
  border-radius: var(--t2-r-lg) !important;
  box-shadow: var(--t2-sh-sm);
  border: 1px solid var(--t2-border-soft);
  transition: transform var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease), border-color var(--t2-dur) var(--t2-ease);
}
.card_height:hover{
  transform: translateY(-3px);
  box-shadow: var(--t2-sh-md);
  border-color: color-mix(in srgb, var(--t2-primary) 28%, var(--t2-border-soft));
}
.card-outer{
  background: var(--t2-surface-2);
  border: 1px solid var(--t2-border-soft);
  border-radius: var(--t2-r-lg);
  box-shadow: var(--t2-sh-xs);
}
.c_card_box{
  position: relative;
  background-color: var(--t2-surface) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(247,248,251,.85) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--t2-primary) 6%, transparent) 0%, transparent 70%) !important;
  border-radius: 14px !important;
  border: 1px solid var(--t2-border-soft) !important;
  padding: 18px 20px !important;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 1px 2px rgba(15,23,42,.04),
    0 10px 30px -20px rgba(15,23,42,.15);
  transition:
    transform .25s var(--t2-ease),
    box-shadow .25s var(--t2-ease),
    border-color .25s var(--t2-ease);
}
.c_card_box::before{
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t2-primary) 90%, #fff) 0%, var(--t2-primary-700) 100%);
  pointer-events: none;
  opacity: .85;
  z-index: 1;
}
.c_card_box::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--t2-primary) 10%, transparent) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.c_card_box > *{position: relative; z-index: 2;}
.c_card_box:hover{
  transform: translateY(-2px);
  border-color: var(--t2-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,23,42,.04),
    0 18px 36px -18px rgba(15,23,42,.2);
}
/* Label (small muted text inside stat card) */
.c_card_box .color_A6B3C4,
.c_card_box .small.fw-bold,
.c_card_box > .d-flex.fw-bold.small{
  color: var(--t2-text-3) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px !important;
}
/* Value (h3/h4) */
.c_card_box h3,
.c_card_box h4,
.c_card_box .h3,
.c_card_box .h4{
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--t2-text) !important;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}

/* ---- Action variant cards (kept colored with tasteful accents) ---- */
.c_card_box.card-add{
  background-color: var(--t2-surface) !important;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--t2-primary) 10%, transparent) 0%, transparent 70%) !important;
  border: 1px solid color-mix(in srgb, var(--t2-primary) 30%, var(--t2-border-soft)) !important;
}
.c_card_box.card-add::before{background: linear-gradient(180deg, #fbbf24 0%, var(--t2-primary-700) 100%);}
.c_card_box.card-deposit{
  background-color: var(--t2-surface) !important;
  background-image: linear-gradient(135deg, rgba(34,197,94,.1) 0%, transparent 70%) !important;
  border: 1px solid rgba(34,197,94,.3) !important;
}
.c_card_box.card-deposit::before{background: linear-gradient(180deg, #4ade80 0%, #15803d 100%);}
.c_card_box.card-deposit::after{background: radial-gradient(120% 80% at 100% 0%, rgba(34,197,94,.12) 0%, transparent 60%);}
.c_card_box.card-withdraw{
  background-color: var(--t2-surface) !important;
  background-image: linear-gradient(135deg, rgba(239,68,68,.08) 0%, transparent 70%) !important;
  border: 1px solid rgba(239,68,68,.3) !important;
}
.c_card_box.card-withdraw::before{background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%);}
.c_card_box.card-withdraw::after{background: radial-gradient(120% 80% at 100% 0%, rgba(239,68,68,.12) 0%, transparent 60%);}
body.dark .c_card_box{
  background-color: var(--t2-surface) !important;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--t2-primary) 8%, transparent) 0%, transparent 70%) !important;
  border-color: var(--t2-border) !important;
}
body.dark .c_card_box .color_A6B3C4{color: var(--t2-text-3) !important;}
body.dark .c_card_box h3,
body.dark .c_card_box h4{color: var(--t2-text) !important;}

/* ---- Forms ---- */
.form-label{font-weight: 600; color: var(--t2-text); margin-bottom: 6px;}
.form-control, .form-select{
  padding: .65rem .85rem;
  font-size: 14px;
  border-radius: var(--t2-r-sm);
  border: 1px solid var(--t2-border);
  background: var(--t2-surface);
  color: var(--t2-text);
  box-shadow: var(--t2-sh-xs);
  transition: border-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease);
}
.form-control::placeholder{color: var(--t2-text-3); opacity: 1;}
.form-control:hover, .form-select:hover{border-color: color-mix(in srgb, var(--t2-primary) 25%, var(--t2-border));}
.form-control:focus, .form-select:focus{
  border-color: var(--t2-primary);
  box-shadow: 0 0 0 3px rgba(244,129,32,.18);
  outline: none;
}
.css-13cymwt-control{
  border: 1px solid var(--t2-border) !important;
  border-radius: var(--t2-r-sm) !important;
  min-height: 44px !important;
  background: var(--t2-surface) !important;
  box-shadow: var(--t2-sh-xs) !important;
}
.css-t3ipsp-control{
  border: 1px solid var(--t2-primary) !important;
  box-shadow: 0 0 0 3px rgba(244,129,32,.18) !important;
  border-radius: var(--t2-r-sm) !important;
}
.form-check-input{
  border: 1.5px solid #cbd5e1;
  transition: background var(--t2-dur), border-color var(--t2-dur), box-shadow var(--t2-dur);
}
.form-check-input:checked{
  background-color: var(--t2-primary);
  border-color: var(--t2-primary);
}
.form-check-input:focus{
  border-color: var(--t2-primary);
  box-shadow: 0 0 0 3px rgba(244,129,32,.18);
}
.eye_show_box{
  color: var(--t2-text-3);
  transition: color var(--t2-dur) var(--t2-ease);
}
.eye_show_box:hover{color: var(--t2-primary);}

/* ---- Tables ---- */
.table{
  --bs-table-bg: transparent;
  color: var(--t2-text);
  border-collapse: separate;
  border-spacing: 0;
}
.table > :not(caption) > * > *{
  padding: .85rem 1rem;
  border: none;
  border-bottom: 1px solid var(--t2-border-soft);
  vertical-align: middle;
}
thead tr th{
  background-color: #f8f9fc !important;
  font-weight: 600 !important;
  font-size: 12.5px;
  color: var(--t2-text-2) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--t2-border) !important;
}
thead tr th strong{font-weight: 600;}
thead tr th:first-child{border-top-left-radius: var(--t2-r-sm);}
thead tr th:last-child{border-top-right-radius: var(--t2-r-sm);}
.table tbody tr{transition: background var(--t2-dur) var(--t2-ease);}
.table tbody tr:hover > *{background: color-mix(in srgb, var(--t2-primary) 5%, var(--t2-surface));}
.table-responsive{
  border-radius: var(--t2-r-md);
  border: 1px solid var(--t2-border-soft);
  background: var(--t2-surface);
  box-shadow: var(--t2-sh-xs);
  overflow-x: auto;
}

/* ---- Nav tabs ---- */
.nav-tabs{
  border-bottom: none;
  gap: 6px;
  padding-bottom: 12px;
}
.nav-tabs .nav-link{
  border: 1px solid var(--t2-border);
  border-radius: var(--t2-r-sm);
  padding: .5rem 1rem;
  font-weight: 500;
  color: var(--t2-text);
  background: var(--t2-surface);
  box-shadow: var(--t2-sh-xs);
  transition: all var(--t2-dur) var(--t2-ease);
}
.nav-tabs .nav-link:hover{
  border-color: color-mix(in srgb, var(--t2-primary) 45%, var(--t2-border));
  color: var(--t2-primary);
  background: var(--t2-primary-soft);
  transform: translateY(-1px);
  box-shadow: var(--t2-sh-primary-sm);
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active{
  background: var(--t2-primary-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--t2-sh-primary);
  transform: translateY(-1px);
}
.tab1-style .nav-link{
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--t2-text-2);
}
.tab1-style .nav-link:hover{
  background: transparent !important;
  color: var(--t2-primary);
  border-color: transparent !important;
  transform: none;
  box-shadow: none !important;
}
.tab1-style .nav-link.active{
  background: transparent !important;
  color: var(--t2-primary) !important;
  border-bottom: 2px solid var(--t2-primary) !important;
}
.tab1-style .nav-link.active::before{display: none;}
.account-tab.nav-tabs .nav-link.active{
  background: var(--t2-surface) !important;
  border: 1px solid var(--t2-primary) !important;
  color: var(--t2-primary) !important;
  box-shadow: var(--t2-sh-primary-sm);
}

/* ---- Pagination ---- */
.pagination{
  gap: 6px;
  margin: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}
.pagination .page-link, .pagination li a{
  min-width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--t2-border);
  border-radius: var(--t2-r-sm) !important;
  background: var(--t2-surface);
  color: var(--t2-text-2);
  font-weight: 600;
  font-size: .82rem;
  box-shadow: var(--t2-sh-xs);
  transition: all var(--t2-dur) var(--t2-ease);
}
.pagination .page-link:hover, .pagination li a:hover{
  background: var(--t2-primary-soft);
  color: var(--t2-primary-700);
  border-color: color-mix(in srgb, var(--t2-primary) 35%, var(--t2-border));
  transform: translateY(-1px);
  box-shadow: var(--t2-sh-primary-sm);
}
.page-item.active .page-link, .pagination li.active a{
  background: var(--t2-primary-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--t2-sh-primary);
  transform: translateY(-1px);
}
.page-item.disabled .page-link{opacity: .5; cursor: not-allowed; box-shadow: none; transform: none;}

/* ---- Modals ---- */
.modal-content{
  border-radius: var(--t2-r-xl);
  border: none;
  box-shadow: 0 50px 120px -40px rgba(15,23,42,.5), 0 20px 60px -30px rgba(15,23,42,.25);
  overflow: hidden;
}
.modal-header{
  border-bottom: 1px solid var(--t2-border-soft);
  padding: 18px 22px;
  background: linear-gradient(180deg, #fafbff 0%, transparent 100%);
}
.modal-title{font-size: 16px !important; font-weight: 700; color: var(--t2-text);}
.modal-body{padding: 22px;}
.modal-footer{border-top: 1px solid var(--t2-border-soft); padding: 14px 22px;}
.modal-backdrop.show{opacity: .45;}
.modal .btn-close{
  border-radius: 10px;
  opacity: .65;
  transition: all var(--t2-dur) var(--t2-ease);
}
.modal .btn-close:hover{
  opacity: 1;
  background-color: var(--t2-primary-soft);
  transform: rotate(90deg);
}

/* ---- Accordion ---- */
.accordion-item{
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid var(--t2-border-soft) !important;
  border-radius: var(--t2-r-md) !important;
  background: var(--t2-surface);
  box-shadow: var(--t2-sh-xs);
  transition: box-shadow var(--t2-dur) var(--t2-ease), border-color var(--t2-dur) var(--t2-ease);
}
.accordion-item:hover{
  border-color: color-mix(in srgb, var(--t2-primary) 25%, var(--t2-border-soft)) !important;
  box-shadow: var(--t2-sh-sm);
}
.accordion-button{font-weight: 600; color: var(--t2-text);}
.accordion-button::after{
  transition: transform var(--t2-dur) var(--t2-ease), background-color var(--t2-dur) var(--t2-ease);
  border-radius: 8px;
  padding: 4px;
}

/* ---- Dropdowns / menus ---- */
.dropdown-menu{
  border: 1px solid var(--t2-border-soft);
  border-radius: var(--t2-r-md);
  box-shadow: var(--t2-sh-lg);
  padding: 6px;
}
.dropdown-item, .dropdown-link{
  border-radius: 8px;
  font-size: 13.5px;
  padding: 10px 12px;
  transition: background var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease);
}
.dropdown-item:hover, .dropdown-link:hover{
  background: var(--t2-primary-soft);
  color: var(--t2-primary-700);
}
.dropdown-item.active, .dropdown-link.active{
  background: var(--t2-primary-soft);
  color: var(--t2-primary-700);
  font-weight: 600;
}
.user_dropdown .dropdown-menu{
  border-radius: var(--t2-r-lg);
  box-shadow: var(--t2-sh-lg);
  padding: 8px;
  border: 1px solid var(--t2-border-soft);
}
.user_menu_list li a{
  border-radius: 10px;
  padding: 10px 12px;
  transition: background var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease);
}
.user_menu_list li a:hover,
.user_menu_list li a.active{
  background: var(--t2-primary-soft);
  color: var(--t2-primary-700);
}

/* ---- Sidebar list (app_menu_card / btn-toggle-nav) ---- */
.app_menu_card.card{border: 1px solid var(--t2-border-soft);}
.app_menu_card .nav-item .nav-link{
  border-radius: var(--t2-r-sm) !important;
  padding: 9px 14px;
  font-weight: 500;
  color: var(--t2-text) !important;
  transition: background var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease);
}
.app_menu_card .nav-item .nav-link:hover{
  background: var(--t2-primary-soft) !important;
  color: var(--t2-primary-700) !important;
}
.app_menu_card .nav-item .nav-link.active{
  background: var(--t2-primary-soft) !important;
  color: var(--t2-primary-700) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--t2-primary);
}
.btn-toggle-nav li a{
  padding: 9px 14px;
  border-radius: var(--t2-r-sm);
  color: var(--t2-text-2);
  font-weight: 500;
}
.btn-toggle-nav li a:hover,
.btn-toggle-nav li a.active{
  background: var(--t2-primary-soft);
  color: var(--t2-primary-700);
}
.btn-toggle-nav li a::after{
  background: var(--t2-primary-grad) !important;
  border-radius: 2px;
}

/* ---- Header / avatar / bell ---- */
.avtar-circle{
  border: 1.5px solid var(--t2-border);
  background: var(--t2-surface);
  transition: border-color var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease);
}
.avtar-circle:hover{
  border-color: var(--t2-primary);
  box-shadow: var(--t2-sh-primary-sm);
  background: var(--t2-primary-soft);
}
.bell-circle{
  border: 1.5px solid var(--t2-border);
  background: var(--t2-surface);
  transition: all var(--t2-dur) var(--t2-ease);
}
.bell-circle:hover{
  color: var(--t2-primary);
  border-color: var(--t2-primary);
  background: var(--t2-primary-soft);
  box-shadow: var(--t2-sh-primary-sm);
  transform: translateY(-1px);
}
.notification_count{
  background: var(--t2-primary-grad);
  box-shadow: 0 2px 4px rgba(244,129,32,.4);
}

/* ---- Quick action / gateway / wallet boxes ---- */
.quick_action_box{
  background: var(--t2-primary-grad);
  border-radius: var(--t2-r-md);
  box-shadow: var(--t2-sh-primary);
}
.quick_action_link{
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  transition: all var(--t2-dur) var(--t2-ease);
}
.quick_action_link:hover{
  background: rgba(255,255,255,.3) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.2);
}
.gateway_tab{
  background: var(--t2-surface) !important;
  border: 1px solid var(--t2-border) !important;
  border-radius: var(--t2-r-sm);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--t2-sh-xs);
  transition: all var(--t2-dur) var(--t2-ease);
}
.gateway_tab:hover{
  border-color: color-mix(in srgb, var(--t2-primary) 45%, var(--t2-border)) !important;
  transform: translateY(-1px);
  box-shadow: var(--t2-sh-sm);
}
.gateway_tab.gateway_active{
  border: 1px solid var(--t2-primary) !important;
  background: var(--t2-primary-soft) !important;
  color: var(--t2-primary-700);
}
.paymentsetting_box{
  background: linear-gradient(270.03deg, #f4f5f8 2.03%, rgba(79,119,84,.12) 97.04%);
  border: 1px solid var(--t2-border-soft);
  border-radius: var(--t2-r-md);
  box-shadow: var(--t2-sh-sm);
}
.paymentsetting_box .wallet-btn{
  background: rgba(15,23,42,.08) !important;
  border-radius: 999px;
  font-weight: 500;
  transition: all var(--t2-dur) var(--t2-ease);
}
.paymentsetting_box .wallet-btn:hover{
  background: var(--t2-primary) !important;
  color: #fff;
  transform: translateY(-1px);
}
.wallet_bg{
  background: linear-gradient(135deg, rgba(255,186,211,.25) 0%, rgba(186,134,253,.22) 100%);
  border-radius: var(--t2-r-xl);
  box-shadow: var(--t2-sh-md);
  border: 1px solid var(--t2-border-soft);
}

/* ---- Package / plan cards ---- */
.package-box{
  border-radius: var(--t2-r-lg);
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--t2-primary) 45%, var(--t2-border-soft));
  background: linear-gradient(180deg, rgba(244,129,32,.08) 0%, #fff 60%);
  box-shadow: var(--t2-sh-sm);
  transition: transform var(--t2-dur) var(--t2-ease), box-shadow var(--t2-dur) var(--t2-ease);
}
.package-box:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(244,129,32,.35);
}
.pl-title{
  background: var(--t2-primary-grad);
  border-radius: var(--t2-r-sm);
  box-shadow: var(--t2-sh-primary-sm);
  font-weight: 600;
}
.pl-container_text1{
  border: 1px solid var(--t2-border);
  border-radius: var(--t2-r-sm);
  background: var(--t2-surface-2);
}

/* ---- Login / register panels ---- */
.login_box_width{
  border-radius: var(--t2-r-xl);
  box-shadow: 0 30px 80px -30px rgba(15,23,42,.25), 0 10px 30px -15px rgba(15,23,42,.1);
  outline: none;
  border: 1px solid var(--t2-border-soft);
  padding: 30px;
}
.login_header{
  border-bottom: 1px solid var(--t2-border-soft);
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}

/* ---- Notification / offcanvas ---- */
.offcanvas-end{box-shadow: -20px 0 60px -20px rgba(15,23,42,.2);}
.offcanvas-header .btn-close{
  border-radius: 10px;
  background-color: var(--t2-surface-2);
  opacity: 1;
  transition: all var(--t2-dur) var(--t2-ease);
}
.offcanvas-header .btn-close:hover{
  background-color: var(--t2-primary-soft);
  transform: rotate(-90deg);
}
.Notification_box{
  border-radius: var(--t2-r-lg);
  box-shadow: var(--t2-sh-md);
  background: var(--t2-surface);
  border: 1px solid var(--t2-border-soft);
}

/* ---- Ribbons / status pills ---- */
.ribbon-section{
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 4px 10px;
  box-shadow: var(--t2-sh-xs);
}

/* ---- Toggle checkbox ---- */
.checkbox-label{
  background: #e2e8f0;
  transition: background var(--t2-dur) var(--t2-ease);
}
.checkbox:checked + .checkbox-label{background: var(--t2-primary-grad);}
.checkbox-label .ball{
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.2);
}

/* ---- Document upload / qr / front-back ---- */
.document_input{
  border: 2px dashed color-mix(in srgb, var(--t2-primary) 30%, var(--t2-border));
  background: var(--t2-surface-2);
  border-radius: var(--t2-r-md);
  transition: all var(--t2-dur) var(--t2-ease);
}
.document_input:hover{
  border-color: var(--t2-primary);
  background: var(--t2-primary-soft);
}
.front-back-box{
  border: 1.5px dashed var(--t2-border);
  border-radius: var(--t2-r-md);
  background: var(--t2-surface);
  transition: all var(--t2-dur) var(--t2-ease);
}
.front-back-box:hover{
  background: var(--t2-primary-soft);
  border-color: var(--t2-primary);
  transform: translateY(-2px);
  box-shadow: var(--t2-sh-sm);
}
.qr_code_box{
  border: 1.5px dashed var(--t2-border);
  border-radius: var(--t2-r-md);
  transition: all var(--t2-dur) var(--t2-ease);
}
.qr_code_box:hover{
  background: var(--t2-surface);
  border-color: var(--t2-primary);
  box-shadow: var(--t2-sh-sm);
}

/* ---- Profile ---- */
.profile_img{
  background: var(--t2-primary-grad);
  box-shadow: 0 10px 24px -10px rgba(244,129,32,.5);
}
.profile_img-edit{
  border: 1.5px solid var(--t2-border);
  background: var(--t2-surface);
  box-shadow: var(--t2-sh-sm);
  transition: all var(--t2-dur) var(--t2-ease);
}
.profile_img-edit:hover{
  background: var(--t2-primary);
  color: #fff;
  border-color: var(--t2-primary);
  transform: scale(1.08);
}

/* ---- Verification boxes ---- */
.Verification_bgbox{
  border-radius: var(--t2-r-md);
  box-shadow: var(--t2-sh-xs);
  border: 1px solid var(--t2-border-soft);
}
.Verification_bgbox.bg-success{background: #ecfdf5 !important; border-color: #a7f3d0;}
.Verification_bgbox.bg-danger{background: #fef2f2 !important; border-color: #fecaca;}

/* ---- Identity icon (KYC) ---- */
.identity_icon{
  background: var(--t2-primary-soft);
  border: 1px solid color-mix(in srgb, var(--t2-primary) 20%, transparent);
}

/* ---- Tables tweak: thead refinement ---- */
.table thead th:first-child{padding-left: 1.25rem;}
.table tbody td:first-child{padding-left: 1.25rem;}
.table thead th:last-child{padding-right: 1.25rem;}
.table tbody td:last-child{padding-right: 1.25rem;}

/* ---- Loader ---- */
.loader-container{
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
}
.loader-container .loader{
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--t2-primary);
}

/* ---- Hr subtle ---- */
hr{border-top: 1px solid var(--t2-border-soft); opacity: 1;}

/* ---- Dark tweaks on top of dark.css ---- */
body.dark{
  --t2-surface: #1a1d24;
  --t2-surface-2: #242832;
  --t2-bg: #0f1117;
  --t2-text: #f1f5f9;
  --t2-text-2: #cbd5e1;
  --t2-text-3: #64748b;
  --t2-border: #2d3340;
  --t2-border-soft: #242832;
  --t2-primary-soft: rgba(244,129,32,.12);
}
body.dark .card,
body.dark .card_height,
body.dark .form-control,
body.dark .form-select,
body.dark .dropdown-menu,
body.dark .accordion-item,
body.dark .table-responsive,
body.dark .modal-content{
  background: var(--t2-surface);
  color: var(--t2-text);
  border-color: var(--t2-border);
}
body.dark thead tr th{
  background-color: var(--t2-surface-2) !important;
  color: var(--t2-text-2) !important;
  border-color: var(--t2-border) !important;
}
body.dark .table tbody tr:hover > *{background: color-mix(in srgb, var(--t2-primary) 8%, var(--t2-surface));}
body.dark .modal-header{background: linear-gradient(180deg, #222632 0%, transparent 100%);}

/* =========================================================
   THEME 2 — TIER 2 PREMIUM: inputs, buttons, card-in-table,
   modals. Deeper detail, micro-interactions, layered depth.
   ========================================================= */

/* ---------- INPUTS — floating-style refinement ---------- */
.form-control,
.form-select{
  position: relative;
  padding: .72rem .95rem;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 12px;
  border: 1.5px solid var(--t2-border);
  background:
    linear-gradient(var(--t2-surface), var(--t2-surface)) padding-box,
    linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,0)) padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 1px 2px rgba(15,23,42,.04);
  transition:
    border-color var(--t2-dur) var(--t2-ease),
    box-shadow .25s var(--t2-ease),
    background-color var(--t2-dur) var(--t2-ease),
    transform .2s var(--t2-ease);
}
.form-control:hover,
.form-select:hover{
  border-color: color-mix(in srgb, var(--t2-primary) 38%, var(--t2-border));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 6px rgba(244,129,32,.08);
}
.form-control:focus,
.form-select:focus{
  border-color: var(--t2-primary);
  background: var(--t2-surface);
  box-shadow:
    0 0 0 4px rgba(244,129,32,.14),
    0 6px 18px -10px rgba(244,129,32,.4),
    inset 0 1px 0 rgba(255,255,255,.6);
  outline: none;
}
.form-control[readonly]{
  background: var(--t2-surface-2);
  color: var(--t2-text-2);
  cursor: default;
}
.form-control:disabled,
.form-select:disabled{
  background: color-mix(in srgb, var(--t2-surface-2) 70%, #eef0f4);
  color: var(--t2-text-3);
  box-shadow: none;
  cursor: not-allowed;
}
.form-control.is-invalid,
.form-select.is-invalid,
.form-control.error{
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.14);
  background-image: none;
}
.form-control.is-valid{
  border-color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(22,163,74,.12);
  background-image: none;
}
.form-control::placeholder{
  color: var(--t2-text-3);
  font-weight: 400;
  transition: opacity var(--t2-dur) var(--t2-ease);
}
.form-control:focus::placeholder{opacity: .55;}
.form-control.otp{
  width: 48px !important;
  height: 52px;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  margin: 0 5px;
  padding: 0;
  border-radius: 12px;
}
.form-control.otp:focus{transform: translateY(-2px);}
.input-group{
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.input-group-text{
  background: var(--t2-surface-2);
  border: 1.5px solid var(--t2-border);
  color: var(--t2-text-2);
  border-radius: 12px;
  font-weight: 500;
}
.input-group > .form-control:focus{z-index: 3;}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text{border-radius: 12px;}
.input-group > :not(:last-child){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -1.5px;
}
.input-group > :not(:first-child){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.eye_show_box{
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--t2-text-3);
  padding: 4px;
  border-radius: 8px;
  transition: all var(--t2-dur) var(--t2-ease);
}
.eye_show_box:hover{
  color: var(--t2-primary);
  background: var(--t2-primary-soft);
}
.form-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--t2-text);
  letter-spacing: .01em;
  margin-bottom: 8px;
}
.invalid-feedback{font-size: 12px; margin-top: 6px; font-weight: 500;}

/* React-select matched */
.css-13cymwt-control{
  border: 1.5px solid var(--t2-border) !important;
  border-radius: 12px !important;
  min-height: 46px !important;
  background: var(--t2-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(15,23,42,.04) !important;
  transition: border-color var(--t2-dur) var(--t2-ease), box-shadow .25s var(--t2-ease) !important;
}
.css-13cymwt-control:hover{
  border-color: color-mix(in srgb, var(--t2-primary) 38%, var(--t2-border)) !important;
}
.css-t3ipsp-control{
  border: 1.5px solid var(--t2-primary) !important;
  box-shadow: 0 0 0 4px rgba(244,129,32,.14), 0 6px 18px -10px rgba(244,129,32,.4) !important;
  border-radius: 12px !important;
  min-height: 46px !important;
}

/* ---------- BUTTONS — gradient + sheen + shadow-glow ---------- */
.btn{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  font-weight: 600;
  padding: .62rem 1.25rem;
  font-size: 14px;
  letter-spacing: .01em;
  isolation: isolate;
  transition:
    transform .2s var(--t2-ease),
    box-shadow .25s var(--t2-ease),
    background-color var(--t2-dur) var(--t2-ease),
    color var(--t2-dur) var(--t2-ease),
    border-color var(--t2-dur) var(--t2-ease);
}
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s var(--t2-ease);
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover::after,
.btn-outline-primary:hover::after{transform: translateX(120%);}
.btn > *{position: relative; z-index: 2;}
.btn-primary{
  background: var(--t2-primary-grad) !important;
  border: none !important;
  color: #fff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 10px 22px -10px rgba(244,129,32,.55),
    0 2px 6px -2px rgba(244,129,32,.4);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 18px 34px -14px rgba(244,129,32,.7),
    0 4px 12px -4px rgba(244,129,32,.5);
  color: #fff !important;
}
.btn-primary:active{
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 6px 14px -6px rgba(244,129,32,.55);
}
.btn-primary:disabled,
.btn-primary.disabled{
  background: #e5e7eb !important;
  color: #9ca3af !important;
  box-shadow: none;
  opacity: 1;
  transform: none;
}
.btn-outline-primary{
  background: var(--t2-surface) !important;
  color: var(--t2-primary) !important;
  border: 1.5px solid var(--t2-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(244,129,32,.08);
}
.btn-outline-primary:hover{
  background: var(--t2-primary-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px -14px rgba(244,129,32,.6),
    0 4px 10px -4px rgba(244,129,32,.4);
}
.btn-light{
  background: var(--t2-surface) !important;
  border: 1.5px solid var(--t2-border) !important;
  color: var(--t2-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(15,23,42,.04);
}
.btn-light:hover{
  background: #fafbff !important;
  border-color: color-mix(in srgb, var(--t2-primary) 40%, var(--t2-border)) !important;
  color: var(--t2-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(15,23,42,.15);
}
.btn-success{
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -10px rgba(22,163,74,.5), 0 2px 6px -2px rgba(22,163,74,.4);
}
.btn-success:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(22,163,74,.65);
}
.btn-danger{
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -10px rgba(239,68,68,.5), 0 2px 6px -2px rgba(239,68,68,.4);
}
.btn-danger:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(239,68,68,.65);
}
.btn-lg{padding: .8rem 1.6rem; font-size: 15px; border-radius: 14px;}
.btn-sm{padding: .4rem .85rem; font-size: 12.5px; border-radius: 10px;}
.btn:focus-visible{
  box-shadow:
    0 0 0 4px rgba(244,129,32,.22),
    0 10px 22px -10px rgba(244,129,32,.5) !important;
}
.btn.disabled, .btn:disabled{cursor: not-allowed; transform: none;}
.btn:has(i:only-child){padding: .55rem .7rem; min-width: 40px;}

.action_dropdown{
  background: var(--t2-surface) !important;
  border: 1px solid var(--t2-border) !important;
  border-radius: 10px !important;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--t2-sh-xs);
  transition: all var(--t2-dur) var(--t2-ease);
}
.action_dropdown:hover{
  border-color: var(--t2-primary) !important;
  color: var(--t2-primary);
  background: var(--t2-primary-soft) !important;
  transform: translateY(-1px);
  box-shadow: var(--t2-sh-primary-sm);
}

/* ---------- CARD-IN-TABLE — when tables live inside .card ---------- */
.card > .card-body > .table-responsive,
.card > .card-body .table-responsive{
  border: 1px solid var(--t2-border-soft);
  border-radius: 14px;
  background: var(--t2-surface);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.card > .card-body .table{margin-bottom: 0;}
.card > .card-body .table thead th{
  background: linear-gradient(180deg, #fafbff 0%, #f5f6fb 100%) !important;
  border-bottom: 1px solid var(--t2-border) !important;
  color: var(--t2-text-2) !important;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 14px 16px;
}
.card > .card-body .table tbody td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--t2-border-soft);
  font-size: 13.5px;
  color: var(--t2-text);
}
.card > .card-body .table tbody tr:last-child td{border-bottom: none;}
.card > .card-body .table tbody tr{
  transition: background .2s var(--t2-ease), transform .2s var(--t2-ease);
}
.card > .card-body .table tbody tr:hover > *{
  background: linear-gradient(90deg, rgba(244,129,32,.06) 0%, rgba(244,129,32,.03) 100%);
}

/* Generic table card wrapper (even when it's not .card parent) */
.table-responsive{
  border: 1px solid var(--t2-border-soft);
  border-radius: 14px;
  background: var(--t2-surface);
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 10px 24px -20px rgba(15,23,42,.12);
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Slim scrollbar for table horizontal scroll */
.table-responsive::-webkit-scrollbar{height: 8px;}
.table-responsive::-webkit-scrollbar-track{background: transparent;}
.table-responsive::-webkit-scrollbar-thumb{
  background: var(--t2-border);
  border-radius: 8px;
}
.table-responsive::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--t2-primary) 50%, var(--t2-border));
}
.table thead tr th{
  background: linear-gradient(180deg, #fafbff 0%, #f5f6fb 100%) !important;
  border-bottom: 1px solid var(--t2-border) !important;
  padding: 14px 16px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--t2-text-2) !important;
}
.table > :not(caption) > * > *{padding: 13px 16px;}
.table tbody tr:hover > *{
  background: linear-gradient(90deg, rgba(244,129,32,.06) 0%, rgba(244,129,32,.02) 100%);
}

/* ---------- MODAL — premium depth + micro-anim ---------- */
.modal{z-index: 1300;}
.modal-backdrop{background: #0b1120; z-index: 1250;}
.modal-backdrop.show{opacity: .5;}
.modal.show .modal-dialog{
  animation: t2ModalIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes t2ModalIn{
  from{opacity: 0; transform: translateY(20px) scale(.96);}
  to{opacity: 1; transform: translateY(0) scale(1);}
}
.modal-dialog{margin: 1.75rem auto;}
.modal-content{
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3.5rem);
  border: 1px solid var(--t2-border-soft);
  border-radius: 22px;
  background: var(--t2-surface);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 50px 120px -40px rgba(15,23,42,.55),
    0 20px 60px -30px rgba(244,129,32,.2),
    0 10px 30px -15px rgba(15,23,42,.15);
  overflow: hidden;
}
.modal-content > .modal-header,
.modal-content > .modal-footer{flex: 0 0 auto;}
.modal-content > .modal-body{flex: 1 1 auto; min-height: 0; overflow-y: auto;}
.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 26px;
  min-height: 66px;
  border-bottom: 1px solid var(--t2-border-soft);
  background:
    linear-gradient(180deg, #fafbff 0%, transparent 100%),
    radial-gradient(120% 100% at 0% 0%, rgba(244,129,32,.08) 0%, transparent 60%);
  position: relative;
}
.modal-header::before{
  content: "";
  position: absolute;
  left: 24px; right: 24px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--t2-primary) 30%, var(--t2-primary) 70%, transparent);
  opacity: .25;
}
.modal-title{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.3;
  font-size: 17px !important;
  font-weight: 700;
  color: var(--t2-text);
  letter-spacing: -.01em;
}
.modal-header .btn-close{
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 10px;
  background-color: var(--t2-surface-2);
  opacity: .85;
  margin: 0;
  transition: all .25s var(--t2-ease);
  background-size: 12px;
}
.modal-header .btn-close:hover{
  opacity: 1;
  background-color: var(--t2-primary-soft);
  color: var(--t2-primary);
  transform: rotate(90deg);
  box-shadow: 0 4px 10px -2px rgba(244,129,32,.3);
}
.modal-body{padding: 24px 26px;}
.modal-footer{
  padding: 16px 26px;
  border-top: 1px solid var(--t2-border-soft);
  background: linear-gradient(180deg, transparent 0%, #fafbff 100%);
  gap: 10px;
}
.modal-footer > *{margin: 0;}

/* Dark mode adjustments for Tier 2 */
body.dark .form-control,
body.dark .form-select{
  background: var(--t2-surface);
  color: var(--t2-text);
  border-color: var(--t2-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.3);
}
body.dark .form-control:focus,
body.dark .form-select:focus{
  background: var(--t2-surface);
  border-color: var(--t2-primary);
  box-shadow: 0 0 0 4px rgba(244,129,32,.22), 0 6px 18px -10px rgba(244,129,32,.5);
}
body.dark .form-control::placeholder{color: var(--t2-text-3);}
body.dark .input-group-text{
  background: var(--t2-surface-2);
  border-color: var(--t2-border);
  color: var(--t2-text-2);
}
body.dark .btn-light{
  background: var(--t2-surface) !important;
  border-color: var(--t2-border) !important;
  color: var(--t2-text) !important;
}
body.dark .btn-light:hover{background: var(--t2-surface-2) !important;}
body.dark .modal-header{
  background:
    linear-gradient(180deg, #232632 0%, transparent 100%),
    radial-gradient(120% 100% at 0% 0%, rgba(244,129,32,.14) 0%, transparent 60%);
}
body.dark .modal-footer{background: linear-gradient(180deg, transparent 0%, #1e2129 100%);}
body.dark .table thead tr th,
body.dark .card > .card-body .table thead th{
  background: linear-gradient(180deg, #242832 0%, #1e2129 100%) !important;
}
body.dark .table tbody tr:hover > *,
body.dark .card > .card-body .table tbody tr:hover > *{
  background: linear-gradient(90deg, rgba(244,129,32,.12) 0%, rgba(244,129,32,.05) 100%);
}
body.dark .modal-header .btn-close{
  background-color: var(--t2-surface-2);
  filter: invert(1);
}
body.dark .action_dropdown{
  background: var(--t2-surface) !important;
  border-color: var(--t2-border) !important;
}

/* ---------- DROPDOWN STACKING (fix: menu behind sibling cards) ---------- */
.dropdown,
.dropup,
.dropstart,
.dropend{position: relative;}
.dropdown-menu{
  z-index: 1060;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--t2-border-soft);
  border-radius: var(--t2-r-md);
  background: var(--t2-surface);
  box-shadow:
    0 24px 56px -24px rgba(15,23,42,.28),
    0 8px 20px -8px rgba(15,23,42,.12),
    0 0 0 1px rgba(15,23,42,.02);
}
.dropdown-menu.show{
  z-index: 1060;
  animation: t2DropIn .18s var(--t2-ease);
}
@keyframes t2DropIn{
  from{opacity: 0; transform: translateY(-4px) scale(.98);}
  to{opacity: 1; transform: translateY(0) scale(1);}
}
/* Lift any card currently hosting an open dropdown above siblings */
.card:has(.dropdown-menu.show),
.c_card_box:has(.dropdown-menu.show),
.card_height:has(.dropdown-menu.show){
  position: relative;
  z-index: 50;
  overflow: visible !important;
}
/* Ensure row/column wrappers don't clip the menu */
.row:has(.dropdown-menu.show),
.col:has(.dropdown-menu.show),
[class*="col-"]:has(.dropdown-menu.show){
  overflow: visible;
}
.dropdown-item{
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--t2-text);
  transition: background var(--t2-dur) var(--t2-ease), color var(--t2-dur) var(--t2-ease);
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: var(--t2-primary-soft);
  color: var(--t2-primary-700);
}
.dropdown-item.active,
.dropdown-item:active{
  background: var(--t2-primary-soft);
  color: var(--t2-primary-700);
}
.dropdown-item i{color: var(--t2-text-3); transition: color var(--t2-dur) var(--t2-ease);}
.dropdown-item:hover i{color: var(--t2-primary);}

body.dark .dropdown-menu{
  background: var(--t2-surface);
  border-color: var(--t2-border);
  box-shadow: 0 24px 56px -24px rgba(0,0,0,.6), 0 8px 20px -8px rgba(0,0,0,.35);
}
body.dark .dropdown-item{color: var(--t2-text);}
body.dark .dropdown-item:hover,
body.dark .dropdown-item:focus{
  background: rgba(244,129,32,.14);
  color: #ffd9b0;
}

/* =========================================================
   THEME 2 — STAT CARDS (minimal / professional)
   bg-primary/success/warning/danger/info/secondary +
   bg-gradient + bg-opacity-25 → neutralized to clean white
   surface with a single accent rail + tinted mono icon.
   ========================================================= */
.bg-gradient.bg-opacity-25.rounded-3,
.bg-gradient.bg-opacity-25.rounded-3.p-3{
  position: relative;
  background-color: var(--t2-surface) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(247,248,251,.85) 100%) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--t2-border-soft) !important;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 1px 2px rgba(15,23,42,.04),
    0 10px 30px -20px rgba(15,23,42,.15);
  transition:
    transform .25s var(--t2-ease),
    box-shadow .25s var(--t2-ease),
    border-color .25s var(--t2-ease);
}
/* Soft tinted wash — adds premium depth without shouting color */
.bg-gradient.bg-opacity-25.rounded-3::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(148,163,184,.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Left accent rail — single color cue with gradient */
.bg-gradient.bg-opacity-25.rounded-3::before{
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
  pointer-events: none;
  opacity: .9;
  z-index: 1;
}
.bg-gradient.bg-opacity-25.rounded-3 > *{position: relative; z-index: 2;}
.bg-gradient.bg-opacity-25.rounded-3:hover{
  transform: translateY(-2px);
  border-color: var(--t2-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(15,23,42,.04),
    0 18px 36px -18px rgba(15,23,42,.2);
}

/* Typography: label uppercase + tracking, value big bold tight */
.bg-gradient.bg-opacity-25.rounded-3 h5,
.bg-gradient.bg-opacity-25.rounded-3 .h5{
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t2-text-3);
  margin-bottom: 10px !important;
}
.bg-gradient.bg-opacity-25.rounded-3 h4,
.bg-gradient.bg-opacity-25.rounded-3 .h4{
  font-size: 22px !important;
  font-weight: 700;
  color: var(--t2-text);
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Icon — clean square tile, subtle border, mono neutral by default */
.bg-gradient.bg-opacity-25.rounded-3 i.fs-3{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  background: var(--t2-surface-2);
  border: 1px solid var(--t2-border-soft);
  color: var(--t2-text-2);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: background .25s var(--t2-ease), color .25s var(--t2-ease), border-color .25s var(--t2-ease);
}
.bg-gradient.bg-opacity-25.rounded-3:hover i.fs-3{
  background: var(--t2-surface);
  border-color: var(--t2-border);
}

/* Per-tone: subtle tinted gradient wash + rail + icon — premium not loud */
.bg-primary.bg-gradient.bg-opacity-25{
  background-image:
    linear-gradient(135deg, rgba(59,130,246,.05) 0%, rgba(59,130,246,.01) 60%, transparent 100%) !important;
}
.bg-primary.bg-gradient.bg-opacity-25::after{
  background: radial-gradient(120% 80% at 100% 0%, rgba(59,130,246,.1) 0%, transparent 60%);
}
.bg-primary.bg-gradient.bg-opacity-25::before{
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
}
.bg-primary.bg-gradient.bg-opacity-25 i.fs-3{
  color: #2563eb;
  background: color-mix(in srgb, #3b82f6 12%, var(--t2-surface));
  border-color: color-mix(in srgb, #3b82f6 20%, var(--t2-border-soft));
}

.bg-success.bg-gradient.bg-opacity-25{
  background-image:
    linear-gradient(135deg, rgba(22,163,74,.05) 0%, rgba(22,163,74,.01) 60%, transparent 100%) !important;
}
.bg-success.bg-gradient.bg-opacity-25::after{
  background: radial-gradient(120% 80% at 100% 0%, rgba(22,163,74,.1) 0%, transparent 60%);
}
.bg-success.bg-gradient.bg-opacity-25::before{
  background: linear-gradient(180deg, #4ade80 0%, #15803d 100%);
}
.bg-success.bg-gradient.bg-opacity-25 i.fs-3{
  color: #15803d;
  background: color-mix(in srgb, #16a34a 12%, var(--t2-surface));
  border-color: color-mix(in srgb, #16a34a 20%, var(--t2-border-soft));
}

.bg-danger.bg-gradient.bg-opacity-25{
  background-image:
    linear-gradient(135deg, rgba(220,38,38,.05) 0%, rgba(220,38,38,.01) 60%, transparent 100%) !important;
}
.bg-danger.bg-gradient.bg-opacity-25::after{
  background: radial-gradient(120% 80% at 100% 0%, rgba(220,38,38,.1) 0%, transparent 60%);
}
.bg-danger.bg-gradient.bg-opacity-25::before{
  background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%);
}
.bg-danger.bg-gradient.bg-opacity-25 i.fs-3{
  color: #b91c1c;
  background: color-mix(in srgb, #dc2626 12%, var(--t2-surface));
  border-color: color-mix(in srgb, #dc2626 20%, var(--t2-border-soft));
}

.bg-warning.bg-gradient.bg-opacity-25{
  background-image:
    linear-gradient(135deg, rgba(217,119,6,.05) 0%, rgba(217,119,6,.01) 60%, transparent 100%) !important;
}
.bg-warning.bg-gradient.bg-opacity-25::after{
  background: radial-gradient(120% 80% at 100% 0%, rgba(217,119,6,.1) 0%, transparent 60%);
}
.bg-warning.bg-gradient.bg-opacity-25::before{
  background: linear-gradient(180deg, #fbbf24 0%, #b45309 100%);
}
.bg-warning.bg-gradient.bg-opacity-25 i.fs-3{
  color: #b45309;
  background: color-mix(in srgb, #d97706 12%, var(--t2-surface));
  border-color: color-mix(in srgb, #d97706 20%, var(--t2-border-soft));
}

.bg-info.bg-gradient.bg-opacity-25{
  background-image:
    linear-gradient(135deg, rgba(8,145,178,.05) 0%, rgba(8,145,178,.01) 60%, transparent 100%) !important;
}
.bg-info.bg-gradient.bg-opacity-25::after{
  background: radial-gradient(120% 80% at 100% 0%, rgba(8,145,178,.1) 0%, transparent 60%);
}
.bg-info.bg-gradient.bg-opacity-25::before{
  background: linear-gradient(180deg, #22d3ee 0%, #0e7490 100%);
}
.bg-info.bg-gradient.bg-opacity-25 i.fs-3{
  color: #0e7490;
  background: color-mix(in srgb, #0891b2 12%, var(--t2-surface));
  border-color: color-mix(in srgb, #0891b2 20%, var(--t2-border-soft));
}

.bg-secondary.bg-gradient.bg-opacity-25{
  background-image:
    linear-gradient(135deg, rgba(100,116,139,.05) 0%, rgba(100,116,139,.01) 60%, transparent 100%) !important;
}
.bg-secondary.bg-gradient.bg-opacity-25::after{
  background: radial-gradient(120% 80% at 100% 0%, rgba(100,116,139,.1) 0%, transparent 60%);
}
.bg-secondary.bg-gradient.bg-opacity-25::before{
  background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
}
.bg-secondary.bg-gradient.bg-opacity-25 i.fs-3{
  color: #475569;
  background: color-mix(in srgb, #64748b 12%, var(--t2-surface));
  border-color: color-mix(in srgb, #64748b 20%, var(--t2-border-soft));
}

/* Dark mode */
body.dark .bg-gradient.bg-opacity-25.rounded-3{
  background-color: var(--t2-surface) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%) !important;
  border-color: var(--t2-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.25),
    0 10px 30px -20px rgba(0,0,0,.6);
}
body.dark .bg-primary.bg-gradient.bg-opacity-25{background-image: linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(59,130,246,.02) 100%) !important;}
body.dark .bg-success.bg-gradient.bg-opacity-25{background-image: linear-gradient(135deg, rgba(22,163,74,.08) 0%, rgba(22,163,74,.02) 100%) !important;}
body.dark .bg-danger.bg-gradient.bg-opacity-25{background-image: linear-gradient(135deg, rgba(220,38,38,.08) 0%, rgba(220,38,38,.02) 100%) !important;}
body.dark .bg-warning.bg-gradient.bg-opacity-25{background-image: linear-gradient(135deg, rgba(217,119,6,.08) 0%, rgba(217,119,6,.02) 100%) !important;}
body.dark .bg-info.bg-gradient.bg-opacity-25{background-image: linear-gradient(135deg, rgba(8,145,178,.08) 0%, rgba(8,145,178,.02) 100%) !important;}
body.dark .bg-secondary.bg-gradient.bg-opacity-25{background-image: linear-gradient(135deg, rgba(100,116,139,.08) 0%, rgba(100,116,139,.02) 100%) !important;}
body.dark .bg-gradient.bg-opacity-25.rounded-3:hover{
  border-color: color-mix(in srgb, var(--t2-primary) 30%, var(--t2-border)) !important;
}
body.dark .bg-gradient.bg-opacity-25.rounded-3 h5,
body.dark .bg-gradient.bg-opacity-25.rounded-3 .h5{color: var(--t2-text-3);}
body.dark .bg-gradient.bg-opacity-25.rounded-3 h4,
body.dark .bg-gradient.bg-opacity-25.rounded-3 .h4{color: var(--t2-text);}
body.dark .bg-gradient.bg-opacity-25.rounded-3 i.fs-3{
  background: var(--t2-surface-2);
  border-color: var(--t2-border);
  color: var(--t2-text-2);
}
body.dark .bg-primary.bg-gradient.bg-opacity-25 i.fs-3{color: #60a5fa; background: rgba(59,130,246,.14);}
body.dark .bg-success.bg-gradient.bg-opacity-25 i.fs-3{color: #4ade80; background: rgba(22,163,74,.14);}
body.dark .bg-danger.bg-gradient.bg-opacity-25 i.fs-3{color: #f87171; background: rgba(220,38,38,.14);}
body.dark .bg-warning.bg-gradient.bg-opacity-25 i.fs-3{color: #fbbf24; background: rgba(217,119,6,.14);}
body.dark .bg-info.bg-gradient.bg-opacity-25 i.fs-3{color: #22d3ee; background: rgba(8,145,178,.14);}
body.dark .bg-secondary.bg-gradient.bg-opacity-25 i.fs-3{color: #cbd5e1; background: rgba(100,116,139,.14);}

/* =========================================================
   THEME 2 — HEADER (premium polish)
   Glass surface + refined nav pills + polished right icons
   ========================================================= */
header{
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--t2-border-soft) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 6px 24px -18px rgba(15,23,42,.25);
  padding: 10px 0 !important;
  transition: box-shadow .25s var(--t2-ease), background .25s var(--t2-ease);
}
header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--t2-primary) 35%, transparent) 50%, transparent 100%);
  opacity: .55;
  pointer-events: none;
}

/* Brand / logo */
.cs_site_branding{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 10px;
  transition: transform .25s var(--t2-ease);
}
.cs_site_branding:hover{transform: translateY(-1px);}
.cs_site_branding img{max-height: 34px; width: auto;}

/* ---------- NAV MENU — desktop-only premium pills (>=1200px) ---------- */
@media (min-width: 1200px){
  .cs_nav .cs_nav_list{gap: 2px;}
  .cs_nav .cs_nav_list > li{position: relative;}
  .cs_nav .cs_nav_list > li > a{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-weight: 500 !important;
    font-size: 14px;
    color: var(--t2-text-2) !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    line-height: 1;
    letter-spacing: .005em;
    position: relative;
    transition:
      color .22s var(--t2-ease),
      background .22s var(--t2-ease),
      transform .22s var(--t2-ease);
  }
  .cs_nav .cs_nav_list > li > a::after{
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--t2-primary-grad);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s var(--t2-ease);
    opacity: .0;
  }
  .cs_nav .cs_nav_list > li > a:hover{
    color: var(--t2-text) !important;
    background: color-mix(in srgb, var(--t2-primary) 7%, transparent) !important;
  }
  .cs_nav .cs_nav_list > li > a.active{
    color: var(--t2-primary-700) !important;
    background: color-mix(in srgb, var(--t2-primary) 10%, transparent) !important;
  }
  .cs_nav .cs_nav_list > li > a.active::after{
    transform: scaleX(.6);
    opacity: 1;
  }
  .cs_nav .cs_nav_list > li:has(> a.active) > a::after{
    transform: scaleX(.6);
    opacity: 1;
  }
  /* Hide default bootstrap dropdown arrow on parents */
  .cs_nav .cs_nav_list > li.menu-item-has-children > a::after{
    display: none;
  }
  /* Dropdown caret on parent items */
  .cs_nav .cs_nav_list > li.menu-item-has-children > a::before{
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border: 1.5px solid currentColor;
    border-left: 0; border-top: 0;
    transform: rotate(45deg);
    margin-left: 6px;
    order: 2;
    opacity: .7;
    transition: transform .2s var(--t2-ease);
    position: relative;
    top: -2px;
  }
  .cs_nav .cs_nav_list > li.menu-item-has-children:hover > a::before{
    transform: rotate(225deg);
    top: 1px;
  }

  /* Desktop submenu popup polish */
  .cs_nav_list .menu-item-has-children ul{
    background: var(--t2-surface) !important;
    border: 1px solid var(--t2-border-soft) !important;
    border-radius: 14px !important;
    box-shadow:
      0 1px 2px rgba(15,23,42,.04),
      0 20px 50px -20px rgba(15,23,42,.25) !important;
    padding: 8px !important;
    min-width: 280px;
  }
  .cs_nav_list .menu-item-has-children ul li a{
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 2px !important;
    transition: background .2s var(--t2-ease), transform .2s var(--t2-ease);
  }
  .cs_nav_list .menu-item-has-children ul li a:hover{
    background: color-mix(in srgb, var(--t2-primary) 8%, var(--t2-surface-2)) !important;
    transform: translateX(2px);
  }
  .cs_nav_list .menu-item-has-children ul li a.active{
    background: color-mix(in srgb, var(--t2-primary) 12%, var(--t2-surface-2)) !important;
  }
  .cs_nav_list .menu-item-has-children ul li a h6{
    color: var(--t2-text) !important;
    font-weight: 600 !important;
  }
  .cs_nav_list .menu-item-has-children ul li a p{
    color: var(--t2-text-3) !important;
    font-size: 11.5px !important;
  }
  .cs_nav_list .menu-item-has-children ul li a img{
    width: 34px !important;
    padding: 5px;
    background: var(--t2-surface-2);
    border: 1px solid var(--t2-border-soft);
    border-radius: 9px;
  }
}

/* ---------- RIGHT-SIDE ICONS (wallet / bell / avatar) ---------- */
/* Wallet pill */
.user_dropdown > .dropdown-toggle{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--t2-text) !important;
  background: var(--t2-surface) !important;
  border: 1px solid var(--t2-border-soft) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition: all .22s var(--t2-ease);
  position: relative;
}
.user_dropdown > .dropdown-toggle:hover{
  border-color: color-mix(in srgb, var(--t2-primary) 35%, var(--t2-border-soft)) !important;
  color: var(--t2-primary-700) !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15,23,42,.06),
    0 8px 20px -10px color-mix(in srgb, var(--t2-primary) 40%, transparent);
}
.user_dropdown > .dropdown-toggle::after{
  border-color: currentColor;
  opacity: .6;
  margin-left: 2px !important;
}
/* Person-icon variant toggle (no wrapping text, just icon) */
.user_dropdown.dropdown-arrow-none > .dropdown-toggle{
  width: 38px; height: 38px;
  padding: 0 !important;
  justify-content: center;
  border-radius: 50% !important;
}
.user_dropdown.dropdown-arrow-none > .dropdown-toggle i{
  font-size: 18px !important;
  color: var(--t2-text-2);
}
.user_dropdown.dropdown-arrow-none > .dropdown-toggle:hover i{color: var(--t2-primary-700);}

/* Divider before bell */
.right-lien{padding-left: 14px; margin-left: 6px;}
.right-lien::before{
  content: "";
  background: var(--t2-border) !important;
  width: 1px !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  opacity: .9;
}

/* Bell icon button */
.right-lien > .btn-primary{
  width: 38px; height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--t2-surface) !important;
  border: 1px solid var(--t2-border-soft) !important;
  border-radius: 50% !important;
  color: var(--t2-text-2) !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition: all .22s var(--t2-ease);
  position: relative;
}
.right-lien > .btn-primary:hover{
  border-color: color-mix(in srgb, var(--t2-primary) 35%, var(--t2-border-soft)) !important;
  color: var(--t2-primary-700) !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15,23,42,.06),
    0 8px 20px -10px color-mix(in srgb, var(--t2-primary) 40%, transparent);
}
.right-lien > .btn-primary i{font-size: 17px !important;}

/* Notification badge on bell */
.chat-active{
  background: var(--t2-primary-grad) !important;
  color: #fff !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  right: -4px !important;
  top: -4px;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 18px !important;
  text-align: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--t2-surface);
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--t2-primary) 55%, transparent);
  animation: t2BellPulse 2.4s var(--t2-ease) infinite;
}
@keyframes t2BellPulse{
  0%, 100%{box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--t2-primary) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--t2-primary) 40%, transparent);}
  50%{box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--t2-primary) 55%, transparent), 0 0 0 6px transparent;}
}

/* Avatar in user dropdown menu */
.user_dropdown .dropdown-menu .avtar-circle,
.avtar-circle{
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--t2-surface);
  box-shadow: 0 0 0 1px var(--t2-border), 0 4px 10px -4px rgba(15,23,42,.2);
  background: var(--t2-surface-2);
}
.avtar-circle img{width: 100%; height: 100%; object-fit: cover;}

/* Wallet dropdown inner balance box */
.user_dropdown .dropdown-menu .inner_box_bg{
  background: linear-gradient(135deg, color-mix(in srgb, var(--t2-primary) 10%, var(--t2-surface-2)) 0%, var(--t2-surface-2) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--t2-primary) 18%, var(--t2-border-soft));
  border-radius: 12px;
  padding: 14px !important;
}
.user_dropdown .dropdown-menu .inner_box_bg p{color: var(--t2-text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;}
.user_dropdown .dropdown-menu .inner_box_bg h3{
  color: var(--t2-text) !important;
  font-size: 22px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Dropdown-menu polish for user dropdowns */
.user_dropdown .dropdown-menu{
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 20px 60px -20px rgba(15,23,42,.3) !important;
  border: 1px solid var(--t2-border-soft) !important;
  background: var(--t2-surface) !important;
  margin-top: 10px !important;
  animation: t2DropIn .22s var(--t2-ease);
}
.user_menu_list li a{
  padding: 10px 10px !important;
  border-radius: 10px !important;
  color: var(--t2-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: background .2s var(--t2-ease), transform .2s var(--t2-ease);
}
.user_menu_list li a:hover{
  background: color-mix(in srgb, var(--t2-primary) 8%, var(--t2-surface-2)) !important;
  transform: translateX(2px);
}
.user_menu_list li a img{
  width: 22px !important;
  height: 22px;
  padding: 3px;
  background: var(--t2-surface-2);
  border: 1px solid var(--t2-border-soft);
  border-radius: 7px;
}

/* Header container spacing */
.header_padding{height: 62px;}

/* ---------- DARK MODE ---------- */
body.dark header{
  background: rgba(15,23,42,.72) !important;
  border-bottom-color: var(--t2-border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.02) inset,
    0 6px 24px -18px rgba(0,0,0,.7);
}
body.dark .cs_nav .cs_nav_list > li > a{color: var(--t2-text-2) !important;}
body.dark .cs_nav .cs_nav_list > li > a:hover{
  color: var(--t2-text) !important;
  background: color-mix(in srgb, var(--t2-primary) 14%, transparent) !important;
}
body.dark .cs_nav .cs_nav_list > li > a.active{
  color: #ffd7b2 !important;
  background: color-mix(in srgb, var(--t2-primary) 18%, transparent) !important;
}
body.dark .user_dropdown > .dropdown-toggle,
body.dark .right-lien > .btn-primary{
  background: var(--t2-surface-2) !important;
  border-color: var(--t2-border) !important;
  color: var(--t2-text) !important;
}
body.dark .right-lien::before{background: var(--t2-border) !important;}
body.dark .chat-active{border-color: var(--t2-surface);}
body.dark .user_dropdown .dropdown-menu{
  background: var(--t2-surface) !important;
  border-color: var(--t2-border) !important;
}
body.dark .cs_nav_list .menu-item-has-children ul{
  background: var(--t2-surface) !important;
  border-color: var(--t2-border) !important;
}

/* =========================================================
   THEME 2 — ICON BUTTONS (eye / edit / delete in tables)
   ========================================================= */
.d4ac-icon-btn,
.action-icon-btn,
button.btn-icon,
.table .btn-eye,
.table a.btn-eye{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--t2-surface) !important;
  border: 1px solid var(--t2-border-soft) !important;
  border-radius: 8px !important;
  color: var(--t2-text-2) !important;
  font-size: 14px;
  padding: 0 !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition:
    color .2s var(--t2-ease),
    border-color .2s var(--t2-ease),
    background .2s var(--t2-ease),
    transform .2s var(--t2-ease),
    box-shadow .2s var(--t2-ease);
  cursor: pointer;
  vertical-align: middle;
}
.d4ac-icon-btn:hover{
  color: var(--t2-primary-700) !important;
  border-color: color-mix(in srgb, var(--t2-primary) 40%, var(--t2-border-soft)) !important;
  background: color-mix(in srgb, var(--t2-primary) 8%, var(--t2-surface)) !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15,23,42,.06),
    0 6px 14px -6px color-mix(in srgb, var(--t2-primary) 45%, transparent);
}
.d4ac-icon-btn:active{transform: translateY(0);}
.d4ac-icon-btn i{font-size: 14px !important; line-height: 1;}

/* Semantic variants */
.d4ac-icon-btn.danger:hover{
  color: #b91c1c !important;
  border-color: rgba(220,38,38,.4) !important;
  background: rgba(220,38,38,.08) !important;
  box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 6px 14px -6px rgba(220,38,38,.4);
}
.d4ac-icon-btn.success:hover{
  color: #15803d !important;
  border-color: rgba(22,163,74,.4) !important;
  background: rgba(22,163,74,.08) !important;
  box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 6px 14px -6px rgba(22,163,74,.4);
}

body.dark .d4ac-icon-btn{
  background: var(--t2-surface-2) !important;
  border-color: var(--t2-border) !important;
  color: var(--t2-text-2) !important;
}
body.dark .d4ac-icon-btn:hover{
  background: color-mix(in srgb, var(--t2-primary) 12%, var(--t2-surface-2)) !important;
  border-color: color-mix(in srgb, var(--t2-primary) 40%, var(--t2-border)) !important;
}

/* ---------- MOBILE (<=1199.98px) ---------- */
@media (max-width: 1199.98px){
  /* Hamburger button — always visible, polished pill */
  .cs_menu_toggle{
    background: var(--t2-surface) !important;
    border: 1px solid var(--t2-border-soft) !important;
    border-radius: 10px !important;
    width: 40px; height: 40px;
    color: var(--t2-text) !important;
    font-size: 20px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
    transition: all .22s var(--t2-ease);
    position: relative;
    top: auto; right: auto; margin-top: 0;
  }
  .cs_menu_toggle i{font-size: 20px; line-height: 1;}
  .cs_menu_toggle:hover{
    border-color: color-mix(in srgb, var(--t2-primary) 35%, var(--t2-border-soft)) !important;
    color: var(--t2-primary-700) !important;
    transform: translateY(-1px);
  }

  /* Off-canvas drawer — slides from RIGHT (hamburger is on right) */
  .cs_nav .cs_nav_list{
    position: fixed !important;
    top: 0 !important;
    right: -110vw !important;
    left: auto !important;
    bottom: 0 !important;
    width: 320px !important;
    max-width: 88vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
    background: var(--t2-surface) !important;
    padding: 14px 14px 24px !important;
    box-shadow: -12px 0 40px -10px rgba(15,23,42,.28) !important;
    border-left: 1px solid var(--t2-border-soft) !important;
    z-index: 111112 !important;
    transition: right .35s var(--t2-ease) !important;
    display: block !important;
  }
  .cs_nav .cs_nav_list.cs_active{
    right: 0 !important;
    left: auto !important;
  }
  /* Close (X) button — first <li> in drawer */
  .cs_nav .cs_nav_list > li:first-child{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--t2-border-soft);
  }
  .cs_menu_toggle_close{
    width: 36px; height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--t2-surface-2) !important;
    border: 1px solid var(--t2-border-soft) !important;
    border-radius: 10px !important;
    color: var(--t2-text) !important;
    font-size: 18px !important;
    cursor: pointer;
    transition: all .2s var(--t2-ease);
    position: static !important;
    top: auto !important; right: auto !important;
  }
  .cs_menu_toggle_close:hover{
    color: var(--t2-primary-700) !important;
    border-color: color-mix(in srgb, var(--t2-primary) 40%, var(--t2-border-soft)) !important;
  }
  .cs_menu_toggle_close i{font-size: 18px !important; line-height: 1;}

  /* Menu items in drawer — stacked, full-width, refined */
  .cs_nav .cs_nav_list > li{
    margin-right: 0 !important;
    width: 100%;
  }
  .cs_nav .cs_nav_list > li > a,
  .cs_nav .cs_nav_list a{
    display: block !important;
    width: 100%;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--t2-text) !important;
    margin-bottom: 2px;
    line-height: 1.4;
    transition: background .2s var(--t2-ease), color .2s var(--t2-ease);
  }
  .cs_nav .cs_nav_list > li > a:hover,
  .cs_nav .cs_nav_list a:hover{
    background: color-mix(in srgb, var(--t2-primary) 8%, var(--t2-surface-2)) !important;
    color: var(--t2-primary-700) !important;
  }
  .cs_nav .cs_nav_list > li > a.active,
  .cs_nav .cs_nav_list a.active{
    background: color-mix(in srgb, var(--t2-primary) 12%, var(--t2-surface-2)) !important;
    color: var(--t2-primary-700) !important;
  }

  /* Submenus — accordion style inside drawer */
  .cs_nav_list .menu-item-has-children ul{
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 0 6px 12px !important;
    margin: 0 !important;
    border-left: 2px solid var(--t2-border-soft);
    margin-left: 12px !important;
  }
  .cs_nav_list .menu-item-has-children ul li a{
    padding: 9px 10px !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center;
  }
  .cs_nav_list .menu-item-has-children ul li a h6{
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--t2-text) !important;
    margin-bottom: 0 !important;
  }
  .cs_nav_list .menu-item-has-children ul li a p{
    display: none;
  }
  .cs_nav_list .menu-item-has-children ul li a img{
    width: 26px !important;
    height: 26px;
    padding: 4px;
    background: var(--t2-surface-2);
    border: 1px solid var(--t2-border-soft);
    border-radius: 7px;
  }

  /* Right-side: compact wallet + tight icon row so hamburger stays visible */
  header .d-flex.gap-2,
  header .d-flex.gap-3{gap: 6px !important;}
  header .d-flex.gap-2.align-items-center > div.ms-3,
  header .d-flex.gap-2.align-items-center > div.ms-4{margin-left: 0 !important;}
  header .cs_menu_toggle.ms-1{margin-left: 0 !important;}
  header .right-lien > .btn-primary.ms-4{margin-left: 0 !important;}

  .user_dropdown > .dropdown-toggle{
    padding: 5px 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
  .right-lien{padding-left: 6px; margin-left: 0;}
  .right-lien::before{left: -2px !important;}
  .right-lien > .btn-primary,
  .user_dropdown.dropdown-arrow-none > .dropdown-toggle{width: 34px; height: 34px;}
  .right-lien > .btn-primary i,
  .user_dropdown.dropdown-arrow-none > .dropdown-toggle i{font-size: 15px !important;}
  .cs_menu_toggle{width: 36px !important; height: 36px !important; font-size: 18px !important; flex-shrink: 0;}
  .cs_site_branding img{max-height: 28px;}
  header .container-fluid{padding-left: 10px !important; padding-right: 10px !important;}

  /* Elevate header (so drawer inside it paints above backdrop) */
  body:has(.cs_nav_list.cs_active) header{
    z-index: 999999 !important;
    /* Remove backdrop-filter while drawer is open so it doesn't
       create a containing block for fixed descendants */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--t2-surface) !important;
  }
  /* Backdrop on body — full viewport dim, below elevated header */
  body::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s var(--t2-ease), visibility .25s var(--t2-ease);
  }
  body:has(.cs_nav_list.cs_active)::before{
    opacity: 1;
    visibility: visible;
  }
  /* Drawer above logo (z-index 101) within header */
  .cs_nav .cs_nav_list{z-index: 111113 !important;}
  .cs_nav .cs_nav_list.cs_active{z-index: 111113 !important;}
  /* Lock body scroll when drawer is open */
  body:has(.cs_nav_list.cs_active){
    overflow: hidden;
  }
}

@media (max-width: 480px){
  .cs_site_branding img{max-height: 28px;}
  .user_dropdown > .dropdown-toggle{padding: 6px 10px !important;}
}