/* ----------------------------------------------------------- */
/* ---------------------- COMMON STYLING --------------------- */
/* ----------------------------------------------------------- */

:root{
    --primary-color: #E9E6DF;

}

html{
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: "Calibri";
    font-weight: 400;
    color: #000;
}



strong{
    font-weight: 700;
}

a,span,strong{
    display: inline-block;
}

a:not([class]){
    color: #000;
    text-decoration: none;
}

a:not([class]):hover{
    text-decoration: underline;
}

.white-box{
    background-color: #fff;
    padding: 20px;
    border-radius: 14px;
}

.white-box.full-h{
    min-height: calc(100vh - 120px);
}

.white-box {
    overflow-x: hidden;
}
.card {
    width: 100%;
    box-sizing: border-box;
}
.data-table {
    width: 100%;
    padding: 0; /* Remove padding that could cause overflow */
}

.edit-button{
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: none;
    outline: none;
    border: none;
}

.heading-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 15px;
    margin-bottom: 15px;
}

.heading-box h2{
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 0;
}

.sub-heading{
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: #000;
    text-transform: capitalize;
    margin-bottom: 0;   
}

.mega-heading {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.3;
    color: #000;
}

.text-button{
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    color: #090A0A;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}

.text-button:hover{
    text-decoration: underline;
}

/* Popup */

.common-popup .btn-close{
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: 1;
    box-shadow: none;
    outline: none;
}

.common-popup .modal-content{
    border-radius: 20px;
    border: none;
}

.bankAccLinkedPopup-content .inner-wrapper{
    width: 100%;
    max-width: 320px;
    margin: 0 auto 10px;
    padding: 0 10px 20px;
    text-align: center;
}

.bankAccLinkedPopup-content strong{
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
}

.bankAccLinkedPopup-content .logos{
    text-align: center;
    margin: 25px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 280px;
}

.bankAccLinkedPopup-content h4{
    font-size: 18px;
    font-weight: 700;
    line-height: 35px;
    text-transform: capitalize;
}

.bankAccLinkedPopup-content .heading {
    margin-bottom: 25px;
}

.bankAccLinkedPopup-content .heading p{
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.bankAccLinkedPopup-content .check-points .point{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 30px;
    text-align: left;
    margin-top: 25px;
}

.bankAccLinkedPopup-content .check-points p span{
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    display: block;
}

.bankAccLinkedPopup-content .check-points p{
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    margin-bottom: 0;
}

/* ----------------------------------------------------------- */
/* ---------------- MULTI STEPS FORMS STYLING ---------------- */
/* ----------------------------------------------------------- */

.hidden {
    display: none;
}
.mf-steps {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    padding: 10px 0;
}

.mf-step {
    width: 25%;
    line-height: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 15px;
    position: relative;
}

.mf-step span {
    display: inline-block;
}

.mf-step .count {
    height: 34px;
    width: 34px;
    border-radius: 34px;
    line-height: 34px;
    background-color: #eff0f6;
    color: #6f6c8f;
    font-weight: 400;
}

.mf-step .step-title {
    font-weight: bold;
    text-transform: capitalize;
    width: 100px;
    min-height: 34px;
    color: #999999;
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
}

.mf-step::before {
    content: "";
    width: 60%;
    height: 6px;
    border-radius: 6px;
    background-color: #eff0f6;
    position: absolute;
    top: 15px;
    left: -30%; /* default LTR */
}

/* ✅ RTL Fix */
[dir="rtl"] .mf-step::before {
    left: auto;
    right: -30%;
}

/* Active/Visited */
.mf-step.visited .count,
.mf-step.active .count {
    background-color: #58d365;
    color: #fff;
    font-weight: 700;
}

.mf-step.visited .step-title,
.mf-step.active .step-title {
    color: #000;
    font-weight: 700;
}

.mf-step.visited::before,
.mf-step.active::before {
    background-color: #58d365;
}

/* Hide line on first step */
.mf-step:first-child::before {
    display: none;
}

.multi-step-form{
    width: 100%;
    margin: 40px auto;
    padding: 0 30px;
}

.multi-step-form .mx-450{
    max-width: 700px;
}

.multi-step-form .buttons{
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    column-gap: 10px;
}

.multi-step-form .buttons button[disabled]{
    opacity: 0.9;
    cursor: not-allowed;
}

.multi-step-form .buttons .previous{
    background-color: transparent;
    box-shadow: none;
    outline: none;
    padding: 0;
    line-height: 1;
    font-size: 22px;
    border: none;
}

.multi-step-form .buttons .my-button{
    margin: 0;
}

.multi-step-form .my-input{
    margin-bottom: 15px;
    padding-bottom: 20px;
    position: relative;
}

.multi-step-form .my-input .required-alert{
    position: absolute;
    bottom: -20px;
    left: 0;
    color: #ff0000;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}

.multi-step-form .my-input > .required-alert{
    bottom: 0;
}

.icon-heading{
    background-color: #f0f0f0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    max-width: max-content;
    padding: 4px 15px 4px 4px;
    margin-bottom: 15px;
}
.icon-heading .icon{
    background-color: #ffffff;
    border-radius: 14px;
    height: 40px;
    width: 40px;
    min-width: 40px;
    text-align: center;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.icon-heading span{
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}
.simple-info-table{
    width: 100%;
    max-width: 400px;
    margin-bottom: 25px;
}
.simple-info-table th,
.simple-info-table td{
    padding: 10px 20px 10px 0;
    font-size: 16px;
    line-height: 20px;
}
.simple-info-table th{
    text-transform: capitalize;
    font-weight: 400;
}
.simple-info-table td{
    font-weight: 700;
}
.text-highlighted{
    display: inline-block;
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 4px 12px 6px;
    line-height: 24px;
}
.alert-highlighted{
    font-weight: 400;
    display: inline-block;
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 4px 20px 4px 10px;
    margin-bottom: 30px;
}
.alert-highlighted span{
    font-weight: 600;
}
.alert-highlighted strong{
    font-weight: 700;
}

/* ----------------------------------------------------------- */
/* ------------------- FORM TABLE STYLING -------------------- */
/* ----------------------------------------------------------- */

.form-table-wrapper{
    background-color: #F0F0F0;
    border-radius: 10px;
    padding: 15px 0;
    min-height: 300px;
}

.form-table-wrapper .button-wrapper{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.form-table-wrapper .my-button{
    max-width: max-content;
    display: block;
    margin: 0;
    min-width: 130px !important;
    padding: 10px 15px !important;
}

.form-table-wrapper .table-responsive{
    background: transparent;
    margin-bottom: 15px;
}

.form-table-wrapper .table-responsive::-webkit-scrollbar{
    height: 3px;
}

.form-table-wrapper .table-responsive::-webkit-scrollbar-track{
    height: 3px;
    background: #222222;
    border-radius: 4px  ;
}

.form-table-wrapper table{
    background: transparent;
}

.form-table th,
.form-table td{
    background: transparent;
    text-align: center;
    font-size: 16px;
    line-height: 1;
}

.form-table th{
    font-weight: 700;
    padding: 10px;
}
.form-table td{
    font-weight: 400;
    padding: 10px;
}

.form-table .form-control{
    box-shadow: none;
    outline: none;
    border: 0;
    border-bottom: 2px solid #222222;
    color: #222222;
    font-size: 14px;
    line-height: 1;
    padding: 8px 0;
    min-height: 30px;
    min-width: 70px;
    background-color: transparent;
    border-radius: 0;
    font-weight: 600;
    text-align: center;
}

.form-table .form-control::placeholder{
    opacity: 1;
    color: #222222;
}

.form-table .td-number-field .form-control{
    min-width: 30px;
    max-width: 30px;
}

.form-table .td-date-field .form-control{
    min-width: 100px;
}

.form-table .td-upload-field .form-control{
    width: 90px;
    min-height: 30px;
}

.form-table .td-upload-field .form-control::file-selector-button {
    font-size: 0;
    padding: 0;
    border: 0;
}

.form-table .td-upload-field .input-group{
    flex-wrap: nowrap;
}

.form-table .td-upload-field .input-group-text{
    padding: 0;
    border: 0;
    background: none;
    margin-left: 10px !important;
    
} 

/* ----------------------------------------------------------- */
/* --------------- CONTACT FORM COMMON STYLING --------------- */
/* ----------------------------------------------------------- */

.form-wrapper .heading h2{
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.form-wrapper .form-para{
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 0;
}

.my-radio .form-check{
    margin: 0;
    margin-right: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    line-height: 1;
    
}

.my-radio .form-check .form-check-label{
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

.my-radio .form-check .form-check-input{
    float: none;
    margin: 0;
    box-shadow: none;
    height: 20px;
    width: 20px;
    background: #fff;
    border-color: #9CA3AF;
}

.my-radio .form-check .form-check-input:checked{
    background: #000;
}

.my-input .form-label{
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    color: #999999;
    margin: 0;
}

.my-input .form-control,
.my-input .form-select{
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    padding: 0;
    height: 50px;
}

.my-input .input-group {
    border-bottom: 1px solid #000;
}

.my-input .input-group input,
.my-input .input-group select{
    border-bottom: none;
}

.my-input .input-group .black-button,
.my-input .input-group .input-group-text{
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 6px 6px 0 0 !important;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 20px;
}

.my-input .input-group .black-button[disabled]{
    opacity: 1;
}

.my-input .input-group .black-button span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 7px;
}

.my-input .input-group.double-btn button:not(:last-of-type){
    margin-right: 10px;
}

.my-input .input-group button.transparent{
    background-color: transparent;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
    padding: 0 15px;
}

.my-input input[type="file"]{
    padding: 10px 0;
}

.my-input input::file-selector-button {
    height: 55px;
    font-size: 0;
    padding: 0;
    border: 0;
}

.my-checkbox .form-check{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    line-height: 1;
    padding: 0;
}

.my-checkbox .form-check-input{
    height: 15px;
    width: 15px;
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow: none;
    outline: none;
    margin: 0;
}

.my-checkbox .form-check-label{
    font-size: 13px;
    line-height: 15px;
    font-weight: 400;
    color: #000;
}

.my-checkbox.big .form-check-label{
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}

.my-checkbox .form-check-input:checked{
    background-color: #000;
}

.my-button {
    display: block;
    background-color: #000;
    color: #fff;
    width: 100%;
    max-width: 450px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    min-height: 54px;
    padding: 0 15px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important; /* always center text */
}


.my-button.sm{
    max-width: max-content;
    width: auto;
    margin: 0;
    display: inline-block;
}

a.my-button{
    min-height: unset;
    padding: 15px;
    text-decoration: none;
    line-height: 1;
}

.my-button.outline{
    background: transparent;
    color: #000;
}

.my-button.outline:hover{
    background: #000;
    color: #fff;
}

.search-form .input-group{
    background: #F3F4F6 !important;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    line-height: 1;
    padding: 0;
}

.search-form{
    width: 100%;
    max-width: 375px;
}

.search-form .input-group button{
    padding: 0;
    box-shadow: 0;
    height: 44px;
    border-radius: 0;
    line-height: 1;
    padding: 0 10px;
    outline: none;
}

.search-form .input-group button:hover img{
    filter: brightness(0);
}

.search-form .input-group .form-control{
    background: transparent !important;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    border: 0;
    outline: 0;
}

.my-select{
    border: 1px solid #D0D3D9;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 9px 16px;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 400;
    color: #000;
    appearance: none;
    outline: none;
    text-indent: 25px;
    background: url(../img/icon-calendar.png) no-repeat;
    background-position: left 10px center;
    background-size: 20px;
    line-height: 1;
}

.my-select.calander-filter{
    min-width: 110px;
}
/* ----------------------------------------------------------- */
/* ----------------- SIGNIN / SIGNUP STYLING ----------------- */
/* ----------------------------------------------------------- */

.authentication-wrapper{
    min-height: 100vh;
    background: #fff;
    position: relative;
}

.authentication-wrapper .row{
    min-height: 100vh;
}

.authentication-wrapper .left-side{
    display: flex;
    flex-direction: column;
    row-gap: 70px;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 30px 50px;
}

.authentication-wrapper .logo-box{
    width: 100%;
}

.authentication-wrapper .form-wrapper{
    width: 100%;
    max-width: 450px;
}

.authentication-wrapper .content-wrapper{
    background: var(--primary-color);
    display: flex;
    flex-direction: column;
    row-gap: 80px;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
    padding: 60px 50px 40px;
    border-radius: 20px 0 0 20px;
}

.authentication-wrapper .content-wrapper .mockup{
    width: 85%;
    max-width: 400px;   
}

.authentication-wrapper .content-wrapper .content{
    width: 100%;
    max-width: 700px;   
}

.authentication-wrapper .content-wrapper .content .heading{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 20px;
    margin-bottom: 15px;
}

.authentication-wrapper .content-wrapper h1{
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
}

.authentication-wrapper .content-wrapper p{
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    width: 100%;
    max-width: 600px;
    margin-bottom: 0;
}

.authentication-wrapper .my-input{
    margin-top: 40px;
}

.authentication-wrapper .my-radio{
    margin: 40px auto;
}

.authentication-wrapper .signup-wrapper .my-input:not(:first-child){
    margin-top: 20px;
}

.authentication-wrapper .agree-terms{
    margin: 25px auto 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.authentication-wrapper .agree-terms .forgot a{
    font-size: 13px;
    font-weight: 700;
    color: #000;
}

.authentication-wrapper .agree-terms p{
    font-size: 13px;
    font-weight: 400;
    color: #000;
}

.password{
    position: relative;
}

.password .showPassowrd{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    padding: 0;
    line-height: 1;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    color: #ABABAB;
    font-size: 14px;
}

.password .showPassowrd::before{
    content: "\f070";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.password .showPassowrd.active::before{
    content: "\f06e";
}

@media only screen and (min-width: 1500px){
    .authentication-wrapper .logo-box img{
        width: 200px !important;
    }
    .authentication-wrapper .content-wrapper .heading img{
        width: 150px !important;
    }
    .authentication-wrapper .content-wrapper .mockup{
        width: 85%;
        max-width: 500px;   
    }
}

.iti{
    display: block !important;
}

.iti--separate-dial-code .iti__selected-flag{
    background: #fff !important;
}

.iti__selected-flag{
    padding-left: 0 !important;
}

.iti__flag{
    border-radius: 3px;
}

.iti__arrow{
    display: none;
}


/* ----------------------------------------------------------- */
/* --------------------- DASHBOARD LAYOUT -------------------- */
/* ----------------------------------------------------------- */

/* Dashboard Layout */
.dashboard {
    min-height: 100vh;
    max-height: 100vh;
    background-color: #E9E6E0;
    display: flex;
    flex-direction: column;
}

.dashboard-header {
    height: 80px;
    background-color: #fff;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.dashboard-content {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1;
    min-height: calc(100vh - 80px);
}

/* Sidebar */
.dashboard-sidebar {
    width: 280px;
    background-color: #111;
    color: #ccc;
    border-top-right-radius: 12px;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.dashboard-sidebar .inner-layer {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.dashboard-sidebar .inner-layer::-webkit-scrollbar {
    width: 6px;
}

.dashboard-sidebar .inner-layer::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-item {
    margin-bottom: 4px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 8px;
    color: #aaa;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.25s, color 0.25s;
}

.sidebar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.sidebar-nav .nav-link .icon {
    width: 24px;
    height: 24px;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-nav .nav-link .icon img {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.25s;
}

.sidebar-nav .nav-link:hover .icon img {
    opacity: 1;
}

.sidebar-nav .nav-item.logout .nav-link {
    color: #e66;
}

.sidebar-nav .nav-item.logout .nav-link:hover {
    background-color: rgba(255, 80, 80, 0.1);
    color: #f44;
}

/* Main Content */
.dashboard-main-content {
    width: 100%;
    max-width: calc(100% - 280px);
    padding: 20px 8px;
    max-height: calc(100vh - 80px);
    overflow: auto;
}

.dashboard-main-content::-webkit-scrollbar {
    width: 10px;
}

.dashboard-main-content::-webkit-scrollbar-track {
    background-color: #fafafa;
}

.dashboard-main-content::-webkit-scrollbar-thumb {
    background-color: #000;
}

.dashboard-main-content > .container {
    min-height: 100%;
}

.white-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 24px;
    margin-bottom: 32px; /* 🔥 key to separate sections */
}

.heading-box h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #222;
}




/* ----------------------------------------------------------- */
/* --------------------------- HEADER ------------------------ */
/* ----------------------------------------------------------- */

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    flex-wrap: nowrap; /* prevent stacking at large screens */
}

.dashboard-header .logo-box {
    width: 100%;
    max-width: 300px;
}

.dashboard-header .logo-box img {
    width: 90px;
}

.dashboard-header .header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 25px;
    margin-left: auto;
}

.dashboard-header .nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding-right: 0;
    white-space: nowrap;
}


.dashboard-header .nav .nav-link {
    padding: 0;
    line-height: 1;
    position: relative;
    color: #222;
}

.dashboard-header .notification-anchor {
    position: relative;
}

.dashboard-header .notification-anchor .nav-link {
    display: inline-block;
    position: relative;
}

.dashboard-header .notification-anchor .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 999px;
    z-index: 2;
}

.dashboard-header .dropdown .nav-link,
.dashboard-header .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-header .user-info .details span {
    display: block;
    text-align: right;
    text-transform: capitalize;
    color: #222;
}

.dashboard-header .user-info .title {
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    margin-bottom: 3px;
}

.dashboard-header .user-info .designation {
    font-size: 11px;
    font-weight: 400;
    line-height: 13px;
}

.dashboard-header .user-info .avatar-box {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.dashboard-header .user-info .avatar-box img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.search-toggle-btn {
    display: none;
    border-radius: 0;
    line-height: 1;
    padding: 0;
    outline: none;
    box-shadow: none;
    filter: brightness(0);
}

.dropdown-menu.black {
    background: #000;
    border: none;
    box-shadow: none;
    border-radius: 20px;
    padding: 0;
    min-width: 200px;
    overflow: hidden;
}

.dropdown-menu.black .dropdown-item {
    text-align: center;
    color: #fff;
    background-color: transparent;
    text-transform: capitalize;
    font-size: 14px;
    padding: 15px;
}

.dropdown-menu.black li:not(:last-of-type) .dropdown-item {
    border-bottom: 1px solid #404040;
}

.dropdown-menu.black li:not(.user) .dropdown-item:hover {
    background-color: var(--primary-color);
    color: #222222;
}

@media screen and (max-width: 1023px) {
  .dashboard-header .nav {
    flex-wrap: nowrap;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }

  .dashboard-header .lang-switcher {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .dashboard-header .lang-switcher .btn {
    padding: 4px 10px;
    font-size: 13px;
  }
}


/* 🛠 Ensure lang-switcher aligns inline with profile & notifications */
.dashboard-header .lang-switcher {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

.dashboard-header .lang-switcher .btn {
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.2;
}

.dashboard-header .nav {
    flex-wrap: nowrap !important;
    align-items: center;
}


@media only screen and (max-width: 1024px) {
  .dashboard-main-content {
    max-width: 100%;        /* 👈 use full width */
    padding: 20px 15px;     /* 👈 more breathing room */
    max-height: unset;      /* 👈 allow content to grow naturally */
    overflow-x: hidden;     /* 👈 prevent horizontal scroll */
    overflow-y: auto;
  }
  
}



/* ----------------------------------------------------------- */
/* ------------------------- SIDEBAR ------------------------- */
/* ----------------------------------------------------------- */

.sidebar-trigger{
    border: none;
    box-shadow: none;
    background-color: #000;
    color: #fff;
    font-size: 20px;
    padding: 5px 10px;
    border-radius: 0 6px 6px 0;
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    white-space: nowrap;
}

.sidebar-trigger::before{
    content: "\f550";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.dashboard-sidebar.open .sidebar-trigger::before{
    content: "\f00d";
}

.dashboard-sidebar .inner-layer{
    height: 100%;
    padding: 24px;
    overflow-y: auto;
}

.dashboard-sidebar .sidebar-nav{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    row-gap: 10px;
    height: 100%;
}

.dashboard-sidebar .sidebar-nav .nav-item{
    width: 100%;
    padding: 0;
}

.dashboard-sidebar .sidebar-nav .nav-item.logout{
    margin-top: auto;
}

.dashboard-sidebar .sidebar-nav .nav-link{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 15px;
    line-height: 1;
    text-transform: capitalize;
    color: #5D6679;
    font-size: 16px;
    line-height: 2;
    font-weight: 600;
    padding: 10px 16px;
}

.dashboard-sidebar .sidebar-nav .nav-item .icon{
    font-size: 12px;
    width: 24px;
    line-height: 1;
}

.dashboard-sidebar .sidebar-nav .nav-item img{
    height: auto;
}

.dashboard-sidebar .sidebar-nav .nav-link.active,
.dashboard-sidebar .sidebar-nav .nav-link:hover{
    color: #fff;
}

.dashboard-sidebar .sidebar-nav .nav-link.active img,
.dashboard-sidebar .sidebar-nav .nav-link:hover img{
    filter: brightness(0) invert();
}

/* Notifications */

.notifications-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    margin-top: 50px;
}

.notifications-wrapper .notification{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 20px;
    row-gap: 5px;
    flex-wrap: wrap;
    width: 100%;
    text-decoration: none;
    border: 1px solid #f0f1f3;
    border-radius: 8px;
    padding: 20px 40px;
    color: #000;
}

.notifications-wrapper .notification.unread{
    border-color: #000;
    background-color: #e9e6df;
}

.notifications-wrapper .notification:hover{
    border-color: #000;
}

.notifications-wrapper .notification img{
    width: 25px;
    display: inline-block;
    margin-top: 3px;
    line-height: 1;
}

.notifications-wrapper .notification .time{
    width: 90px;
    display: inline-block;
    font-size: 13px;
    color: #000;
    font-weight: 700;
}

.notification .notification-info{
    width: 100%;
    max-width: calc(100% - 155px);
    font-size: 15px;
}

.notifications-wrapper .notification strong{
    font-weight: 700;
    display: block;
    margin-bottom: 0px;
    color: #000;
}

.notifications-wrapper .notification p{
    margin-bottom: 0;
    font-weight: 400;
    color: #777777;
}

/* Settings */

.avatar-uploader{
    border: 1px solid #E1E2E9;
    border-radius: 10px;
    padding: 22px;
    width: 173px;
    height: 173px;
    position: relative;
    margin: 50px 0 30px;
}

.avatar-uploader label{
    height: 100px;
    width: 100px;
    position: relative;
}
.avatar-uploader .avatar-buttons{
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px;
    column-gap: 10px;
    width: 100%;
}
.avatar-uploader .delete-avatar {
    height: 32px;
    width: 32px;
    cursor: pointer;
    border: none;
    outline: none;
    box-shadow: none;
    position: relative;
    background-color: transparent;
}
.avatar-uploader .file-input{
    height: 32px;
    width: 32px;
    cursor: pointer;
    position: relative;
}

.avatar-uploader .file-input img{
    pointer-events: none;
}

.avatar-uploader .file-input input{
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.avatar-uploader img.picture {  
    max-width: 100%;
    border-radius: 50%;
    transition: 200ms ease-in-out;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Bank Account */

.bank-account{
    margin-top: 50px;
}

.bank-account table{
    margin-bottom: 40px;
}

/* Dashboard */

.statistics-wrapper .row{
    row-gap: 50px;
}

.statistics-wrapper .stats{
    text-align: center;
    line-height: 1.2;
    height: 100%;
    position: relative;
    padding: 20px 0;
}

.statistics-wrapper .stats::after{
    content: "";
    height: 60%;
    width: 1px;
    background-color: #eee;
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
}

.statistics-wrapper .row > div:nth-of-type(5) .stats::after{
    display: none;
}

.statistics-wrapper .stats .icon{
    margin: 30px auto;
    text-align: center;
}

.statistics-wrapper .stats .stats-details{
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
}

.row .white-box{
    height: 100%;
}

.white-box .search-form.has-button{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 15px;
}

.white-box .search-form.has-button form{
    width: 100%;
    max-width: calc(100% - 60px);
}

.white-box .see-all-button{
    font-size: 16px;
    color: #000;
    min-width: 45px;
}

.data-table table{
    text-align: center;
    min-width: 500px;
}

.data-table table th{
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    padding: 10px 15px;
    border-color: #F0F1F3;
    min-width: 100px;
    vertical-align: middle;
}

.data-table table td{
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    padding: 15px;
    border-color: #F0F1F3;
}

.data-table table td a{
    font-weight: 700;
    color: #000;
}

.data-table table td a:hover{
    text-decoration: none;

}

.data-table .date{
    display: block;
    width: 100%;
}

.tableDataTabs .nav-tabs{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 25px;
    padding: 10px 0 17px;
    border-width: 1px 0 ;
    border-style: solid;
    border-color: #F0F1F3;
}

.heading-tabs .nav-tabs{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 25px;
    border: none;
}

.heading-tabs .nav-tabs .nav-link,
.tableDataTabs .nav-tabs .nav-link{
    border-radius: 0;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 400;
    outline: none;
    box-shadow: none;
    text-transform: capitalize;
    line-height: 1.3;
    border: none;
    border-bottom: 2px solid transparent;
    color: #000;
}

.heading-tabs .nav-tabs .nav-link{
    font-size: 20px;
    line-height: 1;
    border-width: 3px;
}

.heading-tabs .nav-tabs .nav-link.active,
.tableDataTabs .nav-tabs .nav-link.active{
    border-bottom-color: #000;
    font-weight: 700;
}

.data-table table td .percent-completed{
    color: #0043CE;
    font-weight: 700;
}

.data-table .status-td{
    min-width: 130px;
}

.data-table .status-td > *{
    display: block;
    line-height: 1;
}

.data-table .status-td .buttons{
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    text-align: left;
}

.data-table .status-td .button{
    border: none;
    line-height: 1;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    margin: 0 3px;
    background-color: transparent;
    transition: all 0.5s ease-in-out;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    column-gap: 10px;
    color: #0089ED;
    font-weight: 400;
    font-size: 14px;

}

.data-table .status-td .button:hover{
    transform: scale(1.05);
}

.data-table .status-td .button::after{
    content: "";
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.data-table .status-td .button.accept::after{
    background-image: url(../img/icon-check-outline.png);
}

.data-table .status-td .button.reject::after{
    background-image: url(../img/icon-cancel-outline.png);
}

.data-table .status-td .button.view::after{
    background-image: url(../img/icon-view.png);
}

.data-table .status-td .status-wrapper span,
.order-status-value{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    column-gap: 5px;
    line-height: 1;
}
.button2 {
    height: 40px;
    width: auto; /* Adjust width based on text */
    padding: 0 15px; /* Optional: Add horizontal padding for spacing */
    box-sizing: border-box; /* Ensure padding does not affect total width */
    font-size: 16px; /* Adjust font size if needed */
    line-height: 40px; /* Center text vertically */
}

.order-status-section {
    margin-top: 20px; /* Add space above the order status section */
    padding: 15px; /* Add padding inside the section */
    border: 1px solid #ddd; /* Add a border around the section */
    border-radius: 5px; /* Optional: Round the corners of the border */
    background-color: #f9f9f9; /* Optional: Add a background color for better distinction */
}

.confirm-button {
    background-color: #58D365; /* Green background */
}

.return-button {
    background-color: #dc3545; /* Red background */
}


.my-button2 {
    display: inline-block; /* Ensure the element respects width and height settings */
    /* width: 100%; Full width of its parent container */
    text-align: center; /* Center text */
    background-color: #e0e0e0; /* Gray background color to indicate disabled */
    color: #a0a0a0; /* Light gray text color */
    font-weight: bold; /* Make text bold */
    padding: 10px 20px; /* Padding for button-like appearance */
    border: none; /* Remove any border */
    border-radius: 5px; /* Rounded corners */
    cursor: not-allowed; /* Indicate disabled state */
    pointer-events: none; /* Prevent any interaction */
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.data-table .status-td .status-wrapper span::after,
.order-status-value::after{
    content: "";
    display: inline-block;
    height: 16px;
    width: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.data-table .status-td .status-wrapper span.accepted::after,
.data-table .status-td .status-wrapper span.completed::after,
.order-status-value.completed::after{
    background-image: url(../img/icon-check-solid.png);
}

.data-table .status-td .status-wrapper span.upcoming::after,
.data-table .status-td .status-wrapper span.upcoming::after,
.order-status-value.upcoming::after{
    background-image: url(../img/calendar.png);
}

.data-table .status-td .status-wrapper span.returned::after,
.order-status-value.returned::after{
    background-image: url(../img/icon-returned.png);
}

.data-table .status-td .status-wrapper span.pending::after,
.order-status-value.pending::after{
    background-image: url(../img/icon-timer.png);
}
.data-table .status-td .status-wrapper span.review::after,
.order-status-value.review::after{
    background-image: url(../img/icon-timer-review.png);
}
.data-table .status-td .status-wrapper span.late::after,
.order-status-value.late::after{
    background-image: url(../img/info-circle.png);
}

.data-table .status-td .status-wrapper span.replied::after,
.order-status-value.replied::after{
    background-image: url(../img/icon-reply.png);
}

.white-box .content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 50px;
    row-gap: 50px;
    height: calc(100% - 39px);
}

.white-box .content table th,
.white-box .content table td{
    padding-top: 5px;
    padding-bottom: 5px;
}

.action-buttons{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 10px;
    line-height: 1;
}

.action-buttons .button{
    padding: 10px 20px;
    color: #fff;
    border: none;
    border-radius: 6px;
    text-transform: capitalize;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    box-shadow: none;
    outline: none;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.action-buttons .button:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.action-buttons .button.accept{
    background-color: #58d365;
}

.action-buttons .button.decline  {
    background-color: #FF0031;
}

.payment-schedule-form td{
    border: none;
    padding: 5px 0 0;
}


.payment-schedule-form .table-input label{
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #999999;
}

.payment-schedule-form .table-input .form-control,
.payment-schedule-form .table-input .form-select{
    border-radius: 0;
    box-shadow: none;
    outline: none;
    border: none;
    border-bottom: 2px solid #000;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    padding: 5px 0;
    position: relative;
}

.payment-schedule-form .table-input .form-select option{
    color: #000;
}

.payment-schedule-form .table-input input[type="date"]::after{
    content: "";
    display: inline-block;
    height: 28px;
    width: 28px;
    background: url(../img/icon-date.png) no-repeat;
    background-size: 18px;
    background-position: center;
    background-color: #ffffff;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.payment-schedule-form td.paymentNo .table-input{
    width: 30px;
}

.payment-schedule-form td:not(.paymentNo) .table-input{
    width: 120px;
}

.payment-schedule-form td:not(:first-child) .table-input{
    margin-left: auto;
}

.progress-wrapper{
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 15px;
}

.progress-wrapper .progress-pulse{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    border: 2px solid #0043CE;
}

.progress-wrapper .progress-pulse span{
    height: 9px;
    width: 9px;
    border-radius: 9px;
    background: #0043CE;
    box-shadow: 0 0 0 0 rgba(0, 67, 206, 0.7);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 67, 206, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 67, 206, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 67, 206, 0);
    }
}

.progress-wrapper .progress-status{
    width: 100%;
    max-width: calc(100% - 55px);
}

.progress-wrapper .value{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    column-gap: 5px;
    line-height: 1;
    margin: 3px auto 10px;
}

.progress-wrapper .value h5{
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    margin-bottom: 0;
    color: #000;
}

.progress-wrapper .value span{
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0;
    color: #6F6F6F;
}

.progress-wrapper .progress{
    height: 10px;
    border-radius: 20px;
    background: #E0E0E0;
}

.progress-wrapper .progress .progress-bar{
    background: #0043CE;
    border-radius: 20px;
}

.white-box .history{
    max-height: 250px;
    overflow: auto;
}

.white-box .history::-webkit-scrollbar {
    width: 5px;
}

.white-box .history::-webkit-scrollbar-track {
    width: 5px;
    background-color: #fafafa;
}

.white-box .history::-webkit-scrollbar-thumb {
    background-color: #000;
}

.white-box .history p{
    margin-bottom: 5px;
}

.white-box .description p{
    font-size: 13px;
}

.order-status{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.order-status-value{
    justify-content: flex-start;
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
}

.order-status-value.pending{
    color: #FFD600;
}

.order-status-value.review{
    color: #767171;
}
.order-status-value.upcoming{
    color: rgb(13 110 253);
}
.order-status-value.late{
    color: #FF0031;
}
.order-status-value.returned{
    color: #FF0031;
}

.order-status-value.replied{
    color: #0089ED;
}

.order-status-value.completed{
    color: #58D365;
}

.white-box form .data-table th{
    font-weight: 700;
}

.white-box form .data-table td.description-td span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px; /* Adjust width as needed */
}

.white-box form .data-table th.product-name-td{
    min-width: 130px;
}

.white-box form .data-table .my-input.edit{
    padding: 0 20px 0 0 ;
    position: relative;
    max-width: max-content;
    margin: 0 auto;
}

.white-box form .data-table .my-input.edit::after{
    content: "";
    display: inline-block;
    height: 12px;
    width: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background: url(../img/icon-pencil.png) no-repeat;
    background-size: contain;
    background-position: center;
}

.white-box form .data-table .my-input .form-control{
    font-size: 16px;
    line-height: 1;
    padding: 0;
    height: unset;
    max-width: 100px;
}

.white-box form .data-table .my-input .form-control.quantity{
    width: 30px;
    /* margin: 0 auto; */
}

.white-box form .data-table .my-input input[type=number]::-webkit-inner-spin-button,
.white-box form .data-table .my-input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.white-box form .my-button{
    min-height: unset;
    padding: 15px;
    /* border-radius: 6px; */
    /* max-width: max-content; */
    margin: 0 auto;
}

.white-box form {
    position: relative;
}

.form-overlay{
    height: calc(100% - 50px);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 111;
    cursor: pointer;
}

.form-overlay.edit-mode{
    height: 0;
    width: 0;
}

.form-overlay:hover{
    background-color: rgba(0, 0, 0, 0.1);
}


.form-overlay + .data-table .my-input .quantity{
    display: none;
}

.form-overlay.edit-mode + .data-table .my-input .quantity{
    display: inline-block;
}

.status-select-menu{
    border: 1px solid #000 !important;
    outline: none;
    border-radius: 6px;
    padding: 7px 35px 7px 10px;
    background: url(../img/icon-message-edit.png) no-repeat;
    background-position: right 5px center;
    background-size: 24px;
    color: #000;
    text-transform: capitalize;
    max-width: max-content;
    margin: 0 auto;
    box-shadow: none !important;
}

.valign-middle table{
    vertical-align: middle;
}

.add-project-white-box{
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    border-radius: 34px;
    box-shadow: 0 5px 16px rgba(8, 15, 52, 0.06);
}

.add-project-white-box .inner-wrapper,
.add-project-white-box .buttons{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.add-project-white-box .inner-wrapper.big{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.add-project-white-box .inner-wrapper .my-input{
    margin-bottom: 0;
}

.add-project-white-box .draft-button{
    display: block;
    margin: 20px auto 0;
    max-width: max-content;
    background-color: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;

}

.tr-spacing td{
    padding-bottom: 15px;
}

.add-project-white-box .form-step .inner-wrapper{
    /* min-height: 400px; */
    margin-bottom: 20px;
}

.pdf-wrapper{
    background-color: #f0f0f0;
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 30px;
}

.pdf-wrapper object{
    width: 100%;
    max-height: 350px;
    min-height: 350px;
    overflow: auto;
    line-height: 1;
    margin-bottom: 0;
}

.blue-anchor{
    color: #0089ED;
    font-weight: 700;
}

.add-project-review .info span{
    color: #999999;
    display: block;
    margin-bottom: 15px;
}

.add-project-review .info span.title{
    font-size: 14px;
}

.file-view-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.file-view-popup .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}

.file-view-popup .popup-content img{
    max-width: 400px;
}

.file-view-popup .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.file-popup .btn-close{
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #fff;
    border-radius: 50%;
    padding: 8px;
    background-size: 10px;
    box-shadow: none;
    
    opacity: 1;
    z-index: 111;
    /* filter: invert(1); */
}

.review-project-info-table input,
.review-project-info-table select{
    border-color: #999 !important;
    color: #999 !important;
}

.pagination-wrapper {
    text-align: center;
    margin-top: 20px;
}

.pagination {
    list-style: none;
    display: flex;
    gap: 5px;
    justify-content: center;
    padding: 0;
}

.pagination li {
    font-size: 14px;
}

.pagination li a {
    display: inline-block;
    padding: 8px 12px;
    text-decoration: none;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.pagination li a:hover {
    text-decoration: none;
    background-color: #f0f0f0;
    color: #000;
}

.pagination li.active span {
    display: inline-block;
    padding: 8px 12px;
    background-color: #000;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #000;
}

.pagination li.disabled span {
    color: #999;
}

.pagination li a[aria-disabled="true"] {
    pointer-events: none;
    color: #ccc;
}

/* Calibri and Tahoma by direction, but exclude FA icons */
html[dir="ltr"] *:not(i[class^="fa"]):not(i[class*=" fa"]) {
  font-family: "Calibri", sans-serif !important;
}
html[dir="rtl"] *:not(i[class^="fa"]):not(i[class*=" fa"]) {
  font-family: "Tahoma", sans-serif !important;
}

/* Ensure FA icons render with correct font */
i[class^="fa"],
i[class*=" fa"] {
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal;
  font-weight: 900;
}




html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] body {
   text-align: right !important;
  direction: rtl !important;
}

html[dir="ltr"] label,
html[dir="ltr"] input,
html[dir="ltr"] body {
    text-align: left !important;
  direction: ltr !important;
}
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input#email {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input#email::placeholder {
    direction: rtl !important;
    text-align: right !important;
}


html[dir="rtl"] .form-check-input {
    margin-left: 0.4rem;
    margin-right: 0;
}

html[dir="rtl"] .dashboard-header .nav {
    flex-direction: row-reverse;
}

/* Sidebar font styling based on direction */
html[dir="ltr"] .dashboard-sidebar {
    font-family: "Calibri", sans-serif !important;
}

html[dir="rtl"] .dashboard-sidebar {
    font-family: "Tahoma", sans-serif !important;
}

html[dir="rtl"] .form-check-input {
    margin-left: 0.4rem;
    margin-right: 0;
}
[dir="rtl"] .modal-header .btn-close {
    position: absolute;
    left: 1rem;
    right: auto;
}
#pac-input {
    width: auto;
    max-width: 260px;
    font-size: 14px;
    padding: 6px 12px;
    margin: 12px;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
input.my-button[type="submit"] {
  text-align: center !important;
  direction: ltr !important; /* Ensures button layout stays neutral */
}

.notification-anchor {
    position: relative;
}

.child-list {
    position: absolute;
    top: 100%;
    min-width: 250px;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    padding: 10px;
    border-radius: 6px;
}

/* LTR */
:dir(ltr) .child-list {
    left: 0;
}

/* RTL */
:dir(rtl) .child-list {
    right: 0;
    text-align: right;
}
.price-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

:dir(rtl) .price-with-icon {
    flex-direction: row-reverse;
}

:root {
  --custom-ltr-font: "Calibri", sans-serif;
  --custom-rtl-font: "Tahoma", sans-serif;
}

html[dir="ltr"] {
  font-family: var(--custom-ltr-font);
}

html[dir="rtl"] {
  font-family: var(--custom-rtl-font);
}

.installment-dropdown-shade {
    background-color: #eef0f0 !important; /* light gray shade */
}
.installment-dropdown-shade td {
    background-color: #eef0f0 !important;
}

/* Sidebar mobile behavior */
@media (max-width: 1023px) {
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        background-color: #111;
        z-index: 1050;
        transition: left 0.3s ease-in-out;
    }

    .dashboard-sidebar.show {
        left: 0;
    }
}

/* Toggle button style */
.sidebar-hamburger-btn {
    position: fixed;
    top: 80px;                /* Adjust vertically to sit below logo */
    left: 0;                  /* Touches left edge */
    z-index: 1101;
    width: 80px;             /* Exact width from screenshot */
    height: 56px;             /* Exact height from screenshot */
    background-color: #000;
    color: #fff;
    border: none;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1024px) {
  .financial-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }

  .financial-scroll > div {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}