/* Design system stylesheet: theme base, shared ec-* components and page shells in one file.
   Rules that never applied anywhere have been removed. */
/* 
   
   ==== Theme base ====
   
    */@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url(../scss/icons/font-awesome/css/font-awesome.min.css);
@import url(../scss/icons/simple-line-icons/css/simple-line-icons.css);
@import url(../scss/icons/weather-icons/css/weather-icons.min.css);
@import url(../scss/icons/linea-icons/linea.css);
@import url(../scss/icons/themify-icons/themify-icons.css);
@import url(../scss/icons/flag-icon-css/flag-icon.min.css);
@import url(../scss/icons/material-design-iconic-font/css/materialdesignicons.min.css);
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
@import url(../css/spinners.css);
@import url(../css/animate.css);
* {
    outline: none;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-weight: 500;
}

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

a:hover,
a:focus {
    text-decoration: none;
    color: #f53d05;
}

a.link {
    color: #455a64;
}

.img-rounded {
    border-radius: 4px;
}

html body .mdi:before,
html body .mdi-set {
    line-height: initial;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #455a64;
    font-family: "Urbanist", sans-serif;
}

h1 {
    line-height: 40px;
    font-size: 36px;
    font-weight: 600 !important;
}

h2 {
    line-height: 36px;
    font-weight: 600 !important;
}

h3 {
    line-height: 30px;
    font-size: 21px;
    font-weight: 600 !important;
}

h4 {
    line-height: 22px;
    font-size: 18px;
    font-weight: 600 !important;
}

h5 {
    line-height: 18px;
    font-size: 16px;
    font-weight: 600 !important;
}

h6 {
    line-height: 16px;
    font-size: 14px;
    font-weight: 600 !important;
}

.box {
    border-radius: 4px;
}

html body .dl {
    display: inline-block;
}

html body .db {
    display: block;
}
html body blockquote {
    border: 1px solid rgba(120, 130, 140, 0.13);
    padding: 15px;
}

.clear {
    clear: both;
}

ol li {
    margin: 5px 0;
}

html body .p-10 {
    padding: 10px;
}

html body .m-t-10 {
    margin-top: 10px;
}

html body .m-b-0 {
    margin-bottom: 0px;
}
html body .vt {
    vertical-align: top;
}

html body .vm {
    vertical-align: middle;
}

html body .vb {
    vertical-align: bottom;
}
html body .font-bold {
    font-weight: 700;
}

html body .b-l {
    border-left: 1px solid rgba(120, 130, 140, 0.13);
}

.hide {
    display: none;
}

.radius {
    border-radius: 4px;
}
.text-white {
    color: #ffffff !important;
}

.text-danger {
    color: #ef5350 !important;
}

.text-muted {
    color: #99abb4 !important;
}

.text-success {
    color: #26dad2 !important;
}

.text-info {
    color: #ff683a !important;
}

.bg-info {
    background-color: #ff683a !important;
}
.round {
    line-height: 48px;
    color: #ffffff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
}

.round img {
    border-radius: 100%;
}
.label {
    line-height: 13px;
    border-radius: 4px;
}

.label-info {
    background-color: #ff683a;
}
.table thead th [type="checkbox"] + label, .table th [type="checkbox"] + label {
    margin-bottom: 0;
}
.payment_images img{max-width: 100px;}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background-color: #f2f4f8;
}

.pager li > a,
.pager li > span {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #263238;
}

.cell {
    display: table-cell;
    vertical-align: middle;
}

.table td,
.table th {
    border-color: #f3f1f1;
}

.table thead th,
.table th {
    font-weight: 500;
}

.nowrap {
    white-space: nowrap;
}

.table-responsive {
    display: block;
    width: 99%;
    overflow-x: auto;
border-radius: 0;
padding-bottom: 15px;
}
.table-responsive:-webkit-scrollbar {
    width: 6px;
    border-radius: 13px;
}

.table-responsive:-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive:-webkit-scrollbar-thumb {
    background-color: #FF7E56;
    border-radius: 6px;
    border: 3px solid transparent;
}

.table-responsive::-webkit-scrollbar, .table-responsive::-webkit-scrollbar-thumb {
    height: 5px;
    border-radius: 13px;
    background-clip: padding-box;
    border: 6px solid transparent;
    width: 5px;
}

.table-responsive::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 0 10px;
    background: #FF7E56;
}

.table--responsive.m-t-10 .sorting_1 {
    display: flex;
    align-items: center;
    gap: 15px;
}
.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

.waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    -ms-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    -moz-transition-property: -moz-transform, opacity;
    -webkit-transition-property: opacity, -webkit-transform;
    -o-transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45);
}

.waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7);
}

.waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7);
}

.waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7);
}

.waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7);
}

.waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7);
}

.waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7);
}

html body .waves-notransition {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

.waves-circle {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    text-align: center;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 50%;
    -webkit-mask-image: none;
}

.waves-input-wrapper {
    border-radius: 0.2em;
    vertical-align: bottom;
}

.waves-input-wrapper .waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.waves-block {
    display: block;
}
.badge {
    font-weight: 500;
}
.table tr th.delete-all, .table tr td.delete-all {
    width: 60px;
}
.table tr td .verified-icon{
    color: green;
    padding-left: 5px;
    font-size: 15px;
}
.badge-primary {
    background-color: #ff683a;
}
.btn {
    padding: 7px 12px;
    cursor: pointer;
}

.btn-group label {
    color: #ffffff !important;
    margin-bottom: 0px;
}

.btn-group label.btn-secondary {
    color: #464646 !important;
}

.btn-lg {
    padding: .75rem 0.8rem;
    font-size: 1.0rem;
}

.btn-sm {
    padding: .25rem .9rem;
    font-size: 14px;
}

.btn-rounded.btn-lg {
    padding: .75rem 1.5rem;
}

.btn-rounded.btn-sm {
    padding: .25rem .5rem;
    font-size: 12px;
}

.btn-rounded.btn-xs {
    padding: .25rem .5rem;
    font-size: 10px;
}

.btn-rounded.btn-md {
    padding: 12px 35px;
    font-size: 16px;
}

.btn-secondary,
.btn-secondary.disabled {
    -webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
    box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.btn-secondary:hover,
.btn-secondary.disabled:hover {
    -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
    box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
}

.btn-secondary.active, .btn-secondary:active, .btn-secondary:focus,
.btn-secondary.disabled.active,
.btn-secondary.disabled:active,
.btn-secondary.disabled:focus {
    -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
    box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);
}

.btn-primary,
.btn-primary.disabled {
    border: 1px solid #ff683a;
    -webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
    box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.btn-primary:hover,
.btn-primary.disabled:hover {
    background: #ff683a;
    -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
    box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
    border: 1px solid #ff683a;
}

.btn-primary.active, .btn-primary:active, .btn-primary:focus,
.btn-primary.disabled.active,
.btn-primary.disabled:active,
.btn-primary.disabled:focus {
    background: #6352ce;
    -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
    box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
}

.btn-success,
.btn-success.disabled {
    -webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.btn-success:hover,
.btn-success.disabled:hover {
    background: #26dad2;
    -webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
    box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
    border: 1px solid #26dad2;
}

.btn-success.active, .btn-success:active, .btn-success:focus,
.btn-success.disabled.active,
.btn-success.disabled:active,
.btn-success.disabled:focus {
    background: #1eacbe;
    -webkit-box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
    box-shadow: 0 14px 26px -12px rgba(40, 190, 189, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(40, 190, 189, 0.2);
}

.btn-info,
.btn-info.disabled {
    -webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.btn-info:hover,
.btn-info.disabled:hover {
    background: #117a8b;
    border: 1px solid #117a8b;
    -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
    box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-info.active, .btn-info:active, .btn-info:focus,
.btn-info.disabled.active,
.btn-info.disabled:active,
.btn-info.disabled:focus {
    background: #117a8b;
    -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
    box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);
}

.btn-warning,
.btn-warning.disabled {
    -webkit-box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
    box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);
    border: 1px solid #ff683a;
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.btn-warning:hover,
.btn-warning.disabled:hover {
    background: #ff683a;
    color: #ffffff;
    -webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
    box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
    border: 1px solid #ff683a;
}

.btn-warning.active, .btn-warning:active, .btn-warning:focus,
.btn-warning.disabled.active,
.btn-warning.disabled:active,
.btn-warning.disabled:focus {
    background: #e9ab2e;
    color: #ffffff;
    -webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
    box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);
}

.btn-danger,
.btn-danger.disabled {
    background: #ef5350;
    border: 1px solid #ef5350;
    -webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
    box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.btn-danger:hover,
.btn-danger.disabled:hover {
    background: #ef5350;
    -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
    border: 1px solid #ef5350;
}

.btn-danger.active, .btn-danger:active, .btn-danger:focus,
.btn-danger.disabled.active,
.btn-danger.disabled:active,
.btn-danger.disabled:focus {
    background: #e6294b;
    -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);
}

.btn-outline-primary {
    background-color: #ffffff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
    box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);
    -webkit-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.focus {
    background: #ff683a;
    -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
    box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
    color: #ffffff;
    border-color: #ff683a;
}

.btn-outline-primary.active, .btn-outline-primary:active, .btn-outline-primary:focus {
    -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
    box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);
    background: #6352ce;
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary.focus:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus {
    background-color: #6352ce;
    border: 1px solid #6352ce;
}

.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success.focus:active,
.btn-success:active:focus,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover,
.btn-success.focus,
.btn-success:focus {
    background-color: #1eacbe;
    border: 1px solid #1eacbe;
}

.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info.focus:active,
.btn-info:active:focus,
.btn-info:active:hover,
.open > .dropdown-toggle.btn-info.focus,
.open > .dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info:hover,
.btn-info.focus,
.btn-info:focus {
    background-color: #028ee1;
    border: 1px solid #028ee1;
}

.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning.focus:active,
.btn-warning:active:focus,
.btn-warning:active:hover,
.open > .dropdown-toggle.btn-warning.focus,
.open > .dropdown-toggle.btn-warning:focus,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning.focus,
.btn-warning:focus {
    background-color: #e9ab2e;
    border: 1px solid #e9ab2e;
}

.btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger.active:hover,
.btn-danger.focus:active,
.btn-danger:active:focus,
.btn-danger:active:hover,
.open > .dropdown-toggle.btn-danger.focus,
.open > .dropdown-toggle.btn-danger:focus,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger.focus,
.btn-danger:focus {
    background-color: #e6294b;
    border: 1px solid #e6294b;
}
.notify {
    position: relative;
    top: -22px;
    right: -9px;
}

.notify .point {
    width: 6px;
    height: 6px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #ef5350;
    position: absolute;
    right: 6px;
    top: -10px;
}
.mega-dropdown {
    position: static;
    width: 100%;
}

.mega-dropdown .dropdown-menu {
    width: 100%;
    padding: 30px;
    margin-top: 0px;
}

.mega-dropdown ul {
    padding: 0px;
}

.mega-dropdown ul li {
    list-style: none;
}

.mega-dropdown .carousel-item .container {
    padding: 0px;
}

.mega-dropdown .nav-accordion .card {
    margin-bottom: 1px;
}

.mega-dropdown .nav-accordion .card-header {
    background: #ffffff;
}

.mega-dropdown .nav-accordion .card-header h5 {
    margin: 0px;
}

.mega-dropdown .nav-accordion .card-header h5 a {
    text-decoration: none;
    color: #464646;
}
.dropdown-item {
    padding: 8px 1rem;
    color: #464646;
}
textarea {
    resize: none;
}
.form-control {
    color: #464646;
    min-height: 38px;
    display: initial;
}

.form-control:disabled,
.form-control[readonly] {
    opacity: 0.7;
}

form label {
    font-weight: 400;
}

.form-group {
    margin-bottom: 25px;
}
.card-no-border .card {
    border: 0px;
    border-radius: 4px;
    -webkit-box-shadow:0px 5px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

.card-no-border .card:hover {
  -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
  transition: 0.5s;
}

.card-fullscreen {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: auto;
}
.progress {
    height: auto;
}
#main-wrapper {
    width: auto;
}

.page-wrapper {
    background: #fff;
    padding-bottom: 20px;
    min-height: 850px !important;
}

.container-fluid {
    padding: 0 20px 20px 20px;
}

html {
    background: #fff;
}
.topbar {
    position: relative;
    z-index: 50;
    top: 0 !important;
    bottom: auto !important;
}

.topbar .top-navbar {
    min-height: 50px;
    padding: 0px 0px 0 0;

}

.topbar .top-navbar .dropdown-toggle::after {
    display: none;
}

.topbar .top-navbar .navbar-header {
    line-height: 45px;
    text-align: center;
    height: 60px;
    padding: 7px 0;
}

.topbar .top-navbar .navbar-header .navbar-brand {
    margin-right: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.topbar .top-navbar .navbar-header .navbar-brand
.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
    display: none;
}

.topbar .top-navbar .navbar-header .navbar-brand b {
    line-height: 47px;
    display: inline-block;
}

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
    font-size: 15px;
    line-height: 40px;
}

.topbar .top-navbar .navbar-nav > .nav-item.show {
    background: rgba(0, 0, 0, 0.05);
}
.topbar .nav-item-user p{color: #000; font-size: 12px}
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link.sidebartoggler{
  display: flex;
  align-items: center;
  justify-content: center;}
.mini-sidebar .topbar .top-navbar .navbar-nav > .nav-item > .nav-link.sidebartoggler{transform: rotate(180deg);}  
.topbar .dropdown-menu {
    -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}


.topbar .dropdown-menu .dropdown-item {
    padding: 7px 1.5rem;
}

.topbar ul.dropdown-user {
    padding: 0px;
    min-width: 270px;
}

.topbar ul.dropdown-user li {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.topbar ul.dropdown-user li.divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: rgba(120, 130, 140, 0.13);
}

.topbar ul.dropdown-user li .dw-user-box {
    padding: 10px 15px;
}

.topbar ul.dropdown-user li .dw-user-box .u-img {
    width: 50px;
    display: inline-block;
    vertical-align: top;
}

.topbar ul.dropdown-user li .dw-user-box .u-img img {
    width: 100%;
    border-radius: 5px;
}

.topbar ul.dropdown-user li .dw-user-box .u-text {
    display: inline-block;
    padding-left: 10px;
}

.topbar ul.dropdown-user li .dw-user-box .u-text h4 {
    margin: 0px;
    font-size: 15px;
}

.topbar ul.dropdown-user li .dw-user-box .u-text p {
    margin-bottom: 2px;
    font-size: 12px;
}

.topbar ul.dropdown-user li .dw-user-box .u-text .btn {
    color: #ffffff;
    padding: 5px 10px;
    display: inline-block;
}

.topbar ul.dropdown-user li .dw-user-box .u-text .btn:hover {
    background: #e6294b;
}

.topbar ul.dropdown-user li a {
    display: block;
}

.topbar ul.dropdown-user li a:hover {
    background: #f2f4f8;
    color: #ff683a;
    text-decoration: none;
}

.search-box .app-search {
    position: absolute;
    margin: 0px;
    z-index: 110;
    width: 100%;
    top: -1px;
    -webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0px;
}

.search-box .app-search input {
    width: 100.5%;
    padding: 20px 40px 20px 20px;
    border-radius: 0px;
    font-size: 17px;
    -webkit-transition: 0.5s ease-in;
    -o-transition: 0.5s ease-in;
    transition: 0.5s ease-in;
}

.search-box .app-search input:focus {
    border-color: #ffffff;
}

.search-box .app-search .srh-btn {
    position: absolute;
    top: 23px;
    cursor: pointer;
    background: #ffffff;
    width: 15px;
    height: 15px;
    right: 20px;
    font-size: 14px;
}

.mini-sidebar .top-navbar .navbar-header {
    width: 60px;
    text-align: center;
}
.page-titles {
    position: relative;
    z-index: 10;
    -webkit-box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
}

.page-titles .breadcrumb li {
    margin-top: 0px;
    margin-bottom: 0px;
}

.page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\e649";
    font-family: themify;
    color: #a6b7bf;
    font-size: 11px;
}

.page-titles h3.text-white {
    color: #fff !important;
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.right-side-toggle {
    position: relative;
}

.right-side-toggle i {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -o-transition-property: transform;
    transition-property: transform, -webkit-transform;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: absolute;
    top: 18px;
    left: 18px;
}

.right-sidebar {
    position: fixed;
    right: -240px;
    width: 240px;
    display: none;
    z-index: 1100;
    background: #ffffff;
    top: 0px;
    padding-bottom: 20px;
    height: 100%;
    -webkit-box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);
    box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.shw-rside {
    right: 0px;
    width: 240px;
    display: block;
}
.footer {
    right: 0;
}
.card {
    margin-bottom: 30px;
}

.btn.active .text {
    display: none;
}

.collapsing {
    -webkit-transition: height .08s ease;
    -o-transition: height .08s ease;
    transition: height .08s ease;
}
html body .accordion .card {
    margin-bottom: 0px;
}

html body .jqstooltip,
html body .flotTip {
    width: auto !important;
    height: auto !important;
    background: #263238;
    color: #ffffff;
    padding: 5px 10px;
}

body .jqstooltip {
    border-color: transparent;
    border-radius: 60px;
}
.chart {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.chart canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.chart > span > img {
    left: 0;
    margin-top: -2px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    width: 60%;
    height: 60%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;
}

.percent {
    display: inline-block;
    line-height: 100px;
    z-index: 2;
    font-weight: 600;
    font-size: 18px;
    color: #263238;
}

.percent:after {
    content: '%';
    margin-left: 0.1em;
    font-size: .8em;
}
.orders-tracking-item-details .variant-info ul li {
    text-align: left;
    display: inline-block;
}
.orders-tracking-item-details .variant-info ul li span {
    text-transform: capitalize;
}

.browser td {
    vertical-align: middle;
    padding-left: 0px;
}
.form-material .form-group {
    overflow: hidden;
}

.form-material .form-control {
    padding: 0;
    -webkit-transition: background 0s ease-out 0s;
    transition: background 0s ease-out 0s;
}

.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus {
    background-image: linear-gradient(#ff683a, #ff683a), linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));
    border: 0 none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    float: none;
}

.form-material .form-control.focus,
.form-material .form-control:focus {
    background-size: 100% 2px, 100% 1px;
    outline: 0 none;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.floating-labels .form-group {
    position: relative;
}

.floating-labels .form-control {
    padding: 10px 10px 10px 0;
    display: block;
    border: none;
    font-family: "Poppins", sans-serif;
    border-radius: 0px;
    border-bottom: 1px solid rgba(120, 130, 140, 0.13);
}

.floating-labels .form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.floating-labels select.form-control > option {
    font-size: 14px;
}

.floating-labels .has-error .form-control {
    border-bottom: 1px solid #ef5350;
}

.floating-labels .has-warning .form-control {
    border-bottom: 1px solid #ff683a;
}

.floating-labels .has-success .form-control {
    border-bottom: 1px solid #26dad2;
}

.floating-labels .form-control:focus {
    outline: none;
    border: none;
}

.floating-labels label {
    color: #464646;
    position: absolute;
    cursor: auto;
    top: 5px;
    -o-transition: 0.2s ease all;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.floating-labels .focused label {
    top: -20px;
    font-size: 12px;
    color: #263238;
}

.floating-labels .bar {
    position: relative;
    display: block;
}

.floating-labels .bar:before,
.floating-labels .bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #ff683a;
    -o-transition: 0.2s ease all;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.floating-labels .bar:before {
    left: 50%;
}

.floating-labels .bar:after {
    right: 50%;
}

.floating-labels .form-control:focus ~ .bar:before,
.floating-labels .form-control:focus ~ .bar:after {
    width: 50%;
}

.floating-labels .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

.floating-labels .input-sm ~ label,
.floating-labels .input-sm {
    font-size: 16px;
}

.has-warning .bar:before,
.has-warning .bar:after {
    background: #ff683a;
}

.has-success .bar:before,
.has-success .bar:after {
    background: #26dad2;
}

.has-error .bar:before,
.has-error .bar:after {
    background: #ef5350;
}

.has-warning .form-control:focus ~ label,
.has-warning .form-control:valid ~ label {
    color: #ff683a;
}

.has-success .form-control:focus ~ label,
.has-success .form-control:valid ~ label {
    color: #26dad2;
}

.has-error .form-control:focus ~ label,
.has-error .form-control:valid ~ label {
    color: #ef5350;
}

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border: 1px solid #ef5350;
}

.form-group.validate input,
.form-group.validate select,
.form-group.validate textarea {
    border: 1px solid #26dad2;
}
.dropzone {
    border: 1px dashed #b1b8bb;
}

.dropzone .dz-message {
    padding: 5% 0;
    margin: 0px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #ff683a;
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
    background: #ff683a;
    color: #ffffff;
}

.datepicker td,
.datepicker th {
    padding: 5px 10px;
}
.note-popover,
.note-icon-caret {
    display: none;
}

.note-editor.note-frame .panel-heading {
    padding: 6px 10px 10px;
    border-bottom: 1px solid rgba(120, 130, 140, 0.13);
}

.label {
    display: inline-block;
}
.table thead th,
.table th {
    border-bottom: 0px;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: none;
}

.table-hover tbody tr:hover{background-color: rgba(0, 0, 0, 0.01);}
.dataTables_wrapper {
    padding-top: 10px;
}

.dt-buttons {
    display: inline-block;
    padding-top: 5px;
}

.dt-buttons .dt-button {
    margin-right: 3px;
}

.dt-buttons .dt-button:hover {
    background: #2f3d4a;
}

.dataTables_info,
.dataTables_length {
    display: inline-block;
}

.dataTables_length select {
    -webkit-transition: background 0s ease-out;
    transition: background 0s ease-out;
}

.dataTables_length select:focus {
    outline: none;
    background-image: linear-gradient(#ff683a, #ff683a), linear-gradient(#b1b8bb, #b1b8bb);
    background-size: 100% 2px, 100% 1px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.dataTables_filter {
    float: right;
    margin-top: 10px;
}

.dataTables_filter input {
    border: 0;
    background-image: linear-gradient(#ff683a, #ff683a), linear-gradient(#b1b8bb, #b1b8bb);
    background-size: 0 2px, 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom, center calc(100% - 1px);
    background-color: transparent;
    -webkit-transition: background 0s ease-out;
    -o-transition: background 0s ease-out;
    transition: background 0s ease-out;
    float: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    margin-left: 10px;
}

.dataTables_filter input:focus {
    outline: none;
    background-image: linear-gradient(#ff683a, #ff683a), linear-gradient(#b1b8bb, #b1b8bb);
    background-size: 100% 2px, 100% 1px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

table.dataTable thead .sorting:after {
    margin-left: 10px;
    font-family: fontawesome !important;
    cursor: pointer;
    color: rgba(50, 50, 50, 0.5);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    -webkit-box-sizing: border-box;
    display: inline-block;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ffffff !important;
    border: 1px solid #ff683a;
    background-color: #ff683a;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #464646;
    border: 1px solid #ddd;
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white;
    border: 1px solid #ff683a;
    background-color: #ff683a;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    outline: none;
    background-color: #464646;
}
.dt-bootstrap {
    display: block;
}
.list-group a.list-group-item:hover {
    background: #f2f4f8;
}

.list-group-item.active,
.list-group .list-group-item.active:hover {
    background: #ff683a;
    border-color: #ff683a;
}

.list-group-item.disabled {
    color: #99abb4;
    background: #f2f4f8;
}

.media {
    border: 1px solid rgba(120, 130, 140, 0.13);
    margin-bottom: 10px;
    padding: 15px;
}

.res_password{
    height: 33px!important;
  
}

.tooltip-item {
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    padding: 0 10px;
}

.tooltip-item::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 20px;
    bottom: 100%;
    left: 50%;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.tooltip-content {
    position: absolute;
    z-index: 9999;
    width: 360px;
    left: 50%;
    margin: 0 0 20px -180px;
    bottom: 100%;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    -webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    background: #2b2b2b;
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

.tooltip-content img {
    position: relative;
    height: 140px;
    display: block;
    float: left;
    margin-right: 1em;
}

.tooltip-effect-5 .tooltip-content {
    width: 180px;
    margin-left: -90px;
    -webkit-transform-origin: 50% calc(106%);
    -ms-transform-origin: 50% calc(106%);
    transform-origin: 50% calc(106%);
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    -o-transition: opacity 0.2s, transform 0.2s;
    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
    -webkit-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
    -o-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
    transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
}

.tooltip-effect-5 .tooltip-text {
    padding: 1.4em;
}

.tooltip-content::after {
    content: '';
    top: 100%;
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-top-color: #2a3035;
    border-width: 10px;
    margin-left: -10px;
}

.tooltip-text {
    font-size: 14px;
    line-height: 24px;
    display: block;
    padding: 1.31em 1.21em 1.21em 0;
    color: #ffffff;
}

.tooltip-content2 {
    position: absolute;
    z-index: 9999;
    width: 80px;
    height: 80px;
    padding-top: 25px;
    left: 50%;
    margin-left: -40px;
    bottom: 100%;
    border-radius: 50%;
    text-align: center;
    background: #ff683a;
    color: #ffffff;
    opacity: 0;
    margin-bottom: 20px;
    cursor: default;
    pointer-events: none;
}

.tooltip-content2 i {
    opacity: 0;
}

.tooltip-effect-6 .tooltip-content2 {
    -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
    transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-6 .tooltip-content2 i {
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-6:hover .tooltip-content2 i {
    -webkit-transform: rotate3d(1, 1, 1, 0);
    transform: rotate3d(1, 1, 1, 0);
}

.tooltip-content2::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin: -7px 0 0 -15px;
    width: 30px;
    height: 20px;
    background: url(../../assets/images/tooltip/tooltip1.svg) no-repeat center center;
    background-size: 100%;
}

.tooltip-content3 {
    position: absolute;
    background: url(../../assets/images/tooltip/shape1.svg) no-repeat center bottom;
    background-size: 100% 100%;
    z-index: 9999;
    width: 200px;
    bottom: 100%;
    left: 50%;
    margin-left: -100px;
    padding: 50px 30px;
    text-align: center;
    color: #ffffff;
    opacity: 0;
    cursor: default;
    font-size: 14;
    line-height: 27px;
    pointer-events: none;
    -webkit-transform: scale3d(0.1, 0.2, 1);
    transform: scale3d(0.1, 0.2, 1);
    -webkit-transform-origin: 50% 120%;
    -ms-transform-origin: 50% 120%;
    transform-origin: 50% 120%;
    -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
    -o-transition: opacity 0.4s, transform 0.4s;
    transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
    -webkit-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
    -o-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
    transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
}

.tooltip-content3::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 50%;
    margin-left: -8px;
    top: 100%;
    background: #00aeef;
    -webkit-transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg);
    transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg);
}

.tooltip-item2 {
    color: #00aeef;
    cursor: pointer;
    z-index: 100;
    position: relative;
    display: inline-block;
    font-weight: 500;
    -webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;
    -o-transition: background-color 0.3s, color 0.3s, transform 0.3s;
    transition: background-color 0.3s, color 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-content4 {
    position: absolute;
    z-index: 99;
    width: 360px;
    left: 50%;
    margin-left: -180px;
    bottom: -5px;
    text-align: left;
    background: #00aeef;
    opacity: 0;
    font-size: 14px;
    line-height: 27px;
    padding: 1.5em;
    color: #ffffff;
    border-bottom: 55px solid #2b2b2b;
    cursor: default;
    pointer-events: none;
    border-radius: 5px;
    -webkit-transform: translate3d(0, -0.5em, 0);
    transform: translate3d(0, -0.5em, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-content4 a {
    color: #2b2b2b;
}

.tooltip-text2 {
    opacity: 0;
    -webkit-transform: translate3d(0, 1.5em, 0);
    transform: translate3d(0, 1.5em, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-content5 {
    position: absolute;
    z-index: 9999;
    width: 300px;
    left: 50%;
    bottom: 100%;
    font-size: 20px;
    line-height: 1.4;
    text-align: center;
    font-weight: 400;
    color: #ffffff;
    background: transparent;
    opacity: 0;
    margin: 0 0 20px -150px;
    cursor: default;
    pointer-events: none;
    -webkit-transition: opacity 0.3s 0.3s;
    -o-transition: opacity 0.3s 0.3s;
    transition: opacity 0.3s 0.3s;
}

.tooltip-content5 span {
    display: block;
}

.tooltip-text3 {
    border-bottom: 10px solid #ff683a;
    overflow: hidden;
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transition: -webkit-transform 0.3s 0.3s;
    -o-transition: transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
}

.tooltip-inner2 {
    background: #2b2b2b;
    padding: 40px;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-content5::after {
    content: '';
    bottom: -20px;
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-top-color: #ff683a;
    border-width: 10px;
    margin-left: -10px;
}

.tooltip-effect-1 .tooltip-content {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
    color: #ffffff;
}

.tooltip-effect-2 .tooltip-content {
    -webkit-transform-origin: 50% calc(110%);
    -ms-transform-origin: 50% calc(110%);
    transform-origin: 50% calc(110%);
    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
    transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    -o-transition: opacity 0.2s, transform 0.2s;
    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
}

.tooltip-effect-3 .tooltip-content {
    -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);
    transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-4 .tooltip-content {
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale3d(0.7, 0.3, 1);
    transform: scale3d(0.7, 0.3, 1);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    -o-transition: opacity 0.2s, transform 0.2s;
    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
}

.tooltip.tooltip-effect-2:hover .tooltip-content {
    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
}

.tooltip-effect-7 .tooltip-content2 {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-7 .tooltip-content2 i {
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-8 .tooltip-content2 {
    -webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
    transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-8 .tooltip-content2 i {
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-9 .tooltip-content2 {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.tooltip-effect-9 .tooltip-content2 i {
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

#recoverform {
    display: none;
}

.slimScrollBar {
    z-index: 10 !important;
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
    display: block;
}
.left-sidebar {
    width: 265px;
    -webkit-box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
}
.sidebar-footer {
    position: fixed;
    z-index: 10;
    bottom: 0px;
    left: 0px;
    -webkit-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    width: 240px;
    background: #fff;
    border-top: 1px solid rgba(120, 130, 140, 0.13);
}

.sidebar-footer a {
    padding: 15px;
    width: 33.333337%;
    float: left;
    text-align: center;
    font-size: 18px;
}
.scroll-sidebar {
    padding-top: 0px;
}

.collapse.in {
    display: block;
}
.sidebar-search input{
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
.mini-sidebar .sidebar-search{width: 60px;}
.mini-sidebar .sidebar-search:hover{width: 250px;}

.sidebar-nav ul {
    transition: all ease 0.5s;
}

.sidebar-nav ul li a {
    display: block;
}

.sidebar-nav ul li a.active i, .sidebar-nav ul li a:hover i {
    color: #FF683A;
}

.sidebar-nav ul li ul li a {
    position: relative;
}
.sidebar-nav ul li ul li.active a,.sidebar-nav ul li ul li a:hover{border-color: #ff6839;}
.sidebar-nav ul li ul li a::before {
  left: 40px;
  top: 14px;
  margin: 0;
}

.sidebar-nav ul li ul li a::after {
    content: "";
    width: 4px;
    height: 4px;
    border: 1px solid;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 50px;
    position: absolute;
    left: 25px;
    top: 17px;
}

.sidebar-nav ul li ul ul {
    padding-left: 15px;
}

.sidebar-nav ul li.nav-small-cap {
    font-size: 12px;
    margin-bottom: 0px;
    padding: 14px 14px 14px 20px;
    color: #fff;
    font-weight: 500;
}

.sidebar-nav ul li.nav-devider {
    height: 1px;
    background: #fff;
    display: block;
    margin: 0px 0;
}

.sidebar-nav > ul > li > a i {
    vertical-align: middle;
}

.mini-sidebar .sidebar-nav #sidebarnav > li:hover a i {
    color: #ff683a;
}

.sidebar-nav > ul > li > a .label {
    float: right;
    margin-top: 6px;
}

.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {
    color: #26c6da;
}

.sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span {
  line-height: 1;
  text-align: left;
  border-radius: 0px 0px 0px 0px;
}

.sidebar-nav > ul > li.nav-separater hr {
    border-top: 1px dashed rgba(255, 255, 255, .5);
    margin: 9px 0;
}

.mini-sidebar .sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-nav .has-arrow::after {
    position: absolute;
    content: '';
    border-style: solid;
    -webkit-transform: rotate(135deg) translate(0, -50%);
    transform: rotate(135deg) translate(0, -50%);
    -webkit-transform-origin: top;
    transform-origin: top;
    top: 47%;
    -webkit-transition: all .3s ease-out;
}

.sidebar-nav .active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after,
.sidebar-nav .has-arrow[aria-expanded="true"]::after {
    -webkit-transform: rotate(-135deg) translate(0, -50%);
    top: 45%;
    transform: rotate(-135deg) translate(0, -50%);
}
@media (min-width: 768px) {
    .mini-sidebar .sidebar-nav #sidebarnav li {
        position: relative;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li > ul {
        position: absolute;
        left: 60px;
        top: 45px;
        width: 200px;
        z-index: 1001;
        display: none;
    }

    .mini-sidebar.fix-sidebar .left-sidebar {
        position: absolute;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul {
        height: auto !important;
        overflow: auto;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul,
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul.collapse {
        display: block;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li > a.has-arrow:after {
        display: none;
    }

    .mini-sidebar .scroll-sidebar {
        overflow-x: hidden !important;
    }

    .mini-sidebar .hide-menu,
    .mini-sidebar .nav-small-cap,
    .mini-sidebar .sidebar-footer,
    .mini-sidebar .user-profile .profile-text,
    .mini-sidebar > .label {
        display: none;
    }

    .mini-sidebar .nav-devider {
        width: 60px;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
        width: 260px;
        background: #f2f6f8;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .hide-menu {
        display: inline;
    }

    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .label {
        display: none;
    }
}

@media (max-width: 767px) {

    .mini-sidebar .left-sidebar,
    .mini-sidebar .sidebar-footer {
        left: -265px;
    }

    .mini-sidebar.show-sidebar .left-sidebar,
    .mini-sidebar.show-sidebar .sidebar-footer {
        left: 0px;
    }
    .mini-sidebar .sidebar-search{width: auto;}
}

.list-task .task-done span {
    text-decoration: line-through;
}

.chat-list li {
    list-style: none;
}

.chat-list li.odd .box {
    clear: both;
}

.chat-list li.odd + .odd {
    margin-top: 0px;
}

.chat-list li.reverse {
    text-align: right;
}

.chat-list li.reverse .box:after {
    left: 99%;
    right: auto;
    border-right-color: transparent;
    border-left-color: #f6f6f6;
    border-top-color: #f6f6f6;
}

.message-box ul li .nav-link {
    border-top: 1px solid rgba(120, 130, 140, 0.13);
    padding-top: 15px;
}
.calendar {
    float: left;
    margin-bottom: 0px;
}
.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.has-success .col-form-label, .has-success .custom-control, .has-success .form-check-label, .has-success .form-control-feedback, .has-success .form-control-label {
    color: #26dad2;
}

.has-success .form-control {
    border-color: #26dad2;
}

.has-warning .col-form-label, .has-warning .custom-control, .has-warning .form-check-label, .has-warning .form-control-feedback, .has-warning .form-control-label {
    color: #ff683a;
}

.has-warning .form-control {
    border-color: #ff683a;
}

.has-danger .col-form-label, .has-danger .custom-control, .has-danger .form-check-label, .has-danger .form-control-feedback, .has-danger .form-control-label {
    color: #ef5350;
}

.has-danger .form-control {
    border-color: #ef5350;
}

.input-group-addon [type="radio"]:not(:checked),
.input-group-addon [type="radio"]:checked,
.input-group-addon [type="checkbox"]:not(:checked),
.input-group-addon [type="checkbox"]:checked {
    position: initial;
    opacity: 1;
}

.invisible {
    visibility: hidden !important;
}

@media (max-width: 767px) {
    .hidden-sm-down {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hidden-md-up {
        display: none !important;
    }
}
@media (min-width: 1024px) {
    .page-wrapper {
        padding-left: 265px;
    }

    .footer {
        left: 265px;
    }
}

@media (max-width: 1023px) {
    .page-wrapper {
        margin-left: 60px;
        -webkit-transition: 0.2s ease-in;
        transition: 0.2s ease-in;
    }

    .footer {
        left: 60px;
    }
}
@media (min-width: 768px) {
    .navbar-header {
        width: 265px;
        flex-shrink: 0;
    }
    .page-titles .breadcrumb {
        float: right;
    }

    .mini-sidebar .page-wrapper {
        padding-left: 60px;
    }

    .mini-sidebar .footer {
        left: 60px;
    }

    .flex-wrap {
        flex-wrap: nowrap !important;
        -webkit-flex-wrap: nowrap !important;
    }
}
@media (max-width: 767px) {
    .topbar {
        position: fixed;
        width: 100%; bottom: auto !important;
    }

    .topbar .top-navbar {
        padding-right: 15px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        flex-wrap: nowrap;
        -webkit-align-items: center;
    }

    .topbar .top-navbar .navbar-collapse {
        display: flex;
        width: 100%;
    }

    .topbar .top-navbar .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
    }

    .topbar .top-navbar .navbar-nav > .nav-item.show {
        position: static;
    }

    .topbar .top-navbar .navbar-nav > .nav-item.show .dropdown-menu {
        width: 100%;
        margin-top: 0px;
    }

    .topbar .top-navbar .navbar-nav .dropdown-menu {
        position: absolute;
    }

    .mega-dropdown .dropdown-menu {
        height: 480px;
        overflow: auto;
    }
    .mini-sidebar .page-wrapper {
        margin-left: 0px;
        padding-top: 60px;
    }
    .footer {
        left: 0px;
    }

    .flex-wrap {
        flex-wrap: wrap !important;
        -webkit-flex-wrap: wrap !important;
    }
}
[type="radio"]:not(:checked),
[type="radio"]:checked {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    -webkit-transition: .28s ease;
    -o-transition: .28s ease;
    transition: .28s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[type="radio"] + label:before,
[type="radio"] + label:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 16px;
    height: 16px;
    z-index: 0;
    -webkit-transition: .28s ease;
    transition: .28s ease;
}
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:before,
[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
    border-radius: 50%;
}

[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after {
    border: 1px solid #b1b8bb;
}

[type="radio"]:not(:checked) + label:after {
    z-index: -1;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:before {
    border: 2px solid transparent;
    -webkit-animation: ripple 0.2s linear forwards;
    animation: ripple 0.2s linear forwards;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:before,
[type="radio"].with-gap:checked + label:after {
    border: 2px solid #26a69a;
}

[type="radio"]:checked + label:after,
[type="radio"].with-gap:checked + label:after {
    background-color: #26a69a;
    z-index: 0;
}

[type="radio"]:checked + label:after {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.26);
    -webkit-animation: ripple 0.2s linear forwards;
    animation: ripple 0.2s linear forwards;
}

[type="radio"]:disabled + label {
    color: rgba(0, 0, 0, 0.26);
}

[type="radio"]:disabled:not(:checked) + label:before {
    border-color: rgba(0, 0, 0, 0.26);
}

[type="radio"]:disabled:checked + label:after {
    background-color: rgba(0, 0, 0, 0.26);
    border-color: #BDBDBD;
}
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

[type="checkbox"] + label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    -webkit-user-select: none;
}

[type="checkbox"] + label:before,
[type="checkbox"]:not(.filled-in) + label:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 1px solid #b1b8bb;
    border-radius: 1px;
    margin-top: 2px;
    -webkit-transition: .2s;
    transition: .2s;
}

[type="checkbox"]:not(.filled-in) + label:after {
    border: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="checkbox"]:not(:checked):disabled + label:before {
    border: none;
    background-color: rgba(0, 0, 0, 0.26);
}

[type="checkbox"]:checked + label:before {
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #26a69a;
    border-bottom: 2px solid #26a69a;
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

[type="checkbox"]:checked:disabled + label:before {
    border-right: 2px solid rgba(0, 0, 0, 0.26);
    border-bottom: 2px solid rgba(0, 0, 0, 0.26);
}
[type="checkbox"]:indeterminate + label:before {
    top: -11px;
    left: -12px;
    width: 10px;
    height: 22px;
    border-top: none;
    border-left: none;
    border-right: 2px solid #26a69a;
    border-bottom: none;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

[type="checkbox"]:indeterminate:disabled + label:before {
    border-right: 2px solid rgba(0, 0, 0, 0.26);
    background-color: transparent;
}
.switch,
.switch * {
    -webkit-user-select: none;
}

.switch label {
    cursor: pointer;
}

.switch label input[type=checkbox] {
    opacity: 0;
    width: 0;
    height: 0;
}

.scale-up {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transform: scale(0);
    transform: scale(0);
    display: inline-block;
    -webkit-transform-origin: right 0px;
    transform-origin: right 0px;
}

.show > .scale-up {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: right 0px;
    -ms-transform-origin: right 0px;
    transform-origin: right 0px;
}

.well, pre {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}

.page-titles .justify-content-end:last-child .d-flex {
    margin-right: 10px;
}
@-webkit-keyframes ripple {
    0% {
        -webkit-box-shadow: 0px 0px 0px 1px transparent;
        box-shadow: 0px 0px 0px 1px transparent;
    }
    50% {
        -webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
    }
    100% {
        -webkit-box-shadow: 0px 0px 0px 15px transparent;
        box-shadow: 0px 0px 0px 15px transparent;
    }
}

@keyframes ripple {
    0% {
        -webkit-box-shadow: 0px 0px 0px 1px transparent;
        box-shadow: 0px 0px 0px 1px transparent;
    }
    50% {
        -webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
    }
    100% {
        -webkit-box-shadow: 0px 0px 0px 15px transparent;
        box-shadow: 0px 0px 0px 15px transparent;
    }
}

.table tr th.delete-all [type="checkbox"] + label, .table tr td.delete-all [type="checkbox"] + label{margin-bottom: 0;}
[type="checkbox"] + label {
    padding-left: 26px;
    height: 25px;
    line-height: 21px;
    font-weight: normal;
}

[type="checkbox"]:checked + label:before {
    top: -4px;
    left: -2px;
    width: 11px;
    height: 19px;
}

[type="radio"]:not(:checked) + label {
    padding-left: 26px;
    height: 25px;
    line-height: 25px;
    font-weight: normal;
}

[type="radio"]:checked + label {
    padding-left: 26px;
    height: 25px;
    line-height: 25px;
    font-weight: normal;
}

.switch label {
    font-weight: normal;
    font-size: 13px;
}

.daes-top-sec .card {
    overflow: hidden;
}

.daes-top-sec h3.box {
    font-size: 35px;
}

.daes-top-sec h3.text-info {
    font-weight: 600;
    font-size: 30px;
}

.daes-top-sec h5.text-muted {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000 !important;;
}

.table tr td {
    vertical-align: middle;
  font-size: 15px;
  color: #0C111C;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.table tr td.redirecttopage:hover {
    color: #000;
}
.table.dataTable  tr td > img{margin-right: 15px}

.table thead th, .table th {
    color: #000;
    background: #f8fafd;
    position: relative;
}
.table-bordered.dataTable{border-radius: 10px;
  overflow: hidden;}

.mini-sidebar .topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
    display: none;
}

.mini-sidebar .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
    display: block;
    max-width: 50px;
}

.table tr td > span {
    display: inline-block;
    vertical-align: middle;
}
span.driver_rejected span {
    padding: 3px 10px;
    border-radius: 5px;
}
.refund_success span {
    background: green;
    color: #fff;
    padding: 3px 10px;
    border-radius: 5px;
}
.undefined span {
    background: #ffa500;
    color: #fff;
    padding: 3px 10px;
    border-radius: 5px;
}

.table tr td.in_transit span, .table tr td.order_placed span, .table tr td.order_accepted span, .table tr td.order_shipped span, .table tr td.order_pending span, .table tr td.driver_pending span {
    background: orange;
    color: #fff;
    padding: 3px 10px;
    border-radius: 5px;
}
.vendor_avtive.closed {
    color: red;
    font-weight: 600;
}

.vendor_avtive.open {
    color: green;
    font-weight: 600;
}

.card-body #users-table_filter {
    width: 100%;
    text-align: center;
}

#users-table_filter #selected_search.form-control, #users-table_filter .form-group, #users-table_filter .form-group .form-control, #users-table_filter .form-group button.btn {
    display: inline-block;
    width: auto;
    height: 40px;
}

body.sticky header.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    bottom: auto !important;
}

.sticky .fix-sidebar .left-sidebar {
    padding-top: 60px;
}

.form-control {
    background-color: #f5f5f5;
}

.row.restaurant_payout_create {
    display: table;
}

.page-wrapper > .card-body {
    position: relative;
}

.row.restaurant_payout_create .form-group.row .col-7 > span.restaurant_name {
    font-size: 15px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    font-weight: 500;
    width: 100%;
    display: block;
    color: #464646;
    min-height: 38px;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
}

.row.restaurant_payout_create .form-group.row .col-7 .control-inner {
    position: relative;
}

.row.restaurant_payout_create .form-group.row .col-7 .control-inner > span {
    position: absolute;
    right: 35px;
    top: 8px;
    color: #000;
    font-weight: 500;
    font-size: 14px;
}

.row.restaurant_payout_create .form-group.row .col-7 .form-control {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.row.restaurant_payout_create .form-group.row .col-7 .control-inner > .currentCurrency {
    position: absolute;
    left: 6px;
    top: 6px;
    color: #464646;
    font-weight: 500;
    font-size: 17px;
    max-width: 15px;
}

.row.restaurant_payout_create .form-group.row .col-7 .form-control.referral_amount {
    padding-left: 22px;
}

.restaurant_payout_create .restaurant_payout_create-inner {
    margin: 0 -10px;
}

.form-group.row {
    display: inline-block;
    width: 100%;
    padding: 0 5px;
    margin: 0;
    margin-right: -3px;
    margin-bottom: 25px;
    vertical-align: top;
}

.btm-btn.form-group i.fa {
    margin-right: 10px;
}

.btm-btn.form-group {
    margin-top: 25px;
    margin-bottom: 0;
}
.restaurant_payout_create-inner a.add-wallate{top: 0px;right: 19px; z-index: 1;}
.restaurant_payout_create-inner a.add-wallate:focus{color: #fff !important;}
.restaurant_payout_create-inner fieldset legend {
    display: inline-block;
}

.btm-btn.form-group a.btn.btn-default {
    background: #979797;
    color: #fff;
}

.row.restaurant_payout_create label.control-label {
    color: #000;
    font-weight: 500;
    -webkit-box-flex: 0;
    max-width: 100%;
}
.row.restaurant_payout_create .booking-table label.control-label{padding: 0;}
.btn-warning:hover {
    background-color: #ff683a;
    border-color: #ff683a;
}





.nav.nav-tabs.align-items-end.card-header-tabs {
    justify-content: center;
    background: none;
    border: 0;
}

.payment-top-tab .nav-tabs.card-header-tabs .nav-link {
    border: 1px solid #f3f3f3;
    border-radius: 0;
}

.payment-top-tab .nav-tabs.card-header-tabs .nav-link.active, .payment-top-tab .nav-tabs.card-header-tabs .nav-link:hover {
    border-color: #ff683a;
}

.nav-tabs.card-header-tabs .nav-link span.badge-success {
    background: #ff683a;
    color: #fff;
}

.nav-tabs.card-header-tabs .nav-link.active span.badge-success, .nav-tabs.card-header-tabs .nav-link:hover span.badge-success {
    background: #fff;
    color: #ff683a;
}


.restaurant_payout_create .form-text.text-muted {
    padding-top: 2px;
}


.checkbox {
    position: relative;
    padding-left: 50px;
}

.checkbox input[type=checkbox] {
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #000;
    appearance: none;
    opacity: 1;
    left: 20px;
    width: 20px;
    height: 20px !important;
    display: inline-block;
    vertical-align: middle;
    max-width: inherit;
    min-height: inherit;
    cursor: pointer;
}

.checkbox [type="checkbox"]:checked {
    background: #ff683a;
}

.dataTables_processing {
    font-size: 27px;
    color: #fff;
    font-weight: 700;
    right: -80px;
    bottom: -150px;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.dataTables_processing > span {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
}


ul.rating {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

ul.rating li {
    padding: 0 2px;
}

.rating__item {
    font-size: 15px;
    display: block;
    font-family: FontAwesome;
}

.rating__item::after {
    content: "\f006";
}

.rating[data-rating="5.5"] .rating__item:nth-child(-n+5):after, .rating[data-rating="5"] .rating__item:nth-child(-n+5):after, .rating[data-rating="4.5"] .rating__item:nth-child(-n+4):after, .rating[data-rating="4"] .rating__item:nth-child(-n+4):after, .rating[data-rating="3.5"] .rating__item:nth-child(-n+3):after, .rating[data-rating="3"] .rating__item:nth-child(-n+3):after, .rating[data-rating="2.5"] .rating__item:nth-child(-n+2):after, .rating[data-rating="2"] .rating__item:nth-child(-n+2):after, .rating[data-rating="1.5"] .rating__item:nth-child(-n+1):after, .rating[data-rating="1"] .rating__item:nth-child(-n+1):after, .rating[data-rating="0.5"] .rating__item:nth-child(-n+0):after, .rating[data-rating="0"] .rating__item:nth-child(-n+0):after {
    content: "\f005";
}


.rating[data-rating="1.5"] .rating__item:nth-child(2):after, .rating[data-rating="2.5"] .rating__item:nth-child(3):after, .rating[data-rating="3.5"] .rating__item:nth-child(4):after, .rating[data-rating="4.5"] .rating__item:nth-child(5):after {
    content: "\f123";
}


.reviewhtml ul.rating {
    justify-content: center;
    margin-top: 0px;
    margin-right: 15px;
}

.reviewhtml ul.rating li.rating__item {
    font-size: 20px;
    padding: 0 3px;
}


.menu-tab {
    margin-bottom: 25px;
}

.menu-tab ul li {
    display: inline-block;
}

.menu-tab ul li a {
    display: block;
    margin-bottom: -1px;
}

.pagination > li > a.page-link:hover {
    background-color: #ff683a;
}

.form-group.row.restaurant_image .restaurant_image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}

.error_top {
    padding: 0px;
    max-width: 70%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.error_top p {
    color: red;
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid red;
    padding: 10px 20px;
    font-weight: 400;
}


.success_top {
    padding: 0px;
    max-width: 70%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.success_top p {
    color: green;
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid green;
    padding: 10px 20px;
    font-weight: 400;
}


.form-group.extra-row {
    padding: 0 20px;
    display: table;
    width: 100%;
}

.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary.disabled.active, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
    background: #ff683a;
    border-color: #ff683a;
    box-shadow: 0 0 0 0.2rem #ff683a;
}

.restaurant_image .image-item {
    padding: 5px 10px;
    display: inline-block;
    position: relative;
}

.restaurant_image .image-item img {
    border-radius: 5px;
}

.restaurant_image .image-item span.remove-btn {
    position: absolute;
    top: -3px;
    right: 4px;
    background: #ff683a;
    border-radius: 50px;
    padding: 3px 8px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
}

.uploaded_image {
    margin-top: 15px;
}

.uploaded_image img#uploaded_image {
    border-radius: 5px;
}

.uploaded_image_owner {
    padding-left: 15px;
}

.placeholder_img_thumb, .logo_img_thumb, .favicon_img_thumb {
    padding: 15px 15px;
}


.order_detail {
    padding: 0px;
}

.order_detail h3,.box-header h3 {
    font-size: 16px;
    color: #333;
    margin-bottom: 0px;
    padding-bottom: 0px;
}


.order_edit-genrl .form-group.row {
width: auto;
display: inherit;
}

.order_edit-genrl .form-group.row .control-label {
    width: 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
}

.order_edit-genrl .form-group.row.gendetail-col .control-label > span {
display: block;
}

.order_edit-genrl .form-group.row > .col-7 {
    width: 100%;
    -webkit-box-flex: 0;
    flex: 0 0 100%;
    max-width: 100%;
}

.order_edit-genrl .form-group.row .input-group.date {
    margin: 0 -5px;
    width: auto;
}

.order_edit-genrl .form-group.row .input-group.date input {
    margin: 0 5px;
    color: #000;
    font-size: 14px;
}

.order_edit-genrl .form-group.row.width-100 {
    width: 100%;
    margin: 0;
}

.order_edit-genrl .form-group.row.width-100 .control-label, .order_edit-genrl .form-group.row.width-100 .col-7 {
    padding: 0;
}

.address p {
 color: #000;
font-weight: 400;
}

.order-items-list {
    margin-bottom: 15px;
    background: #fff;
}

.order-items-list td.order-product {
    width: 45%;
}

.order-items-list td.order-product > div {
    display: inline-block;
    vertical-align: middle;
}

.order-items-list td.order-product > div.orders-tracking {
    width: 70%;
}

.order-items-list td.order-product > div > h6 {
    margin-bottom: 5px;
    color: #000;
    padding: 7px 0;
    font-size: 16px;
}

.order_detail-top-box {
    padding: 0;
    height: calc(100% - 62px);
}


.orders-tracking-item-details > strong {
    color: #000;
    padding-bottom: 5px;
    font-weight: 600;
    text-decoration: underline;
    font-size: 14px;
}

.orders-tracking-item-details > div {
    padding-bottom: 3px;
    font-size: 13px;
}

.order-totals-items table.order-totals {
    float: right;
    width: 100%;
}

.order-totals-items table.order-totals tr td {
    color: #000;
    line-height: 1.2;
}

.order-totals-items table.order-totals tr td:last-child {
  text-align: right;
  font-weight: 600;
}

.order-totals-items table.order-totals tr td.seprater {
  position: relative;
}
.order-totals-items table.order-totals tr.grand-total {
  position: relative;
}
.order-totals-items table.order-totals tr td.seprater span {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: auto;
  top: 2px;
  background: #fff;
  z-index: 1;
  padding: 5px 7px;
  text-align: center;
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
  color: #464646;
  display: inline-block;
  max-width: 140px;
}
.order-totals-items table.order-totals tr.grand-total::before {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px;
  top: -30px;
  background: #fff;
  z-index: 1;
  padding: 5px 7px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 14px;
}
.order-totals-items table.order-totals tr td.label {
   font-weight: 500;
text-align: left;
width: 100%;
}
.order-totals-items table.order-totals tr.final-rate td {
  margin-bottom: 0;
  font-weight: 700;
}
.order-totals-items table.order-totals tr td.total {
    font-weight: 600;
    text-align: right;
}

.order_detail .card{margin-bottom: 0;}

.order-totals-items table.order-totals tr.paid {
    border-top: 1px solid #000;
}

.resturant-detail .card-header h4 {
    margin-bottom: 0;
    color: #000;
}

.resturant-detail a.row.redirecttopage {
    align-items: center !important;
}
.resturant-detail .card-body p strong {
    padding-right: 5px;
    float: left;
    width: 25%;
}

.resturant-detail .card-body p > span {
    display: block;
}

img.rounded-circle {
    object-fit: cover;
}


.topbar .top-navbar .navbar-header .navbar-brand img#logo_web {
    max-width: 100px;
}


.table tr td.action-btn a i.fa-edit, .table tr td.action-btn a i.fa-ellipsis-h, .daes-sec-sec .table span.fa-edit, .table tr td.vendor-action-btn a i.fa-edit, .table tr td.vendor-action-btn a i.fa-ellipsis-h, .table tr td.vendor-action-btn a i.fa-eye,.table tr td.action-btn a i.fa-check,ul.dtr-details > li span a i.fa-edit, ul.dtr-details > li span a i.fa-ellipsis-h, ul.dtr-details > li span a i.fa-ellipsis-h,ul.dtr-details > li span a i.fa-eye,ul.dtr-details > li span a i.fa-check {
    background: #E1E7E9;
    width: 28px;
    height: 28px;
    color: #000;
    border-radius: 50px;
    text-align: center;
    padding: 7px;
    font-size: 15px;
}

.table tr td.action-btn a i.fa-edit::before, .redirecttopage .fa-edit::before, ul.dtr-details > li span a i.fa-edit::before,.daes-sec-sec .table span.fa-edit:before {
  content: "\f040";
}

.table tr td.action-btn a i.fa-eye, .table tr td.action-btn a i.fa-file,.table tr td.action-btn a i.fa-print, ul.dtr-details > li span a i.fa-file, ul.dtr-details > li span a i.fa-eye,ul.dtr-details > li span a i.fa-eye,ul.dtr-details > li span a i.fa-print,.table tr td span.action-btn a i.fa-print{background: #E1E7E9;width: 28px;height: 28px;color: #000;border-radius: 50px;text-align: center;padding: 7px 5px;font-size: 15px !important;font-weight: normal !important;}

.table tr td.action-btn i.fa-info{background: #000;
    width: 28px;
    height: 28px;
    color: #fff !important;
    border-radius: 50px;
    text-align: center;
    padding: 7px;
    font-size: 15px;position: relative;display: inline-block;
  margin-top: 0px;}

.table tr td.action-btn a i.fa-edit, .daes-sec-sec .table span.fa-edit, .table tr td.vendor-action-btn a i.fa-edit,ul.dtr-details > li span a i.fa-edit,.table tr td.action-btn a i.fa-check,ul.dtr-details > li span a i.fa-check {
    background: green;
    color: #fff;
}
.table tr td span.action-btn a i.fa-edit,.table tr td span.action-btn a i.fa-check,.table tr td span.action-btn a i.fa-trash,.table tr td span.action-btn a i.fa-eye{
    background: green;
    color: #fff;width: 28px;
height: 28px;border-radius: 50px;
text-align: center;
padding: 7px;
font-size: 15px;
}

.table tr td.action-btn a i.fa-trash, .table tr td.vendor-action-btn a i.fa-trash,ul.dtr-details > li span a i.fa-trash,.table tr td.action-btn a i.fa-close,ul.dtr-details > li span a i.fa-close,.table tr td.action-btn a i.fa-file-pdf-o,.table tr td span.action-btn a i.fa-trash {
    background: red;
    width: 28px;
    height: 28px;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    padding: 7px;
    font-size: 15px;
}

.table tr td span.action-btn a i.fa-eye{background: #E1E7E9;color: #000;}

table.dataTable > tbody > tr.child ul.dtr-details {
  width: 100%;
}

table.dataTable > tbody > tr.child span.dtr-title {
  width: 50%;
}
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  font-size: 14px;
}
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current, .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #000;
  color: #fff !important;
  border: 1px solid #000;
  border-radius: 5px;
}
.language-list.icon{color: #0C111C !important;}


#story_vedios .video-inner,.thumbnail-inner{position: relative;border-radius: 10px;overflow: hidden;}
#story_vedios .video-inner video{width: 100%;border: 1px solid #ccc;border-radius: 10px;}
#uploding_story_video,#uploding_story_thumbnail{margin-top: 10px;color: green; font-weight: 500;}
.thumbnail-inner img{width: 100%;}
#story_thumbnail{position: relative;}
.remove-story-video,.remove-story-thumbnail{position: absolute;top:5px;right: 4px;background: #ff683a;border-radius: 50px;padding: 3px 8px;font-size: 12px;
color: #fff;cursor: pointer;}

.working_hours_div table.booking-table{width: 100%;}
.working_hours_div table.booking-table td{padding: 5px 18px;}
.working_hours_div table.booking-table td:last-child{width: 20% !important;}

.table.dataTable tr td .last-message{max-width: 100%;white-space: wrap;}
.font-semibold{font-weight: 600;}
.top-title-section{font-family: "Urbanist", serif;}
.text-dark-2{color: #0C111C;}
.top-title-section .top-title-left h3{font-family:Urbanist;font-style: normal;line-height:30px;}
.top-title-section .top-title-left .icon img{max-width: 32px}
.top-title-section .top-title-left .counter{color: #FF6839;font-size: 16px;display: flex;width: 32px;padding:4px;flex-direction: column;justify-content: center;
align-items: center;gap: 4px; border-radius: 50px;background: #FFEBE5;}
.card.border .card-header{background:none;padding:1.25rem 1.25rem 0.2rem 1.25rem }
.card.card-box-with-icon {margin-bottom: 15px;}
.card-body.card-box-with-icon{padding: 24px;}
.table-list{font-family: Urbanist;}
.card-header-title h3{font-size:18px;font-style: normal;}
.card-header-title p{color: #6B7280}

.table-responsive .dataTables_wrapper .dataTables_filter input{background: #F3F4F6 url(../images/search_icon.png) no-repeat right 10px center;border-radius: 20px; padding: 12px 25px;font-size: 14px;color: #6B7280;height: auto !important;border: 0px;}

.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons{float: none;margin-left: 15px}
.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons .dt-button{border-radius:120px;background:#F3F4F6;color: #0C111C;font-size: 14px;border: 0;padding: 12px 35px}
.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons .dt-button i.mdi {font-size: 18px ;margin-right: 10px}
.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons .dt-button.buttons-html5{padding: 12px 15px}
.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons .dt-button-collection{width: auto;}

.table.dataTable tr,.table.dataTable tr td{border-top: 0 !important;border-color: #E5E7EB}


table.dataTable.display > tbody > tr.odd > .sorting_1, table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1{box-shadow: none !important}
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1{background: rgba(0, 0, 0, 0.01);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.01) !important}
.table tr td > span.action-btn a i.mdi-eye,table.dataTable > tbody > tr.child ul.dtr-details > li .dtr-data .action-btn a i.mdi-eye{color: #B700BD}
.table tr td > span.action-btn a i.mdi-delete,table.dataTable > tbody > tr.child ul.dtr-details > li .dtr-data .action-btn a i.mdi-delete{color: #FF3840}


.table-responsive .dataTables_wrapper .dataTables_length select{padding: 7px 15px;border-radius: 50px;background: #F3F4F6;border-color: #F3F4F6;}

.card-box-with-icon .card-body .background-img{position: absolute;right: 0;bottom: 0;width: 76px;height: 73px;text-align: right;justify-content: center;align-items: center;
  display: flex;opacity: 0.2;}
.card-box-with-icon .card-body .background-img img{width: 100%}  
.edit-form-group{margin-bottom: 15px}
.edit-form-group label.control-label{color: #0C111C;font-size:14px;font-weight: 500;}
.edit-form-group .form-control{border-radius:16px;background:#F9FAFB; padding: 16px;font-size:16px;font-weight: 400;color: #6B7280;border: 0;}
.edit-form-group select.form-control{height: 56px !important;}
.edit-form-group.btm-btn .btn{padding: 8px 25px;}
.edit-form-group.btm-btn .btn.btn-default{background: #F3F4F6;color: #0C111C;}

.edit-form-group .form-check{padding-left: 0}
.edit-form-group .form-check label{margin-right: 10px;align-items: center;padding-left: 35px;display: flex;}
.edit-form-group .form-check [type="checkbox"] + label::before{border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #4B5563;
  border-bottom: 2px solid #4B5563;
  width: 8px;
  height: 14px;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  top: 3px;
  left: 2px; z-index: 1}
.edit-form-group .form-check [type="checkbox"]:checked + label::before {border-top: 2px solid transparent;border-left: 2px solid transparent;border-right: 2px solid #fff;border-bottom: 2px solid #fff;}

.edit-form-group .form-check [type="radio"] + label::before{border: 2px solid #4B5563;width: 24px;
  height: 24px;margin: 0}
.edit-form-group .form-check [type="radio"] + label::after{left: 4px;
  top: 4px;
  border: 2px solid #fff;margin: 0}  
.edit-form-group .form-check [type="radio"]:checked + label::before {background: #FF6839;border-color: #FF6839}


.top-title-section .breadcrumb{padding: 0;background: none;}
.top-title-section .breadcrumb-item + .breadcrumb-item::before {color: #0C111C;}
.map-box{border-radius: 16px;overflow: hidden;}
.red{color: #FF3840}
.restaurant_gallery ul{display: flex;}
.restaurant_gallery ul li{list-style-type: none}




.min-h-200 {min-height: 200px;}
.bg--secondary { background-color: rgba(117, 133, 144, 0.1) !important;}
.profile-preview-box .wishlist-btn {width: 30px;height: 30px;border-radius: 6px;position: absolute;right: 15px;top: 15px;}
.profile-preview-box .wishlist-btn-2 {width: 30px;height: 30px; border-radius: 50%;position: absolute; right: 15px;top: 15px;font-size: 20px;}
.profile-prev-image {width: 30%;max-width: 90px;aspect-ratio: 1;border-radius: 50%;}
.review-rating-demo {position: absolute;top: -35px;right: 15px;border: 2px solid #fff;border-radius: 55px;background: #ff7a00;color: white;z-index: 9; display: flex;align-items: center;padding: 2px 6px;font-size: 10px;gap: 4px;}
.review-rating-demo * {font-size: 10px;}
.flex-grow-1 {-webkit-box-flex: 1 !important;flex-grow: 1 !important;}
.line-limit-2 {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.gap-2 {gap: 10px;}

.profile-preview-box video{width: 100%;object-fit: cover; height: 100%;}

.preview-box img,.preview-box video{object-fit: cover;}
.preview-box h4{padding-bottom: 10px;color: #000;font-size: 18px;}
.form-group.row.calendar-box .form-control{display: block; width: 100%;}
.form-group.row.calendar-box .form-control .fa-caret-down{float: right;}


.leaflet-control-container .leaflet-routing-container.leaflet-control{
    display: none;
}

.chat-app .chat {
    margin-left: 350px;
    border-left: 1px solid #eaeaea
}

.chat-app .chat {
    border: 1px solid #eaeaea;
}

.card.chat-app {
    max-width: 100%;
    margin: 15px auto 15px;
    border: 1px solid #eaeaea;

}

.chat .chat-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e6e6e6
}

.chat .chat-header img {
    float: left;
    border-radius: 40px;
    width: 40px;
    height: 40px;
  object-fit: cover;

}

.chat .chat-header .chat-about {
    float: left;
    padding-left: 10px
}

.chat .chat-header .chat-about h6,.chat .chat-header .chat-about h5{
  font-size: 16px;
  color: #000;
}
.chat .chat-history {
    padding: 20px;
    border-bottom: 2px solid #fff;
    height: 67vh;
    overflow-y: auto;
    min-height: 300px;
}

.chat .chat-history::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.chat .chat-history::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.chat .chat-history::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}


.chat .chat-history ul {
    padding: 0
}

.chat .chat-history ul li {
    list-style: none;
    margin-bottom: 15px
}

.chat .chat-history ul li:last-child {
    margin-bottom: 0px
}

.chat .chat-history .message-data {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.chat .chat-history .message-data img {
    border-radius: 40px;
    width: 40px
}

.chat .chat-history .message-data-time {
    color: #434651;
    padding-left: 6px
}

.chat .chat-history .message {
    color: #000;
    padding:10px 25px 20px 15px;
    line-height: 26px;
    font-size: 14px;
    border-radius: 12px 12px 12px 0px;
    display: inline-block;
    font-weight: 500;
    box-shadow: -2px 3px 5px 0px rgba(0,0,0,0.2);
    position: relative;
}
.chat .chat-history .message .message-data-time{
  position: absolute;
  font-size: 10px;
  white-space: nowrap;
  bottom: 0px;
  right: 5px;
  padding-left: 0;
}

.chat .chat-history .other-message{
    border-radius: 12px 12px 0px 12px;
    box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.2);
}

.chat .chat-history .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px;
    display: none;
}

.chat .chat-history .my-message {
    background: #f4f4f4;
    color: #000;
}

.chat .chat-history .my-message:after {
    bottom: 100%;
    left: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #e3e3e3;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .other-message {
    background: #f2f2f2;
    text-align: right
}

.chat .chat-history .other-message:after {
    border-bottom-color: #ffe3d9;
    left: auto;
    right: 10px
}

.chat .chat-message {
    padding: 20px 20px;
    border-top:1px solid rgba(0, 0, 0, 0.07) ;
}

.chat .chat-message .input-group .input-group-text,.chat .chat-message .input-group .form-control{
    border: 0;
  background: none;
  box-shadow: none;
}
.chat .chat-message .input-group .form-control{
    border-left: 1px solid rgba(0, 0, 0, 0.07);
}
.chat .chat-message .input-group .btn.btn-primary{
  border-radius: 50px;
  width: 40px;
  height: 40px;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 13px;
}
.chat-count-message{
    position: relative;
    display: inline-block;
}
.online,
.offline,
.me {
    margin-right: 2px;
    font-size: 8px;
    vertical-align: middle
}

.online {
    color: #86c541
}

.offline {
    color: #ff4e4e
}

.me {
    color: #1d8ecd
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

.chat .chat-history ul li.date-separator{
 position: relative;
}

.chat .chat-history ul li.date-separator:after{
    content: "";
    width: 100%;
    background: #d5dfea;
    height: 1px;
    display: block;
    bottom: 11px;
    position: relative;
}
.chat .chat-history ul li.date-separator .badge{
    position: relative;
    z-index: 1;
    padding: 5px 15px;
    border-radius: 5px;
    background: #f2f2f2;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    font-size: 12px;
}

.check-sign{
  float: right;
  margin-top: 0px;
  margin-left: 2px;
  padding-right: 10px;
}
.check-sign .fa{font-size: 9px;}

.check-sign .fa:before{content: "";
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #606060;
  border-bottom: 2px solid #606060;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  width: 6px;
  height: 12px;
  display: inline-block;}

.check-sign .fa.fa-check-double:before{
  border-right: 2px solid #26a69a;
  border-bottom: 2px solid #26a69a;
}
.check-sign .fa.fa-check-double:after{
  content: "";
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #26a69a;
  border-bottom: 2px solid #26a69a;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  width: 8px;
  height: 12px;
  display: inline-block;
  margin-left: -3px;
}

.check-sign .fa.fa-check-double{color: #02a843;}
.form-text{font-size: 14px;}








.select2-container-full .select2.select2-container{position: relative;left: 0;top: 0;width: 100% !important;background-color: transparent;border:1px solid #ccc;padding: 0px 8px;border-radius: 5px;}

.select2-container-full .select2-container--default .select2-selection--single .select2-selection__arrow{height: 38px;}

.select2-results__options li.occupied-option{position: relative;}


.table tr td .action-btn .chat-count-message{position: relative;display: inline-block;}
.table tr td .action-btn .chat-count-message .unread-count{position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  display: flex;
  top: -5px;
  right: -5px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  font-size: 12px;
  padding: 2px 0;

}
@media screen and ( max-width: 1370px ) {

    .table thead th, .table th {
        font-size: 14px;
    }

    .table tr td {
        font-size: 13px;
    }


}

@media screen and ( max-width: 1023px ) {
    .mini-sidebar .page-wrapper {
        padding-left: 0px;
    }

}

@media screen and ( max-width: 991px ) {

    .row.restaurant_payout_create label.control-label {
        -webkit-box-flex: 0;
        max-width: 100%;
    }

}

@media only screen and (max-width: 767px) {
    .chat-app .chat {
        margin: 0
    }
    .chat-app .chat .chat-header {
        border-radius: 0.55rem 0.55rem 0 0
    }
    .chat-app .chat-history {
        height: 300px;
        overflow-x: auto
    }


}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .chat-app .chat-list {
        height: 650px;
        overflow-x: auto
    }

    .chat-app .chat-history {
        height: 600px;
        overflow-x: auto
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .chat-app .chat-list {
        height: 480px;
        overflow-x: auto
    }

    .chat-app .chat-history {
        height: calc(100vh - 350px);
        overflow-x: auto
    }
}

@media screen and ( max-width: 767px ) {

    #users-table_filter #selected_search.form-control, #users-table_filter .form-group, #users-table_filter .form-group .form-control, #users-table_filter .form-group button.btn {
        width: 100%;
    }
   
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    color: #333 !important;
    font-size: 15px !important;
}

.form-group.row .item_attributes {
    padding: 15px;
}

.form-group.row .item_attributes > div {
    margin-bottom: 10px;
}

.item_attributes .bootstrap-tagsinput {
    width: 100%;
}

.item_attributes .bootstrap-tagsinput .tag {
    padding: 7px 10px;
    font-size: 15px;
}

.item_attributes .bootstrap-tagsinput .tag [data-role="remove"] {
    background: #ffff;
    border-radius: 50px;
    width: 18px;
    height: 18px;
    color: #000;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    line-height: 16px;
    vertical-align: middle;
}

.item_variants .table .thead-light th {
    vertical-align: middle;
}

.item_variants .table td .variant-image .upload .icon {
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    margin-left: 15px;
}

.item_variants .table td .variant-image .upload {
    text-align: center;
}

.item_variants .table td .variant-image .upload .image {
    text-align: center;
    position: relative;
    max-width: 55px;
    display: inline-block;
}

.item_variants .table td .variant-image .upload .image i.mdi-delete {
    font-size: 12px;
    cursor: pointer;
    position: absolute;
    right: -8px;
    background: #ff683a;
    color: #fff;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    display: inline-block;
    top: -6px;
}

.web_version {
    text-align: center;
    color: #fff;
    padding: 8px 35px 8px 15px;
    display: block;
    font-size: 15px;
    font-weight: 700;
}
.mini-sidebar .web_version{padding: 8px 11px 8px 5px;width: 60px;}

.table tr td .switch {
    display: inline-block;
    cursor: pointer;
    position: relative;
}

.table tr td .switch input {
    opacity: 0;
    height: 100%;
    z-index: 5;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

.table tr td .switch .slider {
    cursor: pointer;
    -webkit-transition: .4s;
    transition: .4s;
    width: auto;
    height: auto;
}

.table tr td .switch .slider:before {
    -webkit-transition: .4s;
    transition: .4s;
}

.table tr td .switch input:checked + .slider {
    background-color: green;
}

.table tr td .switch input:checked + .slider::before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px);
}
.placeholder_img_thumb, .logo_img_thumb {
    padding: 15px 15px;
}

.form-group .placeholder_img_thumb {
    padding: 15px 15px;
}

.form-group .placeholder_img_thumb img {
    height: 50px;
    object-fit: cover;
}

.placeholder_img_thumb img, .logo_img_thumb img {
    margin-right: 5px;
}

.placeholder_img_thumb .image-item {
    position: relative;
    margin-right: 10px;
    display: inline-block;
}

.placeholder_img_thumb .image-item .delete-btn, .placeholder_img_thumb .image-item .remove-btn {
    position: absolute;
    right: 4px;
    top: -4px;
    width: 20px;
    height: 20px;
    background: #ff683a;
    color: #fff;
    font-size: 9px;
    text-align: center;
    border-radius: 50px;
    line-height: 20px;
    padding: 0 4px 0 2px;
    cursor: pointer;
}


.rental-review .reviews-members {
    background: #FFFFFF;
    border: 1px solid #E5EAF1;
    border-radius: 15px;
    padding: 14px 17px;
}

.rental-review .reviews-members .media {
    padding-bottom: 15px;
    border: 0;
    border-bottom: 1px solid #E5EAF1;
    margin-bottom: 10px;
    padding-left: 0; padding-right: 0;
}

.rental-review .reviews-members .reviews-members-body p {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.05em;
}

.review-date span {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.03em;
    color: #666666;
}

.rental-review .reviews-members-header h6 {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.03em;
    color: #333333;
}


.attribute-ratings .feature-reviews-members-header {
    position: relative;
    z-index: 1;
}

.attribute-ratings .feature-reviews-members-header:before {
    position: absolute;
    content: "";
    background: #E5EAF1;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: -1;
}

.attribute-ratings .feature-reviews-members-header h6 {
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.05em;
    color: #333333;
    background: #fff;
    padding-right: 10px;
    min-width: 150px;
}

.attribute-ratings .feature-reviews-members-header .rating-info {
    background: #fff;
    padding-left: 10px;
}

.attribute-ratings .rating-info .count-rating {
    width: 20px;
    text-align: right;
}

.rental-review .reviews-members .reviews-members-body .photos ul {
    padding-left: 0;
    list-style-type: none;
    margin-bottom: 0;
}

.rental-review .reviews-members .reviews-members-body .photos ul li {
    display: inline-block;
    margin-right: 10px;
    width: 15%;
    vertical-align: middle;
}

.rental-review .reviews-members .reviews-members-body .photos ul li img {
    display: block;
    width: 100%;
    border-radius: 5px;
    background: #E7E7E7;
    height: 53px;
    object-fit: contain;
}

.order_detail .attribute-ratings{border-top: 1px solid rgba(120, 130, 140, 0.13); padding-top: 10px;}
.order_detail .attribute-ratings h3{border:0 ; padding-bottom: 0; }
.text-green{
  color:green;font-weight: 600;
}
.text-red{
  color:red;font-weight: 600;
}


.select-theme-radio .form-check-label{position: relative; margin-right: 15px; padding: 10px; border-radius: 5px;}
.select-theme-radio .form-check-label [type="radio"]{left: 0; right: 0; top: 0; bottom: 0;width: 100%;height: 100%;appearance: none;-webkit-appearance: none; opacity: 1;cursor: pointer;border: 2px solid #e1e1e1; border-radius: 8px;}
.select-theme-radio .form-check-label [type="radio"]:before{content: '';position: absolute;top: 2px;right: 13px;width: 22px;height: 22px;  border-top-color: rgb(177, 184, 187);  border-top-style: solid;  border-top-width: 1px;  border-right-color: rgb(177, 184, 187);  border-right-style: solid;  border-right-width: 1px;  border-bottom-color: rgb(177, 184, 87);  border-bottom-style: solid;  border-bottom-width: 1px;  border-left-color: rgb(177, 184, 187);  border-left-style: solid;  border-left-width: 1px;border-radius: 1px;margin-top: 2px;-webkit-transition: .2s;transition: .2s;z-index: 2;
opacity: 0;}

.select-theme-radio .form-check-label [type="radio"]:checked{border-color:#ff683a;}
.select-theme-radio .form-check-label [type="radio"]:checked:before{border-top: 2px solid transparent;border-left: 2px solid transparent;-webkit-transform: rotate(40deg);-ms-transform: rotate(40deg);transform: rotate(40deg);-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;transform-origin: 100% 100%;
border-right: 2px solid #fff;border-bottom: 2px solid #fff;width: 9px;height: 15px;opacity: 1;}

.select-theme-radio .form-check-label [type="radio"]:after{background: #e1e1e1; content: ""; width: 25px; height: 25px; border-radius: 0px 5px 0px 8px; position: absolute; right: 0; top: 0;}
.select-theme-radio .form-check-label [type="radio"]:checked:after{background: #ff683a;}

.select-theme-radio .form-check-label img {width: 100px;object-fit: cover;}

.modal-body img#themeImage{width: 100%;}

.gap-10{gap: 10px;}

.shop-card .shop-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  margin: 0 0 25px 0 !important;
}
.shop-card .shop-item .shop-item-title{
  margin-bottom: 10px !important;
  min-height: 40px;
}
.shop-item .shop-item-image a{
    width: 100%;
}
.shop-item img{
  max-width: 100%;
}
.shop-item .shop-price span.form-control{
  font-size: 14px;
  width: 100%;
  display: block;
  text-align: center !important;
}
.pos-search input#clear_filter,.pos-right input#clear_user_search{padding: 6px 10px;
  font-size: 15px;}

.cart-table .table tr td.order-product .orders-tracking h6{margin-bottom: 0;font-size: 13px;}
.cart-table .table tr td.order-product .orders-tracking small{font-size: 12px;font-weight: 500;color: #000 !important}

.cart-table .table tr td.delete-btn .btn{padding: 1px 6px;
  font-size: 12px;}
.shop-cart-table{margin-top: 15px;}
.cart-table .table tr td .order-product-box img{object-fit: cover;}
.cart-table .input-group-prepend .cart-quantity-input-new{
  color: #000;
  opacity: 1;
}
.cart-table .delete-btn a{
 width: 30px;
  height: 30px;
  font-size: 14px;
  padding: 2px;
}
.cart-table .table tfoot tr td{color: #000;}
.modal-body .product-details .model-cart-img img{
  background: #eee;
  padding: 5px; }
.model-cart-detail #modal-product-price{font-weight: 600}
.attribute-drp .attribute-label{font-weight: 500;color: #000;margin-bottom: 15px;}

.attribute-options .custom-control{padding-left: 0;}

.model-cart-detlist > div strong{min-width: 100px;display: inline-block;} 
.model-cart-detlist > div span{font-weight:500; }

.cart-table .table tr td .input-group-prepend{position: relative;}

.cart-table .table tr td .input-group-prepend{border-radius: 50px;max-width: 76px;}
.cart-table .table tr td .input-group-prepend .btn{text-align: center;font-size: 18px;}
.cart-table .table tr td .input-group-prepend .btn



/********************pos******************/

/********************Live tracking******************/

.ride-list.table-responsive {overflow-y: auto;height: 460px;}
.ride-list.table-responsive > input{background: #F3F4F6 url(../images/search_icon.png) no-repeat right 10px center;
  border-radius: 20px;
  padding: 12px 25px;
  font-size: 14px;
  color: #6B7280;
  height: auto !important;
  border: 0px;width: 98%;
  margin-bottom: 20px;}
.ride-list.table-responsive .live-tracking-list{padding-right: 10px;}
.live-tracking-list .live-tracking-box{position: relative;padding-bottom: 15px;border-bottom: 1px solid #eaeaea;margin-bottom: 15px; cursor: pointer;}
.live-tracking-list .live-tracking-box .location-ride > div{position: relative; padding-left: 40px;padding-bottom: 32px;font-size: 15px !important;}
.live-tracking-list .live-tracking-box .location-ride > div:after{position: absolute; width: 20px; height: 20px; border-radius: 50px; border: 3px solid #000000;left: 3px; top: 0;display: inline-block;background: #fff;content: "";}
.live-tracking-list .live-tracking-box .location-ride > div:before{border: 1px dashed #7D7D7D;content: "";width: 2px;left: 12px;top: 0;bottom: 0;display: inline-block;position: absolute;}
.live-tracking-list .live-tracking-box .location-ride > div:last-child:before{display: none;}

.live-tracking-list .live-tracking-box .location-ride > div.to-ride:after{background:#fff url(../images/location.png) no-repeat center; width: 23px; height: 23px; background-size: 100%; border: 0;}

.live-tracking-list .live-tracking-box .location-ride > div span{ display: inline-block;}

.live-tracking-box h3.drier-name{font-size: 14px;line-height: normal; margin-bottom: 5px;}
.live-tracking-box h4.user-name{font-size: 14px;font-weight: 500;margin-bottom: 15px;}
.live-tracking-box p,.live-tracking-list .live-tracking-box .location-ride > div{color: #000; font-size: 13px; text-align: left;}
.live-tracking-list .live-tracking-box .location-ride > div.to-ride{padding-bottom: 0;}
.live-tracking-box .badge{padding: 5px 15px; font-size: 15px; border-radius: 50px;margin-top: 20px;}
.live-tracking-box .badge.badge-info{background-color: #17a2b8;}
.live-tracking-box .badge.badge-success {background-color: #28a745;}
.live-tracking-list .live-tracking-box:last-child:before{display: none;}

.table tr td .live-tracking-list .live-tracking-box{border-bottom: 0; padding-bottom: 0; margin-bottom: 0;}
.table tr td .live-tracking-list .live-tracking-box .location-ride > div{font-size: 13px !important;padding-bottom: 15px;}
.table tr td .live-tracking-list .live-tracking-box .location-ride > div.to-ride{padding-bottom: 0px;}

.page-wrapper div.dataTables_processing{position: absolute;top: 0;left: 0;width: auto;margin-left: 0px;margin-top: 0;text-align: center;
padding: 2px;padding-top: 15%;z-index: 5}

#phone-box .col-xs-12 {
    position: relative;
}
.select2.select2-container {
    position: absolute;
    left: 5px;
    top: 3px;
    width: auto !important;
}
.select2.select2-container .select2-selection--single {
    border: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    max-width: 107px;
}
.select2-container .select2-selection--single .select2-selection__rendered > span .img-flag {
    max-width: 25px;
}
.select2-container .select2-selection--single .select2-selection__rendered > span {
    font-size: 13px;
    padding-right: 5px;
}
.select2-results__option span img.img-flag {
    max-width: 25px;
}
.select2-container--open .select2-dropdown {
    min-width: 250px;
    top: 0px;
    border: 0;
}
.form-group.form-material{padding: 0 5px;}
.phone-box .form-control.user_phone {
    background-color: #f5f5f5;
  border:1px solid #ccc;
}
.phone-box .select2.select2-container .select2-selection--single{background: none}
.phone-box .form-control.restaurant_phone {
    padding-left: 120px;
}

.pos-right .select2.select2-container,.custom-dropdown .select2.select2-container{position: relative;left: 0px;top: 0px;width: 100% !important;}
.pos-right .select2-container .select2-selection--single .select2-selection__rendered > span,.custom-dropdown .select2-container .select2-selection--single .select2-selection__rendered > span{font-size: 16px;}

@media screen and ( max-width: 767px ) {


.container-fluid {padding: 0 15px 25px 15px;}
.mini-sidebar .web_version{width: 100%;}

}


span.remove-menu-btn {
    position: absolute;
    top: -3px;
    right: 4px;
    background: #ff683a;
    border-radius: 50px;
    padding: 3px 8px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
}

.address .transactions-list-view,.address .transactions-list-view .transactions-list,.address .transactions-list-view .transactions-list .transactions-list-left{height: 100%;}

.address .transactions-list-view .date{margin-bottom: 20px;min-height: 40px;}

.switch-box .switch{float: right;}
.switch-box .switch-box-inner label.control-label{margin-bottom: 0 !important;}

.switch-box .switch {display: inline-block;width: 40px;height: 21px;cursor: pointer;margin: auto;position: relative; vertical-align: middle; margin-left: 15px;}

.switch-box .switch input {opacity: 0;z-index: 5;position: absolute;left: 0;right: 0;top: 0;bottom: 0;cursor: pointer;}

.switch-box .switch .slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;-webkit-transition: .4s;transition: .4s;border-radius: 34px;width: auto;height: auto;}

.switch-box .switch .slider:before {position: absolute;content: "";height: 19px;width: 19px;left: 1px;bottom: 1px;background-color: white;-webkit-transition: .4s;transition: .4s;border-radius: 50%;}

.switch-box .switch input:checked + .slider {background-color: #26B246;}

.switch-box .switch input:checked + .slider::before {-webkit-transform: translateX(19px);-ms-transform: translateX(19px);transform: translateX(19px);}

i.fa-info{background: #000;width: 25px; height: 25px;color: #fff !important;border-radius: 50px;text-align: center;padding: 5px;font-size: 15px;}
.pricing-card-inner{ height: 100%;transition: all ease 0.5s;}
.pricing-card-inner:hover{background:#000 url(../images/commission_base-bg.png) no-repeat center bottom;border: 1px solid transparent;color: #fff !important;transition: all ease 0.5s;}
.pricing-card.pricing-card-commission .pricing-card-inner:hover{background: url(../images/commission_base-bg.png) no-repeat center bottom;transition: all ease 0.5s;}
.pricing-card.Basic .pricing-card-inner:hover{background:#000 url(../images/basic-bg.png) no-repeat center bottom;transition: all ease 0.5s;}
.pricing-card.Standard .pricing-card-inner:hover{background:#000 url(../images/standard-bg.png) no-repeat center bottom;transition: all ease 0.5s;}
.pricing-card-btm{left: 40px ;right: 40px;bottom: 30px;}
.pricing-card-btm .btn{text-align: center}
.pricing-card-content ul{padding: 0;margin: 0;list-style-type: none;}
.pricing-card-inner:hover .pricing-card-btm .btn{background: #FF6839;border-color: #FF6839;color: #fff;transition: all ease 0.5s;}
.pricing-card-inner:hover .pricing-card-btm .btn:hover{background: #fff;color: #FF6839;transition: all ease 0.5s;}
.pricing-card-inner:hover .text-dark-2{color: #fff !important;transition: all ease 0.5s;}
.pay-method-box .form-check{ padding-right: 0px; font-size: 16px;font-weight: 500;color: #0C111C;
  display: flex;}
.pay-method-box .form-check [type="radio"] + label::before{margin: 0}
.pay-method-box .form-check [type="radio"] + label::after{margin: 0;}  
.pay-method-box .form-check [type="radio"]:checked + label::before {background: #FF6839;border-color: #FF6839}

.page-overlay{position: fixed;top: 0;left: 0;width: auto;text-align: center;bottom: 0; right: 0;}
.table tr td .action-btn a i.fa-play-circle,
.table tr td .action-btn a i.fa-pause-circle,
ul.dtr-details>li span a i.fa-play-circle,
ul.dtr-details>li span a i.fa-pause-circle {
    background: #0297b9;

    width: 28px;

    height: 28px;

    color: #fff;

    border-radius: 50px;

    text-align: center;

    padding: 7px 5px;

    font-size: 15px;
    font-weight: normal !important;

}
.occupied-option {
    color: green !important;
    font-weight: bold;
}

.tip-box {background: #FFEBE5;border-left:4px solid #FF6839;padding: 15px 15px 15px 30px;border-radius: 10px;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.09);margin-top: 15px;}

.tip-box h5 {font-size: 18px;color: #FF6839;padding-bottom: 10px;margin: 0px 0px 0px 0px;}

.tip-box p{color: #FF6839;margin-bottom: 0;}

.tip-box pre { text-align: left !important; background: #f8f8f8;  padding: 10px; margin-left: 25px; margin-top: 10px;}

#greenColor{
    color:green;
}

.shop-card .shop-item .member-plan.position-absolute .badge.badge-dark.open {
    background: #28a745 !important;
    font-weight: 700;
    padding: 5px;
}

.shop-card .shop-item .member-plan.position-absolute .badge.badge-dark.closed {
    background: #ff0404 !important;
    font-weight: 700;
    padding: 5px;
}

/* 
   
   ==== Colour skin ====
   
    */@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
.preloader {
  width: 100%;
  height: 100%;
  top: 0px;
  position: fixed;
  z-index: 99999;
  background: #fff;
}
.topbar {
  background: #fff;
  
}

.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
  display: none;
  color: rgba(255, 255, 255, 0.8);
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
  color: #0C111C !important;
}

.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover, .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
  color: #0C111C !important;
}
a.link:hover, a.link:focus {
  color: #ff683a !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #ff683a;
  border-color: #ff683a;
}

.sidebar-nav ul li a:hover{color: #FF6839;
border-color: #FF6839;
background:#1F2937;}

.sidebar-nav ul li a.active, .sidebar-nav ul li a.active:hover,.sidebar-nav ul li.active a.has-arrow:hover {
  color: #FF6839;background: #1F2937;
}

.sidebar-nav ul li a:hover i{color: #FF6839;}
.sidebar-nav ul li a.active i, .sidebar-nav ul li a.active:hover i,.sidebar-nav ul li.active a:hover i {
  color: #FF6839;
}
.sidebar-nav ul li a.has-arrow:hover::after{border-color: #FF683A;}
/* 
   
   ==== ec-* components ====
   
    *//* ============================================================
   ec-* component library
   Everything here is driven by --admin-panel-color / --admin-panel-rgb /
   --admin-panel-contrast, set in :root by layouts/app.blade.php.
   ============================================================ */

/* Brand loader: a conic-gradient masked ring + a leading dot, with a pulsing
   gradient app name. Colours inherit the admin theme. */
.ec-loader-box{
    position: fixed; inset: 0; margin: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
}

.ec-spinner{
    position: relative;
    width: 68px; height: 68px; border-radius: 50%;
    border: 0; box-sizing: border-box;
    background: conic-gradient(from 90deg,
        var(--admin-panel-color) 0%,
        rgba(var(--admin-panel-rgb, 132, 74, 239), .55) 42%,
        rgba(var(--admin-panel-rgb, 132, 74, 239), 0) 76%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
    animation: ec-spin .85s linear infinite;
}

.ec-spinner::after{
    content: ''; position: absolute; top: 0; left: 50%;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--admin-panel-color); transform: translateX(-50%);
}

.ec-spinner-label{
    font-size: 18px; font-weight: 800; letter-spacing: .4px; margin: 0; text-align: center;
    background: linear-gradient(90deg, var(--admin-panel-color), color-mix(in srgb, var(--admin-panel-color) 55%, #fff));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    color: var(--admin-panel-color);
    animation: ec-pulse 1.3s ease-in-out infinite;
}

@keyframes ec-spin{ to { transform: rotate(360deg); } }

@keyframes ec-pulse{ 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Page head — title + subtitle + primary action */
.ec-page-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ec-page-head-text h3{
    font-size: 24px;
    color: #0C111C;
    margin: 0;
}

.ec-page-head-text p{ font-size: 14px; }

.ec-head-btn{
    background: var(--admin-panel-color);
    color: var(--admin-panel-contrast, #fff);
    border: none;
    box-shadow: 0 6px 14px rgba(var(--admin-panel-rgb, 132, 74, 239), .28);
    transition: box-shadow .15s, transform .06s;
    display: inline-flex;
}

.ec-head-btn:hover{ color: var(--admin-panel-contrast, #fff); box-shadow: 0 10px 22px rgba(var(--admin-panel-rgb, 132, 74, 239), .38); }

.ec-head-btn:active{ transform: translateY(1px); }

.ec-head-btn i{ font-size: 18px; }

/* KPI horizontal stat variant — icon-left, value-top, sub-label under */

.ec-kpi.ec-kpi-stat .ec-kpi-sub{ font-size: 12px; color: #9aa1b4; font-weight: 500; }

/* Filter card ─────────────────────────────────────────── */

.ec-filter-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12);
    color: var(--admin-panel-color);
    font-size: 20px;
}

.ec-quick-chips{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ec-quick-label{ font-size: 12.5px; color: #8a90a6; font-weight: 500; margin-right: 4px; }

.ec-chip{
    background: #f5f7fb;
    border: 1px solid #e6e9f0;
    color: #3b4060;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.ec-chip i{ font-size: 15px; }

.ec-chip:hover{
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10);
    border-color: rgba(var(--admin-panel-rgb, 132, 74, 239), .28);
    color: var(--admin-panel-color);
}

.ec-chip.is-active{
    background: var(--admin-panel-color);
    border-color: var(--admin-panel-color);
    color: #fff;
}

/* Filter row inputs */

.ec-filter-card .form-control{
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    font-size: 14px;
    color: #0C111C;
}

.ec-filter-card .form-control:focus{
    background: #fff;
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
}

.ec-btn-ghost{
    height: 42px;
    display: inline-flex; align-items: center; gap: 5px;
}

/* Listings table card */

/* Card body inset — matches the card-header's 20px horizontal padding so the
   length menu / info / pagination sit inside a consistent frame instead of
   flush against the card's right border (which read as a text-alignment bug). */
.ec-list-card .card-body{ padding: 16px 20px; }

/* Higher specificity — DataTables' `.display` / `.dataTable` classes
   land after our rules on init, so we anchor selectors on `.dataTable` to
   keep the header size stable before AND after the table renders. */
.ec-list-table thead th,
table.ec-list-table.dataTable thead th,
table.ec-list-table.dataTable thead > tr > th{
    background: #fafbfd;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700 !important;  /* beats the global `.table.dataTable th{font-weight:400!important}` in style.css:10939 */
    letter-spacing: 0;
    text-transform: none;
    padding: 14px 16px !important;
}

.ec-list-table tbody td,
table.ec-list-table.dataTable tbody td{
    vertical-align: middle;
    font-size: 13.5px;
    color: #3b4060;
    background: #fff;
}

/* Kill DataTables' zebra stripe (`.display` adds .odd/.even) so every row
   is uniform white; only the hover tint remains. */

/* Kill DataTables' sorted-column tint (`.sorting_1/2/3`) so the active sort
   column matches the rest; sort direction is still visible via the arrow icon. */

/* Give the active sort column's HEADER a subtle brand tint instead of the
   default gray, so the "which column is sorted" cue matches the admin colour. */
table.ec-list-table.dataTable thead th.sorting_asc,
table.ec-list-table.dataTable thead th.sorting_desc{
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .08);
    color: var(--admin-panel-color);
}

/* Listing cell — thumbnail + title + short ID */

/* Category chip */

/* Category chips that wrap onto multiple lines inside a table cell.
   flex-wrap wraps the chips even when the DataTable has the `nowrap` class. */

/* Seller / user cell — avatar + name.
   Same structure across Listings (seller) and Users (user info):
   <span class="ec-seller">
       <img class="ec-seller-avatar"> | <span class="ec-avatar-fallback">…</span>
       <a class="ec-seller-name">Name</a>
   </span>
*/

/* Explicit margin-right on the avatar instead of `gap` on the container —
   Bootstrap's `<a>` reset can strip flex gap between an <img> and a following
   inline link, which is why the avatar and name were touching. */
.ec-seller-avatar,
.ec-avatar-fallback{
    display: inline-flex;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: 14px !important;
}

/* Status pills */
.ec-pill{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.6;
}

.ec-pill.pill-green{ background: #e5f7ed; color: #1a7f4c; }

.ec-pill.pill-amber{ background: #fef3d5; color: #a86400; }

/* Row actions */
.ec-actions{ display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start; }

.ec-act{
    width: 38px; height: 38px;
    border-radius: 8px;
    background: transparent;
    color: #8a90a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: background .15s, color .15s;
}

.ec-act:hover{
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10);
    color: var(--admin-panel-color);
}

/* Delete icon uses the same brand hover as every other action so the row's
   action strip reads as one uniform control; the mdi-delete icon shape alone
   signals intent. Bulk-delete link in the card header stays red. */
.ec-act.ec-act-danger{ color: #8a90a6; }

.ec-act.ec-act-danger:hover{ background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10); color: var(--admin-panel-color); }

/* Approve variant — green on hover, distinct from destructive/danger */

/* DataTables Export button collection when it lives in a list-card header
   slot — brand-coloured pill button matching .ec-btn-brand, no odd margins. */
[id$="-export-slot"] .dt-buttons{ margin: 0; }

/* DataTables — quiet the length/info/paginate to match the card */

.ec-list-card .dataTables_length{ padding: 0; }

.ec-list-card .dataTables_length select{
    margin: 0 6px;
    font-size: 12.5px;
}

.ec-list-card .dataTables_paginate{ margin: 0 !important; padding: 0 !important; }

.ec-list-card .dataTables_paginate .paginate_button{
    padding: 4px 10px !important;
    margin: 0 2px !important;
    border-radius: 8px !important;
    color: #5a6179 !important;
    border: none !important;
    background: transparent !important;
}

.ec-list-card .dataTables_paginate .paginate_button:hover{
    background: #f5f7fb !important;
    color: var(--admin-panel-color) !important;
    border: none !important;
}

/* Higher specificity (0,5,1) — the theme's
   `.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button:hover`
   rule (0,5,0) forces `color: #fff !important`, which combined with our light
   hover background made the hovered page number invisible. */
.ec-list-card .dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10) !important;
    color: var(--admin-panel-color) !important;
    border: none !important;
}

.ec-list-card .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{
    background: transparent !important;
    color: #cbd0da !important;
}

.ec-list-card .dataTables_paginate .paginate_button.current,
.ec-list-card .dataTables_paginate .paginate_button.current:hover{
    background: var(--admin-panel-color) !important;
    color: #fff !important;
    border: none !important;
}

/* 5-class + element selector — outranks the DataTables plugin's
   `.dataTables_wrapper .dataTables_paginate .paginate_button.current { color: inherit !important }`
   (0,4,0). Needed for the hand-built pagination on Cities/Areas, which sits
   outside .table-responsive so the theme's 5-class rule doesn't reach it.
   Also caps the pill height so it doesn't touch the separator line above. */
.ec-list-card .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.ec-list-card .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover{
    background: var(--admin-panel-color) !important;
    color: #fff !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px !important;
    margin: 0 4px;
    line-height: 1;
    border-radius: 8px !important;
}

.ec-list-card .dataTables_paginate .paginate_button.disabled,
.ec-list-card .dataTables_paginate .paginate_button.disabled:hover{
    background: transparent !important;
    color: #cbd0da !important;
    cursor: not-allowed;
}

.ec-list-card .dataTables_length select{
    border: 1px solid #e2e6ef;
    height: 34px;
    color: #3b4060;
}

.ec-list-card .paginate_button.current,
.ec-list-card .paginate_button.current:hover{
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: #fff !important;
}

/* Published toggle in the listings table — override the global red/green
   pill with a slim modern switch that uses the brand color when on. */
.ec-list-table .switch-box{ padding: 0; margin: 0; float: none; display: inline-block; }

.ec-list-table .switch-box .switch{ width: 36px; height: 20px; margin: 0; display: inline-block; position: relative; vertical-align: middle; }

.ec-list-table .switch-box .switch input{ opacity: 0; width: 0; height: 0; position: absolute; }

.ec-list-table .switch-box .switch .slider{
    position: absolute; inset: 0;
    background: #d0d5de;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease;
}

.ec-list-table .switch-box .switch .slider::before{
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(15,23,42,.18);
    transition: transform .18s ease;
}

.ec-list-table .switch-box .switch input:checked + .slider{ background: var(--admin-panel-color); }

.ec-list-table .switch-box .switch input:checked + .slider::before{ transform: translateX(16px); }

/*******************
   Users — index page (reuses listings scaffolding + tiny extras)
*******************/

/*******************
   Create / Edit form pages — shared pattern
   Structure: ec-page-head (title + Back) → ec-form-card(s) → ec-form-actions.
   Fields: 2-per-row (`.row` > `.col-md-6.mb-3`), label above input,
   required * on English only, helper text via .ec-form-help.
*******************/

/* Subtle divider between logical groups inside a form section */

/* Utility: aligns a label-less control (toggle, button…) with the INPUT line of an
   adjacent field that has an .ec-form-label above it. Reusable on any form page. */

/* Any leftover legacy control-label inside a form card follows the same scale */

/* Select2 inside the ad wizard (Seller) — match .ec-form-card .form-control */

/* ── Detail / view page primitives ─────────────────────────────────────── */

/* Deleted / missing user label */

/* Brand-tinted info note (e.g. payment currency-support hint) */
.ec-info-note{ background: transparent; border: none; border-radius: 0; }

/* Section = bordered fieldset; title = brand pill legend that sits ON the top
   border (classic fieldset/legend look the settings pages had). */

/* When the title is the first child of a bordered section, lift it onto the border. */

/* Payment gateway block = bordered fieldset (pill legend) + 2-column field grid.
   Checkboxes span the full width; each field takes one of the two columns. */

/* Clean checkbox row — flush-left, no bootstrap .form-check padding to fight.
   Two checkboxes sit side by side (one per column) like the fields below. */

/* Tighten the space between the fields and the currency-support note */

/* Custom checkbox — brand-filled with a white tick (replaces odd native boxes).
   Scoped to form checkboxes so it never touches .switch toggles or table selectors. */
.form-check input[type="checkbox"],
.form-check-input[type="checkbox"],
input[type="checkbox"].ec-check{
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; padding: 0;
    border: 1.5px solid #cbd0da; border-radius: 6px; background: #fff;
    cursor: pointer; vertical-align: middle; flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease;
    /* Undo the theme's off-screen checkbox hide (position:absolute;left:-9999px;opacity:0) */
    position: relative !important; left: auto !important; opacity: 1 !important;
}

/* Non-bootstrap checkboxes (payment rows, .ec-check) get inline spacing;
   .form-check-input keeps Bootstrap's own absolute positioning untouched. */

/* The base theme draws its OWN checkbox on the following <label> via ::before/::after.
   Our custom box already renders on the input, so suppress the theme's to avoid doubles. */
.form-check input[type="checkbox"] + label::before,
.form-check input[type="checkbox"] + label::after,
.form-check-input[type="checkbox"] + label::before,
.form-check-input[type="checkbox"] + label::after,
input[type="checkbox"].ec-check + label::before,
input[type="checkbox"].ec-check + label::after{
    display: none !important;
}

.form-check input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:checked,
input[type="checkbox"].ec-check:checked{
    background: var(--admin-panel-color); border-color: var(--admin-panel-color);
}

.form-check input[type="checkbox"]:checked::after,
.form-check-input[type="checkbox"]:checked::after,
input[type="checkbox"].ec-check:checked::after{
    content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.form-check input[type="checkbox"]:focus,
.form-check-input[type="checkbox"]:focus,
input[type="checkbox"].ec-check:focus{
    outline: none; box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
}

/* Checkbox selection column — center the box in header + every row */

/* Themed inline link (e.g. clickable seller / buyer / ad names in list tables) */

/* Super Admin lock note — tinted with the dynamic admin panel color (not Bootstrap blue) */

/* Checkbox stays the standard 20px ec-check so the white tick is centered exactly like
   every other checkbox (e.g. bulk delete) — no size/tick override here. */

/* Bulk-action bar (list pages) — appears when rows are checkbox-selected */
.ec-bulk-bar{
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .07);
    border: 1px solid rgba(var(--admin-panel-rgb, 132, 74, 239), .18);
    border-radius: 10px; padding: 10px 16px;
}

.ec-bulk-bar .ec-bulk-count{ font-size: 14px; color: #3b4060; }

.ec-bulk-bar .ec-bulk-count strong{ color: var(--admin-panel-color); }

.ec-bulk-bar .ec-bulk-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.form-check.width-100 .ec-form-help{ flex-basis: 100%; margin-top: 4px; }

/* Language tabs — brand underline style. The base theme paints .nav-tabs and
   .nav-item with a grey background band; strip all of it here. */

/* Bottom action bar */

/* Image upload preview */

/* Styled file input — hides the native control behind a dashed upload box,
   shared by every converted form.
   Markup: <label class="ec-upload" data-placeholder="…">
             <input type="file" …>
             <i class="mdi mdi-cloud-upload-outline"></i>
             <span class="ec-upload-text">…</span>
             <span class="ec-upload-hint">…</span></label>
   ec-form.js swaps .ec-upload-text for the chosen file name on change. */

/* Custom pager (previous / next) — match the rest of the pill-button family */

/* Cities / Areas now use DataTables' exact class names (dataTables_info,
   dataTables_length, dataTables_paginate) so all DataTables CSS in the codebase
   applies uniformly — no divergence from Currencies/Countries/States. */
.ec-list-card .dataTables_wrapper .dataTables_info,
body .table-responsive .dataTables_wrapper .dataTables_info{ color: #8a90a6; font-size: 14px; }

/* DataTables-look Prev/Next pager for pages that can't use DataTables' own
   pagination (Categories, Cities, Areas — they use Firestore cursors, not
   client-side page math). Mirrors the pill style + brand hover of DataTables' `p`. */

/* Current-page pill for custom-pagination pages — visual parity with
   DataTables' `.paginate_button.current` used on Currencies/Countries/States.
   Uses !important on colour + background because generic `.badge` / span rules
   elsewhere in style.css otherwise reset them to grey/transparent. */

/* Frosted overlay backdrop — content shows through, softly blurred, instead of
   the old opaque white flash. Paired with #data-table_processing in layouts/app. */
.page-overlay {
    background: rgba(255, 255, 255, .38) !important;
    backdrop-filter: blur(4px);
    z-index: 3000;
}
/* 
   
   ==== Page shells & components ====
   
    *//* ============================================================
   eClassified Admin — Shell (header + sidebar + footer)
   Modern refresh layered over the Yelpify base. Uses
   --admin-panel-color and --admin-panel-rgb from :root
   (both set inline in layouts/app.blade.php).
   ============================================================ */

body {
    /* Cards stay visible through their own 1px #eef0f4 border, not because the
       page behind them is tinted. */
    background: #f5f7fb;
    color: #0C111C;
    -webkit-font-smoothing: antialiased;
}

/* =====================================================
   Top bar
   ===================================================== */
.topbar { box-shadow: none !important; border-bottom: none !important; }
.topbar .navbar-collapse {
    border-bottom: none !important;
    min-height: 68px;
    padding: 0 24px;
    background: #fff;
}
.topbar .navbar-header {
    background: #0b0f18;
    display: flex; align-items: center; justify-content: center;
}
.topbar .navbar-brand img { max-height: 40px; width: auto; }

.topbar .navbar-nav .nav-item > .nav-link {
    padding: 9px 12px !important;
    border-radius: 10px;
    transition: background .15s, color .15s;
}
.topbar .navbar-nav .nav-item > .nav-link:hover,
.topbar .navbar-nav .nav-item > .nav-link:focus {
    background: #f0f2f7;
    color: #0C111C !important;
}

/* Sidebar-collapse toggle — override the base pill (dark gray circle from style.css)
   to match the shell design: brand-tinted pill with a bold icon that's actually visible. */
.topbar .navbar-nav > .nav-item > .nav-link.sidebartoggler {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12) !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    width: 40px; height: 40px;
    margin: 0 4px !important;
    transition: background .15s;
}
.topbar .navbar-nav > .nav-item > .nav-link.sidebartoggler:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .22) !important;
}
.topbar .sidebartoggler .mdi {
    font-size: 22px !important;
    color: var(--admin-panel-color) !important;
    line-height: 1;
}
/* Mobile hamburger (visible only on small screens) */
.topbar .nav-toggler .mdi { font-size: 22px !important; color: #3b4060 !important; }
.topbar .nav-toggler:hover .mdi { color: var(--admin-panel-color) !important; }

/* View site pill */
.viewSiteUrl {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10) !important;
    color: var(--admin-panel-color) !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 600;
    font-size: 13.5px;
    margin: 0 8px;
    transition: background .15s, box-shadow .15s;
    line-height: 1;
    display: inline-flex; align-items: center;
}
.viewSiteUrl:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .18) !important;
    box-shadow: 0 4px 14px rgba(var(--admin-panel-rgb, 132, 74, 239), .18);
    text-decoration: none;
}

/* Custom language dropdown */
.ec-lang { position: relative; margin: 0 8px; }
.ec-lang-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 14px;
    height: 36px;
    border-radius: 999px;
    background: #f5f7fb;
    border: none;
    color: #0C111C;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.ec-lang-btn:hover { background: #ecf0f6; }
.ec-lang-btn .fa-globe { color: #3b4060; font-size: 13px; }
.ec-lang-btn .ec-lang-chev { color: #64748b; font-size: 16px; transition: transform .15s; }
.ec-lang.open .ec-lang-btn .ec-lang-chev { transform: rotate(180deg); }
.ec-lang-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .18); }

.ec-lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 160px;
    list-style: none; padding: 6px; margin: 0;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    z-index: 1050;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .12s, transform .12s;
}
.ec-lang.open .ec-lang-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ec-lang-menu li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px; color: #3b4060;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ec-lang-menu li:hover { background: #f5f7fb; color: #0C111C; }
.ec-lang-menu li.active { color: var(--admin-panel-color); font-weight: 700; background: rgba(var(--admin-panel-rgb, 132, 74, 239), .08); }
.ec-lang-menu li .mdi { font-size: 18px; }

/* User chip */
.topbar .navbar-nav .nav-item.dropdown > .d-flex.align-items-center {
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    background: #f5f7fb;
    transition: background .15s;
    gap: 8px;
    cursor: pointer;
}
.topbar .navbar-nav .nav-item.dropdown > .d-flex.align-items-center:hover { background: #ecf0f6; }
.topbar .navbar-nav .nav-item.dropdown > .d-flex.align-items-center::after { display: none; }
.topbar .profile-pic {
    width: 34px !important; height: 34px !important; border-radius: 50%; object-fit: cover;
    border: 2px solid #fff;
}
.topbar .nav-item-user h5 { font-size: 14px; margin: 0; }
.topbar .navbar-nav .nav-item.dropdown > .d-flex.align-items-center .nav-link { padding: 0 !important; background: transparent !important; }

/* User dropdown menu */
.topbar .dropdown-menu {
    border: 1px solid #eef1f6;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    padding: 6px;
    min-width: 240px;
    margin-top: 8px;
}
.dropdown-user > li > a {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 14px;
    color: #3b4060 !important;
    display: flex; align-items: center; gap: 10px;
    transition: background .12s, color .12s;
}
.dropdown-user > li > a:hover {
    background: #f5f7fb !important;
    color: var(--admin-panel-color) !important;
}
.dropdown-user > li > a i { color: #8a90a6; font-size: 16px; width: 18px; }
.dropdown-user > li > a:hover i { color: var(--admin-panel-color); }
.dw-user-box .u-text h4 { color: #0C111C; }
.dw-user-box .u-text p { margin: 2px 0 0; }
.dropdown-menu > li.divider,
.dropdown-menu > li[role="separator"] { border-top: 1px solid #eef1f6; margin: 4px 0; }

/* =====================================================
   Sidebar
   ===================================================== */
/* Kill legacy orange right-border from base CSS on ALL states */
.sidebar-nav > ul > li > a,
.sidebar-nav ul li > a,
.sidebar-nav ul li ul li > a,
.sidebar-nav ul li ul li.active a,
.sidebar-nav ul li ul li a:hover {
    border-right: none !important;
}

/* Sidebar shell — locked to viewport, own its scroll */
.left-sidebar {
    background: #0C111C !important;
    border-right: none !important;
    box-shadow: 6px 0 24px rgba(0, 0, 0, .5) !important;
    position: fixed !important;
    top: 0 !important; bottom: 0 !important;
    inset-inline-start: 0 !important;   /* auto-flips in RTL: left in LTR, right in RTL */
    inset-inline-end: auto !important;
    height: 100vh !important;
    padding-top: 60px !important;
    overflow: hidden !important;
    z-index: 20;
    box-sizing: border-box !important;
}
/* Explicit RTL fallback for browsers ignoring inset-inline-* */
html[dir="rtl"] .left-sidebar,
body.rtl .left-sidebar {
    left: auto !important;
    right: 0 !important;
    box-shadow: -6px 0 24px rgba(0, 0, 0, .5) !important;
}
/* Explicit scroll region — beats every legacy inline height/position */
.scroll-sidebar {
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    padding-bottom: 24px !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box;
}
/* Neutralise any slimScroll wrapper that survived the JS unwrap */
.left-sidebar .slimScrollDiv,
.left-sidebar div.slimScrollDiv {
    height: calc(100vh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    overflow: visible !important;
    width: 100% !important;
    position: static !important;
}
.left-sidebar .slimScrollBar,
.left-sidebar .slimScrollRail { display: none !important; }

/* ── Search ─────────────────────────────────────────── */
.sidebar-search { padding: 16px 14px 8px !important; }
.sidebar-search input {
    width: 100% !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, .85) !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all .2s !important;
}
.sidebar-search input::placeholder { color: rgba(255, 255, 255, .32) !important; }
.sidebar-search input:focus {
    border-color: rgba(var(--admin-panel-rgb, 132, 74, 239), .5) !important;
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .04) !important;
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .07) !important;
}

/* ── Nav wrapper ─────────────────────────────────────── */
.sidebar-nav { background: transparent !important; padding: 0 !important; }
.sidebar-nav ul { padding: 0 10px !important; margin: 0 !important; }

/* ── Section labels ──────────────────────────────────── */
.sidebar-nav > ul > li.nav-subtitle {
    margin: 20px 0 5px !important;
    padding: 0 6px !important;
    border: none !important;
    background: transparent !important;
}
.sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span {
    color: rgba(255, 255, 255, .32) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    /* 0.9px letter-spacing: the sidebar group names run long ("RESTAURANT & DRIVER
       MANAGEMENT" is 30 chars) and at 1.8px a 30-char label needs ~240px against
       ~237px of usable width, so it wrapped to a second line. Same 10px size. */
    letter-spacing: .9px !important;
    text-transform: uppercase !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
    display: block !important;
}

/* ── List items ──────────────────────────────────────── */
.sidebar-nav ul li { list-style: none !important; margin-bottom: 3px !important; }

/* Top-level link base */
.sidebar-nav > ul > li > a {
    color: rgba(255, 255, 255, .9) !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background .2s, color .2s, border-color .2s !important;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    position: relative !important;
}

/* ── Icon Badge ──────────────────────────────────────── */
.sidebar-nav > ul > li > a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 17px !important;
    transition: background .2s, color .2s, box-shadow .2s !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* ── Hover ───────────────────────────────────────────── */
.sidebar-nav > ul > li > a:hover {
    background: rgba(255, 255, 255, .05) !important;
    color: rgba(255, 255, 255, .95) !important;
    border-color: rgba(255, 255, 255, .1) !important;
}
.sidebar-nav > ul > li > a:hover i {
    background: rgba(255, 255, 255, .11) !important;
    color: rgba(255, 255, 255, .85) !important;
}

/* ── ACTIVE — brand-color border + brand-tinted icon badge ─ */
.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li > a.active {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: 1.5px solid rgba(var(--admin-panel-rgb, 132, 74, 239), .55) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.sidebar-nav > ul > li.active > a i,
.sidebar-nav > ul > li > a.active i {
    background: var(--admin-panel-color) !important;
    color: #fff !important;
    box-shadow: 0 3px 14px rgba(var(--admin-panel-rgb, 132, 74, 239), .45) !important;
}

/* ── Expand arrow ────────────────────────────────────── */
.sidebar-nav .has-arrow::after {
    right: 12px !important;
    width: 7px !important;
    height: 7px !important;
    transition: all .22s ease !important;
}

/* ── Sub-menu container ──────────────────────────────── */
.sidebar-nav ul li > ul {
    padding: 4px 0 6px 0 !important;
    background: rgba(0, 0, 0, .18) !important;
    border-radius: 0 0 10px 10px !important;
    margin: -4px 1px 4px 1px !important;
    border: 1.5px solid rgba(var(--admin-panel-rgb, 132, 74, 239), .3) !important;
    border-top: none !important;
    /* metisMenu collapses a group by animating its height. Without clipping, the
       items of the closing group keep painting at full size and appear on top of
       the next menu item — the "Drivers overlapping Reports" effect. */
    overflow: hidden !important;
}

/* Sub-menu links */
.sidebar-nav ul li ul li > a {
    padding: 7px 12px 7px 18px !important;
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, .55) !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 400 !important;
    border: none !important;
    transition: color .18s, background .18s !important;
}
.sidebar-nav ul li ul li a::before {
    content: "" !important;
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .25) !important;
    display: inline-block !important;
    margin-right: 10px !important;
    transition: background .18s, transform .18s !important;
    border: none !important;
    position: static !important;
    flex-shrink: 0 !important;
}
.sidebar-nav ul li ul li a::after { display: none !important; }

.sidebar-nav ul li ul li a:hover {
    color: rgba(255, 255, 255, .85) !important;
    background: rgba(255, 255, 255, .05) !important;
}
.sidebar-nav ul li ul li a:hover::before { background: rgba(var(--admin-panel-rgb, 132, 74, 239), .75) !important; }

.sidebar-nav ul li ul li.active > a,
.sidebar-nav ul li ul li > a.active {
    color: var(--admin-panel-color) !important;
    background: transparent !important;
    font-weight: 500 !important;
    border: none !important;
}
.sidebar-nav ul li ul li.active > a::before,
.sidebar-nav ul li ul li > a.active::before { background: var(--admin-panel-color) !important; }

/* ── Version footer ──────────────────────────────────── */

/* ── Scrollbar ───────────────────────────────────────── */
/* Cover every scrollable node inside the sidebar (scroll-sidebar, slimScrollDiv,
   the sidebar-nav ul, and left-sidebar itself) so the thumb picks up the brand
   colour regardless of which element the browser is actually rendering. */
.left-sidebar,
.left-sidebar *,
.scroll-sidebar,
.left-sidebar .slimScrollDiv,
.left-sidebar .sidebar-nav,
.left-sidebar .sidebar-nav ul {
    scrollbar-color: var(--admin-panel-color) transparent !important;
    scrollbar-width: thin !important;
}
.left-sidebar ::-webkit-scrollbar,
.left-sidebar::-webkit-scrollbar,
.scroll-sidebar::-webkit-scrollbar { width: 6px !important; height: 6px !important; background: transparent !important; }
.left-sidebar ::-webkit-scrollbar-track,
.left-sidebar::-webkit-scrollbar-track,
.scroll-sidebar::-webkit-scrollbar-track { background: transparent !important; }
.left-sidebar ::-webkit-scrollbar-thumb,
.left-sidebar::-webkit-scrollbar-thumb,
.scroll-sidebar::-webkit-scrollbar-thumb {
    background: var(--admin-panel-color) !important;
    border-radius: 999px !important;
    border: none !important;
    box-shadow: none !important;
}
.left-sidebar ::-webkit-scrollbar-corner,
.left-sidebar::-webkit-scrollbar-corner,
.scroll-sidebar::-webkit-scrollbar-corner { background: transparent !important; }

/* ═════════════════════════════════════════════════════════════
   Mini-sidebar (collapsed) — icon-only rail + hover flyouts
   Uses very-high-specificity selectors to override Yelpify base.
   ═════════════════════════════════════════════════════════════ */

/* Sidebar itself: narrow rail, overflow visible so flyouts escape */
.mini-sidebar .left-sidebar { width: 60px !important; overflow: visible !important; }
.mini-sidebar .scroll-sidebar { overflow-y: auto !important; overflow-x: visible !important; }

/* Hide search + section labels when collapsed */
.mini-sidebar .sidebar-search,
.mini-sidebar .sidebar-nav > ul > li.nav-subtitle,
.mini-sidebar .version-info { display: none !important; }

.mini-sidebar .sidebar-nav ul { padding: 0 !important; }
.mini-sidebar .sidebar-nav #sidebarnav > li { position: relative !important; }

/* KILL Yelpify's "hover expands item to 260px + light bg" behavior */
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
    width: 44px !important;
    background: transparent !important;
}
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .hide-menu { display: none !important; }

/* Each top-level item becomes an icon-only 44px square, centered */
.mini-sidebar .sidebar-nav > ul > li > a,
.mini-sidebar .sidebar-nav #sidebarnav > li > a {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 4px auto !important;
    gap: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    overflow: visible !important;
}
.mini-sidebar .sidebar-nav > ul > li > a i,
.mini-sidebar .sidebar-nav #sidebarnav > li > a i {
    width: 34px !important; height: 34px !important;
    background: rgba(255, 255, 255, .10) !important;
    color: rgba(255, 255, 255, .90) !important;
    font-size: 17px !important;
    border-radius: 9px !important;
}
.mini-sidebar .sidebar-nav > ul > li > a .hide-menu { display: none !important; }

/* Hover: tinted icon */
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a i {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .18) !important;
    color: var(--admin-panel-color) !important;
}

/* Active: brand-color border + solid brand icon badge */

/* Hide arrows in mini mode */
.mini-sidebar .sidebar-nav .has-arrow::after { display: none !important; }

/* Collapse the in-sidebar submenus completely in mini mode (the flyout panel handles them) */
.mini-sidebar .sidebar-nav #sidebarnav > li > ul,
.mini-sidebar .sidebar-nav > ul > li > ul { display: none !important; }

/* Logo visibility: full logo in normal mode, icon-only when collapsed.
   Base CSS uses `.light-logo` / `.dark-logo` classes with a lower-specificity
   selector; my ID-based rules here override cleanly. */
.topbar .navbar-brand #small-logo { display: none !important; }
.mini-sidebar .topbar .navbar-brand #small-logo { display: inline-block !important; }

/* Cancel the base style.css rotate(180deg) it applies to the WHOLE .sidebartoggler
   button when body.mini-sidebar is set — we swap the icon class in JS instead
   (mdi-arrow-left ↔ mdi-arrow-right), which is more reliable. If the base
   rotation stays, it double-flips our icon back to pointing left. */
.mini-sidebar .topbar .top-navbar .navbar-nav > .nav-item > .nav-link.sidebartoggler,
.mini-sidebar .topbar .sidebartoggler {
    transform: none !important;
}

/* ═════════════════════════════════════════════════════════════
   #mini-hover-panel — floating flyout populated by menu.blade.php JS
   Only shown in mini-sidebar mode (JS gates it).
   ═════════════════════════════════════════════════════════════ */
#mini-hover-panel {
    position: fixed;
    left: 68px;           /* just past the 60px rail + small gap */
    min-width: 200px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    background: #131a26;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    box-shadow: 4px 6px 22px rgba(0, 0, 0, .55);
    z-index: 99999;
    display: none;
    padding: 5px;
}
#mini-hover-panel .mhp-label {
    padding: 8px 12px 7px;
    color: rgba(255, 255, 255, .95);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
#mini-hover-panel .mhp-label.has-sub {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 3px;
}
#mini-hover-panel .mhp-link {
    display: block;
    padding: 8px 12px;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    border-radius: 7px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
#mini-hover-panel .mhp-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
/* RTL: flyout appears on the left of the (right-anchored) rail */
html[dir="rtl"] #mini-hover-panel {
    left: auto;
    right: 68px;
}

/* Collapsible arrow indicator */
.sidebar-nav .has-arrow::after {
    border-color: rgba(255, 255, 255, .40) !important;
    border-width: 1.5px 0 0 1.5px !important;
    transition: transform .18s, border-color .12s;
}
.sidebar-nav .has-arrow[aria-expanded="true"]::after,
.sidebar-nav .active > .has-arrow::after,
.sidebar-nav ul li a.has-arrow:hover::after {
    border-color: #fff !important;
}
.sidebar-nav > ul > li.active > .has-arrow::after { border-color: var(--admin-panel-color) !important; }

/* Version label at the bottom */

/* =====================================================
   Footer
   ===================================================== */
.footer {
    background: #fff !important;
    border-top: 1px solid #eef1f6;
    color: #8a90a6 !important;
    font-size: 13px;
    padding: 14px 24px !important;
    text-align: center;
    box-shadow: none;
}

/* =====================================================
   Page content shell
   ===================================================== */
main.py-4 { padding: 0 !important; }
/* Give the first child inside main a subtle top margin so it doesn't
   glue to the header, without the visible gray band a padding-top would create. */
main.py-4 > * { margin-top: 0; }
.card-header {
    border-radius: 14px 14px 0 0 !important;
    background: #fff;
    border-bottom: 1px solid #eef1f6;
    padding: 16px 20px;
}
.card-body { padding: 20px; }

/* Page title header */
.page-titles {
    padding: 4px 4px 20px !important;
}
.page-titles .top-title-left .icon { margin-right: 14px !important; }
.breadcrumb-item a:hover { color: var(--admin-panel-color); }
.breadcrumb-item.active { font-weight: 600; }

/* =====================================================
   Dynamic brand color everywhere — replaces the hardcoded
   #FF7E56 / #FF683A peach from the legacy base with the
   admin's --admin-panel-color choice.
   ===================================================== */

/* Settings hub cards */
.settings-card-icon {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12) !important;
    color: var(--admin-panel-color) !important;
}
.settings-card-link:hover .settings-card-arrow {
    color: var(--admin-panel-color) !important;
}

/* Buttons */
.btn-primary,
.btn-primary.disabled,
.btn-primary:hover,
.btn-primary.disabled:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: #fff !important;
}
.btn-primary:hover { filter: brightness(.92); }
.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .25) !important;
}
.btn-warning, .btn-warning:hover, .btn-warning:focus {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--admin-panel-color) !important;
    color: #fff !important;
}

/* Text + link colors */
.text-themecolor,
.text-primary,
.text-warning,
.text-info,
html body .text-themecolor {
    color: var(--admin-panel-color) !important;
}
a { color: var(--admin-panel-color); }
/* Text links only. This rule used to match EVERY anchor, so any brand-filled
   control (buttons, active/hovered tabs, chips) got brand-coloured text on a
   brand background and its label vanished. Excluding the control classes here
   fixes it once, instead of an override per component. */
a:not(.btn):not([class*="ec-btn"]):not(.ec-head-btn):not(.nav-link):not(.ec-act):not(.settings-card-link):not(.page-link):hover,
a:not(.btn):not([class*="ec-btn"]):not(.ec-head-btn):not(.nav-link):not(.ec-act):not(.settings-card-link):not(.page-link):focus {
    color: var(--admin-panel-color);
    filter: brightness(.85);
}
.blue-text, .btn-link { color: var(--admin-panel-color) !important; }

/* Pagination */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: #fff !important;
}
.pagination > li > a.page-link { color: var(--admin-panel-color); }
.pagination > li > a.page-link:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10) !important;
    color: var(--admin-panel-color) !important;
    border-color: rgba(var(--admin-panel-rgb, 132, 74, 239), .40) !important;
}

/* Tabs */
.nav-tabs.card-header-tabs .nav-link.active,
.nav-tabs.card-header-tabs .nav-link:hover {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) var(--admin-panel-color) #fff !important;
    color: #fff !important;
}

/* Backgrounds */
.bg-theme, .bg-info { background-color: var(--admin-panel-color) !important; }

/* Checkboxes / Radios accent */
[type="checkbox"], [type="radio"] {
    accent-color: var(--admin-panel-color);
}

/* Table row indicator */

/* SweetAlert action buttons */
.swal2-actions .swal2-confirm,
.swal2-actions .swal2-styled.swal2-confirm {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
}

/* Toastr success */

/* Card head count / badges */

/* Rating stars */
ul.rating { color: var(--admin-panel-color) !important; }

/* Scrollbar — neutral subtle color everywhere (overrides the legacy peach from base) */
* { scrollbar-color: rgba(128, 128, 128, .35) transparent !important; scrollbar-width: thin !important; }
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, .35) !important;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}
::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, .55) !important; background-clip: padding-box !important; }

/* Sidebar scrollbar — light tint derived from the admin brand color so it
   automatically follows whatever color the admin sets in Branding (was hard-
   coded lavender before, which stayed purple when the brand changed to orange). */
.scroll-sidebar,
.scroll-sidebar * {
    scrollbar-color: color-mix(in srgb, var(--admin-panel-color) 45%, #ffffff 55%) transparent !important;
    scrollbar-width: thin !important;
}
.scroll-sidebar::-webkit-scrollbar,
.scroll-sidebar *::-webkit-scrollbar { width: 6px !important; height: 6px !important; background: transparent !important; }
.scroll-sidebar::-webkit-scrollbar-track,
.scroll-sidebar *::-webkit-scrollbar-track { background: transparent !important; }
.scroll-sidebar::-webkit-scrollbar-thumb,
.scroll-sidebar *::-webkit-scrollbar-thumb {
    /* Fallback for browsers without color-mix (mixes brand rgb with white via rgba stack) */
    background: color-mix(in srgb, var(--admin-panel-color) 45%, #ffffff 55%) !important;
    border-radius: 999px !important;
    border: none !important;
    background-clip: border-box !important;
    min-height: 40px !important;
}
.scroll-sidebar::-webkit-scrollbar-thumb:hover,
.scroll-sidebar *::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--admin-panel-color) 45%, #ffffff 55%) !important;
}

/* =====================================================
   Dashboard
   ===================================================== */
.dashboard-page .container-fluid { padding: 4px 4px 0; }

/* Hero welcome banner */
.ec-hero-banner {
    background: linear-gradient(120deg,
        rgba(var(--admin-panel-rgb, 132, 74, 239), .95) 0%,
        rgba(var(--admin-panel-rgb, 132, 74, 239), .78) 55%,
        #0b0f18 100%);
    border-radius: 18px;
    padding: 26px 30px;
    color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 20px;
    box-shadow: 0 12px 30px rgba(var(--admin-panel-rgb, 132, 74, 239), .18);
    position: relative; overflow: hidden;
}
.ec-hero-banner::before {
    content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: rgba(255, 255, 255, .06); top: -100px; right: -80px;
}
.ec-hero-banner::after {
    content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10); bottom: -80px; left: 30%;
}
.ec-hero-text { position: relative; z-index: 2; }
.ec-hero-text h3 { font-size: 22px; margin: 0 0 6px; color: #fff; }
.ec-hero-text p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .78); }
.ec-hero-actions { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; }
.ec-hero-btn {
    background: #fff; color: #0C111C !important;
    border-radius: 10px; padding: 10px 18px; font-weight: 600; font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none !important; transition: transform .12s, box-shadow .15s;
    border: none;
}
.ec-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .20); color: #0C111C !important; }
.ec-hero-btn-outline {
    background: transparent; color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .3);
}
.ec-hero-btn-outline:hover { background: rgba(255, 255, 255, .10); color: #fff !important; }

/* KPI cards */
.ec-kpi-row { margin: 6px -8px 4px; }
.ec-kpi-row > [class*="col-"] { padding: 0 8px; }
.ec-kpi {
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    position: relative; overflow: hidden;
    transition: transform .12s, box-shadow .15s;
}
.ec-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15, 23, 42, .06); }
.ec-kpi::before { display: none; }
.ec-kpi.kpi-brand { --kpi-accent: var(--admin-panel-color); --kpi-tint: rgba(var(--admin-panel-rgb, 132, 74, 239), .10); }
.ec-kpi.kpi-blue  { --kpi-accent: #3b82f6; --kpi-tint: rgba(59, 130, 246, .10); }
.ec-kpi.kpi-amber { --kpi-accent: #f59e0b; --kpi-tint: rgba(245, 158, 11, .10); }
.ec-kpi.kpi-green { --kpi-accent: #22c55e; --kpi-tint: rgba(34, 197, 94, .10); }

.ec-kpi-head { display: flex; align-items: center; gap: 12px; }
.ec-kpi-icon {
    background: var(--kpi-tint);
    color: var(--kpi-accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.ec-kpi-label { font-size: 13px; color: #8a90a6; font-weight: 600; }
.ec-kpi-value { font-weight: 800; color: #0C111C; line-height: 1.05; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }

/* Cards.
   No height:100% — that made every card stretch to its tallest row neighbour,
   leaving a large empty area inside the shorter one (a 5-row table beside a
   13-row one). Cards size to their own content instead. */
.ec-card .card-header { border-bottom: 1px solid #f0f2f7; }
.ec-card .card-header h5 { font-size: 15.5px; color: #0C111C; }
.ec-card .card-header small { display: block; }

/* Force rows on the dashboard to keep siblings the same height */
.dashboard-page .row { align-items: stretch; }

/* Filter row inside cards */

/* Link-style CTA */
.ec-link-btn {
    color: var(--admin-panel-color); font-weight: 600; font-size: 13px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.ec-link-btn:hover { text-decoration: underline; color: var(--admin-panel-color); }

/* Ads by Status list */
.ec-status-list { list-style: none; padding: 12px 4px 0; margin: 0; }
.ec-status-list li {
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px dashed #f0f2f7;
}
.ec-status-list li:last-child { border-bottom: none; }
.ec-status-list .ec-status-name { flex: 1; }
.ec-status-list .ec-status-count { font-weight: 700; color: #0C111C; }
.ec-status-list .ec-status-pct { color: #8a90a6; font-size: 12px; width: 44px; text-align: right; }

/* Recent ads table */
.ec-recent-table { font-size: 14px; }
.ec-recent-table thead th {
    background: #f9fafc; color: #64748b; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .4px;
    border-top: 1px solid #f0f2f7; border-bottom: 1px solid #eef1f6;
}
.ec-recent-table tbody td { border-top: 1px solid #f5f7fb;
    vertical-align: middle;
}
.ec-recent-table tbody tr:hover { background: #fafbfd; }

/* Top categories list */

/* User avatar in recent-users table */
.ec-avatar {
    border: 1px solid #eef1f6;
}

/* Pending action queue */
.ec-queue-list { list-style: none; padding: 0; margin: 0; }
.ec-queue-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: var(--q-tint, #f5f7fb);
    transition: transform .12s, box-shadow .15s;
}
.ec-queue-list li:last-child { margin-bottom: 0; }
.ec-queue-list li:hover { transform: translateX(2px); box-shadow: 0 8px 18px rgba(15, 23, 42, .05); }
.ec-queue-list .q-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--q-accent, #64748b);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
}
.ec-queue-list .q-body { flex: 1; min-width: 0; }
.ec-queue-list .q-title { font-weight: 700; font-size: 13.5px; color: #0C111C; line-height: 1.2; }
.ec-queue-list .q-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.ec-queue-list .q-cta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 999px;
    background: #fff; color: var(--q-accent, #64748b) !important;
    font-weight: 700; font-size: 13.5px;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
    transition: background .12s, color .12s;
}
.ec-queue-list .q-cta:hover { background: var(--q-accent, #64748b); color: #fff !important; }

.ec-queue-list .q-amber  { --q-accent: #f59e0b; --q-tint: rgba(245, 158, 11, .08); }
.ec-queue-list .q-blue   { --q-accent: #3b82f6; --q-tint: rgba(59, 130, 246, .08); }
.ec-queue-list .q-red    { --q-accent: #ef4444; --q-tint: rgba(239, 68, 68, .08); }
.ec-queue-list .q-green  { --q-accent: #22c55e; --q-tint: rgba(34, 197, 94, .08); }

/* =====================================================
   Foodie-only brand hooks
   Selectors that exist in this panel but not in the shared
   base — ported off the old inline `<?php echo $_COOKIE[...] ?>`
   block in layouts/app.blade.php onto the CSS variables so
   they follow the admin's colour like everything else.
   ===================================================== */

/* Payout create screens */

/* Category slider (POS / menu builder) */

/* Dashboard analytics + order status widgets */

/* Print / secondary outline button */

/* Card-header tab strip */

/* Custom check/radio inside edit forms (base draws these with pseudo-elements) */
.edit-form-group .form-check [type="checkbox"]:checked + label::after,
.edit-form-group .form-check [type="radio"]:checked + label::before {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
}
[type="checkbox"]:checked + label::before {
    border-right: 2px solid var(--admin-panel-color) !important;
    border-bottom: 2px solid var(--admin-panel-color) !important;
}
[type="radio"]:checked + label::after,
[type="radio"].with-gap:checked + label::after { background-color: var(--admin-panel-color) !important; }
[type="radio"]:checked + label::after,
[type="radio"].with-gap:checked + label::before,
[type="radio"].with-gap:checked + label::after { border: 2px solid var(--admin-panel-color) !important; }

/* Pricing cards */
.pricing-card-btm .btn:hover {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}

/* Unread chat badge in listing action columns */
.table tr td .action-btn .chat-count-message .unread-count {
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}

/* Misc legacy text hooks */
.bellow-text ul li > span,
.ai-text-animation { color: var(--admin-panel-color) !important; }
html body blockquote { border-left: 5px solid var(--admin-panel-color); }

/* Extra KPI accents — this dashboard runs 7 stat cards. */
.ec-kpi.kpi-purple { --kpi-accent: #8b5cf6; --kpi-tint: rgba(139, 92, 246, .10); }
.ec-kpi.kpi-rose   { --kpi-accent: #f43f5e; --kpi-tint: rgba(244, 63, 94, .10); }
.ec-kpi.kpi-cyan   { --kpi-accent: #06b6d4; --kpi-tint: rgba(6, 182, 212, .10); }

/* Order-status tiles — the dashboard's status strip, restyled to sit alongside
   the KPI cards instead of the old flat link rows. */

/* Colour settings grid (Settings → Global) */
.ec-color-input { display: flex; align-items: center; gap: 10px; }
.brand-color-input {
    width: 60px; height: 38px; padding: 2px;
    border: 1px solid #d1d5db; border-radius: 8px;
    cursor: pointer; background: #fff; flex: 0 0 60px;
}
.ec-color-hex {
    font-size: 13px; font-weight: 600; letter-spacing: .3px;
    color: #3b4060; background: #f5f7fb;
    border: 1px solid #eef1f6; border-radius: 8px;
    padding: 7px 10px; text-transform: uppercase;
}

/* Clickable KPI cards — the dashboard renders some tiles as <a> so the whole card
   is a link. Anchors are inline and inherit link colour, so restore block layout
   and the card's own text colours. */
a.ec-kpi, a.ec-kpi:hover, a.ec-kpi:focus { display: block; text-decoration: none; color: inherit; }
a.ec-kpi .ec-kpi-value { color: #0C111C; }
a.ec-kpi .ec-kpi-label { color: #8a90a6; }

/* =====================================================
   Listing pages — compatibility layer
   All 46 index views share one structure (.page-titles →
   .admin-top-section/.top-title-section → .card.border → .table).
   Rather than rewrite each view's markup — every one carries its own
   Firestore/DataTables wiring — the existing DOM is mapped onto the
   same visual language as the ec-* components used elsewhere.
   Convert a page to real ec-* markup only when it also needs new
   structure (KPI strip, bulk bar); the result looks identical.
   ===================================================== */

/* ── Page head: title + breadcrumb ───────────────────────────────── */
.page-wrapper .row.page-titles {
    background: transparent;
    box-shadow: none;
    border: 0;
    margin: 0 0 18px;
    align-items: center;
}
.page-wrapper .row.page-titles h3,
.page-wrapper .row.page-titles h3.text-themecolor {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0C111C !important;
    margin: 0;
    line-height: 1.25;
}
.page-wrapper .row.page-titles .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
}
.page-wrapper .row.page-titles .breadcrumb li,
.page-wrapper .row.page-titles .breadcrumb .breadcrumb-item.active { color: #8a90a6; }
.page-wrapper .row.page-titles .breadcrumb a { color: var(--admin-panel-color); font-weight: 600; }

/* ── Section header: icon + title + counter + filters ────────────── */
.admin-top-section .top-title-section {
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
}
.admin-top-section .top-title-section .top-title-left { gap: 14px; min-width: 0; }
.admin-top-section .top-title-section .top-title-left h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0C111C !important;
    line-height: 1.3;
}
/* The leading glyph becomes a brand-tinted rounded tile. */
.admin-top-section .top-title-section .top-title-left .icon {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 13px;
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12);
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 0 !important;
}
.admin-top-section .top-title-section .top-title-left .icon img { max-width: 24px; height: auto; }

/* Record-count pill */
.admin-top-section .top-title-section .top-title-left .counter {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12);
    color: var(--admin-panel-color);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    margin-left: 12px !important;
    white-space: nowrap;
}

/* Filter controls — squared-off inputs to match ec-filter-card */

/* ── Table card ──────────────────────────────────────────────────── */
.admin-top-section .card.border,
.page-wrapper .container-fluid > .card.border {
    border: 1px solid #eef1f6 !important;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.admin-top-section .card.border > .card-body { padding: 8px 16px 16px; }

/* ── Tables ──────────────────────────────────────────────────────── */
/* Anchored on `.dataTable` too: DataTables adds its classes after init and
   would otherwise win on specificity once the table renders. */
.admin-top-section .card .table thead th,
.admin-top-section .card table.dataTable thead th,
.admin-top-section .card table.dataTable thead > tr > th {
    background: #fafbfd;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700 !important;
    text-transform: none;
    letter-spacing: 0;
    border-top: 0;
    border-bottom: 1px solid #eef0f4;
    padding: 14px 16px !important;
}
.admin-top-section .card .table tbody td,
.admin-top-section .card table.dataTable tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-top: 1px solid #f1f3f7;
    font-size: 13.5px;
    color: #3b4060;
}
/* Uniform white rows — the hover tint alone signals the active row. */
.admin-top-section .card table.dataTable tbody tr.odd,
.admin-top-section .card table.dataTable tbody tr.even,
.admin-top-section .card table.dataTable tbody tr.odd > *,
.admin-top-section .card table.dataTable tbody tr.even > * {
    background: #fff !important;
    box-shadow: none !important;
}
.admin-top-section .card .table tbody tr:hover > td {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .045) !important;
}

/* DataTables chrome (search / length / info / paging) */
.admin-top-section .dataTables_wrapper .dataTables_filter input,
.admin-top-section .dataTables_wrapper .dataTables_length select {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    height: 38px;
    padding: 0 12px;
    font-size: 13.5px;
    color: #0C111C;
}
.admin-top-section .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .16);
    outline: none;
}
.admin-top-section .dataTables_wrapper .dataTables_length label,
.admin-top-section .dataTables_wrapper .dataTables_info { color: #8a90a6; font-size: 12.5px; }
.admin-top-section .dataTables_wrapper .paginate_button {
    border-radius: 8px !important;
    border: 1px solid #eef1f6 !important;
    margin: 0 2px;
}
.admin-top-section .dataTables_wrapper .paginate_button.current {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}

/* Row action buttons */
.admin-top-section .table .action-btn a,
.admin-top-section .table .action-btn button {
    border-radius: 9px;
    transition: background .15s, color .15s;
}
.admin-top-section .table .action-btn a:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12);
    color: var(--admin-panel-color);
}

/* =====================================================
   Form pages (create / edit / save) — compatibility layer
   55 of 58 form views share the same skeleton:
   .page-titles → .card → .card-header .card-header-tabs
   → fieldset > legend > .form-group.row > .control-label + .form-control
   Mapped onto the ec-form-card look without touching the markup, so
   validation hooks and per-view Firestore wiring stay untouched.
   ===================================================== */

.page-wrapper .container-fluid > .cat-edite-page > .card,
.page-wrapper .container-fluid > .max-width-box > .card,
.page-wrapper .container-fluid > .card {
    border: 1px solid #eef1f6;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
}

/* Tab strip in the card header */
.card > .card-header .nav-tabs.card-header-tabs {
    border-bottom: 0;
    gap: 4px;
}
.card > .card-header .nav-tabs.card-header-tabs .nav-link {
    border: 0;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    transition: background .15s, color .15s;
}
/* Hovering a tab fills it with the brand colour, so its label must be the
   contrast colour — brand-on-brand made the text disappear. This is the rule
   that was winning; overrides added elsewhere lost to its (0,6,0) specificity. */
.card > .card-header .nav-tabs.card-header-tabs .nav-link:hover {
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    border-color: transparent !important;
}
.card > .card-header .nav-tabs.card-header-tabs .nav-link.active {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}

/* Fieldset sections */
/* The two payout screens paint their legends solid — keep those readable. */

/* Labels, inputs, help text */
.page-wrapper .form-group .control-label {
    font-size: 13px;
    font-weight: 600;
    color: #3b4060;
    padding-top: 10px;
}
.page-wrapper .form-group .form-control {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    min-height: 42px;
    font-size: 14px;
    color: #0C111C;
    box-shadow: none;
}
.page-wrapper .form-group textarea.form-control { min-height: auto; }
.page-wrapper .form-group .form-control:focus {
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
}

/* Inline validation */
.page-wrapper .form-group .form-control.is-invalid,
.page-wrapper .form-group .form-control.error { border-color: #ef4444; }
/* Several screens render `<div class="error_top"></div>` with no inline
   display:none, so an empty pink bar sat above the form until a validation
   error filled it. Hide it whenever it has no content. */
.page-wrapper .error_top:empty { display: none !important; }
.page-wrapper .error_top {
    background: #fdecec;
    color: #c0392b;
    border: 1px solid #f6c9c9;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 14px;
}

/* Action row */
.page-wrapper .form-group .btn,
.page-wrapper .card-body > .btn { border-radius: 10px; font-weight: 600; padding: 10px 22px; }

/* =====================================================
   Detail / view pages
   ===================================================== */

/* Chart containers — the dashboard's charts run maintainAspectRatio:false, which
   makes Chart.js size the canvas to its parent. The parent therefore needs an
   explicit height, or the canvas grows every resize tick and stretches the card. */
.ec-chart-box { position: relative; width: 100%; }
.ec-chart-box > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* =====================================================
   Interactive states for the clickable dashboard cards
   These tiles are <a> elements, so without explicit rules their
   hover / focus / selection appearance falls through to browser and
   base-theme defaults (which render as a flat grey wash). Pin all
   three to the brand instead.
   ===================================================== */

/* Selection — brand tint rather than the default blue/grey block. */
::selection      { background: rgba(var(--admin-panel-rgb, 132, 74, 239), .18); color: inherit; }
::-moz-selection { background: rgba(var(--admin-panel-rgb, 132, 74, 239), .18); color: inherit; }

/* Hover: keep the card white and lead with the accent border + lift. */
a.ec-kpi,
a.ec-kpi:link,
a.ec-kpi:visited { background: #fff; }

a.ec-kpi:hover,
a.ec-kpi:focus,
a.ec-kpi:active {
    background: #fff;
    border-color: rgba(var(--admin-panel-rgb, 132, 74, 239), .45);
    box-shadow: 0 12px 24px rgba(var(--admin-panel-rgb, 132, 74, 239), .12);
    text-decoration: none;
}
a.ec-kpi:hover .ec-kpi-icon { transform: scale(1.06); }
.ec-kpi-icon { transition: transform .15s; }

/* Keyboard focus stays visible; mouse clicks don't get a lingering ring. */
a.ec-kpi:focus,
a.ec-status-tile:focus,
.ec-hero-btn:focus { outline: none; }

a.ec-kpi:focus-visible,
a.ec-status-tile:focus-visible,
.ec-hero-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .35);
}

/* Hero buttons sit on the brand banner — lock their states so they never
   pick up a grey/blue default fill. */
.ec-hero-btn:hover,
.ec-hero-btn:focus,
.ec-hero-btn:active { text-decoration: none; }

/* Chart sizes — the wide time-series card gets more room than the doughnut cards,
   which also carry a legend list underneath. */

/* Card header with a supporting subtitle */
.ec-card > .card-header h5 { font-size: 16px; color: #0C111C; }
.ec-card > .card-header small { font-size: 12.5px; display: block; margin-top: 2px; }

/* "View all" link in card headers */

/* Doughnut legend rows sit tight under their chart */
.ec-card .ec-status-list { padding-top: 6px; }
.ec-card .ec-status-list .dot { flex: 0 0 8px; }

/* DataTables tints the whole sorted column (.sorting_1) — reads as an accidental
   highlight rather than a sort cue. Drop the tint; the header arrow already says
   which column is sorted. */
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { background-color: #fafbfd !important; }

/* KPI / status cards: always white, in every interaction state.
   These are <a> elements, so browsers apply their own affordances — the grey wash
   is Chrome's drag ghost, which appears when a link is dragged rather than clicked.
   user-drag:none stops the ghost; the rest pins the surface so no UA or base-theme
   state can tint it. */
a.ec-kpi,
a.ec-kpi:link,
a.ec-kpi:visited,
a.ec-kpi:hover,
a.ec-kpi:focus,
a.ec-kpi:active,
a.ec-kpi:focus-within,
a.ec-status-tile,
a.ec-status-tile:link,
a.ec-status-tile:visited,
a.ec-status-tile:hover,
a.ec-status-tile:focus,
a.ec-status-tile:active,
a.ec-status-tile:focus-within {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    user-drag: none;
}
a.ec-kpi *,
a.ec-status-tile * { -webkit-user-drag: none; user-drag: none; }

/* Card tiles are links, not prose. Browsers therefore give them a selection
   highlight (the grey wash) when a drag crosses them. Nothing in any stylesheet
   paints that — it is the UA's own selection layer, so it can only be removed by
   making the tiles unselectable. */
a.ec-kpi,
a.ec-status-tile,
.ec-kpi,
.ec-status-tile {
    -webkit-user-select: none;
    user-select: none;
}
a.ec-kpi::selection,       a.ec-kpi *::selection,
a.ec-status-tile::selection, a.ec-status-tile *::selection { background: transparent; }

/* Compact table for the narrow col-lg-4 panels — smaller avatars and tighter
   padding so a 4-column table still reads well at a third of the width. */

/* Status list rows link through to the filtered order list. */
.ec-status-list a.ec-status-name { color: #3b4060; text-decoration: none; }
.ec-status-list a.ec-status-name:hover { color: var(--admin-panel-color); }

/* ── KPI tiles are <div onclick>, not <a> ────────────────────────────────────
   They were anchors, which is where the grey wash came from: browsers apply
   their own link affordances (drag ghost / selection layer) that no background
   override can reach. Plain divs have no link semantics, so there is nothing to
   grey out. This is how these tiles worked originally. */
.ec-kpi[onclick] { cursor: pointer; }
.ec-kpi, .ec-status-tile { height: auto; }

/* Compact spacing — the panels were carrying a lot of dead vertical space. */
.ec-kpi { padding: 16px 18px 14px; }
.ec-kpi-head { margin-bottom: 8px; }
.ec-kpi-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 19px; }
.ec-kpi-value { font-size: 24px; margin-bottom: 6px; }
.ec-kpi-row { margin-bottom: 0; }

.ec-card > .card-header { padding: 13px 18px; }
.ec-card > .card-body { padding: 14px 18px; }
.ec-card > .card-body.p-0 { padding: 0 !important; }
.ec-status-list li { padding: 6px 4px; font-size: 13px; }

.ec-recent-table thead th { padding: 10px 14px; }

/* ── Equal-height rows ───────────────────────────────────────────────────────
   Cards in a marked row match the tallest card, and their content grows into the
   leftover space so the bottom edges line up — instead of a short card ending
   early and leaving a gap beside its taller neighbour.
   Charts stretch; tables distribute their rows over the available height. */
.ec-equal-row > [class*="col-"] { display: flex; }
.ec-equal-row > [class*="col-"] > .ec-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ec-equal-row .ec-card > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ec-equal-row .ec-card > .card-body > .table-responsive { flex: 1 1 auto; }

/* height:100% lets the browser spread the rows over the card's full height. */
.ec-equal-row .ec-recent-table { height: 100%; }

/* min-height keeps Chart.js from ever measuring a zero-height parent mid-layout. */
.ec-equal-row .ec-chart-box { flex: 1 1 auto; height: auto; min-height: 200px; }

/* Eighth KPI accent — categories. */
.ec-kpi.kpi-indigo { --kpi-accent: #4f46e5; --kpi-tint: rgba(79, 70, 229, .10); }

/* =====================================================
   RTL — sidebar
   This file loads AFTER style_rtl.css, so every directional rule above silently
   wins over the RTL sheet unless it is mirrored here. Without these the submenu
   arrows and bullet spacing stay pinned to the left-hand (LTR) edge in Arabic.
   ===================================================== */

/* Expand arrow flips to the inner edge (both rules above set `right`). */
html[dir="rtl"] .sidebar-nav .has-arrow::after,
body.rtl .sidebar-nav .has-arrow::after {
    right: auto !important;
    left: 12px !important;
}

/* Sub-item bullet sits to the right of its label. */
html[dir="rtl"] .sidebar-nav ul li ul li > a::before,
body.rtl .sidebar-nav ul li ul li > a::before {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* Item icons lead from the right. */
html[dir="rtl"] .sidebar-nav ul li a i,
body.rtl .sidebar-nav ul li a i {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* The active state is a filled pill in this design, not a side border. Cancel the
   legacy 3px marker style_rtl.css adds so the two don't double up. */
html[dir="rtl"] .sidebar-nav > ul > li > a,
html[dir="rtl"] .sidebar-nav > ul > li.active > a,
body.rtl .sidebar-nav > ul > li > a,
body.rtl .sidebar-nav > ul > li.active > a {
    border-right: none !important;
    border-left: none !important;
}

/* Search field and group labels read right-to-left. */
html[dir="rtl"] .sidebar-search input,
body.rtl .sidebar-search input { text-align: right; }
html[dir="rtl"] .sidebar-nav > ul > li.nav-subtitle,
body.rtl .sidebar-nav > ul > li.nav-subtitle { text-align: right; }

/* Flyout opens toward the page, i.e. left of the right-anchored rail. */
html[dir="rtl"] #mini-hover-panel,
body.rtl #mini-hover-panel {
    left: auto !important;
    right: 68px !important;
    text-align: right;
}

/* Record-count pill in a list card's header (mirrors the counter the legacy
   listing chrome showed beside the page title). */

/* Filter row labels line up with the ec-form-label scale. */
.ec-filter-row .ec-filter-label { display: block; }

/* ── Listing row internals ───────────────────────────────────────────────────
   The rows in these tables are built by each page's own JS, which emits the
   legacy `.action-btn` strip and inline-sized <img> thumbnails. Mapping those
   onto the ec-act / ec-list-thumb look here restyles every listing at once,
   instead of rewriting the row builder in ~46 views. */

/* Action strip: each <a> becomes a square icon button. */
.ec-list-table .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}
.ec-list-table .action-btn > a {
    background: transparent;
    color: #8a90a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.ec-list-table .action-btn > a:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10);
    color: var(--admin-panel-color);
    text-decoration: none;
}

/* Row thumbnails — the JS sets width/height inline, so these need !important. */
.ec-list-table tbody td img:not(.ec-avatar) {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover;
    background: #f5f7fb;
}
/* Rating stars and other inline glyph images must not be resized. */
.ec-list-table tbody td ul.rating img,
.ec-list-table tbody td img.no-thumb {
    width: auto !important;
    height: auto !important;
    border-radius: 0;
}

/* Header select-all cell keeps its inline delete link tidy. */

/* DataTables search + export buttons sit on one line above the table. */
.ec-list-card .dataTables_filter { float: none; text-align: right; margin-bottom: 10px; }
.ec-list-card .dataTables_filter input {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    margin-left: 8px;
}
.ec-list-card .dataTables_filter input:focus {
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
    outline: none;
}

/* ── Filter card: select2 + actions ──────────────────────────────────────────
   These filters are select2 widgets, which hide the native <select> and insert
   their own container — so styling `.form-control` alone leaves them unstyled.
   Match them to the plain inputs beside them. */
.ec-filter-card .ec-filter-label { display: block !important; }
.ec-filter-card .select2-container--default .select2-selection--single {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
/* The selected value shares the box with a clear (×) button and the caret. With
   no right padding the label ran underneath both, so it looked cut off and the ×
   sat right against the text. Reserve room for both and ellipsize cleanly. */
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0C111C;
    font-size: 14px;
    line-height: 1.4;
    padding: 0 44px 0 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
    /* style.css:13386 caps every select2 label at `max-width: 107px`, so long
       values were clipped regardless of how wide the field itself was. */
    max-width: none !important;
}

/* Clear button: pulled out of the text flow and parked left of the caret, so the
   two controls never crowd the label or each other. */
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 4px;
    float: none !important;
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
    color: #9aa1b4;
    cursor: pointer;
}
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #ef4444;
}
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #b3b9c9; }
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 8px;
}
.ec-filter-card .select2-container--default.select2-container--focus .select2-selection--single,
.ec-filter-card .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
}
/* Dropdown list — the default renders a black highlight bar. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected="true"] {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12) !important;
    color: var(--admin-panel-color) !important;
}
.select2-dropdown {
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    overflow: hidden;
}

/* Action row: export dropdown + reset, right-aligned. */
.ec-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ec-filter-actions .dt-buttons { margin: 0; float: none; }
.ec-filter-actions .dt-buttons .btn,
.ec-filter-actions .dt-button,
#ec-export-mount .dt-buttons .btn,
#ec-export-mount .dt-button {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10) !important;
    border: 1px solid rgba(var(--admin-panel-rgb, 132, 74, 239), .28) !important;
    color: var(--admin-panel-color) !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.ec-filter-actions .dt-buttons .btn:hover,
.ec-filter-actions .dt-button:hover,
#ec-export-mount .dt-buttons .btn:hover,
#ec-export-mount .dt-button:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .18) !important;
}
.ec-btn-ghost {
    background: #fff;
    border: 1px solid #e2e6ef;
    color: #3b4060;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
}
.ec-btn-ghost:hover { background: #f5f7fb; color: #0C111C; }

/* "Show N entries" sits alone above the table now that search moved out. */

/* ============================================================
   Listing page — alignment, checkboxes, actions, dropdowns
   ============================================================ */

/* ── Filter row ──────────────────────────────────────────────────────────────
   Give every field the same two-line rhythm (label, then control) so the search
   input and the select2 widgets sit on a shared baseline, and add column gaps. */
/* Each filter column is a 2-row grid: a fixed 26px label row and a fixed 42px
   control row. Because both track sizes are explicit, every control lands on the
   same baseline whether its label renders, wraps, or is missing entirely — the
   alignment no longer depends on the label's own box. select2's injected
   container and a plain <input> both occupy row 2. */
.ec-filter-card .ec-filter-row > [class*="col-"] {
    display: grid;
    grid-template-rows: 26px 42px;
    align-content: start;
}
/* The actions column is a single full-width row, not a label+control pair. */
.ec-filter-card .ec-filter-row > .col-12 { display: block; }

.ec-filter-card .ec-filter-row .ec-filter-label {
    grid-row: 1;
    display: block !important;
    margin: 0 !important;
    align-self: end;
    padding-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #5a6179;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Row 2 holds the control.
   box-sizing MUST be border-box here: these controls inherit content-box, so
   `width:100%` resolved to 100% of the column's content box PLUS their own padding
   and border — about 26px of overflow each, which swallowed the whole gutter and
   made adjacent fields look welded together. */
.ec-filter-card .ec-filter-row > [class*="col-"] > .form-control:not(.select2-hidden-accessible),
.ec-filter-card .ec-filter-row > [class*="col-"] > .select2-container {
    grid-row: 2;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 42px;
    margin: 0;
}
/* The base theme leaves .select2-container `position: absolute` (it only resets it
   to static inside `.select-box`, a wrapper this layout doesn't use). While
   absolute, `width:100%` resolves against the containing block's PADDING box — the
   full 211px column — instead of its 183px content box, so each widget overflowed
   by exactly the gutter and adjacent filters appeared welded together. Putting it
   back in flow makes 100% mean the content box. */

/* The original <select> stays in the DOM (marked `select2` / `select2-hidden-
   accessible`) purely for accessibility. Never size it: select2 copies its width
   onto the visible container. */
.ec-filter-card .ec-filter-row > [class*="col-"] > select.select2,
.ec-filter-card .ec-filter-row > [class*="col-"] > .select2-hidden-accessible {
    grid-row: 2;
    width: 1px !important;
    max-width: 1px !important;
}
.ec-filter-card .ec-filter-row .select2-container--default .select2-selection--single { height: 42px; }

/* Horizontal breathing room between filter columns.
   The controls fill 100% of their column, so the visible gap is entirely the
   column gutter. My earlier override set 10px — narrower than Bootstrap's own
   15px — which made the fields read as touching. 14px per side gives a clear
   28px channel between adjacent controls. */
.ec-filter-card .ec-filter-row {
    row-gap: 18px;
    margin-left: -14px !important;
    margin-right: -14px !important;
}
.ec-filter-card .ec-filter-row > [class*="col-"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* ── select2 dropdown ────────────────────────────────────────────────────────
   The panel is appended to <body> and sizes to its content, so a long option
   made it wider than the field it belongs to. Clamp it to the trigger's width. */
/* The base theme sets `.select2-container--open .select2-dropdown{min-width:250px}`,
   which floors every panel at 250px and made it overhang a 183px trigger. The panel
   is normally appended to <body>, out of reach of any ancestor selector, so these
   filters pass `dropdownParent: jQuery('.ec-filter-card')` and the panel renders
   inside the card — letting it be scoped here and clearing the floor so select2's
   own inline width (copied from the trigger) applies.
   NOT `dropdownCssClass`: that option lives in select2's full/compat build, and this
   app ships the standard build, where it throws and select2 fails to initialise. */
.ec-filter-card .select2-container--open .select2-dropdown,
.ec-filter-card .select2-dropdown {
    min-width: 0 !important;
    max-width: none;
    box-sizing: border-box;
}
.select2-container .select2-results__option {
    font-size: 13.5px;
    padding: 8px 12px;
    white-space: normal;
    word-break: break-word;
}

/* ── Row checkboxes ──────────────────────────────────────────────────────────
   Deliberately NO appearance/size rules here: `input.ec-check` is already fully
   styled by the ec-* component rules (custom 20px rounded box with a brand fill
   and white tick). Anything declared here would override that and fall back to
   a plain native checkbox. Only layout of the containing cell belongs here. */
/* Header and body checkbox cells must share identical geometry.
   Two things break that by default:
     1. DataTables Responsive gives `td.dtr-control` padding-left:30px — body rows
        only, never the header, so the column visibly steps sideways.
     2. The base theme adds its own padding to `.delete-all`.
   Zero the padding on both and centre the control, so header and rows land on the
   same axis whatever those plugins add. */
/* NOTE: DataTables Responsive REPLACES the class on the first body cell with
   `dtr-control`, so `.ec-check-col` survives on the <th> but never on the <td>.
   The body selectors below therefore target `td.dtr-control` and the first cell
   directly — matching on `.ec-check-col` alone silently missed every row. */
.ec-list-table th.ec-check-col,
.ec-list-table td.ec-check-col,
.ec-list-table th.delete-all,
.ec-list-table td.delete-all,
.ec-list-table > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable > tbody > tr > td.dtr-control {
    max-width: 48px !important;
    padding: 0 !important;
}
/* Responsive draws a green +/- expand pip via ::before on that same cell; it would
   sit under the checkbox. */
.ec-list-table > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { display: none !important; }

/* Centre the control itself rather than relying on text-align alone. */
.ec-list-table th.ec-check-col > input[type="checkbox"],
.ec-list-table td.ec-check-col > input[type="checkbox"],
.ec-list-table > tbody > tr > td.dtr-control > input[type="checkbox"] {
    display: inline-block !important;
}
/* Suppress the theme's pseudo-element checkbox art on any stray trailing label. */
.ec-list-table input[type="checkbox"] + label::before,
.ec-list-table input[type="checkbox"] + label::after { content: none !important; }
.ec-list-table td.ec-check-col label,
.ec-list-table th.ec-check-col label { display: none !important; }

/* ── Action icons ────────────────────────────────────────────────────────────
   One uniform muted strip that picks up the brand on hover, instead of a
   different hue per action (green/purple/cyan/red). */
.ec-list-table .action-btn a i.mdi,
.ec-list-table td > span.action-btn a i.mdi,
.ec-list-table tr td > span.action-btn a i[class*="mdi-"] {
    color: #8a90a6 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
}
.ec-list-table .action-btn a:hover i.mdi,
.ec-list-table td > span.action-btn a:hover i[class*="mdi-"] {
    color: var(--admin-panel-color) !important;
}

/* ── Sorting affordance ──────────────────────────────────────────────────────
   Only show the sort arrow on columns that are actually sortable. */
.ec-list-table thead th.sorting_disabled::before,
.ec-list-table thead th.sorting_disabled::after { display: none !important; }

/* List table top bar: length menu left, record-count info right. Both are
   emitted by DataTables via the `dom` layout string. */
.ec-list-card .ec-dt-top { margin: 0 0 14px; }
.ec-list-card .ec-dt-info { text-align: right; }
.ec-list-card .ec-dt-info .dataTables_info {
    /* DataTables floats this left by default, which pinned it to the left edge of
       its half-width column — i.e. the middle of the card. Unfloat it so the
       column's text-align:right can carry it to the right edge. */
    float: none !important;
    display: block;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
.ec-list-card .ec-dt-top .dataTables_length { float: none; margin: 0; }
.ec-list-card .ec-dt-top .dataTables_length label { margin: 0; color: #8a90a6; font-size: 13px; }
@media (max-width: 575px) {
    .ec-list-card .ec-dt-info { text-align: left; margin-top: 8px; }
}

/* Date-range picker used as a filter control — make the div look like the inputs
   beside it (it is a <div>, not an <input>, so it gets no form-control sizing). */
.ec-filter-card .ec-daterange {
    display: flex;
    overflow: hidden;
}

/* Legacy checkbox headers.
   Pages not yet structurally ported keep `<th class="delete-all">`, which holds the
   select-all checkbox AND the "All" bulk-delete link. That cell can't centre a lone
   control the way a ported `th.ec-check-col` does, so the header checkbox drifted a
   few px from the rows below it. Where the header is still the legacy cell, anchor
   both header and body cells to the same left offset instead of centring. */
.ec-list-table thead th.delete-all {
    text-align: left !important;
    padding-left: 16px !important;
    white-space: nowrap;
    width: auto !important;
    max-width: none !important;
}
.ec-list-table thead th.delete-all > input[type="checkbox"] { margin: 0 8px 0 0 !important; }
.ec-list-table thead th.delete-all label { margin: 0 !important; font-weight: 600; }

/* Must out-specify the centring override above, which uses
   `table.dataTable.dtr-inline.collapsed > … td.dtr-control` (four classes). */

/* Date-range pickers rendered as a <div> rather than an <input> get no field
   sizing from Bootstrap, so they floated as bare text next to the real controls. */
.ec-filter-card .ec-filter-row #daterange,
.ec-filter-card .ec-filter-row .ec-daterange {
    grid-row: 2;
    box-sizing: border-box !important;
    display: flex !important;
    height: 42px;
    width: 100% !important;
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    padding: 0 10px 0 12px;
    font-size: 14px;
    color: #0C111C;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.ec-filter-card .ec-filter-row #daterange .fa,
.ec-filter-card .ec-filter-row .ec-daterange .fa { color: #8a90a6; }

/* Export group inside the filter header stays on one line. */
.ec-filter-actions .dt-buttons,
#ec-export-mount .dt-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 0; float: none; }

/* Checkbox column: header and body cells must resolve to identical padding, or the
   centred control sits at a different offset in each. `.ec-list-table thead th`
   applies 16px horizontally, so this needs a selector that outranks it on both
   halves of the table. */
table.dataTable.ec-list-table thead th.ec-check-col,
table.dataTable.ec-list-table tbody td.ec-check-col,
table.dataTable.ec-list-table tbody td.dtr-control,
table.dataTable.dtr-inline.collapsed.ec-list-table tbody td.dtr-control {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Centre the control itself rather than relying on the cell's text-align, which the
   theme's positioning rules on checkboxes can defeat in body rows. */
table.dataTable.ec-list-table thead th.ec-check-col > input[type="checkbox"],
table.dataTable.ec-list-table tbody td.ec-check-col > input[type="checkbox"],
table.dataTable.ec-list-table tbody td.dtr-control > input[type="checkbox"] {
    display: block !important;
    margin: 0 auto !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

/* Row action controls: pin the table icon size so the glyph set reads uniformly. */
/* The legacy .action-btn cell added its own spacing/colour on the anchors it held;
   ec-actions owns layout now, so neutralise the leftovers. */

/* ------------------------------------------------------------------
   Row action strip — normalised in CSS rather than markup. Pages build their
   action column in several shapes: a Blade <td>, a JS string, an <a>, a
   <button>, or (dynamic notifications) a bare tooltip <i> with its own utility
   colour. Styling the container's children covers all of them uniformly, so a
   page that isn't rewritten still gets the same strip.
   ------------------------------------------------------------------ */
/* NB: the cell itself must stay `table-cell`. Giving a <td> display:flex takes it
   out of the table's box model, so the browser generates a phantom anonymous cell
   for the leftover width — that was the empty bordered column after "Actions".
   Only the inner <span> wrapper (POS builds one) may be a flex row; the controls
   are inline-flex chips, so they line up on their own inside a plain cell. */
table.ec-list-table td.action-btn,
table.ec-list-table td.ec-actions {
    display: table-cell !important;
}
table.ec-list-table span.action-btn,
table.ec-list-table span.ec-actions {
    display: inline-flex; align-items: center; justify-content: flex-start;
}
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .action-btn > button.ec-act,
table.ec-list-table .action-btn > i,
table.ec-list-table td.ec-actions > a.ec-act,
table.ec-list-table td.ec-actions > button.ec-act {
    border-radius: 8px;
    background: transparent;
    border: 0;
    margin: 0; padding: 0;
    color: #8a90a6 !important;      /* beats .text-dark / theme link colour */
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
    transition: background .15s, color .15s;
}
table.ec-list-table .action-btn > a > i,
table.ec-list-table .action-btn > button > i,
table.ec-list-table td.ec-actions > a > i { color: inherit !important; }

table.ec-list-table .action-btn > a:hover,
table.ec-list-table .action-btn > button:hover,
table.ec-list-table .action-btn > i:hover,
table.ec-list-table td.ec-actions > a:hover,
table.ec-list-table td.ec-actions > button:hover {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10);
    color: var(--admin-panel-color) !important;
}

/* ------------------------------------------------------------------
   Column overflow. The listings carry DataTables' `nowrap` class, so a cell
   whose column is narrower than its text spills over the neighbouring cell
   instead of wrapping — the overlapping "meshed" text. Cells wrap instead.
   ------------------------------------------------------------------ */
table.ec-list-table.nowrap th,
table.ec-list-table.nowrap td,
table.ec-list-table th,
table.ec-list-table td {
    white-space: normal;   /* wrap at spaces; no mid-word breaks */
    vertical-align: middle;
}
/* Keep the controls themselves on one line. */
table.ec-list-table td.ec-check-col,
table.ec-list-table td.action-btn,
table.ec-list-table td.ec-actions { white-space: nowrap; }

/* Now that cells wrap, DataTables' auto width can squeeze a short-header column
   (e.g. "Type") down to a few characters and break the word mid-way. A floor on
   data columns keeps them readable; the control columns keep their own widths. */
/* Let the row scroll rather than cram when the sum of the floors exceeds the card. */
.ec-list-card .table-responsive { overflow-x: auto; }

/* Thumbnail cells: the row builders wrap the image in a block-level `div.any`,
   which pushed the label onto its own line. Laying the cell out as a flex row
   puts the label beside the thumbnail. */
/* Same rule as the action cell: the <td> stays a table-cell, and the thumbnail
   wrapper goes inline-block so the label sits beside it instead of below. */
table.ec-list-table tbody td > div.any {
    margin: 0 10px 0 0;
    display: inline-block;
    vertical-align: middle;
}
table.ec-list-table tbody td:has(> div.any) { white-space: nowrap; vertical-align: middle; }
/* Keep the name and any trailing verification badge on one line together. */
table.ec-list-table tbody td:has(> div.any) > a,
table.ec-list-table tbody td:has(> div.any) > span { vertical-align: middle; white-space: nowrap; }
table.ec-list-table tbody td > div.any > img { display: block; object-fit: cover; }

/* Some action controls carry their own theme styling (`.delete-btn` ships a red
   pill, POS wraps its strip in a <span>), which outranked the plain chip rules
   above. Pinned so every row control resolves to the same chip. */
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .action-btn > button.ec-act,
table.ec-list-table .ec-actions > a.ec-act,
table.ec-list-table .ec-actions > button.ec-act {
    width: 38px !important; height: 38px !important;
    min-width: 38px !important;
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    border-radius: 8px !important;
    color: #8a90a6 !important;
    font-size: 20px !important; line-height: 1 !important;
}
table.ec-list-table .action-btn > a.ec-act:hover,
table.ec-list-table .action-btn > button.ec-act:hover,
table.ec-list-table .ec-actions > a.ec-act:hover,
table.ec-list-table .ec-actions > button.ec-act:hover {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10) !important;
    color: var(--admin-panel-color) !important;
}
/* Checkbox column: centre the control in both the header and the body rows. */
table.ec-list-table th.ec-check-col > input[type="checkbox"],
table.ec-list-table td.ec-check-col > input[type="checkbox"] { display: inline-block !important; }
table.ec-list-table td.ec-check-col > label { display: none !important; }

/* ==================================================================
   Listing table: match the restaurants page exactly.
   ================================================================== */

/* No vertical grid. `table-bordered` is gone from the markup, but DataTables and
   the theme still draw cell borders, so they're cleared here too. Only the
   horizontal row rule survives. */
table.ec-list-table,
table.ec-list-table thead th,
table.ec-list-table tbody td,
table.ec-list-table tbody tr { border-left: 0 !important; border-right: 0 !important; }
table.ec-list-table { border: 0 !important; }
table.ec-list-table thead th { border-top: 0 !important; border-bottom: 1px solid #eef0f4 !important; }
table.ec-list-table tbody td { border-top: 1px solid #f1f3f7 !important; border-bottom: 0 !important; }
table.ec-list-table tbody tr:first-child td { border-top: 0 !important; }

/* Uniform white rows — kill DataTables' zebra stripe and sorted-column tint. */
table.ec-list-table.dataTable tbody tr.odd,
table.ec-list-table.dataTable tbody tr.even,
table.ec-list-table.dataTable tbody tr.odd > *,
table.ec-list-table.dataTable tbody tr.even > *,
table.ec-list-table.dataTable tbody td.sorting_1,
table.ec-list-table.dataTable tbody td.sorting_2,
table.ec-list-table.dataTable tbody td.sorting_3 { background: #fff !important; box-shadow: none !important; }
table.ec-list-table.dataTable tbody tr:hover > * { background: #fafbfd !important; }

/* Status pills / badges must never break across lines ("Order Completed"). */
table.ec-list-table td .badge,
table.ec-list-table td .label,
table.ec-list-table td span[class*="status"],
table.ec-list-table td span[class*="btn-"] { display: inline-block; }

/* Checkbox cell: centre horizontally AND vertically, whatever the row height. */
table.ec-list-table th.ec-check-col,
table.ec-list-table td.ec-check-col,
table.ec-list-table td.dtr-control {
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
}
table.ec-list-table th.ec-check-col > input[type="checkbox"],
table.ec-list-table td.ec-check-col > input[type="checkbox"],
table.ec-list-table td.dtr-control > input[type="checkbox"] {
    display: inline-block !important;
    position: static !important;
}

/* Larger action controls, per request — the chip scaled up. */
table.ec-list-table .action-btn > a,
table.ec-list-table .action-btn > button,
table.ec-list-table .action-btn > i,
table.ec-list-table .ec-actions > a,
table.ec-list-table .ec-actions > button,
table.ec-list-table .action-btn > a.delete-btn,
table.ec-list-table .ec-actions > a.delete-btn {
    width: 38px !important; height: 38px !important;
    font-size: 20px !important;
}

/* ------------------------------------------------------------------
   Support inbox tab strip. The theme renders these pills grey; they should
   carry the admin colour like every other active control in the panel.
   ------------------------------------------------------------------ */
#chatTabs.nav-pills {
    background: #f4f6fa;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    display: inline-flex;
    flex-wrap: wrap;
}
#chatTabs.nav-pills .nav-item { margin: 0; }
#chatTabs.nav-pills .nav-link {
    background: transparent !important;
    color: #6b7280 !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600;
    transition: background .15s, color .15s;
}
#chatTabs.nav-pills .nav-link:hover {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10) !important;
    color: var(--admin-panel-color) !important;
}
#chatTabs.nav-pills .nav-link.active {
    background: linear-gradient(135deg,
        var(--admin-panel-color) 0%,
        rgba(var(--admin-panel-rgb, 255, 104, 58), .78) 100%) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    box-shadow: 0 2px 8px rgba(var(--admin-panel-rgb, 255, 104, 58), .30);
}

/* DataTables' autoWidth writes an inline `width` on every <th> from a measurement
   taken before these styles applied, which pinned short-headed columns ("Type")
   at their wrapped width. Releasing it lets the browser size columns from real
   content; the control-column rules below still win, being later and equal weight. */
table.ec-list-table {
    table-layout: auto !important;
    /* Size to content and let .table-responsive scroll, rather than cramming every
       column into the card width — that cramming is what broke vendor names and
       email addresses across lines. min-width keeps short tables full-bleed. */
    width: auto !important;
    min-width: 100%;
}
table.ec-list-table thead th,
table.ec-list-table tbody td { width: auto !important; }

/* Width distribution. The control columns shrink to their content (`width:1%`
   with nowrap is the standard trick), so all leftover width goes to the data
   columns instead of inflating "Actions" — that starvation is what squeezed
   Email Templates' "Type" column down to three broken lines. */
table.ec-list-table th.action-btn,
table.ec-list-table td.action-btn,
table.ec-list-table th.ec-actions,
table.ec-list-table td.ec-actions,
table.ec-list-table thead th:last-child,
table.ec-list-table tbody td:last-child { width: 1% !important; white-space: nowrap !important; }

/* Vendors/users build the identity cell as a bare <img> followed by the name link
   (no `div.any` wrapper), so it needs its own rule. Keeping the cell nowrap holds
   the name and its trailing verification badge on one line beside the avatar. */
table.ec-list-table tbody td:has(> img) { white-space: nowrap !important; }
table.ec-list-table tbody td > img {
    display: inline-block; vertical-align: middle;
}
table.ec-list-table tbody td:has(> img) > a,
table.ec-list-table tbody td:has(> img) > span { vertical-align: middle; }
/* The badge itself is an inline image/icon appended inside the link. */
table.ec-list-table tbody td a > img,
table.ec-list-table tbody td a > i { vertical-align: middle; margin-left: 4px; }

/* Row checkboxes must never carry a bespoke size — the .ec-check control is 20px
   and any inline width knocks it out of alignment with the header checkbox. */
table.ec-list-table input.ec-check[style] { width: 20px !important; height: 20px !important; }

/* The checkbox cell ships a sibling <label> (Bootstrap `col-3 control-label`) that
   the original markup used as the visual box. It is dead weight now that .ec-check
   styles the input directly, and being in-flow it added height below the control —
   which is what pushed the checkbox above the cell's centre. DataTables Responsive
   renames this cell to `dtr-control`, so both class names must be covered. */
table.ec-list-table td.ec-check-col > label,
table.ec-list-table td.dtr-control > label,
table.ec-list-table th.ec-check-col > label { display: none !important; }
table.ec-list-table td.ec-check-col > input[type="checkbox"],
table.ec-list-table td.dtr-control > input[type="checkbox"],
table.ec-list-table th.ec-check-col > input[type="checkbox"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    float: none !important;
}

/* Superseded by the labelled-row-button block below, which targets the buttons
   themselves so both disbursement pages resolve to the same pill. */

/* Authoritative chip size. Earlier rules required an `.action-btn`/`.ec-actions`
   container, which the JS-built cells don't always carry — those controls fell back
   to the 30px base in ec-components.css. Targeting .ec-act directly covers every
   page regardless of how its action cell is assembled. */
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    vertical-align: middle !important;
}
table.ec-list-table tbody a.ec-act > i,
table.ec-list-table tbody button.ec-act > i { line-height: 1 !important; }

/* The chips are flex items inside `.ec-actions`, and the Actions column is
   shrink-to-content (width:1%). Default `flex-shrink:1` therefore compressed them
   below the declared 38px — the width rule was matching all along, but flex layout
   overrode the used width. Pinning the flex basis stops the shrink. */
table.ec-list-table .ec-actions > a.ec-act,
table.ec-list-table .ec-actions > button.ec-act,
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .action-btn > button.ec-act,
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act { flex: 0 0 38px !important; }
/* Give the strip room to lay the chips out at full size. */
table.ec-list-table .action-btn,
table.ec-list-table .ec-actions { min-width: max-content !important; }

/* Cross axis: the chip must not be sized by the flex line either. */
table.ec-list-table .ec-actions > a.ec-act,
table.ec-list-table .ec-actions > button.ec-act,
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .action-btn > button.ec-act,
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act {
    min-height: 38px !important;
    max-height: 38px !important;
    align-self: center !important;
}

/* Identity cells that pair an avatar with a name + secondary line (employee's
   "Restaurant Info", vendor/user rows). The text block sits beside the image
   rather than being pushed under it by a bare <br>. */
table.ec-list-table tbody td > .ec-id-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.35;
    white-space: nowrap;
}
table.ec-list-table tbody td > .ec-id-text > .ec-id-name { display: block; }
table.ec-list-table tbody td > .ec-id-text > .ec-id-sub {
    display: block;
    font-size: 12px;
    color: #8a90a6;
}
/* Avatars in identity cells are round and evenly sized. */

/* ==================================================================
   DataTables Responsive corrections
   ================================================================== */

/* Responsive tags the FIRST column `dtr-control`. That is the checkbox column only
   on tables that have bulk select; on Attributes / Review Attributes it lands on
   "Name", which then inherited the 48px width and centring meant for a checkbox.
   Those cells are restored to normal data-cell behaviour. */
table.ec-list-table td.dtr-control:not(:has(> input[type="checkbox"])),
table.ec-list-table th.dtr-control:not(:has(> input[type="checkbox"])) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    padding: 14px !important;
}

/* Responsive also HIDES columns once the table outgrows its container — that is why
   Actions vanished on wide tables and why the remaining columns were squeezed until
   short headers like "Type" broke over three lines. Every column stays visible and
   the card scrolls sideways instead. */
table.ec-list-table > thead > tr > th,
table.ec-list-table > tbody > tr > td { display: table-cell !important; }
table.ec-list-table > tbody > tr.child { display: none !important; }

/* With all columns present, a floor keeps data columns readable; control columns
   stay shrink-to-fit. */
/* A fixed floor either starves columns on narrow tables or overflows the card on
   wide ones. `min-content` is the right primitive: no column may be narrower than
   its longest word (so no mid-word breaks, no "Ty pe"), while the browser still
   distributes the remaining width naturally and the table stays inside the card. */
table.ec-list-table th,
table.ec-list-table td { min-width: min-content; }
table.ec-list-table th.ec-check-col,
table.ec-list-table td.ec-check-col,
table.ec-list-table td.dtr-control:has(> input[type="checkbox"]) { min-width: 48px !important; width: 48px !important; }
table.ec-list-table th.action-btn,
table.ec-list-table td.action-btn,
table.ec-list-table th.ec-actions,
table.ec-list-table td.ec-actions,
table.ec-list-table thead th:last-child,
table.ec-list-table tbody td:last-child { min-width: 0 !important; }

/* ------------------------------------------------------------------
   Labelled row buttons (the payout / disbursement flows).
   The two disbursement pages build their action cell differently — one wraps the
   buttons in a <span class="action-btn">, the other emits a bare <td> — so container
   based rules styled only one of them. Targeting the buttons themselves gives both
   pages the same compact pill set, and replaces the theme's mixed teal/navy/orange
   variants with the admin palette.
   ------------------------------------------------------------------ */
table.ec-list-table tbody a.btn,
table.ec-list-table tbody button.btn {
    display: inline-block !important;
    width: auto !important; height: auto !important;
    min-width: 0 !important; max-height: none !important;
    padding: 7px 14px !important;
    margin: 3px 4px 3px 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    transition: filter .15s, background .15s;
}
/* Primary money action carries the brand colour. */
table.ec-list-table tbody a.btn[name$="_view"],
table.ec-list-table tbody a.btn[name$="_pay"] {
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}
/* Cancelling a request is destructive — soft red, not a solid slab. */
table.ec-list-table tbody a.btn[name$="_reject_request"] {
    background: rgba(239, 68, 68, .10) !important;
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, .25) !important;
}
/* Neutral secondary (status checks). */
table.ec-list-table tbody a.btn[name$="_check_status"] {
    background: #f4f6fa !important;
    color: #4b5563 !important;
    border-color: #e5e7eb !important;
}
table.ec-list-table tbody a.btn:hover,
table.ec-list-table tbody button.btn:hover { filter: brightness(.94); }

/* The buttons stack vertically via <br>; let the cell wrap and keep them tidy. */

/* Advertisement Requests tab strip — same treatment as the support inbox: the theme
   renders these pills grey, they should carry the admin colour. */
.nav-pills .nav-link {
    background: transparent !important;
    color: #6b7280 !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.nav-pills .nav-link:hover {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10) !important;
    color: var(--admin-panel-color) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: linear-gradient(135deg,
        var(--admin-panel-color) 0%,
        rgba(var(--admin-panel-rgb, 255, 104, 58), .78) 100%) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    box-shadow: 0 2px 8px rgba(var(--admin-panel-rgb, 255, 104, 58), .30);
}
.nav-pills {
    background: #f4f6fa;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    display: inline-flex;
    flex-wrap: wrap;
}
.nav-pills > li,
.nav-pills > .nav-item { margin: 0; }

/* ------------------------------------------------------------------
   Card shell — identical on every page.
   POS Orders showed square 4px corners with no border while the reference pages
   showed 16-20px, despite carrying the same classes: the theme's radius wins or
   loses depending on which grid wrapper the card happens to sit in, and the pages
   differ there. Pinning the shell here removes that dependency, and also settles
   the 16px/20px split between restaurants and users/employee.
   ------------------------------------------------------------------ */
.card.ec-card,
.card.ec-list-card,
.card.ec-filter-card,
.ec-card,
.ec-list-card,
.ec-filter-card {
    background: #fff !important;
}
/* Inner sections must not square off the rounded corners. */
.ec-card > .card-header,
.ec-list-card > .card-header,
.ec-filter-card > .card-header {
    border-radius: 16px 16px 0 0 !important;
    background: transparent !important;
    border-bottom: 1px solid #f1f3f7 !important;
}
.ec-card > .card-body:last-child,
.ec-list-card > .card-body:last-child,
.ec-filter-card > .card-body:last-child { border-radius: 0 0 16px 16px !important; }

/* All three payout actions share one button: differentiating Cancel Request with a
   faded red made it read as disabled next to the two solid ones. */
table.ec-list-table tbody a.btn[name$="_view"],
table.ec-list-table tbody a.btn[name$="_pay"],
table.ec-list-table tbody a.btn[name$="_reject_request"],
table.ec-list-table tbody a.btn[name$="_check_status"] {
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    border-color: transparent !important;
    opacity: 1 !important;
}
/* Export control keeps its label legible while the menu is open. */
#ec-export-mount .dt-button:hover,
#ec-export-mount .dt-button:focus,
#ec-export-mount .dt-button.active,
#ec-export-mount .dt-button:active {
    color: var(--admin-panel-color) !important;
    opacity: 1 !important;
}

/* ==================================================================
   Status pills, toggles and chips.
   ================================================================== */

/* Soft tinted pills, not solid slabs. Statuses arrive as Bootstrap badges, as
   `.order_*` spans, or as solid buttons; all three are mapped onto the same
   pill so a status reads identically wherever it appears. */
table.ec-list-table td .badge,
table.ec-list-table td [class*="order_"] > span,
table.ec-list-table td span.status {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
    border: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    width: auto !important;
}
/* green — completed / active / success */
table.ec-list-table td .badge-success,
table.ec-list-table td .order_completed > span,
table.ec-list-table td .order_accepted > span { background: #e5f7ed !important; color: #1a7f4c !important; }
/* amber — pending / in progress */
table.ec-list-table td .badge-warning,
table.ec-list-table td .order_placed > span,
table.ec-list-table td .order_pending > span,
table.ec-list-table td .order_shipped > span,
table.ec-list-table td .in_transit > span { background: #fef3d5 !important; color: #a86400 !important; }
/* red — rejected / failed */
table.ec-list-table td .badge-danger,
table.ec-list-table td .order_rejected > span,
table.ec-list-table td .driver_rejected > span { background: #fdecec !important; color: #b91c1c !important; }
/* neutral */
table.ec-list-table td .badge-info,
table.ec-list-table td .badge-primary,
table.ec-list-table td .badge-light { background: #eef0f4 !important; color: #5a6179 !important; }
table.ec-list-table td .badge-dark { background: #dfe1e7 !important; color: #2c3040 !important; }

/* Toggles: brand colour when on, neutral track when off — no red/green. */
table.ec-list-table .switch { width: 36px !important; height: 20px !important; margin: 0 !important; display: inline-block; vertical-align: middle; }
table.ec-list-table .switch input { opacity: 0; }
table.ec-list-table .switch .slider {
    position: absolute !important; inset: 0 !important;
    background: #d0d5de !important;
    border-radius: 999px !important;
    transition: background .18s ease;
}
table.ec-list-table .switch .slider::before {
    transition: transform .18s ease;
}
table.ec-list-table .switch input:checked + .slider { background: var(--admin-panel-color) !important; }
table.ec-list-table .switch input:checked + .slider::before { transform: translateX(16px); }

/* Soft chip for classification columns (category, plan, type) — .ec-cat-chip.
   Applied where a cell is a label rather than a link. */
.ec-cat-chip {
    display: inline-block;
    background: #f5f7fb;
    color: #3b4060;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 500;
}

/* Compact rows: tighter cell rhythm, so tables with few columns don't sprawl. */

/* Dashboard tables: every cell is a `.redirecttopage` click target, which the theme
   paints in the brand colour — so all values read as links. Only real anchors keep
   the colour; the rest is body text. The row still highlights on hover, so the cell
   remains obviously clickable. */
.ec-recent-table tbody td.redirecttopage,
.ec-recent-table tbody td { color: #0C111C !important; }
.ec-recent-table tbody td a { color: var(--admin-panel-color) !important; font-weight: 600; }
.ec-recent-table tbody td a:hover { text-decoration: underline; }
.ec-recent-table tbody td.redirecttopage { cursor: pointer; }
.ec-recent-table tbody td i.fa-shopping-cart { color: #8a90a6 !important; }

/* ==================================================================
   Corrections
   ================================================================== */

/* Toggle knob. The theme's `.slider:before` pins the knob with top:1px AND
   bottom:1px at 19px square inside a 20px track, so it never sits centred. Centring
   from the middle instead removes the dependency on those offsets entirely; the
   checked state has to carry the Y translation too or it would be dropped. */
table.ec-list-table .switch .slider::before,
table.ec-list-table .switch .slider:before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 2px !important;
    right: auto !important;
    bottom: auto !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .18) !important;
    transform: translateY(-50%) !important;
    transition: transform .18s ease !important;
}
table.ec-list-table .switch input:checked + .slider::before,
table.ec-list-table .switch input:checked + .slider:before {
    transform: translate(16px, -50%) !important;
}

/* Action glyphs at 20px. */
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act,
table.ec-list-table .ec-act { font-size: 20px !important; }
table.ec-list-table tbody a.ec-act > i,
table.ec-list-table tbody button.ec-act > i,
table.ec-list-table .ec-act > i { font-size: 20px !important; }

/* Date-range control: the caret sat hard against the label. Push it to the far
   right of the field so the control reads like the other filter inputs. */
.ec-filter-row .ec-daterange,
.ec-filter-row #daterange {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.ec-filter-row .ec-daterange > span,
.ec-filter-row #daterange > span { flex: 1 1 auto; }
.ec-filter-row .ec-daterange > .fa-caret-down,
.ec-filter-row #daterange > .fa-caret-down {
    margin-left: auto !important;
}

/* Payout rows: the restaurants page laid its labelled buttons out inline because the
   strip is inline-flex, which ignores the <br> separators the markup uses. Making the
   container a block restores the stacked layout the drivers page already shows. */
table.ec-list-table .action-btn:has(> a.btn),
table.ec-list-table .ec-actions:has(> a.btn) {
    display: block !important;
    white-space: normal !important;
}

/* Underline tab strip — `.ec-lang-tabs`. Advertisement Requests and the Support
   inbox use it instead of the pill strip. */
ul.nav-tabs.ec-lang-tabs,
.ec-lang-tabs {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #eef0f4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    gap: 0 !important;
}
.ec-lang-tabs .nav-item { background: transparent !important; margin: 0 !important; }
.ec-lang-tabs .nav-link,
.ec-lang-tabs .nav-item .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 16px !important;
    box-shadow: none !important;
}
.ec-lang-tabs .nav-link:hover { color: var(--admin-panel-color) !important; }
.ec-lang-tabs .nav-link.active,
.ec-lang-tabs .nav-item .nav-link.active,
.ec-lang-tabs .show > .nav-link {
    color: var(--admin-panel-color) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--admin-panel-color) !important;
    box-shadow: none !important;
}

/* List-card header: the card-body below it already carries 20px padding, and the
   DataTables top bar adds its own margin, which stacked into a large dead gap under
   the title. Trimmed so the header sits close to the table controls. */
.ec-list-card > .card-header {
    padding: 16px 20px !important;
    margin-bottom: 0 !important;
}
.ec-list-card > .card-body { padding-top: 12px !important; }
.ec-list-card .dataTables_wrapper > .ec-dt-top { margin-top: 0 !important; }
.ec-list-card .table-responsive.m-t-10 { margin-top: 0 !important; }

/* Action strip: chips carried a right margin plus the flex gap, which read as loose
   spacing between icons on rows with several actions. One source of spacing only. */
table.ec-list-table .action-btn,
table.ec-list-table .ec-actions { gap: 0 !important; }
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act,
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .ec-actions > a.ec-act { margin: 0 !important; }

/* ------------------------------------------------------------------
   Dashboard table cells
   ------------------------------------------------------------------ */

/* Identity cell: avatar and name on one line, so the thumbnail needs no column. */
.ec-recent-table tbody td.ec-id-cell {
    display: flex !important;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.ec-recent-table .ec-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 36px;
    background: #f1f3f7;
}
.ec-recent-table .ec-avatar-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    color: #9aa1b4; font-size: 22px;
}
.ec-recent-table td.ec-id-cell > span,
.ec-recent-table td.ec-id-cell > a { font-weight: 600; }

/* Star rating: warm amber, not the brand red. */
.ec-recent-table .rating__item::before,
.ec-recent-table .rating__item,
.ec-recent-table .rating .rating__item { color: #d5d9e2 !important; }
.ec-recent-table .rating[data-rating="1"] .rating__item:nth-child(-n+1),
.ec-recent-table .rating[data-rating="2"] .rating__item:nth-child(-n+2),
.ec-recent-table .rating[data-rating="3"] .rating__item:nth-child(-n+3),
.ec-recent-table .rating[data-rating="4"] .rating__item:nth-child(-n+4),
.ec-recent-table .rating[data-rating="5"] .rating__item:nth-child(-n+5) { color: #f5a524 !important; }

/* Recent Orders / Payouts read as empty because several cells carry no value and the
   rows are tall. Tighter rows, and an em dash marks a genuinely empty cell. */
.ec-recent-table tbody td:empty::after {
    content: '—';
    color: #c2c7d4;
}

/* Dashboard action cell: both tables build their edit control differently (one wraps
   it in an <a>, one did not), which is why the two pencils resolved to different
   colours. The chip styling is pinned here so they match. */
.ec-recent-table td.ec-act-cell { text-align: left; }
.ec-recent-table td.ec-act-cell > a.ec-act {
    width: 34px !important; height: 34px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 8px;
    color: #8a90a6 !important;
    font-size: 18px !important;
    transition: background .15s, color .15s;
}
.ec-recent-table td.ec-act-cell > a.ec-act:hover {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10);
    color: var(--admin-panel-color) !important;
}

/* Recent Orders / Payouts read as a wall of black because every cell is plain text.
   The row's identifier — the first cell — carries the brand colour, as the name does
   in the Restaurants and Top Drivers tables, and the money column reads green. */
#orderTable tbody td:first-child,
#recentPayoutsTable tbody td:first-child {
    font-weight: 600;
}
#orderTable tbody td:nth-child(3),
#recentPayoutsTable tbody td:nth-child(2) {
    color: #1a7f4c !important;
    font-weight: 600;
}
#orderTable tbody td,
#recentPayoutsTable tbody td { color: #3b4060 !important; }
#orderTable tbody td:first-child,
#recentPayoutsTable tbody td:first-child { color: var(--admin-panel-color) !important; }

/* ==================================================================
   Support inbox — chat component set. Two columns: conversations and messages.
   ================================================================== */
.chat-page {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    height: calc(100vh - 220px);
    min-height: 500px;
}
@media (max-width: 1199px) { .chat-page { grid-template-columns: 300px 1fr; } }
@media (max-width: 991px)  { .chat-page { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } }

/* min-height:0 lets the panes shrink inside the fixed-height grid so their inner
   .chat-list / .chat-messages-body scroll instead of the whole page. */
.chat-pane {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.chat-pane-header {
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
    display: flex; align-items: center; justify-content: space-between;
}
.chat-pane-header h5 { margin: 0; font-size: 18px; font-weight: 600; color: #1f2937; }

.chat-icon-btn {
    color: var(--admin-panel-color); background: transparent; border: none;
    padding: 4px 8px; cursor: pointer; font-size: 20px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; width: 36px; height: 36px;
    transition: background .15s ease, color .15s ease;
}
.chat-icon-btn:hover { color: #fff; background: var(--admin-panel-color); }

.chat-search { padding: 10px 16px; border-bottom: 1px solid #f3f4f6; }
.chat-search .input-group { position: relative; }
.chat-search .input-group i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; pointer-events: none;
}
.chat-search input {
    padding-left: 38px; border-radius: 999px;
    background: #f3f4f6; border: 1px solid transparent; height: 40px;
}
.chat-search input:focus {
    border-color: var(--admin-panel-color); background: #fff;
    outline: none; box-shadow: none;
}

.chat-list { flex: 1; overflow-y: auto; margin: 0; list-style: none; }

.chat-item {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .15s ease;
}
.chat-item:hover { background: #f9fafb; }
.chat-item.is-active {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .09);
    border-left-color: var(--admin-panel-color);
}
.chat-item-thumb { border-radius: 50%;
    object-fit: cover; flex-shrink: 0; background: #f3f4f6;
}
.chat-item-body { flex: 1; min-width: 0; }
.chat-item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chat-item-title {
    font-weight: 600; color: #1f2937; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item-time { font-size: 11px; color: #9ca3af; flex-shrink: 0; }
.chat-item-sub {
    font-size: 12px; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item-badge {
    background: var(--admin-panel-color); color: var(--admin-panel-contrast, #fff);
    font-size: 10px; font-weight: 700; border-radius: 999px;
    padding: 1px 7px; margin-left: 6px;
}

.chat-messages-pane { background: #fff; }
.chat-messages-header {
    padding: 14px 18px; border-bottom: 1px solid #f3f4f6;
    display: flex; align-items: center; gap: 12px;
}
.chat-messages-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-messages-header .userName a { font-weight: 600; color: #1f2937; }
.chat-messages-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; padding: 40px 30px; color: #6b7280; text-align: center;
}
.chat-messages-empty i { font-size: 64px; color: #cbd5e1; margin-bottom: 16px; }
.chat-messages-empty h4 { font-size: 18px; color: #374151; margin: 0 0 6px; }
.chat-messages-empty p { margin: 0; color: #9ca3af; font-size: 13px; max-width: 320px; }

.chat-messages-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 18px 20px;
    display: flex; flex-direction: column; gap: 10px;
    background: #fafafa;
    margin: 0; list-style: none;
}
.chat-bubble { padding: 10px 14px; border-radius: 14px;
    font-size: 14px; line-height: 1.4; word-wrap: break-word;
}
/* Incoming: plain white. Outgoing: a light brand tint with dark text, not a solid
   fill — matching the selected conversation item. */
.chat-bubble.is-user {
    align-self: flex-start; background: #fff;
    border: 1px solid #e5e7eb; border-bottom-left-radius: 4px;
}
.chat-bubble.is-admin {
    align-self: flex-end;
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .16);
    color: #1f2430;
    border: 1px solid rgba(var(--admin-panel-rgb, 255, 104, 58), .30);
    border-bottom-right-radius: 4px;
}
.chat-bubble img, .chat-bubble video { max-width: 220px; border-radius: 8px; display: block; }
.chat-bubble .chat-message-meta {
    font-size: 10px; color: #6b7280; margin-top: 4px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.chat-date-sep { align-self: center; }
.chat-date-sep span {
    background: #eef0f4; color: #5a6179;
    font-size: 11px; font-weight: 600;
    padding: 3px 12px; border-radius: 999px;
}

.chat-input-bar {
    border-top: 1px solid #f3f4f6; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
}
.chat-input-bar .chat-input {
    flex: 1; border: 1px solid #e5e7eb; border-radius: 999px;
    padding: 9px 16px; height: 42px; outline: none;
}
.chat-input-bar .chat-input:focus { border-color: var(--admin-panel-color); }
.chat-input-bar .chat-send-btn {
    background: var(--admin-panel-color); color: var(--admin-panel-contrast, #fff);
    border: none; width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; cursor: pointer; transition: filter .15s ease;
}
.chat-input-bar .chat-send-btn:hover { filter: brightness(.93); }

/* The chat panes are flex containers, so visibility is toggled with a class rather
   than jQuery's .show()/.hide(), which would leave them as display:block. */
.chat-page .is-hidden,
.chat-item.is-hidden { display: none !important; }

/* The thread is a <ul> set to display:contents so its <li> bubbles participate in the
   body's flex column — but the list markers survive that, so they are cleared here.
   Only the list container is reset: zeroing padding on the <li> too would strip the
   bubbles' own padding, since each bubble IS an <li>. */
.chat-messages-body ul { list-style: none !important; margin: 0; padding: 0; }
.chat-messages-body li { list-style: none !important; }

/* A bubble must be as wide as its widest line. The meta row is a nested flex
   container, whose intrinsic contribution the parent under-reports — so a short
   message like "Hi" produced a bubble narrower than its own timestamp, which then
   spilled past the pane edge. fit-content plus a non-wrapping meta fixes both. */
.chat-messages-body .chat-bubble {
    width: fit-content;
    max-width: 70%;
    min-width: 0;
    box-sizing: border-box;
}
.chat-messages-body .chat-bubble .chat-message-meta {
    white-space: nowrap;
    justify-content: flex-end;
}
.chat-messages-body .chat-bubble.is-user .chat-message-meta { justify-content: flex-start; }
/* The legacy time span was inline with its own spacing; neutralise it. */
.chat-messages-body .chat-bubble .message-data-time { margin: 0; font-size: inherit; }

/* ==================================================================
   Form pages — ec-form-* primitives, so create/edit/settings screens share one
   shell the way the listings do.
   ================================================================== */
.ec-form-card > .card-header {
    background: #fff !important;
    padding: 16px 20px !important;
}
.ec-form-card > .card-header h5 { margin: 0; }
.ec-form-card > .card-body { padding: 20px !important; }

.ec-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #3b4060;
    margin-bottom: 6px;
}
.ec-form-help { font-size: 12px; color: #9aa1b4; margin-top: 4px; }
/* Divider between logical groups inside a section */
/* Aligns a label-less control (toggle, button) with the input line of a neighbour
   that has an .ec-form-label above it. */
.ec-label-offset { margin-top: 26px; }
/* Legacy control-labels inside a converted card follow the same scale. */
.ec-form-card label.control-label { font-size: 13px; font-weight: 600; color: #3b4060; }

.ec-form-card .form-control {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    min-height: 42px;
    font-size: 14px;
    color: #0C111C;
}
.ec-form-card textarea.form-control { min-height: auto; }
.ec-form-card .form-control:focus {
    background: #fff;
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 255, 104, 58), .15);
}
/* select2 controls inside a form card match the native inputs. */
.ec-form-card .select2-container--default .select2-selection--single {
    height: 42px; background: #fff; border: 1px solid #e2e6ef; border-radius: 10px;
    display: flex; align-items: center;
}
.ec-form-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4; padding-left: 12px; padding-right: 28px; color: #0C111C; font-size: 14px;
}
.ec-form-card .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; }
.ec-form-card .select2-container--open .select2-selection--single,
.ec-form-card .select2-container--focus .select2-selection--single {
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 255, 104, 58), .15);
}

/* A titled group inside a long form. The title sits on the section's top border. */
.ec-section {
    position: relative;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    padding: 30px 22px 10px;
    margin-bottom: 28px;
}
.ec-section-title {
    display: inline-block;
    background: var(--admin-panel-color);
    color: var(--admin-panel-contrast, #fff);
    font-size: 12px;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 8px; border: none;
}
.ec-section-title i { color: inherit; }
.ec-section > .ec-section-title:first-child { position: absolute; top: -14px; left: 20px; margin: 0; }

/* ------------------------------------------------------------------
   Settings/form field layout. The converted screens still carry the theme's
   `form-group row` with a `col-N` label beside a `col-M` input. Here the label
   stacks above the input and two fields run per row, done in CSS rather than by
   rewriting ~180 field blocks — CSS keeps it reversible and cannot desync the
   markup. Only .form-group children become grid cells; tables, checkbox rows,
   image uploads and anything else span the full width so nothing complex gets
   squeezed into half a row.
   ------------------------------------------------------------------ */
.form-page .ec-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    align-content: start;
}
/* Full width only for the things that actually need it. The previous blanket
   `> *:not(.form-group)` also caught .ec-section-title, which is absolutely
   positioned onto the section's top border — giving it a grid area pushed the
   fields down and left a large gap under the pill. */
/* Branding wraps its columns in a bare .row. Must NOT match .form-group.row —
   the shared template gives every field `form-group row width-100`, so spanning
   those collapsed all the two-per-row layouts to one field per row. */
.form-page .ec-section > .row:not(.form-group),
.form-page .ec-section > table,
.form-page .ec-section > .table-responsive,
.form-page .ec-section > .form-check,
.form-page .ec-section > .ec-form-actions,
.form-page .ec-section > .ec-map-picker,
.form-page .ec-section > .form-group.ec-span-all,
/* A toggle row is a full-width statement, not a half-width field. Letting it
   occupy a single cell pushed the pair of fields after it onto separate rows. */
.form-page .ec-section > .form-group.switch-box { grid-column: 1 / -1; }

/* Label above input, not beside it. The detail-page rules further down force a
   180px label column beside its input with !important (they fix the label/value
   gap on view screens, which share the .restaurant_payout_create wrapper).
   Inside .ec-section we want the stacked layout instead, so these carry
   !important too and are one class more specific — .form-page .ec-section
   .form-group.row > label .control-label (0,5,1) beats
   .row.restaurant_payout_create .form-group.row > label.control-label (0,4,1). */
.page-wrapper.form-page .ec-section .form-group.row,
.page-wrapper.form-page .ec-section .form-group {
    display: block !important;
    margin-left: 0;
    margin-right: 0;
}
.page-wrapper.form-page .ec-section .form-group.row > label.control-label,
.page-wrapper.form-page .ec-section .form-group > label.control-label {
    display: block;
    width: 100%;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3b4060;
}
.page-wrapper.form-page .ec-section .form-group.row > div[class*="col-"],
.page-wrapper.form-page .ec-section .form-group.row > div:not(label) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}
/* The detail-page rule `.restaurant_payout_create .form-group.row` gives each
   label/value pair a bottom rule, which is right for a view screen but drew a
   stray line under every field on these forms. Sections own their borders here;
   fields must not add their own. */
.page-wrapper.form-page .ec-section .form-group.row,
.page-wrapper.form-page .ec-section .form-group,
.page-wrapper.form-page .ec-section .form-check {
    border-bottom: 0 !important;
    border-top: 0 !important;
}

/* The card is a plain white surface with no outline, so the only visible
   borders are the ec-section boxes inside; an outline would double up with them. */
.page-wrapper.form-page > .container-fluid > .card.ec-form-card:has(.ec-section),
.page-wrapper.form-page .card.ec-card.ec-form-card:has(.ec-section) {
    border: 0 !important;
    box-shadow: none !important;
}

/* Toggle rows: the theme paints .switch-box-inner with a pale blue panel
   (#ecf3fb), which reads as a highlighted/selected state inside our sections.
   Flatten it so the row sits on the card like every other field. */
.page-wrapper.form-page .ec-section .switch-box .switch-box-inner {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    /* Label, info icon and toggle sit together as one group — the toggle used to
       be pushed to the far right, leaving a wide dead gap after the label. */
    justify-content: flex-start;
    gap: 8px;
    min-height: 34px;
}
/* The theme sizes .switch as a 40x21 floated box. Making the parent a flex
   container took it out of flow and collapsed it to nothing, so the toggle
   vanished — restore explicit size and push it to the right with margin
   instead of the float. */
.page-wrapper.form-page .ec-section .switch-box .switch {
    float: none !important;
    /* clear of the info icon rather than butted against it, and centred on the
       label's line instead of inheriting the theme's `margin: auto` */
    margin: 0 0 0 60px !important;
    align-self: center;
    flex: 0 0 40px;
    width: 40px !important;
    height: 21px !important;
    position: relative;
    order: 3;
}
.page-wrapper.form-page .ec-section .switch-box .switch-box-inner > label.control-label {
    margin-bottom: 0 !important;
    flex: 0 1 auto;
    align-self: center;
    line-height: 1.2;
}

/* The tooltip info glyph rendered as a large filled black circle. Make it a
   small muted hint that sits beside its label. */
/* Sits directly after its label as a small brand-tinted circle — readable as a
   hint, without the large black disc the theme rendered. Sized and centred as a
   flex item so it lines up on the label's centre line rather than its baseline. */
.page-wrapper.form-page .ec-section i.fa-info,
.page-wrapper.form-page .ec-section i.fa-info-circle {
    font-size: 10px !important;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .14) !important;
    color: var(--admin-panel-color) !important;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 10px 0 0 0px;
    order: 2;
    cursor: help;
}

/* The theme's help text -> ec-form-help appearance. */
.form-page .ec-section .form-text.text-muted {
    font-size: 12px;
    color: #9aa1b4 !important;
    margin-top: 4px;
}

/* Checkbox rows read as "[box] Label" on one line (.ec-pay-check) — the theme's
   col-N on the label was stacking it under the box and leaving it at a quarter
   width. */
.page-wrapper.form-page .ec-section .form-check {
    flex-wrap: wrap;
    /* Bootstrap indents .form-check by 1.25rem, which left the checkbox row
       sitting ~20px right of the field labels below it. */
    padding-left: 0 !important;
    margin-left: 0;
}
.page-wrapper.form-page .ec-section .form-check > label.control-label {
    flex: 0 0 auto !important;
    max-width: none !important;
}
.page-wrapper.form-page .ec-section .form-check > .form-text.text-muted {
    flex: 1 0 100%;
    margin-top: 2px;
}

/* A few screens (admin commission, bulk update) keep a save row per section
   rather than one for the page. Span the grid and sit it flush on the
   section's bottom edge so it reads as that section's footer. */
.page-wrapper.form-page .ec-section > .ec-form-actions {
    grid-column: 1 / -1;
    margin: 8px -22px -10px;
    padding: 14px 22px;
}

@media (max-width: 767px) {
    .form-page .ec-section { grid-template-columns: 1fr; }
}

/* Bottom action bar of a form card. */
.ec-form-actions {
    border-top: 1px solid #eef0f4;
    padding: 16px 20px;
    text-align: center;
}
.ec-form-actions .btn { min-width: 130px; justify-content: center; }
.ec-form-actions .ec-btn-ghost { margin-left: 8px; }

/* Image upload preview. */
.ec-form-card .placeholder_img_thumb img,
.ec-upload-thumb img { max-width: 200px;
    object-fit: cover;
    background: #f5f7fb; padding: 4px;
    border: 1px solid #eef0f4;
}

/* Styled file input — hides the native control behind a dashed upload box,
   shared by every converted form.
   Markup: <label class="ec-upload" data-placeholder="…">
             <input type="file" …>
             <i class="mdi mdi-cloud-upload-outline"></i>
             <span class="ec-upload-text">…</span>
             <span class="ec-upload-hint">…</span></label>
   ec-form.js swaps .ec-upload-text for the chosen file name on change. */
.ec-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    margin: 0;
    background: #fafbfd;
    border: 1.5px dashed #d0d5de;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ec-upload:hover {
    border-color: var(--admin-panel-color);
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .04);
}
.ec-upload input[type="file"] { display: none; }
.ec-upload > i {
    font-size: 22px;
    color: var(--admin-panel-color);
    flex: 0 0 auto;
}
.ec-upload-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #3b4060;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-upload-hint { font-size: 12px; color: #9aa1b4; margin-left: auto; flex: 0 0 auto; }
.ec-upload.has-file { border-style: solid; border-color: rgba(var(--admin-panel-rgb, 255, 104, 58), .45); }

/* Thumbnail shown under an .ec-upload once an image exists or is picked.
   The legacy *_img_thumb hooks are kept as aliases so the existing upload
   handlers can keep writing to the same containers. */
.brand-thumb img,
.logo_img_thumb img,
.favicon_img_thumb img,
.placeholder_img_thumb img {
    height: 56px !important;
    width: auto !important;
    max-width: 260px;
    object-fit: contain;
    background: #f5f7fb;
    padding: 6px;
    border: 1px solid #eef0f4;
}

/* Primary form button. */
.ec-btn-brand {
    background: var(--admin-panel-color);
    color: var(--admin-panel-contrast, #fff);
    border: none;
    border-radius: 10px;
    height: 42px;
    padding: 0 16px;
    font-weight: 600;
    font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 4px 10px rgba(var(--admin-panel-rgb, 255, 104, 58), .22);
}
.ec-btn-brand:hover {
    color: var(--admin-panel-contrast, #fff);
    box-shadow: 0 8px 18px rgba(var(--admin-panel-rgb, 255, 104, 58), .32);
}

/* Detail / view page primitives. */
.ec-detail-profile { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.ec-detail-avatar {
    flex-shrink: 0; width: 96px; height: 96px;
    border-radius: 14px; overflow: hidden; background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
}
.ec-detail-avatar img { width: 100%; height: 100%; }
.ec-detail-info { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }

/* Detail rows — label/value pairs inside a view card. */
.ec-detail-row {
    display: flex; align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid #f1f2f6;
    gap: 16px;
}
.ec-detail-row:last-child { border-bottom: none; }
.ec-detail-label { flex: 0 0 160px; font-size: 13px; font-weight: 600; color: #6b7280; }
.ec-detail-value { flex: 1; font-size: 14px; color: #0C111C; word-break: break-word; }
/* A referenced record that no longer exists. */
/* Brand-tinted inline note. */
.ec-info-note {
    display: flex; align-items: center; gap: 8px;
    color: #374151; padding: 4px 20px 8px;
    font-size: 13.5px; margin: 0; max-width: 100%;
}
.ec-info-note i { color: var(--admin-panel-color); font-size: 18px; flex-shrink: 0; }
.ec-info-note a { color: var(--admin-panel-color); font-weight: 600; text-decoration: underline; }

/* ==================================================================
   Detail pages — compatibility layer. These screens express their content as
   <fieldset><legend> groups and `.form-group.row.width-50` label/value pairs,
   repeated hundreds of times (restaurants/view alone is 1400+ lines).
   Restyling that markup in place gives the new look without rewriting every
   pair — the same approach that settled the listings.
   ================================================================== */

/* ------------------------------------------------------------------
   Left gutter on form/settings pages.

   Listings put everything inside .container-fluid, which carries a 30px
   gutter, so their cards clear the sidenav. Form pages put only the
   ec-page-head in that container and hang .card-body directly off
   .page-wrapper — where the theme's own `.page-wrapper > .card-body
   { padding: 0 }` (more specific than our generic .card-body rule) left
   it flush against the nav. The *-inner negative margin then pulled the
   fieldsets a further 10px underneath it.

   Measured before: head 30px clear, card-body 0px, fieldset -10px.
   Both are corrected here so every form and settings screen lines up
   with the listings instead of touching the menu.
   ------------------------------------------------------------------ */
.page-wrapper > .card-body {
    padding: 0 30px 30px;
}
.page-wrapper > .card-body > .row > [class$="-inner"],
.page-wrapper > .card-body > .row > .page-inn {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
/* The save/cancel row hangs off .page-wrapper too, so it needs the same
   gutter or the buttons sit on a different left edge to the form above. */
.page-wrapper > .form-group.btm-btn,
.page-wrapper > .card-body + .form-group {
    padding-left: 30px;
    padding-right: 30px;
}

/* fieldset -> ec-section, legend -> the brand pill that sits on the border */
.restaurant_payout_create fieldset,
.restaurant_info-section fieldset,
.form-page fieldset,
.listings-page fieldset {
    position: relative;
    border: 1px solid #e2e6ef !important;
    border-radius: 10px !important;
    padding: 30px 22px 10px !important;
    margin-bottom: 28px !important;
    background: #fff;
}
.restaurant_payout_create fieldset > legend,
.restaurant_info-section fieldset > legend,
.form-page fieldset > legend,
.listings-page fieldset > legend {
    position: absolute;
    top: -14px; left: 20px;
    display: inline-block;
    border: none !important;
    margin: 0 !important;
}

/* label/value pairs -> ec-detail-row rhythm */
.restaurant_payout_create .form-group.row,
.restaurant_info-section .form-group.row {
    padding: 10px 0;
    margin: 0 0 0 0;
    border-bottom: 1px solid #f1f2f6;
}
.restaurant_payout_create .form-group.row:last-child,
.restaurant_info-section .form-group.row:last-child { border-bottom: none; }
.restaurant_payout_create .form-group.row > label.control-label,
.restaurant_info-section .form-group.row > label.control-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin-bottom: 0;
}
.restaurant_payout_create .form-group.row > div > span,
.restaurant_info-section .form-group.row > div > span {
    font-size: 14px;
    color: #0C111C;
    word-break: break-word;
}

/* Legacy stat cards -> the ec-kpi tile look. */
.card.card-box-with-icon {
    border: 1px solid #eef1f6 !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05) !important;
    background: #fff !important;
}
.card.card-box-with-icon .card-body { padding: 18px 20px !important; }
.card.card-box-with-icon h4 { font-size: 22px !important; font-weight: 800 !important; color: #0C111C !important; }
.card.card-box-with-icon p { font-size: 13px !important; color: #8a90a6 !important; font-weight: 600; }
.card.card-box-with-icon .box-icon img { width: 38px; height: 38px; object-fit: contain; }

/* Profile thumbnail inside a detail fieldset. */
.restaurant_payout_create .profile_image img,
.restaurant_info-section .profile_image img,
.ec-detail-avatar img {
    border-radius: 12px;
    object-fit: cover;
}

/* The legacy detail layout constrains these sections to `max-width:70%; display:table`
   and forces the value column to `flex:0 0 100%`, which is why the pairs stacked and
   the card sat narrow and off-centre. Restored to a full-width label/value row. */
.row.restaurant_payout_create,
.restaurant_info-section .row.restaurant_payout_create {
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
}
.row.restaurant_payout_create .form-group.row.width-50,
.restaurant_info-section .form-group.row.width-50 { width: 100% !important; }

.row.restaurant_payout_create .form-group.row,
.restaurant_info-section .form-group.row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline;
}
.row.restaurant_payout_create .form-group.row > label.control-label,
.restaurant_info-section .form-group.row > label.control-label {
    flex: 0 0 180px !important;
    max-width: 180px !important;
    padding-left: 0;
}
.row.restaurant_payout_create .form-group.row > .col-7,
.row.restaurant_payout_create .form-group.row > div:not(label),
.restaurant_info-section .form-group.row > .col-7 {
    flex: 1 1 auto !important;
    max-width: none !important;
}

/* Profile thumbnails inside a detail section were rendering at full column width. */
.row.restaurant_payout_create .profile_image img,
.restaurant_info-section .profile_image img {
    width: 96px !important;
    height: 96px !important;
    border-radius: 14px;
    object-fit: cover;
}

/* Inline actions inside a detail section follow the brand button. */
.row.restaurant_payout_create .add-wallate,
.restaurant_info-section .add-wallate {
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-weight: 600;
    box-shadow: none !important;
}

/* ==================================================================
   Corrections
   ================================================================== */

/* Payment-method logos were being cropped into 44px circles by the identity-cell
   avatar rule. Only a cell that pairs an image WITH text is an identity cell; a
   lone image is a logo and must keep its aspect ratio. */
table.ec-list-table tbody td:has(> img):has(> a) > img,
table.ec-list-table tbody td:has(> img):has(> span) > img,
table.ec-list-table tbody td:has(> img):has(> .ec-id-text) > img {
    border-radius: 50% !important; object-fit: cover !important;
}
/* Lone logos: fit the cell without distortion. */
table.ec-list-table tbody td > img:only-child {
    max-width: 110px !important;
    max-height: 34px !important;
    width: auto !important; height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

/* The legacy rule pins this action to the top-right of the section, which put it on
   top of the first fieldset's title. Kept in the corner but clear of the border. */
.restaurant_payout_create-inner { position: relative; }
.restaurant_payout_create-inner a.add-wallate {
    /* Normal flow, right-aligned above the section — the legacy rule pinned it
       absolutely at top:0 where it landed on the section title. */
    position: static !important;
    display: block;
    width: fit-content;
    margin: 0 0 14px auto !important;
}
/* The label was invisible because the legacy rule only set a colour on :focus. */
.add-wallate, .add-wallate:hover, .add-wallate:focus {
    color: var(--admin-panel-contrast, #fff) !important;
    font-size: 14px !important;
    text-indent: 0 !important;
}

/* Toggles outside a listing table (advertisement setup) follow the brand too. */
.switch input:checked + .slider,
.switch input:checked + .slider.round { background: var(--admin-panel-color) !important; }
.switch .slider, .switch .slider.round { background: #d0d5de; }

/* Detail sub-tabs: many tabs (restaurant view has 11) must wrap into rows rather
   than overflow, and read as the underline strip the rest of the panel uses. */
.menu-tab > ul {
    display: flex; flex-wrap: wrap;
    gap: 2px 4px;
    padding: 0; margin: 0;
    list-style: none;
    border-bottom: 1px solid #eef0f4;
}
.menu-tab > ul > li { margin: 0; }
.menu-tab > ul > li > a {
    display: inline-block;
    border: 0; border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #8a90a6;
    font-weight: 600; font-size: 13.5px;
    padding: 10px 14px;
    white-space: nowrap;
}
.menu-tab > ul > li > a:hover { color: var(--admin-panel-color); }
.menu-tab > ul > li.active > a {
    color: var(--admin-panel-color);
    border-bottom-color: var(--admin-panel-color);
    background: transparent;
}

/* An empty filter column left a gap before the next control. */
.ec-filter-row > [class*="col-"]:empty { display: none !important; }

/* Bottom "Back" control on detail pages follows the ghost button. */
.page-wrapper .btn-secondary,
.form-page .btn.btn-default {
    background: #fff !important;
    border: 1px solid #e2e6ef !important;
    color: #3b4060 !important;
    border-radius: 10px !important;
    font-weight: 600;
}
.page-wrapper .btn-secondary:hover,
.form-page .btn.btn-default:hover {
    border-color: var(--admin-panel-color) !important;
    color: var(--admin-panel-color) !important;
}

/* ------------------------------------------------------------------
   Payment-method logos.
   The row-thumbnail rule above normalises every row image to a 44px square with
   object-fit:cover, which is right for avatars but crops a wide gateway logo
   (paystack is 265x100). These live in .payment_images and keep their ratio.
   ------------------------------------------------------------------ */
.ec-list-table tbody td .payment_images img,
.ec-list-table tbody td span.payment_images img {
    width: auto !important;
    height: auto !important;
    max-width: 96px !important;
    max-height: 30px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.ec-list-table tbody td .payment_images {
    align-items: center;
    min-height: 30px;
}

/* ------------------------------------------------------------------
   Modals — card shell rather than the theme's flat box.
   ------------------------------------------------------------------ */
.modal-content {
    border: 1px solid #eef0f4 !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .16) !important;
    overflow: hidden;
}
.modal-header {
    background: #fff !important;
    border-bottom: 1px solid #eef0f4 !important;
    padding: 16px 20px !important;
    align-items: center;
}
.modal-header .modal-title { font-size: 16px; color: #0C111C; }
.modal-header .close {
    color: #8a90a6; opacity: 1; font-weight: 400; font-size: 24px;
    padding: 0; margin: 0; line-height: 1;
    transition: color .15s;
}
.modal-header .close:hover { color: var(--admin-panel-color); }
.modal-body { padding: 20px !important; }
.modal-body label,
.modal-body label.control-label {
    display: block;
    font-size: 13px; font-weight: 600; color: #3b4060;
    margin-bottom: 6px;
}
.modal-body .form-control {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    min-height: 42px;
    font-size: 14px;
}
.modal-body .form-control:focus {
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 255, 104, 58), .15);
}
.modal-content .modal-footer {
    border-top: 1px solid #eef0f4 !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    background: #fff;
    gap: 8px;
}
/* Several screens nest the footer INSIDE .modal-body — only there do the
   negative margins cancel the body padding. On proper sibling footers they
   pushed the Close button outside the modal. */
.modal-content .modal-body .modal-footer {
    margin: 20px -20px -20px !important;
}
.modal-content .modal-footer .btn {
    min-width: 110px;
    border-radius: 10px !important;
    font-weight: 600;
    text-transform: none;
}
/* Primary = brand; the secondary/close action reads as a ghost button. */
.modal-content .modal-footer .btn-primary:first-child,
.modal-content .modal-footer .save-form-btn {
    background: var(--admin-panel-color) !important;
    border-color: transparent !important;
    color: var(--admin-panel-contrast, #fff) !important;
}
.modal-content .modal-footer .btn[data-dismiss="modal"] {
    background: #fff !important;
    border: 1px solid #e2e6ef !important;
    color: #3b4060 !important;
}
.modal-content .modal-footer .btn[data-dismiss="modal"]:hover {
    border-color: var(--admin-panel-color) !important;
    color: var(--admin-panel-color) !important;
}

/* Detail rows on the advertisement view used dashed rules; match the solid
   hairline the other detail pages use. */

/* The advertisement / order detail rows use a 2px dashed rule from the legacy
   theme. Matched to the solid hairline used on every other detail page. */

/* Status badges outside a listing table (detail pages) use the same soft pills. */
.form-page .badge, .listings-page .badge,
.order_edit-genrl .badge, .order_detail-top-box .badge {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    border: 0 !important;
    box-shadow: none !important;
}
.form-page .badge-success, .listings-page .badge-success,
.order_edit-genrl .badge-success { background: #e5f7ed !important; color: #1a7f4c !important; }
.form-page .badge-warning, .listings-page .badge-warning,
.order_edit-genrl .badge-warning { background: #fef3d5 !important; color: #a86400 !important; }
.form-page .badge-danger, .listings-page .badge-danger,
.order_edit-genrl .badge-danger { background: #fdecec !important; color: #b91c1c !important; }
.form-page .badge-info, .form-page .badge-primary,
.listings-page .badge-info, .listings-page .badge-primary { background: #eef0f4 !important; color: #5a6179 !important; }

/* ------------------------------------------------------------------
   Advertisement / order detail rows.
   ------------------------------------------------------------------ */

/* The row already carries the hairline; the label carried a second one, which read
   as a double rule. Only the row draws it. */
.order_edit-genrl .form-group.row .control-label,
.order_edit-genrl .form-group.row.gendetail-col .control-label,
.address p { border-bottom: 0 !important; }
.order_edit-genrl .form-group.row {
    align-items: baseline;
    margin: 0;
    padding: 10px 0;
}
.order_edit-genrl .form-group.row:last-child { border-bottom: none !important; }

/* These rows put the label AND the value inside one col-12 <label>, split by a
   floated <strong> reserving 35%% of the row — that reservation is the gap. A fixed
   label column keeps the value next to its label at any width. */
.order_edit-genrl .form-group.row.gendetail-col .control-label > strong,
.address p strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
}
.order_edit-genrl .form-group.row.gendetail-col .control-label > span,
.address p span {
    color: #0C111C;
}

/* The Validity control is a field, not a detail row — it must not draw a rule. */
.order_addre-edit .form-group.row,
.order_detail-top-box .form-group.row { border-bottom: 0 !important; }
.order_addre-edit #daterange,
.order_addre-edit .ec-daterange { border: 1px solid #e2e6ef !important; border-radius: 10px !important; }

/* Wallet payment status uses .success / .refund_success spans rather than .badge,
   so it needs the same soft pill treatment the other lists use. */
table.ec-list-table td .success > span,
table.ec-list-table td .refund_success > span,
table.ec-list-table td .undefined > span {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    text-transform: capitalize;
    white-space: nowrap !important;
    border: 0 !important;
    box-shadow: none !important;
}
table.ec-list-table td .success > span { background: #e5f7ed !important; color: #1a7f4c !important; }
table.ec-list-table td .refund_success > span { background: #fef3d5 !important; color: #a86400 !important; }
table.ec-list-table td .undefined > span { background: #eef0f4 !important; color: #5a6179 !important; }

/* Payment method now renders as text, so the wrapper needs no image sizing. */

/* The value was landing 360px in: <strong> is floated 180px wide AND the span
   carried a 180px left margin, so the two stacked. A flex row removes the float
   arithmetic entirely — one fixed label column, value fills the rest. */
.address p,
.order_edit-genrl .form-group.row.gendetail-col .control-label {
    display: flex !important;
    align-items: baseline;
    gap: 12px;
}
.address p strong,
.order_edit-genrl .form-group.row.gendetail-col .control-label > strong {
    flex: 0 0 180px !important;
    width: auto !important;
    max-width: 180px !important;
    float: none !important;
    padding-right: 0 !important;
}
.address p span,
.order_edit-genrl .form-group.row.gendetail-col .control-label > span {
    margin-left: 0 !important;
    flex: 1 1 auto;
    display: block;
}

/* Payment method reads as a soft chip, like the other classification columns. */
.ec-list-table tbody td .payment_images {
    display: inline-block;
    background: #f5f7fb;
    color: #3b4060;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* ==================================================================
   Compactness + contrast pass
   ================================================================== */

/* Amber accent left at the original tone — the darkened variant read worse. */

/* 2. Recent Payouts ran to 117px rows because the restaurant name and the date each
   wrapped onto two lines. Both stay on one line; the card scrolls if it must. */
#recentPayoutsTable tbody td,
#orderTable tbody td { white-space: nowrap; }
/* The note is free text; truncate it so one long note cannot triple the row. */
#recentPayoutsTable tbody td:last-child {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ec-recent-table tbody td { padding: 10px 14px !important; }

/* 4 + 6. Listing rows were 83px on Vendors (and 81 on Drivers) — driven by the 44px
   avatar plus cell padding. A 36px avatar and tighter padding bring every listing
   into the same rhythm without losing legibility. */
table.ec-list-table tbody td { padding: 8px 14px !important; }
table.ec-list-table thead th { padding: 10px 14px !important; }
table.ec-list-table tbody td:has(> img):has(> a) > img,
table.ec-list-table tbody td:has(> img):has(> span) > img,
table.ec-list-table tbody td:has(> img):has(> .ec-id-text) > img,
table.ec-list-table tbody td > div.any > img {
    width: 36px !important; height: 36px !important;
}
/* Chip size is left at 38px/20px as requested earlier — the row height comes down
   from the avatar and cell padding instead. */

/* 7. A <legend> is a block box, so `width:auto` let it fill the fieldset — and a
   later rule painted its text white, giving an empty tinted bar. It reads as the
   same brand pill the detail sections use. */
.page-wrapper fieldset > legend,
.vendor_payout_create-inner fieldset legend,
.restaurant_payout_create-inner fieldset legend {
    display: inline-block !important;
    width: auto !important;
    max-width: max-content !important;
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* 8. Filters share one row and always fill it, however many there are: the search
   column takes twice the width of a filter, the rest divide what is left. Fixed
   col-lg-N widths left dead space whenever the count did not divide into 12. */
.ec-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; }
.ec-filter-row > [class*="col-"] {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0;
}
.ec-filter-row > [class*="col-"]:first-child { flex: 2 1 0 !important; }
/* The date-range column keeps room for its full label ("Aug 17, 2026 - Aug 18, 2026" plus icon
   and caret); the other filters divide what is left, and the row wraps below that. */
.ec-filter-row > [class*="col-"]:has(> #daterange, > .ec-daterange) { min-width: 280px; }

/* 9. Conversation rows carried more vertical padding than their content needed. */
.chat-item { padding: 9px 16px !important; }
.chat-item-thumb { width: 38px !important; height: 38px !important; }
.chat-list { padding: 0 !important; }

/* Conversation rows inherit `margin-top: 30px` from the theme's `.chat-list li`,
   which is the gap above the first row and between every pair. */
#chatInbox .chat-item,
.chat-list .chat-item,
.chat-list li { margin: 0 !important; }

/* ==================================================================
   Settings hub — card grid, with the brand colour taken from the admin panel
   variable rather than hardcoded.
   ================================================================== */
.settings-card-link { display: block; color: inherit; text-decoration: none; }
.settings-card-link:hover { text-decoration: none; color: inherit; }
.settings-card {
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.settings-card-link:hover .settings-card {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    border-color: var(--admin-panel-color) !important;
    transform: translateY(-1px);
}
.settings-card .card-body { padding: 20px !important; }
.settings-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.settings-card h5 { font-size: 15px; color: #0C111C; }
.settings-card p { font-size: 12.5px; line-height: 1.5; }
.settings-card-arrow { color: #9ca3af; font-size: 22px; line-height: 1; }
.settings-card-link:hover .settings-card-arrow { color: var(--admin-panel-color); }

/* The gateway strip lists 20 providers; as a wrapping tab row it ran to three lines.
   As a chip grid each provider reads as its own target and the active one is
   unmistakable. */
/* Gateway tab strip: naturally-sized chips that wrap and centre, the active one
   filled solid with the brand colour, and its status badge inverted to white on
   that fill (replaces the equal-width grid with a tinted active state and a
   green badge). */
/* The underline-strip rule is `ul.nav-tabs.ec-lang-tabs` (0,2,1) with
   !important, so a plain `.payment-top-tab .ec-lang-tabs` (0,2,0) loses and the
   1px rule stayed. Matching its shape wins the gateway strip back. */
.payment-top-tab ul.nav-tabs.ec-lang-tabs,
.payment-top-tab .ec-lang-tabs {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    /* The underline-strip rule sets `gap: 0 !important`, which left the gateway
   chips butted together with no spacing; use 8px. */
    gap: 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    padding: 4px 0 !important;
}
.payment-top-tab .ec-lang-tabs .nav-item { margin: 0 !important; }
.payment-top-tab .ec-lang-tabs .nav-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e6ef !important;
    border-radius: 9px !important;
    padding: 8px 14px !important;
    background: #fff !important;
    font-size: 13.5px !important;
    white-space: nowrap;
}
.payment-top-tab .ec-lang-tabs .nav-link.active,
.payment-top-tab .ec-lang-tabs .nav-link:hover {
    border-color: var(--admin-panel-color) !important;
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}
/* The generic `.form-page .badge-success` rule paints these green with
   !important, so these carry it too — gateway badges are solid brand, inverted
   to white on the active chip. */
.payment-top-tab .ec-lang-tabs .nav-link .badge,
.payment-top-tab .ec-lang-tabs .nav-link .badge-success {
    margin: 0 !important;
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    -webkit-text-fill-color: var(--admin-panel-contrast, #fff) !important;
}
.payment-top-tab .ec-lang-tabs .nav-link.active .badge,
.payment-top-tab .ec-lang-tabs .nav-link.active .badge-success,
.payment-top-tab .ec-lang-tabs .nav-link:hover .badge,
.payment-top-tab .ec-lang-tabs .nav-link:hover .badge-success {
    background: #fff !important;
    color: var(--admin-panel-color) !important;
    /* the hovered chip forces a white text fill on everything inside it; the badge keeps its own */
    -webkit-text-fill-color: var(--admin-panel-color) !important;
}

/* ------------------------------------------------------------------
   Contact location picker. The map sits inside the Contact Us section
   (not a fieldset of its own) and runs the full width of the card; the
   search box is a normal field above it rather than an overlay, which
   was covering the zoom controls and clipping the top row of tiles.
   ------------------------------------------------------------------ */
.page-wrapper.form-page .ec-section .ec-map-picker { grid-column: 1 / -1; }
.page-wrapper.form-page .ec-section .ec-map-picker #default_loc_map {
    width: 100% !important;
    height: 360px !important;
    border-radius: 10px;
    border: 1px solid #e2e6ef;
    z-index: 0;
}
.page-wrapper.form-page .ec-section .ec-map-picker #fd_map_search {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    box-shadow: none !important;
}
/* jQuery-UI autocomplete must clear the map's own stacking context */
.ui-autocomplete { z-index: 10000 !important; }

/* ------------------------------------------------------------------
   Form-card content must line up with the page title.

   The card body's 20px side padding pushed every ec-section to x=315
   while the page head sat at 295, so the box looked shifted right
   against its own title. Screens without a card (Radius Configuration)
   were already aligned at 295 — this brings the carded ones to match.
   Vertical padding is kept; only the horizontal inset goes.
   ------------------------------------------------------------------ */
.page-wrapper.form-page .card.ec-form-card:has(.ec-section) > .card-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.page-wrapper.form-page .card.ec-form-card > .ec-form-actions {
    padding-left: 0;
    padding-right: 0;
}

/* Checkbox rows: the box sat hard against its label. */
.page-wrapper.form-page .ec-section .form-check + .form-check { margin-top: 10px; }

/* The CMS screens (landing page, footer, terms, privacy) hang their page head
   straight off .page-wrapper rather than inside a .container-fluid, so it had
   no gutter and sat hard against the sidenav. Give it the same 30px the
   container would have provided. */
.page-wrapper > .ec-page-head {
    padding-left: 30px;
    padding-right: 30px;
}

/* ------------------------------------------------------------------
   Summernote editors (landing page, footer, terms, privacy).

   The plugin writes a fixed inline `width: 1024px` onto .note-editor from
   its init options, so the editor sat narrow inside a 1175px card and no
   stylesheet could win — inline styles beat selectors. !important on the
   width is what overrides an inline declaration.
   ------------------------------------------------------------------ */
.note-editor.note-frame {
    width: 100% !important;
    max-width: 100% !important;
}
.note-editor.note-frame .note-editing-area,
.note-editor.note-frame .note-editable,
.note-editor.note-frame .note-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
/* Toolbar buttons wrap onto a tidy second row rather than overflowing. */
.note-editor.note-frame .note-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
/* Wide pasted content scrolls inside the editor instead of stretching it. */
.note-editor.note-frame .note-editable { overflow-x: auto; }

/* ------------------------------------------------------------------
   Gateway screens hang their card straight off .page-wrapper rather than
   inside a .container-fluid, so it missed the 30px gutter and sat 30px
   left of its own page title. The legacy `*-inner` wrapper also carries a
   -10px margin, which pushed sections outside the card entirely once the
   card body's padding was removed.
   ------------------------------------------------------------------ */
.page-wrapper.form-page > .card.ec-form-card,
.page-wrapper.form-page > .card.ec-card {
    margin-left: 30px;
    margin-right: 30px;
}
.page-wrapper.form-page .card.ec-form-card .row.restaurant_payout_create,
.page-wrapper.form-page .card.ec-form-card [class$="-inner"],
.page-wrapper.form-page .card.ec-form-card .page-inn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}

/* select2 sizes itself at init; inside our form columns it needs to fill the
   column rather than shrink to its placeholder. */
.page-wrapper.form-page .ec-section .select2-container .select2-selection--single {
    height: 42px;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    display: flex;
    align-items: center;
}
.page-wrapper.form-page .ec-section .select2-container .select2-selection__arrow { height: 40px; }

/* select2 single-select: the rendered label was clipped to "Ind…" because the
   theme constrains the inner span. Let it use the full control width, with the
   flag sized so it doesn't push the name out. */
.page-wrapper.form-page .ec-section .select2-selection--single .select2-selection__rendered {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    padding-right: 28px;
    line-height: 1.4;
}
.page-wrapper.form-page .ec-section .select2-selection__rendered > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.page-wrapper.form-page .ec-section .select2-selection__rendered .img-flag { width: 20px; height: auto; flex: 0 0 20px; }
.page-wrapper.form-page .ec-section .select2-selection__clear { order: 9; margin-left: auto; }

/* The theme positions .select2-container absolutely, so its column collapses to
   1px and the control overlaps whatever follows (here, the map picker's label).
   Put it back in flow so the field reserves its own height. */
.page-wrapper.form-page .ec-section .select2.select2-container,
.page-wrapper.form-page .ec-section .select2-container {
    display: block;
    margin-top: 0;
}

/* The generic `a:hover, a:focus { color: var(--admin-panel-color) }` turns a
   brand-filled button's label the same colour as its background, so the text
   disappears after a click until focus moves away. Filled buttons keep their
   contrast colour in every state. */
a.ec-head-btn:hover, a.ec-head-btn:focus, a.ec-head-btn:active,
a.ec-btn-brand:hover, a.ec-btn-brand:focus, a.ec-btn-brand:active,
.btn.ec-btn-brand:hover, .btn.ec-btn-brand:focus, .btn.ec-btn-brand:active,
.btn.ec-head-btn:hover, .btn.ec-head-btn:focus, .btn.ec-head-btn:active {
    color: var(--admin-panel-contrast, #fff) !important;
    filter: none;
}
/* Ghost buttons keep their own text colour rather than the link colour. */
a.ec-btn-ghost:hover, a.ec-btn-ghost:focus, a.ec-btn-ghost:active,
.btn.ec-btn-ghost:hover, .btn.ec-btn-ghost:focus, .btn.ec-btn-ghost:active {
    color: #3b4060 !important;
    filter: none;
}

/* Dependent fields hidden by ec-form.js. Needs !important and enough weight to
   beat `.ec-section .form-group { display: block !important }` above. */
.page-wrapper.form-page .ec-section .form-group.ec-dep-hidden,
.page-wrapper.form-page .ec-section .form-check.ec-dep-hidden,
.ec-dep-hidden { display: none !important; }

/* The theme paints every .switch-box-inner with a pale blue panel. The earlier
   override only covered .ec-section, so detail pages (advertisement, driver)
   still showed it. Flatten it wherever it appears in the panel. */
.page-wrapper .switch-box .switch-box-inner {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Advertisement detail — contact info rows.
   The <p><strong>Phone:</strong></p> pairs sat almost on top of each other with
   their separator line hugging the text. Give them room and lighten the rule. */
.restaurant_info-section p:has(> strong),
.contact-info + p, .contact-info ~ p {
    display: flex;
    gap: 10px;
}
.contact-info ~ p > span { flex: 1; color: #0C111C; word-break: break-word; }


/* Advertisement status row: the select and its Update button sit side by side,
   with the select taking the free space. */
.update-status-div > .col-7 {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* The select stays compact rather than filling the column, with the button
   sitting directly beside it. */
.update-status-div > .col-7 > select.form-control { flex: 0 0 260px; max-width: 260px; min-width: 0; }
.update-status-div > .col-7 > .btn { flex: 0 0 auto; }

/* Subscription plan: the feature list sits under its label, not indented away
   from it, and reads as chips rather than a bare bullet list. */
.plan-features-col .plan_features ul,
.plan-features-col .plan_features { padding-left: 0; margin: 0; list-style: none; }
.plan-features-col .plan_features li {
    display: inline-block;
    margin: 4px 6px 0 0;
}

/* Status row: the select's column carries Bootstrap's 15px gutter, which pushed
   it right of the "Update Status:" label above it. Align them on the same edge. */
.update-status-div > .col-7 { padding-left: 0 !important; }
.update-status-div > .control-label { padding-left: 0; margin-bottom: 6px; }

/* User addresses: two per row, wrapping to further rows when there are more.
   The list is a .row of .col-md-12 items, so the columns are overridden here
   rather than in the JS that builds the markup. */
.ec-detail-value.address .res-search-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* row gap matches mb-4 so stacked address rows are not flush */
    gap: 24px 16px;
    margin: 0;
    align-items: start;
}
.ec-detail-value.address .res-search-list > .transactions-list-wrap {
    max-width: 100% !important;
    flex: none !important;
    width: auto;
    padding: 0;
    margin-top: 0 !important;
}
@media (max-width: 991px) {
    .ec-detail-value.address .res-search-list { grid-template-columns: 1fr; }
}

/* Driver Details + Bank Details side by side.
   `.row.restaurant_payout_create` forces display:block and width:100% with
   !important, which is why Bootstrap columns had no effect here. As grid items
   inside .ec-detail-pair they size to their track instead. */
.ec-detail-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    align-items: start;
}
.ec-detail-pair > .row.restaurant_payout_create {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
}
@media (max-width: 991px) {
    .ec-detail-pair { grid-template-columns: 1fr; }
}

/* The paired detail blocks: give them room below the KPI strip, and cancel the
   legacy `*-inner` -10px margin so their edges line up with the cards above
   (they were sitting at x=285 against the KPI row's 295). */
.ec-detail-pair { margin-top: 24px; }
.ec-detail-pair .restaurant_payout_create-inner,
.ec-detail-pair .page-inn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Page-head buttons are one size. .ec-head-btn was 49px tall with 14px text
   against .ec-btn-ghost's 42px / 13.5px, so the pair looked mismatched. */
.ec-page-head .ec-head-btn,
.ec-page-head .btn.ec-head-btn {
    height: 42px;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
}

/* Restaurant detail: the label is the prominent element and the value reads as
   secondary — label larger and dark, value smaller and muted. */
.restaurant_info-section .form-group.row > label.control-label,
.restaurant_info-section p > strong,
.order_detail .form-group.row > label.control-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0C111C !important;
    line-height: 1.5;
}
/* Column-style blocks (Name / Phone / Email, Plan Type, Order Limit …) use a
   heading plus a value beneath, so the same emphasis applies there. */
.restaurant_info-section label.mb-1,
.card-body label.font-semibold {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0C111C !important;
}
.restaurant_info-section label.mb-1 + p,
.card-body label.font-semibold + p {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 0;
}

/* Phone / Address / Cuisines use a <li> with a label and a sibling span, not the
   form-group or label+p patterns above — same emphasis applied here. */

/* Label/value pairs in the column-style blocks need breathing room between
   rows — Name/Plan Type sat directly on top of Order Limit/Item Limit. */
.card-body label.font-semibold,
.restaurant_info-section label.mb-1 {
    display: block;
    margin-bottom: 2px !important;
}
.card-body label.font-semibold + p,
.restaurant_info-section label.mb-1 + p {
    margin-bottom: 18px !important;
}
/* Inline li rows (Phone / Address / Cuisines) get a gap after the label. */

/* Services list: the theme adds 16px padding-bottom per item, which left the
   rows far apart inside their card. */

/* "No map available" replaces the 225px map iframe, but .mapouter keeps the
   iframe's fixed height and overflow:hidden, which clipped the message. When it
   holds only text, let it size to content and centre it. */
.mapouter:has(> p) {
    height: auto !important;
    overflow: visible !important;
    text-align: left !important;
}
.mapouter > p {
    padding: 18px 20px;
}

/* ------------------------------------------------------------------
   Focus text disappearing — root fix.

   `a:hover, a:focus { color: var(--admin-panel-color) }` turns ANY anchor's
   text the brand colour. On a brand-filled surface (buttons, active tabs) that
   makes the label invisible until focus moves away. Rather than patch each
   component as it turns up, every brand-filled anchor keeps its contrast
   colour in all states.
   ------------------------------------------------------------------ */
a.nav-link.active:hover, a.nav-link.active:focus, a.nav-link.active:active,
.nav-tabs .nav-link.active:hover, .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active:active,
.card-header-tabs .nav-link.active:hover, .card-header-tabs .nav-link.active:focus,
a.btn.ec-btn-brand:hover, a.btn.ec-btn-brand:focus, a.btn.ec-btn-brand:active,
a.ec-head-btn:hover, a.ec-head-btn:focus, a.ec-head-btn:active {
    color: var(--admin-panel-contrast, #fff) !important;
    filter: none !important;
}

/* Gap between the tab strip and the card below it. */
.page-wrapper.form-page .card-header .nav-tabs.card-header-tabs,
.page-wrapper.form-page .nav-tabs.card-header-tabs { margin-bottom: 20px; }

/* Textareas take the full row — a half-width textarea leaves its partner cell
   empty and the field reads as cramped. */
.page-wrapper.form-page .ec-section > .form-group:has(textarea) { grid-column: 1 / -1; }
.page-wrapper.form-page .ec-section textarea.form-control { min-height: 120px; }
/* The textarea keeps its own row, but the field itself matches the width of a
   normal half-row input rather than stretching across both columns. */
.page-wrapper.form-page .ec-section > .form-group:has(textarea) > div[class*="col-"],
.page-wrapper.form-page .ec-section > .form-group:has(textarea) > textarea {
    max-width: calc(50% - 12px);
}

/* Review-attribute style checkbox lists: box and label on one line, evenly
   spaced, several per row rather than one tall column. */
.page-wrapper.form-page .tab-pane .form-check,
.page-wrapper.form-page #review_attributes .form-check {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 0 0 0 !important;
    margin: 0 0 12px 0;
}
.page-wrapper.form-page #review_attributes.tab-pane:not(.active) { display: none !important; }
.page-wrapper.form-page #review_attributes.active {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 24px;
    padding: 8px 0 4px;
}
@media (max-width: 991px) { .page-wrapper.form-page #review_attributes.active { grid-template-columns: 1fr 1fr; } }
/* The attribute labels are generated with col-3, which gives them a 25% flex
   basis and bootstrap padding — they sat off-centre from their checkbox. */
.page-wrapper.form-page #review_attributes .form-check > label,
.page-wrapper.form-page .tab-pane .form-check > label.control-label {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: center;
}
.page-wrapper.form-page #review_attributes .form-check > input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0 !important;
    align-self: center;
}

/* Tab strip: no rule under it, and the active tab keeps its label on hover.
   The generic `a:hover{color:brand}` was still winning over the earlier fix on
   this element, so these carry the same weight plus !important. */
.page-wrapper.form-page .nav-tabs,
.page-wrapper.form-page .nav-tabs.card-header-tabs,
.page-wrapper.form-page .card-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.page-wrapper.form-page .nav-tabs .nav-link.active,
.page-wrapper.form-page .nav-tabs .nav-link.active:hover,
.page-wrapper.form-page .nav-tabs .nav-link.active:focus,
.page-wrapper.form-page .nav-tabs .nav-link.active:active,
.page-wrapper.form-page .nav-tabs .nav-link.active:visited {
    color: var(--admin-panel-contrast, #fff) !important;
    background: var(--admin-panel-color) !important;
    filter: none !important;
}

/* Any tab that takes a brand background — active or merely hovered — keeps a
   readable label. */
.page-wrapper .nav-tabs .nav-link:hover,
.page-wrapper .nav-tabs .nav-link:focus,
.payment-top-tab .ec-lang-tabs .nav-link:hover {
    color: var(--admin-panel-contrast, #fff) !important;
}
.page-wrapper .nav-tabs .nav-link:not(.active):not(:hover) { color: #3b4060 !important; }

/* Checkbox rows: box and label share a centre line. */
.page-wrapper.form-page .ec-section .form-check > input[type="checkbox"],
.page-wrapper.form-page .form-check > input[type="checkbox"] { align-self: center; margin-top: 0 !important; }
.page-wrapper.form-page .ec-section .form-check > label,
.page-wrapper.form-page .form-check > label { align-self: center; margin-bottom: 0 !important; }

/* These three need !important because earlier rules in this file set the same
   properties with !important:
   - the col wrapper is forced to max-width:100% for the label-above layout
   - .form-check label/box alignment is set by the section rules
   - the tab colour is chased by the theme's own hover styling            */
.page-wrapper.form-page .ec-section > .form-group:has(textarea) > div[class*="col-"] {
    max-width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
}
.page-wrapper.form-page .ec-section .form-check {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}
.page-wrapper.form-page .ec-section .form-check > input[type="checkbox"] {
    align-self: center !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
.page-wrapper.form-page .ec-section .form-check > label {
    align-self: center !important;
    margin: 0 !important;
    width: auto !important;
    padding: 0 !important;
}
.page-wrapper.form-page .nav-tabs .nav-link:hover,
.page-wrapper.form-page .nav-tabs .nav-link.active:hover,
.page-wrapper.form-page .card-header-tabs .nav-link:hover {
    color: var(--admin-panel-contrast, #fff) !important;
    -webkit-text-fill-color: var(--admin-panel-contrast, #fff) !important;
}

/* ------------------------------------------------------------------
   Two fixes located by enumerating the winning rules, not by guessing.

   1. The textarea column stayed full width because
      `.ec-section .form-group.row > div[class*="col-"]` is (0,6,1) — the
      extra `.row` class outranked my (0,5,2) selector, so no amount of
      !important could win. Matching `.form-group.row` makes this (0,6,2).

   2. The theme renders a SECOND, fake checkbox through `label::before`
      (content:"", 18px) beside the real one, which is what made these rows
      look doubled and misaligned. The real input is already styled, so the
      pseudo-element is switched off inside our checkbox rows.
   ------------------------------------------------------------------ */
.page-wrapper.form-page .ec-section .form-group.row:has(textarea) > div[class*="col-"] {
    max-width: calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
}
.page-wrapper.form-page .ec-section .form-check > input[type="checkbox"] + label::before,
.page-wrapper.form-page .ec-section .form-check > input[type="checkbox"] + label::after,
.page-wrapper.form-page .tab-pane .form-check > input[type="checkbox"] + label::before,
.page-wrapper.form-page .tab-pane .form-check > input[type="checkbox"] + label::after {
    content: none !important;
    display: none !important;
}
.page-wrapper.form-page .ec-section .form-check > input[type="checkbox"] + label,
.page-wrapper.form-page .tab-pane .form-check > input[type="checkbox"] + label {
    padding-left: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
}


/* ── Phone field: country selector beside the number, not above it ───────────
   The theme's own rule assumes the selector is absolutely positioned over a
   120px left pad, which never took effect — the select and the input both
   render as block-level .form-control and stack. Flex puts them on one line and
   lets the error text drop below. */
.page-wrapper .phone-box {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.page-wrapper .phone-box > .form-control.country_code,
.page-wrapper .phone-box > .select2-container {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 150px;
    max-width: 220px;
}
.page-wrapper .phone-box > .form-control.user_phone,
.page-wrapper .phone-box > .form-control.restaurant_phone {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 12px !important;
    background-color: #fff;
}
.page-wrapper .phone-box > .err { flex-basis: 100%; }

/* ── Instruction rows span the grid ──────────────────────────────────────────
   A .form-group holding no control is a note, not a field — the "Do you know
   your coordinates?" line on the driver forms, and the price-instruction block
   on foods. Left in a single grid cell it consumed half a row and orphaned the
   field opposite it. Give it the full width so the fields after it pair up. */
.page-wrapper.form-page .ec-section > .form-group:not(:has(input, select, textarea)) {
    grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS — checkbox, radio, radio-card
   The theme had no usable styling for either: its custom checkbox was scoped to
   .ec-list-table only, and radios had no rule anywhere, so both fell through to
   the base theme, which hides the real control off-screen
   (position:absolute;left:-9999px;opacity:0) and paints a fake one on the
   following <label> via ::before/::after with a 35px left pad. That is why form
   checkboxes and radios looked native and misaligned next to their labels.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- shared: pull the real control back on screen ------------------------ */
.page-wrapper.form-page input[type="checkbox"]:not(.switch input):not(.btn-check):not([class*="ec-list"]),
.page-wrapper.form-page input[type="radio"]:not(.btn-check) {
    -webkit-appearance: none;
    appearance: none;
    position: relative !important;
    left: auto !important;
    opacity: 1 !important;
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    padding: 0;
    border: 1.5px solid #cbd0da;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease;
}
.page-wrapper.form-page .switch input[type="checkbox"] {
    /* the toggle draws its own track and knob — leave it alone */
    -webkit-appearance: none; appearance: none;
    width: auto; height: auto; border: 0; background: none; margin: 0;
}
.page-wrapper.form-page input[type="checkbox"]:not(.switch input):not(.btn-check) { border-radius: 6px; }
.page-wrapper.form-page input[type="radio"]:not(.btn-check) { border-radius: 50%; }

/* ---- the theme's fake box on the label, and its 35px reservation --------- */
.page-wrapper.form-page input[type="checkbox"]:not(.btn-check) + label::before,
.page-wrapper.form-page input[type="checkbox"]:not(.btn-check) + label::after,
.page-wrapper.form-page input[type="radio"]:not(.btn-check) + label::before,
.page-wrapper.form-page input[type="radio"]:not(.btn-check) + label::after {
    content: none !important;
    display: none !important;
}
.page-wrapper.form-page input[type="checkbox"]:not(.btn-check) + label,
.page-wrapper.form-page input[type="radio"]:not(.btn-check) + label {
    padding-left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 500;
    color: #3b4060;
    cursor: pointer;
    vertical-align: middle;
}

/* ---- checked ------------------------------------------------------------- */
.page-wrapper.form-page input[type="checkbox"]:not(.switch input):not(.btn-check):checked,
.page-wrapper.form-page input[type="radio"]:not(.btn-check):checked {
    background: var(--admin-panel-color);
    border-color: var(--admin-panel-color);
}
.page-wrapper.form-page input[type="checkbox"]:not(.switch input):not(.btn-check):checked::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* a radio reads as a ring with a filled centre, not a solid disc */
.page-wrapper.form-page input[type="radio"]:not(.btn-check):checked {
    background: #fff;
    border-width: 6px;
}
.page-wrapper.form-page input[type="checkbox"]:not(.switch input):not(.btn-check):focus,
.page-wrapper.form-page input[type="radio"]:not(.btn-check):focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 255, 122, 69), .15);
}

/* ---- radio-card group ---------------------------------------------------
   Each choice is a bordered card, the selected one is tinted, and the field
   that choice needs lives inside it instead of floating somewhere further down
   the form. */
.ec-choice-group {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
}
.ec-choice-row {
    flex: 1 1 0;
    min-width: 220px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.ec-choice-row.is-active {
    border-color: var(--admin-panel-color);
    background: rgba(var(--admin-panel-rgb, 255, 122, 69), .07);
}
.ec-choice-row .ec-choice-head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.ec-choice-row .ec-choice-head label {
    margin: 0;
}
.ec-choice-row .ec-choice-body {
    margin-top: 10px;
    padding-left: 26px;
    display: none;
}
.ec-choice-row.is-active .ec-choice-body { display: block; }
/* the dependent field inside a card is a plain control, not a grid row */
.ec-choice-row .ec-choice-body .form-group,
.ec-choice-row .ec-choice-body .form-group.row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ec-choice-row .ec-choice-body .form-group > label,
.ec-choice-row .ec-choice-body .form-group > .control-label { display: none; }
.ec-choice-row .ec-choice-body .form-group > div[class*="col-"] {
    max-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

/* A control with no label of its own (a lone checkbox) sits at the top of its
   grid cell, level with the NEIGHBOUR'S label rather than its input, which reads
   as misaligned. .ec-label-offset opts that cell down by one label line.
   The blanket `.restaurant_payout_create .form-group.row { margin-top: 0 }` is
   (0,5,0), so this has to be (0,6,0) to win — !important would not have helped. */
.page-wrapper.form-page .restaurant_payout_create .form-group.row.ec-label-offset {
    margin-top: 35px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ZONE create/edit — instructions + map area
   Ported from goride style.css:29949. The instructions run full width across the
   top, then the demo GIF and the live map sit side by side at equal height with
   the three tool buttons overlaid on the map's top-right corner.

   foodie previously split this col-sm-5 (instructions AND the GIF stacked) /
   col-sm-5 (map) / col-sm-2 (tools), which squeezed the instruction text into a
   narrow column and shrank the GIF to half its useful size.

   The views declare `#map { height: 500px }` in their own \3c style>, which is an id
   selector — these rules carry the id too so they win on specificity rather than
   on !important alone.
   ══════════════════════════════════════════════════════════════════════════ */
.form-page .instructions-block h4 { font-size: 15px; color: #1a1f2e; margin-bottom: 8px; }
.form-page .instructions-block p { font-size: 13.5px; color: #5a6179; }
.form-page .zone-demo-gif { width: 100%; border-radius: 10px; border: 1px solid #e2e6ef; }

/* Equal-height GIF + map so no blank space shows between the two columns */
.form-page .zone-map-row { display: flex; flex-wrap: wrap; align-items: stretch; }
.form-page .zone-map-row > [class*="col-"] { display: flex; flex-direction: column; }
/* `cover` is what goride uses, but its GIF matches the column's aspect ratio and
   foodie's (744x652) does not — cover cropped 13% off the sides, slicing the tool
   buttons out of the demo. `contain` shows the whole frame and letterboxes it. */
.form-page .zone-map-row .zone-demo-gif {
    height: 100%;
    min-height: 480px;
    object-fit: contain;
    object-position: top center;
    flex: 1 1 auto;
    background: #fafbfd;
}
.form-page .zone-map-row .zone-map-box { flex: 1 1 auto; }

.form-page .zone-map-box { position: relative; margin-top: 12px; }
.form-page .zone-map-box #map {
    width: 100% !important;
    height: 480px !important;
    min-height: 440px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 0;
    border: 1px solid #e2e6ef;
}
/* Tool buttons float over the map instead of taking their own grid column */
.form-page .zone-map-box .mapType {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 600;
    width: auto;
    padding: 0;
    margin: 0;
}
.form-page .zone-map-box .mapType ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.form-page .zone-map-box .mapType li { margin-bottom: 8px; }
.form-page #autocomplete-list { position: relative; z-index: 700; }

/* The blade's own `#search-box { background:#f7f7f7; border:1px solid #c7c7c7 }`
   is an id selector (1,0,0) and outranks `.ec-form-card .form-control` (0,2,0),
   so the zone search rendered grey with a mismatched border while every other
   input on the page was white. Carrying the id here makes this (1,2,0). */
.form-page .zone-map-row #search-box {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    height: auto;
    min-height: 42px;
    font-size: 14px;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0;
}

/* The three instruction badges came out 34x34, 32x34 and 44x49 — the mdi trash
   glyph has different metrics from the fa ones and stayed `display:inline`, so
   its badge was visibly larger than its two neighbours. Fix the box; leave
   background alone, the blade paints it with the admin-panel colour. */
.form-page .instructions-block p .map_icons,
.form-page .zone-map-box .mapType .map_icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 10px 0 0;
    font-size: 16px;
    line-height: 1;
    border-radius: 6px;
    vertical-align: middle;
}
.form-page .zone-map-box .mapType .map_icons {
    width: 40px;
    height: 40px;
    font-size: 20px;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}
.form-page .instructions-block p { display: flex; align-items: center; margin-bottom: 12px; }

/* The map's hand/trash controls were hardcoded `#f44336` in each zone blade —
   a material red that belongs to no part of foodie's palette. Use the admin
   panel colour, the same one the instruction badges are painted with.
   Blade rule is `.leaflet-control-custom` (0,1,0); this is (0,2,0) so it wins
   on specificity rather than on document order. */
.form-page .leaflet-control-custom {
    background-color: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}
.form-page .leaflet-control-custom:hover {
    background-color: var(--admin-panel-color) !important;
    filter: brightness(.9);
}
.form-page .leaflet-control-custom i { color: var(--admin-panel-contrast, #fff) !important; }

/* ── Toasts ──────────────────────────────────────────────────────────────────
   toastr ships `#toast-container > div { opacity: .8 }`, so every toast is 20%
   see-through. Over the topbar that reads as a dull, washed-out red with the
   header text showing through it. Make them solid, and drop them below the
   topbar so they never overlap the account menu.
   shell.css loads after toastr.min.css, so equal specificity is enough. */
#toast-container > div {
    opacity: 1;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .22);
    border-radius: 10px;
    padding: 15px 15px 15px 50px;
}
#toast-container > div:hover {
    opacity: 1;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .3);
}
#toast-container.toast-top-right { top: 76px; right: 18px; }
/* the stock reds, at full strength */
#toast-container > .toast-error { background-color: #d32f2f; }
#toast-container > .toast-success { background-color: #2e9e5b; }
#toast-container > .toast-warning { background-color: #e08600; }
#toast-container > .toast-info { background-color: var(--admin-panel-color); }
#toast-container > div .toast-message { font-size: 14px; line-height: 1.45; }

/* Tight label-toggle pair. Overrides .switch-box's float:right so the toggle
   sits next to its label instead of being pushed to the far edge of whatever
   column it lands in. */
.switch-box.switch-box-tight {
    display: flex;
    align-items: center;
    gap: 12px;
}
.switch-box.switch-box-tight .control-label { margin-bottom: 0; }
.switch-box.switch-box-tight .switch { float: none !important; margin-left: 0 !important; }

/* The row pull is intentional: Bootstrap's -15px row margins stay and the
   card-body's 20px padding absorbs them, which is what puts the first column at
   290 rather than 305. Zeroing it (as this rule used to) inset every field by
   an extra 15px. */

/* select2 and .ec-upload fill their column in the row layout. select2 sizes
   itself from the element's computed width at init, which is not yet final
   inside a fresh flex/grid column, so it can come out narrow. */
.page-wrapper.form-page .card-body .row > [class*="col-"] .select2-container { width: 100% !important; }
.page-wrapper.form-page .card-body .row > [class*="col-"] .ec-upload { width: 100%; }
/* help text belongs under its own field, not spilling into the next column */
.page-wrapper.form-page .card-body .row > [class*="col-"] .ec-form-help { display: block; width: 100%; }

/* Card shell: 14px radius / #eef0f4 border with a faint shadow. Last in the
   file so it wins on order against the earlier !important block. */
.card.ec-card,
.card.ec-list-card,
.card.ec-filter-card,
.card.ec-form-card,
.ec-card,
.ec-list-card,
.ec-filter-card,
.ec-form-card {
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05) !important;
}

/* Form-card header: padding, top radius, #eef0f4 divider and 16px h5, so the
   header has room and its divider reads at the right depth. */
.ec-form-card .card-header {
    background: #fff;
    padding: 16px 20px;
}
.ec-form-card .card-header h5 { color: #0C111C; }
.ec-form-card .card-body { padding: 20px; }
/* #app carries .card-no-border, whose `.card-header { border: 0 }` outranks the
   rule above and erased the divider under the header. Match its depth. */

/* Cards have SQUARE corners — the card's top edge meets its sides at 90°.
   Earlier rounding (14px / 16px) is overridden here; last in the file so it
   wins on order. */
.card.ec-card,
.card.ec-list-card,
.card.ec-filter-card,
.card.ec-form-card,
.ec-card,
.ec-list-card,
.ec-filter-card,
.ec-form-card,
.ec-form-card .card-header {
    border-radius: 0 !important;
}

/* No outline on cards. `.card-no-border .card { border: 0 }` lets the large
   soft shadow define the card — the 1px #eef1f6 hairline is dropped. Shadow
   and square corners stay. */
.card.ec-card,
.card.ec-list-card,
.card.ec-filter-card,
.card.ec-form-card,
.ec-card,
.ec-list-card,
.ec-filter-card,
.ec-form-card {
    border: 0 !important;
}

/* ── Page head clears the topbar ─────────────────────────────────────────────
   main.py-4 computes padding-top:0 here, so the page title sat flush against
   the header bar with no gap at all (h3.top === topbar.bottom). Add
   padding-top on the listings-page container. */
.page-wrapper.listings-page > .container-fluid,
.page-wrapper.form-page > .container-fluid { padding-top: 12px; }

/* ── Permission matrix text ────────────────────────────────────────────────
   The menu names and the List/Create/Edit labels were rendering in the muted
   #3b4060 the generic form-label rule sets; they should read near-black. */

/* ── Measured corrections ────────────────────────────────────────────────────
   The values below were set from measured computed styles. */
.card.ec-card, .card.ec-list-card, .card.ec-filter-card, .card.ec-form-card,
.ec-card, .ec-list-card, .ec-filter-card, .ec-form-card {
    border-radius: 4px !important;          /* 4px, not 0 or 14 */
}
#app.card-no-border .ec-form-card > .card-header,
.card-no-border .card.ec-form-card > .card-header {
    border-bottom: 1px solid #f0f2f7 !important;   /* was #eef0f4 */
}
.ec-form-card .card-header h5 { font-size: 15.5px; }
/* Permission matrix: menu names are 14px/600 black; the action labels stay in
   the muted #3b4060 — I had over-darkened them to near-black. */
.page-wrapper.form-page .role-table input[type="checkbox"] + label,
.role-table label.control-label2,
.role-table label { color: #3b4060 !important; font-weight: 500; font-size: 13px; }
/* The menu-name column: a broader rule was flattening it to 500/#595959. */
.page-wrapper.form-page .role-table table td strong,
.role-table table tbody td strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000 !important;
}

/* letter-spacing is set on the body and everything inherits it — that is what
   spaces the headings and labels. Body = "Urbanist, Nunito, sans-serif | 0.5px". */
body {
    letter-spacing: 0.5px;
    font-family: 'Urbanist', 'Nunito', sans-serif;
}

/* Header status pill, themed by the admin panel colour. */
.demo-badge {
    display: inline-flex; align-items: center;
    background: rgba(var(--admin-panel-rgb, 255, 104, 57), 0.12);
    color: var(--admin-panel-color);
    border: 1px solid rgba(var(--admin-panel-rgb, 255, 104, 57), 0.30);
    font-weight: 700; font-size: 12px; letter-spacing: .02em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px; margin-right: 12px; white-space: nowrap;
}

/* Super-admin lock notice, themed by the panel colour. */
.ec-superadmin-note {
    background: rgba(var(--admin-panel-rgb, 255, 104, 57), 0.10);
    border: 1px solid rgba(var(--admin-panel-rgb, 255, 104, 57), 0.28);
    color: var(--admin-panel-color);
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 600;
}
.ec-superadmin-note i { color: var(--admin-panel-color); font-size: 20px; }

/* The theme absolutely positions .footer against #main-wrapper, which does not
   grow with the page content here — so the footer sat mid-document, content
   scrolled over it, and it flickered in and out near the bottom. It now lives in
   normal flow after <main>, so it is simply the last thing on the page. */
.footer {
    position: static !important;
    bottom: auto !important;
}

/* ── Sticky header without the height jump ───────────────────────────────────
   Past 60px of scroll the theme adds body.sticky, which turns the in-flow
   topbar into position:fixed. That removes ~68px from the document, the scroll
   position clamps back under 60, the class comes off, and the page enters a
   visible add/remove loop — the "jitter" on short pages (role list). Padding
   the body by the topbar's height when sticky keeps the document height
   constant, so the toggle can never un-satisfy its own scroll condition. */
body.sticky {
    padding-top: 68px;
}

/* The base theme parks every .select2.select2-container at position:absolute
   left:5px/top:3px with width:auto !important — a hack for its old header
   dropdown. Inside a form column that detaches the widget from its field: it
   sizes against the positioned ancestor (563px instead of the column's 533px)
   and drifts 10px left of every input. Pin it back into the column's flow. */
.page-wrapper .card-body [class*="col-"] .select2.select2-container,
.page-wrapper .ec-filter-row .select2.select2-container {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
}

/* The col-scoped select2 width fix above is (0,5,0) and was flattening the
   phone-box country selector to 100% of a flex slot — it rendered as "+9…".
   Inside a phone-box the selector stays compact; the number input takes the rest. */
.page-wrapper .card-body [class*="col-"] .phone-box .select2.select2-container {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 150px;
    max-width: 220px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Phone country picker (ql-cc). Flag+code button joined to the number input;
   searchable flag/name/code menu. The wrapped native <select> stays in the DOM
   (hidden) so every page's save and default-country logic keeps reading/writing
   it unchanged.
   ══════════════════════════════════════════════════════════════════════════ */
.ql-cc-native { display: none !important; }
.ql-cc { position: relative; flex-shrink: 0; }
.ql-cc-btn {
    display: flex; align-items: center; gap: 7px;
    height: 42px; padding: 0 12px;
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px 0 0 10px;   /* joined group: flat right edge against the input */
    font-size: 14px; font-weight: 600; color: #0C111C;
    white-space: nowrap; cursor: pointer;
}
.ql-cc-btn:disabled { background: #f6f7fb; cursor: not-allowed; color: #9aa1b4; }
.ql-cc-btn img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.ql-cc-btn .mdi { font-size: 14px; color: #9aa1b4; }
.ql-cc-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1050;
    width: 300px; background: #fff;
    border: 1px solid #e2e6ef; border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    padding: 8px;
}
.ql-cc-search {
    width: 100%; height: 38px; padding: 0 12px;
    border: 1px solid #e2e6ef; border-radius: 8px;
    font-size: 14px; color: #0C111C; outline: none;
}
.ql-cc-search:focus { border-color: var(--admin-panel-color); box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 255, 104, 57), .15); }
.ql-cc-list { max-height: 260px; overflow-y: auto; margin-top: 6px; }
.ql-cc-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #1f2937; }
.ql-cc-item:hover { background: var(--admin-panel-color); color: #fff; }
.ql-cc-item:hover .cd { color: #fff; }
.ql-cc-item.is-active { background: rgba(var(--admin-panel-rgb, 255, 104, 57), .08); }
.ql-cc-item.is-active:hover { background: var(--admin-panel-color); }
.ql-cc-item img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex-shrink: 0; }
.ql-cc-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-cc-item .cd { color: #9aa1b4; font-weight: 600; }
.ql-cc-empty { padding: 10px; font-size: 13px; color: #9aa1b4; }
/* Joined input halves — the number input glues to the picker's flat edge */
.phone-box { gap: 0 !important; }
.phone-box .form-control.user_phone,
.phone-box .form-control.restaurant_phone {
    border-radius: 0 10px 10px 0;
    margin-left: -1px;
    padding-left: 12px !important;
}
.phone-box .form-control:focus { position: relative; z-index: 2; }

/* style.css:13385 clamps every select2 rendered label to max-width:107px (a
   relic of the old flag country selects), truncating e.g. the subscription
   plan name to "Comm…". Restyled cards need the full control width. */
.ec-form-card .select2-container--default .select2-selection--single .select2-selection__rendered,
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    max-width: none;
}

/* The theme's .res_password{font-size:33px!important} renders a giant password
   placeholder; show 14px like every other field. */
.ec-form-card .res_password { font-size: 14px !important; }

/* Selects have no clear "×"; some pages still init their own select2 with
   allowClear, so hide the button wherever cards render one. */
.ec-form-card .select2-selection__clear,
.ec-filter-card .select2-selection__clear { display: none; }

/* Owner image preview: the raw <img width="150px"> stretched distorted across
   the column. Render it as the same 50px rounded thumb the user pages use. */
.ec-form-card .uploaded_image_owner img {
    width: 50px !important; height: 50px !important;
    object-fit: cover; border-radius: 10px; border: 1px solid #E4E7EE;
}
.ec-form-card .uploaded_image_owner img[src=""] { display: none; }

/* ================= restaurant form fixups ================= */
/* chosen multi-select (cuisines) styled like every other control */
.ec-form-card .chosen-container { width: 100% !important; font-family: inherit; }
.ec-form-card .chosen-container-multi .chosen-choices {
    border: 1px solid #E4E7EE; border-radius: 10px; background: #fff; padding: 5px 10px;
    min-height: 42px; box-shadow: none; background-image: none;
}
.ec-form-card .chosen-container-active .chosen-choices {
    border-color: rgb(255,104,57); box-shadow: 0 0 0 3px rgba(255,104,57,.12);
}
.ec-form-card .chosen-container-multi .chosen-choices li.search-choice {
    background: #FFF4EF; border: 1px solid #FFD9C9; border-radius: 8px; box-shadow: none;
    background-image: none; padding: 5px 24px 5px 10px; margin: 3px 6px 3px 0;
    font-size: 13px; color: #0C111C; line-height: 1.3;
}
.ec-form-card .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { top: 8px; right: 6px; }
.ec-form-card .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height: 30px; margin: 0; font-family: inherit;
}
.ec-form-card .chosen-container .chosen-drop {
    border: 1px solid #E4E7EE; border-radius: 10px; box-shadow: 0 12px 30px rgba(23,31,53,.10);
    margin-top: 4px; overflow: hidden;
}
.ec-form-card .chosen-container .chosen-results { margin: 4px; padding: 0; }
.ec-form-card .chosen-container .chosen-results li { padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.ec-form-card .chosen-container .chosen-results li.highlighted {
    background: rgb(255,104,57); background-image: none; color: #fff;
}
/* native multi-select fallback for the moment before chosen boots */
.ec-form-card select[multiple].form-control { border: 1px solid #E4E7EE; border-radius: 10px; padding: 8px; }

/* working-hours / special-offer blocks: day label + Add inline, panels, tables */
.ec-form-card .card-body .col-12.mb-0 { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.ec-form-card .card-body .col-12.mb-0 > label.ec-form-label { margin: 0; min-width: 90px; }
.ec-form-card .card-body .col-12.mb-0 > .col-12 { width: auto; flex: 0 0 auto; padding: 0; }
.ec-form-card .card-body .col-12.mb-0 .btn { padding: 5px 16px; font-size: 13px; border-radius: 8px; }
.ec-form-card .restaurant_discount {
    background: #FAFBFD; border: 1px solid #EEF1F6; border-radius: 12px;
    padding: 12px 16px; margin: 8px 0 18px !important; width: 100%;
}
.ec-form-card .booking-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.ec-form-card .booking-table th { font-size: 12px; font-weight: 600; color: #7C8698; text-align: left; padding: 0 8px; }
.ec-form-card .booking-table th label { margin: 0; font-size: 12px; color: #7C8698; }
.ec-form-card .booking-table td { padding: 0 8px; vertical-align: middle; }
.ec-form-card .booking-table input {
    height: 40px; border: 1px solid #E4E7EE; border-radius: 10px; background: #fff;
    padding: 0 10px; font-size: 14px;
}
.ec-form-card .booking-table select { border-radius: 10px; background: #fff; font-size: 14px;
}
.ec-form-card .booking-table .btn { padding: 7px 11px; border-radius: 10px; }

/* restaurant fixups round 3 */
/* services grid: switches align to one column edge regardless of label width */
.ec-form-card [class*="col-md-3"] .switch-box {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding-right: 28px;
}
/* red inline notes: small help-text sized, light red highlight */
.ec-form-card .ec-note {
    display: inline-block; background: #FDF2F2; color: #D93025;
    padding: 3px 10px; border-radius: 6px; font-size: 12.5px;
    font-weight: 500; margin: 0 0 10px; width: auto;
}
/* discount amount + unit select share one line inside the offer tables */
.ec-form-card .booking-table td input { display: inline-block; width: auto; max-width: 150px; vertical-align: middle; }
.ec-form-card .booking-table td .select2-container { min-width: 96px; display: inline-block;
    vertical-align: middle; margin-left: 8px;
}
.ec-form-card .booking-table td .select2-container .select2-selection--single { min-width: 96px; }
/* shell.css:5377 pins .switch margins with !important, which also defeats
   space-between in some engines' flex+gap paths — push the knob to the cell
   edge explicitly so every services switch lines up in its column. */
.ec-form-card [class*="col-md-3"] .switch-box .switch { margin-left: auto !important; }
/* the theme's clearfix ::after on .switch-box acts as a third flex item and
   soaks up the space-between distribution — drop it in the services grid */
.ec-form-card [class*="col-md-3"] .switch-box::after { content: none !important; }
/* ...and the theme centers .switch with margin:0 auto — zero the right side so
   the auto left margin pushes the knob flush to the column edge. */
.ec-form-card [class*="col-md-3"] .switch-box .switch { margin-right: 0 !important; }
/* dine-in fields live in .divein_div, which page JS shows as display:block —
   pair the halves without relying on a flex parent */
.ec-form-card .divein_div > .col-md-6 { display: inline-block; width: 49%; vertical-align: top; }

/* restaurant fixups round 4 */
/* dine-in: opening / closing / cost share one line */
.ec-form-card .divein_div > .col-md-4 { display: inline-block; width: 32.3%; vertical-align: top; }
/* special-offer day headers: label + "Add <Day> Discount" inline */
.ec-form-card .special_offer_div > .col-12.mb-3 { display: flex; align-items: center; gap: 14px; }
.ec-form-card .special_offer_div > .col-12.mb-3 > label.ec-form-label { margin: 0; min-width: 90px; }
.ec-form-card .special_offer_div > .col-12.mb-3 > .col-12 { width: auto; flex: 0 0 auto; padding: 0; }
.ec-form-card .special_offer_div > .col-12.mb-3 .btn { padding: 5px 16px; font-size: 13px; border-radius: 8px; }
/* the enable toggle now drives the day list; the old master button retires */
.ec-form-card .add_special_offer_restaurant_btn { display: none !important; }
/* discount amount + unit select in one line (the row template hard-codes
   width:60/40% inline, and select2 swells to the td width) */
.ec-form-card .booking-table td:has(> input):has(> .select2-container) {
    display: flex; align-items: center; gap: 8px;
}
.ec-form-card .booking-table td:has(> input):has(> .select2-container) > input {
    flex: 1 1 90px; width: auto !important; max-width: 150px;
}
.ec-form-card .booking-table td:has(> input):has(> .select2-container) > .select2-container {
    flex: 0 0 96px; min-width: 96px; margin-left: 0;
}

/* restaurant fixups round 5 */
/* row templates hard-code td widths (10/10/30/30/20%) leaving dead space inside
   the discount cell — let columns size to their content instead */
.ec-form-card .booking-table { table-layout: auto; }
.ec-form-card .booking-table td[style*="width"] { width: auto !important; }
/* working-hours days are always on show now; the master button retires */
.ec-form-card .add_working_hours_restaurant_btn { display: none !important; }
/* switch wrappers that sit directly in the card row (e.g. Enable Special
   Discount) lack column padding, so they poke 15px left of every field */
.ec-form-card .card-body > .row > .mb-2 { padding-left: 15px; padding-right: 15px; width: 100%; }

/* employee permissions modal: titles as chips instead of a comma blob */
.ec-perm-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.ec-perm-list.d-none { display: none; }
.ec-perm-list .ec-perm-chip {
    background: #FFF4EF; border: 1px solid #FFD9C9; color: #0C111C;
    border-radius: 8px; padding: 6px 12px; font-size: 13px; line-height: 1.3;
}

/* report pages: the daterangepicker trigger looks like every other control */
.ec-form-card #reportrange {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    height: 42px; padding: 0 12px; background: #fff;
    border: 1px solid #E4E7EE; border-radius: 10px; font-size: 14px; color: #0C111C;
}
.ec-form-card #reportrange .mdi-chevron-down { margin-left: auto; color: #7C8698; }

/* foods form fixups */
/* nutrition block: outline-wrapper holds col-md-6 fields but is no row */
.ec-form-card .outline-wrapper:has(> .col-md-6) { display: flex; flex-wrap: wrap; }
/* AI Generate sits inline beside its field label. Scoped with :has() — as a blanket
   rule it also inlined ordinary section labels (e.g. "Assign Permission" on the role
   form), which then shared a line with the block that followed them. */
.ec-form-card label.ec-form-label:has(+ .generate_btn_wrapper) { display: inline-block; }
.ec-form-card .generate_btn_wrapper {
    display: inline-block; padding: 0 0 0 8px; margin: 0 0 6px;
    font-size: 13px; font-weight: 600; vertical-align: baseline; border: 0;
}

/* foods: variation_wrapper is a full row of its own — Restaurant/Category pair
   inside it, attributes take the full line */
.ec-form-card .variation_wrapper { display: flex; flex-wrap: wrap; }
.ec-form-card .variation_wrapper > .width-100 { width: 100%; }
/* its own col-12 padding stacks with the child columns' — drop the outer one */
.ec-form-card .variation_wrapper.col-12 { padding-left: 0; padding-right: 0; }

/* subscription plan page: real visible radios (the theme parks them off-screen
   and fakes them on labels — that styling died with the old interior) */
.ec-form-card .form-check input[type="radio"] { opacity: 1 !important; margin: 0 !important;
    accent-color: rgb(255,104,57); flex: 0 0 16px;
}
.ec-form-card .form-check:has(> input[type="radio"]) {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 4px 24px 4px 0; width: auto;
}
.ec-form-card .form-check:has(> input[type="radio"]) label { margin: 0; }
/* the gated number inputs sit beside their "Limited" radio */
.ec-form-card .expiry-limit-div, .ec-form-card .item-limit-div, .ec-form-card .order-limit-div { max-width: 220px; }

/* subscription radios: the theme's input height rules stretched them into
   ovals — pin a true 16px circle */
.ec-form-card .form-check input[type="radio"] {
    height: 16px !important; min-height: 0 !important; max-height: 16px;
}
/* "Limited" + its gated input continue on the same line as "Unlimited". Scoped to those
   radio rows: as a blanket rule every .d-flex in a form card turned inline, including
   full-width notices like the super-admin banner on the role form. */
.ec-form-card .card-body .d-flex:has(> .form-check) { display: inline-flex !important; align-items: center; gap: 10px; vertical-align: middle; }

/* select2 MULTIPLE widgets (cashback customer/payment pickers): the stock grey
   chips and short box read as broken next to the styled inputs — match the
   chosen-chip look used everywhere else */
.ec-form-card .select2-container .select2-selection--multiple {
    min-height: 42px; border: 1px solid #E4E7EE !important; border-radius: 10px !important;
    padding: 4px 8px; background: #fff;
}
.ec-form-card .select2-container--focus .select2-selection--multiple {
    border-color: rgb(255,104,57) !important; box-shadow: 0 0 0 3px rgba(255,104,57,.12);
}
.ec-form-card .select2-selection--multiple .select2-selection__choice {
    background: #FFF4EF !important; border: 1px solid #FFD9C9 !important;
    border-radius: 8px !important; color: #0C111C !important;
    padding: 3px 10px !important; margin: 3px 6px 3px 0 !important;
    font-size: 13px; line-height: 1.4;
}
.ec-form-card .select2-selection--multiple .select2-selection__choice__remove {
    color: #C9540F !important; margin-right: 5px; font-weight: 600;
}
.ec-form-card .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 4px 0 0; font-family: inherit;
}
/* the theme borders the select2 container itself, doubling with the styled
   multi-select box inside it */
.ec-form-card .select2-container:has(.select2-selection--multiple) {
    border: 0 !important; padding: 0 !important; background: transparent !important;
}

/* advertisement validity daterange trigger, same look as the report one */
.ec-form-card #daterange {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    height: 42px; padding: 0 12px; font-size: 14px; color: #0C111C;
}
.ec-form-card #daterange .mdi-chevron-down { margin-left: auto; color: #7C8698; }
/* the theme's absolute select2 hack again: pin back widgets inside ec-fcol
   and plain mb-3 wrappers too (the earlier rule only covered [class*="col-"]) */
.page-wrapper .card-body .ec-fcol .select2.select2-container,
.page-wrapper .card-body .mb-3 > .select2.select2-container {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important;
}

/* ================= order detail: items + totals redesign ================= */
/* items table: quiet header, airy rows, rounded product thumbs */
.order-items-list table.table thead th {
    background: #F7F8FB; color: #7C8698; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; border: 0; padding: 10px 14px;
}
.order-items-list table.table thead th:first-child { border-radius: 10px 0 0 10px; }
.order-items-list table.table thead th:last-child { border-radius: 0 10px 10px 0; }
.order-items-list table.table td {
    vertical-align: middle; border-top: 1px solid #F0F2F7; padding: 14px 12px; font-size: 14px;
}
.order-items-list table.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.order-items-list tbody img { width: 54px; height: 54px; object-fit: cover; border-radius: 12px; }

/* totals: right-aligned invoice card */
.order-data-row.order-totals-items { justify-content: flex-end; }
.order-totals { border-collapse: collapse; }
.order-totals td:last-child { white-space: nowrap; }
/* group separators -> small uppercase eyebrows */
.order-totals td.seprater hr { display: none; }
.order-totals td.seprater span {
    display: block;
    letter-spacing: .08em;
    border-top: 1px dashed #E4E7EE;
}
/* subtotal: bold, no green pill */
.order-totals tr.final-rate td.sub_total { color: #0C111C !important; }
/* grand total hero row */
.order-totals tr.grand-total td {
    background: #FFF4EF;
}
.order-totals tr.grand-total td.label { border-radius: 10px 0 0 10px; }
.order-totals tr.grand-total td:last-child { border-radius: 0 10px 10px 0; color: #D65419 !important; }
.order-totals td.label small { color: #7C8698; }
/* the theme absolutely-positions the seprater captions over the rows; each
   line is already labelled, so the group captions just add collisions — drop
   the separator rows entirely */
.order-totals tr:has(> td.seprater) { display: none; }
/* and the theme's green subtotal band, wherever it puts it */
.order-totals tr.final-rate,
.order-totals tr.final-rate td,
.order-totals tr.final-rate td.sub_total { background: transparent !important; }
/* style.css paints a floating "Total" caption via ::before on the grand-total
   row — the hero row already says Total Amount */
.order-totals-items table.order-totals tr.grand-total::before { content: none !important; }
/* order summary refinements: tighter receipt, labelled */
.ec-summary-title {
    font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: #7C8698;
}

/* order summary v3: no floating box — a flat full-width section under the
   items table, amounts flush right under the Total column */
.order-data-row.order-totals-items { display: block !important; margin-top: 8px; }
.order-data-row.order-totals-items > .card {
    max-width: none !important; width: 100% !important; border: 0 !important;
    background: transparent !important; box-shadow: none !important;
    border-radius: 0 !important; border-top: 1px solid #EEF1F6 !important;
}
.order-data-row.order-totals-items > .card > .card-body { padding: 14px 4px 0 !important; }
.order-totals td { padding: 7px 8px !important; font-size: 14px !important; }
.order-totals tr.grand-total td { font-size: 16px !important; padding: 13px 14px !important; }
.ec-summary-title { margin: 0 8px 12px; }

/* ============ order detail v4: classic look ============ */
/* General Details -> meta tiles: small caption over a strong value */
#order_detail .order_detail-top-box { display: flex; flex-wrap: wrap; gap: 4px 36px; }
#order_detail .gendetail-col { margin: 0 0 10px !important; }
#order_detail .gendetail-col label { margin: 0; }
#order_detail .gendetail-col label strong {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #98A1B2; margin-bottom: 3px;
}
#order_detail .gendetail-col label span { font-size: 14.5px; font-weight: 600; color: #0C111C; }
#order_detail .order_detail-top-box > .mb-3 { flex: 1 1 100%; }

/* item meta: muted label + brand chip values */
.orders-tracking .variant-info ul { padding: 0; margin: 4px 0 2px; list-style: none; display: flex; flex-wrap: wrap; }
.orders-tracking .variant-info li.variant .label { font-size: 13px; }
.orders-tracking .variant-info li.variant .value,
.orders-tracking .type .ext-size {
    background: #FFF4EF; border: 1px solid #FFD9C9; border-radius: 7px;
    padding: 2px 9px; font-size: 12.5px; color: #0C111C;
}
.orders-tracking .extra > span:first-child, .orders-tracking .type > span:first-child { font-size: 13px; }

/* the taxes read as one distinct block */
.order-totals tr.tax-cap-row { display: table-row !important; }
.order-totals tr.tax-cap-row td { padding: 14px 8px 6px !important; }
.order-totals tr.tax-cap-row span {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #8A94A6;
}
.order-totals tr.tax-row td { background: #F6F8FB !important; }
.order-totals tr.tax-row td:first-child { padding-left: 14px !important; }
.order-totals tr.tax-row td:last-child { padding-right: 14px !important; }
.order-totals tr.tax-cap-row + tr.tax-row td:first-child { border-top-left-radius: 10px; }
.order-totals tr.tax-cap-row + tr.tax-row td:last-child { border-top-right-radius: 10px; }
.order-totals tr.tax-total td:first-child { border-bottom-left-radius: 10px; }
.order-totals tr.tax-total td:last-child { border-bottom-right-radius: 10px; }
.order-totals tr.tax-total td { border-top: 1px dashed #E1E6EF !important; }

/* right-column cards: label/value rows share one clean grid */
#order_detail .address p, #order_detail .resturant-detail .card-body > p,
#order_detail .cashback-detail-inner p {
    display: flex; align-items: baseline; margin: 0; padding: 9px 0; font-size: 14px;
}
#order_detail .address p strong, #order_detail .resturant-detail .card-body > p strong,
#order_detail .cashback-detail-inner p strong { color: #7C8698; font-weight: 600; font-size: 13px;
}
#order_detail .contact-info {
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
    color: #98A1B2; margin: 14px 0 4px;
}
#order_detail .vendor-title { font-size: 17px; }
/* cashback success message as a pill */
#cashback_amount_description {
    display: inline-block; background: #E8F7EE; color: #1B7A3D !important;
    border-radius: 8px; padding: 6px 12px; margin-top: 6px;
}
/* tax caption: its colspan cell is also :last-child, so it caught the
   amount column's right-align */
.order-totals tr.tax-cap-row td { text-align: left !important; }
/* the cashback pill lives inside the 130px label column — let it breathe */
#order_detail .cashback-detail-inner p:has(#cashback_amount_description) { display: block; }
#order_detail .cashback-detail-inner p:has(#cashback_amount_description) strong { flex: none; }

/* order detail v5: consistency polish */
/* prepare-time / schedule tiles: the JS-injected label keeps its col-12
   gutter, indenting the tile */
#order_detail .gendetail-col label { padding: 0 !important; }
#order_detail .gendetail-col { padding: 0 !important; background: transparent !important; }
/* an empty variant option renders as a blank chip */
.orders-tracking .variant-info li.variant:has(> .value:empty) { display: none; }
.orders-tracking .type .ext-size:empty { display: none; }
/* breathing room between Total Tax block and the Total Amount band */
.order-totals tr.grand-total td {
    border-top: 10px solid transparent !important; background-clip: padding-box;
}
/* one type scale across all the info cards */
#order_detail .address p, #order_detail .address p span, #order_detail .address p a,
#order_detail .cashback-detail-inner p, #order_detail .cashback-detail-inner p span { font-size: 14px; }
#order_detail .review-inner h4, #customers_rating_and_review h4 {
    font-size: 14px; color: #7C8698; margin: 4px 0;
}
#order_detail .review-inner { font-size: 14px; }
/* billing address lines stack */
#order_detail .addr-stack { display: flex; flex-direction: column; gap: 2px; }
/* extras value renders as a chip like Type/Size */
.orders-tracking .extra .ext-item span,
.orders-tracking .extra .ext-item {
    background: #FFF4EF; border: 1px solid #FFD9C9; border-radius: 7px;
    padding: 2px 9px; font-size: 12.5px; color: #0C111C; display: inline-block;
}
.orders-tracking .extra .ext-item span { border: 0; background: transparent; padding: 0; }

/* order detail v6: item + side-card micro polish */
/* extras line drops below the image, clear of the size block */
.order-items-list td.order-product { min-width: 260px; }
.orders-tracking .extra {
    margin: 12px 0 0 -74px; /* pulls back under the 60px thumb + gap */
}
/* the theme draws a pipe divider after each variant chip */
.orders-tracking .variant-info li.variant { border: 0 !important; }
.orders-tracking .variant-info li.variant::after,
.orders-tracking .variant-info li.variant::before { content: none !important; }
/* restaurant + cashback cards: no row rules, no CONTACT INFO caption */
#order_detail .resturant-detail .card-body > p,
#order_detail .cashback-detail-inner p { border-bottom: 0 !important; }
#order_detail .contact-info { display: none; }
/* one shared value column across Billing / Driver / Restaurant / Cashback */
#order_detail .resturant-detail .card-body > p span { margin-left: 0 !important; padding-left: 0 !important; }
#order_detail .address p strong,
#order_detail .resturant-detail .card-body > p strong,
#order_detail .cashback-detail-inner p strong { flex: 0 0 170px; }
/* the row containers carry different leftover paddings — zero them so all
   four cards' label/value columns line up exactly */
#order_detail .address.order_detail-top-box,
#order_detail .cashback-detail-inner { padding: 0 !important; margin: 0 !important; }
/* chips render at normal weight (style.css bolds span:last-child there) */
.orders-tracking .variant-info li.variant .value,
.orders-tracking .type .ext-size,
.orders-tracking .extra .ext-item,
.orders-tracking .extra .ext-item span { font-weight: 400 !important; }
/* the two side cards carry different card-body insets — compensate so the
   label/value columns match Billing & Driver exactly */
#order_detail .resturant-detail .card-body > p { padding-left: 12px; }
#order_detail .cashback-detail-inner p { padding-left: 22px; }
/* the restaurant avatar ships with src="" and renders as a broken icon until
   the order JS fills it — stay hidden until there is a real source */
#order_detail img[src=""] { visibility: hidden; }

/* ================= order print receipt ================= */
.ec-receipt {
    font-family: 'Urbanist', 'Nunito', -apple-system, 'Segoe UI', sans-serif !important; margin: 0 auto 30px;
    border: 0 !important;
}
.ec-receipt * { font-family: inherit !important; }
.ec-receipt h2 { font-size: 24px; margin-bottom: 4px; }
.ec-receipt h5 { font-size: 14px; line-height: 1.7; margin: 0 0 4px; }
.ec-receipt h5 label { font-weight: 600; margin: 0; }
.ec-receipt .storeAddress, .ec-receipt .storePhone { font-weight: 400; }
.ec-receipt .dashed-line { border-bottom: 1px dashed #C9CFDB; margin: 14px 0; }
.ec-receipt .ec-receipt-items { width: 100%; }
.ec-receipt .ec-receipt-items thead th {
    background: #F5F6FA; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; border: 0; padding: 9px 12px;
}
.ec-receipt .ec-receipt-items td { border: 0; padding: 12px; vertical-align: middle; font-size: 14px; }
.ec-receipt .ec-receipt-items img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; }
.ec-receipt #price-breakdown { margin: 0; }
.ec-receipt #price-breakdown dt { font-weight: 500; color: #555 !important; font-size: 14px; padding: 3px 0; }
.ec-receipt #price-breakdown dd { font-weight: 600; font-size: 14px; padding: 3px 0; margin: 0; }
.ec-receipt #price-breakdown dt[style], .ec-receipt #price-breakdown dd[style] {
    font-size: 17px !important; font-weight: 800; padding-top: 10px; margin-top: 6px;
}
@media print {
    .ec-receipt { box-shadow: none; max-width: none; padding: 0 !important; }
}
/* receipt scoping fixes: the edit page's extras pull-back and the thank-you
   uppercase both leaked into the wrong elements here */
.ec-receipt .orders-tracking .extra { margin-left: 0 !important; }
.ec-receipt .text-center h5 {
    font-size: 14px; letter-spacing: 0; text-transform: none;
}
.ec-receipt h5.text-center.pt-3 {
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
/* receipt item row: thumb beside name, meta aligned, separators only
   between items (the trailing border doubled the dashed rule below) */
.ec-receipt .ec-receipt-items td { border-bottom: 0; }
.ec-receipt td.order-product { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-start; }
.ec-receipt td.order-product .order-product-box { flex: 0 0 auto; }
.ec-receipt td.order-product .orders-tracking { flex: 1; min-width: 200px; }
.ec-receipt .orders-tracking h6 { margin: 2px 0 6px; font-size: 15px; }
.ec-receipt .orders-tracking .variant-info ul { margin: 0 0 4px; padding: 0; }
.ec-receipt .orders-tracking-item-details { padding: 0; margin: 0; }
.ec-receipt .orders-tracking .extra { margin-top: 6px !important; }
/* meta labels (Size / Type / Extras) match the chips: normal weight, muted */
.orders-tracking .variant-info li.variant .label,
.orders-tracking .extra > span:first-child,
.orders-tracking .type > span:first-child { font-weight: 400 !important; color: #7C8698 !important; }
/* every receipt divider is dashed */
.ec-receipt #price-breakdown hr { border: 0; border-top: 1px dashed #C9CFDB; margin: 10px 0; width: 100%; }
.ec-receipt #price-breakdown dt[style], .ec-receipt #price-breakdown dd[style] { border-top: 1px dashed #C9CFDB; }
.ec-receipt .ec-receipt-items tbody tr + tr td { border-top: 1px dashed #E4E8F0; }
/* item meta line: tight, even spacing (theme li/label paddings added big gaps) */
.orders-tracking .variant-info ul { gap: 12px !important; }
.orders-tracking .variant-info ul li { padding: 0 !important; margin: 0 !important; }
.orders-tracking .variant-info li.variant .label { padding: 0 !important; margin: 0 4px 0 0 !important; }
.orders-tracking .extra > span:first-child { padding: 0 !important; margin: 0 4px 0 0 !important; }
.orders-tracking .extra .ext-item { margin-left: 0 !important; padding-left: 9px !important; }

/* ================= Point of Sale: classic redesign ================= */
.pos-card { border: 1px solid #EEF1F6 !important; }
.pos-card > .card-header { background: #fff; border-bottom: 1px solid #F0F2F7; padding: 16px 22px; }
.pos-search > label { font-weight: 700; font-size: 15px; color: #0C111C; margin-right: 6px !important; }
.pos-search .form-control, .pos-search .select2-selection--single { height: 40px; }
.pos-search .btn-secondary, #clear_user_search, #clear_filter {
    background: #fff !important; border: 1px solid #E2E6EF !important; color: #3B4060 !important;
    border-radius: 10px !important; height: 40px; font-weight: 600;
}
/* product cards: image / name / price / button */
.shop-item {
    display: flex; flex-direction: column; text-align: left; position: relative; background: #fff;
    transition: box-shadow .15s ease, transform .15s ease;
}
.shop-item:hover { box-shadow: 0 12px 26px rgba(23,31,53,.10); transform: translateY(-2px); }
.shop-item .shop-item-image { order: 1; margin: 0 0 10px !important; }
.shop-item .item-image { width: 100%; height: 170px; object-fit: cover; border-radius: 10px; }
.shop-item .member-plan { position: absolute !important; z-index: 2; }
.shop-item .member-plan .badge { border-radius: 6px; font-size: 11px; }
.shop-item .shop-item-title { order: 2; text-align: left; font-size: 15px; }
.shop-item .shop-price { order: 3; }
.shop-item .shop-price .form-control {
    border: 0 !important; padding: 0 !important; height: auto !important; background: transparent !important; font-weight: 700; color: #D65419 !important; box-shadow: none !important;
}
.shop-item .shop-item-btn { order: 4; }
.shop-item .shop-item-btn .btn {
    width: 100%; background: #FFF4EF !important; border: 1px solid #FFD9C9 !important;
    color: #D65419 !important; font-weight: 700; border-radius: 10px !important; padding: 9px !important;
}
.shop-item .shop-item-btn .btn:hover { background: rgb(255,104,57) !important; color: #fff !important; border-color: transparent !important; }
/* right rail */
.pos-right { padding-left: 26px !important; }
.pos-right > .mt-2 > .text { font-size: 16px; font-weight: 700 !important; }
.pos-right .btn-primary {
    background: rgb(255,104,57) !important; border: 0 !important; border-radius: 10px !important;
    font-weight: 600; padding: 8px 16px;
}
#user_detail_block { background: #FAFBFD !important; border: 1px solid #EEF1F6 !important; border-radius: 12px !important; font-size: 14px; }
#user_detail_block strong { color: #7C8698; font-weight: 600; font-size: 13px; }
#cartTable thead th {
    background: #F7F8FB; color: #7C8698; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; border: 0; padding: 9px 10px;
}
#cartTable.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
#cartTable td { vertical-align: middle; border-top: 1px solid #F0F2F7; padding: 10px; font-size: 14px; }
#cartTable tbody img { border-radius: 10px !important; }
#cartTable tfoot td { border-top: 1px solid #F0F2F7; padding: 8px 10px; }
.payment-method-list { display: flex; gap: 26px; padding: 6px 0 2px; }
.payment-method-list .raio-input { accent-color: rgb(255,104,57); width: 16px; height: 16px; }
#clear_cart_btn { border-radius: 10px !important; font-weight: 600; }

/* POS add-to-cart modal: clean classic layout */
#addToCartModal .product-details .box.border { border: 1px solid #EEF1F6 !important; border-radius: 12px; padding: 10px 12px; }
#addToCartModal #modal-product-image { border-radius: 10px; object-fit: cover; }
#addToCartModal h5 { font-size: 15px; }
#addToCartModal .model-cart-detlist > div, #addToCartModal .product-attr-detail { font-size: 14px; }
#addToCartModal .model-cart-detlist strong, #addToCartModal .product-attr-detail strong { font-weight: 600; font-size: 13px; }
/* addon rows: checkbox inline with title left / price right */
#modal-addons-container .form-group { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #F0F2F7; }
#modal-addons-container .form-group:last-child { border-bottom: 0; }
#modal-addons-container .form-check {
    display: flex !important; align-items: center;
    padding: 12px 2px !important; margin: 0 !important; width: 100%;
}
#modal-addons-container .form-check-input {
    position: static !important; opacity: 1 !important; appearance: auto; -webkit-appearance: checkbox;
    width: 17px; height: 17px; min-height: 0 !important; margin: 0 !important;
    accent-color: rgb(255,104,57); flex: 0 0 17px;
}
#modal-addons-container .control-label { margin: 0; font-size: 14px; flex: 1; cursor: pointer; }
#modal-addons-container .control-label span:last-child { font-weight: 600; color: #D65419; }
/* size/type option lists share the row rhythm */
#modal-attributes-container .form-check { padding: 10px 2px; }
/* POS cards: kill the phantom gaps — the price span inherits the theme's
   form-control min-height, and the equal-height stretch parked empty space
   above the button */
.shop-item { height: auto !important; }
.shop-item .shop-item-title { margin: 0 0 4px !important; line-height: 1.3; }
.shop-item .shop-price .form-control { min-height: 0 !important; line-height: 1.4 !important; display: block; }
.shop-item .shop-price { margin: 0 0 10px !important; }
.shop-item .shop-item-btn { margin-top: 0 !important; }

/* POS round 3: the marked issues */
/* filter + user dropdowns: proper widths for the enhanced selects */
.pos-search .custom-dropdown { min-width: 210px; }
.pos-search .select2-container, .pos-right .select2-container { min-width: 210px; }
/* modal radios: native circles with brand accent — not the theme's grey pills */
#addToCartModal input[type="radio"] {
    appearance: auto !important; -webkit-appearance: radio !important;
    background: transparent !important; border: 0 !important;
    width: 16px !important; height: 16px !important; min-height: 0 !important;
    accent-color: rgb(255,104,57); opacity: 1 !important; position: static !important;
}
/* addon rows: no phantom padding between box and title */
#modal-addons-container .control-label { padding-left: 0 !important; }
#modal-addons-container .form-check { gap: 10px; }
/* veg badge pinned to the image's top-left corner */
.shop-item .member-plan {
    top: 20px !important; left: 20px !important;
    right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important;
}
/* cart summary: receipt language */
#cartTable tfoot td { font-size: 13.5px; }
#cartTable tfoot td strong { font-weight: 600; color: #55607A; }
#cartTable tfoot td.text-right { font-weight: 700; color: #0C111C; }
#cartTable tfoot tr:last-child td { background: #FFF4EF; font-size: 15px; padding: 11px 10px; }
#cartTable tfoot tr:last-child td:first-child { border-radius: 10px 0 0 10px; }
#cartTable tfoot tr:last-child td:last-child { border-radius: 0 10px 10px 0; color: #D65419; }
/* qty stepper + delete */
#cartTable .btn, #cartTable input[type="number"], #cartTable input[type="text"] { border-radius: 8px; }
/* modal option radios are Bootstrap custom-controls: the circle lives on the
   label. Re-hide the native input (the double came from un-hiding it) and
   brand the drawn circle instead of the grey fill. */
#addToCartModal .custom-control-input {
    position: absolute !important; opacity: 0 !important; z-index: -1;
    appearance: none !important; -webkit-appearance: none !important;
    width: 1rem !important; height: 1.25rem !important;
}
#addToCartModal .custom-control-label::before {
    background: #fff !important; border: 1.5px solid #C9CFDB !important;
}
#addToCartModal .custom-control-input:checked ~ .custom-control-label::before {
    background: rgb(255,104,57) !important; border-color: rgb(255,104,57) !important;
}
#addToCartModal .attribute-selection { border-bottom: 1px solid #F0F2F7 !important; }
#addToCartModal .custom-control-label { font-size: 14px; cursor: pointer; }
/* POS filter dropdowns match the standard filter-card selects (white, rounded)
   instead of the theme's grey custom-dropdown pills */
.pos-search .select2-container--default .select2-selection--single,
.pos-right .select2-container--default .select2-selection--single {
    background: #fff !important; border: 1px solid #E4E7EE !important;
    border-radius: 10px !important; height: 40px !important;
}
.pos-search .select2-selection__rendered, .pos-right .select2-selection__rendered {
    line-height: 38px !important; color: #0C111C !important; padding-left: 12px !important;
    background: transparent !important; border: 0 !important; max-width: none !important;
}
.pos-search .select2-selection__arrow, .pos-right .select2-selection__arrow { height: 38px !important; }

/* POS round 4 */
/* the earlier un-hide rule outranked the custom-control hide — settle it */
#addToCartModal input[type="radio"].custom-control-input {
    opacity: 0 !important; position: absolute !important; z-index: -1 !important;
    appearance: none !important; -webkit-appearance: none !important;
}
/* qty stepper: one joined group instead of pill fragments */
#cartTable .cart-quantity-input {
    width: 28px; height: 32px; padding: 0 !important; line-height: 1; border: 1px solid #E4E7EE !important;
    font-weight: 700;
}
#cartTable button.cart-quantity-input:first-of-type { border-radius: 8px 0 0 8px !important; }
#cartTable button.cart-quantity-input:last-of-type { border-radius: 0 8px 8px 0 !important; margin-left: -1px; }
#cartTable .cart-quantity-input-new {
    width: 36px; border: 1px solid #E4E7EE !important; border-left: 0 !important;
    border-radius: 0 !important; display: inline-block; font-size: 13.5px; background: #fff;
}
#cartTable td:nth-child(3) { white-space: nowrap; }
/* the tax block reads as its own group, same as the order page */
#cartTable tfoot .pos-tax-cap td { padding: 12px 10px 4px; border: 0; }
#cartTable tfoot .pos-tax-cap span {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #98A1B2;
}
#cartTable tfoot .pos-tax-row td { background: #F6F8FB; }
#cartTable tfoot .pos-tax-cap + .pos-tax-row td:first-child { border-top-left-radius: 10px; }
#cartTable tfoot .pos-tax-cap + .pos-tax-row td:last-child { border-top-right-radius: 10px; }
/* payment methods: one font, no stub underlines */
.pos-right h3, .shop-payment-method h3 {
    font-family: inherit !important; font-size: 17px !important; font-weight: 700 !important;
    color: #0C111C !important; border-bottom: 0 !important;
}
.payment-method-list .form-radio { border-bottom: 0 !important; padding: 0 !important; margin: 0 !important; }
.payment-method-list .control-label { margin: 0 0 0 6px; }

/* POS round 5: pagination, addon checkbox, totals gap */
/* classic pagination — separated rounded buttons, brand active pill */
.pagination-container .pagination { gap: 6px; }
.pagination-container .page-link {
    border-radius: 8px !important;
    border: 1px solid #E4E7EE !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 8px 14px;
    margin: 0 !important;
}
.pagination-container .page-link:hover { background: #FFF4EF; color: rgb(255,104,57); }
.pagination-container .page-link:focus { box-shadow: none; }
.pagination-container .page-item.active .page-link {
    background: rgb(255,104,57) !important;
    border-color: rgb(255,104,57) !important;
    color: #fff !important;
}
.pagination-container .page-item.disabled .page-link { color: #A5AEC1; background: #fff; }
/* addon checkbox: self-drawn so no theme rule can paint it black */
#addToCartModal .addon-checkbox {
    appearance: none !important; -webkit-appearance: none !important;
    width: 17px; height: 17px; flex: 0 0 17px;
    min-height: 0 !important; margin: 0; padding: 0;
    border: 1.5px solid #D8DEE9 !important; border-radius: 5px;
    background: #fff !important;
    position: static !important; opacity: 1 !important;
    cursor: pointer; vertical-align: middle;
}
#addToCartModal .addon-checkbox:checked {
    background: rgb(255,104,57) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5l3 3 6-6"/></svg>') center / 11px no-repeat !important;
}
/* breathing room between the tax block and the grand-total band */
#cartTable tfoot tr:last-child td { border-top: 10px solid #fff !important; }

/* POS round 6: stepper states + checked addon box */
#cartTable .cart-quantity-input,
#cartTable .cart-quantity-input:hover,
#cartTable .cart-quantity-input:focus,
#cartTable .cart-quantity-input:active,
#cartTable .cart-quantity-input:not(:disabled):not(.disabled):active {
    background: #fff !important; color: #3B4060 !important;
    border-color: #E4E7EE !important; box-shadow: none !important; outline: none !important;
}
#cartTable .cart-quantity-input:hover { background: #FFF4EF !important; color: rgb(255,104,57) !important; }
#cartTable .cart-quantity-input-new {
    height: 32px !important; min-height: 0 !important; padding: 0 !important;
    vertical-align: top !important; box-shadow: none !important; font-weight: 600;
}
#cartTable button.cart-quantity-input { vertical-align: top !important; }
/* checked addon box: longhands so the brand fill cannot lose to the base shorthand */
#addToCartModal .addon-checkbox:checked {
    background-color: rgb(255,104,57) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5l3 3 6-6"/></svg>') !important;
    background-size: 11px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-color: rgb(255,104,57) !important;
}

/* POS: the theme draws top/bottom borders on .input-group-prepend — the stray lines around the qty stepper */
#cartTable .input-group-prepend { border: 0 !important; background: transparent !important; }

/* =====================================================
   Restaurant view (restaurants/view) — hero + facts layout
   ===================================================== */
/* KPI stat variant (icon left, value/label right) */
.ec-kpi.ec-kpi-stat { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.ec-kpi.ec-kpi-stat .ec-kpi-icon {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px;
    background: var(--kpi-tint); color: var(--kpi-accent);
    display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0;
}
.ec-kpi.ec-kpi-stat .ec-kpi-body { min-width: 0; }
.ec-kpi.ec-kpi-stat .ec-kpi-value { font-size: 24px; font-weight: 800; color: #0C111C; line-height: 1.1; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-kpi.ec-kpi-stat .ec-kpi-label { font-size: 13px; color: #5a6179; font-weight: 600; margin: 0; }

/* strip heading between KPI rows */
.rv-strip-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; }
.rv-strip-head h5 { font-size: 17px; color: #0C111C; }

/* detail rows */
.rv-page .ec-detail-row { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px dashed #E4E7EE; gap: 16px; }
.rv-page .ec-detail-row:last-child { border-bottom: none; }
.rv-page .ec-detail-label { flex: 0 0 170px; font-size: 13px; font-weight: 600; color: #7C8698; }
.rv-page .ec-detail-value { flex: 1; font-size: 14px; font-weight: 600; color: #0C111C; word-break: break-word; }
.rv-page .rv-cap { text-transform: capitalize; }

/* hero: avatar + title row + meta list */
.rv-profile { display: flex; gap: 20px; align-items: flex-start; }
.rv-avatar {
    flex: 0 0 120px; width: 120px; height: 120px; border-radius: 16px; overflow: hidden;
    background: #F6F8FB; border: 1px solid #E4E7EE;
}
.rv-avatar img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.rv-profile-body { flex: 1; min-width: 0; }
.rv-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px; }
.rv-name { font-size: 22px; color: #0C111C; line-height: 1.2; }
.rv-rating {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: 999px;
    background: #FEF3C7; color: #B45309; font-size: 13px; font-weight: 700; line-height: 1.4;
}
.rv-rating .mdi { font-size: 14px; color: #F59E0B; }
.rv-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid #E4E7EE; font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.rv-chip .mdi { font-size: 14px; }
.rv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* state chip colours follow the classes the page JS toggles (.green / .red) */
.rv-chip-state:has(.green) { background: #ECFDF3; border-color: #BBF7D0; color: #166534; }
.rv-chip-state:has(.green) .rv-dot { background: #22C55E; }
.rv-chip-state:has(.red)   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.rv-chip-state:has(.red) .rv-dot { background: #EF4444; }
.rv-chip-dine:has(.green)  { background: #FFF4EF; border-color: #FFD9C9; color: #D65419; }
.rv-chip .green, .rv-chip .red { color: inherit !important; }
.rv-chip .dine_in_future:empty { display: none; }
.rv-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rv-meta li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: #44506A; line-height: 1.5; }
.rv-meta li .mdi { color: rgb(255,104,57); font-size: 17px; line-height: 1.25; flex: 0 0 auto; }
.rv-meta li span { min-width: 0; word-break: break-word; }

/* facts strip under the profile */
.rv-facts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-top: 18px; }
.rv-fact { background: #F6F8FB; border: 1px solid #EEF1F6; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.rv-fact-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #7C8698; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.rv-fact-label .mdi { font-size: 15px; color: rgb(255,104,57); }
.rv-fact-value { display: block; font-size: 14px; font-weight: 600; color: #0C111C; word-break: break-word; }
.rv-fact-money { font-size: 18px; font-weight: 800; color: #D65419; }
.rv-fact-value:empty::before { content: "\2014"; color: #A5AEC1; }
@media (max-width: 991px) { .rv-fact-wide { grid-column: 1 / -1; } }
@media (max-width: 575px) { .rv-facts { grid-template-columns: 1fr; } .rv-profile { flex-direction: column; } }

/* map */
.rv-map .mapouter { height: 100%; min-height: 250px; text-align: left; }
.rv-map .gmap_canvas, .rv-map .gmap_iframe { height: 100% !important; overflow: hidden; }
.rv-map .mapouter > p {
    height: 100%; min-height: 250px; margin: 0; display: flex; align-items: center; justify-content: center;
    background: #F6F8FB; border: 1px dashed #D8DEE9; border-radius: 12px; color: #7C8698; font-size: 14px;
}
.rv-map { height: 100%; }
@media (max-width: 991px) { .rv-map { margin-top: 18px; } }

/* working hours list */
.rv-hours { display: flex; flex-direction: column; }
.rv-hours-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 10px; border-bottom: 1px dashed #E4E7EE; border-radius: 8px;
}
.rv-hours-row:last-child { border-bottom: 0; }
.rv-hours-day { font-size: 13.5px; font-weight: 700; color: #3B4060; flex: 0 0 auto; }
.rv-hours-slots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rv-hours-slots p {
    margin: 0 !important; padding: 3px 10px; border-radius: 999px; background: #F6F8FB; border: 1px solid #E4E7EE;
    font-size: 12.5px; font-weight: 600; color: #44506A; line-height: 1.5; white-space: nowrap;
}
.rv-hours-row.is-today { background: #FFF4EF; }
.rv-hours-row.is-today .rv-hours-day { color: #D65419; }
.rv-hours-row.is-today .rv-hours-slots p { background: #fff; border-color: #FFD9C9; color: #D65419; }

/* services chips (JS emits <li><span class="mdi mdi-check green"></span>Name</li>) */
#filtershtml { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#filtershtml li {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid #E4E7EE; font-size: 13px; font-weight: 600; line-height: 1.5;
}
#filtershtml li .mdi { font-size: 15px; margin-right: 0 !important; }
#filtershtml li:has(.green) { background: #ECFDF3; border-color: #BBF7D0; color: #166534; }
#filtershtml li:has(.green) .mdi { color: #22C55E !important; }
#filtershtml li:has(.red) { color: #A5AEC1; }
#filtershtml li:has(.red) .mdi { color: #EF4444 !important; }

/* gallery grid (JS emits <ul><li><img width="100px"></li></ul>) */
#photos ul { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
#photos li { margin: 0; }
#photos img {
    width: 116px !important; height: 116px !important; object-fit: cover; border-radius: 12px;
    border: 1px solid #E4E7EE; display: block; transition: transform .15s;
}
.rv-page #photos img:hover { transform: scale(1.03); }
#photos > p { margin: 0; color: #7C8698; font-size: 14px; }

/* plan feature chips */
.rv-page .plan_features .pricing-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rv-page .plan_features .pricing-card-list li {
    display: inline-flex; padding: 3px 10px; border-radius: 999px; background: #FFF4EF; border: 1px solid #FFD9C9;
    color: #D65419; font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.rv-page .plan_features .pricing-card-list li::before { content: none !important; }
.rv-page .plan-features-col { align-items: flex-start; }
.rv-page .plan-features-col .ec-detail-label { padding-top: 3px; }
/* theme gives gallery li width:25% + padding and services ul column-count:3 — undo for the chip/grid layout */
.rv-page .restaurant_gallery ul li { width: auto !important; padding: 0 !important; flex: 0 0 auto; }
.rv-page .restaurant_service ul { column-count: auto !important; }
.rv-page .restaurant_service ul li { padding-bottom: 6px !important; }

/* =====================================================
   Subscription plan modals (restaurants/view)
   ===================================================== */
#changeSubscriptionModal .modal-dialog, #checkoutSubscriptionModal .modal-dialog { max-width: 1240px !important; }
#changeSubscriptionModal .modal-content, #checkoutSubscriptionModal .modal-content { overflow: hidden; }
#changeSubscriptionModal .modal-header h6, #checkoutSubscriptionModal .modal-header h6 { font-size: 18px; color: #0C111C; }
#changeSubscriptionModal .modal-body { padding: 24px !important; background: #F6F8FB; }
#changeSubscriptionModal .top-title-section { padding-bottom: 14px !important; margin-bottom: 4px !important; }
#changeSubscriptionModal .top-title h3 { font-size: 20px; color: #0C111C; }
#changeSubscriptionModal .top-title p { font-size: 13.5px; color: #7C8698 !important; margin-top: 2px; }

/* plan cards */
#changeSubscriptionModal .pricing-card { display: flex; }
#changeSubscriptionModal .pricing-card-inner {
    display: flex; flex-direction: column; width: 100%; position: relative;
    padding: 22px 22px 22px !important; border-radius: 16px !important;
    border: 1px solid #E4E7EE !important; background: #fff !important; background-image: none !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.03); transition: transform .18s, box-shadow .18s, border-color .18s;
    color: inherit !important;
}
#changeSubscriptionModal .pricing-card-inner:hover {
    background: #fff !important; background-image: none !important; border-color: #FFB89E !important;
    transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,.10);
}
#changeSubscriptionModal .pricing-card-inner:hover .text-dark-2 { color: #0C111C !important; }
#changeSubscriptionModal .pricing-card.is-active .pricing-card-inner {
    border-color: rgb(255,104,57) !important; box-shadow: 0 0 0 3px rgba(255,104,57,.12);
}
#changeSubscriptionModal .pln-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
#changeSubscriptionModal .pricing-card-icon { flex: 0 0 auto; }
#changeSubscriptionModal .pricing-card-icon img { width: 48px !important; height: 48px !important; object-fit: contain; }
#changeSubscriptionModal .pln-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
#changeSubscriptionModal .pln-name { font-size: 19px !important; font-weight: 800 !important; line-height: 1.2; margin: 0 !important; }
#changeSubscriptionModal .pln-head-text .badge {
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .3px; text-transform: uppercase;
    background: #ECFDF3 !important; color: #166534 !important;
}
#changeSubscriptionModal .pln-desc { font-size: 13px; color: #7C8698 !important; margin: 0 0 12px; min-height: 20px; }
#changeSubscriptionModal .pricing-card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#changeSubscriptionModal .pricing-card-price h3 { font-size: 30px !important; font-weight: 800 !important; margin: 0 !important; line-height: 1.1; color: #0C111C !important; }
#changeSubscriptionModal .pricing-card-price .price-day { font-size: 13px; font-weight: 600; color: #7C8698; }
#changeSubscriptionModal .pricing-card-content { border-top: 1px dashed #E4E7EE !important; padding-top: 14px !important; margin-top: 16px !important; }
#changeSubscriptionModal .pricing-card-list li { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 10px !important; font-size: 13.5px; font-weight: 500; color: #3B4060; line-height: 1.45; }
#changeSubscriptionModal .pricing-card-list li .mdi {
    flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; margin: 1px 0 0 !important;
}
#changeSubscriptionModal .pricing-card-list li .mdi-check { background: #ECFDF3; color: #16A34A !important; }
#changeSubscriptionModal .pricing-card-list li .mdi-close { background: #FEF2F2; color: #EF4444 !important; }
#changeSubscriptionModal .pricing-card-btm { position: static !important; margin-top: auto !important; padding-top: 16px; }
#changeSubscriptionModal .pricing-card-btm .btn {
    width: 100%; border-radius: 10px !important; padding: 10px 16px; font-size: 14px; font-weight: 700;
    background: #FFF4EF !important; color: #D65419 !important; border: 1px solid #FFD9C9 !important; transition: background .15s, color .15s;
}
#changeSubscriptionModal .pricing-card-btm .btn:hover,
#changeSubscriptionModal .pricing-card.is-active .pricing-card-btm .btn,
#changeSubscriptionModal .pricing-card-inner:hover .pricing-card-btm .btn {
    background: rgb(255,104,57) !important; color: #fff !important; border-color: rgb(255,104,57) !important;
}

/* skeleton loaders (plans + checkout) */
@keyframes plnShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.pln-skel { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 16px; border: 1px solid #E4E7EE; background: #fff; height: 100%; }
.pln-skel-flat { min-height: 150px; }
.pln-skel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.pln-skel-icon, .pln-skel-line, .pln-skel-price, .pln-skel-btn {
    display: block; border-radius: 8px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F8FAFC 50%, #EEF1F6 75%); background-size: 200% 100%;
    animation: plnShimmer 1.4s ease-in-out infinite;
}
.pln-skel-icon { width: 48px; height: 48px; border-radius: 12px; flex: 0 0 48px; }
.pln-skel-line { height: 12px; width: 100%; }
.pln-skel-line.w-50 { width: 50%; } .pln-skel-line.w-75 { width: 75%; }
.pln-skel-price { height: 30px; width: 45%; margin: 4px 0; }
.pln-skel-btn { height: 40px; width: 100%; border-radius: 10px; margin-top: auto; }

/* checkout ("Shift to Plan") */
#checkoutSubscriptionModal .modal-body { padding: 24px !important; background: #F6F8FB; }
#checkoutSubscriptionModal .card-body { padding: 0 !important; }
#checkoutSubscriptionModal .subscription-card-left { height: 100%; }
#checkoutSubscriptionModal .subscription-card {
    background: #fff; border: 1px solid #E4E7EE; border-radius: 16px; padding: 22px 18px;
}
#checkoutSubscriptionModal .subscription-card .pricing-card-icon img { width: 44px !important; height: 44px !important; object-fit: contain; }
#checkoutSubscriptionModal .subscription-card .pricing-card-icon { margin-right: 12px !important; }
#checkoutSubscriptionModal .subscription-card h2 { font-size: 18px !important; font-weight: 800 !important; }
#checkoutSubscriptionModal .subscription-card h3 { font-size: 26px !important; font-weight: 800 !important; color: #D65419 !important; margin: 4px 0 2px; }
#checkoutSubscriptionModal .subscription-card p { font-size: 13px; color: #7C8698; margin: 0; font-weight: 600; }
#checkoutSubscriptionModal .pln-arrow {
    display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center;
    background: #FFF4EF; color: rgb(255,104,57); font-size: 22px; border: 1px solid #FFD9C9;
}
#checkoutSubscriptionModal .subscription-card-right { background: #fff; border: 1px solid #E4E7EE; border-radius: 16px; padding: 6px 4px; height: 100%; }
#checkoutSubscriptionModal .subscription-card-right > div { border-bottom: 1px dashed #E4E7EE; padding: 12px 16px !important; font-size: 14px; }
#checkoutSubscriptionModal .subscription-card-right > div:last-child { border-bottom: 0; }
#checkoutSubscriptionModal .subscription-card-right .font-weight-medium { color: #7C8698; font-weight: 600 !important; }
#checkoutSubscriptionModal .subscription-card-right .font-weight-semibold { color: #0C111C; font-weight: 700 !important; }
#checkoutSubscriptionModal .pay-method-section { padding-top: 22px !important; }
#checkoutSubscriptionModal .pln-pay-title { font-size: 15px; color: #0C111C; padding: 0 !important; }
#checkoutSubscriptionModal .pay-method-box {
    box-shadow: none !important; border: 1px solid rgb(255,104,57) !important; background: #FFF4EF !important;
    border-radius: 12px !important; padding: 12px 14px !important; margin: 0 !important; gap: 12px; flex-wrap: nowrap !important;
}
#checkoutSubscriptionModal .pay-method-box .pay-method-icon { width: 40px !important; flex: 0 0 40px; }
#checkoutSubscriptionModal .pay-method-box .pay-method-icon img { width: 40px; height: 40px; object-fit: contain; }
#checkoutSubscriptionModal .pay-method-box .form-check { width: auto !important; flex: 1; padding-left: 0 !important; display: flex; align-items: center; justify-content: space-between; }
#checkoutSubscriptionModal .pay-method-box .form-check h6 { font-size: 14.5px; color: #0C111C; }
#checkoutSubscriptionModal .card-footer { background: transparent !important; border-top: 1px solid #EEF1F6 !important; padding: 18px 0 0 !important; margin-top: 22px; }
/* checkout pay radio: white ring + centred brand dot (theme filled the ring itself) */
#checkoutSubscriptionModal .pay-method-box .form-check [type="radio"] + label::before,
#checkoutSubscriptionModal .pay-method-box .form-check [type="radio"]:checked + label::before {
    background: #fff !important; border: 2px solid rgb(255,104,57) !important; width: 20px !important; height: 20px !important;
}
#checkoutSubscriptionModal .pay-method-box .form-check [type="radio"]:checked + label::after {
    width: 10px !important; height: 10px !important; left: 5px !important; top: 5px !important; transform: none !important;
    background: rgb(255,104,57) !important; border-radius: 50%;
}

/* point maps on view pages: the Leaflet/OSM container needs an explicit height, the same 225px the Google embed used */
.mapouter .leaflet-container { height: 100%; min-height: 225px; border-radius: 12px; }

/* underline tab strips (.ec-lang-tabs) never take a brand background, so the pill-tab hover rule above must not paint their label white */
.page-wrapper .nav-tabs.ec-lang-tabs .nav-link:hover,
.page-wrapper .nav-tabs.ec-lang-tabs .nav-link:focus,
.page-wrapper .ec-lang-tabs .nav-link:hover,
.page-wrapper .ec-lang-tabs .nav-link:focus { color: var(--admin-panel-color) !important; background: transparent !important; }
.page-wrapper .nav-tabs.ec-lang-tabs .nav-link:not(.active):not(:hover) { color: #8a90a6 !important; }

/* ── select2, everywhere ──────────────────────────────────────────────────────
   One look for every single-select on any page (the filter-card and form-card
   rules above stay as they are; these are the fallback for selects outside them,
   e.g. the status changer on a detail page). */
.page-wrapper .select2-container--default .select2-selection--single {
    height: 40px; background: #fff; border: 1px solid #e2e6ef; border-radius: 10px;
    display: flex; align-items: center; padding: 0 12px;
}
.page-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0C111C; font-size: 14px; line-height: 1.4; padding: 0 28px 0 0 !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 100%; max-width: none !important;
}
.page-wrapper .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #b3b9c9; }
.page-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 8px; }
.page-wrapper .select2-container--default.select2-container--focus .select2-selection--single,
.page-wrapper .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--admin-panel-color); box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e2e6ef; border-radius: 8px; padding: 7px 10px; font-size: 14px; outline: none; box-shadow: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--admin-panel-color); }
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-results__option { padding: 8px 12px; font-size: 14px; color: #0C111C; }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12) !important; color: var(--admin-panel-color) !important;
}
/* gallery remove badge above the image */
.restaurant_image .image-item span.remove-btn, .placeholder_img_thumb .image-item .remove-btn, span.remove-menu-btn { z-index: 2; }

/* sub-tab strip: identical treatment for active and hover */
.menu-tab > ul > li > a:hover, .menu-tab > ul > li.active > a { color: var(--admin-panel-color); border-bottom: 2px solid var(--admin-panel-color); }
.menu-tab > ul > li > a:visited { color: #8a90a6; }
.menu-tab > ul > li.active > a:visited { color: var(--admin-panel-color); }

/* ── Advertisement view ─────────────────────────────────────────────────────── */
.ad-view .ec-detail-row { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px dashed #E4E7EE; gap: 16px; }
.ad-view .ec-detail-row:last-child { border-bottom: 0; }
.ad-view .ec-detail-label { flex: 0 0 170px; font-size: 13px; font-weight: 600; color: #7C8698; }
.ad-view .ec-detail-value { flex: 1; font-size: 14px; font-weight: 600; color: #0C111C; word-break: break-word; min-width: 0; }
.ad-view .ec-detail-value .badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ad-status-row { display: flex; align-items: center; gap: 10px; max-width: 420px; }
.ad-status-row .select2-container { flex: 1; min-width: 0; }
.ad-status-row select { flex: 1; }
.ad-media { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-top: 16px; }
.ad-media-tile { min-width: 0; }
.ad-media-tile-full { grid-column: 1 / -1; }
.ad-media-cap { display: block; font-size: 12px; font-weight: 600; color: #7C8698; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.ad-media-frame { height: 180px; border-radius: 12px; overflow: hidden; background: #F6F8FB; border: 1px solid #E4E7EE; }
.ad-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-media-video { height: auto; background: #0C111C; }
.ad-media-video video { width: 100%; max-height: 360px; display: block; }
.ad-media .d-none { display: none !important; }
.ad-vendor { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; text-decoration: none !important; }
.ad-vendor img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; border: 1px solid #E4E7EE; }
.ad-vendor .vendor-title { font-size: 16px; font-weight: 700; color: #0C111C; margin: 0; }
.ad-vendor:hover .vendor-title { color: var(--admin-panel-color); }
.ad-view .switch-box-tight { display: inline-flex; align-items: center; }
@media (max-width: 767px) { .ad-media { grid-template-columns: 1fr; } .ad-view .ec-detail-label { flex-basis: 120px; } }

/* ── Document upload (vendor / driver) ──────────────────────────────────────── */
.doc-body .doc-preview .image-item { position: relative; display: inline-block; }
.doc-body img.ec-doc-thumb { width: 220px; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid #E4E7EE; display: block; cursor: zoom-in; }
.doc-body .doc-preview .remove-btn {
    position: absolute; top: -8px; right: -8px; z-index: 2; width: 24px; height: 24px; border-radius: 50%;
    background: var(--admin-panel-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer;
}

/* ── Documents (vendor / driver): one card per required document ───────────── */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.doc-card { border: 1px solid #E4E7EE; border-radius: 14px; background: #fff; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.doc-card-head { display: flex; align-items: center; gap: 12px; }
.doc-card-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10); color: var(--admin-panel-color); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.doc-card-title { flex: 1 1 auto; min-width: 0; }
.doc-card-name { font-size: 15px; font-weight: 700; color: #0C111C; }
.doc-card-sub { font-size: 12px; color: #7C8698; }
.doc-status-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.doc-status-badge.pending { background: #fef3c7; color: #92400e; }
.doc-status-badge.uploaded { background: #dbeafe; color: #1d4ed8; }
.doc-status-badge.approved { background: #d1fae5; color: #047857; }
.doc-status-badge.rejected { background: #fee2e2; color: #b91c1c; }
.doc-card-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.doc-image-wrap { border: 1px dashed #d1d5db; border-radius: 10px; padding: 8px; text-align: center; background: #f9fafb; }
.doc-image-label { font-size: 11.5px; font-weight: 600; color: #6b7280; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.doc-image-wrap img { width: 100%; height: 150px; object-fit: contain; border-radius: 6px; background: #fff; cursor: zoom-in; }
.doc-no-image { height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #9ca3af; font-size: 12.5px; font-style: italic; }
.doc-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px dashed #E4E7EE; }
.doc-card-actions .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.doc-btn-approve { background: #d1fae5; color: #047857 !important; border: 1px solid #a7f3d0; }
.doc-btn-approve:hover { background: #047857; color: #fff !important; }
.doc-btn-reject { background: #fee2e2; color: #b91c1c !important; border: 1px solid #fecaca; }
.doc-btn-reject:hover { background: #b91c1c; color: #fff !important; }
.doc-empty { padding: 24px 0; text-align: center; }
.doc-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); z-index: 10000; display: none; align-items: center; justify-content: center; cursor: zoom-out; }
.doc-lightbox.is-open { display: flex; }
.doc-lightbox img { max-width: 92vw; max-height: 92vh; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); border-radius: 4px; }


/* gateway chips (.payment-top-tab) are filled pills: keep the brand fill + contrast label on hover/focus (the underline-strip hover rule above must not blank them) */
.page-wrapper .payment-top-tab .ec-lang-tabs .nav-link:hover,
.page-wrapper .payment-top-tab .nav-tabs.ec-lang-tabs .nav-link:hover,
.page-wrapper .payment-top-tab .ec-lang-tabs .nav-link:focus,
.page-wrapper .payment-top-tab .nav-tabs.ec-lang-tabs .nav-link:focus { background: var(--admin-panel-color) !important; color: var(--admin-panel-contrast, #fff) !important; }

/* select2 inside detail rows (ad view status changer): the theme positions .select2.select2-container absolutely for its old form layout — keep it in flow here */
.ec-detail-value .select2.select2-container, .ad-status-row .select2.select2-container { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; flex: 1 1 auto; }
/* select2 inside Bootstrap modals (Assign Driver on orders): same absolute-position leftover collapsed the control to its minimum width */
.modal .select2.select2-container { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; }
/* And the control itself: nothing styled select2 inside a modal, so it fell back to the
   library defaults (28px tall, borderless) and the theme''s 107px label cap from the old
   flag-selects truncated the value. Same field look as the filter cards. */
.modal .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 14px;
}
.modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    max-width: none !important;
    padding: 0 24px 0 0 !important;
    line-height: 1.4;
    font-size: 14px;
    color: #0C111C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    top: 1px;
    right: 8px;
}
/* The open panel: the base theme sets .select2-container--open .select2-dropdown{border:0},
   which beat the design-system panel style, so inside a modal the list had no outline and
   merged into the page behind it. select2 keeps its own inline min-width (copied from the
   trigger), so the panel still matches the field width. Search box and option rows are
   already themed globally. */
.modal .select2-container--open .select2-dropdown,
.modal .select2-dropdown {
    border: 1px solid #e2e6ef !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    overflow: hidden;
}
/* The Assign Driver dialog holds a single select, so the card was shorter than the open
   list and the options hung over the backdrop outside it. Reserve the panel's height so
   the list always lands on the card. */
/* Reserve the height permanently: growing the body when the list opens shifted the
   layout, and select2 closes its panel on the resulting scroll — the dropdown could
   not be opened by mouse at all. */
#assignDriverModal .modal-body { min-height: 300px; }

/* ── Attribute rows + tags input (foods / bulk-import forms) ─────────────────── */
#item_attributes .row { align-items: center; margin-bottom: 10px; }
#item_attributes .row > [class*="col-"] > label { font-size: 13px; font-weight: 600; color: #3b4060; margin: 0; }
.bootstrap-tagsinput {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: 40px;
    padding: 5px 10px; border: 1px solid #E4E7EE; border-radius: 10px; box-shadow: none; background: #fff; line-height: 1.4;
}
.bootstrap-tagsinput input { border: 0; box-shadow: none; outline: none; font-size: 14px; min-width: 160px; flex: 1; padding: 4px 0; margin: 0; background: transparent; }
.bootstrap-tagsinput .tag, .bootstrap-tagsinput .badge {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 8px 4px 10px; border-radius: 8px;
    background: rgba(var(--admin-panel-rgb, 255, 104, 57), .12); color: var(--admin-panel-color); font-size: 13px; font-weight: 600; line-height: 1.3;
}
.bootstrap-tagsinput .tag [data-role="remove"] { margin: 0; padding: 0; opacity: .7; }
.bootstrap-tagsinput .tag [data-role="remove"]::after { content: "×"; font-size: 14px; padding: 0; box-shadow: none; }
.bootstrap-tagsinput .tag [data-role="remove"]:hover { opacity: 1; box-shadow: none; }

/* ── Variants table ────────────────────────────────────────────────────────── */
#item_variants { margin-top: 12px; }
#item_variants .table { border: 1px solid #EEF1F6; border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0; margin: 0; }
#item_variants .table thead th, #item_variants .table.table-bordered thead th {
    background: #F6F8FB; border: 0; border-bottom: 1px solid #EEF1F6; padding: 10px 12px;
    font-size: 12px; font-weight: 700; color: #7C8698; text-transform: uppercase; letter-spacing: .3px; text-align: left !important;
}
#item_variants .table td, #item_variants .table.table-bordered td { border: 0; border-bottom: 1px dashed #E4E7EE; padding: 10px 12px; vertical-align: middle; }
#item_variants .table tr:last-child td { border-bottom: 0; }
#item_variants .table td .control-label { font-size: 13.5px; font-weight: 600; color: #0C111C; margin: 0; }
#item_variants .table td .form-control { height: 38px; max-width: 220px; }
#item_variants .variant-image .upload { display: flex; align-items: center; gap: 10px; }
#item_variants .variant-image .image img { width: 44px !important; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid #E4E7EE; }
#item_variants .variant-image .icon .mdi {
    display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 9px;
    background: rgba(var(--admin-panel-rgb, 255, 104, 57), .10); color: var(--admin-panel-color); font-size: 18px; cursor: pointer;
}
#item_variants .variant-image .icon .mdi:hover { background: var(--admin-panel-color); color: #fff; }

/* ── Report result tables (tax / sales) ─────────────────────────────────────── */
.ec-report-card { margin-top: 18px; }
.ec-report-table { margin: 0; border-collapse: separate; border-spacing: 0; }
.ec-report-table thead th { background: #F6F8FB; border: 0; border-bottom: 1px solid #EEF1F6; padding: 11px 16px; font-size: 12px; font-weight: 700; color: #7C8698; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.ec-report-table td { border: 0; border-bottom: 1px dashed #E4E7EE; padding: 12px 16px; font-size: 14px; color: #0C111C; vertical-align: top; }
.ec-report-table tbody tr:last-child td { border-bottom: 0; }
.ec-report-table .tax-summary { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #44506A; }
.ec-report-table .tax-summary strong { color: #0C111C; font-weight: 700; margin-top: 6px; }
.ec-report-table .tax-summary strong:first-child { margin-top: 0; }
.ec-report-table .tax-summary br { display: none; }
.ec-report-table .tax-summary .tax-final { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #E4E7EE; color: #D65419; }
.ec-report-table .ec-icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid #E4E7EE; background: #fff; color: #44506A; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ec-report-table .ec-icon-btn:hover { border-color: var(--admin-panel-color); color: var(--admin-panel-color); background: rgba(var(--admin-panel-rgb, 255, 104, 57), .08); }
.ec-report-table .ec-money { font-weight: 700; }

/* SweetAlert dialogs (ecAlert / ecConfirm) */
.swal2-popup.ec-swal { border-radius: 16px; font-family: inherit; padding: 28px 24px 24px; }
.swal2-popup.ec-swal .swal2-html-container { font-size: 15px; color: #0C111C; line-height: 1.5; }
.swal2-popup.ec-swal .swal2-styled { border-radius: 10px; font-weight: 700; font-size: 14px; padding: 9px 22px; box-shadow: none !important; margin: 0 6px; }
.swal2-popup.ec-swal .swal2-cancel { background: #F6F8FB !important; color: #44506A !important; border: 1px solid #E4E7EE !important; }
.swal2-popup.ec-swal .swal2-icon { margin: 0 auto 14px; transform: scale(.9); }

/* ── Live tracking ─────────────────────────────────────────────────────────── */
.lt-search { position: relative; margin-bottom: 12px; }
.lt-search .mdi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #A5AEC1; font-size: 18px; pointer-events: none; }
.lt-search input.form-control { padding-left: 38px; height: 40px; border-radius: 10px; }
.lt-card .ride-list { max-height: 560px; overflow: auto; padding-right: 4px; }
.live-tracking-list .live-tracking-box { border: 1px solid #EEF1F6; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.live-tracking-list .live-tracking-box:hover { border-color: rgba(var(--admin-panel-rgb, 255, 104, 57), .5); background: rgba(var(--admin-panel-rgb, 255, 104, 57), .04); }
.live-tracking-list .live-tracking-inner { display: flex; flex-direction: column; gap: 6px; }
.live-tracking-list .listicon { display: none; }
.live-tracking-list .drier-name { font-size: 14px; font-weight: 700; color: #0C111C; margin: 0; }
.live-tracking-list .drier-name .dvrname { font-weight: 700; }
.live-tracking-list .user-name { font-size: 13px; font-weight: 500; color: #44506A; margin: 0; }
.live-tracking-list .location-ride { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: #7C8698; padding-left: 12px; border-left: 2px dashed #E4E7EE; }
.live-tracking-list .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-right: 6px; }
.live-tracking-list .badge-success { background: #ECFDF3; color: #166534; }
.live-tracking-list .badge-danger { background: #FEF2F2; color: #991B1B; }
.live-tracking-list .badge-info { background: rgba(var(--admin-panel-rgb, 255, 104, 57), .12); color: var(--admin-panel-color); text-decoration: none; }
#map { height: 600px; border-radius: 12px; overflow: hidden; border: 1px solid #EEF1F6; }
#legend, .legend #legend { font-family: inherit; background: #fff; border: 1px solid #E4E7EE; border-radius: 10px; box-shadow: 0 6px 18px rgba(15,23,42,.10); padding: 10px 12px; margin: 10px; display: inline-flex; align-items: center; gap: 12px; }
#legend h3 { font-size: 12px; font-weight: 700; color: #7C8698; text-transform: uppercase; letter-spacing: .3px; margin: 0; }
#legend > div { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0C111C; }
#legend img { width: 18px; height: 18px; vertical-align: middle; }

.live-tracking-list .badge { align-self: flex-start; }
.live-tracking-list .live-tracking-inner > a.badge + .badge, .live-tracking-list .live-tracking-inner .badge + a.badge { margin-left: 0; }
.leaflet-bottom .legend > h4, .leaflet-bottom .legend > h3:not(#legend h3) { display: none; }

/* attribute rows: tight label column */
#item_attributes .row > .col-md-3 { flex: 0 0 150px; max-width: 150px; }
#item_attributes .row > .col-lg-9 { flex: 1 1 auto; max-width: none; }
/* AI "Generate" links that open a card sit at the right edge */
.ec-form-card .card-body > .generate_btn_wrapper, .ec-form-card .card-body > .w-100 > .generate_btn_wrapper.d-block { display: flex; margin-left: auto; width: max-content; margin-bottom: 4px; }


/* ── Radio / checkbox option groups on form pages (.form-check.width-50 / .width-100) ──
   Group label on its own line; the options sit in one 40px-tall row (so they centre against an
   input beside them); circle 8px from its text; 22px between options. */
.page-wrapper.form-page label.ec-form-label:has(+ .form-check.width-50),
.page-wrapper.form-page label.ec-form-label:has(+ .form-check.width-100),
.page-wrapper.form-page label.ec-form-label:has(+ .d-flex > .form-check.width-50) { display: block; margin-bottom: 6px; }
.page-wrapper.form-page .form-check.width-50:has(> label.ec-form-label),
.page-wrapper.form-page .form-check.width-100:has(> label.ec-form-label) {
    display: inline-flex !important; align-items: center; width: auto !important; min-height: 40px;
    padding: 0 !important; margin: 0 22px 0 0 !important; vertical-align: middle; gap: 0 !important;
}
.page-wrapper.form-page .form-check.width-50:has(> label.ec-form-label) > input[type="radio"],
.page-wrapper.form-page .form-check.width-100:has(> label.ec-form-label) > input[type="radio"],
.page-wrapper.form-page .form-check.width-50:has(> label.ec-form-label) > input[type="checkbox"],
.page-wrapper.form-page .form-check.width-100:has(> label.ec-form-label) > input[type="checkbox"] { position: static !important; margin: 0 8px 0 0 !important; flex: 0 0 auto; }
.page-wrapper.form-page .form-check.width-50:has(> label.ec-form-label) > label,
.page-wrapper.form-page .form-check.width-100:has(> label.ec-form-label) > label { margin: 0 !important; line-height: 1.2; padding: 0 !important; }
.page-wrapper.form-page .form-check.width-50:has(> label.ec-form-label) > .form-control,
.page-wrapper.form-page .form-check.width-100:has(> label.ec-form-label) > .form-control { width: 160px !important; height: 40px; }
/* the .d-flex wrapper that carries the second option (+ its input) stays on the same row */
.page-wrapper.form-page .form-check.width-100:has(> label.ec-form-label) + .d-flex,
.page-wrapper.form-page .form-check.width-50:has(> label.ec-form-label) + .d-flex { display: inline-flex !important; align-items: center; vertical-align: middle; }

/* dependent option boxes hidden by JS must stay hidden (bootstrap .d-none loses to the inline-flex rule above by order) */
.page-wrapper.form-page .form-check.width-50.d-none, .page-wrapper.form-page .form-check.width-100.d-none { display: none !important; }
/* option radios/checkboxes are a fixed 16px box, whatever the theme adds */
.page-wrapper.form-page .form-check.width-50:has(> label.ec-form-label) > input[type="radio"], .page-wrapper.form-page .form-check.width-100:has(> label.ec-form-label) > input[type="radio"], .page-wrapper.form-page .form-check.width-50:has(> label.ec-form-label) > input[type="checkbox"], .page-wrapper.form-page .form-check.width-100:has(> label.ec-form-label) > input[type="checkbox"] { width: 16px !important; height: 16px !important; min-width: 0 !important; max-width: 16px; padding: 0 !important; box-sizing: border-box; }
/* AI "Generate" link in a card that has it above the fields: right-aligned, flush with the input column */
.ec-form-card .card-body > .row > .width-100.text-right { padding: 0 15px; }
.ec-form-card .card-body > .row > .width-100.text-right > .generate_btn_wrapper, .ec-form-card .card-body > .generate_btn_wrapper { display: inline-flex !important; margin-left: auto !important; float: none !important; }
.ec-form-card .card-body > .row > .width-100.text-right { display: flex; justify-content: flex-end; }

.ec-form-card .card-body > .row > .width-100.text-right { flex: 0 0 100%; max-width: 100%; width: 100%; }

/* AI "Generate" link: left side, flush with the first input */
.ec-form-card .card-body > .row > .width-100.text-right { justify-content: flex-start !important; text-align: left !important; }
.ec-form-card .card-body > .row > .width-100.text-right > .generate_btn_wrapper, .ec-form-card .card-body > .generate_btn_wrapper { margin-left: 0 !important; padding-left: 0 !important; }

/* ── User / Driver view (restaurant-view vocabulary) ─────────────────────────── */
.rv-facts.rv-facts-2 { grid-template-columns: 2fr 1fr; }
.rv-page .rv-map .mapouter:empty { display: none; }
.rv-user-default-addr:empty::before, .rv-driver-zone:empty::before { content: "\2014"; color: #A5AEC1; }
/* address tiles: the JS emits .res-search-list.row > .transactions-list-wrap.col-md-12 > .transactions-list-view */
.rv-addr-list .res-search-list { margin: 0 -6px; }
.rv-addr-list .transactions-list-wrap { flex: 0 0 50%; max-width: 50%; padding: 0 6px; margin-top: 0 !important; margin-bottom: 12px; }
.rv-addr-list .transactions-list-view { border: 1px solid #EEF1F6; border-radius: 12px; padding: 12px 14px; box-shadow: none !important; margin: 0 !important; height: 100%; }
.rv-addr-list .transactions-list-view h6 { font-size: 14px; font-weight: 600; color: #0C111C; margin: 0 0 8px; line-height: 1.5; }
.rv-addr-list .badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.rv-addr-list .badge-info { background: #F6F8FB; color: #44506A; }
.rv-addr-list .badge-success { background: #ECFDF3; color: #166534; }
.rv-addr-list > h5 { font-size: 14px; color: #7C8698; font-weight: 500; margin: 0; }
@media (max-width: 767px) { .rv-addr-list .transactions-list-wrap { flex-basis: 100%; max-width: 100%; } .rv-facts.rv-facts-2 { grid-template-columns: 1fr; } }

.rv-addr-list .transactions-list-wrap, .rv-addr-list .gold-members, .rv-addr-list .media, .rv-addr-list .transactions-list-left { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; }

/* Identity cell used by the roles listing: round initial avatar + name (+ a crown
   badge on the locked Super Administrator row). The avatar sizing lived only in the
   partial rule above, and .ec-seller / .ec-seller-name / .ec-verified-badge had no
   rules at all, so the cell rendered as plain text. */
.ec-seller { display: inline-flex; align-items: center; min-width: 0; line-height: 1; }
.ec-seller-avatar,
.ec-avatar-fallback {
    width: 36px; height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(var(--admin-panel-rgb, 255, 104, 57), .14);
    color: var(--admin-panel-color);
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.ec-seller-name {
    font-size: 13.5px;
    color: #3b4060;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.ec-seller-name:hover { color: var(--admin-panel-color); text-decoration: none; }
.ec-verified-badge { color: #22c55e; font-size: 15px; vertical-align: middle; margin-left: 4px; }

/* ── Role permissions popup: allowed permissions shown as ticked labels, grouped by
      menu, so it reads like the role form instead of a wall of raw slugs. ────────── */
.perm-scroll { max-height: 60vh; overflow-y: auto; }
.perm-table th { font-weight: 600; }
.perm-table td { vertical-align: middle; }
.perm-table td:first-child { width: 34%; white-space: nowrap; }
.perm-allowed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px 14px 3px 0;
    font-size: 13px;
    color: #4a4a4a;
    white-space: nowrap;
}
.perm-allowed .mdi-check-circle { color: #fc6c3f; font-size: 16px; line-height: 1; }



/* Roles listing: the permission count is a button that opens the role's permission
   list, so it is outlined in the brand colour rather than looking like a grey label. */
.ec-cat-chip.ec-count-chip {
    background: #fff;
    border: 1px solid var(--admin-panel-color);
    color: var(--admin-panel-color);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
    transition: background .15s, color .15s;
}
.ec-cat-chip.ec-count-chip:hover,
.ec-cat-chip.ec-count-chip:focus {
    background: var(--admin-panel-color);
    color: var(--admin-panel-contrast, #fff);
}
.ec-cat-chip.ec-count-chip i { font-size: 14px; }