@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap');

@font-face {
    font-family: icomoon;
    src: url('/assets/css/fonts/icomoon.eot?z5ukzk');
    src: url('/assets/css/fonts/icomoon.eot?z5ukzk#iefix') format('embedded-opentype'), url('/assets/css/fonts/icomoon.ttf?z5ukzk') format('truetype'), url('/assets/css/fonts/icomoon.woff?z5ukzk') format('woff'), url('/assets/css/fonts/icomoon.svg?z5ukzk#icomoon') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block
}

:root {
    --sidebar-width: 240px;
    --panel-color: #2563eb ;
}

/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
    font-family: 'Cera Round Pro Regular';
    font-style: normal;
    font-weight: 400;
    src: local('Cera Round Pro Regular'), url('/assets/css/fonts/TypeMatesCeraRoundProRegular.woff') format('woff')
}

@font-face {
    font-family: 'Cera Round Pro Thin';
    font-style: normal;
    font-weight: 400;
    src: local('Cera Round Pro Thin'), url('/assets/css/fonts/TypeMatesCeraRoundProThin.woff') format('woff')
}

@font-face {
    font-family: 'Cera Round Pro Light';
    font-style: normal;
    font-weight: 400;
    src: local('Cera Round Pro Light'), url('/assets/css/fonts/TypeMatesCeraRoundProLight.woff') format('woff')
}

@font-face {
    font-family: 'Cera Round Pro Medium';
    font-style: normal;
    font-weight: 400;
    src: local('Cera Round Pro Medium'), url('/assets/css/fonts/TypeMatesCeraRoundProMedium.woff') format('woff')
}

@font-face {
    font-family: 'Cera Round Pro Bold';
    font-style: normal;
    font-weight: 400;
    src: local('Cera Round Pro Bold'), url('/assets/css/fonts/TypeMatesCeraRoundProBold.woff') format('woff')
}

@font-face {
    font-family: 'Cera Round Pro Black';
    font-style: normal;
    font-weight: 400;
    src: local('Cera Round Pro Black'), url('/assets/css/fonts/TypeMatesCeraRoundProBlack.woff') format('woff')
}

html body,
#sidebar-menu .menu-title {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important
}

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

label {
    font-weight: 500
}

.dd-list .dd3-content {
    font-weight: 400
}

.dark .home-options-list .select2-container--default .select2-selection--single {
    background-color: #3b4651;
    border-color: transparent
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important
}

input[type=radio],
input[type=checkbox] {
    cursor: pointer !important
}

[class*=" icon-"],
[class^=icon-] {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-feature-settings: liga;
    -moz-font-feature-settings: liga=1;
    -moz-font-feature-settings: liga;
    -ms-font-feature-settings: liga 1;
    font-feature-settings: liga;
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-dollar:before {
    content: "\e920"
}

.icon-orders:before {
    content: "\e90a"
}

.icon-dash:before {
    content: "\e90b"
}

.icon-vendor:before {
    content: "\e912"
}

.icon-customzie:before {
    content: "\e90c"
}

.icon-accounting:before {
    content: "\e913"
}

.icon-customer-2:before {
    content: "\e90d"
}

.icon-subscribe:before {
    content: "\e910"
}

.icon-settings-1-1:before {
    content: "\e90e"
}

.icon-profile:before {
    content: "\e90f"
}

.icon-styling:before {
    content: "\e911"
}

.icon-cms:before {
    content: "\e914"
}

.icon-catalogue:before {
    content: "\e915"
}

.icon-configuration:before {
    content: "\e916"
}

.icon-tax:before {
    content: "\e917"
}

.icon-payment-options:before {
    content: "\e918"
}

.icon-marketing:before {
    content: "\e919"
}

.icon-banners:before {
    content: "\e91a"
}

.icon-loyaltycard:before {
    content: "\e91b"
}

.icon-extra:before {
    content: "\e91c"
}

.icon-celebrity:before {
    content: "\e91d"
}

.icon-discount-voucher:before {
    content: "\e91e"
}

.icon-question:before {
    content: "\e91f"
}

.icon-clock:before {
    content: "\e94e"
}

[class^=icon-] {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-dollar:before {
    content: "\e920"
}

.icon-orders:before {
    content: "\e90a"
}

.icon-dash:before {
    content: "\e90b"
}

.icon-vendor:before {
    content: "\e912"
}

.icon-customzie:before {
    content: "\e90c"
}

.icon-accounting:before {
    content: "\e913"
}

.icon-customer-2:before {
    content: "\e90d"
}

.icon-subscribe:before {
    content: "\e910"
}

.icon-settings-1-1:before {
    content: "\e90e"
}

.icon-profile:before {
    content: "\e90f"
}

.icon-styling:before {
    content: "\e911"
}

.icon-cms:before {
    content: "\e914"
}

.icon-catalogue:before {
    content: "\e915"
}

.icon-configuration:before {
    content: "\e916"
}

.icon-tax:before {
    content: "\e917"
}

.icon-payment-options:before {
    content: "\e918"
}

.icon-marketing:before {
    content: "\e919"
}

.icon-banners:before {
    content: "\e91a"
}

.icon-loyaltycard:before {
    content: "\e91b"
}

.icon-extra:before {
    content: "\e91c"
}

.icon-celebrity:before {
    content: "\e91d"
}

.icon-discount-voucher:before {
    content: "\e91e"
}

.icon-question:before {
    content: "\e91f"
}

.icon-clock:before {
    content: "\e94e"
}

.domain-outer input#custom_domain {
    border: 0;
    border-left: 1px solid #ced4da;
    border-radius: 0
}

#sidebar-menu {
    width: 100%;
    height: 100%;
    overflow: auto;
}

#sidebar-menu::-webkit-scrollbar-track,
.nestable_list_1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px transparent;
    background-color: #fff;
    border-radius: 5px
}

#sidebar-menu::-webkit-scrollbar,
.nestable_list_1::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 5px
}

#sidebar-menu::-webkit-scrollbar-thumb,
.nestable_list_1::-webkit-scrollbar-thumb {
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 5px
}

#sidebar-menu .menuitem-active .active,
#sidebar-menu li.menuitem-active a.menu-maim-active {
    color: #000;
    font-weight: 600;
}

#sidebar-menu ul.nav-second-level li a:hover,
body #sidebar-menu a.menu-title.main-menu:hover,
#sidebar-menu .menuitem-active:has(> .show .menu-maim-active)>a {
    background: transparent;
    color: var(--panel-color) !important;
}

#sidebar-menu ul.nav-second-level .nav-second-level {
    border-radius: 8px;
    padding: 4px 0 !important;
    width: calc(100% - 15px);
    margin: auto !important;
    background: transparent;
}

#sidebar-menu ul.nav-second-level .nav-second-level a {
    background: transparent;
    border: 0;
    border-radius: 0;
}

#sidebar-menu ul.nav-second-level .nav-second-level li a {
    padding: 2px 11px;
    font-size: 12px;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    width: 100%;
}

/* Removed hover effect */
#sidebar-menu ul.nav-second-level .nav-second-level li .active.menu-maim-active {
    border: none;
    font-weight: 700 !important;
    background: transparent;
    color: var(--panel-color) !important;
    border-radius: 0;
}

#sidebar-menu ul.nav-second-level .nav-second-level li {
    margin-bottom: 0px !important;
}

#sidebar-menu ul.nav-second-level li a {
    color: #000;
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 25px 0px 0px 25px;
    border: 1px solid transparent;
    background: transparent;
    position: relative;
    margin-bottom: 8px;
}

#sidebar-menu ul.nav-second-level.first-nav-level li a::before,
#sidebar-menu ul.nav-second-level.nav-first-level li a::before {
    content: "";
    background: transparent;
    border: 1px solid #777d8f;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    display: inline-block;
}

.nestable_list_1 {
    height: 400px;
    overflow-y: auto
}

#vendor_search,
#product_is_live {
    background: #fff;
    border: none;
    box-shadow: 0 0 3px 0 #6273d8;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

#accounting_loyality_datatable_filter input {
    background: #fff;
    border: none;
    box-shadow: 0 0 3px 0 #6273d8;
    border-radius: 8px;
    font-size: 0.875rem;
}

.vendor-search input.form-control {
    border-radius: 8px
}

th {
    background: #fff !important;
    font-size: 0.875rem;
    color: #1e293b;
    font-weight: 700;
    text-transform: capitalize !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 8px 15px !important;
}

td {
    padding: 8px 15px !important;
}

th:first-child {
    border-top-left-radius: 8px !important;
}

th:last-child {
    border-top-right-radius: 8px !important;
}

.card-body.product_appointment_spa th {
    background: transparent !important;
    color: inherit !important;
}

.vendor-products .card {
    margin-top: -60px;
    background: 0 0
}

.vendor-products .nav-tabs .nav-item {
    z-index: 99;
    position: relative
}

.vendor-products table.dataTable {
    margin-top: 0 !important
}

.subscription-vendor-product .table thead th,
.vendor-products .table thead th {
    border-top: 0 !important;
    border-bottom: 1px solid #ddd
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
    bottom: auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%)
}

.table-responsive::-webkit-scrollbar {
    width: 6px !important;
    height: 6px
}

.table-responsive::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) !important;
    border-radius: 10px
}

.table-responsive::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1) !important
}

.login-form label {
    padding: 8px 10px;
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
    background-color: #ecf6ff;
    color: #000;
    font-size: 13px;
    letter-spacing: .5px;
    min-width: 80px;
    text-align: center
}

.login-form .blank-label {
    display: none
}

.login-form input[type=radio]:checked+label {
    color: #010101;
    background-color: #f8ecec;
    color: #000;
    font-size: 13px;
    letter-spacing: .5px
}

.login-form input {
    display: none
}

/* Global DataTables filter - ensure it's on the left */
.dataTables_filter {
    float: left !important;
    text-align: left !important;
}

.dataTables_filter label {
    float: left !important;
    text-align: left !important;
}

div.dataTables_wrapper div.dataTables_processing {
    z-index: 1;
    top: 45% !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    text-align: center
}

.login-form .custom-control-label::before {
    display: none
}

.pos-rel-tb {
    position: relative;
    top: 6px
}

.add-sub-task-btn {
    background-color: #ecf6ff;
    height: 42px;
    line-height: 42px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    display: block;
    cursor: pointer;
    border-radius: 4px;
    background-color: #ecf6ff;
    color: #000;
    font-size: 13px;
    letter-spacing: .5px;
    text-align: center;
    transition: all .3s ease-in-out 0s
}

.add-sub-task-btn:hover {
    color: #000;
    background-color: #f8ecec
}

.role_table_per .table-responsive {
    height: 680px;
    min-height: 680px;
    overflow-y: auto;
}

.role-left h4 {
    font-size: 16px;
}

.role-left a {
    display: block;
    background: #44bee1;
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
    padding: 4px 0px;
    border-radius: 16px;
}

.role-left ul li a {
    background: transparent;
    border-radius: 0px;
    font-size: 14px;
    color: #6e768e;
    text-align: left;
    padding: 10px 8px;
    margin: 0px !important;
}

.role-left ul li {
    list-style: none;
    padding: 0px;
    line-height: 10px;
}

.role-left ul li:nth-child(even) {
    background-color: #efefef;
}


.role-left ul li:nth-child(odd) {
    background-color: #fff;
}

.role_table_per .table-responsive tbody tr,
td span {
    vertical-align: top;
    padding-left: 0px;
    font-size: 13px;
}

.role-left ul li a:hover {
    color: var(--panel-color);
}

input[type="checkbox"] {
    accent-color: var(--panel-color);
}

.role-left ul {
    background: #fff;
    padding: 8px 8px !important;
    box-shadow: 2px 2px 8px 4px #a3a1a124;
    height: 290px;
    min-height: 290px;
    overflow-y: auto;
}



.upload-img-btn {
    background-color: #f8ecec;
    color: #000;
    font-size: 13px;
    letter-spacing: .5px;
    border: none
}

.taskselect {
    font-weight: 700
}

.style-cols .dropify-wrapper {
    height: calc(100% - 35px)
}

.remove-button .btn.btn-danger {
    padding: 0 10px 30px;
    font-size: 14px;
    right: -10px;
    line-height: 0;
    position: absolute;
    height: 100%;
    opacity: 0;
    width: 100%;
    top: 0;
    left: 0;
    text-align: right;
    background: rgb(0 0 0 / 31%);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    border: 0;
    border-radius: 0;
    margin: 0 !important;
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center
}


.module-role tr,
td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-role tr:nth-child(even) {
    background-color: #f7f7f7;
}


.tutorial_main_div .radio_new:hover .btn.btn-danger {
    opacity: 1
}

.last-child .col-12:last-child .mb-3 {
    margin-bottom: 0 !important
}

.catalog_box .card-box {
    margin: 0;
    padding: 0;
}

.dragula-handle::before {
    position: initial
}

.outer_box {
    border: 2px dashed #d2d0cd
}

/*add font size for selected product text*/
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: rgba(0, 0, 0, .514);
    font-size: 14px;
}

/*end here*/
.cate-vendor .form-group input.form-control {
    background-size: 15px;
    background-position: 80%;
}

.cate-vendor .form-group select.form-control {
    background-size: 15px;
    background-position: 80%;
}

span.inner-div {
    float: right
}

.nestable_list_1 span.inner-div {
    position: absolute;
    right: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%)
}

.dd-list .dd3-content {
    padding: 8px 20px 8px 16px
}

.nestable_list_1>.dd-list {
    padding: 0
}

.vendor-category .dd3-content {
    padding: 8px 16px
}

.dataTables_length select {
    width: 100% !important;
    padding: 2px 4px !important;
    height: auto !important;
}


.table-borderless td,
.table-borderless th {
    padding: 8px 10px 8px 0 !important
}

.dd {
    max-width: 100% !important
}

.outer-box {
    height: calc(100vh - 40vh);
    overflow: auto
}

span.view-password {
    position: absolute;
    top: 9px;
    right: 70px
}

.variant-row .card-body {
    background: #f3f7f9;
    padding: 12px
}

.vari.action-icon {
    padding: 0 1px;
    float: left
}

.dd-list .dd3-handle::before {
    content: "\F01DB" !important;
    font-family: "Material Design Icons";
    color: #adb5bd;
    font-size: 22px
}

.dragula-handle::before {
    top: 5px
}

#map-canvas {
    height: 90%;
    margin: 0;
    padding: 0;
    position: unset
}

.serch {
    width: 100%;
    margin: 0
}

.imageagent {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin-right: 15px
}

.cornar {
    border: 1px solid #ddd;
    padding-top: 10px;
    height: 240px;
    overflow-y: auto;
    padding: 10px
}

.teamshow {
    margin-left: 58px
}

.display {
    height: 35px;
    width: 67px
}

.boxes {
    margin-bottom: 10px;
    height: 100px
}

.new {
    vertical-align: initial !important;
    display: revert !important
}

#new_show {
    display: none
}

.search {
    background-color: #02f2cc
}

.card-box {
    padding: 15px 20px;
    margin-bottom: 24px !important;
    border-radius: 16px
}

.card-box.mb-0 {
    margin-bottom: 0 !important
}

#AddbrandBox {
    padding-bottom: 0
}

.select_all {
    position: relative;
    top: 8px
}

#show_map-canvas {
    height: 100%
}

.pac-container,
.pac-container .pac-item {
    z-index: 99999 !important
}

body[data-sidebar-size=condensed]:not([data-layout=compact]) {
    min-height: 900px !important
}

.card {
    border-radius: 12px;
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.06);
}

button.btn.btn-info.btn-block.save_btn {
    border-radius: 50px
}

body .switchery {
    height: 20px;
    width: 40px;
    box-shadow: none !important
}

body .switchery>small {
    width: 20px;
    height: 20px
}

.btn-info {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    min-width: auto;
    width: auto
}

/* ═══════════════════════════════════════
   DELAY TIME MODAL  (enhanced)
═══════════════════════════════════════ */
.delay_time .modal-content {
    border:none;
    border-radius:18px;
    box-shadow:0 24px 60px rgba(15,23,42,.18);
    overflow:hidden;
}
.delay_time .modal-header {
    background:#2563eb !important;
    border-bottom:none;
    padding:22px 24px;
    display:flex;
    align-items:center;
    gap:12px;
}
.delay-modal-icon {
    width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;
    color:#fff;flex-shrink:0;
}
.delay_time .modal-title {
    color:#fff;font-size:1.05rem;font-weight:700;
    margin:0;flex:1;letter-spacing:.01em;
}
.delay-modal-close {
    width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,.18);border:none;
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.9);cursor:pointer;
    transition:background .2s;padding:0;flex-shrink:0;
}
.delay-modal-close:hover { background:rgba(255,255,255,.3); }
.delay_time .modal-body {
    padding:26px 24px 20px;
    background:#fff;
}
.delay-modal-hint {
    font-size:.8rem;color:#64748b;
    background:#f8fafc;border-left:3px solid #2563eb;
    border-radius:0 8px 8px 0;
    padding:10px 14px;margin:0 0 22px;line-height:1.55;
}
.delay-input-wrap { display:flex;flex-direction:column;gap:7px; }
.delay-input-label {
    font-size:.82rem;font-weight:600;color:#374151;
    display:flex;align-items:center;gap:6px;
}
.delay-input-group {
    display:flex;align-items:center;
    border:1.5px solid #e2e8f0;border-radius:10px;
    overflow:hidden;background:#fff;
    transition:border-color .2s,box-shadow .2s;
}
.delay-input-group:focus-within {
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.delay-input-addon {
    padding:0 12px;color:#94a3b8;
    display:flex;align-items:center;flex-shrink:0;
}
.delay-input {
    border:none !important;box-shadow:none !important;
    border-radius:0 !important;flex:1;
    padding:11px 8px;font-size:.95rem;font-weight:500;
    color:#1e293b;background:transparent;
}
.delay-input:focus { outline:none;box-shadow:none !important; }
.delay-input-unit {
    padding:0 14px;font-size:.8rem;font-weight:600;
    color:#fff;background:#2563eb;
    align-self:stretch;display:flex;align-items:center;
    letter-spacing:.03em;
}
.delay_time .modal-footer {
    background:#f8fafc;
    border-top:1px solid #f1f5f9;
    padding:16px 24px;
    display:flex;align-items:center;justify-content:flex-end;gap:10px;
}
.delay-modal-cancel {
    padding:9px 20px;border-radius:8px;
    border:1.5px solid #e2e8f0;background:#fff;
    font-size:.85rem;font-weight:600;color:#64748b;
    cursor:pointer;transition:all .2s;
}
.delay-modal-cancel:hover { background:#f1f5f9;border-color:#cbd5e1;color:#374151; }
.delay-modal-save {
    display:inline-flex !important;align-items:center;gap:7px;
    padding:9px 22px !important;border-radius:8px;
    background:#2563eb !important;
    border:none !important;
    font-size:.85rem !important;font-weight:600 !important;
    color:#fff !important;cursor:pointer;
    box-shadow:0 4px 14px rgba(37,99,235,.3);
    transition:all .2s;letter-spacing:.01em;
    /* strip old badge styles */
    line-height:1.4 !important;white-space:nowrap;
}
.delay-modal-save:hover {
    background:var(--panel-color) !important;
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(37,99,235,.4);
}
.delay-modal-save:active { transform:translateY(0); }
/* legacy rule override */
.delay_time .modal-footer .buffer_time_btn {
    font-size:.85rem;padding:9px 22px;
}

input#is_hyperlocal {
    display: none !important
}

.sub-header {
    margin-bottom: 16px
}

.banner_wrapper {
    width: 30%
}

.banner_box {
    width: 400px;
    height: 160px
}

.banner_box img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

button.btn.btn-info.openBannerModal {
    min-width: auto
}

.social_head i {
    font-size: 16px;
    color: var(--panel-color);
    margin-right: 5px;
    height: 24px
}

.social_head .fab.fa-apple {
    font-size: 22px
}

.card-box.pb-0.mb-0 {
    margin-bottom: 0 !important
}

.side-icon {
    opacity: .5;
    margin-right: 5px;
    width: 18px
}

.pro-user-name {
    text-transform: capitalize
}

h1.control-label {
    font-size: 54px;
    font-weight: 700
}

.col-spacing {
    margin: 0 -8px
}

.col-spacing>div {
    padding: 0 8px !important
}

.web-style .dropify-wrapper.has-preview {
    margin: 0;
}

.home-options-list .select2-container--default .select2-selection--single {
    width: 100%;
    height: calc(1.5em + .9rem + 2px);
    padding: .45rem .9rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6c757d;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .2rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.home-options-list .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: normal
}

.home-options-list .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%)
}

.vendor-show-page .custom-dd {
    height: 400px;
    overflow: auto
}

.mb-0.text-left.alDropFile .dropify-wrapper.has-preview {
    margin: 0;
}

.mb-0.text-left.alDropFile label.logo-size.d-block.text-center.mt-1 {
    text-align: left !important;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: .45rem .9rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6c757d
}

body .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%)
}

body .select2-container .select2-selection--single {
    height: auto;
    border: 1px solid #ced4da
}

input[data-plugin=switchery] {
    display: none !important
}

body.dark {
    background: #303841
}

body.dark .navbar-custom {
    background: #3c4752
}

.btn {
    border-radius: 8px
}

.dark .home-options-list .dd-list .dd3-item {
    background: rgb(243 247 249 / 10%)
}

.dark .btn-blue:not(:disabled):not(.disabled).active,
.dark .btn-blue:not(:disabled):not(.disabled):active,
.dark .show>.btn-blue.dropdown-toggle,
body.dark .btn {
    border-radius: 50px;
    color: #fff;
    background-color: rgb(247 184 75 / 82%);
    border-color: rgb(247 184 75 / 82%)
}

.dark .btn-blue:not(:disabled):not(.disabled).active,
.dark .btn-blue:not(:disabled):not(.disabled):active,
.dark .show>.btn-blue.dropdown-toggle {
    box-shadow: none
}

#map-canvas {
    height: calc(100vh - 204px)
}

.geo_main #map-canvas {
    height: calc(100vh - 212px) !important
}

.cornar {
    margin: 0 -8px;
    border: 0;
    height: auto
}

.cornar>div {
    padding: 0 8px
}

.custom-checkbox .col-2 {
    width: 50px;
    max-width: max-content;
    flex: initial;
    padding: 0 0 0 10px
}

.custom-checkbox .col-10 {
    flex: auto;
    max-width: none;
    width: 164px;
    padding-right: 0
}

body.dark[data-sidebar-size=condensed] .left-side-menu #sidebar-menu>ul>li:hover>a {
    color: #36404a;
    background-color: rgb(247 184 75 / 82%);
    box-shadow: inset 1px 1px 5px 0 #323a42
}

body.dark .custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: rgb(247 184 75 / 82%);
    background-color: rgb(247 184 75 / 82%)
}

body.dark .radio label::after,
body.dark .radio-info input[type=radio]:checked+label::after {
    background-color: rgb(247 184 75 / 82%)
}

body.dark .radio input[type=radio]:checked+label::before,
body.dark .radio-info input[type=radio]:checked+label::before {
    border-color: rgb(247 184 75 / 82%)
}

.radio label {
    cursor: pointer;
    font-weight: 500;
    line-height: 16px
}

body.dark #sidebar-menu .menuitem-active .active,
body.dark #sidebar-menu>ul>li>a:active,
body.dark #sidebar-menu>ul>li>a:focus,
body.dark #sidebar-menu>ul>li>a:hover {
    background-color: #ecfbff;
}

body.dark .action-icon .mdi-square-edit-outline {
    color: rgb(247 184 75 / 82%)
}

body .tagsinput .tag {
    background: #ccc;
    color: rgba(0, 0, 0, .795);
    padding: 5px 30px 0 12px;
    border-radius: 50px;
    font-size: 12px
}

.table-responsive .form-group {
    margin-bottom: 0
}

.table td,
.table th {
    padding: 10px
}

.dataTables_scrollHead {
    height: 63px
}

.dataTables_scrollBody {
    height: 450px
}

.card_outer {
    height: calc(100vh - 234px)
}

.map-outer {
    min-height: calc(100vh - 284px)
}

.content-page {
    /* min-height: calc(100vh - 129px); */
    min-height: 100vh;
    padding: 0 0px 25px 0px;
    border-radius: 0;
    box-shadow: none;
}

#scroll-bar::-webkit-scrollbar-track,
.vendor-show-page .custom-dd::-webkit-scrollbar-track {
    height: 400px;
    overflow: auto
}

#scroll-bar::-webkit-scrollbar,
.vendor-show-page .custom-dd::-webkit-scrollbar {
    width: 6px;
    background-color: #f5f5f5
}

#scroll-bar::-webkit-scrollbar-thumb,
.vendor-show-page .custom-dd::-webkit-scrollbar-thumb {
    background-color: rgb(247 184 75 / 82%)
}

body.dark #form-tags-4_tagsinput {
    background: #36404a;
    border-color: rgb(247 184 75 / 82%);
    border-radius: 4px
}

body.dark .btn.btn-primary-outline.action-icon {
    background: 0 0;
    border: 0;
    color: rgb(247 184 75 / 82%)
}

#addCardBox .btn {
    border-radius: 0
}

.vendor_export_button {
    margin-top: -26px;
}

body.dark .tagsinput {
    background-color: transparent;
    border-color: rgb(247 184 75 / 82%)
}

.dark .login-form label {
    background-color: transparent;
    color: rgb(247 184 75 / 82%)
}

.dark .login-form input[type=radio]:checked+label {
    border-color: #d5a34c
}

.dark .gm-style .gm-style-iw-c {
    background-color: #333c44
}

.gm-style .gm-style-iw-c {
    padding: 12px !important
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important
}

.dark .gm-style .gm-style-iw-t::after {
    background: linear-gradient(45deg, rgb(48 56 64) 50%, rgb(51 60 68) 51%, rgb(48 56 64) 100%);
    box-shadow: -2px 2px 2px 0 rgb(178 178 178 / 40%)
}

.dark .user_info i,
.dark .user_name label {
    color: #d5a34c
}

.gm-ui-hover-effect {
    top: 0 !important;
    right: 0 !important
}

.cstmbtn.check_btn.btn.btn-info {
    border-radius: 0
}

.light .btn-info {
    color: #fff;
    background-color: var(--panel-color);
    border-color: var(--panel-color)
}

#phone_numberInput .iti {
    width: 100%
}

.btn-auto .btn.btn-blue.waves-effect {
    max-width: none;
    min-width: auto
}

body.dark .btn[data-toggle=dropdown] {
    color: #36404a
}

.input-group-text {
    cursor: pointer
}

body.dark .input-group-text {
    color: #d3a14a
}

.dark .add-sub-task-btn {
    background-color: rgb(247 184 75 / 82%)
}

.dark .add-sub-task-btn:hover {
    border-color: rgb(247 184 75 / 82%);
    background-color: rgb(247 184 75 / 60%)
}

.dark .selectize-dropdown,
.dark .selectize-input,
.dark .selectize-input input {
    color: #94a0ad
}

.selectize-input {
    padding: 9px 12px
}

.dark .selectize-control.single .selectize-input:after {
    border-color: #94a0ad transparent transparent transparent
}

.dark .assigned-block h5 {
    color: #94a0ad
}

.input-group-append .btn {
    border-radius: 0 !important
}

.dark input:checked~.switchery.switchery-default {
    border-color: rgb(247 184 75 / 82%) !important;
    background-color: rgb(247 184 75 / 82%) !important
}

.dark .radio-blue input[type=radio]:checked+label::after {
    background-color: rgb(247 184 75 / 82%) !important
}

.dark .select2-container--default .select2-selection--multiple {
    background-color: #3b4651
}

body[data-sidebar-size=condensed] .left-side-menu #sidebar-menu>ul>li>a span {
    padding-left: 0
}

body[data-sidebar-size=condensed] .left-side-menu #sidebar-menu>ul>li>a span {
    display: block
}

body[data-sidebar-size=condensed] .left-side-menu #sidebar-menu>ul>li>a span:last-child {
    display: none;
    padding-left: 25px
}

body[data-sidebar-size=condensed] .left-side-menu #sidebar-menu>ul>li:hover>a span:last-child {
    display: inline-block
}

.dark .primaryCurText+input[type=number] {
    background-color: #3b4651;
    background-clip: padding-box;
    border: 1px solid #424e5a;
    color: #94a0ad
}

#dark_theme+label::before {
    left: 0;
    top: 0
}

#light_theme+label::before {
    left: 0;
    top: 0
}

#exist_variant_div input {
    border: 1px solid #ced4da !important;
    color: #6c757d
}

#exist_variant_div input:focus-visible {
    outline: 0 !important
}

label.file-input.uploadImages img {
    height: 100%;
    object-fit: cover;
    width: 100%
}

label.file-input.uploadImages {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    overflow: hidden
}

.light input:checked~.switchery.switchery-default {
    border-color: #21BE00 !important;
    background-color: #21BE00 !important
}

.light .text-info {
    color: var(--panel-color) !important
}

.buttons-csv {
    border-radius: 8px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.round_img_box {
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 1px solid #dddd
}

.round_img_box img.rounded-circle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.table-responsive img.rounded-circle {
    height: 30px
}

#promo-datatable .promo_img {
    width: 100px;
    height: 100px;
    object-fit: contain
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: none !important
}

.selectize-input {
    padding: 9px 12px !important
}

.selector-option table {
    width: 1500px
}

.option_section td {
    vertical-align: baseline
}

.time-sloat {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: green;
    padding: 0 7px 3px;
    font-size: 12px;
    font-weight: 900
}

td.lasttd.d-flex.align-items-center.justify-content-center {
    position: absolute;
    right: 0px;
    background: #fff;
    width: 40px;
    height: 50px
}

.left-side-menu .logo span {
    max-height: 60px;
    width: auto;
    margin: auto
}

.left-side-menu .logo img {
    height: 100%;
    object-fit: contain;
    width: 100%
}

.left-side-menu .logo {
    padding: 0;
    top: 0px;
    position: relative;
    width: 100%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.left-side-menu .logo:hover {
    filter: grayscale(0)
}

.round_img .dropify-wrapper {
    height: 150px !important;
    width: 150px !important;
    margin: auto;
    border-radius: 50%
}

.round_img .dropify-wrapper .dropify-preview .dropify-render img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover
}

.round_img .dropify-wrapper .dropify-preview {
    padding: 0
}

.upload_box .dropify-wrapper {
    height: 150px !important
}

.upload_box .dropify-wrapper .dropify-preview {
    padding: 0
}

.upload_box .dropify-wrapper .dropify-preview .dropify-render img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.simplebar-content-wrapper {
    padding-bottom: 100px;
    height: 100%;
    /* overflow: hidden scroll !important; */
}

.order_detail {
    position: relative;
    margin-bottom: 10px !important
}


/* .order_detail:before {
    content: "";
    border-left: 1px solid var(--panel-color)e8;
    background-color: var(--panel-color)e8;
    position: absolute;
    height: calc(100% - 26px);
    left: -1px;
    top: 15px
} */

.left_arrow {
    width: 7px;
    height: 7px;
    position: absolute;
    left: -23px;
    top: 5px;
    background: var(--panel-color);
    border-radius: 50%
}


.order_head h4 {
    padding: 0 10px;
    font-size: 14px
}

.order_data>div {
    padding: 0 10px !important
}

.product_list .list-img {
    position: relative;
    list-style: none;
    height: 50px;
    width: 50px;
    margin: 0 auto
}

.product_list .list-img img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    border-radius: 50px
}

.items_price {
    list-style: none
}

.items_price {
    font-weight: 700;
    font-size: 12px;
    color: var(--panel-color);
    margin: 0
}

.item_no {
    top: -7px;
    right: -6px;
    background: var(--panel-color);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: 900
}

.status_box {
    list-style: none
}

.status_box li {
    margin: 0 0 10px
}

.status_box label {
    background: rgba(247, 184, 75, .25);
    color: #f7b84b;
    border-radius: 50px;
    padding: 0 5px
}

.in-progress label {
    background: rgba(247, 184, 75, .25) !important;
    color: #f7b84b !important
}

.paid {
    background-color: rgba(26, 188, 156, .25) !important;
    color: #1abc9c !important
}

.status_box i,
.status_box label {
    vertical-align: middle
}

.status_box .fa-spinner {
    color: #f7b84b !important
}

.status_box .fa-money-check {
    color: #1abc9c !important
}

.item_price {
    list-style: none
}

.item_price li {
    margin-right: 5px
}

.grand_total {
    border-top: 1px solid #e5e8eb !important;
    padding-top: 5px
}

.grand_total label,
.grand_total span {
    font-weight: 700;
    color: #000
}

.pulse {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--panel-color);
    cursor: pointer;
    box-shadow: 0 0 0 rgb(67 190 225 / 50%);
    position: absolute;
    left: -4px;
    top: 4px;
    animation: pulse-animation 2s infinite
}

@-webkit-keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .2)
    }

    100% {
        box-shadow: 0 0 0 20px transparent
    }
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .2)
    }

    100% {
        box-shadow: 0 0 0 20px transparent
    }
}

.price_box_bottom li {
    margin: 0 ;
    color: #6c757d
}

.price_box_bottom li:last-child {
    margin: 0
}

.order_detail:hover {
    color: var(--panel-color)
}

.status_box li img {
    opacity: .5
}

.card-box .background:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    opacity: .5;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: -1
}

.card-box .background {
    z-index: 1;
    position: relative
}

.brand-logo img.img-fluid {
    height: 50px
}

i.mdi.mdi-exclamation-thick {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgb(0 0 0 / 60%);
    display: inline-block;
    color: rgb(0 0 0 / 60%);
    cursor: pointer
}

.tooltip_error {
    /* position: absolute; */
    /* right: -87px; */
    background: #FFF;
    box-shadow: 0 0 5px #DDD;
    padding: 10px 15px 10px 30px;
    margin: 0;
    border-radius: 5px;
    opacity: 0;
    top: -100%;
    /* transform: translateY(-100%); */
    /* -webkit-transform: translateY(-100%); */
    /* max-height: 200px; */
    /* overflow-x: auto; */
    /* -webkit-transition: all .5s; */
    /* transition: all .5s; */
    /* color: rgb(255 0 0 / 80%); */
    /* line-height: 20px; */
    width: 661px;
    /* text-align: left; */
    /* z-index: -1; */
}

.tooltip_error li {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis
}

.alTooltipHover::after {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    width: 30px;
    height: 15px;
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 34px;
    background-color: #fff;
    box-shadow: 0 2px 5px #ddd;
    opacity: 0;
}

.alTooltipHover:hover .tooltip_error {
    opacity: 1;
    top: -10px;
    transform: 0;
    z-index: 999
}

.custom-control-label,
.select-category label {
    cursor: pointer
}

.form-check-input {
    display: none
}

.custom-radio.radio_new .custom-control-label::before,
.select-category label:before {
    border-radius: 0;
    clip-path: polygon(0 0, 0 35%, 35% 0);
    width: 140px;
    height: 120px;
    left: 0;
    top: 0;
    background-color: transparent;
    opacity: 0;
    content: "\F012C";
    font-family: "Material Design Icons";
    color: #fff;
    font-size: 20px;
    z-index: 1
}

.select-category {
    overflow: hidden
}

.select-category label:before {
    position: absolute;
    text-align: left
}

.custom-radio.radio_new .custom-control-label::before,
.select-category label:before {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s
}

.radio_new .custom-control-label::after,
.select-category label::after {
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    transition: all .7s
}

.radio_new .custom-control-label::after,
.select-category label::after {
    background: rgb(0 0 0 / 31%);
    background-image: none !important;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    content: "";
    position: absolute
}

.custom-control-input:checked~.custom-control-label::before,
.form-check-input:checked~label:before {
    background-color: var(--panel-color) !important;
    opacity: 1
}

.custom-radio.radio_new .custom-control-input:checked~.custom-control-label::after,
.form-check-input:checked~label::after {
    opacity: 1
}

.address_txt,
.address_txt .ellips_txt {
    width: 300px !important
}

.ellips_txt {
    margin: 0;
    display: block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.disabled {
    pointer-events: none
}

#sidebar-menu ul.nav-second-level {
    padding: 0 !important;
    margin: 0 !important;
}

#sidebar-menu ul.nav-second-level li a {
    color: #000;
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 25px 0px 0px 25px;
    border: 1px solid transparent;
    background: transparent;
    position: relative;
    margin-bottom: 8px;
}

#sidebar-menu li.menuitem-active a.menu-maim-active {
    margin-bottom: 8px;
}

#sidebar-menu .menuitem-active .active,
#sidebar-menu li.menuitem-active a.menu-maim-active {
    border-radius: 25px 0px 0px 25px !important;
    border-color: #C2D4F3;
    background: #fff;
    color: var(--panel-color);
    font-weight: 700;
    border-right-color: #fff;
    text-transform: capitalize;
}

.top-site-links li a {
    color: var(--panel-color) !important;
    transition: all .5s;
    border-radius: 20px;
    background: transparent !important;
    padding: 0px 5px;
    font-size: 12px;
    font-weight: 500;
    margin: 0 0px;
    border: 0 !important;
    display: flex;
    align-items: center;
}

.top-site-links li a i {
    top: 0;
    position: relative;
}

#sidebar-menu ul.nav-second-level li a .leftsidebar-icon {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification-list .profile-dropdown .notify-item {
    border-left: 3px solid transparent;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s
}

.notification-list .profile-dropdown .notify-item:hover {
    border-color: #343a40;
    background: linear-gradient(90deg, rgb(183 179 179 / 12%) 0, rgb(0 0 0 / 0%) 92.47%)
}

.notification-list .profile-dropdown .notify-item {
    padding: 7px 10px
}

.page-title-right input.form-control.border.form-control.input {
    height: auto
}

.page-title-right .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.description-txt p {
    font-size: 12px
}

.site-name {
    font-weight: 400
}

#sidebar-menu ul.nav-second-level .nav-second-level li a:hover {
    background: transparent;
    border: none;
}

.top-site-links li {
    list-style: none
}

.top-site-links li a {
    color: #6c757d;
    transition: all .5s
}

.top-site-links li:hover a {
    color: var(--panel-color)
}

.top-site-links li i {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 8px
}

.top-site-links li i.fa.fa-globe {
    font-size: 12px
}

.top-site-links li i.fab.fa-android {
    font-size: 16px
}

.alServiceTypeTop .dropdown-menu .dropdown-item {
    border-radius: 0;
}

.alServiceTypeTop .dropdown-menu .dropdown-item:hover,
.alServiceTypeTop .dropdown-menu .dropdown-item:focus,
.alServiceTypeTop .dropdown-menu .dropdown-item.active {
    color: var(--panel-color) !important;
}

.alServiceTypeTop .dropdown-menu .dropdown-item:hover i,
.alServiceTypeTop .dropdown-menu .dropdown-item:focus i,
.alServiceTypeTop .dropdown-menu .dropdown-item.active i,
.alServiceTypeTop .dropdown-menu .dropdown-item:hover span,
.alServiceTypeTop .dropdown-menu .dropdown-item:focus span,
.alServiceTypeTop .dropdown-menu .dropdown-item.active span {
    color: var(--panel-color) !important;
}

.alServiceTypeTop .dropdown-divider {
    border: 0 !important;
    margin: 0 !important;
}

.tab-product .nav-tabs .nav-item.show .nav-link,
.tab-product .nav-tabs .nav-link.active {
    background: 0 0;
    border-color: transparent;
    color: red
}

.tab-product .nav-material.nav-tabs .nav-item .nav-link {
    color: #555555;
    text-align: center;
    border: 0;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 14px;
    border-bottom: 2px solid transparent;
}

.tab-product .nav-material.nav-tabs .nav-link.active {
    color: var(--panel-color);
    border-bottom: 2px solid var(--panel-color);
}

.tab-product .nav-material.nav-tabs .nav-item .material-border {
    border-bottom: 2px solid var(--panel-color);
    opacity: 0
}

.tab-product .nav-material.nav-tabs .nav-link.active~.material-border {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    opacity: 1
}

.product-name h2 {
    font-size: 20px
}

.text-black {
    color: #343a40 !important
}

.common-table th {
    padding-bottom: 10px
}

.common-table td {
    border-top: 1px solid #ddd;
    padding-top: 15px;
    padding-bottom: 15px
}

.nav-second-level li a {
    position: relative;
}

.text-primary {
    color: var(--panel-color) !important;
}

/*dashboard pagination hover css remove */
.content-page li.paginate_button.page-item.active:hover {
    background: inherit !important;
    border: 1px solid transparent;
}

/*end here*/
.nav-second-level li .collapse li a:before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid #777d8f;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: 20px
}

#sidebar-menu ul.nav-second-level .nav-second-level li a:hover:before {
    border-color: var(--panel-color);
}

#sidebar-menu ul.nav-second-level .nav-second-level li a svg {
    display: none;
}

.navbar-custom .topnav-menu>li {
    float: none;
    display: inline-block;
    vertical-align: middle
}

.nav-user img {
    border-radius: 0%;
    margin-right: 5px;
    object-fit: contain;
}

/* Topbar notification badge */
.notification {
    text-decoration: none;
    padding: 1px 2px;
    position: relative;
    display: inline-block;
    border-radius: 2px;
}

.notification .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px 10px;
    border-radius: 50%;
    background: var(--panel-color);
    color: #ffffff;
}

/* Topbar breadcrumb & layout */
.navbar-custom .topbar-page-title {
    padding-left: 0;
    margin-left: 0;
    flex: 0 0 auto;
    /* keep title block on the left, no stretching */
}

.navbar-custom .topbar-page-title nav {
    display: block;
}

.navbar-custom .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

.navbar-custom .breadcrumb-item+.breadcrumb-item::before {
    content: "\F0142";
    color: #9ca3af;
}

.navbar-custom .breadcrumb a {
    color: #6b7280;
    font-weight: 500;
    font-size: 12px;
}

.navbar-custom .breadcrumb a:hover {
    color: var(--panel-color);
    text-decoration: none;
}

.navbar-custom .breadcrumb-item.active a,
.navbar-custom .breadcrumb-item.active {
    color: var(--panel-color);
    font-weight: 500;
    font-size: 12px;
}

/* Right side actions should align to the right */
.navbar-custom .top-site-links {
    margin-left: auto;
}

/* Topbar Mode Picker (static radios) */
.topbar-mode-picker {
	padding: 6px 12px 0;
	background: #f5f5f5;
}

.topbar-mode-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.topbar-mode-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.topbar-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.topbar-mode-img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: #ffffff;
    border: 2px solid transparent;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.topbar-mode-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topbar-mode-text {
    font-weight: 700;
    color: #0f172a;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid transparent;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.topbar-mode-input:checked + .topbar-mode-card .topbar-mode-img {
    border-color: var(--panel-color);
}

.topbar-mode-input:checked + .topbar-mode-card .topbar-mode-text {
    color: var(--panel-color);
    border-bottom-color: var(--panel-color);
}

@media (max-width: 1200px) {
    .topbar-mode-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .topbar-mode-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .topbar-mode-img {
        width: 76px;
        height: 76px;
    }
}

/* Dropdown spacing for top navbar only (avoid breaking Popper positioning elsewhere) */
.navbar-custom .dropdown-menu.show {
    top: calc(100% + 10px) !important;
}

.dashboard-boxes .avatar-lg {
    width: 52px;
    height: 52px;
    background: #fbfbfb !important;
    border-color: transparent !important
}

.dashboard-boxes .avatar-lg i {
    color: #ccc
}

body.light {
    background: #fcfdff;
}

.dashboard-boxes p {
    font-weight: 500;
    color: #000 !important
}

.dashboard-boxes .text-dark {
    font-size: 18px;
    font-weight: 900
}

.form-group.mb-0 input {
    margin: 0
}

#vendor_phone_number,
#new_user_phone_number {
    padding-left: 80px !important;
}

.modal-body .input-group-append .btn-dark,
.modal-body .input-group-append .btn-xs.btn-dark {
    float: right;
    position: absolute;
    right: 0;
}

/* ------------------------ al control panel css ------------------ */
.al_advanced_details {
    background-color: rgba(66, 190, 225, .09);
    border-radius: 2px
}

.al_advanced_details .nestable_list_1 {
    height: 270px
}

.al_advanced_details .dd-list .dd3-content {
    position: relative
}

.al_advanced_details .dd-list .dd-list li {
    list-style: none
}

.al_advanced_details .dd-list .dd3-content {
    background-color: #fff
}

.al_add_user h5 {
    color: var(--panel-color)
}

form#save_banner_form {
    background-color: #fff
}

.al_add_user {
    background-color: #f8f8f8;
    padding-top: 20px;
    margin-top: -16px
}

p.al_custom_title.mb-1 {
    font-weight: 600
}

.al_overall_form .dropify-wrapper {
    height: 160px
}

.al_overall_form .al_licence_imgbox .dropify-wrapper {
    height: 120px
}

.al_add_user .btn-group ul li {
    list-style: none;
    padding: 7px;
    margin-bottom: 5px;
    position: relative
}

.al_add_user .btn-group ul {
    padding: 0
}

.al_add_user .btn-group ul li small {
    color: var(--panel-color)
}

.al_add_user .btn-group ul li p {
    margin: 0
}

.al_add_user .btn-group .dropdown-menu .al_select_user {
    margin: 0;
    padding: 0 7px;
    position: relative
}

.al_add_user .user_img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    object-fit: cover
}

.al_add_user .btn-group .dropdown-menu .al_select_user sup {
    position: absolute;
    top: 18px;
    right: 10px;
    color: red
}

.al_add_user .btn-group .dropdown-menu li sup {
    top: 27px;
    right: 17px;
    position: absolute
}

.al_print_btn.badge.badge-info {
    height: 30px;
    margin-top: 20px;
    border: 0
}

#al_web_styling input[type="checkbox"] {
    margin: 0 10px
}

body .dropify-wrapper .dropify-clear {
    top: auto;
    bottom: 5px
}

button.btn.btn-secondary.btn-success.waves-effect.waves-light {
    background-color: var(--panel-color);
    height: 40px;
    border-color: var(--panel-color);
    box-shadow: none
}

.order_head h4 {
    opacity: 1
}

.al_box_height {
    height: 40px !important;
    padding-left: 4px !important
}

.al_order_sec {
    cursor: pointer;
}

/* modern clean order card */
.order-card {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
    border: 1px solid #eef2ff;
    padding-top: 14px;
}

.order-card-header {
    padding: 0 20px 14px;
    border-bottom: 1px solid #e5e7eb;
    margin: 0;
}

.order-card-header .alOrderStatus h4 {
    font-size: 11px;
     text-transform: capitalize;
    letter-spacing: 0.16em;
    color: #9ca3af;
    margin-bottom: 2px;
}

.order-card-header .alOrderStatus h4 {
    font-size: 11px;
     text-transform: capitalize;
    letter-spacing: 0;
    color: #000;
    margin-bottom: 2px;
    font-weight: 700 !important;
}

.order-card-header .alOrderStatus span {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
}

.order-card-header .ellips span {
    font-size: 13px;
}

.order-card-main {
    padding-top: 14px;
}

.order-card-main .order_detail {
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 18px 18px 14px;
}

#top-tabContent .row:has(.al_order_sec) {
    margin: 0;
}

.order-card-summary {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    border: 1px solid #eef2ff;
    background: #ffffff;
}

/* inside order body layout */
.al_order_sec .order_detail .row {
    align-items: center;
}

.al_order_sec .status_box {
    margin-top: 4px;
}

#update-single-status button {
    border-radius: 0.25rem;
}

#sidebar-menu ul.nav-second-level a {
    text-transform: capitalize !important;
}

.al_order_sec .status_box li img {
    width: 18px;
    height: 18px;
    margin-right: 4px;
}

.al_order_sec .status_box li label {
    font-size: 12px;
    font-weight: 500;
}

.al_order_sec .price_box_bottom label {
    font-size: 12px;
    color: #6b7280;
}

.al_order_sec .price_box_bottom span {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.al_order_sec .price_box_bottom .grand_total label {
    font-weight: 600;
    color: #111827;
}

.al_order_sec .price_box_bottom .grand_total span {
    font-size: 14px;
}

.al_order_sec:hover .order_head h4 {
    opacity: 1
}

.card-body.position-relative.al {
    padding-bottom: 10px
}

body div.dataTables_wrapper div.dataTables_paginate {
    float: right;
    padding-top: 10px
}

body div.dataTables_wrapper div.dataTables_info {
    height: 50px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center
}

/* .al_card{display:block;height:50px;box-shadow:0 3px 10px 0 #000!important;border-radius:10px!important;overflow:hidden} */
.al_card {
    display: block;
    height: 50px;
    /* box-shadow:0 3px 10px 0 #000!important; */
    border-radius: 10px !important;
    overflow: hidden
}

.al_card label {
    height: 50px;
    vertical-align: middle;
    padding: 0 10px;
    display: flex
}

body .main-customer-page .set-height {
    min-height: calc(100vh - 350px)
}

body .dataTables_scrollBody {
    height: auto
}

.content .al_custom_cke .cke {
    margin-top: .5em
}

.content .al_custom_cms_page ol a {
    border: 0
}

body .order-list-view .dd-list .dd-nochildren .dd-handle+.dd3-content {
    padding: 5px 25px !important
}

body .order-list-view .dd-list .dd-expand+.dd-handle.dd3-handle,
body .order-list-view .dd-list .dd-item .dd-handle {
    padding: 10px 0
}

body .row.rowYK.al_row_table #banner-datatable.table th {
    padding: 0 12px !important;
    font-weight: 500
}

body .row.rowYK.al_row_table #banner-datatable.table td {
    padding-left: 12px !important;
    padding-right: 12px !important
}

.al_print_btn.badge.badge-info {
    height: 30px;
    margin-top: 20px;
    border: 0
}

.alOrderViewPage .track-order-list ul li:last-child {
    border: none;
}

.alOrderViewPage #order_statuses {
    padding-left: 20px;
}

.track-order-list ul li:before {
    top: -4px;
}
.selectize-control.single .selectize-input:after {
    transform: rotate(0)
}

body .selectize-control.single .selectize-input.dropdown-active:after {
    transform: rotate(0)
}

body .swal2-styled.swal2-cancel {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: transparent;
    color: transparent;
    font-size: 10px;
    position: absolute;
    top: -30px;
    right: -30px
}

body .swal2-styled.swal2-cancel:before {
    position: absolute;
    content: "x";
    background-color: red;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    color: #fff;
    font-size: 30px;
    line-height: 1
}

body .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image: none
}

body .swal2-icon.swal2-info.swal2-icon-show {
    display: none !important
}

body .swal2-styled.swal2-confirm {
    padding: 5px 50px;
    text-transform: capitalize
}

body .dropify-wrapper {
    height: 100px
}

body .dropify-wrapper .dropify-message p {
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 400
}

body .dropify-wrapper .dropify-message p.dropify-error {
    color: red;
    font-weight: 400
}

body .dropify-wrapper .dropify-message span.file-icon {
    font-size: 30px
}

body .menu-title+.nav-second-level>li>a span:first-child {
    vertical-align: top
}

.menu-title+.nav-second-level>li>a:hover img {
    filter: grayscale(0)
}

.menu-title+.nav-second-level>li>a:hover .cls-1,
.menu-title+.nav-second-level>li>a:hover .cls-2 {
    fill: var(--panel-color)
}

body .custom-select,
body .form-control {
    height: 40px
}

/* .navbar-custom {border-radius: 0 0 0 10px;width: calc(100% - 268px);} */
.editVariantBox .selectize-input .item {
    white-space: nowrap
}

body .content-page .btn.btn-info {
    background-color: transparent;
    border-radius: 50px;
    color: var(--panel-color);
    border-width: 2px;
    font-family: 'Cera Round Pro Medium';
    padding-top: 5px;
    padding-bottom: 5px;
    border-style: solid
}

body label {
    font-family: 'Cera Round Pro Regular'
}

.menu-title+.nav-second-level>li>a {
    -webkit-transition: .5s;
    transition: .5s
}

.menu-title+.nav-second-level>li>a:hover {
    padding-left: 20px;
    background-color: #ecfbff;
    border-radius: 5px
}

#sidebar-menu .menuitem-active .active {
    background-color: var(--panel-color);
    border-radius: 5px;
    color: #fff
}

body .btn-blue {
    background-color: var(--panel-color);
    border-color: var(--panel-color)
}

.color_a .card-body {
    border-radius: 10px;
    background-color: var(--card_color_a) !important;
    color: var(--card_color_a) !important
}

.color_a .card-body i svg {
    fill: var(--text_color_a)
}

.color_b .card-body {
    border-radius: 10px;
    background-color: var(--card_color_b) !important;
    color: var(--card_color_b) !important
}

.color_b .card-body i {
    color: var(--text_color_b)
}

.color_c .card-body {
    border-radius: 10px;
    background-color: var(--card_color_c) !important;
    color: var(--card_color_c) !important
}

.color_c .card-body i {
    color: var(--text_color_c)
}

.color_d .card-body {
    border-radius: 10px;
    background-color: var(--card_color_d) !important;
    color: var(--card_color_d) !important
}

.color_d .card-body i svg {
    fill: var(--text_color_d)
}

.color_e .card-body {
    border-radius: 10px;
    background-color: var(--card_color_e) !important;
    color: var(--card_color_e) !important
}

.color_e .card-body i svg {
    fill: var(--text_color_e)
}

.color_f .card-body {
    border-radius: 10px;
    background-color: var(--card_color_f) !important;
    color: var(--card_color_f) !important
}

.color_f .card-body i svg {
    fill: var(--text_color_f)
}

.color_g .card-body {
    border-radius: 10px;
    background-color: var(--card_color_g) !important;
    color: var(--card_color_g) !important
}

.color_g .card-body i {
    color: var(--text_color_g)
}

.color_h .card-body {
    border-radius: 10px;
    background-color: var(--card_color_h) !important;
    color: var(--card_color_h) !important
}

.color_h .card-body i {
    color: var(--text_color_h)
}

.color_i .card-body {
    border-radius: 10px;
    background-color: var(--card_color_i) !important;
    color: var(--card_color_i) !important
}

.color_i .card-body i svg {
    fill: var(--text_color_i)
}

.color_j .card-body {
    border-radius: 10px;
    background-color: var(--card_color_j) !important;
    color: var(--card_color_j) !important
}

.color_j .card-body i svg {
    fill: var(--text_color_j)
}

.al_color_box .card-body h3,
.al_color_box .card-body p {
    color: var(--textDark_color) !important
}

body .menu-title+.nav-second-level>li>a span:first-child {
    font-size: 20px
}

body .menu-title+.nav-second-level>li>a {
    font-size: 14px
}

.al_color_box .card-body .rounded-circle {
    background-color: transparent !important
}

body #sidebar-menu .menu-title {
    color: #000 !important;
    font-family: 'Cera Round Pro Medium'
}

#sidebar-menu .menuitem-active .active svg,
#sidebar-menu .menuitem-active .active svg path {
    fill: #fff !important
}

.language-input.style-4 {
    overflow: auto;
    max-width: fit-content;
    width: 500px
}

span.icon-verification-options svg path {
    fill: #6e768e
}

span.icon-estimation svg path {
    fill: #6e768e
}

.vendor-page .tab-content {
    padding: 40px 0 0 !important;
}

.content-page .content {
    padding-top: 0
}

.form-group.mb-0 .tagsinput {
    padding: 2.5px;
    border: 1px solid #ced4da;
    border-radius: .2rem
}

th {
    font-weight: 600
}

.file--upload {
    position: relative;
    overflow: hidden;
    border-radius: 12px
}

.file--upload>label .fa-user:before {
    content: "\f007";
    position: relative;
    top: 10px
}

.file>input[type=file] {
    display: none
}

.file>label {
    cursor: pointer;
    outline: 0
}

.file>label:hover {
    border-color: #353535
}

.file>label:active {
    background-color: #f4f4f4
}

.file>label>i {
    padding-right: 5px
}

/* ===================== dashboard ======================== */
.apexcharts-canvas .apexcharts-legend.position-bottom .apexcharts-legend-series {
    display: block;
    align-items: end;
    clear: both;
    width: 100%;
    text-align: right;
}

.apexcharts-canvas .apexcharts-legend.position-bottom.apexcharts-align-center {
    justify-content: center;
    max-width: 260px;
    margin: 0 auto;
}

.web-style .alSignUpImageControal .dropify-wrapper.has-preview {
    width: 100%;
    max-width: 100%;
}

/* .card-body.al_custom_control .alThemeDemoSec:nth-child(5) {display: none;} */
#alDashboardStyle h2.fw-normal.mb-3 span,
#alDashboardStyle h3 {
    color: #555657;
}

.dark #alDashboardStyle h2.fw-normal.mb-3 span,
.dark #alDashboardStyle h3 {
    color: #c6c6c6;
}

#alDashboardStyle h3 {
    font-weight: 600 !important;
}

#alDashboardStyle h5 {
    color: #777;
}

.dark #alDashboardStyle h5 {
    color: #98a6ad;
}

.alDasBoxItems span.text-nowrap {
    padding-left: 8px;
}

.card-body.alRevenueBox {
    min-height: 364px;
}

.card.alDasBoxItems {
    min-height: auto;
}

.alRevenueByLocation {
    min-height: 585px;
}

.dark #alDashboardStyle h3 {
    color: #c6c6c6;
}

.al_new_export_table.royo_customber_btn.table_customber_add .position-absolute.mb-2 {
    z-index: 999;
    right: 0;
    margin: 0 !important;
    text-align: right;
}

.al_new_export_table.royo_customber_btn.table_customber_add .row.mt-1.sml_royo-responsive {
    margin-top: -40px !important;
}

.al_new_export_table.royo_customber_btn.table_customber_add .row.mt-1.sml_royo-responsive .tab-pane .card-body {
    padding: 10px 0;
}

.alCustomCheckBoxText input[type="radio"]:checked,
.alCustomCheckBoxText input[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.alCustomCheckBoxText input[type="radio"]:checked+label,
.alCustomCheckBoxText input[type="radio"]:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

.alCustomCheckBoxText input[type="radio"]:checked+label:before,
.alCustomCheckBoxText input[type="radio"]:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

.alCustomCheckBoxText input[type="radio"]:checked+label:after,
.alCustomCheckBoxText input[type="radio"]:not(:checked)+label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--panel-color);
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.alCustomCheckBoxText input[type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.alCustomCheckBoxText input[type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* dark dashboard css start */
.dark body div.dataTables_wrapper div.dataTables_info {
    color: #94a0ad;
}

.dark .al_add_user,
.dark form#save_banner_form {
    background-color: #424e5a;
}

.dark .dropify-wrapper {
    background-color: #3b4651;
}

.dark .dropify-wrapper:hover {
    background-image: -webkit-linear-gradient(135deg, #424e5a 25%, transparent 25%, transparent 50%, #424e5a 50%, #424e5a 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, #424e5a 25%, transparent 25%, transparent 50%, #424e5a 50%, #424e5a 75%, transparent 75%, transparent);
}

.dark .navbar-custom ul.list-unstyled.topnav-menu .alLanguageTop .nav-link.waves-effect {
    color: #acbfd2;
}

.card.changeIcon {
    box-shadow: none !important;
}

.outer-box.border-dashed {
    border-style: dashed;
    border-width: 2px;
    height: 100%;
    min-height: 80px;
    border-radius: 7px;
    overflow: hidden;
}

.alProDuctBannerImg {
    position: relative;
    padding-bottom: 100%;
    border-radius: 7px;
    overflow: hidden;
}

.alProDuctBannerImg img.w-100 {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    height: 100%;
}

.alProDuctBannerImg span {
    position: absolute;
    z-index: 1;
    background-color: red;
    right: 0px;
    top: 0;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    line-height: 23px;
    color: #fff;
    font-weight: 400;
}

.dark .dd-list .dd-item .dd-handle {
    background: transparent;
}

.dark .content h1,
.dark .content h2,
.dark .content h3,
.dark .content h4,
.dark .content h5 {
    color: #acbfd2;
}

.dark .content .tabs_radio_controls h5 {
    color: #000;
}

.dark #edit_page_content label.control-label {
    color: #acbfd2;
}

.dark .price_box_bottom li,
.dark .cms-content .form-control {
    color: #acbfd2;
}

.dark .status_box li img {
    opacity: 1;
    background: #ffffff4d;
    border-radius: 25px;
}

.dark .flatpickr-months .flatpickr-month,
.dark .flatpickr-months .flatpickr-prev-month,
.dark .flatpickr-months .flatpickr-next-month,
.dark .flatpickr-day,
.dark span.flatpickr-weekday {
    color: #acbfd2;
    fill: #acbfd2;
}

.dark .flatpickr-calendar.open {
    background: #303841;
}

.dark .flatpickr-day.flatpickr-disabled,
.dark .flatpickr-day.flatpickr-disabled:hover,
.dark .flatpickr-day.prevMonthDay,
.dark .flatpickr-day.nextMonthDay,
.dark .flatpickr-day.notAllowed,
.dark .flatpickr-day.notAllowed.prevMonthDay,
.dark .flatpickr-day.notAllowed.nextMonthDay {
    color: #6d767f;
}

.dark .form-control-light {
    background-color: #3b4651 !important;
    border-color: #3b4651 !important;
}

#alDashboardStyle h5 {
    text-transform: capitalize;
}

.dark .table,
.dark .progress-w-percent .progress-value {
    color: #acbfd2;
}

.dark .progress {
    background-color: #303841;
}

.dark .dd-list .dd3-content {
    background: rgba(66, 190, 225, .09);
}

.dark .modal-content {
    background-color: #424e5a;
}

.dark .border-bottom {
    border-bottom: 1px solid #424e5a !important;
}

.dark .modal-content label {
    color: #acbfd2;
}

.dark .modal-content .form-control {
    color: #94a0ad;
    background-color: #3b4651;
    border: 1px solid #424e5a;
}

.dark .close {
    color: #f7f7f7;
}

.dark #alLightBg {
    background-color: #3b4651;
}

#UpdateSubadmin .table-borderless td,
#UpdateSubadmin .table-borderless th {
    padding: 8px 10px 8px 10px !important;
}

.dark .dropzone {
    background: #3b4651;
}

.dark .selectize-input {
    border: 1px solid #424e5a;
}

.order_data_box .error-msg {
    font-size: 20px;
    position: relative;
    width: 100%;
    top: 0;
    -webkit-transform: translate(0px, 0);
    transform: translate(0px, 0%);
}

.alDeliveryOptionsPage .switchery-demo label {
    margin: 0 !important;
}

.dark .table thead th {
    background: #32383e;
    border: none;
}

/* dark dashboard css end */

.file--upload>label {
    width: 100%;
    margin: 0;
    display: inline-block
}

/*=========   start Rate for Vendor css 02-03-2023  ===========*/
button.add_edit_driver_review {
    background: var(--panel-color);
    border: 1px solid var(--panel-color);
    color: #fff;
    border-radius: 15px;
    font-size: 12px;
    text-transform: capitalize;
    display: inherit;
    padding: 4px 17px;
    font-weight: 500;
    letter-spacing: 1px;
}

button.add_edit_driver_review:hover {
    background: transparent;
    color: var(--panel-color);
}

.driver_rating_vendor div#vendor_rating h4 {
    font-size: 30px;
    text-align: center;
    font-weight: 900 !important;
    margin-bottom: 20px;
}

.driver_rating_vendor div#vendor_rating .rating-form .form-item {
    width: auto;
    text-align: center;
}

.driver_rating_vendor div#vendor_rating button#review_agent_form_button {
    background: var(--panel-color);
    color: #fff;
    margin: 10px auto 20px;
    text-align: center;
}

.driver_rating_vendor div#vendor_rating .form-row .col-md-12 {
    text-align: center;
}

.driver_rating_vendor .modal-content {
    border-radius: 10px;
}

/*=========   end Rate for Vendor css 02-03-2023  ===========*/

.file--upload>label:active {
    background-color: transparent
}





html body .scroll_res .selectize-dropdown .selectize-dropdown-content::-webkit-scrollbar:horizontal {
    height: 5px !important;
}

html body .scroll_res .selectize-dropdown-content {
    overflow: auto !important;
}

html body .scroll_res .selectize-dropdown [data-selectable] {
    overflow: unset !important;
}

button.add_edit_driver_review {
    background: transparent;
    border: 2px solid var(--panel-color);
    color: var(--panel-color);
    width: 90%;
    border-radius: 50px;
    font-size: 14px;
    text-transform: capitalize;
    margin: 20px auto !important;
    display: block;
    padding: 5px;
    font-weight: 600;
}





/*================== Order page pending order list Style 15/05/2023 ===================== */
#pending_orders_row .order-hover-btn .order_detail .col-4 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    display: flex;
    flex-wrap: wrap;
    flex: unset;
    align-items: center;
}

#pending_orders_row .order-hover-btn .order_detail .col-4 .list-img {
    width: 25%;
    margin: 0;
}

#pending_orders_row .order-hover-btn .order_detail .col-4 label.items_price {
    width: 75%;
    padding-left: 10px;
}

#pending_orders_row .order-hover-btn .order_detail .col-4 .list-img img {
    width: 50px;
}

/*============================================= dashboard page responsive css start here ======================================= */
@media(max-width:1600px) {
    .card-box {
        padding: 20px;
    }

    .cate-vendor .form-group input.form-control {
        background-size: 15px;
        background-position: 75%;
    }

    .cate-vendor .form-group select.form-control {
        background-size: 15px;
        background-position: 75%;
    }

}

.file .update_pic {
    height: 180px;
    width: 100%;
    border: .9px solid #e9f0f8;
    background: url(./images/slider01.jpg) no-repeat center;
    background-size: cover
}

.file .update_pic img {
    object-fit: cover;
    height: 100%;
    width: 100%
}

.file--upload>label .plus_icon {
    height: 60px;
    width: 60px;
    line-height: 76px;
    color: #fff;
    text-align: right;
    font-family: "Nunito Sans";
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 50%;
    background-color: var(--panel-color);
    box-shadow: 0 2px 4px 0 #a10000;
    display: block;
    position: absolute;
    left: -30px;
    top: -27px;
    padding: 3px 13px 0 0;
    z-index: 1
}

.banner-info {
    position: absolute;
    bottom: -100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    transform: translateY(100%);
    transition: all .5s
}

.file.file--upload:hover .banner-info {
    transform: translateY(0);
    bottom: 0
}

.remove-banner {
    cursor: pointer;
    top: -27px;
    right: -30px;
    background: var(--panel-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    color: #fff;
    padding: 10px 0 0 10px;
    opacity: 0;
    z-index: 1;
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    transition: all .7s
}

.file.file--upload:hover .remove-banner {
    opacity: 1
}

.close.top_right {
    position: absolute;
    right: -25px;
    top: -30px;
    color: #fff;
    opacity: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s
}

.card-widgets>a[aria-expanded=true] i:before {
    content: "\F0374"
}

.card-widgets .btn-group {
    margin-top: -5px
}

.footer {
    padding: 5px 0 0;
    text-align: center
}

.profile-page .dropify-wrapper {
    width: 100%;
    height: 150px;
    margin: auto
}

label.logo-size {
	font-size: 0.7rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(96, 122, 233, 0.06);
	color: #2563eb;
	font-weight: 500;
}

.dd-list .dd3-content img.rounded-circle.mr-1 {
    height: 30px
}

.ellips {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.custom-dd-empty .ellips {
    width: 80%;
    color: #626262;
    font-size: 12px;
}

#promo-datatable .ellips {
    width: 50%
}

#promo-datatable td,
#promo-datatable th {
    padding: 10px
}

.price-range-slider {
    width: 100%;
    float: left;
    padding: 10px 0
}

.price-range-slider .range-value {
    margin: 0
}

.price-range-slider .range-value input {
    width: 100%;
    background: 0 0;
    color: #000;
    font-size: 16px;
    font-weight: initial;
    box-shadow: none;
    border: none;
    margin: 20px 0
}

.price-range-slider .range-bar {
    border: none;
    background: #000;
    height: 3px;
    width: calc(100% - 8px);
    margin-left: 8px
}

.price-range-slider .range-bar .ui-slider-range {
    background: var(--panel-color)
}

.price-range-slider .range-bar .ui-slider-handle {
    border: none;
    border-radius: 25px;
    background: #fff;
    border: 2px solid var(--panel-color);
    height: 17px;
    width: 17px;
    top: -.52em;
    cursor: pointer
}

.price-range-slider .range-bar .ui-slider-handle+span {
    background: var(--panel-color)
}

.price-range-slider {
    width: 100%;
    float: left;
    padding: 10px 0
}

.price-range-slider .range-value {
    margin: 0
}

.price-range-slider .range-value input {
    width: 100%;
    background: 0 0;
    color: #000;
    font-size: 16px;
    font-weight: initial;
    box-shadow: none;
    border: none;
    margin: 20px 0
}

.price-range-slider .range-bar {
    border: none;
    background: #000;
    height: 3px;
    width: calc(100% - 8px);
    margin-left: 8px
}

.price-range-slider .range-bar .ui-slider-range {
    background: var(--panel-color)
}

.price-range-slider .range-bar .ui-slider-handle {
    border: none;
    border-radius: 25px;
    background: #fff;
    border: 2px solid var(--panel-color);
    height: 17px;
    width: 17px;
    top: -.52em;
    cursor: pointer
}

.price-range-slider .range-bar .ui-slider-handle+span {
    background: var(--panel-color)
}

.category-img img {
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px
}

.top-input {
    width: 60%;
    top: 25px
}

.btn-label {
	margin: -0.55rem 0.0 -0.55rem -0.9rem;
	padding: 0 12px;
	background-color: rgba(50, 58, 70, 0.1);
}
.navbar-custom .app-search {
    height: auto
}

.main-customer-page .dt-buttons.btn-group.flex-wrap {
    top: 36px
}

#clear_filter_btn_icon,
.dt-buttons.btn-group.flex-wrap button {
    border-radius: .2rem;
    padding: 3.5px 10px
}

.return-order .update_pic {
    height: 100px
}

td.product-name {
    width: 300px
}

td.product-name img+b {
    width: 200px;
    display: block
}

.vendor-name,
td.product-name {
    width: 200px
}

.vendor-name .round_img_box+a {
    width: 150px;
    display: block
}

.show-return-product-modal {
    cursor: pointer
}

#sidebar-menu>ul>li a[data-toggle=collapse]:after {
    content: "\F0142";
    transition: .15s;
    position: absolute;
    right: 20px;
    display: inline-block;
    font-family: "Material Design Icons";
    text-rendering: auto;
    line-height: 1.5rem;
    font-size: 1.1rem;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    font-weight: 600
}

#sidebar-menu>ul>li a[aria-expanded=true]:after,
#sidebar-menu>ul>li.menuitem-active a:not(.collapsed)[aria-expanded=true]:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.alTooltipHover:hover::after {
    opacity: 1
}


/* Dark Mood Css */

.dark .menu-navigation {
    background: #232323
}

.dark #sidebar-menu .menuitem-active>a,
.dark .dd-list .dd3-content:hover,
.dark .items_price,
.dark .mdi-icons,
.dark .nav-second-level li a:focus,
.dark .nav-second-level li a:hover,
.dark .social_head i,
.dark .tab-product .nav-material.nav-tabs .nav-link.active,
.dark .top-site-links li:hover a,
.dark a,
.dark label.logo-size {
    color: rgb(247 184 75 / 82%)
}

.dark .card {
    background: #36404a;
}

.dark .header-title,
.dark .text-dark,
.dark .text-muted {
    color: #98a6ad !important
}

.dark .text-primary {
    color: rgb(247 184 75 / 82%) !important
}

.dark .order_detail:before,
.dark .tab-product .nav-material.nav-tabs .nav-link.active~.material-border,
.dark .track-order-list ul li.completed {
    border-color: rgb(247 184 75 / 82%)
}

.dark .tab-product .nav-material.nav-tabs .nav-link {
    color: #f3f7f9
}

.dark .item_no,
.dark .nav-pills .nav-link.active,
.dark .page-item.active .page-link,
.dark .pulse,
.dark .track-order-list ul li:before,
.nav-pills .show>.nav-link {
    background: rgb(247 184 75 / 82%)
}

.dark .page-item.active .page-link {
    border-color: rgb(247 184 75 / 82%)
}

.dark .grand_total label,
.dark .grand_total span,
.dark .top-site-links li a {
    color: #acbfd2
}

.loader {
    position: fixed;
    z-index: 999;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

.error-msg {
    text-align: center;
    font-size: 16px
}

.menu-title+.nav-second-level>li>a {
    padding-left: 15px
}

.menu-title+.nav-second-level>li>a span:first-child {
    font-size: 18px;
    vertical-align: middle;
    width: 22px;
    display: inline-block
}

.menu-title+.nav-second-level>li>a span.size-20 {
    font-size: 16px;
    vertical-align: middle;
    width: 24px;
    display: inline-block;
    text-align: center
}

.pages-list-data td a {
    font-weight: 600
}

.active-page .page-title {
    color: #5ac2ed !important
}

.error-text {
    position: absolute;
    bottom: -5px;
    left: 15px;
    font-size: 11px
}

.total-items {
    min-width: 10px;
    min-height: 25px;
    line-height: 25px;
    border-radius: 50%;
    color: var(--panel-color);
    display: inline-block;
    top: -10px;
    font-weight: 900
}

.auth-fluid .auth-fluid-form-box {
    max-width: 50%
}

.auth-user-testimonial {
    left: auto;
    width: 100%
}

.domain-outer {
    border: 1px solid #ced4da;
    border-radius: .2rem;
    overflow: hidden
}

.domain_name {
    background: #fff;
    background-color: #fff;
    color: #1f2431;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    height: 37.39px;
    line-height: 37px;
    padding: 0 10px;
    width: max-content;
    border: 0
}

.domain-outer #sub_domain {
    border: 0;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-radius: 0
}

.select-date .form-control {
    height: calc(.7em + .9rem + 2px)
}

a:-webkit-any-link:focus-visible {
    outline-offset: 0 !important
}

:focus-visible {
    outline: 0 !important
}

.action-icon {
    vertical-align: middle
}

.document-btn label {
    color: #6c757d
}

.delete-user {
    right: 0;
    top: 0
}

#add_user_permission_vendor .dropdown-menu {
    width: 100%
}

#add_user_permission_vendor #userList {
    width: 100%;
    position: absolute !important;
    left: 0;
    right: 0;
    margin: auto;
    width: calc(100% - 30px)
}

#add_user_permission_vendor .dropdown-menu li {
    border-bottom: 1px solid #ddd;
    padding: 10px
}

#add_user_permission_vendor .dropdown-menu li:last-child {
    border: 0
}

#add_user_permission_vendor .dropdown-menu {
    width: 100%
}

#add_user_permission_vendor #userList {
    width: 100%;
    position: absolute !important;
    left: 0;
    right: 0;
    margin: auto;
    width: calc(100% - 30px)
}

#add_user_permission_vendor .dropdown-menu li {
    border-bottom: 1px solid #ddd;
    padding: 10px
}

#add_user_permission_vendor .dropdown-menu li:last-child {
    border: 0
}

.gray-placeholder-img img {
    filter: grayscale(100%);
    opacity: .3
}

.product-action+.bg-light {
    height: 117px
}

.home-options-list .dd-list .dd3-item {
    border-radius: 3px;
    background: #f3f7f9;
    color: #6c757d;
    padding: 5px 10px;
    cursor: pointer
}

.home-options-list .dd-list .dd-item .dd-handle {
    float: none;
    padding: 0;
    cursor: pointer;
    height: auto !important
}

#pickup_datatable .dd-list .dd-item .dd-handle {
    min-width: 150px
}

.home-options-list li.dd-item.dd3-item::marker {
    content: none
}

.home-options-list .dd-list .dd3-handle::before {
    vertical-align: middle
}

.language-inputs {
    width: 70%;
    overflow-x: auto
}

.scroll-style::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #f5f5f5
}

.scroll-style::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #f5f5f5
}

.scroll-style::-webkit-scrollbar-thumb {
    background-color: #000;
    border: 2px solid #555
}

.cursor {
    cursor: pointer !important
}

#cardCollpase4 svg {
    padding-left: 60px
}

.list-unstyled.remove-curser li {
    cursor: context-menu
}

#update-single-status {
    bottom: 10px;
    z-index: 1;
    left: 20px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s
}

.order-hover-btn:hover #update-single-status {
    opacity: 1
}

button.update-status {
    border: 0;
    border-radius: 5px;
     padding: 5px 18px;
}

button.update-status-ar {
    border: 0;
    border-radius: 5px;
    padding: 5px 18px;
}

.btn-danger.focus,
.btn-danger:focus {
    box-shadow: none
}

.order_data_box {
    height: 100%;
    overflow-y: auto;
    padding: 0 12px 0 20px;
    position: relative
}

.order_data_box .error-msg {
    font-size: 20px;
    position: relative;
    width: 100%;
    top: 0;
    -webkit-transform: translate(0px, 0);
    transform: translate(0px, 0)
}

.bg-soft-warning.text-warning {
    margin: 0 2px
}

.custom-radio-design .custom-control-label::before {
    border: 4px solid #aaa;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    top: 0;
    left: -30px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear
}

.standard_modal .modal-dialog.modal-dialog-centered {
    max-width: 300px
}

.weekDays .form-check {
    display: inline-block;
    width: 50%;
    margin-left: -4px
}

.standard_modal .btn {
    width: 49%
}

.site_link {
    padding: 5px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.copy_link img {
    width: 12px;
    margin-top: 5px;
    display: inline-block
}

.position-relative {
    position: relative !important
}

.site_link a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px
}

span.copied_txt {
    position: absolute;
    bottom: -15px;
    right: 0;
    background: #d90000;
    color: #ffff;
    padding: 0 10px;
    border-radius: 50px;
    line-height: 20px;
    font-size: 12px
}

h3 .fas.fa-money-check-alt {
    font-size: 18px
}

.copy_link {
    cursor: pointer
}

.custom-toggle .switchery {
    float: right
}

.order-list-view .dd-list .dd-nochildren .dd-handle+.dd3-content {
    padding: 5px 70px 5px 46px !important
}

.order-list-view .inner-div.text-right {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%)
}

.order-list-view .dd-list .dd-handle+.dd3-content {
    padding: 5px 70px !important;
    position: relative
}

.order-list-view .dd-list .dd-nochildren .dd-handle.dd3-handle {
    left: 0;
    position: absolute;
    background: 0 0
}

.order-list-view .dd-list .dd-item .dd-handle {
    position: absolute;
    top: 0;
    padding: 10px 16px;
    left: 13px
}

.order-list-view .dd-list .dd-item button {
    position: relative;
    z-index: 1
}

.order-list-view .dd-list .dd-item .dd-handle {
    position: relative;
    z-index: 1;
    left: 0;
    background: 0 0
}

.order-list-view .dd-list .dd-expand+.dd-handle.dd3-handle {
    padding-left: 0;
    position: relative
}

.product-tags #promo-datatable td:first-child {
    width: 70px
}

.product-tags #promo-datatable td:first-child img {
    width: 100%
}

.product-tags #promo-datatable td:nth-child(2) {
    width: 60%
}

.page-title .form-control {
    box-shadow: none
}

.cms-content .form-control {
    height: 40px !important
}

.review-table-responsive td:nth-child(3) {
    width: 50%;
    white-space: normal
}

.file-outer {
    display: grid;
    grid-template-rows: 100px -1 0 0;
    grid-template-columns: repeat(3, 0fr) 20%;
    grid-gap: 10px
}

.review-product-img img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 30px
}

#userList_model {
    width: 100%;
    position: absolute !important;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - 30px)
}

.al_add_user sup {
    position: absolute;
    top: 22px;
    right: 20px
}

.dropdown-menu_al.w-100.active {
    padding: 15px 0 0
}

p.al_username small {
    display: block
}

ul#sujesion_user_id #userList_model {
    width: 100%
}

.dropdown-menu_al.w-100.active li {
    border-bottom: 1px solid #eee
}

.modal-opensag .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-opensag {
    overflow: hidden
}

.dropdown-menu_al.w-100.active li:last-child {
    border-bottom: 1px solid transparent
}


/* ------------------------ al control panel css ------------------ */

.al_advanced_details {
    background-color: rgba(66, 190, 225, .09);
    border-radius: 2px
}

.al_advanced_details .nestable_list_1 {
    height: 270px
}

.al_advanced_details .dd-list .dd3-content {
    position: relative
}

.al_advanced_details .dd-list .dd-list li {
    list-style: none
}

.al_advanced_details .dd-list .dd3-content {
    background-color: #fff
}

.al_add_user h5 {
    color: var(--panel-color)
}

form#save_banner_form {
    background-color: #fff
}

.al_add_user {
    background-color: #f8f8f8;
    padding-top: 20px;
    margin-top: -16px
}

p.al_custom_title.mb-1 {
    font-weight: 600
}

.al_overall_form .dropify-wrapper {
    height: 160px
}

.al_overall_form .al_licence_imgbox .dropify-wrapper {
    height: 120px
}

.al_add_user .btn-group ul li {
    list-style: none;
    padding: 7px;
    margin-bottom: 5px;
    position: relative
}

.al_add_user .btn-group ul {
    padding: 0
}

.al_add_user .btn-group ul li small {
    color: var(--panel-color)
}

.al_add_user .btn-group ul li p {
    margin: 0
}

.al_add_user .btn-group .dropdown-menu .al_select_user {
    margin: 0;
    padding: 0 7px;
    position: relative
}

.al_add_user .user_img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    object-fit: cover
}

.al_add_user .btn-group .dropdown-menu .al_select_user sup {
    position: absolute;
    top: 18px;
    right: 10px;
    color: red
}

.al_add_user .btn-group .dropdown-menu li sup {
    top: 27px;
    right: 17px;
    position: absolute
}

.al_print_btn.badge.badge-info {
    height: 30px;
    margin-top: 20px;
    border: 0
}

#al_web_styling input[type="checkbox"] {
    margin: 0 10px
}

body .dropify-wrapper .dropify-clear {
    top: auto;
    bottom: 5px
}

.dataTables_wrapper .btn-group, .dataTables_wrapper .btn-group-vertical {
    position: relative;
    display: flex;
    justify-content: end;
    width: max-content;
    margin-left: auto;
}

button.btn.btn-secondary.btn-success.waves-effect.waves-light {
	padding: 8px 10px 8px !important;
	font-weight: 600;
	font-size: 12.8px !important;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    border-radius: 8px;
    color: #fff;
    border-width: 2px;
    font-family: 'Cera Round Pro Medium';
    background: linear-gradient(135deg,var(--panel-color) 0%, #7f6ae8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(96, 122, 233, 0.3);
}

button.btn.btn-secondary.btn-success.waves-effect.waves-light:hover {
	background: linear-gradient(135deg,var(--panel-color) 0%, #7f6ae8 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(96, 122, 233, 0.3);
	color: #ffffff;
}
.btn.btn-secondary.buttons-pdf.buttons-html5.btn-success.waves-effect.Export_btn.waves-light.vendor_export_button {
	margin-right: -20px;
}

.order_head h4 {
    opacity: 1
}

.order_received1 .order_head h4 {
    opacity: inherit;
}

.al_box_height {
    height: 40px !important;
    padding-left: 4px !important
}

.al_order_sec {
    cursor: pointer
}

.al_order_sec:hover .order_head h4 {
    opacity: 1
}

.card-body.position-relative.al {
    padding-bottom: 10px
}

body div.dataTables_wrapper div.dataTables_paginate {
    float: right;
    padding-top: 10px
}

body div.dataTables_wrapper div.dataTables_info {
    height: auto;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
}

body div.dataTables_wrapper div.dataTables_paginate {
    margin-top: 10px;
}

.al_card {
    display: block;
    height: 50px;
    box-shadow: 0 3px 10px 0 #000 !important;
    border-radius: 10px !important;
    overflow: hidden
}

.al_card label {
    height: 50px;
    vertical-align: middle;
    padding: 0 10px;
    display: flex
}

body .main-customer-page .set-height {
    min-height: calc(100vh - 350px)
}

body .dataTables_scrollBody {
    height: auto
}

.content .al_custom_cke .cke {
    margin-top: .5em
}

.content .al_custom_cms_page ol a {
    border: 0
}

body .order-list-view .dd-list .dd-nochildren .dd-handle+.dd3-content {
    padding: 5px 25px !important
}

body .order-list-view .dd-list .dd-handle+.dd3-content {
    padding: 7px !important;
    margin: 9px 0;
    border: 1px solid rgba(240, 240, 240, 1) !important;
}

body .order-list-view .dd-list .dd-expand+.dd-handle.dd3-handle,
body .order-list-view .dd-list .dd-item .dd-handle {
    padding: 10px 0
}

body .row.rowYK.al_row_table #banner-datatable.table th {
    padding: 0 12px !important;
    font-weight: 500
}

body .row.rowYK.al_row_table #banner-datatable.table td {
    padding-left: 12px !important;
    padding-right: 12px !important
}

.al_print_btn.badge.badge-info {
    height: 30px;
    margin-top: 20px;
    border: 0
}

.selectize-control.single .selectize-input:after {
    transform: rotate(0)
}

body .selectize-control.single .selectize-input.dropdown-active:after {
    transform: rotate(0)
}

body .swal2-styled.swal2-cancel {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: transparent;
    color: transparent;
    font-size: 10px;
    position: absolute;
    top: -30px;
    right: -30px
}

body .swal2-styled.swal2-cancel:before {
    position: absolute;
    content: "x";
    background-color: red;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    color: #fff;
    font-size: 30px;
    line-height: 1
}

body .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image: none
}

body .swal2-icon.swal2-info.swal2-icon-show {
    display: none !important
}

body .swal2-styled.swal2-confirm {
    padding: 5px 50px;
    text-transform: capitalize
}

body .dropify-wrapper {
    height: 100px
}

body .dropify-wrapper .dropify-message p {
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 400
}

body .dropify-wrapper .dropify-message p.dropify-error {
    color: red;
    font-weight: 400
}

body .dropify-wrapper .dropify-message span.file-icon {
    font-size: 30px
}

body .menu-title+.nav-second-level>li>a span:first-child {
    vertical-align: top
}

.menu-title+.nav-second-level>li>a:hover img {
    filter: grayscale(0)
}

.menu-title+.nav-second-level>li>a:hover .cls-1,
.menu-title+.nav-second-level>li>a:hover .cls-2 {
    fill: var(--panel-color)
}


body #clear_filter_btn_icon {
    background: white;
    border: 1px solid #ef4444;
    border-radius: 8px;
    padding: 0.625rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 38px;
    color: #ef4444;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
    transition: all 0.2s ease;
    height: 38px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body #clear_filter_btn_icon:hover {
    background: #ef4444;
    color: #ffffff;
    transform: translateY(-1px);
}


body .custom-select,
body .form-control {
    height: 40px
}


.editVariantBox .selectize-input .item {
    white-space: nowrap
}

body .content-page .btn.btn-info {
    background: linear-gradient(135deg,var(--panel-color) 0%, #7f6ae8 100%);
    border-radius: 8px;
    color: #ffffff;
    border-width: 2px;
    font-family: 'Cera Round Pro Medium';
    padding-top: 8px;
    padding-bottom: 8px;
    border-style: none;
}

.al_back_btn>* {
    border-radius: 8px;
}

body label {
    font-family: 'Cera Round Pro Regular'
}

.iti input,
.iti input[type="text"],
.iti input[type="tel"] {
    padding-left: 85px !important;
}

.menu-title+.nav-second-level>li>a {
    -webkit-transition: .5s;
    transition: .5s
}

.menu-title+.nav-second-level>li>a:hover {
    padding-left: 20px;
    background-color: #ecfbff;
    border-radius: 5px
}

#sidebar-menu .menuitem-active .active {
    background-color: var(--panel-color);
    border-radius: 5px;
    color: #fff
}

body .btn-blue {
    background-color: var(--panel-color);
    border-color: var(--panel-color)
}

.color_a .card-body {
    border-radius: 10px;
    background-color: var(--card_color_a) !important;
    color: var(--card_color_a) !important
}

.color_a .card-body i svg {
    fill: var(--text_color_a)
}

.color_b .card-body {
    border-radius: 10px;
    background-color: var(--card_color_b) !important;
    color: var(--card_color_b) !important
}

.color_b .card-body i {
    color: var(--text_color_b)
}

.color_c .card-body {
    border-radius: 10px;
    background-color: var(--card_color_c) !important;
    color: var(--card_color_c) !important
}

.color_c .card-body i {
    color: var(--text_color_c)
}

.color_d .card-body {
    border-radius: 10px;
    background-color: var(--card_color_d) !important;
    color: var(--card_color_d) !important
}

.color_d .card-body i svg {
    fill: var(--text_color_d)
}

.color_e .card-body {
    border-radius: 10px;
    background-color: var(--card_color_e) !important;
    color: var(--card_color_e) !important
}

.color_e .card-body i svg {
    fill: var(--text_color_e)
}

.color_f .card-body {
    border-radius: 10px;
    background-color: var(--card_color_f) !important;
    color: var(--card_color_f) !important
}

.color_f .card-body i svg {
    fill: var(--text_color_f)
}

.color_g .card-body {
    border-radius: 10px;
    background-color: var(--card_color_g) !important;
    color: var(--card_color_g) !important
}

.color_g .card-body i {
    color: var(--text_color_g)
}

.color_h .card-body {
    border-radius: 10px;
    background-color: var(--card_color_h) !important;
    color: var(--card_color_h) !important
}

.color_h .card-body i {
    color: var(--text_color_h)
}

.color_i .card-body {
    border-radius: 10px;
    background-color: var(--card_color_i) !important;
    color: var(--card_color_i) !important
}

.color_i .card-body i svg {
    fill: var(--text_color_i)
}

.color_j .card-body {
    border-radius: 10px;
    background-color: var(--card_color_j) !important;
    color: var(--card_color_j) !important
}

.color_j .card-body i svg {
    fill: var(--text_color_j)
}

.al_color_box .card-body h3,
.al_color_box .card-body p {
    color: var(--textDark_color) !important
}

body .menu-title+.nav-second-level>li>a span:first-child {
    font-size: 20px
}

body .menu-title+.nav-second-level>li>a {
    font-size: 14px
}

.al_color_box .card-body .rounded-circle {
    background-color: transparent !important
}

body #sidebar-menu .menu-title {
    color: #000 !important;
    font-family: 'Cera Round Pro Medium'
}

#sidebar-menu .menuitem-active .active svg,
#sidebar-menu .menuitem-active .active svg path {
    fill: #fff !important
}

.language-input.style-4 {
    overflow: auto;
    max-width: fit-content;
    width: 500px
}

span.icon-verification-options svg path {
    fill: #6e768e
}

span.icon-estimation svg path {
    fill: #6e768e
}

.vendor-page .tab-content {
    padding: 40px 0 0 !important;
}

.content-page .content {
    padding-top: 0
}

:root {
    --textDark_color: #744c3f;
    --card_color_a: #fef5d9;
    --text_color_a: #fbbf02;
    --card_color_b: #f6f2ff;
    --text_color_b: #9f81e4;
    --card_color_c: #fef3eb;
    --text_color_c: #ec914f;
    --card_color_d: #ecfbff;
    --text_color_d: #35accc;
    --card_color_e: #f1ffce;
    --text_color_e: #8db824;
    --card_color_f: #ffe8e8;
    --text_color_f: #e13f60;
    --card_color_g: #e9f4ff;
    --text_color_g: #2c92ff;
    --card_color_h: #d9f4f0;
    --text_color_h: #00b797;
    --card_color_i: #f2f4d9;
    --text_color_i: #a8b700;
    --card_color_j: #d2d1e3;
    --text_color_j: #1e1772;
}

body .main-customer-page .set-height .dataTables_scrollBody {
    height: 100%
}

.faq_section .option_section:nth-child(even) {
    background-color: #f3f7f9;
    border-radius: 15px;
    padding-top: 15px;
    margin-bottom: 15px
}

body button.update_order_status {
    border-radius: 30px;
    padding: 3px 12px;
    border: none
}

body #update-single-status {
    text-align: right
}

.al_custom_control label.custom-control-label {
    height: 150px;
    overflow: hidden;
    width: 100%
}

.al_custom_control label.custom-control-label .card-img-top {
    width: 100%;
    height: 100%;
    display: block;
    background-size: 100%;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    background-repeat: no-repeat
}

.al_custom_control label.custom-control-label:hover .card-img-top {
    background-position: bottom
}

span.alTemplateName.mt-3.w-100 {
    margin-top: 10px !important;
    display: block;
    font-size: 12px;
    text-align: center
}

.al_custom_control .card {
    overflow: hidden
}

#sidebar-menu ul#side-menu li span svg {
    vertical-align: top
}

.main-customer-page .dt-buttons.btn-group.flex-wrap {
    top: 0
}

.al_new_export_table .dataTables_scroll {
    overflow: hidden;
    width: 100%
}

.al_new_export_table {
    padding-top: 40px;
    position: relative
}

.al_new_export_table div.dataTables_wrapper div.dataTables_filter {
    position: absolute;
    right: 0;
    top: 0
}

.al_new_export_table .position-absolute.mb-2 {
    top: 0
}

table.al_table_responsive_data tr td input {
    min-width: 150px
}

span.icon-payment-option_s.aldelivery svg {
    height: 18px;
    margin-top: 0
}

.txtarea.form-control {
    height: auto
}

.report-upload-subt {
    border: none !important
}

body .modal-body {
    padding-bottom: 0
}

body p:empty {
    display: none
}

#sidebar-menu ul#side-menu li span svg {
    vertical-align: top
}

.altoggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 20px;
    background: #eee;
    border-radius: 50px;
    border: solid 0 transparent;
    background-clip: padding-box;
    cursor: pointer;
    margin: 0
}

.toggle__bg {
    width: 34px;
    height: 16px;
    background: #fff;
    background: linear-gradient(to right, #fff 50%, #777 50% 100%);
    background-size: 200% 100%;
    background-position: 100%;
    border-radius: 50px;
    border: solid 0 transparent;
    background-clip: padding-box;
    box-shadow: inset 0 2px 5px 1px hsl(0deg 0% 0% / 30%);
    -webkit-transition: all 0 ease-in-out;
    transition: all 0 ease-in-out
}

.webhook_url {
    font-size: 11px;
    word-break: break-all
}

.toggle__sphere {
    position: relative;
    height: 15px;
    width: 15px;
    background: #777;
    background: linear-gradient(to right, #fff 50%, #777 50% 100%);
    border-radius: 50%;
    transform-origin: top left;
    transform: translateY(0px);
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.toggle__sphere-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 50%;
    box-shadow: inset 0 -20px 20px 10px hsla(0, 0%, 0%, 0)
}

.toggle__sphere-bg {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    border-radius: 50%;
    -webkit-transition: transform 0 ease-in-out;
    transition: transform 0 ease-in-out
}

.toggle__sphere-bg:before,
.toggle__sphere-bg:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.toggle__sphere-bg:before {
    background-color: #fff;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Black' viewBox='0 0 20 20'%3E%3Cpath d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm.5-9.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707zM3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707z'/%3E%3C/svg%3E");
    background-size: 123%
}

.toggle__sphere-bg:after {
    background-color: #fff;
    transform: rotateY(180deg);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Black' viewBox='0 0 20 20'%3E%3Cpath d='M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z'/%3E%3C/svg%3E");
    background-position: 3px 2px;
    background-repeat: no-repeat
}

.altoggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute
}

.altoggle input:checked+.toggle__bg {
    background-position: 15%
}

body[dir="rtl"].light .toggle__sphere {
    left: -20px
}

body[dir="rtl"] .altoggle input:checked+.toggle__bg .toggle__sphere {
    left: -20px;
}

.altoggle input:checked+.toggle__bg .toggle__sphere {
    -webkit-transform: translateX(20px) translateY(0px);
    transform: translateX(20px) translateY(0px);
    box-shadow: -2px 0 5px 1px hsla(18, 77%, 15%, 0.05), 0 5px 5px 1px hsla(18, 77%, 15%, 0.2), 3px 0 3px 0 hsla(0, 0%, 0%, 0.2)
}

.toggle__sphere-bg svg path {
    height: 20px;
    width: 20px
}

.toggle__sphere-bg svg {
    position: absolute;
    top: 2px;
    left: 2px
}

.altoggle input:checked+.toggle__bg .toggle__sphere-bg {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.verification_creds {
    padding: 10px 20px;
    background-color: #eee
}

body.dark #sidebar-menu .menu-title {
    color: #fff !important
}

.dark .verification_creds {
    background-color: #303841
}

.navbar-custom ul.list-unstyled.topnav-menu .alLanguageTop .nav-link.waves-effect {
    color: #6c757d;
    font-family: 'Cera Round Pro Regular';
    position: relative;
    line-height: 20px
}

.row.catalog_box.al_catalog_box .card-box {
    position: relative
}

label.position-relative.control-label {
    padding-right: 25px
}

.alInfoIocn {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer
}

.alInfoIocn .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    margin-left: 5px;
    margin-top: 5px
}

.alInfoIocn i {
    color: var(--panel-color)
}


/* Show the tooltip text when you mouse over the tooltip container */

.alInfoIocn:hover .tooltiptext {
    visibility: visible;
}

.alInfoIocn .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

#import-product .modal-dialog {
    max-width: 600px;
}

#import-product .modal-dialog .table-responsive {
    overflow-x: visible;
}

#import-product .modal-dialog {
    max-width: 600px;
}

#import-product .modal-dialog .table-responsive {
    overflow-x: auto;
}

ul.nav-second-level.p-0.mx-2 span.mdi.mdi-book-outline,
ul.nav-second-level.p-0.mx-2 span.mdi.mdi-chat-processing-outline {
    margin-top: -4px;
}

.tabs_radio {
    display: none;
}

.tabs_radio_controls label {
    margin: 5px 4px;
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    height: 28px;
    background: #fff;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px 10px;
    text-align: center;
    position: relative;
    color: #000;
}

.tabs_label h5 {
    font-size: 14px
}

.tabs_radio_controls label:hover {
    border-color: #888;
    color: #000;
}

.tabs_radio:checked+label {
    border-color: #888;
    color: #000;
}

.tabs_radio:not(:disabled)~label {
    cursor: pointer;
}

.order_data_box .badge.badge-info {
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
    padding: 3px 6px;
    text-shadow: none;
    background: var(--panel-color) !important;
}

.order_data_box .badge.badge-info.badge_1 {
    background-color: #e9f4ff;
}

.order_data_box .badge.badge-info.badge_2 {
    background-color: #f2f4d9;
}

.order_data_box .badge.badge-info.badge_3 {
    background-color: #fef5d9;
}

.order_data_box .badge.badge-info.badge_4 {
    background-color: #fef3eb;
}

.order_data_box .badge.badge-info.badge_5 {
    background-color: #ffe8e8;
}

.order_data_box .badge.badge-info.badge_6 {
    background-color: #f6f2ff;
}

.order_data_box .badge.badge-info.badge_7 {
    background-color: #f1ffce;
}

.commonModal .modal-dialog.modal-dialog-centered.modal-lg {
    max-width: 1170px;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: gray;
}

::-webkit-scrollbar-thumb:hover {
    background: gray;
}

table.dataTable {
    width: 100% !important;
}

.dataTables_scrollFootInner {
    width: 100% !important;
}

.dataTables_scrollFoot {
    width: 100% !important;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}

.dataTable {
    width: 100% !important;
}

.commonModalLabel {
    display: flex;
}

#import-product .modal-dialog {
    max-width: 600px;
}

#import-product .modal-dialog .table-responsive {
    overflow-x: visible;
}

table.dataTable {
    width: 100% !important;
}

.dataTables_scrollFootInner {
    width: 100% !important;
}

.dataTables_scrollFoot {
    width: 100% !important;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}

.dataTable {
    width: 100% !important;
}

.commonModalLabel {
    display: flex;
}

#import-product .modal-dialog {
    max-width: 600px;
}

#import-product .modal-dialog .table-responsive {
    overflow-x: auto;
}

span.mdichat,
span.mdibookoutline,
span.mdibookoutline svg {
    height: 18px;
    left: 0;
    width: 20px;
    color: #6e768e;
    fill: #6e768e;
}

.alCustomToggleColor label.mr-2.mb-0 {
    font-weight: 600;
}

.alCustomToggleColor small.d-block.pr-5 {
    color: #a1a1a1;
}


.tabs_radio {
    display: none;
}


/* .tabs_radio_controls{text-align:center} */


/*---arbic language css start here---*/

body[dir="rtl"] .progress-order {
    right: -24px;
}

body[dir="rtl"] .btn.btn-secondary.btn-success.waves-effect.waves-light span.btn-label {
    margin: 0px 0px 0px 10px;
}

body[dir="rtl"] button.btn.btn-secondary.btn-success.waves-effect.waves-light {
    padding: 0px 0px 0px 10px;
}

body[dir="rtl"] .dataTables_filter {
    left: 0px;
    right: auto;
}

body[dir=rtl] .order-list-view .inner-div.text-right {
    left: 5px;
}

body[dir=rtl] .dd-list .dd3-handle {
    float: right;
}

body[dir=rtl] .dd-list .dd3-content img.rounded-circle.mr-1 {
    margin-left: 5px;
}

body[dir=rtl] .iti__selected-flag {
    height: auto;
    padding: 10px 8px;
}

body[dir=rtl] #accounting_vendor_datatable_wrapper .dt-buttons button {
    padding: 0 0 0 10px
}

body[dir=rtl] #accounting_vendor_datatable_wrapper .dt-buttons button .btn-label {
    margin: 0 0 0 10px
}

body[dir=rtl] .content-page {
    margin-left: 0;
    margin-right: 240px
}

body[dir=rtl] .navbar-custom {
    left: 0;
    right: auto
}

body[dir=rtl] .mr-auto {
    margin-right: 0 !important
}

body[dir=rtl] #sidebar-menu .menu-title {
    text-align: right
}

body[dir=rtl] .nav-second-level li a {
    text-align: right
}

body[dir=rtl] #sidebar-menu>ul>li a[data-toggle=collapse]:after {
    left: 0;
    right: auto;
    transform: rotate(180deg)
}

body[dir=rtl] #sidebar-menu>ul>li ul.nav-second-level {
    padding-right: 20px
}

body[dir=rtl] .top-site-links li i {
    margin: 0 0 0 10px
}

body[dir=rtl] ul {
    padding-right: 0
}

body[dir=rtl] .nav-second-level li .collapse li a:before {
    left: auto;
    right: 0
}

body[dir=rtl] .dt-buttons.btn-group.flex-wrap {
    right: auto !important;
    left: 330px
}

body[dir=rtl] .text-sm-right {
    text-align: left !important
}

body[dir=rtl] {
    text-align: right !important
}

body[dir=rtl] .dataTables_filter label {
    float: left !important
}

body[dir=rtl] .home-options-list .dd-list .dd3-item {
    padding-right: 40px;
    position: relative
}

body[dir=rtl] .home-options-list .dd-list .dd3-handle::before {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

body[dir=rtl] .custom-toggle .switchery {
    float: left
}

body[dir=rtl] #cardCollpase4 svg {
    position: absolute;
    left: 40%
}

body[dir=rtl] .page-title-box .page-title {
    float: right
}

body[dir=rtl] .page-title-box .page-title-right {
    float: left
}

body[dir=rtl] .home-options-list .dd-list .dd-item .dd-handle {
    padding: 0 0 0 20px
}

body[dir=rtl] span.inner-div {
    float: left
}

body[dir=rtl] .modal-header .close {
    padding: 1rem;
    margin: -1rem !important
}


/* ===================== dashboard ======================== */

.apexcharts-canvas .apexcharts-legend.position-bottom .apexcharts-legend-series {
    display: block;
    align-items: end;
    clear: both;
    width: 100%;
    text-align: right;
}

.apexcharts-canvas .apexcharts-legend.position-bottom.apexcharts-align-center {
    justify-content: center;
    max-width: 260px;
    margin: 0 auto;
}

.web-style .alSignUpImageControal .dropify-wrapper.has-preview {
    width: 100%;
    max-width: 100%;
}


/* .card-body.al_custom_control .alThemeDemoSec:nth-child(5) {display: none;} */

#alDashboardStyle h2.fw-normal.mb-3 span,
#alDashboardStyle h3 {
    color: #555657;
}

.dark #alDashboardStyle h2.fw-normal.mb-3 span,
.dark #alDashboardStyle h3 {
    color: #c6c6c6;
}

#alDashboardStyle h3 {
    font-weight: 600 !important;
}

#alDashboardStyle h5 {
    color: #777;
}

.dark #alDashboardStyle h5 {
    color: #98a6ad;
}

.alDasBoxItems span.text-nowrap {
    padding-left: 8px;
}

.card-body.alRevenueBox {
    min-height: 364px;
}

.card.alDasBoxItems {
    min-height: auto;
}

.alRevenueByLocation {
    min-height: 585px;
}

.content {
    padding-left: 0px;
    padding-right: 0px;
}

.dark #alDashboardStyle h3 {
    color: #c6c6c6;
}

.al_new_export_table.royo_customber_btn.table_customber_add .position-absolute.mb-2 {
    z-index: 999;
    right: 0;
    margin: 0 !important;
    text-align: right;
}

.al_new_export_table.royo_customber_btn.table_customber_add .row.mt-1.sml_royo-responsive {
    margin-top: -40px !important;
}

.al_new_export_table.royo_customber_btn.table_customber_add .row.mt-1.sml_royo-responsive .tab-pane .card-body {
    padding: 10px 0;
}

.alCustomCheckBoxText input[type="radio"]:checked,
.alCustomCheckBoxText input[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.alCustomCheckBoxText input[type="radio"]:checked+label,
.alCustomCheckBoxText input[type="radio"]:not(:checked)+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

.alCustomCheckBoxText input[type="radio"]:checked+label:before,
.alCustomCheckBoxText input[type="radio"]:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

.alCustomCheckBoxText input[type="radio"]:checked+label:after,
.alCustomCheckBoxText input[type="radio"]:not(:checked)+label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--panel-color);
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.alCustomCheckBoxText input[type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.alCustomCheckBoxText input[type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


/* dark dashboard css start */

.dark body div.dataTables_wrapper div.dataTables_info {
    color: #94a0ad;
}

.dark .al_add_user,
.dark form#save_banner_form {
    background-color: #424e5a;
}

.dark .dropify-wrapper {
    background-color: #3b4651;
}

.dark .dropify-wrapper:hover {
    background-image: -webkit-linear-gradient(135deg, #424e5a 25%, transparent 25%, transparent 50%, #424e5a 50%, #424e5a 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, #424e5a 25%, transparent 25%, transparent 50%, #424e5a 50%, #424e5a 75%, transparent 75%, transparent);
}

.dark .navbar-custom ul.list-unstyled.topnav-menu .alLanguageTop .nav-link.waves-effect {
    color: #acbfd2;
}

.card.changeIcon {
    box-shadow: none !important;
}

.outer-box.border-dashed {
    border-style: dashed;
    border-width: 2px;
    height: 100%;
    min-height: 80px;
    border-radius: 7px;
    overflow: hidden;
}

.alProDuctBannerImg {
    position: relative;
    padding-bottom: 100%;
    border-radius: 7px;
    overflow: hidden;
}

.alProDuctBannerImg img.w-100 {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    height: 100%;
}

.alProDuctBannerImg span {
    position: absolute;
    z-index: 1;
    background-color: red;
    right: 0px;
    top: 0;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    line-height: 23px;
    color: #fff;
    font-weight: 400;
}
.dark .dd-list .dd-item .dd-handle {
    background: transparent;
}

.dark .content h1,
.dark .content h2,
.dark .content h3,
.dark .content h4,
.dark .content h5 {
    color: #acbfd2;
}

.dark .content .tabs_radio_controls h5 {
    color: #000;
}

.dark #edit_page_content label.control-label {
    color: #acbfd2;
}

.dark .price_box_bottom li,
.dark .cms-content .form-control {
    color: #acbfd2;
}

.dark .status_box li img {
    opacity: 1;
    background: #ffffff4d;
    border-radius: 25px;
}

.dark .flatpickr-months .flatpickr-month,
.dark .flatpickr-months .flatpickr-prev-month,
.dark .flatpickr-months .flatpickr-next-month,
.dark .flatpickr-day,
.dark span.flatpickr-weekday {
    color: #acbfd2;
    fill: #acbfd2;
}

.dark .flatpickr-calendar.open {
    background: #303841;
}

.dark .flatpickr-day.flatpickr-disabled,
.dark .flatpickr-day.flatpickr-disabled:hover,
.dark .flatpickr-day.prevMonthDay,
.dark .flatpickr-day.nextMonthDay,
.dark .flatpickr-day.notAllowed,
.dark .flatpickr-day.notAllowed.prevMonthDay,
.dark .flatpickr-day.notAllowed.nextMonthDay {
    color: #6d767f;
}

.site_link a {
    display: inline-block;
    width: 100%;
    max-width: 700px;
}

.dark .form-control-light {
    background-color: #3b4651 !important;
    border-color: #3b4651 !important;
}

#alDashboardStyle h5 {
    text-transform: capitalize;
}

.dark .table,
.dark .progress-w-percent .progress-value {
    color: #acbfd2;
}

.dark .progress {
    background-color: #303841;
}

.dark .dd-list .dd3-content {
    background: rgba(66, 190, 225, .09);
}

.dark .modal-content {
    background-color: #424e5a;
}

.dark .border-bottom {
    border-bottom: 1px solid #424e5a !important;
}

.dark .modal-content label {
    color: #acbfd2;
}

.dark .modal-content .form-control {
    color: #94a0ad;
    background-color: #3b4651;
    border: 1px solid #424e5a;
}

.dark .close {
    color: #f7f7f7;
}

.dark #alLightBg {
    background-color: #3b4651;
}

#UpdateSubadmin .table-borderless td,
#UpdateSubadmin .table-borderless th {
    padding: 8px 10px 8px 10px !important;
}

.dark .dropzone {
    background: #3b4651;
}

.dark .selectize-input {
    border: 1px solid #424e5a;
}

.order_data_box .error-msg {
    font-size: 20px;
    position: relative;
    width: 100%;
    top: 0;
    -webkit-transform: translate(0px, 0);
    transform: translate(0px, 0%);
}

.alDeliveryOptionsPage .switchery-demo label {
    margin: 0 !important;
}


/* dark dashboard css end */


/* Order page new order reject order popup css */
div#addRejectmodal {
    z-index: 99999;
    background: #0000003d;
}

#orderConfirmModal, #addRejectmodal {
    z-index: 9999999999;
}
/* ══════════════════════════════════════════
   Reject Reason Modal — Enhanced UI
   ══════════════════════════════════════════ */
.rj-dialog { max-width: 520px !important; }

.rj-content {
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.2) !important;
    overflow: hidden !important;
}

/* Header — dark slate, matches other vendor catalog modals */
body #addRejectmodal .modal-header,
.rj-header {
    background: #1e293b !important;
    padding: 18px 22px !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.rj-header-left {
    display: flex;
    align-items: center;
    gap: 13px;
}
/* Alert icon ring */
.rj-icon-ring {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(239,68,68,.15);
    border: 1px solid rgba(239,68,68,.25);
    color: #ef4444;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* Title */
body #addRejectmodal .modal-header .modal-title,
.rj-title {
    font-size: .975rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
/* Subtitle */
.rj-subtitle {
    font-size: .72rem;
    color: #94a3b8;
    margin: 2px 0 0;
    line-height: 1;
}
/* Close button */
body .rj-close-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.65) !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: background .2s, color .2s;
    padding: 0;
}
body .rj-close-btn:hover {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}

/* Body */
.rj-body {
    background: #fff !important;
    padding: 24px !important;
}
.rj-error {
    color: #ef4444 !important;
    font-size: .8rem;
    margin-bottom: 4px;
    min-height: 0;
}
.rj-field { display: flex; flex-direction: column; gap: 6px; }
.rj-label {
    font-size: .825rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}
.rj-textarea {
    width: 100% !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: .875rem !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    resize: vertical;
    min-height: 130px;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    line-height: 1.6;
}
.rj-textarea:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5,150,105,.1) !important;
    background: #fff !important;
}
.rj-textarea::placeholder { color: #94a3b8; }

/* Footer */
.rj-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e8edf2 !important;
    padding: 16px 22px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
/* Cancel button */
.rj-btn-cancel {
    padding: 9px 20px;
    border-radius: 9px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.rj-btn-cancel:hover { background: #f1f5f9; border-color: #cbd5e1; }
/* Submit button — emerald, matches other modals */
.rj-btn-submit {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    border-radius: 9px;
    border: none;
    background: #d50606  !important;
    color: #fff !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(150 5 5 / 28%);
    transition: all .2s;
}
.rj-btn-submit:hover {
    background: #c20505 !important;
    transform: translateY(-1px);
}
.rj-btn-submit:disabled {
    opacity: .72;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.rj-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rj-spin .65s linear infinite;
    vertical-align: middle;
}
@keyframes rj-spin { to { transform: rotate(360deg); } }


/*================== Order page pending order list Style 15/05/2023 ===================== */
#pending_orders_row .order-hover-btn .order_detail .col-4 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    display: flex;
    flex-wrap: wrap;
    flex: unset;
    align-items: center;
}

#pending_orders_row .order-hover-btn .order_detail .col-4 .list-img {
    width: 25%;
    margin: 0;
}

#pending_orders_row .order-hover-btn .order_detail .col-4 label.items_price {
    width: 75%;
    padding-left: 10px;
}

#pending_orders_row .order-hover-btn .order_detail .col-4 .list-img img {
    width: 50px;
}

#AddRejectBox .reject_reason {
    border: 1px solid#ccc;
}

/*============================================= dashboard page responsive css start here ======================================= */

@media(min-width:576px) {
    .custom-cols>.col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .received-orders .modal-dialog.modal-dialog-centered {
        max-width: 600px;
    }

    .add_product .modal-dialog {
        max-width: 650px;
    }
}

@media(max-width:1600px) {
    .card-box {
        padding: 20px;
    }
}

/*dashboard configure page resposive css*/
@media screen and (min-width:1029px) and (max-width:1240px) {
    .map-configration_dashboard .col-lg-3.mb-3 {
        flex: 50%;
        max-width: 50%;
    }

    .map-configration_dashboard .col-lg-4 {
        flex: 50%;
        max-width: 50%;
    }
}

/*=----end here-----*/

@media(min-width:1600px) {
    .style-cols .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media(max-width:1499px) {
    h1.control-label {
        font-size: 46px;
    }
}

@media(min-width: 1440px) {
    .main-customer-page .set-height {
        min-height: calc(100vh - 320px);
    }

    .main-customer-page .set-height .dataTables_scrollBody {
        height: calc(100vh - 550px);
    }
}

@media(max-width:1400px) {
    .web-style .dropify-wrapper.has-preview {
        width: 70px;
        height: 70px;
    }

    .web-style .text-left label {
        height: 40px;
    }

    .web-style .text-left label.logo-size {
        height: auto;
    }

    .col-md-12 button.btn.btn-info {
        min-width: 80px
    }

    .card-box .btn-info {
        min-width: 80px;
        text-align: center !important
    }

    .banner_box {
        width: 170px;
        height: 90px;
    }

    body .content-page .btn.btn-info {
        font-size: 12px;
        display: inline-block;
    }

    body .content-page .btn.btn-info.openServiceModal {
        max-width: 130px;
    }

    body .content-page .btn.btn-info.alAddLongBtn,
    body .content-page .btn.btn-info.alAddProductBtn {
        max-width: 120px;
    }

    body .content-page button.btn.btn-info.openVendorSectionModal {
        max-width: 140px;
    }

    body .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: auto;
        padding: .5em 0em;
    }

    .al_new_export_table .sync_hubspot {
        max-width: 150px !important;
    }

    #pending_orders_row .al_order_sec {
        max-width: 50%;
        width: 50%;
        flex: unset;
    }

    #pending_orders_row .al_order_sec .row.mb-3>.col-md-9,
    #pending_orders_row .al_order_sec .row.mb-3>.col-md-3 {
        max-width: 100%;
        width: 100%;
        flex: unset;
    }

   
}

@media(min-width:1367px) {
    .custom-cols>.col {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .style-cols .col-xl-6,
    .cms-cols .col-xl-9 {
        flex: 0 0 70%;
        max-width: 70%;
    }

    .style-cols .col-xl-3,
    .cms-cols .col-xl-3 {
        flex: 0 0 30%;
        max-width: 30%;
    }
}

@media(min-width:1025px) {
    .catalog-cols .col-md-4 {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
        max-width: 100%;
    }

    .mobile-toggle,
    .d_none {
        display: none;
    }

    .navbar-custom {
        left: auto;
    }

    .left-side-menu {
        top: 0;
        padding-top: 0;
        box-shadow: none;
    }

}

@media(min-width:992px) {
    .custom-cols>.col {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}

@media (max-width: 1366px) {
    #map-canvas {
        height: calc(100vh - 284px);
    }

    .oc-list {
        grid-template-columns: repeat(1, 1fr) !important;
    }

}

@media (min-width: 1200px) {
    .geo_middle {
        height: calc(100vh - 690px);
        overflow-y: auto;
        overflow-x: hidden;
        margin: 0 0 20px;
    }

    #add-category-form .modal-lg,
    #edit-category-form .modal-lg {
        max-width: 70%;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
    #cardCollpase4 svg {
        padding-left: 0;
        margin-left: -36px;
    }
}

@media(max-width:1199px) {
    .navbar-custom {
        padding: 0;
    }

    .logo-box.m-hide,
    .m-hide {
        display: none !important;
    }

    .mobile-toggle {
        display: block;
    }

    .top-site-links li {
        padding: 0 ;
    }

    .auth-fluid .auth-fluid-form-box {
        max-width: 100%;
    }

    .language-inputs {
        width: 65%;
        overflow-x: auto;
    }

    .ipad-view .col-lg-5.col-xl-4 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .ipad-view .col-lg-7.col-xl-8 {
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media(max-width: 1024px) {
    .navbar-custom .top-site-links {
        margin-left: 0;
    }

    .navbar-custom .AlSpinnerCustom, 
    body .navbar-custom a.logo.logo-dark {
        display: none !important;
    }
    .sidebar-enable .left-side-menu .logo.logo-light.text-center {
        display: none !important;
    }
}

@media(max-width: 991px) {
    .navbar-custom .top-site-links {
        margin-left: 0;
    }

    .navbar-custom .AlSpinnerCustom, 
    .navbar-custom a.logo.logo-dark.text-center, .navbar-custom .flex-grow-1 {
        display: none !important;
    }
    .sidebar-enable .left-side-menu .logo.logo-light.text-center {
        display: none !important;
    }

    body .top-site-links .m-hide {
        display: block !important;
    }
}

@media(max-width:767px) {
    .nav-pills.navtab-bg {
        flex-direction: column;
        gap: 10px;
    }
    .sidebar-enable .left-side-menu .logo.logo-light.text-center {
        display: none !important;
    }

    body.al_body_template_one section.section-b-space.ratio_asos.alProductCategories {
        padding-top: 8rem !important;
    }

    body.al_body_template_one.homeHeader section.section-b-space.ratio_asos {
        padding-top: 7rem !important;
    }

    .al_order_sec .order_head h4 {
        opacity: 1
    }

    .card-body.al_custom_control {
        padding: 0;
    }

    h1.control-label {
        font-size: 36px;
    }

    .custom-control.custom-radio.radio_new label.custom-control-label {
        width: 100%;
    }

    .col-md-3.alOrderStatus {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tab-product .nav-material.nav-tabs .nav-item .nav-link {
        font-size: 12px;
        padding: 0 5px;
    }

    .tab-content.nav-material.al .order_head h4 {
        color: #000;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .vendor-products .card {
        margin-top: 0;
    }

    .vendor-page .card-body {
        padding: 0;
    }

    .vendor-page .tab-content {
        padding: 0 !important;
        margin-top: 0;
    }

    .vendor-products .nav-tabs .nav-item {
        z-index: 0;
    }

    .content-page {
        min-height: calc(100vh - 129px);
        padding: 0 0 25px;
    }

    .top-input {
        width: 100%;
    }

    body .dataTables_filter {
        right: 0;
        top: -8px;
        position: relative;
        width: 100%;
    }

    body button.btn.btn-secondary.btn-success.waves-effect.waves-light {
        width: 100%;
        text-align: left;
    }

    body .dt-buttons.btn-group.flex-wrap {
        right: auto;
        top: 0;
        position: relative;
        left: 0;
    }

    .al_new_export_table.royo_customber_btn.table_customber_add .row.mt-1.sml_royo-responsive {
        margin-top: 0px !important;
    }

    body div.dataTables_wrapper div.dataTables_filter label {
        width: 100%;
    }

    .main-customer-page .al_new_export_table.royo_customber_btn div.dataTables_wrapper div.dataTables_filter label input {
        width: 100% !important;
    }

    .al_new_export_table.royo_customber_btn div.dataTables_wrapper div.dataTables_filter {
        left: 0;
    }

    .order_data_box {
        padding: 0 00 20px;
    }

    body div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
        margin: 0;
    }

    .chat-body.row.overflow-hidden.shadow.bg-light.rounded .col-4.px-0,
    .chat-body.row.overflow-hidden.shadow.bg-light.rounded .col-8.px-0 {
        max-width: 100%;
        flex: 100%;
    }

    .conversation-head {
        padding: 10px 0 !important;
    }

    body .ctext-wrap {
        max-width: 90%;
    }

    .navbar-custom .topnav-menu>li {
        margin-top: 4px;
    }

    .sidebar-enable .left-side-menu {
        display: block;
        z-index: 9999 !important;
    }

    #ProductPerformanceReport .table-responsive.mt-2 {
        height: 200px;
        margin-bottom: 20px;
    }

    .apexcharts-inner {
        display: none;
    }

    .order-list-view .ellips {
        max-width: calc(100% - 100px);
    }

    .main-customer-page .al_new_export_table .position-absolute.mb-2 {
        top: 0;
        text-align: left !important;
    }

    .al_new_export_table .sync_hubspot {
        max-width: 130px !important;
    }

    .main-customer-page .position-absolute .btn.btn-info {
        margin-bottom: 4px;
    }

    .main-customer-page .al_new_export_table .position-absolute {
        margin-bottom: 4px;
    }

    .oc-vendor-block .col-md-4 {
        border-right: 0;
    }

    .navbar-custom {
        border-radius: 0;
        width: calc(100% - 0px);
    }

    .al_add_user {
        margin-top: 0;
    }

    #pending_orders_row .al_order_sec {
        max-width: 100%;
        width: 100%;
        flex: unset;
    }

    .tab-pane #pending_orders_row .al_order_sec .order_head .col-md-3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tab-pane #pending_orders_row .al_order_sec .order_head .col-md-3 .col-md-12.pl-0.ellips {
        text-align: right;
        padding-right: 0 !important;
    }

    .order_data_box .badge.badge-info {
        margin-left: 22px !important;
    }

    .pulse {
        left: 10px;
        top: 11px;
    }

    .vp-stats-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .top-site-links li i {
        margin-right: 0;
    }
}

@media(min-width:576px) {
    .custom-cols>.col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .received-orders .modal-dialog.modal-dialog-centered {
        max-width: 600px;
    }

    .order_received1 .modal-dialog.modal-dialog-centered {
        max-width: 940px;
    }

    .add_product .modal-dialog {
        max-width: 650px;
    }
}

@media(min-width:320px) {
    .custom-cols>.col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media(max-width:576px) {
    .tab-pane #pending_orders_row .al_order_sec .order_head .col-md-3 .col-md-12.pl-0.ellips {
        text-align: right;
        padding-right: 0 !important;
        width: 180px;
    }
}

/* Mtn mom payment gateway css*/

#subscription_key_error p,
#reference_id_error p {
    color: red;
    margin-top: 4px;
}


/*======================= new css add for p2p template on 1/12/2023===================== */
body.dark .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: #303841;
}

#order-status-icon .dropify-wrapper.has-preview {
    height: 50px;
}

/*======================= new css add for p2p template on 1/12/2023===================== */
@media (max-width: 1280px) {
    .left-side-menu {
        padding-top: 0 !important;
    }

    .logo-box {
        float: none;
        position: relative;
    }

    .left-side-menu .logo {
        top: 0;
    }

    #sidebar-menu {
        margin-top: 10px;
    }
}

/* ============================================
   DASHBOARD TITLE BAR STYLING - GLOBAL
   ============================================ */
a.btn.btn-primary.alCartIcon {
    position: relative;
}

.alBadge {
    position: absolute;
    right: -6px;
    top: -8px;
    background-color: #ef4444;
    color: #ffffff;
    height: 18px;
    width: 18px;
    border-radius: 9px;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    z-index: 1;
}

span.nodatafound {
    font-size: 120% !important;
    border: 1px solid #FC0;
    background: #FFC;
    color: #384F34;
    display: block;
    font-weight: bold;
    margin: 2px auto 14px;
    padding: 15px !important;
    text-align: left;
}


/* Dashboard Title Row - Compact with 15px margin bottom */
/* ============================================
   DASHBOARD TITLE BAR - MATCHING ORDER PAGE
   ============================================ */
#alDashboardStyle .dashboard-title-row {
    margin-bottom: 0;
}

#alDashboardStyle .page-title-box {
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: end;
}

#alDashboardStyle .page-title-box .page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.2;
}

#alDashboardStyle .page-title-box .page-title-filters {
    margin-left: auto;
}

#alDashboardStyle .page-title-box form {
    align-items: center;
    gap: 0.375rem;
    margin: 0;
}

#alDashboardStyle .page-title-box .filter-group {
    position: relative;
}

/* Datepicker with Icon */
#alDashboardStyle .page-title-box .filter-group.datepicker-wrapper {
    position: relative;
}

#alDashboardStyle .page-title-box .filter-group.datepicker-wrapper .datepicker-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1;
}

#alDashboardStyle .page-title-box .filter-group.datepicker-wrapper #range-datepicker {
    padding-right: 2.5rem;
}

/* All Inputs - Consistent Styling (Matching Order Page) */
#alDashboardStyle .page-title-box #range-datepicker,
#alDashboardStyle .page-title-box .form-control-light,
#alDashboardStyle .page-title-box select.form-control {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: #374151;
    min-width: 180px;
    height: 32px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#alDashboardStyle .page-title-box select.form-control {
    min-width: 160px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2rem;
    background-color: #ffffff !important;
}

#alDashboardStyle .page-title-box #range-datepicker:focus,
#alDashboardStyle .page-title-box .form-control-light:focus,
#alDashboardStyle .page-title-box select.form-control:focus {
    outline: none;
    border-color: var(--panel-color) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(83, 58, 255, 0.1);
}

#alDashboardStyle .page-title-box #range-datepicker::placeholder,
#alDashboardStyle .page-title-box .form-control-light::placeholder {
    color: #9ca3af;
}

/* Action Buttons - Matching Order Page */
#alDashboardStyle .page-title-box .btn-primary {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px;
    color: #6b7280;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    min-width: 32px !important;
    max-width: 32px !important;
    flex-shrink: 0;
    margin: 0;
}

#alDashboardStyle .page-title-box .btn-primary:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #374151;
}

#alDashboardStyle .page-title-box .btn-primary i {
    font-size: 0.8125rem;
    line-height: 1;
    margin: 0;
    color: inherit;
}

#alDashboardStyle .page-title-box .btn-primary.alCartIcon {
    position: relative;
}

#alDashboardStyle .page-title-box .alBadge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--panel-color);
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.625rem;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Responsive Design */
@media (max-width: 992px) {
    #alDashboardStyle .page-title-box .d-flex {
        align-items: flex-start !important;
        gap: 1rem;
    }

    #alDashboardStyle .page-title-box .page-title-filters {
        margin-left: 0;
        width: 100%;
    }

    #alDashboardStyle .page-title-box form {
        width: 100%;
    }

    #alDashboardStyle .page-title-box .filter-group {
        flex: 1;
        min-width: 0;
    }

    #alDashboardStyle .page-title-box #range-datepicker,
    #alDashboardStyle .page-title-box select.form-control,
    #alDashboardStyle .page-title-box .form-control-light {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    #sidebar-menu {
        margin-top: 0;
    }
    #alDashboardStyle .page-title-box {
        padding: 0.5rem 0;
        margin-bottom: 0.75rem;
    }

    #alDashboardStyle .page-title-box .page-title {
        font-size: 1.25rem;
    }

    #alDashboardStyle .page-title-box form {
        gap: 0.5rem;
    }

    #alDashboardStyle .page-title-box .filter-group {
        width: 100%;
    }

    #alDashboardStyle .page-title-box select.form-control,
    #alDashboardStyle .page-title-box .form-control-light,
    #alDashboardStyle .page-title-box .btn-primary {
        height: 30px;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
    }

    #alDashboardStyle .page-title-box .btn-primary {
        width: 100%;
        max-width: 100% !important;
    }

    #alDashboardStyle .page-title-box .btn-primary i {
        font-size: 0.6875rem;
    }
}

.dashboard-stat-cards {
    padding: 0px 0;
    margin: 0;
    border-radius: 10px;
}

.dashboard_charts_ [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

/* ============================================
   DASHBOARD EQUAL HEIGHT COLUMNS & CHARTS
   ============================================ */

/* Stat Cards Row - Equal Heights */
.dashboard-stat-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.dashboard-stat-cards>div {
    display: flex;
    flex-direction: column;
}

.dashboard-stat-cards .alDasBoxItems {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-stat-cards .alDasBoxItems .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dashboard_charts_ {
    background: #f5f5f5;
    padding: 12px;
    margin: 0 !important;
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Clean & Compact Stat Cards Design */
.dashboard-stat-cards .alDasBoxItems {
    border-radius: 8px;
    transition: all 0.2s ease;
    background: #fff;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

.dashboard_charts_ .card {
    border-radius: 8px !important;
    box-shadow: none !important;
    border: none !important;
}

.dashboard-stat-cards .alDasBoxItems:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.dashboard-stat-cards .alDasBoxItems .card-body {
    padding: 16px 18px;
    position: relative;
}

.dashboard-stat-cards .alDasBoxItems .float-right {
    position: absolute;
    top: 16px;
    right: 18px;
    margin: 0;
    float: none;
}

.dashboard-stat-cards .alDasBoxItems .widget-icon {
    font-size: 24px;
    color: #b4b8bf;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-icon {
    background-color: #F5F5F5 !important;
}

.dashboard-stat-cards .alDasBoxItems h5 {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
     text-transform: capitalize;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.dashboard-stat-cards .alDasBoxItems h3 {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.2;
    padding-right: 32px;
}

.dashboard-stat-cards .alDasBoxItems p {
    font-size: 11px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.3;
    min-height: 14px;
}

/* Dark Mode Support */
body.dark .dashboard-stat-cards .alDasBoxItems {
    background: #1f2937;
    border-color: #374151;
}

body.dark .dashboard-stat-cards .alDasBoxItems:hover {
    border-color: #4b5563;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark .dashboard-stat-cards .alDasBoxItems h5 {
    color: #9ca3af;
}

body.dark .dashboard-stat-cards .alDasBoxItems h3 {
    color: #f3f4f6;
}

body.dark .dashboard-stat-cards .alDasBoxItems p {
    color: #6b7280;
}

body.dark .dashboard-stat-cards .alDasBoxItems .widget-icon {
    opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 1199px) {
    .dashboard-stat-cards .alDasBoxItems .card-body {
        padding: 14px 16px;
    }

    .dashboard-stat-cards .alDasBoxItems .float-right {
        top: 14px;
        right: 16px;
    }

    .dashboard-stat-cards .alDasBoxItems .widget-icon {
        font-size: 22px;
    }

    .dashboard-stat-cards .alDasBoxItems h3 {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .dashboard-stat-cards .alDasBoxItems .card-body {
        padding: 12px 14px;
    }

    .dashboard-stat-cards .alDasBoxItems .float-right {
        top: 12px;
        right: 14px;
    }

    .dashboard-stat-cards .alDasBoxItems .widget-icon {
        font-size: 20px;
    }

    .dashboard-stat-cards .alDasBoxItems h3 {
        font-size: 20px;
        padding-right: 28px;
    }

    .dashboard-stat-cards .alDasBoxItems h5 {
        font-size: 11px;
    }
}

/* Charts Row - Equal Heights */
.dashboard-charts-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.dashboard-charts-row>div {
    display: flex;
    flex-direction: column;
}

.dashboard-charts-row .alRevenueChartCard {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 25px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background: #ffffff;
    transition: all 0.2s ease;
}

.dashboard-charts-row .alRevenueChartCard:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.dashboard-charts-row .alRevenueChartCard .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px 20px;
}

/* Chart Heading - Clean & Compact */
.dashboard-charts-row .alRevenueChartCard .chart-heading {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
    padding: 0;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

/* Revenue Monthly Chart - Clean Design with Thin Bars */
.dashboard-charts-row .alRevenueChartCard #revenue-bar-chart {
    flex: 1;
    min-height: 0;
    width: 100% !important;
    height: 300px !important;
    max-height: 300px;
}

/* Revenue Weekly Chart - Match Revenue By Location Height */
.dashboard-charts-row .alRevenueChartCard #revenue-line-chart {
    flex: 1;
    min-height: 0;
    width: 100% !important;
    height: 300px !important;
    max-height: 300px;
}

/* General chart container - ensures all charts fill available space */
.dashboard-charts-row .alRevenueChartCard>div[dir="ltr"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    height: 100%;
}

.dashboard-charts-row .alRevenueChartCard canvas {
    flex: 1;
    min-height: 0;
    width: 100% !important;
    /* Height will be set by JavaScript to preserve chart height */
    max-height: 330px;
}

/* Recent Users List - Match chart height */
.dashboard-charts-row .recent-users-list {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.progress-bar {
    background-color: var(--panel-color);
}

/* Revenue Stats Box - Clean Minimal Design */
.dashboard-charts-row .chart-content-bg {
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
}

.dashboard-charts-row .chart-content-bg .row {
    margin: 0;
    align-items: center;
}

.dashboard-charts-row .chart-content-bg .col-sm-6 {
    padding: 0 12px;
    position: relative;
}

.dashboard-charts-row .chart-content-bg .col-sm-6:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: #e5e7eb;
}

.dashboard-charts-row .chart-content-bg p {
    font-size: 11px;
    color: #6b7280;
    margin: 0 0 8px 0;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
}

.dashboard-charts-row .chart-content-bg h2 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dashboard-charts-row .chart-content-bg h2 small {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin: 0;
    vertical-align: middle;
    position: relative;
    top: -4px;
}

.dashboard-charts-row .chart-content-bg .text-primary {
    color: var(--panel-color) !important;
}

.dashboard-charts-row .chart-content-bg .text-primary small {
    background-color: var(--panel-color);
}

.dashboard-charts-row .chart-content-bg .text-success {
    color: #10b981 !important;
}

.dashboard-charts-row .chart-content-bg .text-success small {
    background-color: #10b981;
}

.dashboard-charts-row .chart-content-bg span {
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* Chart Container Background - Clean Design for Revenue Monthly & Weekly */
.dashboard-charts-row .alRevenueChartCard>div[dir="ltr"] {
    background: #fafbfc;
    border-radius: 6px;
    padding: 8px;
    border: 1px solid #f3f4f6;
}

/* Revenue By Location - Remove background from map container */
.dashboard-charts-row .alRevenueChartCard .my-1 {
    background: transparent;
    border: none;
    padding: 0;
}

/* Revenue By Location - Ensure map and list fill space */
.dashboard-charts-row .alRevenueChartCard .my-1 {
    flex-shrink: 0;
    margin: 8px 0 !important;
}

.dashboard-charts-row #world-map {
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    height: 275px !important;
    width: 100%;
}

.dashboard-charts-row #revenue_locations {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: 12px;
    margin-top: 0;
    max-height: calc(100% - 240px);
}

/* Recent Users Content Styling */
.dashboard-charts-row #recent-users-content {
    padding: 0;
}

.dashboard-charts-row #recent-users-content .user-item {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-charts-row #recent-users-content .user-item:last-child {
    border-bottom: none;
}

.dashboard-charts-row #recent-users-content .user-item .user-name {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    margin: 0;
}

.dashboard-charts-row #recent-users-content .user-item .user-email {
    font-size: 11px;
    color: #6b7280;
    margin: 2px 0 0 0;
}

.dashboard-charts-row #recent-users-content .user-item .user-date {
    font-size: 10px;
    color: #9ca3af;
    margin: 0;
}

/* Dark Mode Support */
body.dark .dashboard-charts-row .alRevenueChartCard {
    background: #1f2937;
    border-color: #374151;
}

body.dark .dashboard-charts-row .alRevenueChartCard:hover {
    border-color: #4b5563;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark .dashboard-charts-row .alRevenueChartCard .chart-heading {
    color: #f3f4f6;
}

body.dark .dashboard-charts-row .chart-content-bg {
    background: #1f2937;
    border-color: #374151;
}

body.dark .dashboard-charts-row .chart-content-bg .col-sm-6:not(:last-child)::after {
    background: #374151;
}

body.dark .dashboard-charts-row .chart-content-bg p {
    color: #9ca3af;
}

body.dark .dashboard-charts-row .chart-content-bg h2 {
    color: #f3f4f6;
}

body.dark .dashboard-charts-row #world-map {
    background: #111827;
}

body.dark .dashboard-charts-row #recent-users-content .user-item {
    border-bottom-color: #374151;
}

body.dark .dashboard-charts-row #recent-users-content .user-item .user-name {
    color: #f3f4f6;
}

body.dark .dashboard-charts-row #recent-users-content .user-item .user-email {
    color: #9ca3af;
}

body.dark .dashboard-charts-row #recent-users-content .user-item .user-date {
    color: #6b7280;
}

/* Chart Container Background - Dark Mode */
body.dark .dashboard-charts-row .alRevenueChartCard>div[dir="ltr"] {
    background: #111827;
    border-color: #374151;
}


/* Responsive adjustments */
@media (max-width: 992px) {

    .dashboard-stat-cards>div,
    .dashboard-charts-row>div {
        margin-bottom: 1rem;
    }

    .dashboard-charts-row .alRevenueChartCard .card-body {
        padding: 16px 18px;
    }

    .dashboard-charts-row .alRevenueChartCard .chart-heading {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .dashboard-charts-row .alRevenueChartCard canvas {
        min-height: 0;
    }

    .dashboard-charts-row #world-map {
        height: 200px !important;
    }

    .dashboard-charts-row #revenue_locations {
        max-height: calc(100% - 216px);
    }

    .dashboard-charts-row .recent-users-list {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .dashboard-charts-row .alRevenueChartCard .card-body {
        padding: 14px 16px;
    }

    .dashboard-charts-row .alRevenueChartCard .chart-heading {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .dashboard-charts-row .alRevenueChartCard canvas {
        min-height: 0;
    }

    .dashboard-charts-row #world-map {
        height: 180px !important;
    }

    .dashboard-charts-row #revenue_locations {
        max-height: calc(100% - 196px);
    }

    .dashboard-charts-row .recent-users-list {
        min-height: 0;
    }

    .dashboard-charts-row .chart-content-bg {
        padding: 12px 14px;
        margin-bottom: 14px;
        border-radius: 6px;
    }

    .dashboard-charts-row .chart-content-bg .col-sm-6 {
        padding: 0 10px;
    }

    .dashboard-charts-row .chart-content-bg .col-sm-6:not(:last-child)::after {
        height: 35px;
    }

    .dashboard-charts-row .chart-content-bg h2 {
        font-size: 20px;
        gap: 6px;
    }

    .dashboard-charts-row .chart-content-bg p {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .dashboard-charts-row .chart-content-bg h2 small {
        width: 9px;
        height: 9px;
    }
}

/* ============================================
   STRIPE-STYLE SIDEBAR DESIGN - CLEAN & COMPACT
   ============================================ */

/* Main Sidebar Container */
.left-side-menu {
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    width: 240px;
}

/* Logo Box - Compact */
.left-side-menu .logo-box {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
}

.left-side-menu .logo-box img {
    max-height: 32px;
}

/* User Box - Compact */
.left-side-menu .user-box {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 8px;
}

.left-side-menu .user-box .avatar-md {
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
}

.left-side-menu .user-box .h5 {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.left-side-menu .user-box .text-muted {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 0;
}

/* Sidebar Menu Container */
#sidebar-menu {
    padding: 8px 0;
}

/* Menu Title (Section Headers) */
#sidebar-menu .menu-title {
    font-size: 11px;
    font-weight: 600;
     text-transform: capitalize;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 12px 20px 8px;
    margin-bottom: 4px;
    display: block;
}

/* Main Menu Items Container */
#sidebar-menu ul#side-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebar-menu ul#side-menu>li {
    margin-bottom: 0;
}

/* Second Level Navigation */
#sidebar-menu .nav-second-level {
    padding: 0 !important;
    margin: 0 !important;
}

#sidebar-menu .nav-second-level.p-0.mx-2 {
    margin: 0 8px !important;
}

/* Menu Items - Clean & Compact */
#sidebar-menu .nav-second-level li a {
    color: #1e293b;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    position: relative;
    margin-bottom: 2px;
    transition: all 0.15s ease;
    text-decoration: none;
}

/* Icon Styling */
#sidebar-menu .nav-second-level li a .leftsidebar-icon {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#sidebar-menu .nav-second-level li a .leftsidebar-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
    color: #64748b;
}

/* Hover State */
#sidebar-menu .nav-second-level li a:hover {
    background: #f7f7f7;
    color: var(--panel-color);
}

#sidebar-menu .nav-second-level li a:hover .leftsidebar-icon svg {
    color: var(--panel-color);
}

/* Active State - Purple Accent */
#sidebar-menu .menuitem-active .active,
#sidebar-menu li.menuitem-active a.menu-maim-active {
    background: var(--panel-color);
    color: #ffffff;
    font-weight: 500;
    border-color: transparent;
}

#sidebar-menu .menuitem-active .active .leftsidebar-icon svg,
#sidebar-menu li.menuitem-active a.menu-maim-active .leftsidebar-icon svg {
    color: #ffffff;
}

/* Collapsible Menu Items */
#sidebar-menu>ul>li>a[data-toggle="collapse"] {
    padding: 8px 12px;
    color: #1e293b;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    margin-bottom: 2px;
    transition: all 0.15s ease;
}

#sidebar-menu>ul>li>a[data-toggle="collapse"]:hover {
    background: #f7f7f7;
    color: var(--panel-color);
}

#sidebar-menu>ul>li>a[data-toggle="collapse"]:after {
    margin-left: auto;
    font-size: 14px;
    color: #64748b;
    transition: transform 0.2s ease;
}

#sidebar-menu>ul>li>a[data-toggle="collapse"][aria-expanded="true"]:after {
    transform: rotate(90deg);
}

/* Nested Menu Items (Third Level) */
#sidebar-menu .nav-second-level .nav-second-level {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 6px 0 !important;
    margin: 4px 0 4px 8px;
    width: calc(100% - 16px);
}

#sidebar-menu .nav-second-level .nav-second-level li a {
    padding: 6px 12px 6px 32px;
    font-size: 13px;
    margin-bottom: 0;
    background: transparent;
}

#sidebar-menu .nav-second-level .nav-second-level li a:hover {
    background: #ffffff;
    color: var(--panel-color);
}

#sidebar-menu .nav-second-level .nav-second-level li .active.menu-maim-active {
    background: transparent;
    color: var(--panel-color);
    font-weight: 600;
}

/* First Nav Level (Special Styling) */
#sidebar-menu .nav-second-level.first-nav-level li a::before,
#sidebar-menu .nav-second-level.nav-first-level li a::before {
    content: "";
    background: transparent;
    border: 1px solid #94a3b8;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

/* Scrollbar Styling */
.left-side-menu .h-100[data-simplebar] {
    overflow-y: auto;
}

.left-side-menu .h-100[data-simplebar]::-webkit-scrollbar {
    width: 4px;
}

.left-side-menu .h-100[data-simplebar]::-webkit-scrollbar-track {
    background: transparent;
}

.left-side-menu .h-100[data-simplebar]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.left-side-menu .h-100[data-simplebar]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Dark Mode Support */
body.dark .left-side-menu {
    background: #1e293b;
    border-right-color: #334155;
}

body.dark .left-side-menu .logo-box,
body.dark .left-side-menu .user-box {
    border-bottom-color: #334155;
}

body.dark #sidebar-menu .menu-title {
    color: #94a3b8;
}

body.dark #sidebar-menu .nav-second-level li a {
    color: #e2e8f0;
}

body.dark #sidebar-menu .nav-second-level li a:hover {
    background: #334155;
    color: var(--panel-color);
}

body.dark #sidebar-menu .nav-second-level li a .leftsidebar-icon svg {
    color: #94a3b8;
}

body.dark #sidebar-menu .menuitem-active .active,
body.dark #sidebar-menu li.menuitem-active a.menu-maim-active {
    background: var(--panel-color);
    color: #ffffff;
}

body.dark .left-side-menu .user-box .h5 {
    color: #e2e8f0;
}

body.dark .left-side-menu .user-box .text-muted {
    color: #94a3b8;
}

/* Responsive Adjustments */
@media (max-width: 1199px) {
    .left-side-menu {
        width: 220px;
    }

    #sidebar-menu .nav-second-level li a {
        padding: 7px 10px;
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .left-side-menu {
        width: 200px;
    }
}

/* =========================================================
   Voltaic-style Admin Sidebar
   ========================================================= */

.left-side-menu {
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    width: var(--sidebar-width);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

.left-side-menu .logo-box {
    padding: 0 18px;
    margin-bottom: 0;
    border: none;
}

.left-side-menu .logo-box .logo-light img,
.left-side-menu .logo-box .logo-dark img {
    max-height: 54px;
}

.left-side-menu .sidebar-header {
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.left-side-menu .user-account-box {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.left-side-menu .user-account-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f4f4ff;
    color: #635bff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.left-side-menu .user-account-info {
    flex: 1;
    min-width: 0;
}

.left-side-menu .user-account-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.left-side-menu .user-account-sub {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.2;
}

.left-side-menu .user-account-toggle {
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    flex-shrink: 0;
}

.left-side-menu .user-account-toggle svg {
    width: 10px;
    height: 10px;
}

.left-side-menu #sidebar-menu {
    padding: 6px 0 8px;
}

.left-side-menu #sidebar-menu .menu-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize !important;
    letter-spacing: 0.08em;
    color: #9ca3af !important;
    padding: 12px 18px 6px !important;
    margin: 0;
}

.left-side-menu #sidebar-menu ul#side-menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.left-side-menu #sidebar-menu .nav-second-level {
    padding: 0 !important;
    margin: 0 !important;
}

.left-side-menu #sidebar-menu .nav-second-level.p-0.mx-2 {
    margin: 0 0 10px !important;
}

.left-side-menu #sidebar-menu .nav-second-level li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:0px 18px;
    font-size: 14px;
    font-weight: 400;
    color: #4b5563;
    text-decoration: none;
    background: transparent;
    margin: 2px 10px;
}

.left-side-menu #sidebar-menu .nav-second-level li a .leftsidebar-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -2px;
}

.left-side-menu #sidebar-menu .nav-second-level li a .leftsidebar-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.7;
    color: #6b7280;
}

.left-side-menu #sidebar-menu .nav-second-level li a:hover {
    border-color: transparent;
}

.left-side-menu #sidebar-menu .nav-second-level li a:hover .leftsidebar-icon svg {
    color: #2563eb;
}

.left-side-menu #sidebar-menu .collapse  .nav-second-level li a .leftsidebar-icon {
    display: none !important;
}
.left-side-menu #sidebar-menu .collapse  .nav-second-level li a:hover {
    background: transparent !important;
}
.left-side-menu #sidebar-menu .menuitem-active .active,
.left-side-menu #sidebar-menu li.menuitem-active a.menu-maim-active {
    color: var(--panel-color);
    font-weight: 600;
}

.left-side-menu #sidebar-menu .menuitem-active .active .leftsidebar-icon svg,
.left-side-menu #sidebar-menu li.menuitem-active a.menu-maim-active .leftsidebar-icon svg {
    color: #2563eb;
}

.left-side-menu #sidebar-menu>ul>li>a[data-toggle="collapse"] {
    padding: 8px 18px;
    border-radius: 10px;
    margin: 4px 10px 2px;
    font-size: 13px;
    color: #4b5563;
    background: transparent;
}

.left-side-menu #sidebar-menu>ul>li>a[data-toggle="collapse"]:after {
    margin-left: auto;
    font-size: 11px;
    color: #9ca3af;
}

.left-side-menu #sidebar-menu>ul>li>a[data-toggle="collapse"]:hover {
    background: #f5f7ff;
    color: #111827;
}

.left-side-menu .sidebar-footer {
    border-top: 1px solid #e5e7eb;
    padding: 8px 14px;
    flex-shrink: 0;
}

.left-side-menu .footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 12px;
    color: #4b5563;
}

.left-side-menu .footer-icon svg {
    width: 14px;
    height: 14px;
    color: #9ca3af;
}

.left-side-menu .footer-link:hover {
    color: #111827;
}

.left-side-menu .h-100[data-simplebar] {
    display: flex;
    flex-direction: column;
}

.left-side-menu #sidebar-menu {
    flex: 1 1 auto;
}

#sidebar-menu .menuitem-active:has(> .show .menu-maim-active)>a svg {
    color: var(--panel-color) !important;
}


/* ============================================
   FULL PAGE LOADER
   ============================================ */

/* ============================================
   PAGE LOADER — card-style enhanced spinner
   ============================================ */
.page-loader {
    position: fixed;
    inset: 0;
    background: rgb(255 255 255 / 72%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

/* Frosted card */
.loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 48px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 1.5px 6px rgba(0,0,0,0.06);
    animation: loader-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes loader-card-in {
    from { opacity: 0; transform: scale(0.82) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* SVG arc spinner with pulse core */
.loader-ring-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-svg {
    width: 64px;
    height: 64px;
    animation: loader-rotate 1.4s linear infinite;
}

.loader-track {
    stroke: #eef0f7;
}

.loader-arc {
    stroke: var(--panel-color, #2563eb);
    stroke-dasharray: 1 200;
    stroke-dashoffset: 0;
    animation: loader-dash 1.5s ease-in-out infinite;
}

/* Inner pulsing dot */
.loader-pulse {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--panel-color, #2563eb);
    opacity: 0.85;
    animation: loader-pulse-beat 1.5s ease-in-out infinite;
}

@keyframes loader-pulse-beat {
    0%, 100% { transform: scale(0.7); opacity: 0.5; }
    50%       { transform: scale(1.2); opacity: 1; }
}

@keyframes loader-rotate {
    100% { transform: rotate(360deg); transform-origin: center; }
}

@keyframes loader-dash {
    0%   { stroke-dasharray: 1 200;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 100 200; stroke-dashoffset: -40px; }
    100% { stroke-dasharray: 100 200; stroke-dashoffset: -130px; }
}

/* Loading label with animated ellipsis */
.loader-label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #6c7293;
     text-transform: capitalize;
}

.loader-ellipsis span {
    animation: loader-ellipsis-blink 1.4s infinite;
    opacity: 0;
}
.loader-ellipsis span:nth-child(1) { animation-delay: 0s; }
.loader-ellipsis span:nth-child(2) { animation-delay: 0.2s; }
.loader-ellipsis span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loader-ellipsis-blink {
    0%, 80%, 100% { opacity: 0; }
    40%            { opacity: 1; }
}

/* Dark mode */
body.dark .page-loader {
    background: rgba(15, 23, 42, 0.72);
}

body.dark .loader-card {
    background: #1a2035;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1.5px 6px rgba(0,0,0,0.2);
}

body.dark .loader-track {
    stroke: #2d3a55;
}

body.dark .loader-label {
    color: #8b9ab8;
}

/* ============================================
   SIMILAR PRODUCTS — product-ecommerce.blade.php
   Mirrors #ec card design, scoped to #ep-similar
   ============================================ */
#ep-similar {
    padding: 48px 0 56px;
    background: #f6f7fb;
}

#ep-similar .ep-sim-head {
    margin-bottom: 24px;
}
#ep-similar .ep-sim-head h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    position: relative;
    padding-bottom: 10px;
}
#ep-similar .ep-sim-head h2::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 3px;
    background: var(--theme-deafult, #c41d49);
    border-radius: 2px;
}

/* Grid — 4 cols, same breakpoints as homepage */
#ep-similar .ep-sim-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Card */
#ep-similar .ep-sim-card {
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    position: relative;
}
#ep-similar .ep-sim-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    transform: translateY(-2px);
}

/* Inner anchor (image + body only) */
#ep-similar .ep-sim-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

/* Image */
#ep-similar .ep-sim-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    overflow: hidden;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
#ep-similar .ep-sim-img {
    max-width: 85%;
    max-height: 180px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .3s;
}
#ep-similar .ep-sim-card:hover .ep-sim-img { transform: scale(1.07); }

/* Body */
#ep-similar .ep-sim-body {
    padding: 12px 14px 8px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
#ep-similar .ep-sim-name {
    font-size: 13px;
    font-weight: 500;
    color: #212121;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
#ep-similar .ep-sim-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}
#ep-similar .ep-sim-price {
    font-size: 15px;
    font-weight: 700;
    color: #212121;
}

/* ATC button + stepper */
#ep-similar .ep-sim-atc-wrap {
    padding: 0 14px 14px;
}
#ep-similar .ep-sim-atc {
    display: block;
    width: 100%;
    padding: 9px 0;
    background: var(--theme-deafult, #2874f0);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
    letter-spacing: .3px;
}
#ep-similar .ep-sim-atc:hover { opacity: .88; transform: translateY(-2px); }

#ep-similar .ep-sim-stepper {
    display: none;
    align-items: center;
    justify-content: space-between;
    border: 1.5px solid var(--theme-deafult, #2874f0);
    border-radius: 6px;
    overflow: hidden;
}
#ep-similar .ep-sim-stepper-btn {
    background: var(--theme-deafult, #2874f0);
    color: #fff !important;
    border: none;
    width: 34px;
    height: 34px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#ep-similar .ep-sim-stepper-btn i { font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important; color: #fff !important; }
#ep-similar .ep-sim-stepper-qty {
    flex: 1;
    text-align: center;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    background: #fff;
    width: 0;
}
/* jQuery .show() sets display:block — force flex */
#ep-similar .ep-sim-stepper[style*="display: block"],
#ep-similar .ep-sim-stepper[style*="display:block"] { display: flex !important; }

/* Responsive */
@media (max-width: 992px)  { #ep-similar .ep-sim-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 768px)  { #ep-similar .ep-sim-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } #ep-similar .ep-sim-img-wrap { height: 160px; } }
@media (max-width: 480px)  { #ep-similar .ep-sim-img-wrap { height: 140px; } }

/* ============================================
   TOPBAR PAGE TITLE
   ============================================ */

.topbar-page-title {
    flex: 0 0 auto;
    padding: 0 24px;
    min-width: 0;
}

.topbar-page-title .page-title-text {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    line-height: 1.2;
}

/* Dark Mode Support */
body.dark .topbar-page-title .page-title-text {
    color: #e2e8f0;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .topbar-page-title {
        padding: 0 12px;
        flex: 1;
        min-width: 0;
    }

    .topbar-page-title .page-title-text {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .topbar-page-title {
        padding: 0 8px;
    }

    .topbar-page-title .page-title-text {
        font-size: 16px;
    }
}

/* ============================================
   RECENT USERS LIST
   ============================================ */

.recent-users-list {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: 330px;
    overflow-y: auto;
    overflow-x: hidden;
}

.recent-users-list::-webkit-scrollbar {
    width: 6px;
}

.recent-users-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.recent-users-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.recent-users-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.recent-users-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    padding: 24px 0;
    margin: 0;
}

.recent-user-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.recent-user-item:last-child {
    border-bottom: none;
}

.recent-user-item:hover {
    background-color: #f8fafc;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.recent-user-item .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #b4b8bf;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(83, 58, 255, 0.15);
}

.recent-user-item .user-info {
    flex: 1;
    min-width: 0;
    margin-right: 12px;
}

.recent-user-item .user-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.recent-user-item .user-email {
    font-size: 11px;
    color: #64748b;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.recent-user-item .user-date {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 500;
    margin-right: 10px;
}

/* Dark Mode Support */
body.dark .recent-users-list::-webkit-scrollbar-track {
    background: #1e293b;
}

body.dark .recent-users-list::-webkit-scrollbar-thumb {
    background: #334155;
}

body.dark .recent-users-list::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

body.dark .recent-users-empty {
    color: #64748b;
}

body.dark .recent-user-item {
    border-bottom-color: #334155;
}

body.dark .recent-user-item:hover {
    background-color: #1e293b;
}

body.dark .recent-user-item .user-name {
    color: #e2e8f0;
}

body.dark .recent-user-item .user-email {
    color: #94a3b8;
}

body.dark .recent-user-item .user-date {
    color: #64748b;
}

/* Responsive */
@media (max-width: 768px) {
    .recent-user-item {
        padding: 10px 0;
    }

    .recent-user-item:hover {
        margin: 0 -18px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .recent-user-item .user-avatar {
        width: 36px;
        height: 36px;
        font-size: 12px;
        margin-right: 10px;
    }

    .recent-user-item .user-name {
        font-size: 12px;
    }

    .recent-user-item .user-email {
        font-size: 10px;
    }

    .recent-user-item .user-date {
        font-size: 10px;
    }
}

/* ===================== Orders Page Styles ======================== */
.page-title-box {
    background: transparent; border: none;
    padding: 0.9rem 0 !important;  box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: end;
}

/* ── Order filter chip shared base ──────────────────────────────── */
.ord-select-chip,
.ord-search-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #e0e6ed; border-radius: 8px;
    padding: 0 12px; height: 38px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: border-color .2s, box-shadow .2s;
    margin: 0;
}
.ord-select-chip:hover,
.ord-search-chip:hover {
    border-color: var(--panel-color);
    box-shadow: 0 0 0 3px rgba(121,97,245,.08);
}
.ord-chip-icon { font-size: 1rem; color: var(--panel-color); flex-shrink: 0; }
.ord-chip-caret { font-size: .9rem; color: #8898aa; flex-shrink: 0; }

.ord-chip-select {
    border: none !important; outline: none !important;
    background: transparent !important; -webkit-appearance: none; appearance: none;
    font-size: .8rem !important; font-weight: 500 !important;
    color: #2d3748 !important; width: 150px; cursor: pointer;
    padding: 0 !important; height: auto !important; box-shadow: none !important;
}
.ord-chip-input {
    border: none !important; outline: none !important;
    background: transparent !important;
    font-size: .8rem !important; font-weight: 500 !important;
    color: #2d3748 !important; width: 190px;
    padding: 0 !important; height: auto !important; box-shadow: none !important;
}
.ord-chip-input::placeholder { color: #9ca3af; }

/* Flatpickr inside date chip — prevent it from shrinking */
#range-datepicker.ord-chip-input { width: 175px; cursor: pointer; }

/* Page title row tweaks */
.order-page .page-title-filters form { gap: 0.5rem; }
.order-page .page-title-box .d-flex { align-items: center; }
.order-page .page-title-box h4.page-title { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin-bottom: 0; }

/* gap-2 utility safety net */
.gap-2 { gap: 0.5rem !important; }

/* Clear-filter uses dash-refresh-btn but red tint on hover */
.ord-clear-btn { color: #ef4444 !important; }
.ord-clear-btn:hover { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; transform: none !important; }

/* ============================================
   FLATPICKR CALENDAR - GLOBAL STYLING
   ============================================ */

/* Flatpickr Calendar Styling - Clean Design (Global) */
.flatpickr-calendar {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    padding: 0.5rem 0.5rem !important;
    margin-top: 0.25rem !important;
    font-size: 0.75rem !important;
    width: auto !important;
    min-width: 300px !important;
    max-width: 320px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.flatpickr-calendar .flatpickr-innerContainer {
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.flatpickr-calendar .flatpickr-rContainer {
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.flatpickr-calendar.arrowTop:before {
    border-bottom-color: #e5e7eb !important;
}

.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #ffffff !important;
}

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
    border-top-color: #ffffff !important;
}

/* Calendar Header */
.flatpickr-months {
    padding: 0.25rem 0.375rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    margin-bottom: 0.25rem !important;
}

.flatpickr-current-month {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding: 0.125rem 0 !important;
}

.flatpickr-monthDropdown-months {
    font-weight: 600 !important;
    color: #1e293b !important;
    font-size: 0.8125rem !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: #6b7280 !important;
    fill: #6b7280 !important;
    padding: 0.375rem !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    width: 24px !important;
    height: 24px !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: #f9fafb !important;
    color: #374151 !important;
    fill: #374151 !important;
}

/* Weekday Labels */
.flatpickr-weekdays {
    background: transparent !important;
    padding: 0.25rem 0 !important;
    margin-bottom: 0.125rem !important;
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.flatpickr-weekday {
    color: #6b7280 !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
    flex: 1 1 calc(100% / 7) !important;
    text-align: center !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Calendar Days */
.flatpickr-days {
    padding: 0.25rem 0.125rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.flatpickr-day {
    border-radius: 4px !important;
    border: none !important;
    color: #374151 !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    height: 28px !important;
    line-height: 28px !important;
    margin: 0.125rem !important;
    transition: all 0.2s ease !important;
    flex: 1 1 calc((100% - 1.75rem) / 7) !important;
    min-width: calc((100% - 1.75rem) / 7) !important;
    max-width: calc((100% - 1.75rem) / 7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: visible !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.flatpickr-day:hover {
    background: #f3f4f6 !important;
    border-color: transparent !important;
    color: #1e293b !important;
}

.flatpickr-day.today {
    border: 1px solid var(--panel-color) !important;
    background: #ffffff !important;
    color: var(--panel-color) !important;
    font-weight: 600 !important;
}

.flatpickr-day.today:hover {
    background: #f0f4ff !important;
    border-color: var(--panel-color) !important;
}

/* Selected Days */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--panel-color) !important;
    border-color: var(--panel-color) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(83, 58, 255, 0.3) !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--panel-color) !important;
    border-color: var(--panel-color) !important;
    opacity: 0.9 !important;
}

/* Range Selection */
.flatpickr-day.inRange {
    background: #f0f4ff !important;
    border-color: transparent !important;
    color: var(--panel-color) !important;
    box-shadow: none !important;
}

.flatpickr-day.inRange:hover {
    background: #e0e9ff !important;
}

/* Disabled Days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #d1d5db !important;
    cursor: not-allowed !important;
    flex: 1 1 calc((100% - 1.75rem) / 7) !important;
    min-width: calc((100% - 1.75rem) / 7) !important;
    max-width: calc((100% - 1.75rem) / 7) !important;
}

.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: transparent !important;
    color: #d1d5db !important;
}

/* Input Enhancement */
.flatpickr-input[readonly] {
    cursor: pointer;
}

.flatpickr-input[readonly]:hover {
    border-color: #cbd5e1;
}

/* ── Order List Card — wraps tab bar + table ── */
.order-list-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
    overflow: hidden;
    margin: 0 0 1.5rem;
}
.order-list-card .tab-product { margin: 0; padding: 0; }
.order-list-card .pl-2 { padding-left: 0 !important; }
.order-list-card .pr-2 { padding-right: 0 !important; }

/* Tab bar inside card — bottom border separator, flush padding */
.order-list-card .nav-material.clean-tabs {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 1.25rem !important;
    margin-bottom: 0 !important;
    background: #fff;
}
.order-list-card .nav-material.clean-tabs .nav-link {
    padding: 0.75rem 0.25rem !important;
    margin-right: 1.25rem !important;
}

/* Table cell typography */
.order-id-cell { vertical-align: middle; }
.order-id-cell strong { font-size: 0.875rem; color: #1e293b; font-weight: 600; }
.customer-cell { vertical-align: middle; font-size: 0.8125rem; color: #1e293b; font-weight: 500; }
.date-cell     { vertical-align: middle; font-size: 0.8125rem; color: #64748b; }
.amount-cell   { vertical-align: middle; }
.amount-cell strong { font-size: 0.875rem; color: #1e293b; font-weight: 600; }
.expand-toggle { cursor: pointer; vertical-align: middle; }

/* "View Details" / "Hide Details" link */
.expand-text {
    display: inline-flex; align-items: center; gap: 2px;
    color: var(--panel-color); font-size: 0.8125rem; font-weight: 600;
    white-space: nowrap; cursor: pointer;
}
.expand-text::after { content: ' ›'; font-size: 1.1rem; line-height: 1; }

/* Table inside card — no outer border needed */
.order-list-card .table-responsive { border-radius: 0; }

/* Accounting Upload Button */
.order-page .accounting_upload {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.order-page .accounting_upload .btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

/* ── Order page: Responsive Design ──────────────────────────────── */

/* Tablet (≤991px) — title row stacks, filters expand */
@media (max-width: 991px) {
    .order-page .page-title-box .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .75rem;
    }
    .order-page .page-title-box .page-title-filters { margin-left: 0; width: 100%; }
    .order-page .page-title-box form               { width: 100%; flex-wrap: wrap !important; gap: .4rem !important; }
    .ord-select-chip,
    .ord-search-chip                               { flex: 1 1 auto; min-width: 140px; }
    #range-datepicker.ord-chip-input               { width: 100% !important; }
}

/* Mobile-large (≤767px) */
@media (max-width: 767px) {
    .order-page .page-title-box { padding: .5rem 0; margin-bottom: .5rem; }
    .order-page .page-title-box h4.page-title { font-size: 1.05rem; }

    /* Filter chips: each takes full row */
    .order-page .page-title-box form { flex-direction: column !important; gap: .4rem !important; }
    .ord-select-chip,
    .ord-search-chip    { width: 100% !important; }
    .ord-clear-btn      { width: 100% !important; border-radius: 8px !important; padding: .35rem !important; }

    /* Tab bar: scroll horizontally, don't wrap */
    .tab-product .nav-material.clean-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tab-product .nav-material.clean-tabs::-webkit-scrollbar { display: none; }
    .tab-product .nav-material.clean-tabs .nav-item { flex-shrink: 0; }
    .tab-product .nav-material.clean-tabs .nav-link { white-space: nowrap; font-size: .75rem !important; padding: .65rem .4rem !important; margin-right: .75rem !important; }

    /* OC header: wrap on small screens */
    .oc-header         { flex-wrap: wrap; gap: .4rem .75rem; padding: .65rem .9rem; }
    .oc-meta-divider   { display: none; }
    .oc-header-meta    { padding-left: 0 !important; border-left: none !important; }
    .oc-customer-block { flex: 1 1 auto; min-width: 0; }

    /* OC card compact on tablet */
    .oc-card    { border-radius: 10px; }
    .oc-actions { gap: .4rem; }
    .oc-actions .btn { font-size: .72rem; padding: .3rem .6rem; }
}

/* Mobile-small (≤575px) */
@media (max-width: 575px) {
    /* Avatar smaller */
    .oc-avatar { width: 34px; height: 34px; font-size: .75rem; }

    /* Customer name + order id condensed */
    .oc-customer-name  { font-size: .82rem; }
    .oc-order-id       { font-size: .68rem; }

    /* Meta labels/values smaller */
    .oc-meta-label     { font-size: .62rem; }
    .oc-meta-val       { font-size: .78rem; }

    /* Tab links smaller */
    .tab-product .nav-material.clean-tabs .nav-link { font-size: .7rem !important; margin-right: .5rem !important; }

    /* Status badge */
    .oc-status-badge   { font-size: .65rem; padding: 2px 7px; }

    /* OC summary panel full-width stacked */
    .oc-summary        { min-width: 0 !important; width: 100%; padding: .65rem .9rem; }
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order_data>div,
.order_head h4 {
    padding: 0 !important;
}

.order-page .card-box {
    padding: 20px 20px 5px !important;
}

#topbar-page-title {
    text-transform: capitalize;
}

.progress-order {
    width: calc(100% + 48px);
    margin: 0;
    background: none;
    color: var(--theme-deafult);
    position: relative;
    left: -24px;
    font-weight: 600;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 5px 0;
}

.error-msg {
    font-size: 20px;
    position: relative;
    width: 100%;
}

.empty-order-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 380px;
    padding: 3rem 2rem;
}
.empty-order-state img {
    max-width: 130px;
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    opacity: .88;
}
.empty-order-state .oc-es-title {
    font-size: .975rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 .35rem !important;
}
.empty-order-state p:not(.oc-es-title) {
    font-size: .825rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

.accounting_upload .btn.btn-info {
    border-radius: 10px !important;
}

.alBtnsOnOrders {
    position: absolute;
    left: 10px;
    padding: 0;
    bottom: 10px;
    margin: 0;
}

.alBtnsOnOrders li {
    list-style: none;
    margin-right: 3px;
}

.alBtnsOnOrders .start_chat {
    color: var(--panel-color);
    height: 30px;
    width: 30px;
    display: inline-block;
    min-width: auto;
    line-height: 26px;
    z-index: 999;
    background-color: transparent;
    border: 1px solid;
}

.rental_filter_tab {
    position: absolute;
    left: 0;
    width: 100%;
}

.rental_filter_tab li.nav-item {
    width: auto;
    display: inline-block;
}

/* Main Navigation Tabs - Modern Clean Design */
.tab-product {
    margin-bottom: 12px;
}

.nav-material {
    border: none;
    margin-bottom: 0rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    border-radius: 10px;
}

.nav-material .nav-item {
    margin: 0;
}

.nav-material .nav-link {
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    white-space: nowrap;
    margin: 0;
}

.nav-material .nav-link i {
    font-size: 0.9375rem;
    opacity: 0.7;
    transition: all 0.25s ease;
}

.nav-material .nav-link:hover {
    color: var(--panel-color);
    background: rgba(96, 122, 233, 0.08);
}

.nav-material .nav-link:hover i {
    opacity: 1;
    color: var(--panel-color);
}

.nav-material .nav-link.active {
    color: #ffffff;
    font-weight: 600;
    background: linear-gradient(135deg, var(--panel-color) 0%, #8F7AE9 100%);
    box-shadow: 0 2px 8px rgba(96, 122, 233, 0.3);
}

/* Wrapper for content area card (used later) */
.order-content-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(21, 21, 21, 0.12);
    padding: 1rem 0.75rem 0.75rem;
}

.nav-material .nav-link.active i {
    opacity: 1;
    color: #ffffff;
}

.nav-material .material-border {
    display: none;
}

/* Clean Tabs Design - Matching Image Exactly */
.nav-material.clean-tabs {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    gap: 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    border-top: none;
    border-left: none;
    border-right: none;
}

.nav-material.clean-tabs .nav-item {
    margin: 0;
    margin-right: 0;
    display: flex;
    align-items: flex-end;
}

.nav-material.clean-tabs .nav-item.ml-auto {
    margin-left: auto;
    margin-right: 0;
}

.nav-material.clean-tabs .nav-link {
    border-radius: 0;
    padding: 0.5rem 0;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: color 0.2s ease;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    position: relative;
    white-space: nowrap;
    margin: 0;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    margin-right: 20px;
}

.nav-material.clean-tabs .nav-link::after {
    display: none;
}

.nav-material.clean-tabs .nav-link:hover {
    color: var(--panel-color);
    background: transparent;
    border-bottom-color: transparent;
}

.nav-material.clean-tabs .nav-link.active {
    color: var(--panel-color);
    font-weight: 500;
    background: transparent;
    box-shadow: none;
    border-bottom: 2px solid var(--panel-color);
}

.nav-material.clean-tabs .nav-link .total-items {
    color: #64748b;
    font-weight: 500;
    margin-left: 0;
    transition: color 0.2s ease;
}

.nav-material.clean-tabs .nav-link:hover .total-items {
    color: var(--panel-color);
}

.nav-material.clean-tabs .nav-link.active .total-items {
    color: var(--panel-color);
    font-weight: 500;
}

.tab-product {
    margin-bottom: 0;
    padding: 0;
}

.tab-product .item {
    margin: 0;
    padding: 0;
    position: relative;
}

.tab-product .item .vp-search {
    position: absolute;
    top: 0;
    right: 0;
}

.order-list-spinner {
    margin-bottom: 0;
}

.order-list-spinner .tab-product {
    margin-bottom: 0;
}

/* Action Links (Return Request, Cancel Booking) - Beside Main Tabs */
.nav-material .nav-item.ml-auto {
    margin-left: auto;
}

.tab-content>.active {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0 ;
}

.vendor-products .tab-content > .active {
	display: block;
	width: 100%;
	overflow: hidden;
	padding: 0;
}

.nav-material .nav-link-action {
    border-radius: 8px;
    padding: 0.6rem 1.1rem;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #eef2ff;
    background: #f8f9ff;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    white-space: nowrap;
    margin: 0;
    text-decoration: none;
}

.nav-material.clean-tabs .nav-link-action {
    border-radius: 0;
    padding:0.5rem 0;
    color: #64748b;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: color 0.2s ease;
    border: none;
    background: transparent;
    gap: 0.375rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.nav-material .nav-link-action:hover {
    color: var(--panel-color);
    background: #eef2ff;
    border-color: #dde3ff;
}

.nav-material.clean-tabs .nav-link-action:hover {
    color: var(--panel-color);
    background: transparent;
    border-bottom-color: transparent;
}

.nav-material .nav-link-action i {
    font-size: 0.9375rem;
    opacity: 0.7;
    transition: all 0.25s ease;
}

.nav-material .nav-link-action:hover i {
    opacity: 1;
    color: var(--panel-color);
}

/* Return Request & Cancel Booking Links - Subtle Design (Hidden) */
.page-title-box.page-title-box a {
    color: #64748b;
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.page-title-box.page-title-box a:hover {
    color: var(--panel-color);
}

.page-title-box.page-title-box a b {
    font-weight: 500;
    margin: 0;
}

.page-title-box.page-title-box a .total-items {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: 0.125rem;
}

/* Order Table Format Styling */
.order-table-row {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    margin-bottom: 1rem;
    box-shadow: none;
    overflow: hidden;
}

.order-header-table {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    margin-bottom: 0;
}

.order-header-table thead th {
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
     text-transform: capitalize;
    letter-spacing: 0.5px;
    color: #64748b;
    background: transparent;
}

.order-header-table tbody td {
    border: 1px solid #e5e7eb;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: #1e293b;
    vertical-align: middle;
}

/* Compact Order Header Info in Right Column */
.order-header-info {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 0.75rem;
    box-shadow: none;
    margin-bottom: 0.75rem;
}

.vendor-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--panel-color);
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.order-details-list>div:last-child {
    margin-bottom: 0 !important;
}

.order-main-table {
    background: #ffffff;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    width: 100%;
}

.order-main-table thead th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    font-size: 0.72rem;
     text-transform: capitalize;
    letter-spacing: 0.06em;
    padding: 0.75rem 1.25rem;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    vertical-align: middle;
    white-space: nowrap;
    text-align: left;
}

.order-main-table thead th:first-child { padding-left: 1.5rem; }
.order-main-table thead th:last-child  { padding-right: 1.5rem; }

.order-main-table tbody tr.order-row {
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.15s ease;
}
.order-main-table tbody tr.order-row:hover > td { background: #f8faff; }
.order-main-table tbody tr.order-row:last-child { border-bottom: none; }

.order-main-table tbody tr.order-row td {
    border: none;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    color: #1e293b;
}
.order-main-table tbody tr.order-row td:first-child { padding-left: 1.5rem; }
.order-main-table tbody tr.order-row td:last-child  { padding-right: 1.5rem; }

.order-main-table tbody tr.order-detail-row { background: #f8fafc; }
.order-main-table tbody tr.order-detail-row > td { border: none !important; padding: 0 !important; }
.order-main-table tbody tr.order-detail-row .order-detail-content {
    border-top: 1px solid #f1f5f9;
    transition: opacity 0.3s ease-in-out;
}

/* ── Soft pill status badges ── */
.order-main-table .al-badge-sm,
.al-badge-sm {
    font-size: 0.7rem !important; font-weight: 600 !important;
    padding: 0.28rem 0.65rem !important; border-radius: 20px !important;
    letter-spacing: 0.02em; border: none !important; display: inline-block;
}
.order-main-table .badge-secondary, .badge-secondary.al-badge-sm {
    background: rgba(100,116,139,.13) !important; color: #475569 !important;
}
.order-main-table .badge-warning, .badge-warning.al-badge-sm {
    background: rgba(245,158,11,.13) !important; color: #b45309 !important;
}
.order-main-table .badge-primary, .badge-primary.al-badge-sm {
    background: rgba(4,80,196,.11) !important; color: var(--panel-color) !important;
}
.order-main-table .badge-danger, .badge-danger.al-badge-sm {
    background: rgba(239,68,68,.11) !important; color: #dc2626 !important;
}
.order-main-table .badge-info, .badge-info.al-badge-sm {
    background: rgba(6,182,212,.11) !important; color: #0891b2 !important;
}
.order-main-table .badge-success, .badge-success.al-badge-sm {
    background: rgba(16,185,129,.11) !important; color: #059669 !important;

}

/* General table row styles for order-main-table (for return page) */
.order-main-table tbody tr:not(.order-row):not(.order-detail-row) {
    background: #ffffff;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
}

.order-main-table tbody tr:not(.order-row):not(.order-detail-row):hover {
    background: #f9fafb;
}

.order-main-table tbody tr:not(.order-row):not(.order-detail-row):last-child {
    border-bottom: none;
}

.order-main-table tbody tr:not(.order-row):not(.order-detail-row) td {
    border: none;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    padding: 1rem;
    font-size: 0.875rem;
    color: #1f2937;
}

.order-main-table tbody tr:not(.order-row):not(.order-detail-row) td:first-child {
    padding-left: 1.5rem;
}

.order-main-table tbody tr:not(.order-row):not(.order-detail-row) td:last-child {
    padding-right: 1.5rem;
}

.expand-toggle {
    transition: color 0.2s ease;
}

.expand-icon {
    transition: transform 0.3s ease, color 0.2s ease;
}

.order-row.expanded .expand-text {
    color: var(--panel-color);
}

.al-vendor-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.al-vendor-badges {
    margin-bottom: 0.5rem;
}

.al-vendor-head {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0;
    background: linear-gradient(135deg, #f0f5ff 0%, #f8fafc 100%);
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0;
    border-left: 3px solid var(--panel-color);
}

.al-vendor-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.al-vendor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.al-chip {
    border-radius: 999px;
    white-space: nowrap;
}

.al-category-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.25rem 0 0.5rem;
    padding-top: 0.25rem;
}

.al-category-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

.al-badge-sm {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
}

.al-badge-status {
    font-size: 0.7rem;
    padding: 0.28rem 0.7rem;
    border-radius: 20px !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: none;
}

.al-vendor-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

.al-vendor-info {
    margin-bottom: 0;
    padding: 0.75rem 1rem;
}

.al-vendor-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.al-vendor-name i {
    color: var(--panel-color);
    font-size: 0.75rem;
}

.category-section {
    margin-bottom: 0.5rem;
}

.category-header {
    margin-bottom: 0.375rem;
}

.al-products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .al-products-grid {
        grid-template-columns: 1fr;
    }
}

.product-item {
    padding: 0.5rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
}

.product-image {
    position: relative;
    flex-shrink: 0;
}

.al-product-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #eef2ff;
    background: #fff;
}

.product-details {
    min-width: 0;
}

.al-product-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.al-product-price {
    font-size: 0.8125rem;
    color: var(--panel-color);
    font-weight: 700;
    white-space: nowrap;
}

.item_no {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--panel-color);
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 800;
    padding: 0 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    border: 1.5px solid var(--panel-color);
    line-height: 1;
}

.al-category-total {
    border-top: 1px solid #e5e7eb;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    padding: 0.5rem 0;
}

.al-total-label,
.al-amount-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

.al-total-label i {
    font-size: 0.6875rem;
}

.al-total-value,
.al-amount-value {
    font-size: 0.875rem;
    color: #1e293b;
    font-weight: 600;
}

.al-vendor-actions {
    border-top: 1px solid #f1f5f9;
    margin-top: 0;
    padding: 0.75rem 1rem;
    background: #fafbfc;
    border-radius: 0 0 12px 12px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.al-vendor-actions .btn {
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 1.1rem !important;
    letter-spacing: 0.02em;
}

/* Order details side card (Order Details / Order Summary) */
.order-main-table .al-summary-card {
    position: sticky;
    top: 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
}

.order-main-table .al-summary-section--divider {
    padding-top: 0.75rem;
    border-top: 1px dashed #e2e8f0;
}

.order-main-table .al-summary-section { padding: 0.9rem; }
.order-main-table .al-summary-section + .al-summary-section {
    margin-top: 0;
    border-top: 1px solid #f1f5f9;
}
.order-main-table .al-summary-title {
    font-size: 0.68rem;
    font-weight: 800;
    color: #64748b;
    margin: 0 0 0.65rem;
     text-transform: capitalize;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.order-main-table .al-summary-title i {
    color: var(--panel-color);
    font-size: 0.75rem;
}

.order-main-table .al-summary-list {
    font-size: 0.8125rem;
    margin: 0;
}

.order-main-table .al-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

.order-main-table .al-summary-label {
    color: #64748b;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 110px;
}

.order-main-table .al-summary-label i {
    color: #94a3b8;
    font-size: 0.875rem;
}

.order-main-table .al-summary-value {
    color: #1e293b;
    font-weight: 500;
    text-align: right;
    flex: 1;
    min-width: 0;
}

.order-main-table .al-summary-value strong {
    font-weight: 800;
}

.order-main-table .al-summary-value--wrap {
    white-space: normal;
    line-height: 1.35;
}

.order-main-table .al-summary-muted {
    color: #94a3b8;
}

.order-main-table .al-summary-positive {
    color: #10b981;
    font-weight: 700;
}

.order-main-table .al-payable-row {
    margin-top: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(4,80,196,.06), rgba(4,80,196,.03));
    border: 1px solid rgba(4,80,196,.18);
}

.order-main-table .al-payable-label {
    color: #1e293b;
}

.order-main-table .al-payable-label i {
    color: var(--panel-color);
}

.order-main-table .al-payable-value {
    color: var(--panel-color);
    font-size: 1rem;
    font-weight: 800;
}

/* ── Order detail panel — enhanced polish ──────────────────────── */
/* Vendor card */
.al-vendor-section {
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
    overflow: hidden;
    margin-bottom: 1rem;
}
.al-vendor-head {
    background: linear-gradient(135deg, #f0f4ff 0%, #f8fafc 100%);
    border-bottom: 1px solid #e8edf5;
    padding: .75rem 1rem !important;
    margin-bottom: 0 !important;
}
.al-vendor-section .category-section,
.al-vendor-section .al-category-total,
.al-vendor-section .al-vendor-actions {
    padding-left: 1rem;
    padding-right: 1rem;
}
.al-vendor-section .al-vendor-actions { padding-bottom: .75rem; }

/* Status badge pill */
.al-badge-status {
    border-radius: 20px !important;
    padding: .3rem .75rem !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
}

/* Product image larger + shadow */
.al-product-img {
    width: 52px !important; height: 52px !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Product item card */
.product-item {
    border: 1px solid #eef2ff !important;
    border-radius: 10px !important;
    padding: .625rem !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .2s;
}
.product-item:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }

/* Accept / Reject action buttons */
.al-vendor-actions .btn {
    border-radius: 20px !important;
    padding: .35rem 1.1rem !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
}

/* Summary card */
.order-main-table .al-summary-card {
    border-radius: 12px !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.07) !important;
    border: 1px solid #e8edf5 !important;
}
.order-main-table .al-payable-row {
    background: linear-gradient(135deg, rgba(121,97,245,.07) 0%, rgba(4,80,196,.07) 100%) !important;
    border: 1px solid rgba(121,97,245,.2) !important;
    border-radius: 10px !important;
}
/* ── end order panel enhancements ─────────────────────────────── */

.order-content-table {
    margin-bottom: 0;
}

.order-content-table thead th {
    border: none;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
     text-transform: capitalize;
    letter-spacing: 0.8px;
    color: #ffffff;
    background: var(--panel-color);
}

.order-content-table tbody td {
    border: none;
    border-right: 1px solid #f1f5f9;
    padding: 0.75rem;
    font-size: 0.8125rem;
    color: #1e293b;
    vertical-align: top;
    background: #ffffff;
}

.order-content-table tbody td:last-child {
    border-right: none;
    background: #fafbfc;
}

.vendor-section {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.vendor-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.category-section {
    padding: 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    margin-bottom: 0.75rem;
    box-shadow: none;
}

.category-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.category-header .badge-primary {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    font-weight: 600;
    background: var(--panel-color);
    color: #ffffff;
    border: none;
    border-radius: 3px;
    margin-right: 0.5rem;
}

.category-header .badge-warning {
    font-size: 0.6875rem;
    padding: 0.375rem 0.75rem;
    background: #fbbf24;
    color: #78350f;
    border: none;
    border-radius: 3px;
    font-weight: 500;
}

.product-item {
    padding: 0.5rem 0.625rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    margin-bottom: 0.5rem;
    transition: all 0.15s ease;
    background: #f8fafc;
}

.product-item:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.product-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.product-price {
    font-size: 0.8125rem;
    color: #1e293b;
    font-weight: 600;
    white-space: nowrap;
}

.product-image {
    position: relative;
    flex-shrink: 0;
}

.product-image img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.item_no {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--panel-color);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1.5px solid var(--panel-color);
}

.products-list {
    max-height: calc(3 * 60px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

.products-list::-webkit-scrollbar {
    width: 4px;
}

.products-list::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 0;
}

.products-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 0;
}

.products-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.category-total {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.625rem 0.5rem;
    border-radius: 0;
    margin-top: 0.75rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-bottom: -0.75rem;
    font-size: 0.8125rem;
}

.order-summary {
    font-size: 0.875rem;
}

.order-summary li {
    font-size: 0.75rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.order-summary li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.order-summary li strong {
    color: #1e293b;
    font-weight: 600;
}

.order-summary .payable-row {
    border-top: 2px solid var(--panel-color);
    background: rgba(96, 122, 233, 0.04);
    border-radius: 0;
    padding: 0.75rem 0.5rem;
    margin-top: 0.75rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-bottom: none;
}

#update-single-status {
    margin-top: 1rem;
}

#update-single-status .btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#update-single-status .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#update-single-status .btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#update-single-status .btn-warning {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #16a34a;
    color: #ffffff;
}

#update-single-status .btn-warning:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 8px rgba(22, 163, 74, 0.35);
}

#update-single-status .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    color: #ffffff;
}

#update-single-status .btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

#update-single-status .btn-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    color: #ffffff;
}

#update-single-status .btn-info:hover {
    background: linear-gradient(135deg, #2563eb 0%, var(--panel-color) 100%);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

#update-single-status .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #ef4444;
    color: #ffffff;
}

#update-single-status .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

/* Filter Tabs (All, Grocery, etc.) - Modern Design */
.tabs_radio_wrap {
    padding: 6px 0 0;
    margin-bottom: 12px;
}

.tabs_radio_controls {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.tabs_radio {
    display: none;
}

.tabs_label {
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tabs_label:hover {
    background-color: #f8f9fa;
    border-color: #cbd5e1;
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tabs_radio:checked+.tabs_label {
    background-color: #b4b8bf;
    color: white;
    border-color: #b4b8bf;
}

.tabs_label h5 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: inherit;
    transition: all 0.25s ease;
    line-height: 1.2;
}

.tabs_label span {
    font-weight: 600;
    font-size: 0.6875rem;
    color: inherit;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.0625rem 0.375rem;
    border-radius: 8px;
    transition: all 0.25s ease;
    line-height: 1.2;
}

.tabs_radio:checked+.tabs_label h5,
.tabs_radio:checked+.tabs_label span {
    color: #ffffff;
    font-weight: 600;
}

.tabs_radio:checked+.tabs_label span {
    background-color: rgba(var(--panel-color-rgb), 0.2);
}

.tabs_radio:not(:checked)+.tabs_label {
    color: #64748b;
}

.tabs_radio:not(:checked)+.tabs_label h5,
.tabs_radio:not(:checked)+.tabs_label span {
    color: #64748b;
}

.tabs_radio:not(:checked)+.tabs_label span {
    background-color: rgba(100, 116, 139, 0.1);
}

.order-page.request-pae .card-body,
#awaiting-review {
    padding: 0;
}

/* ══════════════════════════════════════════════
   Return Requests Page — matches orders page UI
   ══════════════════════════════════════════════ */

/* Back button — styled like a chip */
.rr-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e6ed;
    color: #475569;
    font-size: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    text-decoration: none !important;
    transition: all .2s;
    flex-shrink: 0;
}
.rr-back-btn:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; }

/* Table card wrapper */
.rr-table-card {
    background: #fff;
    border: 1px solid #e8edf2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    margin-top: 6px;
}

/* Table */
.rr-table { border-collapse: separate; border-spacing: 0; width: 100%; }

/* Header */
.rr-table thead tr th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
    letter-spacing: .5px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e8edf2 !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    white-space: nowrap;
}

/* Rows */
.rr-table tbody tr td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    font-size: .83rem;
    color: #374151;
}
.rr-table tbody tr:last-child td { border-bottom: none !important; }
.rr-row { cursor: pointer; transition: background .15s; }
.rr-row:hover td { background: #f8fafc !important; }

/* Cells */
.rr-order-num {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .8rem;
    font-weight: 700;
    color: var(--panel-color, var(--panel-color));
}
.rr-vendor-cell, .rr-product-cell {
    display: flex; align-items: center; gap: 9px;
}
.rr-vendor-img {
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e8edf2;
    flex-shrink: 0;
}
.rr-vendor-name {
    font-size: .83rem; font-weight: 600;
    color: #1e293b; text-decoration: none !important;
}
.rr-vendor-name:hover { color: var(--panel-color, var(--panel-color)); }
.rr-customer { font-size: .83rem; color: #374151; }
.rr-product-img {
    width: 36px; height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e8edf2;
    flex-shrink: 0;
}
.rr-product-name { font-size: .83rem; font-weight: 600; color: #1e293b; }
.rr-price { font-size: .875rem; font-weight: 700; color: #1e293b; }
.rr-date { font-size: .78rem; color: #64748b; white-space: nowrap; }

/* Responsive */
@media (max-width: 768px) {
    .rr-table-card { border-radius: 10px; }
    .rr-table thead tr th,
    .rr-table tbody tr td { padding: 10px 12px !important; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-material {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-material::-webkit-scrollbar {
        display: none;
    }

    .nav-material .nav-link,
    .nav-material .nav-link-action {
        padding: 0.65rem 0.9rem;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    .tabs_radio_controls {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs_radio_controls::-webkit-scrollbar {
        display: none;
    }

    .tabs_label {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
        flex-shrink: 0;
    }

    .page-title-box.page-title-box {
        gap: 0.75rem;
    }

    /* Return Requests Page Styles */
    .alReturnRequestsPage .page-title-box {
        background: transparent;
        border: none;
        padding: 0;
        margin-bottom: 1.5rem;
        box-shadow: none;
    }

    .alReturnRequestsPage .page-title-box .page-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
        letter-spacing: 0.5px;
         text-transform: capitalize;
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    .alReturnRequestsPage .page-title-box .page-title .back-button {
        background: transparent;
        border: none;
        color: var(--panel-color);
        font-size: 1.25rem;
        margin-right: 0.5rem;
        padding: 0;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .alReturnRequestsPage .page-title-box .page-title .back-button:hover {
        color: var(--panel-color);
        opacity: 0.8;
        transform: translateX(-2px);
    }

    .alReturnRequestsPage .page-title-box .float-right {
        float: right;
    }

    .alReturnRequestsPage .page-title-box .float-right .row {
        align-items: center;
        gap: 0.5rem;
    }

    /* Datepicker Input - Light Grey Rounded */
    .alReturnRequestsPage .page-title-box #range-datepicker,
    .alReturnRequestsPage .page-title-box .form-control {
        background: #f8f9fa;
        border: 1px solid #f8f9fa;
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        color: #1e293b;
        min-width: 200px;
        transition: all 0.2s ease;
    }

    .alReturnRequestsPage .page-title-box #range-datepicker:focus,
    .alReturnRequestsPage .page-title-box .form-control:focus {
        outline: none;
        border-color: var(--panel-color);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(96, 122, 233, 0.1);
    }

    /* Select Dropdown */
    .alReturnRequestsPage .page-title-box select.form-control {
        background: #f8f9fa;
        border: 1px solid #f8f9fa !important;
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        color: #1e293b;
        transition: all 0.2s ease;
    }

    .alReturnRequestsPage .page-title-box select.form-control:focus {
        outline: none;
        border-color: var(--panel-color);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(96, 122, 233, 0.1);
    }

    /* Clear Filter Button */
    .alReturnRequestsPage .page-title-box #clear_filter_btn_icon {
        background: #f8f9fa;
        border: 1px solid #ff3737;
        border-radius: 8px;
        color: #ff3737;
        width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        box-shadow: none;
        min-width: 40px !important;
    }

    .alReturnRequestsPage .page-title-box #clear_filter_btn_icon:hover {
        background: #ef4444;
        border-color: #ef4444;
        color: #ffffff;
    }

    .alReturnRequestsPage .page-title-box #clear_filter_btn_icon i {
        font-size: 1.125rem;
    }

    /* Search Input */
    .alReturnRequestsPage .page-title-box #search_via_keyword {
        min-width: 200px;
    }

    /* Main Navigation Tabs */
    .alReturnRequestsPage .tab-product {
        margin-bottom: 12px;
    }

    .alReturnRequestsPage .nav-material {
        background: transparent;
        border: none;
        padding: 0;
        margin-bottom: 1rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .alReturnRequestsPage .nav-material .nav-item {
        margin: 0;
    }

    .alReturnRequestsPage .nav-material .nav-link {
        border-radius: 8px;
        padding: 0.625rem 1.25rem;
        color: #1e293b;
        font-weight: 500;
        font-size: 0.9375rem;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        background: transparent;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        white-space: nowrap;
        margin: 0;
    }

    .alReturnRequestsPage .nav-material .nav-link i {
        font-size: 0.9375rem;
        opacity: 0.7;
        transition: all 0.25s ease;
    }

    .alReturnRequestsPage .nav-material .nav-link:hover {
        color: var(--panel-color);
        background: rgba(96, 122, 233, 0.08);
    }

    .alReturnRequestsPage .nav-material .nav-link:hover i {
        opacity: 1;
        color: var(--panel-color);
    }

    .alReturnRequestsPage .nav-material .nav-link.active {
        color: var(--panel-color);
        font-weight: 600;
        background: #fff;
        box-shadow: 0 2px 8px rgba(96, 122, 233, 0.3);
    }

    .alReturnRequestsPage .nav-material .nav-link.active i {
        opacity: 1;
        color: var(--panel-color);
    }

    .alReturnRequestsPage .nav-material .material-border {
        display: none;
    }

    .tab-content>.tab-pane {
        width: 100%;
    }

    /* Table Styling - Modern Elegant Design */
    .alReturnRequestsPage .card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
        overflow: hidden;
        background: #ffffff;
    }

    .alReturnRequestsPage .card-body {
        padding: 0;
    }

    .alReturnRequestsPage .table-responsive {
        border-radius: 0;
        overflow: visible;
    }

    .alReturnRequestsPage .common-table {
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
    }

    .alReturnRequestsPage .common-table thead {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    .alReturnRequestsPage .common-table thead th {
        padding: 1.25rem 1.5rem;
        font-size: 0.75rem;
        font-weight: 700;
         text-transform: capitalize;
        letter-spacing: 0.08em;
        color: #64748b;
        border-bottom: 2px solid #e2e8f0;
        border-top: none;
        white-space: nowrap;
        position: relative;
    }

    .alReturnRequestsPage .common-table thead th:first-child {
        padding-left: 2rem;
    }

    .alReturnRequestsPage .common-table thead th:last-child {
        padding-right: 2rem;
    }

    .alReturnRequestsPage .common-table tbody tr {
        transition: all 0.2s ease;
        border-bottom: 1px solid #f1f5f9;
        background: #ffffff;
    }

    .alReturnRequestsPage .common-table tbody tr:hover {
        background-color: #f8fafc;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    }

    .alReturnRequestsPage .common-table tbody tr:last-child {
        border-bottom: none;
    }

    .alReturnRequestsPage .common-table tbody tr:last-child td {
        border-bottom: none;
    }

    .alReturnRequestsPage .common-table tbody td {
        padding: 1.25rem 1.5rem;
        font-size: 0.875rem;
        color: #1e293b;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
    }

    .alReturnRequestsPage .common-table tbody td:first-child,
    .order-main-table tbody td:first-child {
        padding-left: 1.5rem;
        font-weight: 600;
        color: var(--panel-color);
    }

    .alReturnRequestsPage .common-table tbody td:last-child,
    .order-main-table tbody td:last-child {
        padding-right: 1.5rem;
    }

    .alReturnRequestsPage .common-table tbody td a,
    .order-main-table tbody td a {
        color: var(--panel-color);
        text-decoration: none;
        transition: all 0.2s ease;
        font-weight: 500;
    }

    .alReturnRequestsPage .common-table tbody td a:hover,
    .order-main-table tbody td a:hover {
        color: var(--panel-color);
        opacity: 0.8;
        text-decoration: none;
    }

    .alReturnRequestsPage .common-table .round_img_box {
        display: inline-flex;
        align-items: center;
        margin-right: 0.75rem;
        vertical-align: middle;
    }

    .alReturnRequestsPage .common-table .round_img_box img {
        width: 44px;
        height: 44px;
        object-fit: cover;
        border: 2px solid #e5e7eb;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .alReturnRequestsPage .common-table tbody tr:hover .round_img_box img {
        border-color: var(--panel-color);
        box-shadow: 0 2px 8px rgba(96, 122, 233, 0.2);
    }

    .alReturnRequestsPage .common-table .vendor-name {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .alReturnRequestsPage .common-table .vendor-name a:not(.round_img_box) {
        margin-top: 0.25rem;
        font-weight: 500;
    }

    .alReturnRequestsPage .common-table .product-name {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .alReturnRequestsPage .common-table .product-name img {
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 10px;
        border: 2px solid #e5e7eb;
        margin-bottom: 0.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
    }

    .alReturnRequestsPage .common-table tbody tr:hover .product-name img {
        border-color: var(--panel-color);
        box-shadow: 0 2px 8px rgba(96, 122, 233, 0.2);
    }

    .alReturnRequestsPage .common-table .product-name b {
        display: block;
        margin-top: 0.25rem;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.4;
    }

    .alReturnRequestsPage .common-table tbody td b.text-black {
        color: #1e293b;
        font-weight: 700;
        font-size: 0.9375rem;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .alReturnRequestsPage .page-title-box .float-right {
            float: none;
            width: 100%;
            margin-top: 1rem;
        }

        .alReturnRequestsPage .page-title-box .float-right .row {
            flex-wrap: wrap;
        }

        .alReturnRequestsPage .page-title-box #range-datepicker,
        .alReturnRequestsPage .page-title-box #search_via_keyword {
            flex: 1;
            min-width: 150px;
        }

        .alReturnRequestsPage .page-title-box #clear_filter_btn_icon {
            width: 36px;
            height: 36px;
        }

        .alReturnRequestsPage .nav-material {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .alReturnRequestsPage .nav-material::-webkit-scrollbar {
            display: none;
        }

        .alReturnRequestsPage .nav-material .nav-link {
            padding: 0.65rem 0.9rem;
            font-size: 0.875rem;
            flex-shrink: 0;
        }

        .alReturnRequestsPage .common-table thead th,
        .alReturnRequestsPage .common-table tbody td {
            padding: 0.75rem 0.5rem;
            font-size: 0.8125rem;
        }
    }

    .page-title-box.page-title-box a {
        font-size: 0.875rem;
    }
}

/* ===================== Global DataTables Styles ======================== */
/* DataTables Search Box Styling - Global */
.dataTables_wrapper .dataTables_filter {
    float: left !important;
    text-align: left !important;
    margin-bottom: 0;
}

.dataTables_wrapper .dataTables_filter input {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: #374151;
    min-width: 180px;
    height: 32px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin-left: 0;
    margin-right: 0.5rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--panel-color);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(96, 122, 233, 0.1);
}

.dataTables_wrapper .dataTables_filter label {
    font-weight: 500;
    color: #64748b;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 10px;
    float: left !important;
    text-align: left !important;
}

.dataTables_wrapper .dataTables_filter label::before {
    content: "Search:";
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    margin-right: 0;
    margin-left: 0;
    white-space: nowrap;
    display: none;
}

/* DataTables Pagination Styling - Global */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 0;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none !important;
}

/* Override pagination ul styles */
.dataTables_wrapper .dataTables_paginate ul.pagination {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    gap: 0.5rem !important;
    list-style: none !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Hide pagination when there's no data (0 entries) */
.dataTables_wrapper .dataTables_paginate.no-data {
    display: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate ul.pagination li .paginate_button {
    padding: 0.5rem 0.75rem !important;
    margin: 0 !important;
    border-radius: 4px !important;
    border: 1px solid #abafb7 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    min-width: 40px;
    height: 30px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    max-width: 30px;
    overflow: hidden;
}

.dataTables_wrapper .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--panel-color);
    border-color: var(--panel-color);
    border-radius: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate ul.pagination li .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate ul.pagination li .paginate_button.next {
    min-width: 30px !important;
    padding: 0.5rem !important;
    color: #1f2937 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: #ffffff !important;
    border-color: #d1d5db !important;
    color: #1e293b !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate ul.pagination li.active .paginate_button,
.dataTables_wrapper .dataTables_paginate ul.pagination li .paginate_button.current {
    background: var(--panel-color) !important;
    border-color: var(--panel-color) !important;
    color: #ffffff !important;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: #ffffff;
    border-color: #e5e7eb;
    color: #9ca3af !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #9ca3af !important;
}

/* DataTables Info Styling - Global */
.dataTables_wrapper .dataTables_info {
    padding: 0;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0;
    display: flex;
    align-items: center;
    height: 32px;
}

/* No Data Available Message - Global */
.dataTables_wrapper .dataTables_empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--panel-color);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* DataTables Length Select - Global */
.dataTables_wrapper .dataTables_length {
    margin-bottom: 1rem;
    float: right;
    text-align: right;
}

.dataTables_wrapper .dataTables_length select {
    background: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 6px;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: #1e293b;
    margin: 0 0.5rem;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--panel-color);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(96, 122, 233, 0.1);
}

.dataTables_wrapper .dataTables_length label {
    font-weight: 500;
    color: #64748b;
    font-size: 0.875rem;
}

/* DataTables Wrapper Styling - Global */
.dataTables_wrapper {
    padding: 0;
}

.dataTables_wrapper .row {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dataTables_wrapper .row:first-child {
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    border-bottom: 0;
}

/* .dataTables_wrapper .row:last-child {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    gap: 1rem;
    align-items: center;
} */

/* .dataTables_wrapper .row:last-child>div {
    display: flex;
    align-items: center;
    gap: 1rem;
} */

/* ===================== Cancel Order Requests Page Styles ======================== */
/* Note: DataTables styles are now global above. Keep only page-specific overrides here if needed */

/* Status Badge Styling */
.order-page .badge {
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.8125rem;
     text-transform: capitalize;
    letter-spacing: 0.05em;
}

.order-page .badge-success {
    background-color: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.order-page .badge-warning,
.order-page .badge-pending {
    background-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.order-page .badge-danger {
    background-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* Action Button Styling - Approve/Reject */
.order-page .btn-sm {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 40px;
    height: 36px;
}

.order-page .btn-success,
.order-page .btn-approve {
    background-color: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.order-page .btn-success:hover,
.order-page .btn-approve:hover {
    background-color: #059669;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.order-page .btn-danger,
.order-page .btn-reject {
    background-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.order-page .btn-danger:hover,
.order-page .btn-reject:hover {
    background-color: #dc2626;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
}

.order-page .btn-info {
    background-color: var(--panel-color);
    border-color: var(--panel-color);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(96, 122, 233, 0.2);
}

.order-page .btn-info:hover {
    background-color: var(--panel-color);
    border-color: var(--panel-color);
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(96, 122, 233, 0.3);
    transform: translateY(-1px);
    opacity: 0.9;
}

/* Action Button Group */
.order-page .action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

/* Table styling for DataTables - using order-main-table styles */
/* Ensure DataTables tables use order-main-table styling */
.order-page .order-main-table.dataTable {
    background: #ffffff;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

.dataTables_scrollBody thead * {
    padding: 0 !important;
}

.dataTables_scrollHead {
    height: auto !important;
}

.dataTables_empty {
    text-align: center !important;
    color: inherit !important;
    font-weight: 500 !important;
}

.order-page .order-main-table.dataTable thead th {
    background: #f9fafb;
    color: #374151;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.875rem 1rem;
    border: none;
    border-bottom: none;
    vertical-align: middle;
    white-space: nowrap;
    text-align: left;
}

.order-page .order-main-table.dataTable thead th:first-child {
    padding-left: 1.5rem;
}

.order-page .order-main-table.dataTable thead th:last-child {
    padding-right: 1.5rem;
}

.order-page .order-main-table.dataTable tbody tr {
    background: #ffffff;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s ease;
}

.order-page .order-main-table.dataTable tbody tr:hover {
    background: #f9fafb;
}

.order-page .order-main-table.dataTable tbody tr:last-child {
    border-bottom: none;
}

.order-page .order-main-table.dataTable tbody td {
    border: none;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    padding: 1rem;
    font-size: 0.875rem;
    color: #1f2937;
    text-align: left;
}

.order-page .order-main-table.dataTable tbody td:first-child {
    padding-left: 1.5rem;
    font-weight: 600;
    color: var(--panel-color);
}

.order-page .order-main-table.dataTable tbody td:last-child {
    padding-right: 1.5rem;
}

.order-page .order-main-table.dataTable tbody td a {
    color: var(--panel-color);
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
}

.order-page .order-main-table.dataTable tbody td a:hover {
    color: var(--panel-color);
    opacity: 0.8;
    text-decoration: none;
}

/* Tab content animation */
.order-page .tab-content .tab-pane {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive Design for Cancel Order Requests */
@media (max-width: 768px) {
    .order-page .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: left;
        margin-bottom: 1rem;
        width: 100%;
    }

    .order-page .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: left;
        width: 100%;
        margin-bottom: 1rem;
    }

    .order-page .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        min-width: auto;
        margin-left: 0;
        margin-top: 0.5rem;
        height: 40px;
    }
}

/* Order Cancel Requests Table Styling */
/* Match styling from orderTable.blade.php */
#approved_requests_datatable td,
#pending_requests_datatable td,
#rejected_requests_datatable td {
    vertical-align: middle;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: #1e293b;
}

#approved_requests_datatable td a,
#pending_requests_datatable td a,
#rejected_requests_datatable td a {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: none;
}

#approved_requests_datatable td a:hover,
#pending_requests_datatable td a:hover,
#rejected_requests_datatable td a:hover {
    color: var(--panel-color);
}

#approved_requests_datatable .badge,
#pending_requests_datatable .badge,
#rejected_requests_datatable .badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    border: none;
}

#approved_requests_datatable th,
#pending_requests_datatable th,
#rejected_requests_datatable th {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.75rem;
}

/* Vendor Page Styling - Moved from vendor/index.blade.php */
@media(min-width: 1440px) {
  
    .dataTables_scrollBody {
        height: calc(100vh - 500px);
    }
}

.dd-list .dd3-item {
    list-style: none;
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 180px;
}

.vendor-page .btn-info {
    background: linear-gradient(135deg, var(--panel-color) 0%, #8F7AE9 100%);
    border: none;
    border-radius: 8px;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(96, 122, 233, 0.2);
    transition: all 0.2s ease;
}

.vendor-page .btn-info:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(96, 122, 233, 0.3);
    background: linear-gradient(135deg,var(--panel-color) 0%, #7f6ae8 100%);
}

/* Statistics Cards - Modern Design */
.vendor-page .widget-inline {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.vendor-page .widget-inline .card-body {
    padding: 1.5rem;
}

.vendor-page .widget-inline .text-center {
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.vendor-page .widget-inline .text-center {
    background: #f8fafc;
}

.vendor-page .widget-inline .text-center:hover {
    transform: translateY(-2px);
}

.vendor-page .widget-inline h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.vendor-page .widget-inline h3 i {
    font-size: 1.5rem;
    color: var(--panel-color);
    background: linear-gradient(135deg, rgba(96, 122, 233, 0.1) 0%, rgba(143, 122, 233, 0.1) 100%);
    padding: 0.5rem;
    border-radius: 8px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vendor-page .widget-inline p {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
    margin: 0;
}

/* Tab Navigation - Clean White Background */
.vendor-page .tab-product {
    margin-bottom: 1rem;
}

.vendor-page .nav-material:not(.clean-tabs) {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 0.5rem;
    margin-bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    border-radius: 8px 8px 0 0;
    overflow-x: auto;
    min-height: 50px;
}

.vendor-page .nav-material:not(.clean-tabs)::-webkit-scrollbar {
    height: 4px;
}

.vendor-page .nav-material:not(.clean-tabs)::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.vendor-page .nav-material:not(.clean-tabs)::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.vendor-page .nav-material:not(.clean-tabs) .nav-item {
    margin: 0;
    flex-shrink: 0;
}

.vendor-page .nav-material:not(.clean-tabs) .nav-link {
    border-radius: 6px;
    padding: 0.625rem 1rem;
    color: #64748b;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    min-width: fit-content;
}

.vendor-page .nav-material:not(.clean-tabs) .nav-link i {
    font-size: 0.875rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.vendor-page .nav-material:not(.clean-tabs) .nav-link:hover {
    color: var(--panel-color);
    background: #f8f9fa;
}

.vendor-page .nav-material:not(.clean-tabs) .nav-link.active {
    color: #1e293b;
    font-weight: 600;
    background: #fff;
    box-shadow: 0 2px 8px rgba(96, 122, 233, 0.3);
}

.vendor-page .nav-material:not(.clean-tabs) .nav-link.active i {
    opacity: 1;
    color: #0ea5e9;
}

.vendor-page .nav-material:not(.clean-tabs) .nav-link .total-items {
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.25rem;
    flex-shrink: 0;
}

.vendor-page .nav-material:not(.clean-tabs) .material-border {
    display: none;
}

.vendor-page .nav-material:not(.clean-tabs) .nav-item.ml-auto {
    margin-left: auto;
    flex-shrink: 0;
}

.vendor-page .nav-material:not(.clean-tabs) .action_vendor_button {
    background: var(--panel-color);
    border: none;
    border-radius: 6px;
    padding: 0.625rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.vendor-page .nav-material:not(.clean-tabs) .action_vendor_button:hover {
    background:var(--panel-color);
}

/* DataTables Toolbar Buttons */
.vendor-page .dataTables_wrapper .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-radius: 8px;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vendor-page .dataTables_wrapper .dt-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.vendor-page .dataTables_wrapper .dt-buttons .btn {
    background: var(--panel-color);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #ffffff;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    height: auto;
    line-height: 1.5;
    height: 40px;
}

.vendor-page .dataTables_wrapper .dt-buttons .btn:hover {
    background:var(--panel-color);
    color: #ffffff;
}

.vendor-page .dataTables_wrapper .dataTables_filter {
    flex: 1;
    min-width: 200px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.vendor-page .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
    justify-content: flex-end;
}



.vendor-page .dataTables_wrapper .dataTables_filter input:placeholder {
    color: black !important;
    opacity: 1 !important;
}

/* Card Styling */
.vendor-page .card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    background: #ffffff;
    margin-bottom: 0;
}

.vendor-page .card-body {
    padding: 1.25rem;
}

/* Tab Content Styling */
.vendor-page .tab-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Vendor Page (Orders-like layout): remove outer container border/shadow */
.vendor-page .tab-content.order_data_box {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 !important;
    background: transparent;
}

/* Vendor tables: keep order-main-table inner styling but remove outer border */
.vendor-page .order-main-table {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: visible;
}

/* Vendor action 3-dots menu */
.vendor-page .vendor-action-dropdown {
    position: relative;
    display: inline-block;
}

.vendor-page .vendor-action-toggle {
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.vendor-page .vendor-action-toggle:hover {
    background: #f1f5f9;
    color: var(--panel-color, #6366f1);
}

.vendor-page .vendor-action-dropdown.show .vendor-action-toggle {
    background: #eef2ff;
    color: var(--panel-color);
}

.vendor-page .vendor-action-menu {
    position: fixed;
    min-width: 160px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    z-index: 2000;
    display: none;
    padding: 0.35rem 0;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* open-up handled via inline style in JS (position: fixed) */

.vendor-page .vendor-action-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.vendor-page .vendor-action-item {
    display: grid;
    grid-template-columns: 1rem 1fr;
    align-items: center;
    column-gap: 0.55rem;
    padding: 0.5rem 0.8rem;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 0.825rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.vendor-page .vendor-action-item:first-child {
    border-radius: 6px 6px 0 0;
}

.vendor-page .vendor-action-item:last-child {
    border-radius: 0 0 6px 6px;
}

.vendor-page .vendor-action-item:hover {
    background: #f1f5f9;
    color: #0f172a !important;
}

.vendor-page .vendor-action-item i {
    font-size: 0.9rem;
    width: 1rem;
    text-align: center;
    color: #64748b;
}

.vendor-page .vendor-action-item.delete-vendor {
    color: #dc2626 !important;
    margin-top: 0.25rem;
    padding-top: 0.55rem;
    border-top: 1px solid #f1f5f9;
}

.vendor-page .vendor-action-item.delete-vendor i {
    color: #ef4444;
}

.vendor-page .vendor-action-item.delete-vendor:hover {
    background: #fef2f2;
    color: #dc2626 !important;
}

/* Vendor delete confirmation modal (SweetAlert2) */
.swal2-popup.vendor-delete-modal {
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
    padding: 1.5rem 1.5rem 1.25rem;
    max-width: 360px;
}

.vendor-delete-modal .swal2-icon {
    margin: 0.2rem auto 0.6rem;
    transform: scale(0.85);
}

.vendor-delete-modal__text {
    font-size: 0.82rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 0 auto 0.2rem !important;
    padding: 0 0.25rem !important;
}

.vendor-delete-modal__title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 0.2rem !important;
}

.vendor-delete-modal__actions {
    gap: 0.5rem !important;
    margin-top: 0.8rem !important;
}

.vendor-delete-modal__confirm,
.vendor-delete-modal__cancel {
    border: 0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    line-height: 1.2;
}

.vendor-delete-modal__confirm {
    background: #ef4444;
    color: #ffffff;
}

.vendor-delete-modal__confirm:hover {
    background: #dc2626;
}

.vendor-delete-modal__cancel {
    background: #f1f5f9;
    color: #334155;
}

.vendor-delete-modal__cancel:hover {
    background: #e2e8f0;
}

/* table-responsive scroll — dropdown uses position:fixed so no overflow hack needed */

.vendor-page .tab-content .card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    background: transparent;
}

.vendor-page .tab-content .card-body {
    padding: 0;
}

.vendor-page .tab-content .card-body .table-responsive {
    padding: 0;
}

/* Table Styling - Clean Modern Design */
.vendor-page .table:not(.order-main-table) {
    font-size: 0.875rem;
    margin-bottom: 0;
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.vendor-page .table:not(.order-main-table) thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
}

.vendor-page .table:not(.order-main-table) thead th {
    background: #ffffff;
    border: none;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    font-size: 0.8125rem;
     text-transform: capitalize;
    letter-spacing: 0.3px;
    color: #64748b;
    padding: 1rem 1.25rem;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
    position: relative;
}

.vendor-page .table:not(.order-main-table) thead th:first-child {
    padding-left: 1.5rem;
}

.vendor-page .table:not(.order-main-table) thead th:last-child {
    padding-right: 1.5rem;
}

.vendor-page .table:not(.order-main-table) thead th.text-center {
    text-align: center;
}

.vendor-page .table:not(.order-main-table) tbody td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    color: #1e293b;
    font-size: 0.875rem;
    word-wrap: break-word;
    transition: background-color 0.15s ease;
}

/* Keep action menus visible above table rows */
.vendor-page .order-main-table tbody td {
    overflow: visible;
}

.vendor-page .table:not(.order-main-table) tbody td:first-child {
    padding-left: 1.5rem;
}

.vendor-page .table:not(.order-main-table) tbody td:last-child {
    padding-right: 1.5rem;
}

.vendor-page .table:not(.order-main-table) tbody td.text-center {
    text-align: center;
}

.vendor-page .table:not(.order-main-table) tbody td.address_txt {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-page .table-striped:not(.order-main-table) tbody tr:nth-of-type(even) td {
    background-color: #fafbfc;
}

.vendor-page .table:not(.order-main-table) tbody tr {
    transition: all 0.15s ease;
}

.vendor-page .table:not(.order-main-table) tbody tr:hover td {
    background-color: #f8fafc !important;
}

.vendor-page .table:not(.order-main-table) tbody tr:last-child td {
    border-bottom: none;
}

/* Table Container */
.vendor-page .table-responsive {
    border: none;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: visible;
    box-shadow: none;
    width: 100%;
    display: block;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* IE and Edge */
    scrollbar-width: thin;
    /* Firefox */
}

/* Show scrollbar only on hover or when scrolling */
.vendor-page .table-responsive::-webkit-scrollbar {
    height: 4px;
}

.vendor-page .table-responsive::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 2px;
}

.vendor-page .table-responsive:hover::-webkit-scrollbar-track {
    background: #f8fafc;
}

.vendor-page .table-responsive::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
}

.vendor-page .table-responsive:hover::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

.vendor-page .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.vendor-page .table-centered {
    margin-bottom: 0;
}

/* Let table expand to natural width so DataTables scrollX works */
.vendor-page .table-responsive .table:not(.order-main-table) {
    min-width: 100%;
    table-layout: auto;
    margin-bottom: 0;
}

/* Better spacing for table content */
.vendor-page .table:not(.order-main-table) tbody td {
    line-height: 1.6;
}

/* Improve table visual hierarchy */
.vendor-page .table:not(.order-main-table) thead th {
    font-weight: 600;
    color: #475569;
}

.vendor-page .table:not(.order-main-table) tbody td {
    color: #334155;
}

/* Icon column styling */
.vendor-page .table:not(.order-main-table) tbody td .round_img_box {
    display: inline-block;
    width: 40px;
    height: 40px;
}

.vendor-page .table:not(.order-main-table) tbody td .round_img_box img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* Action column styling */
.vendor-page .table tbody td .form-ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.vendor-page .table tbody td .form-ul .inner-div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Action Icon General Styling */
.vendor-page .table tbody td .action-icon {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.5rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.vendor-page .table tbody td .action-icon i {
    font-size: 1.125rem;
    transition: all 0.2s ease;
}

.vendor-page .table tbody td .action-icon:hover {
    background: #f8fafc;
    transform: scale(1.1);
}

.vendor-page .table tbody td .action-icon:hover i {
    color: var(--panel-color);
}

/* View Icon Styling */
.vendor-page .table tbody td .action-icon:not(.delete-vendor):hover {
    background: #f0f4ff;
}

.vendor-page .table tbody td .action-icon:not(.delete-vendor):hover i {
    color: var(--panel-color);
}

/* Status badge improvements */
.vendor-page .table tbody td .badge {
	font-weight: 500;
	padding: 3px 8px;
	font-size: 0.75rem;
}

/* DataTables Wrapper Improvements */
.vendor-page .dataTables_wrapper {
	width: 100%;
	position: relative;
	padding-bottom: 100px;
}

.vendor-page .dataTables_wrapper .dataTables_scroll {
    width: 100%;
}

.vendor-page .dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Table fills container but can grow wider (min-width from inline style triggers scroll) */
.vendor-page .dataTables_wrapper table.dataTable {
    min-width: 100%;
    margin: 0 !important;
}

/* Fix button alignment in toolbar */
.vendor-page .dataTables_wrapper>.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vendor-page .dataTables_wrapper>.toolbar>.dt-buttons {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    order: 2; /* buttons on right */
}

.vendor-page .dataTables_wrapper>.toolbar>.dataTables_filter {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    order: 1; /* search on left */
    flex: 1;
    justify-content: flex-start;
}

/* Export PDF Button Styling */
.vendor-page .vendor_export_button,
.vendor-page .dt-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1rem !important;
    height: auto !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
}

.vendor-page .vendor_export_button .btn-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Status badges in table */
.vendor-page .table .badge-success {
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.vendor-page .table .badge-danger,
.vendor-page .table .badge-warning {
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.vendor-page .table .badge-danger {
    background-color: #fee2e2;
}

.vendor-page .table .badge-warning {
    background-color: #fff4e5;
    color: #b45309;
    border-color: #fed7aa;
}

.vendor-page .table .badge-info {
    background-color: #e0e7ff;
    color: var(--panel-color);
    border: 1px solid #c7d2fe;
}

/* Vendor status chips generated via bg-soft-* / text-* classes */
.vendor-page .table .badge.bg-soft-success.text-success {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac;
}

.vendor-page .table .badge.bg-soft-danger.text-danger {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca;
}

.vendor-page .table .badge.bg-soft-info.text-info {
    background-color: #e0e7ff !important;
    color: var(--panel-color) !important;
    border: 1px solid #c7d2fe;
}

/* Grocery / offers badge */
.vendor-page .table .badge.bg-soft-warning.text-warning {
    background-color: #fff4cc !important;
    color: #a16207 !important;
    border: 1px solid #fde68a;
}

/* Table Cell Content Styling */
.vendor-page .table tbody td a {
    color: #535353;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.vendor-page .table tbody td a:hover {
    color:var(--panel-color);
    text-decoration: none;
}

/* Badge Styling in Table */
.vendor-page .table .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

/* Icon Styling in Table */
.vendor-page .table tbody td img {
    border-radius: 4px;
    object-fit: cover;
}

/* Action Icons */
.vendor-page .table tbody td .btn,
.vendor-page .table tbody td a.btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 4px;
    margin: 0 0.25rem;
}

/* Delete Icon - Modern Design */
.vendor-page .table tbody td .delete-vendor,
.vendor-page .table tbody td button.delete-vendor,
.vendor-page .table tbody td .action-icon.delete-vendor,
.vendor-page .table tbody td button.action-icon.delete-vendor {
    background: transparent !important;
    border: none !important;
    color: #ef4444 !important;
    padding: 0.5rem !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.vendor-page .table tbody td .delete-vendor i,
.vendor-page .table tbody td button.delete-vendor i,
.vendor-page .table tbody td .action-icon.delete-vendor i,
.vendor-page .table tbody td button.action-icon.delete-vendor i {
    font-size: 1.125rem !important;
    color: #ef4444 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.vendor-page .table tbody td .delete-vendor:hover,
.vendor-page .table tbody td button.delete-vendor:hover,
.vendor-page .table tbody td .action-icon.delete-vendor:hover,
.vendor-page .table tbody td button.action-icon.delete-vendor:hover {
    background: #fef2f2 !important;
    transform: scale(1.1) !important;
    color: #ef4444 !important;
}

.vendor-page .table tbody td .delete-vendor:hover i,
.vendor-page .table tbody td button.delete-vendor:hover i,
.vendor-page .table tbody td .action-icon.delete-vendor:hover i,
.vendor-page .table tbody td button.action-icon.delete-vendor:hover i {
    color: #dc2626 !important;
}

.vendor-page .table tbody td .delete-vendor:active,
.vendor-page .table tbody td button.delete-vendor:active,
.vendor-page .table tbody td .action-icon.delete-vendor:active,
.vendor-page .table tbody td button.action-icon.delete-vendor:active {
    transform: scale(0.95) !important;
    background: #fee2e2 !important;
}

.vendor-page .table tbody td .delete-vendor:focus,
.vendor-page .table tbody td button.delete-vendor:focus,
.vendor-page .table tbody td .action-icon.delete-vendor:focus,
.vendor-page .table tbody td button.action-icon.delete-vendor:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Checkbox Styling */
.vendor-page .table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Vendor Cards Grid Layout */
.vendor-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    padding: 1rem 0;
}

.vendor-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.vendor-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: #cbd5e1;
}

.vendor-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.vendor-card-checkbox {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.vendor-card-logo,
.vendor-card .round_img_box {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-block;
}

.vendor-card .round_img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
}

.vendor-card-info {
    flex: 1;
    margin-left: 1rem;
}

.vendor-card-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.vendor-card-name a {
    color: var(--panel-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.vendor-card-name a:hover {
    color:var(--panel-color);
    text-decoration: underline;
}

.vendor-card-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.vendor-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vendor-card-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #64748b;
}

.vendor-card-detail-label {
    font-weight: 500;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.vendor-card-detail-label i {
    font-size: 0.875rem;
    color: #94a3b8;
}

.vendor-card-detail-value {
    font-weight: 600;
    color: #1e293b;
    text-align: right;
}

.vendor-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}

.vendor-card-stat {
    text-align: center;
}

.vendor-card-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--panel-color);
    display: block;
    margin-bottom: 0.25rem;
}

.vendor-card-stat-label {
    font-size: 0.75rem;
    color: #64748b;
     text-transform: capitalize;
    letter-spacing: 0.5px;
}

.vendor-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.vendor-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.vendor-card-actions .btn,
.vendor-card-actions a {
    padding: 0.5rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.vendor-card-actions .action-icon {
    color: #64748b;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.vendor-card-actions .action-icon:hover {
    color: var(--panel-color);
    transform: scale(1.1);
}

.vendor-card-actions .form-ul {
    display: flex;
    gap: 0.5rem;
    margin: 0;
}

.vendor-card-actions .inner-div {
    display: inline-block;
}

.vendor-card-actions .delete-vendor {
    color: #ef4444;
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.vendor-card-actions .delete-vendor i {
    font-size: 1.125rem;
    color: #ef4444;
    transition: all 0.2s ease;
}

.vendor-card-actions .delete-vendor:hover {
    background: #fef2f2;
    transform: scale(1.1);
}

.vendor-card-actions .delete-vendor:hover i {
    color: #dc2626;
    transform: scale(1.1);
}

.vendor-card-actions .delete-vendor:active {
    transform: scale(0.95);
    background: #fee2e2;
}

.vendor-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Empty State */
.vendor-cards-grid:empty::before {
    content: "No vendors found";
    display: block;
    text-align: center;
    padding: 3rem;
    color: #94a3b8;
    font-size: 1rem;
}

/* Responsive Grid */
@media (max-width: 1200px) {
    .vendor-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .vendor-cards-grid {
        grid-template-columns: 1fr;
    }

    .vendor-card-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .vendor-page .widget-inline .text-center {
        margin-bottom: 1rem;
    }

    .vendor-page .nav-material .nav-link {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }
}

.pac-container,
.pac-container .pac-item {
    z-index: 99999 !important
}

.fc-v-event {
    border-color: var(--panel-color);
    background-color: var(--panel-color)
}

.dd-list .dd3-content {
    position: relative
}

span.inner-div {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%)
}

.button {
    position: relative;
    padding: 8px 16px;
    background: #009579;
    border: none;
    outline: 0;
    border-radius: 50px;
    cursor: pointer
}

.button:active {
    background: #007a63
}

.button__text {
    font: bold 20px Quicksand, san-serif;
    color: #fff;
    transition: all .2s
}

.button--loading .button__text {
    visibility: hidden;
    opacity: 0
}

.button--loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 4px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn)
    }

    to {
        transform: rotate(1turn)
    }
}

/* Modal Redesign - CSS Only (Matching show-md-3.blade.php) */
.modal-content {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden;
}

.modal-header {
    background: #1e293b !important;
    color: #ffffff !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: 12px 12px 0 0 !important;
}

/* ═══════════════════════════════════════════════
   "New Order Received" Modal — Enhanced UI
   ═══════════════════════════════════════════════ */
#received_new_orders .modal-content {
    border-radius: 18px !important;
    box-shadow: 0 32px 80px rgba(0,0,0,.26) !important;
    overflow: hidden !important;
    border: none !important;
}
/* Dark navy header — no gradient, no grey */
body #received_new_orders .modal-header,
body #received_new_orders .nod-modal-header {
    background: #0f172a !important;
    padding: 18px 22px !important;
    border-bottom: none !important;
    border-top: 3px solid #22c55e !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 0 !important;
}
/* Header left group: icon + title/subtitle */
.nod-header-left {
    display: flex;
    align-items: center;
    gap: 13px;
}
/* Bell icon rounded box */
.nod-bell-ring {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(34,197,94,.18);
    border: 1px solid rgba(34,197,94,.25);
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Title */
body #received_new_orders .modal-header .modal-title,
body #received_new_orders .nod-modal-header .modal-title {
    font-size: .975rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
/* "● Live notification" subtitle */
.nod-live-text {
    font-size: .72rem;
    color: #4ade80;
    margin: 2px 0 0;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
.nod-live-text::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: nodPulse 1.4s ease-in-out infinite;
}
@keyframes nodPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
    50%       { box-shadow: 0 0 0 5px rgba(34,197,94,.0); }
}
/* × close button */
body .nod-close-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.7) !important;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, color .2s;
    padding: 0;
}
body .nod-close-btn:hover {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}
/* Body */
#received_new_orders .modal-body {
    background: #f1f5f9 !important;
    padding: 10px !important;
}

.modal-header.border-bottom {
    border-bottom: none !important;
}

.modal-header .modal-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.modal-header .close {
    color: #ffffff !important;
    opacity: 0.9 !important;
    font-size: 1.75rem !important;
    font-weight: 300 !important;
    text-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.modal-header .close:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.modal-body {
    padding: 1.5rem !important;
    background: #ffffff !important;
}

.modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 0 12px 12px !important;
}

/* Modal Form Fields */
.modal-body .form-group {
    margin-bottom: 1.25rem;
}

.modal-body label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #1e293b;
    margin-bottom: 0.5rem;
    display: block;
}

.modal-body .form-control {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
}

.modal-body .form-control:focus {
    border-color: var(--panel-color) !important;
    box-shadow: 0 0 0 3px rgba(96, 122, 233, 0.1) !important;
    outline: none !important;
}

.modal-body .form-control::placeholder {
    color: #94a3b8 !important;
}

/* Modal Buttons */
.modal-footer .btn,
.modal-body .btn {
    padding: 0.625rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    border: none !important;
}

.modal-footer .btn-info,
.modal-body .btn-info {
    background: linear-gradient(135deg, var(--panel-color) 0%, #8F7AE9 100%) !important;
    color: #ffffff !important;
}

.modal-footer .btn-secondary {
    background: #6b7280 !important;
    color: #ffffff !important;
    border: none !important;
    margin-right: 0.5rem;
}

/* Enhanced Modal Form Fields Design & Spacing */
.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 1.5rem 1.75rem !important;
}

.modal-body .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.modal-body .row>[class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Optimize Field Column Sizes for Better Space Usage */
.modal-body .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.modal-body .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.modal-body .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.modal-body .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.modal-body .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.modal-body .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.modal-body .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.modal-body .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Optimize main content and sidebar layout */
.modal-body #add-form>.row>.col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding-right: 1.5rem;
}

.modal-body #add-form>.row>.col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-left: 1.5rem;
    border-left: 1px solid #e5e7eb;
}

/* Optimize logo/banner layout */
.modal-body #add-form .col-md-9>.row .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.modal-body #add-form .col-md-9>.row .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

/* Better spacing for phone, website, pincode row */
.modal-body .row>.col-md-4.form-group {
    margin-bottom: 1.25rem;
}

/* Optimize latitude/longitude - make them equal width */
.modal-body #add .col-md-4[id*="latitude"],
.modal-body #add .col-md-4[id*="longitude"] {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Optimize city/state/country - better distribution */
.modal-body .row .col-md-4[id*="city"],
.modal-body .row .col-md-4[id*="state"],
.modal-body .row .col-md-4[id*="country"] {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

/* Better spacing for description field */
.modal-body #descInput {
    margin-bottom: 1.5rem;
}

/* Optimize vendor type field */
.modal-body .col-md-4:has(#vendor_type) {
    flex: 0 0 30%;
    max-width: 30%;
}

.modal-body .form-group {
    margin-bottom: 0.25rem;
}

.modal-body label,
.modal-body .control-label {
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    color: #666666  !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    line-height: 1.5;
}

.modal-body .form-control,
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="tel"],
.modal-body input[type="password"],
.modal-body input[type="number"],
.modal-body textarea,
.modal-body select {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 0.55rem 1rem !important;
    font-size: 0.875rem !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
    width: 100%;
    line-height: 1.5;
}

.modal-body textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.modal-body select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 12px !important;
    padding-right: 2.5rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.modal-body .form-control:focus,
.modal-body input:focus,
.modal-body textarea:focus,
.modal-body select:focus {
    border-color: var(--panel-color) !important;
    box-shadow: 0 0 0 3px rgba(96, 122, 233, 0.1) !important;
    outline: none !important;
}

.modal-body .form-control::placeholder,
.modal-body input::placeholder,
.modal-body textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

/* File Upload Fields */
.modal-body .dropify-wrapper {
    border: 2px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    padding: 1rem !important;
    transition: all 0.2s ease !important;
    min-height: 120px;
}

.modal-body .dropify-wrapper:hover {
    border-color: var(--panel-color) !important;
    background: #f0f4ff !important;
}

.modal-body .dropify-wrapper .dropify-message span.file-icon {
    color: var(--panel-color) !important;
}

.modal-body .logo-size {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    margin-top: 0.5rem !important;
    display: block;
    text-align: right;
}

/* Input Groups */
.modal-body .input-group {
    display: flex;
    align-items: stretch;
    position: relative;
}

.modal-body .input-group .form-control {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
}

.modal-body .input-group .form-control:focus {
    border-right: none !important;
    z-index: 1;
}

.modal-body .input-group .form-control:focus+.input-group-append .btn {
    border-left: 1px solid var(--panel-color) !important;
    z-index: 2;
}

.modal-body .input-group-append {
    display: flex;
}

.modal-body .input-group-append .btn {
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
    padding: 0.75rem 1rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    transition: all 0.2s ease;
}

.modal-body .input-group-append .btn-dark,
.modal-body .input-group-append .btn-xs.btn-dark {
    background: linear-gradient(135deg, var(--panel-color) 0%, #8F7AE9 100%) !important;
    color: #ffffff !important;
    border: 1px solid var(--panel-color) !important;
    border-left: none !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    height: 100%;
    min-width: 48px;
}

.modal-body .input-group-append .btn-dark:hover,
.modal-body .input-group-append .btn-xs.btn-dark:hover {
    background: linear-gradient(135deg,var(--panel-color) 0%, #7f6ae8 100%) !important;
    border-color:var(--panel-color) !important;
    transform: none;
    box-shadow: 0 2px 4px rgba(96, 122, 233, 0.2) !important;
}

.modal-body .input-group-append .btn-dark:active,
.modal-body .input-group-append .btn-xs.btn-dark:active {
    background: linear-gradient(135deg,var(--panel-color) 0%, #7f6ae8 100%) !important;
    transform: scale(0.98);
}

.modal-body .input-group-append .btn-dark i,
.modal-body .input-group-append .btn-xs.btn-dark i {
    font-size: 1.125rem !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* Section Headings */
.modal-body h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 1.25rem !important;
    margin-top: 1.5rem !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
}

.modal-body h5:first-child {
    margin-top: 0 !important;
}

/* Advanced Details Sections */
.modal-body .al_custom_modal {
    margin-top: 1.5rem;
    padding-top: 1.5rem !important;
    border-top: 1px solid #e5e7eb;
}

.modal-body .al_advanced_details {
    background: #f8fafc !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    padding: 1.25rem !important;
    height: 100%;
}

.modal-body .al_custom_title {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

/* User Search and Add Section */
.modal-body .al_add_user {
    background: #f8fafc !important;
    padding: 1.5rem !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    height: 100%;
}

.modal-body .al_add_user h5 {
    color: #000 !important;
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.modal-body .dropdown-menu_al {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.modal-body #selected_user {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-body #selected_user li {
    padding: 0.75rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    transition: background 0.2s ease;
}

.modal-body #selected_user li:hover {
    background: #f8fafc !important;
}

.modal-body #selected_user li:last-child {
    border-bottom: none !important;
}

.modal-body .user_img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

/* Invalid Feedback */
.modal-body .invalid-feedback {
    font-size: 0.75rem !important;
    color: #ef4444 !important;
    margin-top: 0.375rem !important;
    display: block !important;
}

.modal-body .text-danger {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
}

/* Text Muted */
.modal-body .text-muted {
    color: #94a3b8 !important;
    font-size: 0.875rem !important;
}

/* Links */
.modal-body a {
    color: var(--panel-color) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.modal-body a:hover {
    color:var(--panel-color) !important;
    text-decoration: underline !important;
}

/* Nestable List */
.modal-body .custom-dd {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    background: #ffffff !important;
    max-height: 300px;
    overflow-y: auto;
}

.modal-body .dd-list {
    margin: 0 !important;
    padding: 0 !important;
}

.modal-body .dd3-content {
    padding: 0.875rem !important;
    border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    margin-bottom: 0.5rem;
}

.modal-body .dd3-content:hover {
    background: #f8fafc !important;
    border-color: var(--panel-color) !important;
}

/* Time Slot Display */
.modal-body .time-sloat {
    position: absolute !important;
    right: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
    pointer-events: none !important;
    font-weight: 500;
}

/* Checkbox and Radio */
.modal-body input[type="checkbox"],
.modal-body input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--panel-color);
}

/* Switchery Toggle Alignment */
.modal-body .d-flex.justify-content-between {
    align-items: center;
    padding: 0.5rem 0;
}

.modal-body .d-flex.justify-content-between label {
    margin-bottom: 0 !important;
    flex: 1;
}

/* License/Registration Documents Section */
.modal-body .al_licence_imgbox {
    margin-top: 1.5rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid #e5e7eb !important;
}

/* Better spacing for form rows */
.modal-body .row.mb-2 {
    margin-bottom: 1rem !important;
}

.modal-body .row.mb-3 {
    margin-bottom: 1.5rem !important;
}

/* GST and Banking Details Sections */
.modal-body h5.mb-2 {
    margin-bottom: 1rem !important;
    margin-top: 1.5rem !important;
}

/* Table in Modal */
.modal-body .table {
    margin-bottom: 0;
    border-radius: 8px;
    overflow: hidden;
}

.modal-body .table thead th {
    background: #f8fafc !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    padding: 0.875rem 1rem !important;
}

.modal-body .table tbody td {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 1rem !important;
    vertical-align: middle !important;
}

.modal-body .table tbody tr:last-child td {
    border-bottom: none !important;
}

.modal-body .table tbody tr:hover {
    background: #f8fafc !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-body {
        padding: 1.25rem 1rem !important;
    }

    .modal-body .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .modal-body .row>[class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Large screen optimizations */
@media (min-width: 1200px) {
    .modal-body .col-md-4 {
        flex: 0 0 32%;
        max-width: 32%;
    }

    .modal-body .col-md-6 {
        flex: 0 0 49%;
        max-width: 49%;
    }

    /* Better logo/banner distribution */
    .modal-body #add-form .col-md-8>.row .col-md-3 {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .modal-body #add-form .col-md-8>.row .col-md-9 {
        flex: 0 0 70%;
        max-width: 70%;
    }
}

/* Extra large screen optimizations */
@media (min-width: 1400px) {
    .modal-body {
        padding: 1rem 1.25rem !important;
    }

    .modal-body .form-group {
        margin-bottom: 0.55rem;
    }
}

/* Vendor Page Action Buttons - Matching Image Style */
.vendor-page .page-title-box .page-title-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.vendor-page .btn-import-vendor {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 4px 15px 2px;
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.vendor-page .btn-import-vendor i {
    font-size: 1rem;
}

.vendor-page .btn-add-vendor {
	background: linear-gradient(135deg,var(--panel-color) 0%, #7f6ae8 100%);
	border: none;
	border-radius: 4px;
	padding: 5px 15px 3px;
	font-weight: 600;
	font-size: 14px;
	color: #ffffff;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vendor-page .btn-add-vendor i {
    font-size: 1rem;
}

.al-widget-card {
	border-radius: 8px;
	padding: 10px;
	display: flex;
	justify-content: center;
	height: 100%;
	transition: all 0.3s ease;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border: 1px solid #f0f0f0;
}


.al-widget-card .label {
    color: #6c757d;
    font-weight: 500;
    font-size: 13px;
    /* Slightly reduced font size */
    margin-bottom: 2px;
    /* Reduced margin from 5px */
}


.al-widget-card .value {
    font-size: 20px;
    font-weight: 700;
    color: #323a46;
}

.tab-product.vendor-products {
    margin-top: 10px;
}

.page-title-box .page-title {
    text-transform: capitalize !important;
    font-weight: 700 !important;
}

.al-widget-card .value {
    font-size: 16px;
    font-weight: 700;
    color: #323a46;
    line-height: 1;
    margin-top: 5px;
}
#action_vendor_button {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	padding: 4px 15px 2px;
	font-weight: 600;
	font-size: 14px;
	color: #1e293b;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	margin-bottom: 5px;
	margin-right: 0;
}
.toolbar:empty {
	margin: 0 !important;
}
.order-detail-content {
	background: #f5f5f5 !important;
	padding: 12px 24px !important;
	margin: 12px 12px !important;
	border-radius: 8px;
	border-bottom: none !important;
}
.order-main-table tbody tr.order-detail-row:has(.order-detail-content) {
	background: white !important;
	margin: 0 !important;
}
.order-detail-content .vendor-section:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 12px;
    border: none !important;
    height: 100%;
}
.order-detail-content .vendor-section, .order-summary-card {
	border-radius: 6px !important;
    border: none !important;
}
.vendor-page .vendor-action-menu--clean.show a.vendor-action-item, .vendor-page .vendor-action-menu--clean.show a.vendor-action-item:hover {
	display: flex !important;
	justify-content: flex-start !important;
	width: auto !important;
	min-width: 100% !important;
	gap: 2px !important;
	transform: none !important;
}
.vendor-page .vendor-action-menu--clean.show a.vendor-action-item i {
	margin-right: 10px !important;
}

/* Order Detail page styles (moved from resources/views/backend/order/view.blade.php) */
.alOrderViewPage .page-title-box {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
}
.page-title-box .page-title {
	line-height: 40px;
}
.alOrderViewPage .page-title-box .page-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
}

.alOrderViewPage .page-title-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.alOrderViewPage .page-title-filters .btn {
    background: var(--panel-color);
    border: none;
    border-radius: 4px;
    padding: 4px 15px;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alOrderViewPage .page-title-filters .al-title-btn-light {
    background: #ffffff;
    border-color: #d9dee7;
    color: #1f2937;
}

.alOrderViewPage .page-title-filters .al-title-btn-light:hover {
    background: #f8fafc;
    border-color: #cfd6e2;
    color: #111827;
}

.alOrderViewPage .page-title-filters .al-title-btn-primary {
    background: var(--panel-color);
    border-color: var(--panel-color);
    color: #ffffff;
}

.alOrderViewPage .page-title-filters .al-title-btn-primary:hover {
    background: var(--panel-color);
    border-color: var(--panel-color);
    color: #ffffff;
}

.alOrderViewPage .card {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    margin-bottom: 0.75rem;
}

.alOrderViewPage .card-body {
    padding: 1rem;
}

.alOrderViewPage .header-title {
    letter-spacing: -0.2px;
    font-size: .95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.alOrderViewPage .mb-3 {
    margin-bottom: 0.75rem !important;
}

.alOrderViewPage #cancel-request-card {
    background: #fef9e7;
    border: 1px solid #fde68a;
}

.alOrderViewPage #cancel-request-card .header-title {
    color: #78350f;
}

.alOrderViewPage #cancel-request-card .card-body {
    padding: 0.65rem 0.85rem;
}

.alOrderViewPage .cancel-request-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.alOrderViewPage .cancel-request-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.alOrderViewPage .complete_request_btn {
    height: 32px;
    padding: 0.35rem 0.85rem;
    font-weight: 600;
    font-size: 0.8125rem;
    border-radius: 4px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.alOrderViewPage .complete_request_btn.btn-info {
    background: #10b981;
    color: #ffffff;
}

.alOrderViewPage .complete_request_btn.btn-danger {
    background: #ef4444;
    color: #ffffff;
}

@media (max-width: 768px) {
    .alOrderViewPage .cancel-request-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

.alOrderViewPage .table {
    margin-bottom: 0;
}

.alOrderViewPage .track-order-list ul li::before {
    background-color: var(--panel-color);
}

.alOrderViewPage .track-order-list ul li.completed.open-for-update-status  {
    border-color: var(--panel-color);
}

.alOrderViewPage .track-order-list ul li.completed.disabled::before {
    background-color: #ddd;
    border-color: #ddd;
}

.alOrderViewPage .track-order-list ul li.completed.disabled  {
    border-color: #ddd; 
}

.alOrderViewPage .table thead.table-light {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.alOrderViewPage .table thead th {
    border: 1px solid #e2e8f0;
    padding: 0.65rem 0.8rem;
    font-weight: 600;
    font-size: 0.75rem;
     text-transform: capitalize;
    letter-spacing: 0.5px;
    color: #64748b;
}

.alOrderViewPage .table tbody td,
.alOrderViewPage .table tbody th {
    border: 1px solid #e2e8f0;
    padding: 0.7rem 0.8rem;
    font-size: 0.875rem;
    color: #1e293b;
    vertical-align: middle;
}

.alOrderViewPage .table tbody tr:hover {
    background: #f8f9fa;
}

.alOrderViewPage .product_tab_inner tr,
.alOrderViewPage .product_tab_inner td {
    border: 1px solid #e2e8f0;
    padding: 0.875rem 1rem;
}

.alOrderViewPage .product_tab_inner tr th {
    padding: 0.875rem 1rem;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    background: #f8f9fa;
}

.alOrderViewPage .outer_div {
    border: 1px solid #e2e8f0;
    background: #f8f9fa;
    padding: 0.75rem;
    margin: 0.35rem 0;
}

.alOrderViewPage .outer_div h6 {
    font-size: 0.875rem;
    font-weight: 600 !important;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.alOrderViewPage .product_appointment_spa h4.header-title {
    display: inline-block;
    margin-bottom: 1rem;
}

.alOrderViewPage .product_appointment_spa p {
    float: right;
}

.alOrderViewPage .badge {
	padding: 6px 6px 2px;
	font-weight: 500;
	font-size: 0.75rem;
	line-height: normal;
	border-radius: 5px;
	text-align: center;
}   

.alOrderViewPage .badge-info {
	background: #efefef;
	color: #000;
}

.alOrderViewPage .badge-success {
    background: #10b981;
    color: #ffffff;
}

.alOrderViewPage .badge-danger {
    background: #ef4444;
    color: #ffffff;
}

.alOrderViewPage a {
    color: #555;
    text-decoration: none;
    text-transform: capitalize;
}

.alOrderViewPage a:hover {
    color: var(--panel-color);
    text-decoration: none;
}

.alOrderViewPage .btn {
    padding: 0.4rem 0.85rem;
    font-weight: 500;
    font-size: 0.8125rem;
    border-radius: 6px;
}

.alOrderViewPage .btn-primary {
    background: var(--panel-color);
    border-color: var(--panel-color);
    color: #ffffff;
}

.alOrderViewPage .btn-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

.alOrderViewPage .report-upload-form {
    margin-top: 1rem;
}

.alOrderViewPage .report-upload-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alOrderViewPage .report-upload-wrapper {
    width: 100%;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    transition: all 0.3s ease;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alOrderViewPage .report-upload-wrapper:hover {
    border-color: var(--panel-color);
    background: #f0f4ff;
}

.alOrderViewPage .report-upload-wrapper.has-preview {
    border-color: #10b981;
    background: #f0fdf4;
}

.alOrderViewPage .report-upload-wrapper .dropify-message {
    text-align: center;
    padding: 2rem 1rem;
}

.alOrderViewPage .report-upload-wrapper .dropify-message span.file-icon {
    font-size: 3rem;
    color: var(--panel-color);
    display: block;
    margin-bottom: 1rem;
}

.alOrderViewPage .report-upload-wrapper .dropify-message p {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0.5rem 0;
}

.alOrderViewPage .report-upload-wrapper .dropify-preview {
    width: 100%;
    height: 100%;
}

.alOrderViewPage .report-upload-wrapper .dropify-preview .dropify-render img {
    max-height: 150px;
    width: auto;
    margin: 0 auto;
    display: block;
}

.alOrderViewPage .report-upload-wrapper .dropify-infos {
    background: rgba(255, 255, 255, 0.95);
    padding: 0.75rem;
    border-radius: 4px;
}

.alOrderViewPage .report-upload-wrapper .dropify-filename {
    color: #1e293b;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.alOrderViewPage .report-upload-wrapper .dropify-infos-message {
    color: #64748b;
    font-size: 0.75rem;
    margin: 0;
}

.alOrderViewPage .report-upload-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.alOrderViewPage .report-submit-btn {
    background: linear-gradient(135deg, var(--panel-color) 0%, var(--panel-color) 100%);
    border: none;
    border-radius: 6px;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(var(--panel-color-rgb), 0.20);
}

.alOrderViewPage .report-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--panel-color-rgb), 0.30);
    background: linear-gradient(135deg, var(--panel-color) 0%, var(--panel-color) 100%);
}

.alOrderViewPage .report-submit-btn i {
    font-size: 1rem;
}

.alOrderViewPage .upload-report {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.8rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}

.alOrderViewPage .upload-report a {
    color: var(--panel-color);
    font-weight: 500;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.alOrderViewPage .upload-report a:hover {
    color: var(--panel-color);
}

.alOrderViewPage .upload-report a:last-child {
    color: #ef4444;
}

.alOrderViewPage .upload-report a:last-child:hover {
    color: #dc2626;
}

.alOrderViewPage .royo-thumnail_img {
    width: 100px;
    height: auto;
    border: 1px solid #e2e8f0;
}

.alOrderViewPage .custom-accordin1 .card-header {
    padding: 0.75rem 1rem !important;
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
}

.alOrderViewPage .custom-accordin1 .card-body {
    padding: 1rem !important;
    border-bottom: 1px solid #e2e8f0;
}

.alOrderViewPage .custom-accordin1 .card:nth-child(1) {
    margin: 1.5rem 0;
}

.alOrderViewPage .custom-accordin1 .card {
    padding-bottom: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e2e8f0 !important;
}

.alOrderViewPage .uploadDocument {
    display: flex;
    justify-content: flex-end;
}

.alOrderViewPage .uploadDocument .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.alOrderViewPage .form-control {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.alOrderViewPage .form-control:focus {
    border-color: var(--panel-color);
    box-shadow: 0 0 0 3px rgba(var(--panel-color-rgb), 0.10);
}

.alOrderViewPage .alert {
    border: none;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.alOrderViewPage .alert-success {
    background: #d1fae5;
    color: #065f46;
}

.alOrderViewPage .alert-danger {
    background: #fee2e2;
    color: #991b1b;
}

.alOrderViewPage h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
}

.alOrderViewPage p {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .alOrderViewPage .page-title-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .alOrderViewPage .page-title-filters {
        margin-top: 0.5rem;
        width: 100%;
        flex-wrap: wrap;
    }

    .alOrderViewPage .card-body {
        padding: 1rem;
    }

    .alOrderViewPage .uploadDocument {
        justify-content: flex-start;
    }
}

/* (Voltaic-style Track Order Timeline styles removed to restore original design) */
/* ── Rental booking meta in admin order cards ─────────────────────────── */
.al-rental-meta {
    border-top: 1px dashed #e2e8f0;
    padding-top: 6px;
    margin-top: 4px;
}
.al-rental-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.7rem;
    line-height: 1.6;
    color: #475569;
}
.al-rental-label {
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}
.al-rental-val {
    color: #1e293b;
    font-weight: 500;
}
.al-rental-dur {
    margin-top: 2px;
}
.al-rental-dur-val {
    color: var(--panel-color);
    font-weight: 700;
}


/* Right: filters */
.page-title-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Date chip — calendar icon + text + caret in one pill */
.dash-date-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    padding: 0 12px;
    height: 38px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    margin-bottom: 0;
}
.dash-date-chip:hover {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(4,80,196,.08);
}
.dash-date-icon {
    font-size: 1rem; color: #2563eb; flex-shrink: 0;
}
.dash-date-input {
    border: none !important; outline: none !important;
    background: transparent !important;
    font-size: .8rem !important; font-weight: 500 !important;
    color: #2d3748 !important;
    width: 190px; cursor: pointer;
    padding: 0 !important; height: auto !important;
    box-shadow: none !important;
}
.dash-date-caret { font-size: .9rem; color: #8898aa; flex-shrink: 0; }

/* Refresh button — outlined circle */
.dash-refresh-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e6ed;
    color: #2563eb;
    font-size: 1.1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    text-decoration: none;
}
.dash-refresh-btn:hover {
     border-color: #2563eb; color: #2563eb;
    box-shadow: 0 4px 12px rgba(4,80,196,.25);
}
.dash-refresh-btn i { line-height: 1; }

/* ── 2b. Flatpickr Calendar — Premium Theme ─────────────────────────────── */
.flatpickr-calendar {
    font-family: 'Poppins', sans-serif !important;
    background: #fff !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(4,80,196,.15), 0 4px 16px rgba(0,0,0,.08) !important;
    padding: 0 0 14px !important;
    width: 320px !important;
    overflow: hidden !important;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { display: none !important; }

/* ── Header — gradient blue ── */
.flatpickr-months {
    background: linear-gradient(135deg, #2563eb 0%, #1a73e8 100%) !important;
    border-radius: 0 !important;
    padding: 14px 10px 16px !important;
    margin: 0 0 8px !important;
    position: relative;
}

/* Nav arrows — white circle buttons */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    width: 30px !important; height: 30px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(255,255,255,.18) !important;
    border-radius: 50% !important;
    transition: background .2s !important;
}
.flatpickr-months .flatpickr-prev-month { left: 12px !important; }
.flatpickr-months .flatpickr-next-month { right: 12px !important; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { background: rgba(255,255,255,.32) !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: #fff !important; width: 14px !important; height: 14px !important; }

/* Month + year text */
.flatpickr-current-month {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 30px !important;
    margin-top: 5px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-family: 'Poppins', sans-serif !important;
    border: none !important;
    font-size: 1rem !important;
    -webkit-appearance: none !important;
    padding: 0 !important;
    cursor: pointer;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: #1a202c !important; }
.flatpickr-current-month input.cur-year {
    color: #fff !important;
    font-weight: 700 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem !important;
}
.numInputWrapper:hover { background: transparent !important; }
.numInputWrapper span { display: none !important; }

/* ── Weekday labels ── */
.flatpickr-weekdays {
    background: transparent !important;
    padding: 0 10px !important;
    margin-bottom: 2px !important;
}
span.flatpickr-weekday {
    background: transparent !important;
    color: #a0aec0 !important;
    font-weight: 600 !important;
    font-size: .68rem !important;
    text-transform: capitalize !important;
    letter-spacing: .04em !important;
}

/* ── Day grid ── */
.flatpickr-days { padding: 0 10px !important; }
.dayContainer { padding: 0 !important; min-width: 100% !important; max-width: 100% !important; width: 100% !important; }

/* Base day cell — circle */
.flatpickr-day {
    font-family: 'Poppins', sans-serif !important;
    font-size: .8rem !important;
    font-weight: 500 !important;
    border-radius: 50% !important;
    border: none !important;
    color: #2d3748 !important;
    height: 36px !important;
    line-height: 36px !important;
    max-width: 36px !important;
    flex-basis: 36px !important;
    margin: 2px 0 !important;
    transition: background .15s, color .15s, transform .1s !important;
    position: relative !important;
}
.flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange):not(.inRange) {
    background: #e8f0fe !important;
    color: #2563eb !important;
    border-radius: 50% !important;
    transform: scale(1.08) !important;
}

/* ── Today — dot indicator ── */
.flatpickr-day.today {
    background: transparent !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    border: none !important;
}
.flatpickr-day.today::after {
    content: '' !important;
    position: absolute !important;
    bottom: 3px !important; left: 50% !important;
    transform: translateX(-50%) !important;
    width: 4px !important; height: 4px !important;
    background: #2563eb !important;
    border-radius: 50% !important;
}
.flatpickr-day.today:hover { background: #e8f0fe !important; }

/* ── Selected single ── */
.flatpickr-day.selected {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(4,80,196,.4) !important;
}
.flatpickr-day.selected:hover { background: #033da0 !important; }

/* ── Range: in-between band ── */
.flatpickr-day.inRange {
    background: #dbeafe !important;
    border-color: #dbeafe !important;
    color: #2563eb !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    box-shadow: -4px 0 0 #dbeafe, 4px 0 0 #dbeafe !important;
}

/* ── Range: start endpoint — circle + right band ── */
.flatpickr-day.startRange {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    box-shadow: 4px 0 0 #dbeafe !important;
    z-index: 1 !important;
}

/* ── Range: end endpoint — circle + left band ── */
.flatpickr-day.endRange {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    box-shadow: -4px 0 0 #dbeafe !important;
    z-index: 1 !important;
}
.flatpickr-day.startRange.endRange {
    box-shadow: 0 4px 12px rgba(4,80,196,.4) !important;
}
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover { background: #033da0 !important; }

/* ── Prev/next month days ── */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #d1d9e6 !important;
}
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange {
    background: #dbeafe !important;
    box-shadow: -4px 0 0 #dbeafe, 4px 0 0 #dbeafe !important;
}

/* ── Disabled days ── */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #e2e8f0 !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════════════════
   ORDER PAGE — CARD LAYOUT  (oc-* prefix)
   Matches screenshot: avatar header | thumb strip | vendor row |
   financials | slot chip | actions || sticky summary panel
   ═══════════════════════════════════════════════════════════════ */

/* ── Tab bar ── */
.order-page .nav-material.clean-tabs,
.col-12 .nav-material.clean-tabs {
    border-bottom: 2px solid #e8ecf2 !important;
    background: transparent !important;
    padding: 0 1rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 0 !important;
}
.col-12 .nav-material.clean-tabs .nav-item { margin: 0 !important; }
.col-12 .nav-material.clean-tabs .nav-link {
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 0 !important;
    margin-bottom: -2px !important;
    white-space: nowrap !important;
    transition: color .15s, border-color .15s !important;
}
.col-12 .nav-material.clean-tabs .nav-link:hover {
    color: #334155 !important;
    border-bottom-color: #cbd5e1 !important;
}
.col-12 .nav-material.clean-tabs .nav-link.active {
    color: var(--panel-color) !important;
    border-bottom-color: var(--panel-color, var(--panel-color)) !important;
    background: transparent !important;
}
/* Count badge pills inside tabs */
.col-12 .nav-material.clean-tabs .nav-link .total-items {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    transition: background .2s, color .2s !important;
    line-height: 1 !important;
}
.col-12 .nav-material.clean-tabs .nav-link.active .total-items {
    color: var(--panel-color) !important;
}
/* Action links (Return Request, Cancel Request) — outlined pill chips */
.col-12 .nav-material.clean-tabs .nav-link-action {
    color: #64748b !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    margin: auto 0 auto 4px !important;
    background: #fff !important;
    transition: all .2s !important;
    white-space: nowrap !important;
}
.col-12 .nav-material.clean-tabs .nav-link-action:hover {
    border-color: var(--panel-color, var(--panel-color)) !important;
    color: var(--panel-color, var(--panel-color)) !important;
    background: rgba(4,80,196,.04) !important;
}

/* ═══════════════════════════════════════════════════════
   ORDER CARDS  (oc-* prefix)
   Structure per card:
     .oc-card
       .oc-header   ← full-width top bar
       .oc-body
         .oc-left   ← vendor blocks + actions
         .oc-summary ← order totals
   ═══════════════════════════════════════════════════════ */

/* ── List wrapper ── */
.oc-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem 0.75rem;
}

.received-orders .oc-list {
    grid-template-columns: repeat(1, 1fr);
}

/* ── Card body: two-column (left + summary) ── */
.oc-body {
    display: flex;
    align-items: normal;
    gap: 20px;
}

/* ══════════════════ LEFT PANEL ══════════════════ */
.oc-left {
    flex: 1;
    min-width: 0;
    border-right: 1px solid #f1f5f9;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15,23,42,.07);
    overflow: hidden;
    transition: box-shadow .2s, transform .15s;
}
.oc-card:hover {
    box-shadow: 0 5px 20px rgba(15,23,42,.11);
    transform: translateY(-1px);
}

/* ── Full-width header (spans both columns) ── */
.oc-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #eef1f8;
    background: #f8fafc;
}
.oc-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.75rem;
    letter-spacing: 0;
}

/* ── Card body: left content + right summary ── */
.oc-body {
    display: flex;
    align-items: stretch;
}

/* ══ LEFT: vendor blocks ══ */
.oc-left {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-right: 1px solid #eef1f8;
}
.oc-customer-block {
    min-width: 0;
    margin-right: 0.5rem;
}
.oc-customer-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.25;
}
.oc-order-id {
    font-size: 11px;
    font-weight: 500;
    color: #818181;
    text-transform: capitalize;
    letter-spacing: 0;
    line-height: 1;
}
.oc-order-id strong { color: #64748b; font-weight: 600; }

.oc-meta-divider {
    width: 1px;
    height: 28px;
    background: #e2e8f0;
    margin: 0 0.875rem;
    align-self: center;
    flex-shrink: 0;
}
.oc-header-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: 0.25rem;
}
.oc-meta-label {
    font-size: 11px;
    font-weight: 500;
    color: #818181;
    text-transform: capitalize;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 4px;
}
.oc-meta-val {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    line-height: 1.3;
    white-space: nowrap;
}
.oc-addr-val {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.oc-type-pill {
    background: #ccfbf1;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 5px;
    padding: 0.28rem 0.8rem;
    white-space: nowrap;
    margin-left: auto;
    align-self: center;
    line-height: normal;
}
.oc-type-gift {
    background: #fce7f3;
    color: #be185d;
    margin-left: 0.5rem;
}

/* ── Vendor block ── */
.oc-vendor-block {
    padding: 0.875rem;
}
.oc-vendor-block + .oc-vendor-block {
    border-top: 1px dashed #e5e7eb;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
}

/* ── Vendor col divider ── */
.oc-vendor-block .col-md-4 {
    border-right: 1px solid #e5e7eb;
}

/* ── Product thumbnail strip ── */
.oc-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}
.oc-thumb { text-align: center; }
.oc-thumb-wrap {
    position: relative;
    display: inline-block;
}
.oc-thumb-img {
    width: 74px;
    height: 74px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    display: block;
}
.oc-thumb-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--panel-color, var(--panel-color));
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 100%;
    line-height: 22px;
    box-shadow: 0 1px 5px rgba(4,80,196,.35);
    width: 22px;
    height: 22px;
}
.oc-thumb-price {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--panel-color, var(--panel-color));
    margin-top: 4px;
}

/* ── Vendor top bar ── */
.oc-vb-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.6rem;
}
.oc-vb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.oc-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.oc-vendor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.oc-vendor-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    flex-shrink: 0;
}

/* Status badges */
.oc-status-badge {
    font-size: 0.71rem;
    font-weight: 700;
    border-radius: 5px;
    padding: 0.25rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.02em;
}
.oc-badge-placed    { background: rgba(245,158,11,.14); color: #b45309; }
.oc-badge-accepted  { background: rgba(16,185,129,.13); color: #059669; }
.oc-badge-processing{ background: rgba(4,80,196,.11);   color: var(--panel-color); }
.oc-badge-rejected  { background: rgba(239,68,68,.11);  color: #dc2626; }
.oc-badge-delivery  { background: rgba(6,182,212,.11);  color: #0891b2; }
.oc-badge-done      { background: rgba(16,185,129,.16); color: #047857; }

/* View Details link */
.oc-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--panel-color, var(--panel-color)) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity .15s;
}
.oc-view-btn:hover { opacity: .72; }
.oc-view-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Expandable detail panel ── */
.oc-detail-panel {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.oc-detail-cat { margin-bottom: 0.375rem; }
.oc-detail-cat:last-child { margin-bottom: 0; }
.oc-detail-cat-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
     text-transform: capitalize;
    letter-spacing: 0.05em;
    padding-bottom: 0.4rem;
    margin-bottom: 0.375rem;
    border-bottom: 1px solid #e5e7eb;
}
.oc-cat-count {
    background: #e2e8f0;
    color: #64748b;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 0.67rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.oc-detail-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.oc-detail-row:last-child { border-bottom: none; }
.oc-detail-img {
    width: 40px;
    height: 40px;
    border-radius: 7px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.oc-detail-name { font-size: 0.8rem; font-weight: 600; color: #1e293b; line-height: 1.3; }
.oc-detail-price { font-size: 0.74rem; color: #64748b; margin-top: 2px; }
.oc-detail-rental { font-size: 0.71rem; color: #94a3b8; margin-top: 3px; }

/* ── Financial row ── */
.oc-fin-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.oc-fin-item { display: flex; align-items: center; gap: 0.5rem; }
.oc-fin-label { font-size: 0.8rem; color: #64748b; font-weight: 500; }
.oc-fin-val   { font-size: 0.875rem; font-weight: 700; color: #1e293b; }

/* ── Slot / info chips ── */
.oc-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.6rem;
}
.oc-slot-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.28rem 0.75rem;
    font-size: 0.73rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-chip-dinein {
    background: #fdf4ff;
    border-color: #e9d5ff;
    color: #7c3aed;
}
.oc-chip-rental {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}
body.dark .oc-chip-dinein  { background: #2d1f3d; border-color: #5b3d7d; color: #c084fc; }
body.dark .oc-chip-rental  { background: #2d1f0f; border-color: #7c3a0a; color: #fb923c; }

/* ── Action buttons ── */
.oc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 10px;
    justify-content: end;
}
.oc-btn-cancel,
.oc-btn-action {
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 1.35rem;
    cursor: pointer;
    transition: all .18s;
    line-height: 1.4;
    border: none;
    outline: none;
}
.oc-btn-cancel {
    background: #E8E9EB;
    color: #64748b;
    border: 1.5px solid #cbd5e1;
}
.oc-btn-cancel:hover { border-color: #94a3b8; color: #475569; }
.oc-btn-action {
    background: var(--panel-color);
    color: #fff;
    box-shadow: 0 2px 10px rgba(4,80,196,.28);
}
.oc-btn-action:hover { filter: brightness(1.1); }

/* ══ RIGHT: order summary ══ */
.oc-summary {
    width: 240px;
    flex-shrink: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #f5f8ff;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.oc-sum-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.6rem;
}
.oc-sum-rows { flex: none; }
.oc-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.28rem 0;
    border-bottom: 1px solid #eef1f8;
}
.oc-sum-row:last-child { border-bottom: none; }
.oc-sum-label { font-size: 0.78rem; color: #64748b; font-weight: 500; }
.oc-sum-val   { font-size: 0.78rem; font-weight: 600; color: #334155; }
.oc-sum-security { color: #7c3aed !important; }
.oc-sum-discount { color: #16a34a !important; font-weight: 700 !important; }
.oc-sum-row--discount .oc-sum-label { color: #16a34a; }
.oc-sum-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
}
.oc-sum-total-label { font-size: 0.72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.oc-sum-total-val   { font-size: 1rem; font-weight: 800; color: var(--panel-color); }

/* ── Empty state ── */
.oc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 380px;
    padding: 3rem 2rem;
    margin: 0 auto;
}
.oc-empty-state .oc-es-ring {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: #f8fafc;
    border: 2px solid #e8edf2;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 0 10px rgba(100,116,139,.05);
}
.oc-empty-state .oc-es-ring svg { width: 44px; height: 44px; }
.oc-empty-state img { max-width: 130px; margin-bottom: 1.5rem; opacity: .88; }
.oc-empty-state .oc-es-title { font-size: .975rem; font-weight: 700; color: #1e293b; margin: 0 0 .35rem; }
.oc-empty-state p:not(.oc-es-title) { color: #94a3b8; font-size: .825rem; margin: 0; line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 1600px) {
    body .order-list-view .dd-list .dd-handle+.dd3-content {
        padding-right: 6rem !important;
    }
    .oc-list {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width: 1280px) {
    .oc-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .oc-list    { grid-template-columns: 1fr; gap: .65rem; padding: .65rem .4rem; }
    .oc-body    { flex-direction: column; }
    .oc-left    { border-right: none; border-bottom: 1px solid #eef1f8; }
    .oc-summary { width: 100%; border-radius: 0; }
    .oc-meta-divider { display: none; }
    .oc-header-meta  { padding-left: 0; border-left: none; }
    .oc-type-pill    { margin-left: 0; }
}

/* ── Dark mode ── */
body.dark .oc-card    { background: #1e2538; border-color: #2d3748; }
body.dark .oc-header  { background: #171e2e; border-bottom-color: #2d3748; }
body.dark .oc-left    { background: #1e2538; border-right-color: #2d3748; }
body.dark .oc-summary { background: #171e2e; }
body.dark .oc-sum-footer { background: #252d3d; border-color: #3d4f6b; }
body.dark .oc-sum-row { border-bottom-color: #2d3748; }
body.dark .oc-customer-name,
body.dark .oc-vendor-name,
body.dark .oc-fin-val,
body.dark .oc-sum-val,
body.dark .oc-sum-total-val { color: #e2e8f0; }
body.dark .oc-meta-val { color: #94a3b8; }
body.dark .oc-meta-divider { background: #2d3748; }
body.dark .oc-thumb-img,
body.dark .oc-detail-img { border-color: #2d3748; }
body.dark .oc-detail-panel { background: #252d3d; border-color: #2d3748; }
body.dark .oc-slot-chip { background: #252d3d; border-color: #2d3748; color: #94a3b8; }
body.dark .oc-btn-cancel { background: #252d3d; border-color: #3d4f6b; color: #94a3b8; }
body.dark .oc-vendor-block + .oc-vendor-block { border-top-color: #2d3748; }
body.dark .col-12 .nav-material.clean-tabs { background: #1e2538 !important; border-bottom-color: #2d3748 !important; }
body.dark .col-12 .nav-material.clean-tabs .nav-link { color: #64748b !important; }
body.dark .col-12 .nav-material.clean-tabs .nav-link.active { color: #e2e8f0 !important; }

/* ═══════════════════════════════════════════════════════════════
   ORDER DETAIL PAGE  (od-* prefix)
   ═══════════════════════════════════════════════════════════════ */

/* ── page header ── */
.od-page-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 0 16px; border-bottom:1px solid #e8ecf2; margin-bottom:22px; }
.od-page-hdr-left { display:flex; align-items:center; gap:12px; }
.od-back-btn { width:34px; height:34px; border-radius:50%; border:1.5px solid #e2e8f0; background:#fff; display:inline-flex; align-items:center; justify-content:center; color:#64748b; text-decoration:none; flex-shrink:0; transition:background .2s; }
.od-back-btn:hover { background:#f1f5f9; color:#1e293b; text-decoration:none; }
.od-order-title { font-size:1.25rem; font-weight:700; color:#0f172a; margin:0; }
.od-hdr-actions { display:flex; align-items:center; gap:8px; }
.od-hdr-btn { display:inline-flex; align-items:center; gap:6px; padding:.45rem 1.1rem; border-radius:8px; border:none; font-weight:600; font-size:.825rem; cursor:pointer; transition:all .2s; text-decoration:none; }
.od-hdr-btn-primary { background:#2563eb; color:#fff !important; box-shadow:0 2px 8px rgba(37,99,235,.25); }
.od-hdr-btn-primary:hover { background:var(--panel-color); transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,99,235,.35); }

/* ── two-column layout ── */
.od-layout { display:flex; gap:20px; align-items:flex-start; }
.od-main { flex:1; min-width:0; }
.od-sidebar { width:295px; flex-shrink:0; position:sticky; top:72px; align-self:flex-start; }

/* ── shared card ── */
.od-card { background:#fff; border-radius:14px; border:1px solid #e8ecf2; box-shadow:0 1px 8px rgba(30,41,59,.06); padding:20px; margin-bottom:16px; }
.od-card-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.od-card-title { font-size:.95rem; font-weight:700; color:#0f172a; margin:0; }
.od-type-badge { background:#ccfbf1; color:#334155; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.02em; }

/* ── horizontal stepper ── */
.od-stepper { display:flex !important; align-items:flex-start; list-style:none; padding:12px 0 4px !important; margin:0 !important; position:relative; }
ul.od-stepper.remove-curser {
    margin-top: 30px !important;
}
.od-stepper li { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; }
.od-stepper li h5,.od-stepper li p { display:none !important; }
/* track line — top = half of 36px node */
.od-stepper li:not(:last-child)::after { content:''; position:absolute; top:18px; left:50%; width:100%; height:2px; background:#e2e8f0; z-index:0; }
.od-stepper li.completed:not(:last-child)::after { background:#C2BEBE; }
.od-stepper li.completed.open-for-update-status::after { background: #2563eb;}
/* circles — 36px, pending = gray fill */
/* pending = empty white circle with light gray border */
.od-step-node { width:36px; height:36px; border-radius:50%; border:2.5px solid #d1d5db; background:#fff; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; flex-shrink:0; }
/* completed = gray filled circle with tick */
.od-stepper li.completed .od-step-node { background:#C2BEBE; border-color:#C2BEBE; }
/* active = bright blue solid + outer glow ring with tick */
.od-stepper li.open-for-update-status .od-step-node { background:#2563eb; border-color:#2563eb; box-shadow:0 0 0 6px rgba(37,99,235,.18); }
/* checkmark: only show on completed and current (active) steps, not on future pending steps */
.od-step-check { display:none; }
.od-stepper li.completed .od-step-check { display:block; }
.od-stepper li.open-for-update-status .od-step-check { display:block; }
/* labels */
.od-step-label { font-size:.82rem; font-weight:600; color:#94a3b8; margin-top:8px; line-height:1.3; }
.od-stepper li.completed .od-step-label { color:#C2BEBE; }
.od-stepper li.open-for-update-status .od-step-label { color:#1e293b; }
/* dates */
.od-step-date { font-size:.72rem; color:#94a3b8; margin-top:2px; line-height:1.4; }

/* ── product table ── */
.od-prod-table { width:100%; border-collapse:collapse; }
.od-prod-table thead tr { background:#f8fafc; }
.od-prod-table thead th { padding:10px 14px; font-size:.7rem; font-weight:700; color:#64748b; letter-spacing:.05em; text-transform:capitalize; border-bottom:1px solid #e8ecf2; }
.od-prod-table thead th:last-child,.od-prod-table tbody td:last-child { text-align:right; }
.od-prod-table tbody td { padding:14px; vertical-align:top; font-size:.85rem; color:#374151; border-bottom:1px solid #f1f5f9; }
.od-prod-table tbody tr:last-child td { border-bottom:none; }
.od-prod-details { display:flex; align-items:flex-start; gap:12px; }
.od-prod-img { width:60px; height:60px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.od-prod-name { font-weight:600; color:#0f172a; font-size:.875rem; display:block; margin-bottom:2px; }
.od-prod-variant { font-size:.75rem; color:#94a3b8; }
.od-addon-line { font-size:.8rem; color:#374151; line-height:1.8; white-space:nowrap; }
.od-prod-price { font-weight:700; color:#0f172a; font-size:.9rem; }

/* ── financial summary ── */
.od-fin-block { border-top:1px solid #f1f5f9; margin-top:4px; padding-top:4px; }
.od-fin-row { display:flex; justify-content:space-between; align-items:center; padding:7px 14px; font-size:.84rem; }
.od-fin-row + .od-fin-row { border-top:1px solid #f8fafc; }
.od-fin-label { color:#374151; font-weight:500; }
.od-fin-val { color:#0f172a; font-weight:600; }
.od-fin-row.od-fin-total { border-top:2px solid #e8ecf2 !important; margin-top:4px; padding-top:12px; padding-bottom:4px; }
.od-fin-row.od-fin-total .od-fin-label,.od-fin-row.od-fin-total .od-fin-val { font-weight:700; font-size:.95rem; color:#0f172a; }

/* ── sidebar cards ── */
.od-cust-head { display:flex; align-items:center; gap:12px; }
.od-cust-avatar { width:50px; height:50px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#e2e8f0; display:flex; align-items:center; justify-content:center; }
.od-cust-avatar img { width:100%; height:100%; object-fit:cover; }
.od-cust-name { font-weight:700; color:#0f172a; font-size:.9rem; line-height:1.3; }
.od-cust-orders { font-size:.76rem; color:#64748b; margin-top:1px; }
.od-info-row { display:flex; align-items:baseline; padding:6px 0; border-bottom:1px solid #f8fafc; font-size:.82rem; }
.od-info-row:last-child { border-bottom:none; }
.od-info-key { color:#64748b; min-width:72px; flex-shrink:0; font-weight:500; }
.od-info-sep { color:#94a3b8; margin:0 8px; }
.od-info-val { color:#0f172a; font-weight:600; flex:1; }
.od-addr-row { display:flex; align-items:flex-start; gap:8px; padding:8px 0; font-size:.82rem; }
.od-addr-icon { color:#ef4444; flex-shrink:0; margin-top:1px; }
.od-addr-text { color:#374151; line-height:1.5; flex:1; }
.od-pay-status-badge          { display:inline-block; padding:2px 10px; border-radius:12px; font-size:.72rem; font-weight:700; background:#dcfce7; color:#15803d; }
.od-pay-status-badge.unpaid   { background:#fff3cd; color:#92400e; }

/* responsive */
@media (max-width:900px) {
  .od-layout { flex-direction:column; }
  .od-sidebar { width:100%; position:static; }
}
@media (max-width:600px) {
  .od-stepper { overflow-x:auto; }
  .od-stepper li { min-width:100px; }
}

/* ── Hide page-title heading globally ── */
h4.page-title{
    display: none !important;
}

/* ═══════════════════════════════════════════════════
   VENDOR PAGE — FULL REDESIGN
   ═══════════════════════════════════════════════════ */

/* Page heading (replaces h4.page-title so it stays visible) */
.vendor-page .vp-heading {
    font-size: 1.45rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.01em;
}

/* ── Import / Add buttons ── */
.vendor-page .btn-import-vendor, .vendor-page .btn-add-vendor {
    border: none;
    transition: all 0.18s ease;
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.825rem;
    gap: 6px;
    padding: 5px 16px;
    border-radius: 8px;
    line-height: normal;
}
.vendor-page .btn-import-vendor {
    background: #475569;
}
.vendor-page .btn-import-vendor:hover { background: #334155; }
.vendor-page .btn-add-vendor {
    background: #2563eb;
}
.vendor-page .btn-add-vendor:hover { background: var(--panel-color); }

/* ── Stats Cards ── */
.vp-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 18px;
    border-radius: 16px;
    margin-bottom: 1rem;
    min-height: 96px;
    background: #fff !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.07) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
.vp-stat-card:hover {
    box-shadow: 0 6px 24px rgba(15,23,42,.13) !important;
    transform: translateY(-2px);
}
.vp-stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.vp-stat-content { flex: 1; min-width: 0; }
.vp-stat-content .label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
    line-height: 1;
}
.vp-stat-content .value {
    font-size: 2rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #1e293b !important;
}

/* Purple — Total Vendors */
.vp-stat-purple .vp-stat-icon {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    box-shadow: 0 4px 14px rgba(124,58,237,.28);
}

/* Green — Open Vendors */
.vp-stat-green .vp-stat-icon {
    background: linear-gradient(135deg, #16a34a, #4ade80);
    box-shadow: 0 4px 14px rgba(22,163,74,.25);
}

/* Teal — Total Products */
.vp-stat-teal .vp-stat-icon {
    background: linear-gradient(135deg, #0891b2, #22d3ee);
    box-shadow: 0 4px 14px rgba(8,145,178,.25);
}

/* Blue — Total Active Orders */
.vp-stat-blue .vp-stat-icon {
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    box-shadow: 0 4px 14px rgba(37,99,235,.25);
}

/* ── Tab bar search ── */
.vp-search-nav-item {
    display: flex;
    align-items: center;
    padding: 0 4px;
}
.vp-search-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    height: 36px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.vp-search-input {
    border: none;
    outline: none;
    padding: 0 12px;
    font-size: 0.82rem;
    color: #374151;
    width: 230px;
    background: transparent;
    height: 100%;
}
.vp-search-input::placeholder { color: #9ca3af; }
.vp-search-btn {
    border: none;
    background: #2563eb;
    color: #fff;
    width: 38px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.05rem;
    transition: background 0.15s;
}
.vp-search-btn:hover { background: var(--panel-color); }

/* Hide native DataTables search — we use custom search above */
.vendor-page .dataTables_filter { display: none !important; }
/* Also hide Export PDF / Sync buttons from toolbar (keep only if needed) */
.vendor-page .dataTables_wrapper .dt-buttons { display: none !important; }

/* ── Vendor table: clean row styling ── */
.vendor-page .order-main-table thead th {
    background: #f8fafc !important;
    color: #374151 !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1.5px solid #e5e7eb !important;
    padding: 11px 14px !important;
    white-space: nowrap;
    vertical-align: middle !important;
}
.vendor-page .order-main-table tbody td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 11px 14px !important;
    vertical-align: middle !important;
    color: #374151;
    font-size: 0.875rem;
}
.vendor-page .order-main-table tbody tr:last-child td { border-bottom: none !important; }
.vendor-page .order-main-table tbody tr:hover td { background: #f8fafc; }
.vendor-page .order-main-table { border: 1.5px solid #e5e7eb !important; border-radius: 10px; overflow: hidden; }

/* ── Vendor cell: avatar + name ── */
.vp-vendor-cell {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 160px;
}
.vp-vendor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #f1f5f9;
}
.vp-vendor-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
    text-decoration: none;
    line-height: 1.3;
}
.vp-vendor-name:hover { color: #2563eb; text-decoration: none; }

/* ── Status badges ── */
.vp-status-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
span.vp-status-badge.vp-status-Closed {
    background: rgb(251 87 87 / 18%);
    color: #ff4747;
}
.vp-status-success, .vp-status-primary {
    background: #dbeafe;
    color: var(--panel-color);
}
.vp-status-danger {
    background: #fee2e2;
    color: #dc2626;
}
.vp-status-warning {
    background: #fef3c7;
    color: #b45309;
}
.vp-status-secondary, .vp-status-info {
    background: #f1f5f9;
    color: #475569;
}

/* ── Offer pills ── */
.vp-offer-pill {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, #d6f5e3 0%, #e8faf0 100%);
    color: #16a34a;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
    letter-spacing: 0;
    line-height: normal;
}
.vp-offer-more {
    display: inline-block;
    padding: 3px 9px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ── Checkbox column ── */
.vendor-page .order-main-table thead th:first-child,
.vendor-page .order-main-table tbody td:first-child {
    width: 42px;
    padding-left: 16px !important;
    padding-right: 8px !important;
}

/* ── dataTables info + pagination ── */
.vendor-page .dataTables_info {
    font-size: 0.8rem;
    color: #64748b;
    padding-top: 10px;
}
.vendor-page .dataTables_paginate {
    padding-top: 10px;
}

/* ── Vendor page: Responsive ─────────────────────────────────────── */

/* ── Tablet (≤991px) ── */
@media (max-width: 991px) {

    /* Stat cards: 2 per row on tablet */
    .vendor-page .vp-stat-card               { min-height: auto; }

    /* Page title row: stack buttons */
    .vendor-page .page-title-box .d-flex     { flex-wrap: wrap; gap: .5rem; }
    .vendor-page .page-title-filters         { flex-wrap: nowrap; gap: .4rem; }

    /* Tab bar + search: allow wrapping */
    .tab-product .item .vp-search            { position: static; width: auto; margin-left: auto; }

    /* Table: allow horizontal scroll, font compact */
    .vendor-page .table-responsive           { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .vendor-page .dataTables_wrapper .dataTables_scrollBody { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .vendor-page .order-main-table           { min-width: 750px !important; }
    .order-main-table                        { font-size: .8rem; }
    .order-main-table thead th,
    .order-main-table tbody td               { padding: .6rem .75rem !important; white-space: nowrap; }

    /* ── Active table (11 cols): hide Address, Offers, Can Add, Commission ── */
    #vendor_active_datatable th:nth-child(4),
    #vendor_active_datatable td:nth-child(4),
    #vendor_active_datatable th:nth-child(5),
    #vendor_active_datatable td:nth-child(5),
    #vendor_active_datatable th:nth-child(6),
    #vendor_active_datatable td:nth-child(6),
    #vendor_active_datatable th:nth-child(7),
    #vendor_active_datatable td:nth-child(7) { display: none !important; }

    /* ── Awaiting/Blocked tables (10 cols): hide Address, Offers, Can Add, Commission ── */
    #awaiting__Approval_vendor_datatble th:nth-child(3),
    #awaiting__Approval_vendor_datatble td:nth-child(3),
    #awaiting__Approval_vendor_datatble th:nth-child(4),
    #awaiting__Approval_vendor_datatble td:nth-child(4),
    #awaiting__Approval_vendor_datatble th:nth-child(5),
    #awaiting__Approval_vendor_datatble td:nth-child(5),
    #awaiting__Approval_vendor_datatble th:nth-child(6),
    #awaiting__Approval_vendor_datatble td:nth-child(6),
    #blocked_vendor_datatble th:nth-child(3),
    #blocked_vendor_datatble td:nth-child(3),
    #blocked_vendor_datatble th:nth-child(4),
    #blocked_vendor_datatble td:nth-child(4),
    #blocked_vendor_datatble th:nth-child(5),
    #blocked_vendor_datatble td:nth-child(5),
    #blocked_vendor_datatble th:nth-child(6),
    #blocked_vendor_datatble td:nth-child(6) { display: none !important; }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {

    /* Stat cards */
    .vp-stat-card  { padding: 1rem; gap: .75rem; height: auto;}
    .vp-stat-icon  { width: 46px; height: 46px; }
    .vp-stat-content .value { font-size: 1.4rem !important; }

    /* Page title row */
    .vendor-page .page-title-box .d-flex     { flex-direction: column; align-items: flex-start !important; }
    .vendor-page .btn-add-vendor,
    .vendor-page .btn-import                 { width: 100%; justify-content: center; }

    /* Tab bar: horizontal scroll, no wrapping */
    .tab-product .nav-material.nav-tabs      { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important;
                                               -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1px solid #e2e8f0; }
    .tab-product .nav-material.nav-tabs::-webkit-scrollbar { display: none; }
    .tab-product .item .nav-item             { flex-shrink: 0; }
    .tab-product .item .nav-material .nav-link { white-space: nowrap; font-size: .75rem !important;
                                                 padding: .6rem .6rem !important; margin-right: .5rem !important; }

    /* Search bar: full width, below tabs */
    .tab-product .item .vp-search            { position: static; width: 100%; margin: .5rem 0 0; }
    .vp-search-wrap                          { width: 100%; }
    .vp-search-input                         { width: 100% !important; min-width: 0; }

    /* Table: responsive scroll + reduced min-width (fewer columns visible) */
    .vendor-page .order-main-table           { min-width: 500px !important; }
    .vendor-page .dataTables_wrapper .dataTables_scrollBody { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

    /* Table font + padding */
    .order-main-table                        { font-size: .75rem; }
    .order-main-table thead th,
    .order-main-table tbody td               { padding: .5rem .6rem !important; white-space: nowrap; }
    .order-main-table thead th:first-child,
    .order-main-table tbody td:first-child   { padding-left: .75rem !important; }
    .order-main-table thead th:last-child,
    .order-main-table tbody td:last-child    { padding-right: .75rem !important; }

    /* ── Active table: show only Vendor (2), Status (3), Products (8), Orders (9), Action (11) ── */
    /* Hide: checkbox (1), address (4), offers (5), can_add (6), commission (7), active_orders (10) */
    #vendor_active_datatable th:nth-child(1),
    #vendor_active_datatable td:nth-child(1),
    #vendor_active_datatable th:nth-child(4),
    #vendor_active_datatable td:nth-child(4),
    #vendor_active_datatable th:nth-child(5),
    #vendor_active_datatable td:nth-child(5),
    #vendor_active_datatable th:nth-child(6),
    #vendor_active_datatable td:nth-child(6),
    #vendor_active_datatable th:nth-child(7),
    #vendor_active_datatable td:nth-child(7),
    #vendor_active_datatable th:nth-child(10),
    #vendor_active_datatable td:nth-child(10) { display: none !important; }

    /* ── Awaiting/Blocked: show only Vendor (1), Status (2), Products (7), Orders (8), Action (10) ── */
    /* Hide: address (3), offers (4), can_add (5), commission (6), active_orders (9) */
    #awaiting__Approval_vendor_datatble th:nth-child(3),
    #awaiting__Approval_vendor_datatble td:nth-child(3),
    #awaiting__Approval_vendor_datatble th:nth-child(4),
    #awaiting__Approval_vendor_datatble td:nth-child(4),
    #awaiting__Approval_vendor_datatble th:nth-child(5),
    #awaiting__Approval_vendor_datatble td:nth-child(5),
    #awaiting__Approval_vendor_datatble th:nth-child(6),
    #awaiting__Approval_vendor_datatble td:nth-child(6),
    #awaiting__Approval_vendor_datatble th:nth-child(9),
    #awaiting__Approval_vendor_datatble td:nth-child(9),
    #blocked_vendor_datatble th:nth-child(3),
    #blocked_vendor_datatble td:nth-child(3),
    #blocked_vendor_datatble th:nth-child(4),
    #blocked_vendor_datatble td:nth-child(4),
    #blocked_vendor_datatble th:nth-child(5),
    #blocked_vendor_datatble td:nth-child(5),
    #blocked_vendor_datatble th:nth-child(6),
    #blocked_vendor_datatble td:nth-child(6),
    #blocked_vendor_datatble th:nth-child(9),
    #blocked_vendor_datatble td:nth-child(9)  { display: none !important; }

    /* Vendor cell: compact avatar on mobile */
    .vp-vendor-avatar { width: 32px; height: 32px; }

    /* DataTables pagination + info: stack vertically, center */
    .vendor-page .dataTables_wrapper .dataTables_paginate { text-align: center !important; float: none !important; margin-top: .5rem; }
    .vendor-page .dataTables_wrapper .dataTables_info     { text-align: center !important; float: none !important; font-size: .75rem; }
    .vendor-page .dataTables_wrapper .dataTables_paginate .paginate_button { padding: .3rem .55rem !important; font-size: .75rem !important; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
    /* Further hide Products + Orders on smallest screens — keep Vendor, Status, Action only */
    #vendor_active_datatable th:nth-child(8),
    #vendor_active_datatable td:nth-child(8),
    #vendor_active_datatable th:nth-child(9),
    #vendor_active_datatable td:nth-child(9)  { display: none !important; }

    #awaiting__Approval_vendor_datatble th:nth-child(7),
    #awaiting__Approval_vendor_datatble td:nth-child(7),
    #awaiting__Approval_vendor_datatble th:nth-child(8),
    #awaiting__Approval_vendor_datatble td:nth-child(8),
    #blocked_vendor_datatble th:nth-child(7),
    #blocked_vendor_datatble td:nth-child(7),
    #blocked_vendor_datatble th:nth-child(8),
    #blocked_vendor_datatble td:nth-child(8)  { display: none !important; }

    .vendor-page .order-main-table { min-width: 380px !important; font-size: .72rem; }
    .vp-stat-content .value { font-size: 1.2rem !important; }
}

/* =========================================================
   VENDOR MODALS — vm-* prefix (Edit, Add, Import)
   ========================================================= */

/* Modal content wrapper */
#edit_vendor_modal .modal-content,
#add-form .modal-content,
#import-form .modal-content {
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
    border: none !important;
    overflow: hidden;
}

/* Header base */
.vm-header {
    background: #0f172a !important;
    padding: 18px 22px !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.vm-header-left { display: flex; align-items: center; gap: 12px; }

/* Icon ring */
.vm-icon-ring {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vm-icon-ring--blue  { background: rgba(59,130,246,.18); border: 1px solid rgba(59,130,246,.25); color: #60a5fa; }
.vm-icon-ring--green { background: rgba(34,197,94,.18);  border: 1px solid rgba(34,197,94,.25);  color: #4ade80; }

.vm-title {
    font-size: .95rem !important; font-weight: 700 !important;
    color: #f1f5f9 !important; margin: 0 !important; line-height: 1.3 !important;
}
.vm-subtitle {
    font-size: .72rem; color: #94a3b8; margin: 2px 0 0; line-height: 1;
}

/* Close button */
.vm-close-btn {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    color: #94a3b8; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: all .2s;
}
.vm-close-btn:hover { background: rgba(255,255,255,.15); color: #f1f5f9; }

/* Body */
.vm-body,
#add-form .modal-body,
#import-form .modal-body {
    background: #fff !important;
    padding: 22px !important;
}

/* Form labels — scoped to vendor modals */
#editVendorBox .control-label,
#editVendorBox label:not(.logo-size):not(.switchery-label),
#add-form .control-label,
#add-form label:not(.logo-size):not(.switchery-label) {
    font-size: .72rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: capitalize !important;
    letter-spacing: .04em !important;
    margin-bottom: 5px !important;
}

/* Logo/size hint label — keep as-is */
#editVendorBox .logo-size,
#add-form .logo-size {
    font-size: .7rem !important;
    color: #94a3b8 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

/* Form controls */
#editVendorBox .form-control,
#add-form .form-control {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: .875rem !important;
    color: #1e293b !important;
    height: 38px !important;
    padding: 6px 12px;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
}
#editVendorBox .form-control:focus,
#add-form .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
}
#editVendorBox textarea.form-control,
#add-form textarea.form-control { height: auto !important; min-height: 80px !important; }

/* Address map button */
#editVendorBox .showMap,
#add-form .showMap {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 0 14px !important;
}

/* Section sub-headings (GST, Banking) */
#editVendorBox .row.p-2 h5,
#add-form .row.p-2 h5 {
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-transform: capitalize !important;
    letter-spacing: .05em !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 6px !important;
    margin-bottom: 10px !important;
}

/* Right panel heading (Search User / Add User) */
#add-form .col-md-3 h4.modal-title,
#add-form .col-md-3 h3 {
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: #3b82f6 !important;
    text-transform: capitalize !important;
    letter-spacing: .05em !important;
    margin-bottom: 10px !important;
}

/* Footer */
.vm-footer {
    background: #fff !important;
    padding: 14px 22px !important;
    border-top: 1px solid #e8edf2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}
.vm-btn-cancel {
    height: 36px; padding: 0 18px; border-radius: 8px;
    border: 1.5px solid #e2e8f0; background: #fff;
    color: #64748b; font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: all .2s; line-height: 1;
}
.vm-btn-cancel:hover { background: #f1f5f9; border-color: #cbd5e1; }
.vm-btn-submit {
    height: 36px; padding: 0 20px; border-radius: 8px;
    background: #3b82f6 !important; border: none;
    color: #fff !important; font-size: .82rem; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: all .2s; line-height: 1;
}
.vm-btn-submit:hover { background: #2563eb !important; }

/* Import modal — download link */
#import-form .col-md-12.text-center a {
    font-size: .83rem; font-weight: 600; color: #3b82f6;
    text-decoration: underline; display: inline-block; margin-bottom: 14px;
}

/* Import modal — table */
#import-form .table { border-radius: 10px; overflow: hidden; }
#import-form .table thead th {
    font-size: .7rem !important; font-weight: 700; color: #64748b;
     text-transform: capitalize; letter-spacing: .05em;
    background: #f1f5f9 !important; border-bottom: 2px solid #e2e8f0 !important;
    padding: 10px 12px;
}
#import-form .table tbody td {
    font-size: .82rem; color: #374151;
    padding: 10px 12px; border-bottom: 1px solid #f1f5f9 !important;
}
#import-form .table-striped tbody tr:nth-of-type(odd) { background: #f8fafc; }


/* ── assignToSelect (Vendor Detail To Show) dropdown ─────────────── */
.assignToSelect.selectize-select,
.selectize-control.assignToSelect ~ .selectize-control {
    width: 100% !important;
}
/* When selectize renders its custom UI */
.selectize-control.single .selectize-input,
.modal .selectize-control.single .selectize-input {
    border-radius: 7px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 12px !important;
    font-size: .875rem !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.selectize-control.single .selectize-input.focus,
.modal .selectize-control.single .selectize-input.focus {
    border-color: var(--panel-color, #607ae9) !important;
    box-shadow: 0 0 0 3px rgba(96,122,233,.12) !important;
}
.selectize-dropdown {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
    font-size: .875rem !important;
    min-width: 100% !important;
    white-space: normal !important;
}
.selectize-dropdown .option {
    padding: 9px 14px !important;
    border-bottom: 1px solid #f5f7fa !important;
    white-space: normal !important;
    word-break: break-word !important;
}
.selectize-dropdown .option:last-child { border-bottom: none !important; }
.selectize-dropdown .option.active,
.selectize-dropdown .option:hover {
    background: #f0f4ff !important;
    color: var(--panel-color, #607ae9) !important;
}
/* ── end assignToSelect ───────────────────────────────────────────── */

/* ── end vp-stat-card ─────────────────────────────────────────────── */

/* ADD NEW USER button — solid color (no gradient) */
#addUserAddForm.btn {
    background: #2563eb !important;
    background-image: none !important;
    border-color: #2563eb !important;
    color: #fff !important;
    border-radius: 8px !important;
}
#addUserAddForm.btn:hover,
#addUserAddForm.btn:focus {
    background: #1d4ed8 !important;
    background-image: none !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   Vendor Catalog Page  (.vc-page)
   ══════════════════════════════════════════════════════════════════ */

/* ── page header ──────────────────────────────────────────────── */
.vc-page .page-title-box .page-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0;
}

/* ── stat widget ──────────────────────────────────────────────── */
.vc-page .widget-inline {
    border: 1px solid #edf0f7 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(30,41,59,.06) !important;
    background: #fff !important;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.vc-page .widget-inline .card-body {
    padding: 0 !important;
}

.vc-page .widget-inline .row > [class*="col"] {
    padding: 18px 16px;
    position: relative;
}

/* vertical divider between stat cells */
.vc-page .widget-inline .row > [class*="col"] + [class*="col"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: #e2e8f0;
}

.vc-page .widget-inline .text-center h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vc-page .widget-inline .text-center h3 i {
    font-size: 1.4rem;
}

.vc-page .widget-inline .text-center .text-muted {
    font-size: .77rem;
    font-weight: 600;
    letter-spacing: .3px;
     text-transform: capitalize;
    color: #64748b !important;
}

/* stat icon colours */
.vc-page .widget-inline .col-lg:nth-child(1) h3 i { color: #2563eb; }
.vc-page .widget-inline .col-lg:nth-child(2) h3 i { color: #059669; }
.vc-page .widget-inline .col-lg:nth-child(3) h3 i { color: #7c3aed; }
.vc-page .widget-inline .col-lg:nth-child(4) h3 i { color: #ea580c; }
.vc-page .widget-inline .col-lg:nth-child(5) h3 i { color: #0ea5e9; }

/* ── catalog card ─────────────────────────────────────────────── */
.vc-page .vc-catalog-card {
    border: 1px solid #edf0f7 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(30,41,59,.06) !important;
    padding: 20px 20px 4px !important;
}

/* catalog section title */
.vc-page .vc-catalog-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .6px;
    text-transform: capitalize;
    color: #475569;
}

/* ── toolbar ──────────────────────────────────────────────────── */
.vc-page .vc-toolbar {
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 0 !important;
    margin: 14px 0 !important;
}

.vc-page .vc-toolbar .vendor-search {
    margin: 0 !important;
}

/* status select in toolbar */
.vc-page .vc-toolbar .form-group {
    margin: 0 !important;
}
.vc-page .vc-toolbar .form-group .form-control,
.vc-page .vc-toolbar select.form-control {
    height: 36px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: .82rem !important;
    color: #475569 !important;
    background: #f8fafc !important;
    padding: 0 10px !important;
    min-width: 130px;
    transition: border-color .2s;
    box-shadow: none !important;
}
.vc-page .vc-toolbar select.form-control:focus {
    border-color: #2563eb!important;
    outline: none !important;
}

.vc-page .vc-toolbar .vendor-search .form-control {
    height: 36px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: .82rem !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    padding: 0 10px !important;
    min-width: 170px;
    transition: border-color .2s, box-shadow .2s;
}

.vc-page .vc-toolbar .vendor-search .form-control:focus {
    border-color: #2563eb!important;
    box-shadow: 0 0 0 3px rgba(96,122,233,.12) !important;
    background: #fff !important;
    outline: none !important;
}

/* toolbar buttons — base */
.vc-page .vc-toolbar .btn {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    letter-spacing: .2px;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    transition: background .18s, color .18s, box-shadow .18s, border-color .18s;
}
.vc-page .vc-toolbar .btn i.mdi {
    font-size: 1rem;
    line-height: 1;
}

/* secondary actions — outlined indigo */
.vc-page .vc-toolbar .btn-info {
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid #2563eb!important;
    box-shadow: none !important;
}
.vc-page .vc-toolbar .btn-info:hover:not(.disabled):not([disabled]) {
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(96,122,233,.22) !important;
}

/* bulk Action button — amber outline */
.vc-page .vc-toolbar .btn-vc-action {
    background: transparent !important;
    background-image: none !important;
    color: #d97706 !important;
    border: 1.5px solid #d97706 !important;
    box-shadow: none !important;
}
.vc-page .vc-toolbar .btn-vc-action:hover {
    background: #d97706 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(217,119,6,.22) !important;
}

/* primary CTA — Add Product: solid indigo fill */
.vc-page .vc-toolbar .addProductBtn {
    background: #2563eb!important;
    color: #fff !important;
    border-color: #2563eb!important;
    box-shadow: 0 2px 8px rgba(96,122,233,.28) !important;
}
.vc-page .vc-toolbar .addProductBtn:hover {
    background: #4f6ae8 !important;
    border-color: #4f6ae8 !important;
    box-shadow: 0 4px 14px rgba(96,122,233,.35) !important;
}

.vc-page .vc-toolbar .btn.disabled,
.vc-page .vc-toolbar .btn[disabled] {
    opacity: .42 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* ── DataTable in catalog ─────────────────────────────────────── */
.vc-page #vendor_product_table thead tr th,
.vc-page #vendor_longTerm_service_table thead tr th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .4px;
     text-transform: capitalize;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0 !important;
    background: #f8fafc;
    white-space: nowrap;
    padding: 10px 12px !important;
}

.vc-page #vendor_product_table tbody tr td,
.vc-page #vendor_longTerm_service_table tbody tr td {
    font-size: .84rem;
    color: #374151;
    vertical-align: middle !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.vc-page #vendor_product_table tbody tr:hover td,
.vc-page #vendor_longTerm_service_table tbody tr:hover td {
    background: #f8fafc;
}

/* checkbox column */
.vc-page #vendor_product_table thead th:first-child,
.vc-page #vendor_product_table tbody td:first-child {
    width: 40px;
    text-align: center;
}

/* status toggles (switchery) in table */
.vc-page .switchery-default {
    width: 40px !important;
    height: 20px !important;
}

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .vc-page .widget-inline .row > [class*="col"]::before {
        display: none;
    }
    .vc-page .vc-toolbar {
        justify-content: flex-start !important;
    }
    .vc-page .vc-toolbar .vendor-search .form-control {
        min-width: 120px;
    }
}
/* ── end .vc-page ─────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   Vendor Catalog — Stat Cards  (.vc-sc)
   ══════════════════════════════════════════════════════════════════ */
.vc-sc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #edf0f7;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(30,41,59,.06);
    height: 100%;
}
.vc-sc-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.vc-sc-label {
    font-size: .7rem;
    font-weight: 600;
    color: #64748b;
     text-transform: capitalize;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vc-sc-val {
    font-size: 1.45rem;
    font-weight: 700;
    color: #1e293b;
    display: block;
    line-height: 1.2;
}
/* ── end .vc-sc ───────────────────────────────────────────────── */

/* ── stat card colour variants (flat, no gradient) ─────────────── */
.vc-sc-indigo .vc-sc-icon { background: #eef0fd; color: #607AE9; }
.vc-sc-orange .vc-sc-icon { background: #fff7ed; color: #f59e0b; }
.vc-sc-pink   .vc-sc-icon { background: #fdf2f8; color: #ec4899; }
.vc-sc-teal   .vc-sc-icon { background: #f0fdfa; color: #14b8a6; }
.vc-sc-blue   .vc-sc-icon { background: #eff6ff; color: #3b82f6; }

.vc-sc-indigo { border-left: 3px solid #607AE9; }
.vc-sc-orange { border-left: 3px solid #f59e0b; }
.vc-sc-pink   { border-left: 3px solid #ec4899; }
.vc-sc-teal   { border-left: 3px solid #14b8a6; }
.vc-sc-blue   { border-left: 3px solid #3b82f6; }

.vc-sc-indigo .vc-sc-val { color: #607AE9; }
.vc-sc-orange .vc-sc-val { color: #d97706; }
.vc-sc-pink   .vc-sc-val { color: #ec4899; }
.vc-sc-teal   .vc-sc-val { color: #14b8a6; }
.vc-sc-blue   .vc-sc-val { color: #3b82f6; }
/* ── end stat card variants ──────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   Vendor Catalog — Sidebar Profile Card  (.vc-profile-card)
   ══════════════════════════════════════════════════════════════════ */
.vc-page .vendor-show-page .vc-profile-card {
    border: 1px solid #edf0f7 !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(30,41,59,.07) !important;
    margin-bottom: 16px !important;
}

/* Banner image area */
.vc-page .vendor-show-page .vc-prof-banner {
    height: 180px;
    background-size: cover !important;
    background-position: center center !important;
}

/* Info area below banner */
.vc-page .vendor-show-page .vc-prof-info {
    padding: 0 16px 16px !important;
    margin-top: -40px;
    background: transparent;
}

/* Circular avatar overlapping banner */
.vc-page .vendor-show-page .vc-prof-avatar {
    width: 72px !important;
    height: 72px !important;
    margin-top: -36px !important;
    border: 1px solid #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.14) !important;
    position: relative;
    z-index: 2;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.vc-page .vendor-show-page .vc-prof-name {
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 8px 0 2px !important;
}

.vc-page .vendor-show-page .vc-prof-addr {
    font-size: .77rem !important;
    color: #64748b !important;
    margin-bottom: 10px !important;
}

.vc-page .vendor-show-page .vc-prof-desc {
    display: none; /* hide vendor desc — not shown in screenshot */
}

/* Action buttons in profile */
.vc-page .vendor-show-page .vc-prof-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    flex-direction: column;
}

.vc-page .vendor-show-page .vc-prof-actions .btn {
    font-size: .75rem !important;
    padding: 4px 12px !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
}

/* Social media outlined button */
.vc-page .vendor-show-page .vc-social-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: #fff !important;
    background-image: none !important;
    border: 1.5px solid #2563eb!important;
    color: #2563eb!important;
    border-radius: 8px !important;
    font-size: .78rem !important;
    padding: 5px 14px !important;
    font-weight: 600 !important;
    transition: background .2s, color .2s;
    text-decoration: none;
}
.vc-page .vendor-show-page .vc-social-btn:hover {
    background: #2563eb!important;
    color: #fff !important;
    text-decoration: none;
}

/* Accordion cards within sidebar */
.vc-page .vendor-show-page .accordion-item {
    border-radius: 12px !important;
    border: 1px solid #edf0f7 !important;
    box-shadow: 0 1px 4px rgba(30,41,59,.05) !important;
    margin-bottom: 10px !important;
}

.vc-page .vendor-show-page .accordion-button {
    border-radius: 12px !important;
    font-size: .84rem !important;
    padding: 13px 16px !important;
}

.vc-page .vendor-show-page .accordion-button:not(.collapsed) {
    border-radius: 12px 12px 0 0 !important;
}

.vc-page .vendor-show-page .accordion-body .card-box {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 14px 16px !important;
}

/* Form controls inside sidebar */
.vc-page .vendor-show-page .card-box .form-control {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: .82rem !important;
    height: 36px !important;
    color: #1e293b !important;
    background: #f8fafc !important;
}
.vc-page .vendor-show-page .card-box .form-control:focus {
    border-color: #2563eb!important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(96,122,233,.1) !important;
}

/* Save buttons inside sidebar */
.vc-page .vendor-show-page .card-box .btn-info {
    background: #2563eb!important;
    background-image: none !important;
    border-color: #2563eb!important;
    color: #fff !important;
    font-size: .8rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.vc-page .vendor-show-page .card-box .btn-info:hover {
    background: #4f6ae8 !important;
    border-color: #4f6ae8 !important;
}

/* Users section */
.vc-page .vendor-show-page .card-box.cate-vendor {
    background: #fff !important;
}

/* Remove redundant old widget-inline styles inside vc-page */
.vc-page .widget-inline { display: none !important; }

/* ── Login Modal (Frontend Cart) ─────────────────────────────────── */
#login_modal .modal-dialog { max-width: 400px; }
#login_modal .modal-content {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
    overflow: hidden;
}
#login_modal .modal-body {
    padding: 32px 28px 28px !important;
    background: #fff !important;
}
#login_modal .modal-header {
    background: #fff !important;
    border-bottom: none !important;
    padding: 28px 28px 0 !important;
    border-radius: 0 !important;
}
#login_modal .modal-header .modal-title,
#login_modal .modal-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    letter-spacing: -.3px;
}
#login_modal .close {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #f1f5f9 !important;
    color: #64748b !important;
    opacity: 1 !important;
    font-size: .9rem !important;
    display: flex; align-items: center; justify-content: center;
    border: none; padding: 0;
    transition: background .15s;
}
#login_modal .close:hover { background: #e2e8f0 !important; }
#login_modal .form-control {
    background: #f1f5f9 !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    height: 50px !important;
    padding: 0 14px !important;
    font-size: .925rem !important;
    color: #1e293b !important;
    transition: border-color .15s, background .15s;
}
#login_modal .form-control:focus {
    background: #fff !important;
    border-color: #334155 !important;
    box-shadow: none !important;
}
#login_modal #send_password_reset_link {
    color: #64748b !important;
    font-size: .8rem !important;
    font-weight: 500;
    top: 50% !important;
    transform: translateY(-50%);
}
#login_modal .login_continue_btn,
#login_modal .btn-solid {
    background: #111 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    height: 50px !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
     text-transform: capitalize;
    transition: background .15s;
}
#login_modal .login_continue_btn:hover,
#login_modal .btn-solid:hover { background: #222 !important; }
#login_modal .divider-line {
    display: flex; align-items: center; gap: 10px;
    border: none !important;
    margin: 18px 0 !important;
    color: #94a3b8;
    font-size: .8rem;
}
#login_modal .divider-line::before,
#login_modal .divider-line::after {
    content: ''; flex: 1;
    height: 1px; background: #e2e8f0;
}
#login_modal .divider-line span {
    position: static !important;
    background: transparent !important;
    width: auto !important; height: auto !important;
    border-radius: 0 !important;
    font-size: .8rem; color: #94a3b8;
}
#login_modal .login-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    margin-top: 10px !important;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
#login_modal .login-button:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}
#login_modal .login-button i {
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    vertical-align: middle;
}
#login_modal .new-user {
    margin-top: 16px !important;
    font-size: .875rem !important;
    text-align: center;
    color: #64748b;
}
#login_modal .new-user a {
    font-weight: 700 !important;
    color: #111 !important;
    text-decoration: none;
}
#login_modal .new-user a:hover { text-decoration: underline; }
#login_modal .otp_inputs .form-control {
    width: 44px !important; height: 50px !important;
    text-align: center; font-size: 1.1rem; font-weight: 600;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important; padding: 0 !important;
}
#login_modal .otp_inputs .form-control:focus {
    border-color: #111 !important;
    background: #fff !important;
}
#login_modal #error-msg  { color: #ef4444 !important; font-size: .8rem !important; }
#login_modal #success-msg { color: #22c55e !important; font-size: .8rem !important; }
/* ── end Login Modal ─────────────────────────────────────────────── */
/* ── end .vc-profile-card ─────────────────────────────────────── */

/* ── nodConfirmModal — Order Action Confirm Popup ──────────────── */
#nodConfirmModal .modal-dialog { max-width: 400px; }
#nodConfirmModal .nod-ocm-wrap {
    border-radius: 20px !important;
    border: none !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.22) !important;
    overflow: hidden;
    padding-bottom: 0;
}
#nodConfirmModal .nod-ocm-close {
    position: absolute; top: 14px; right: 16px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #f1f5f9; color: #64748b;
    border: none; font-size: 1rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: background .15s;
    z-index: 5;
}
#nodConfirmModal .nod-ocm-close:hover { background: #e2e8f0; color: #1e293b; }
#nodConfirmModal .nod-ocm-icon-ring {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.1rem;
    background: #f0fdf4;
    transition: background .2s;
}
#nodConfirmModal .nod-ocm-icon-ring svg { width: 34px; height: 34px; }
#nodConfirmModal .nod-ocm-title {
    font-size: 1.1rem; font-weight: 700;
    color: #0f172a; margin: 0 0 .3rem; line-height: 1.35;
}
#nodConfirmModal .nod-ocm-subtitle {
    font-size: .83rem; color: #94a3b8;
    margin: 0; min-height: 1rem;
}
#nodConfirmModal .nod-ocm-divider {
    height: 1px; background: #f1f5f9;
    margin: 1.5rem 0 0;
}
#nodConfirmModal .nod-ocm-footer {
    display: flex; gap: 10px;
    padding: 16px 24px 24px;
}
#nodConfirmModal .nod-ocm-btn-cancel {
    flex: 1; height: 44px; border-radius: 10px;
    background: #f8fafc; border: 1.5px solid #e2e8f0;
    color: #64748b; font-size: .875rem; font-weight: 600;
    transition: background .15s, border-color .15s;
}
#nodConfirmModal .nod-ocm-btn-cancel:hover {
    background: #f1f5f9; border-color: #cbd5e1; color: #1e293b;
}
#nodConfirmModal .nod-ocm-btn-confirm {
    flex: 1; height: 44px; border-radius: 10px;
    background: #22c55e; border: none;
    color: #fff; font-size: .875rem; font-weight: 700;
    box-shadow: 0 4px 12px rgba(34,197,94,.3);
    transition: background .15s, box-shadow .15s;
}
#nodConfirmModal .nod-ocm-btn-confirm:hover {
    background: #16a34a;
    box-shadow: 0 6px 16px rgba(34,197,94,.4);
}
/* Danger variant (Reject) */
#nodConfirmModal .nod-ocm-btn-confirm--danger {
    background: #ef4444 !important;
    box-shadow: 0 4px 12px rgba(239,68,68,.3) !important;
}
#nodConfirmModal .nod-ocm-btn-confirm--danger:hover {
    background: #dc2626 !important;
    box-shadow: 0 6px 16px rgba(239,68,68,.4) !important;
}
/* Accept/Green variant */
#nodConfirmModal .nod-ocm-btn-confirm--accept {
    background: #22c55e !important;
    box-shadow: 0 4px 12px rgba(34,197,94,.3) !important;
}
/* Warning variant */
#nodConfirmModal .nod-ocm-btn-confirm--warn {
    background: #f97316 !important;
    box-shadow: 0 4px 12px rgba(249,115,22,.3) !important;
}
/* ── end nodConfirmModal ────────────────────────────────────────── */

/* =========================================================
   SOCIAL MEDIA URLS MODAL — #manageSocialMedia / .smu-*
   ========================================================= */

/* Modal shell */
#manageSocialMedia .modal-content {
    border-radius: 18px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
    border: none !important;
    overflow: hidden;
}

/* Body */
#manageSocialMedia .smu-body {
    background: #f8fafc !important;
    padding: 22px !important;
}

/* "Add New URL" section card */
#manageSocialMedia .smu-add-section {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
}

/* Section title row */
#manageSocialMedia .smu-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 14px !important;
}
#manageSocialMedia .smu-section-title svg { color: #3b82f6; flex-shrink: 0; }

/* Labels */
#manageSocialMedia .smu-label {
    font-size: .72rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: capitalize !important;
    letter-spacing: .04em !important;
    margin-bottom: 5px !important;
    display: block;
}

/* Form controls */
#manageSocialMedia .smu-control {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: .875rem !important;
    color: #1e293b !important;
    height: 38px !important;
    padding: 6px 12px;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
}
#manageSocialMedia .smu-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
    outline: none;
}

/* Add / submit button */
#manageSocialMedia .smu-btn-submit {
    height: 38px !important;
    border-radius: 8px !important;
    background: #3b82f6 !important;
    border: none !important;
    color: #fff !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    transition: background .2s !important;
}
#manageSocialMedia .smu-btn-submit:hover { background: #2563eb !important; }

/* Footer — existing links */
#manageSocialMedia .smu-footer {
    background: #fff !important;
    padding: 20px 22px !important;
    border-top: 1px solid #e8edf2 !important;
    display: block !important;
    flex-wrap: unset !important;
}

/* Existing records table */
#manageSocialMedia .smu-table {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0 !important;
}
#manageSocialMedia .smu-table thead th {
    font-size: .7rem !important;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #f1f5f9 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 10px 14px;
    border-top: none !important;
}
#manageSocialMedia .smu-table tbody td {
    font-size: .83rem;
    color: #374151;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle;
}
#manageSocialMedia .smu-table tbody tr:last-child td { border-bottom: none !important; }

/* Platform badge (icon + name) */
#manageSocialMedia .smu-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: .82rem;
    color: #1e293b;
}
#manageSocialMedia .smu-platform-badge i {
    font-size: 1rem;
    width: 24px;
    text-align: center;
    color: #475569;
}

/* URL link */
#manageSocialMedia .smu-url-link {
    font-size: .82rem;
    color: #3b82f6;
    text-decoration: none;
    word-break: break-all;
}
#manageSocialMedia .smu-url-link:hover { text-decoration: underline; }

/* Delete button */
#manageSocialMedia .smu-delete-btn {
    width: 30px; height: 30px;
    border-radius: 7px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #94a3b8;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .2s;
}
#manageSocialMedia .smu-delete-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Empty row */
#manageSocialMedia .smu-empty-row {
    text-align: center;
    padding: 24px !important;
    color: #94a3b8;
    font-size: .85rem;
}
/* ── end manageSocialMedia ──────────────────────────────── */

/* =========================================================
   EDIT VENDOR MODAL — body / form.blade.php enhancements
   ========================================================= */

/* Scrollable body with light bg */
#edit_vendor_modal .vm-body {
    background: #f1f5f9 !important;
    padding: 20px !important;
    max-height: 70vh;
    overflow-y: auto;
}

/* Generic section card — wraps each visual group */
#editVendorBox .evm-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

/* Section heading inside card */
#editVendorBox .evm-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 14px !important;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #f1f5f9;
}
#editVendorBox .evm-card-title svg { color: #3b82f6; flex-shrink: 0; }

/* Section headings already in HTML (row.p-2 h5) — keep consistent */
#editVendorBox .row.p-2 {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    margin: 0 0 14px !important;
    padding: 16px !important;
}
#editVendorBox .row.p-2 h5 {
    font-size: .72rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
}

/* Upload area row — subtle tinted card */
#editVendorBox .evm-upload-row {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 14px !important;
}

/* Dropify override — cleaner look */
#editVendorBox .dropify-wrapper {
    border-radius: 10px !important;
    border: 1.5px dashed #cbd5e1 !important;
    background: #f8fafc !important;
    height: 100px !important;
}
#editVendorBox .dropify-wrapper:hover {
    background: #f0f7ff !important;
    border-color: #93c5fd !important;
}
#editVendorBox .dropify-wrapper .dropify-message p {
    font-size: .75rem !important;
    color: #94a3b8 !important;
}
#editVendorBox .dropify-wrapper .dropify-message .dropify-font-upload::before {
    font-size: 1.2rem !important;
    color: #94a3b8 !important;
}

/* Form labels — scoped tighter */
#editVendorBox label,
#editVendorBox .control-label {
    font-size: .72rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: capitalize !important;
    letter-spacing: .04em !important;
    margin-bottom: 5px !important;
}
#editVendorBox .logo-size {
    font-size: .68rem !important;
    color: #94a3b8 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
}

/* Form controls — clean */
#editVendorBox .form-control {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: .875rem !important;
    color: #1e293b !important;
    height: 38px !important;
    padding: 6px 12px;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s !important;
}
#editVendorBox .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1) !important;
    outline: none;
}
#editVendorBox textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
    resize: vertical;
}

/* Map button */
#editVendorBox .showMap {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 0 14px !important;
    height: 38px;
    display: flex; align-items: center;
}

/* Switchery toggle rows — pill-style list */
#editVendorBox .form-group.d-flex.justify-content-between {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 9px !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    align-items: center !important;
}
/* Override the generic label style for toggle labels */
#editVendorBox .form-group.d-flex.justify-content-between > label {
    font-size: .84rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}
/* Hide the raw checkbox — switchery renders its own UI */
#editVendorBox .form-group.d-flex.justify-content-between input[type="checkbox"].form-control {
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    opacity: 0;
    position: absolute;
}

/* Description column header label alignment */
#editVendorBox .form-group#descInput .control-label {
    display: block;
}

/* Invalid feedback */
#editVendorBox .invalid-feedback strong,
#editVendorBox span[id$="_error"] strong {
    font-size: .72rem;
    color: #dc2626;
}

/* Scrollbar styling */
#edit_vendor_modal .vm-body::-webkit-scrollbar { width: 5px; }
#edit_vendor_modal .vm-body::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
#edit_vendor_modal .vm-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
#edit_vendor_modal .vm-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── end editVendorModal enhancements ───────────────────── */

/* ── vm-* modal shared helpers ──────────────────────────── */
/* Error paragraph inside footer */
.vm-error-msg {
    font-size: .78rem;
    color: #dc2626;
    font-weight: 500;
}
/* Download sample CSV link (Import Pincode modal) */
.vm-download-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
}
.vm-download-link:hover { text-decoration: underline; color: #2563eb; }
/* ── end vm helpers ─────────────────────────────────────── */